Une (petite) initiation au langage HTML Julien Coulié Partie 1 : Les bases Le langage HTML (HyperText Markup Language) est un langage de description de documents qui est le standard utilisé pour les pages web. Le contenu d un fichier HTML se divise en deux parties : le contenu de la page web et les balises (le code HTML). Une balise se reconnaît car elle est entourée des caractères "<" et ">". Par exemple, <p> est une balise. Ces balises sont uniquement utilisées par le navigateur (le logiciel que vous utilisez pour afficher les pages web) pour hiérarchiser et mettre en forme le contenu de la page. Une page web n est rien d autre qu un fichier texte interprété par un navigateur, un éditeur de texte tel que le bloc-notes de Windows suffit pour en créer une. Un fichier HTML (.html) est composé d un en-tête (head) puis d un corps (body). L en-tête contient plusieurs informations sur la page : son titre (qui apparaît dans la barre de titre de la fenêtre), les motsclés utilisés par les moteurs de recherche, des appels vers d autres fichiers (css ou JavaScript par exemple). Le corps quant à lui contient tous les éléments qui apparaissent dans la page web. Dernière chose, une balise s ouvre mais se referme aussi : la balise fermante est identique à celle qui ouvre, avec un «/» après le «<». Voici le contenu d un fichier HTML pour une page web minimale : <html> <head> <title>le minimalisme </title> </head> <body> Hello world </body> </html> Pour trouver des exemples de pages web, rien de plus simple : il est possible de regarder comment un site web est conçu en allant dans le menu Affichage de votre navigateur puis de cliquer sur «Afficher la source». Vous aurez alors accès au code HTML de la page. Les principales balises HTML : <html>...</html> <head>...</head> <body>...</body> <title>...</title> Début et fin de fichier HTML En-tête d une page web Début et fin du corps de la page web Titre affiché par le navigateur (contenu dans le head)
Mise en forme des caractères : <h n > </h n > Titre où n est le niveau hiérarchique et est compris entre 1 et 7 <p> </p> Paragraphe <b> </b> Texte en gras <i> </i> Texte en italique <sub> </sub> Texte en indice <sup> </sup> Texte en exposant <u> </u> Texte souligné <center> </center> Centre tout élément compris entre les balises <br /> Saut de ligne (attention : pas de balise fermante!) <hr /> Trait horizontal La plupart des balises peuvent prendre des arguments. Ces derniers permettent de préciser la façon dont le contenu doit apparaître. Ils se mettent à l intérieur de la balise ouvrante, à la suite du nom de celle-ci, et sont séparés par un espace. En voici quelques uns : bgcolor="#rrvvbb" background="image.jpg" color="#rrvvbb" align="left" (ou center, right ou justify) Couleur d arrière plan en hexadécimal Image d arrière plan, au format jpg, gif ou png Couleur du texte Alignement horizontal, pour un titre ou un paragraphe par exemple <font color="#ff0000">ce texte sera rouge</font> mais la suite aura la couleur normale. <p align="right">ce (court) paragraphe sera aligné à droite</p> Les images : <img src="image.jpg" /> width=x height=y alt="un texte" Insertion d une image au format jpg, gif ou png Impose une dimension en pixels à l image Texte alternatif quand l image ne peut être affichée Les hyperliens : <a href="http://..."> </a> Lien vers une page web <a href="mailto : "> </a> Lien vers une adresse de courriel <a href="fichier.html"> </a> Lien vers une page locale Les listes : <ul> </ul> <ol> </ol> Liste à puces Liste numérotée
<li> </li> Elément de liste Les tableaux : <table> </table> <tr> </tr> <td> </td> <td colspan="x"> </td> <td rowspan="x"> </td> Définition d un tableau Définition d une ligne du tableau Cellule du tableau Fusionne x cellules horizontalement Fusionne x cellules verticalement Code hexadécimal pour la définition des couleurs : En langage HTML, les couleurs sont définies par leur code hexadécimal. Ce code utilise la synthèse additive et donne ainsi les composantes en rouge, vert et bleu. Chacune d elles étant définie par 2 caractères, variant de 0 à f. On obtient donc une valeur comprise entre 000000 (noir) et ffffff (blanc). Certaines couleurs peuvent aussi être appelées en mettant leur nom (en anglais) à la place de #rrvvbb : white, black, blue, red, green, yellow, purple, orange, maroon, smoke, snow, tomato, Afficher sa page web en local : Pour afficher le fruit de votre travail, il faut enregistrer le fichier HTML (attention de ne pas l enregistrer au format.txt) puis d ouvrir le fichier. Normalement, c est le navigateur web qui devrait se lancer. Pour éditer le fichier HTML par la suite, il suffira de démarrer l éditeur de texte puis d ouvrir le fichier à partir de ce dernier. Son site web à l EMAC : L école permet d héberger son site web grâce à son compte UNIX. Pour ce faire, il suffit de créer un répertoire "WWW" à la racine de son compte, et de mettre les droits en lecture et exécution à tous. A l intérieur de ce dossier, le fichier HTML représentant la page d accueil devra s appeler "index.html". On pourra accéder à ce dernier en tapant l adresse suivante : http://perso.enstimac.fr/~login Quelques adresses : - Un cours assez complet pour réaliser un site web : http://www.siteduzero.com/ - Une table des couleurs HTML parmi d autres : http://www.dsi.univparis5.fr/cocoul3t.html - Le validateur de code du World Wide Web Consortium : http://validator.w3.org/
Partie 2 : Tout est dans le style Vous avez vu avec la première partie que nous pouvons assez facilement donner un style particulier à notre page web, mais cela peut vite devenir laborieux dans le cas d un plus vaste projet (un site entier). Un exemple? Imaginez que vous vouliez attribuer une couleur à tous vos liens hypertextes. Il faudrait alors avec la méthode précédente inclure dans toutes les balises <a> l attribut color. Un peu lourd comme travail, non? Heureusement, c est là qu interviennent les CSS (Cascading Style Sheets), autrement dit les feuilles de style en cascade. CSS, entend mon appel! Pour utiliser ces CSS, on emploie dans le fichier html 2 attributs : id (comme identifiant) et class (comme classe, mais vous l auriez deviné sans moi j espère). La différence entre les deux est que le premier est unique, comme les empreintes digitales d une personne, alors que le second peut être utilisé plusieurs fois. L exemple suivant donnera l id "haut" à la balise img : <img src="mon_image.jpg" id="haut" /> Seule cette balise pourra avoir cet identifiant, et les propriétés qui y sont associées. L exemple suivant par contre montre que plusieurs balises peuvent bénéficier de l attribut class : <a href="lien1.html" class="navigation">premier lien</a> <a href="lien2.html" class="navigation">second lien</a> Utilisation La feuille de style est, de la même manière qu un fichier html, un simple fichier texte qui porte l extension.css. Deux autres moyens existent cependant pour utiliser les propriétés CSS : inclure une balise <style> </style> dans l en-tête du fichier html ou utiliser l attribut style à l intérieur des balises html. L exemple suivant montre comment utiliser les 3 méthodes possibles : <html> <head> <link type="stylesheet" type="text/css" href="feuille_style.css" /> <style> body { background-color: #aaaaff ; font-family: sans-serif; #haut { border: 1px solid #000000; a.navigation { color: #ffa500; </style> </head> <body> <img src="mon_image.jpg" id="haut" /> <a href="lien1.html" class="navigation">premier lien</a>
<a href="lien2.html" class="navigation">second lien</a> <p style="font-size: 12pt">Et voici un exemple pour utiliser l attribut style</p> </body> </html> Comme vous l avez peut-être remarqué dans l exemple précédent, pour attribuer une propriété à toutes les balises du même type, on marque simplement le nom de la balise suivi d une accolade ouvrante, puis la liste des propriétés voulues. On fini la liste par une accolade fermante. Pour les éléments identifiés par un id, on utilise le symbole dièse (#) suivi par le nom de l id. Quant aux balises regroupées au sein d une classe, on met le nom de la balise suivi du nom de la classe, séparés par un point. Utilisations plus techniques On peut attribuer les mêmes propriétés à plusieurs balises, il suffit pour cela de mettre toutes les balises et/ou identifiants avant l accolade ouvrante en les séparant par une virgule : p, a.navigation { font-style: italic ; Une petite subtilité est à noter : si on spécifie une propriété pour une balise plusieurs fois, ce sera le dernière spécification qui sera utilisée. Il faut donc faire attention à l ordre dans lequel on place les différentes déclarations. #texte { font-family: serif; p.introduction { font-family: monospace; p { font-family: sans-serif; Ici, tous les caractères contenus dans l élément #texte utiliseront une police à empattement (serif) mais les paragraphes avec la classe "introduction" auront une police monospace. La dernière déclaration annule la précédente puisqu elle impose à tous les paragraphes une police sans-serif. Il faut inverses les deux dernières déclarations. Afin d éviter d englober trop d éléments dans une déclaration, on peut la préciser : #texte p { text-align: justify; Cette déclaration n aura d effet que pour les paragraphes compris dans l élément #texte.
Mise en boîte Une utilisation très utilisée des CSS est le couplage de balises div et des identifiants. On peut voir les div comme des boîtes, que l on peut mettre côte à côte ou les unes dans les autres, avec ce que l on veut à l intérieur. (Et comme pour des boîtes, pour bien s y retrouver, je vous conseille de bien ranger.) Les attributs des balises div les plus utiles sont : - position : donne le positionnement, relatif (coordonnées spécifiées par rapport à l élément précédent) ou absolu (coordonnées spécifiées à partir du coin supérieur gauche du cadre) ; - width : la largeur ; - height : la hauteur ; - margin(-top, -right-, -bottom, -left) : espace entre le div et les autres éléments Les pseudos-classes Ces classes sont un peu particulières et sont séparées de l élément auquel elles font référence par le caractère ":". Aucune déclaration class n est nécessaire dans le fichier html. - a:hover : lien hypertexte lors du survol du curseur de la souris ; - a:visited : lien hypertexte lorsque la page vers lequel il pointe a été visitée ; - p:first-letter : première lettre d un paragraphe (utile pour faire des lettrines). Les principales unités - px : pixel ; - pt : point ; - em : largeur du caractère m (dépend de la taille de police en cours) ; - ex : hauteur du caractère x (dépend de la taille de police en cours).