docTP HTML n°1 : Annexe
download 
Plainte Transcription
TP HTML n°1 : Annexe
TP HTML n°1 : Annexe 1°) Configuration minimale pour un fichier HTML Le langage HTML est un langage utilisant des balises. Une balise peut-être considérée comme un message ou un code pour le navigateur qui doit l'interpréter pour fournir un résultat graphique. Pour écrire une balise dans le code HTML, on utilise les symboles « < » et « > » qui permettent de la délimiter. Chaque balise doit nécessairement être ouverte quand on désire que son action commence puis fermée lorsque que l'on veut voir son action cesser. La syntaxe est la suivante : • Ouverture de la balise « balise » : <balise> • Fermeture de la balise « balise » : </balise> Le nom de chaque balise doit être écrit en lettres minuscules. Une page HTML est en fait un simple fichier texte ayant comme extension ".html". Ce fichier contient toujours 2 sections : l'en-tête et le corps de la page HTML. L'en-tête permet de définir certaines caractéristiques de la page (titre, style, rafraîchissement...) et le corps définit ce qui sera affiché. La structure typique d'un fichier HTML sera donc la suivante : +------------------------------------------------------------------------------------------+ |<html> | | | | +------------------------------------------------------------+ | | |<head> | | | | ... | | | |</head> | | | +------------------------------------------------------------+ | | | | +----------------------------------------------------------------------------------+ | | |<body> | | | | ... | | | | <!-- Commentaire visible dans le code mais pas sur l'écran du navigateur --> | | | |</body> | | | +----------------------------------------------------------------------------------+ | | | |</html> | +------------------------------------------------------------------------------------------+ Vous remarquez donc dans cette structures 3 blocs inamovibles : • Le bloc délimité par la balise html qui contient le fichier tout entier. • Le bloc délimité par la balise head qui définit l'en-tête du fichier. • Le bloc délimité par la balise body qui définit le corps du fichier. Exercice : Tapez ce code minimal dans le Bloc-Notes et affichez le résultat dans Firefox. Le navigateur vous affiche alors une page vierge, ce qui est normal car votre fichier HTML est vide de tout contenu affichable. Il n'en reste pas moins qu'il est tout à fait valide ! Dans ce même code, modifiez le texte « Commentaire visible dans le code mais pas sur l'écran du navigateur » par un autre texte de votre choix. Vous remarquez alors que rien n'a changé dans l'affichage de Firefox. C'est normal car toute chaîne de caractères délimitée par <!-- et --> est considérée comme un commentaire par les navigateurs et n'est jamais affichée. On reviendra plus tard sur la très grande importance de commenter son code HTML. 2°) Quelques balises essentielles a) Donner un titre à votre page C'est la balise title qui permet de donner un titre à votre page. Elle doit être placée dans l'en-tête de votre fichier, c'est-àdire entre <head> et </head>. Attention, ce titre apparaîtra dans la barre de titre de la fenêtre de votre navigateur et non dans la page elle-même. Exemple : En intégrant le code <title>Ceci est le titre de la fenêtre!</title>, vous verrez ceci dans Firefox. Bases du HTML (Annexe) – Page n°1/5 b) Balises de mise en forme Si vous tapez du texte dans le corps d'un fichier HTML, Firefox affichera l'ensemble sans tenir compte des espaces, sauts, retours à la ligne ou mêmes tabulations que vous auriez pu faire. Pour améliorer l'affichage d'un texte, il faut donc le mettre en forme avec les balises appropriées. Paragraphe : pour délimiter un paragraphe, on utilise la balise <p>...</p>. Deux paragraphes correctement définis seront automatiquement séparés par une ligne vide. Cette balise supporte l'attribut align qui permet de choisir l'alignement utilisé pour l'affichage du paragraphe. Les valeurs autorisées pour align sont : left, center et right. Exemple : <p align= ˝right˝>Voici mon premier paragraphe</p> affichera un paragraphe aligné à droite. Exercice : Tapez le code HTML pour afficher deux paragraphes successifs dont le premier est aligné à gauche et le second aligné à droite. Vous devriez obtenir quelque chose ressemblant à : Gras, italique, souligné, barré : <b>...</b> mettra en gras tout le texte à la place des pointillés. <i>...</i> mettra en italique tout le texte à la place des pointillés. <u>...</u> soulignera tout le texte à la place des pointillés. <s>...</s> barrera tout le texte à la place des pointillés. Exposant et indice : <sup>...</sup> mettra en exposant tout le texte à la place des pointillés. <sub>...</sub> mettra en indice tout le texte à la place des pointillés. Actions sur la police de caractères : <big>...</big> écrira avec une taille plus grande tout le texte à la place des pointillés. <small>...</small> écrira avec une taille plus petite tout le texte à la place des pointillés. <font>...</font> permet de définir grâce aux attributs face, color et size la police de caractères utilisée, sa couleur et sa taille. Il n'est pas obligatoire d'utiliser systématiquement ces trois attributs. Si un des attributs n'est pas précisée, c'est sa valeur par défaut sur le système hôte qui sera utilisée. Exemple : <font face=˝arial˝ color=˝red˝ size=˝20˝>Essai de texte</font> affichera « Essai de texte » en utilisant la police de caractères Arial, en rouge et en taille 20. La valeur de l'attribut color peut être donnée sous le nom du mot anglais de la couleur voulue ou sous forme du code hexadécimal correspondant. Si vous voulez plus de détails à ce sujet, consultez la page suivante : http://html-color-codes.info/Codes-couleur-HTML/. Titres : Les balises <h1>, <h2>, …, <h6> permettent de définir la taille d'écriture des titres au sein d'un texte. <h1> l'écrit en très grand et <h6> en très petit. Exercice : Tapez le code suivant dans votre fichier HTML et admirez le résultat. <p><h1>Voici un gros titre!</h1></p> <p><h6>Mais celui-ci est insignifiant.</h6></p> Bases du HTML (Annexe) – Page n°2/5 Balises orphelines : Les deux balises suivantes sont dites orphelines car elles ne possèdent aucun attribut et ne nécessitent pas de fermeture. <br> permet d'aller à la ligne. <hr> trace une ligne horizontale pour séparer deux paragraphes, par exemple. Attention, toutes ces balises de mise en forme verront leur utilité très compromise dès que le fichier HTML utilisera les feuilles de style (CSS). c) Insertion d'une image C'est la balise img qui permet d'insérer une image dans une page HTML. Comme les balises orphelines, elle n'a pas besoin d'être refermée mais certains de ses attributs sont obligatoires. Attributs obligatoires : src=˝Nom_du_fichier.jpg˝ : Pour afficher une image, il faut évidemment indiquer au navigateur le fichier image qu'il doit traiter. Classiquement, ce fichier doit être au format png, jpg ou gif. Si le fichier image se trouve dans le même dossier que le fichier HTML, il suffit d'indiquer son nom (en respectant la casse et avec son extension) sinon il faut indiquer le chemin. Par exemple, si l'image est dans un dossier images, comme ce sera le cas pour vous, il faut écrire src=˝images/˝Nom_du_fichier.jpg˝. Il est également possible d'utiliser une image Internet mais il faut alors préciser l'URL complète de cette image. Par exemple : src=˝http://murakami.free.fr/images/Murakami.jp eg˝. alt=˝Description˝ : Cet attribut permet d'afficher un texte qui s'affiche si l'image n'est pas disponible pour une raison ou pour une autre. Il est également utile pour les navigateurs qui fonctionnent en mode texte. Bien que cette balise puisse paraître futile au premier abord, elle est indispensable si vous voulez que votre page Internet soit validée par le W3C. Plus d'informations à l'adresse http://www.w3.org/. Attributs optionnels : border=˝nombre˝. Cet attribut permet de définir la taille de la bordure de l'image en pixels. La valeur 0 correspond à l'absence de bordure. width=˝largeur˝ height= ˝hauteur˝. Ces deux attributs permettent de préciser la taille de l'image. En ne donnant qu'un seul de ces attributs on conserve les proportions. title=˝texte˝. Cet attribut permettra d'afficher un texte dans une bulle qui apparaîtra au survol de l'image avec le pointeur de la souris. align=˝alignement˝. Cet attribut permet de définir la façon dont la légende de l'image doit s'afficher. Les valeurs possibles pour "alignement" sont top, middle, et bottom. La légende se termine par la balise<p>. Exemple : <img src=˝images/murakami.jpg˝ align=˝top˝>Légende au dessus.<p> Exercice : Codez une page HTML qui affiche une image de votre choix sans bordure, avec une légende alignée en bas et une info bulle. usemap=˝#nom˝. Cet attribut permet de faire référence à une structure définissant des zones de l'image jouant le rôle de liens hypertextes et donc sensibles à un clic de la souris. Une telle structure est définie entre les balises <map> et Bases du HTML (Annexe) – Page n°3/5 </map>, <map> ayant comme attribut name="nom". On verra ces balises dans le détail plus tard cette année. d) Les liens hypertexte D'après Wikipédia : « Un hyperlien ou lien hypertexte ou simplement lien, est une référence dans un système hypertexte permettant de passer automatiquement d'un document consulté à un document lié. Les hyperliens sont notamment utilisés dans le World Wide Web pour permettre le passage d'une page Web à une autre d'un clic ». C'est dire l'importance de la balise suivante. Elle peut pointer vers deux types de liens : une URL ou une ancre définie à l'intérieur du fichier HTML lui-même. Vers une URL : Exemple : <a href=″http://murakami.exprimetoi.net/″>Forum de physique-chimie</a> Vers une ancre : Une ancre est un endroit particulier de votre page web où vous voulez que le navigateur aille quand on clique sur le lien. Ce peut être intéressant de placer une ancre au début d'un paragraphe important, par exemple. Il faut donc définir l'ancre au préalable. Exemple : <a name= paragraphe1 >Début du premier paragraphe</a> Et ensuite, on peut faire le lien avec : <a href= TP1.html#paragraphe1 >Aller au début du premier paragraphe</a>. Remarquez bien qu'il faut préciser avant la dièse dans quel fichier HTML est définie l'ancre. Il existe une ancre un peu particulière, #top, qui permet de remonter tout en haut de la page : <a href= #top >Revenir en haut</a>. Image réactive : Il également possible de faire en sorte qu'une image dissimule un lien hypertexte (vers une URL ou vers une ancre). Pour cela, il faut utiliser une combinaison de la balise <a> et de la balise <img> : <a href="http://murakami.exprimetoi.net/"><img src="murakami.jpg" alt="Image réactive" title="Le forum !" /></a> e) Caractères spéciaux et accentués Le français comporte des caractères accentués qui ne sont pas connus dans d'autres langues, comme l'anglais, par exemple. Si vous voulez que votre page soit correctement lisible par tous les navigateurs quelle que soit leur langue par défaut, vous devez utiliser le code HTML prévu pour chaque caractère spécial. Vu leur nombre important, je n'ai pas reproduit tous ces codes ici mais vous pouvez les trouver à l'URL suivante : http://loremipsum.studiovitamine.com/caracteres-speciaux,287,fr.html. f) Les listes Les listes permettent un affichage structuré d'items. Elles peuvent être ordonnées ou non et peuvent également être imbriquées (une liste peut contenir d'autres listes). Les listes ordonnées : Dans une liste ordonnée, chaque élément de la liste sera numéroté (par un chiffre ou une lettre). Les balises utilisées sont les suivantes : <ol>...</ol> : ouverture et fermeture de la liste ordonnée. <lh>...</lh> : balise optionnelle qui permet de définir le titre d'une liste. Bases du HTML (Annexe) – Page n°4/5 <li>...</li> : élément de la liste. Cette balise possède un attribut optionnel type qui permet de définir la façon dont sont numérotés les différents éléments de la liste. Cet attribut peut prendre les valeurs suivantes : 1 (chiffres ; valeur par défaut), a (lettres minuscules), A (lettres majuscules), i (chiffres romains minuscules), I (chiffres romains majuscules). Un autre attribut optionnel de la balise <li> est l'attribut value qui permet de définir le numéro de départ de la liste. Les listes non ordonnées : C'est grossièrement le même fonctionnement sauf que chaque élément n'est plus numéroté mais précédé d'une puce. <ul>...</ul> : Ouverture et fermeture d'une liste non ordonnée. <li>...</li> : élément de la liste non ordonnée. Un attribut type peut également être utilisé mais, cette fois, pour définir la forme de la puce qui précède chaque élément. L'attribut type peut prendre les valeurs suivantes : disc (disque plein,valeur par défaut), circle (disque vide), square (carré plein). g) Les tableaux HTML offre la possibilité de créer des tableaux. Il s'agit de la principale possibilité de maîtriser la mise en page globale d'un document (disposition en colonnes, respect des alignements, insertion d'images au milieu du texte...) si on ne veut pas utiliser de CSS. Les balises à utiliser sont les suivantes : <table>...</table> : Ouverture et fermeture du tableau. Il est très important de penser à fermer un tableau sous peine de voir votre page HTML avec un affichage complètement changé ! Cette balise a une balise optionnelle border permettant de définir l'épaisseur en pixels du cadre du tableau. Sa valeur par défaut est de 1. <tr>...</tr> : Ouvre et ferme une ligne dans le tableau. <td>...</td> : Ouvre et ferme une case dans une ligne. Exercice : Recopiez le code suivant dans le Bloc-Notes et, par essais successifs, essayez le comprendre le fonctionnement du codage des tableaux et, en particulier, des balises non décrites précédemment. Vous enregistrerez votre fichier HTML commenté. <table border="1" cellpadding="2"> <caption align="bottom">Titre</caption> <tr> <th align="left">Script</th> <th align="left" colspan="2">Exécution</th> </tr> <tr> <td>CGI</td> <td rowspan="2">par le</td> <td>serveur</td> </tr> <tr> <td>Javascript</td> <td>Client</td> </tr> </table> Bases du HTML (Annexe) – Page n°5/5
