BALISES HTML 4.01 (Référence rapide non exhaustive!) Bibliographie : Le museau numérique, http://www.laurent-bernat.com/html-balises.php3?quoi=recap_attributs HTML code tutorial, http://www.htmlcodetutorial.com Bravenet, http://resources.bravenet.com/quickref/html Publication HTML, http://www.ccim.be/ccim328/ Les balises de définition du document <html> <head> <title> Titre </title> </head> <body> Contenu </body> </html> Début du document HTML Début de l en-tête Titre à apparaître sur la fenêtre Fin de l en-tête Début du contenu visible de la page Fin du contenu visible Fin du document HTML Balise body <body> contenu du document HTML </body> Attributs alink="#code couleur" background="adresse image" bgcolor="#code couleur" link="#code couleur" text ="#code couleur" vlink= "#code couleur" * Définit la couleur d'un lien lorsqu'on clique dessus (rouge par défaut) Utilise une image comme arrière-plan Définit la couleur du fond de la page (blanc par défaut) Définit la couleur d'un lien non visité (bleu par défaut) Définit la couleur du texte (noir par défaut) Définit la couleur d'un lien visité (pourpre par défaut) NOTE : Les attributs des balises HTML et donc de la balise body peuvent être plusieurs à l'intérieur de la balise, par exemple : <body bgcolor="#ffffff" text="#000000" link="#0000cc" vlink="#33cc00" alink="#ff0000"> Les commentaires <!-- Ceci est un commentaire invisible dans le navigateur --> * Le carré noir indique qu à partir de la prochaine version de HTML l attribut ne sera plus disponible (deprecated, en anglais) 1
Balises de mise en forme TITRES GRAS ITALIQUE EMPHASE <h1>titre niveau 1 </h1> <h2>titre niveau 2</h2> <h9>titre niveau 9 </h9> <b> texte en gras </b> <i> texte en italique </i> <strong> texte à accentuer : selon le browser il peut être affiché en italique ou en gras </strong> STYLE DU TEXTE <font> texte à formatter </font> Attributs color="#code couleur" face="nom police" size="valeur" Définit la couleur du texte Police à utiliser. La valeur est une suite de polices séparées par des virgules Fixe la taille de la police. Entre 1 et et 7 : police fixe. Entre -7 et +7, police proportionnelle. NOTE : Au moins un attribut doit être présent à l'intérieur de la balise font, ils peuvent être plusieurs, par exemple : <font size="4" color="#33ff00">exemple de combinaison d'attributs </font> Balises de mise en page RETOUR DE LIGNE <br> PARAGRAPHE <p>paragraphe</p> Insère un retour de ligne Définition d un paragraphe align="valeur" Définit l'alignement horizontal du paragraphe : left center right justify SEPARATEUR <hr> Définition d une ligne de séparation align="valeur" noshade size="valeur en pixels" width="valeur en pixels ou en Définit l'alignement de la ligne de séparation : left center right Si l'attribut est présent, le séparateur n'aura pas d'ombre Définit la hauteur du séparateur Définit la largeur du séparateur 2
Balises listes LISTE A PUCES <ul> </ul> LISTE NUMEROTEE <ol> </ol> ELEMENTS DE LA LISTE <li> </li> type="valeur" début et fin d une liste à puces début et fin d une liste à puces début et fin d un élément de la liste. Commence une ligne avec un numéro si l'élément appartient à une liste numérotée ou avec une puce s'il appartient à une liste à puces Définit la puce à utiliser : disc circle square Balises "a" (les liens) <a href="adresse d'un lien mailto">objet (texte, image) cliquable </a> Définition d un lien <a name="nom de la cible">cible à définir </a> Définition d une ancre target="_blank" Charge le résultat dans une nouvelle fenêtre (ou onglet) du navigateur D'autres valeurs sont possibles (<nom> _self _parent _top) lorsque l'on travaille avec de cadres (frames) Balise image <img src="adresse de l image" > alt="texte" width="valeur en pixels ou en height="valeur en pixels ou en usemap="nom d'une map" align="valeur" border="valeur en pixels" Texte à afficher lorsque l'image n'est pas affichée Définit la largeur de l'image Définit la hauteur de l'image Définit la map décrivant des zones dans l'image. S'utilise donc en combinaison avec l'élément map Définit l'alignement de l'image par rapport à son contexte (texte et objets autour) : bottom middle top left right Epaiseur de la bordure de l'image Les "maps" DEFINITION DE LA MAP <map name="nom de la map"> Balises de définition des zones </map> 3
DEFINITION DES ZONES <area> alt="texte" Texte alternatif à l'usage des infobulles (tooltips) shape="valeur" Définit la forme de la zone : rect circ poly default coords="valeurs" Coordonnées définissant les contours de la zone sur laquelle l'on pourra cliquer Pour shape="rect" (rectangle) coord="gauche, haut, droite, bas" Pour shape="circ" (cercle) coords="centrex,centrey,rayon Pour shape="poly" (polygone) coords="x1,y1,x2,y2,...,xn,yn" href="adresse d'un lien Adresse du lien vers lequel pointe la zone mailto" nohref Si l'attribut est présent, la zone n'a pas de lien target="valeur" Nom du cadre où doit s'ouvrir le lien (voir la balise a en page 3) Exemple d'utilisation : <img src="imageformap.gif" width="200" height="100" alt="image Map" usemap="#mapname"> <map name="mapname"> <area shape="rect" coords="0,50,100,20" href="unlien.html" alt="cliquez ici pour aller vers un lien!"> </map> Balises de définition des tableaux LE TABLEAU <table> balises de définition des lignes </table> Début et fin du tableau align="valeur" bgcolor="#codecouleur" border="valeur en pixels" width="valeur en pixels ou en cellpadding=" valeur en pixels ou en pourcentage " cellspacing=" valeur en pixels ou en pourcentage " Définit l'alignement horizontal du tableau : left center right Définit la couleur du fond du tableau Définit la taille de la bordure du tableau et des cellules Définit la largeur du tableau Définit l'espacement entre le bord d'une cellule et son contenu Définit l'espacement entre les cellules 4
LES LIGNES <tr> balises de définition des cellules </tr> Début et fin d'une ligne bgcolor="#codecouleur" Définit la couleur du fond de la ligne align="valeur" Définit l'alignement horizontal du contenu des cellules : left center right justify valign="valeur" Définit l'alignement vertical du contenu des cellules : top middle bottom baseline NOTE : La "baseline" est la ligne imaginaire où reposent les lettres d'une ligne du texte: <tr valign="baseline"> <td>fruit</td> <td style="font-size:300%">jury</td> </tr> regardez le résultat en utilisant l'alignement "bottom" : <tr valign="bottom"> <td>fruit</td> <td style="font-size:300%">jury</td> </tr> </table> LES CELLULES <td> contenu de la cellule </td> bgcolor="#codecouleur" Début et fin d'une cellule Définit la couleur du fond de la cellule align="valeur" Définit l'alignement horizontal du contenu des cellules : left center right justify valign="valeur" Définit l'alignement vertical du contenu des cellules : top middle bottom baseline colspan="valeur" Nombre de colonnes fusionnées en incluant la colonne courante (colspan="1" ne fusionne rien) rowspan="valeur" Nombre de lignes fusionnées en incluant la ligne courante (rowspan="1" ne fusionne rien) width="valeur en pixels ou en Définit la largeur de la cellule height="valeur en pixels ou en Définit la hauteur de la cellule Balise de définition des formulaires contenu et contrôles Début et fin d'un formulaire action="url" L'adresse du programme auquel le navigateur doit envoyer les données du formulaire method="valeur" Type de méthode http à utiliser pour envoyer les données : get post target="valeur" Nom du cadre dans lequel le navigateur doit charger la réponse du serveur (voir la balise a en page 3) 5
Balises de définition des contrôles la balise INPUT BALISE GENERIQUE La balise input permet de définir plusieurs contrôles différents en variant la valeur de l attribut type. La syntaxe HTML de cette balise est la suivante : <input type="valeur" name="nom"> type="valeur" Détermine le contrôle à créer : text password checkbox radio submit reset file hidden image button value="valeur" Valeur prédéfinie du contrôle. Si l utilisateur ne saisit rien, elle sera envoyée au serveur target="valeur" Nom du cadre dans lequel le navigateur doit charger la réponse du serveur (voir la balise a en page 3) checked Uniquement avec les types "checkbox" et "radio" : présélectionne l élément maxlength="valeur" Uniquement avec les types ="file", "text" et "password" : définit le nombre de caractères que l'utilisateur peut saisir dans le contrôle. size="valeur" Uniquement avec les types : "file", "text" et "password" : définit la taille du contrôle à l'écran en nombre de caractères. alt="valeur" Uniquement avec type="image" : texte alternatif à afficher sur l'image src="adresse de l image" Uniquement avec type="image" : url de l'image à afficher. usemap="adresse de la map" Uniquement avec type="image" : adresse d'une map décrivant des zones de l'image (voir la balise img en page 3). LIGNE DE TEXTE <form > name: <input type="text" name="realname"><br> email: <input type="text" name="email"><br> BOUTONS DE COMMANDE <input type="button" name="nom" value= "bouton de test" > BOUTON SUBMIT Le bouton submit transmet toutes les informations contenues dans le formulaire à l'url désignée dans les attributs action et method de la balise form. <input type="submit" name="nom" value="envoyer "> 6
BOUTON RESET Le bouton reset permet d'annuler les modifications apportées aux contrôles d'un formulaire et de restaurer les valeurs par défaut. <input type="reset" name="nom" value="annuler"> BOUTONS D'OPTION <input type= "radio" name="tarif" value="jour" checked> tarif de jour <input type= "radio" name="tarif" value="nuit"> tarif de nuit <input type= "radio" name="tarif" value="week-end"> tarif de week-end CASES À COCHER <input type="checkbox" name="choix1" value="1" checked> glace vanille <input type="checkbox" name="choix2" value="2"> chantilly <input type="checkbox" name="choix3" value="3"> chocolat chaud <input type="checkbox" name="choix4" value="4"> biscuit Balises de définition de contrôles ZONE DE SAISIE <textarea name="nom"> valeur par défaut</textarea> cols="valeur" rows="valeur" readonly Nombre de caractères visibles en largeur. Les navigateurs passent généralement à la ligne quand elles sont plus longues Nombre de lignes de texte visibles. Les lignes supplémentaires sont scrollées dans le contrôle Si l'attribut est présent, le contrôle ne peut être modifié Exemple d'utilisation : <textarea name="nom" rows=4 cols=40>valeur par défaut</textarea> 7
LISTE <select name="nom"> </select> multiple size="valeur" <option> élément </option> label="valeur" selected value= ="valeur" Début et fin de liste déroulante Permet la sélection de plusieurs éléments Détermine le nombre de lignes affichées dans le contrôle. Si 1, le navigateur affiche une liste déroulante Début et fin d'un élément de la liste déroulante Texte plus court à afficher Si l attribut est présent, l élément est pré-sélectionné dans la liste Valeur envoyée au serveur si l élément est sélectionné par l utilisateur Exemple d'utilisation : <select name="combobox" size="1"> <option>lundi </option> <option>mardi </option> <option>mercredi </option> <option>jeudi </option> <option>vendredi </option> </select> 8