dochtml
download 
Plainte Transcription
html
Web Statique Arnaud FREY Introduction • HyperText Markup Language (HTML) un langage de balisage adapté aux pages web. • Structure, met en forme et inclus des ressources aux documents sur le web • Dérivé de SGML, il est la base du World Wide Web. • Développé par Tim Berners-Lee au CERN (Suisse) en 1990 et utilisé sur le web depuis 2 Historique • 1989 - 1992 : création de HTML, HTTP et les adresses web (URL) • 1993 : NCSA Mozaic, premier navigateur graphique, début de l’e-commerce. • 1995 - 1996 : fondation du W3C et création de HTML 2.0 • 1997 : HTML 3.2 puis 4.0, inclu les tables puis le support des styles et des scripts 3 Historique • 1999 : HTML 4.1 correction de HTML 4.0 • 2000 - 2006 : XHTML (eXtensible HTML) puis XHTML 1.1 légèrement enrichi. • 2007 à nos jours : 2 projets parallèles - XHTML 2.0 (simplification de balises) - HTML 5 (nouvelles balises) 4 Vocabulaire • Élément : nom, notion abstraite - Ex : Document HTML : html • Balise : forme concrète d’un élement - Ex : de balise ouvrante : <html> - Ex de balise fermante : </html> • Attribut : propriété d’un élément - Ex : <html (nom, valeur) xmlns="http://www.w3.org/1999/xhtml"> nom valeur 5 Exemple <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Exemple XHTML 1.0</title> </head> <body> <ul> <li>Tous les éléments doivent être explicitement balisés.</li> <li>Les balises fermantes ne sont pas optionnelles.</li> <li>Les noms d'éléments et d'attributs <em class="important">doivent</em> être en minuscules.</li> <li>Tous les attributs doivent avoir une valeur explicite <input type="checkbox" checked="checked" value="..." />.</li> <li>Les guillemets sont <em class="important">toujours</em> obligatoires autour des valeurs d'attribut.</li> <li>Les éléments vides doivent être fermés <img src="i.png" alt="i"/>.</li> </ul> </body> </html> 6 Séparer Fond et Forme • Fond : structure du document - Titres, paragraphes, listes, ... • Forme : effets de style - Alignement, taille et couleur du texte, ... • HTML 1,2 et 3 permettaient les 2 - Code illisibles 7 Séparer Fond et Forme • XHTML pour le fond, CSS pour la forme • Supports de visualisation finaux différents - diverses résolutions écran, mobile, imprimante... • Avantage : - modification du style du site - plusieurs styles pour un même document Exemples : - XHTML - XHTML avec CSS 8 Notion de DTD • Document Type Definition • Indique les éléments pouvant apparaître et leur contenu (conformité à une syntaxe) • 3 types de DTD en XHTML - Strict - Transitional (permissive, passage “en douceur”) - Frameset (encore plus permissive) • Pas HTML mais SGML (donc avant <html>) 9 Encoding • Selon les pays (et la langue) l’encodage des caractères est différent • Exemple : Caractère e é ISO-8859-1 UTF-8 1100101 1100101 11101001 11000011 10101001 • Dans un soucis de compatibilité avec les différents navigateurs • On précise l’encodage du document au début de celui-ci : <?xml version=”1.0” encoding=”utf-8”> 10 Règles de base XHTML • Minuscules • Eléments requis • Valeur des attributs • Réduction des attributs • Balise de fermeture • Eléments vides • Imbrication 11 • XML est sensible à la casse (maj/min) • Tous les éléments et attributs s’écrivent en Règles de base Minuscules minuscule • Exemple : - <html> et pas <HTML> ou <HtmL> 12 <?xml version=”1.0” encoding=”utf-8”> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Exemple XHTML 1.0</title> </head> <body> Règles de base Document minimal En-tête du document Corps du document </body> </html> Remarque : le titre est obligatoire dans l’en-tête 13 • La valeur des attributs doit toujours être Règles de base Valeur des attributs entre guillemets • Exemple : <html xmlns=“http://www.w3.org/1999/xhtml”> 14 • Un attribut est toujours suivi d’une valeur en XML Règles de base Réduction des attributs • ainsi ce qui se faisait en HTML : - <select name=“top” multiple> • donne en XHTML : - <select name=“top” multiple=“multiple”> 15 • Une balise ouverte dois toujours être refermée • La plupart des balises XHTML sont des Règles de base Balise de fermeture conteneurs - <balise ouvrante> contenu <balise fermante> • Certaines balises (balises vides) n’ont pas de contenu - soit on rajoute un “/” : <br /> ou <img /> - rajouter une balise de fermeture explicite : <br></br> 16 • Dans le cas de balises imbriqués, veiller à Règles de base Imbrication refermer les balises dans l’ordre strictement inverse à leur ouverture. • Exemple : - <a href=”ex.html”>partie<b>en gras</b></a> - et pas <a href=”ex.html>partie<b>en gras</a></b> 17 Validateur XHTML • Le W3 met à disposition de tout le monde un validateur de code xhtml : http://validator.w3.org • Si le code est conforme : 18 Les commentaires • Les commentaires sont ignorés • Syntaxe : <!-- commentaire --> • Exemple - <!-- DTD --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!-- Document HTML --> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <!-- En-tête --> <head> 19 Les accents • Anciens navigateurs ne connaissent pas - <?xml version=“1.0” encoding=”utf-8”> • Préciser en métadonnée - <meta http-equiv=“content-type” content=“text/html; charset=UTF-8” /> • Sinon : Remplacer # par une lettre accent grave accent aigu accent circonflexe Tréma Cédille &#grave; &#acute; &#circ; &#uml; &#cedil; 20
