INITIATION AU LANGAGE HTML

Transcription

1 INITIATION AU LANGAGE HTML I INTRODUCTION Seules les bases du langage HTML sont abordées ici. Cette initiation a pour but de "démarrer", les nombreuses ressources concernant ce langage vous permettront aisément d'aller plus loin. Une page Web est constituée de texte, d'images, et de commandes HTML (souvent appelées balises). Ces balises sont interprétées par le navigateur qui reçoit la page HTML (un simple document texte en fait). Chaque page est désignée par son URL (Uniform Ressource Locator) : II LA STRUCTURE DU DOCUMENT II.1 LES BASES Un document est composé de plusieurs parties. En général, on trouve le titre, l'entête et le corps. Un ensemble de deux balises permet de délimiter chacune de ces parties (début et fin) : <head> <title>ceci est notre première page Web!!!</title>    </head> Le contenu du document est décrit dans la section BODY. Attention, le passage à la ligne n'est qu'une illusion!!! Nota : - Une balise de fin est indiquée par /. - Chaque balise ouverte doit être refermée ou terminée par le caractère /. - Les commentaires  sont ignorés par le navigateur. II.2 ORGANISER LE TEXTE Pour l instant vous disposez d un fichier HTML rudimentaire, il serait plus agréable d avoir un contenu structuré avec des titres, des sous-titres et des paragraphes. En HTML ceci se traduit par de nouvelles balises. II.2.1 DÉFINITION DE PARAGRAPHES On utilise les balises <p> </p> et on insère le texte entre ces deux balises : <head> <title>ceci est notre seconde page Web!!!</title>  </head> À partir du cas Lafleur publié au Certa 1

2 Voici un formatage des paragraphes d'un texte : <p> Un premier paragraphe Un premier paragraphe Un premier paragraphe Un premier paragraphe Un premier paragraphe Un premier paragraphe Un premier paragraphe Un premier paragraphe. </p> Nota : Nous pouvons définir l alignement des paragraphes (gauche, droite, justifié) dans la feuille de style associée. II.2.2 DÉFINITION DES TITRES Les balises <h1>, <h2> <h6> permettent d'appliquer des styles prédéfinis servant à organiser des niveaux de titres dans un document. <title>page03.htm</title> <h1>gros titre</h1> <h2>sous-titre</h2> <h6>est-ce encore un titre?</h6> Nota : Nous pouvons redéfinir le style des titres dans la feuille de style associée. II.2.3 LES RETOURS À LA LIGNE La balise <br /> (break line) : permet de passer à la ligne suivante sans modifier l'alignement et le style courant. II.3 ASSOCIER UNE FEUILLE DE STYLE La feuille de style va contenir toutes les indications de présentation du document, c est à dire la couleur de fond, la taille des polices de caractères, l alignement des paragraphes etc. La première chose à faire est donc d indiquer dans votre page HTML, le nom de la feuille de style associée. Pour cela on utilise la balise LINK qui s insère entre les balises <head></head> <head> <title>mon site web</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> href="style.css" : réference le nom du fichier lié (chemin et nom) ; rel="stylesheet" : précise que le document lié est une feuille de style ; type="text/css" : précise que l information est du texte, du genre cascading style sheet (CSS). II.4 STRUCTURER SON DOCUMENT La balise <div> </div> (division) permet de créer une boîte, un bloc dans votre page dans lequel vous pourrez toujours inclure divers éléments : texte, images, tableaux, paragraphes etc. Ces blocs sont conçus pour faire apparaître la structure de votre document et pour être formatés avec une feuille de style. Tout ce qui se trouve entre <div> et </div> respectera le style défini pour la balise <div> dans la feuille de style. À partir du cas Lafleur publié au Certa 2

3 Pour cela chaque bloc doit être nommé : <div id="bloc1"> <p>le site de Marie-pascale Delamare</p> </div> id="bloc1" : permet de nommer le bloc. On retrouvera ce nom dans la feuille de style associée, avec toutes les indications de présentation à appliquer. Nota : Nous aurions pu utiliser la syntaxe suivante : <div class="bloc1">. Cette notation n est intéressante que si les indications de mise en page de ce bloc doivent aussi être appliquées à d autres blocs. II.5 PRÉPARER LA PRÉSENTATION DU DOCUMENT Pour préparer la présentation du document, il faut penser à systématiquement nommer les balises pour lesquelles vous souhaitez appliquer un style particulier. Je vous invite à lire le document Css.doc pour des exemples concrets. III LES AUTRES ELEMENTS D UNE PAGE WEB III.1 LES LIGNES DE SÉPARATION La balise <hr> permet de générer une ligne horizontale. Essayez le code ci-dessous : <head> <title>et de quatre!!!</title>  </head> Voici quelques exemples de lignes : <br /><br /> Une simple ligne <hr /> Nota : Nous pouvons définir la couleur (color), la taille (size), la largeur (width) etc...dans la feuille de style associée. III.2 LES LISTES III.2.1 LISTE NON ORDONNÉE <title>page05.htm</title> Une liste non ordonnée <li>un</li> <li>deux</li> <li>trois</li> </ul> À partir du cas Lafleur publié au Certa 3

4 III.2.2 LISTE ORDONNÉE <title>page06.htm</title> Une liste ordonnée <ol> <li>one</li> <li>two</li> <li>three</li> </ol> III.2.3 LISTE IMBRIQUÉES <title>page07.htm</title> Listes imbriquées <ol> <li>un</li> <li>détail</li> <li>du</li> <li>un</li> </ul> <li>deux</li> <li>détail</li> <li>du deux</li> </ul> <li>trois</li> <li>détail du trois</li> </ul> </ol> Nota : Nous pouvons définir la forme des puces des listes non ordonnées et la numérotation des listes ordonnées dans la feuille de style associée. III.3 LES CARACTÈRES SPÉCIAUX Certains caractères (<, > et &) sont interprétés par les navigateurs. Pour pouvoir être affichés "tel quel", ils doivent être mentionnés sous une forme codifiée : caractère code < &lt > &gt & &amp D'autre part, le code utilisé sur le Web est le code ASCII (7 positions) qui ne permet pas de représenter les caractères accentués. Pour y parvenir (de manière universelle, quel que soit le système client), on utilise la notation codifiée précédée de "&" dont voici les principaux représentants : À partir du cas Lafleur publié au Certa 4

5 caractère À Ç É Ê È Ô Ù Û Ï <espace> code &agrave &ccedil &eacute &ecirc &egrave &ocirc &uacute &ucirc &iuml &nbsp L'exemple suivant résume bien la situation : <title>page08.htm</title> &ltles caract&egraveres sp&eacuteciaux, c'est pas cool!&gt Il est également possible de mentionner le code ascii étendu (iso latin 1) du caractère : caractère code É &#233 &#169 «&#171» &#187 III.4 LES IMAGES Deux formats d'images peuvent être intégrés dans un document HTML : gif et jpeg. L'avantage des images gif est de pouvoir être affichées progressivement, rendant ainsi l'attente moins pénible (format entrelacé). D'autre part, les images gif peuvent avoir un fond transparent, elles semblent ainsi "flotter" sur le fond de la page HTML. Les images jpeg sont par contre d'une taille plus réduite et permettent un rendu de meilleure qualité (photographies par exemple). La balise <img> possède les attributs suivants : src : emplacement du fichier image alt : info-bulle et texte de remplacement pour les navigateurs non graphiques align : alignement de l'image par rapport au texte et à l'écran (à reporter dans la feuille de style) Le document ci-dessous illustre ces possibilités : <title>page09.htm</title> Intégration simple <img src="images/ordichapeau.gif" /> <br /> L'option alt permet de : <li>fournir une bulle d'aide lors du passage de la souris</li> <li>prévoir une alternative pour les navigateurs non graphiques</li> À partir du cas Lafleur publié au Certa 5

6 </ul> <img alt="ordinateur avec chapeau" src="images/ordichapeau.gif" /> <br /> <img align=middle src="images/ordichapeau.gif" />Drôle de machine! <br /> Nota : Une image GIF peut être enregistrée avec l'option entrelacée, ce qui permet son affichage progressif à l'écran. Les attributs height et width de la balise img permettent de modifier la taille de l'image d'origine. Il existe des outils permettant de faire des "gifs animés", succession d'images gif qui se répète pour former une petite animation. III.5 LES TABLEAUX Un tableau est encadré par les balises <table> et </table>. Un tableau est une succession de lignes (row), chacune de ces lignes étant composée de cellules contenant les informations (data). Voici un exemple de tableau simple : <title>page10.htm</title> <table> <tr> <td> L1C1 </td> <td> L1C2 </td> </tr> <tr> <td> L2C1 </td> <td> L2C2 </td> </tr> </table> Nota : <tr> pour Table Row. <td> pour Table Data. Le nombre de cellules peut différer d'une ligne à l'autre. III.5.1 ATTRIBUTS DE LA BALISE <TABLE> (À REPORTER DANS LA FEUILLE DE STYLE ASSOCIÉE) Width : largeur du tableau (pixels ou pourcentage). Border : taille du cadre entourant le tableau. À partir du cas Lafleur publié au Certa 6

7 Cellspacing : espace entre les cellules. Cellpadding : espace entre le cadre et le contenu des cellules. III.5.2 CARACTÉRISTIQUES DES CELLULES (À REPORTER DANS LA FEUILLE DE STYLE ASSOCIÉE) Chaque cellule possède les attributs suivants : Taille : <td width="50%"> </td> La cellule occupera 50 % de la largeur totale du tableau (ou en pixel : width="50"). Alignement horizontal : <td align="right"> </td> (ou left ou center). Cet attribut s'applique également à une ligne : <tr align="center">. Alignement vertical : <td valign="right"> </td> (ou left ou center). Cet attribut s'applique également à une ligne : <tr valign="center">. Couleur de fond : <td bgcolor="lightblue"> </td>. Cet attribut s'applique également à une ligne : <tr bgcolor="lightblue">. Nota : une cellule de tableau peut contenir du texte, une image, un lien (voir paragraphe suivant), ou même un tableau III.6 LES LIENS DE NAVIGATION Un des intérêts du langage HTML réside dans la possibilité de définir des liens permettant la navigation dans un document ou entre plusieurs documents. La syntaxe de base est simple : <a href="url de destination">cliquez ici </a> Ce code fera apparaître un lien CLIQUEZ ICI sur la page. Ce lien permettra à l'utilisateur d'atteindre l'url de destination. III.6.1 LIEN LOCAL Un site est constitué d'un ensemble de pages, donc de plusieurs fichiers HTML. S'ils sont situés dans le même répertoire sur le serveur, leur adresse est simplement constituée de leur nom : Page11_1.htm <title>page11_1.htm</title> Première page du site<p></p><p></p> <a href="page11_2.htm">vers la page 2</a> Page11_2.htm <title>page11_2.htm</title> Seconde page du site<p></p><p></p> <a href="page11_1.htm">vers la page 1</a> Les fichiers peuvent également être situés dans un sous-répertoire du site, ce qui permet d'organiser un peu les choses D'autre part, comme on le voit sur cet exemple, l'adresse de destination peut être un fichier image. <title>page12.htm</title> Lien vers une image située dans un répertoire différent :<br /><br /><br /><br /><br /> <a href="images/ordichapeau.gif">qui est là?</a> III.6.2 LES ANCRES Il est possible de désigner non seulement une page de destination, mais encore un emplacement précis dans cette page. Un tel emplacement doit être précédemment repéré par une "ancre". À partir du cas Lafleur publié au Certa 7

8 Pour "poser" une ancre : <a name="nomancre"> </a>. Pour référencer une ancre : - Dans un document quelconque : <a href="nomdocument#nomancre"> </a>. - Dans le document en cours : <a href="#nomancre"> </a>. Voici un exemple : Page12_1.htm <title>page12_1.htm</title> Cette page sert de sommaire. <br /><br /><br /> <a href="page12_2.htm#debut"> Début page 2</a><br /> <a href="page12_2.htm#milieu"> Milieu page 2</a><br /> <a href="page12_2.htm#fin"> Fin page 2</a><br /> Page12_2.htm <title>page12_2.htm</title> La page 2 comporte trois parties repérées par des ancres : <br /><br /><br /> <a name="debut">début page 2</a><br /> Ceci est le début de la page 2 Ceci est le début de la page 2 Ceci est le début de la page 2 Ceci est le début de la page 2 Ceci est le début de la page 2 Ceci est le début de la page 2 Ceci est le début de la page 2 Ceci est le début de la page 2 Ceci est le début de la page 2 Ceci est le début de la page 2 Ceci est le début de la page 2 Ceci est le début de la page 2.<br /><br /> <a name="milieu">milieu page 2</a><br /> Ceci est le milieu de la page 2 Ceci est le milieu de la page 2 Ceci est le milieu de la page 2 Ceci est le milieu de la page 2 Ceci est le milieu de la page 2 Ceci est le milieu de la page 2 Ceci est le milieu de la page 2 Ceci est le milieu de la page 2 Ceci est le milieu de la page 2 Ceci est le milieu de la page 2. <br /> <a name="fin">fin page 2</a><br /> Ceci est la fin de la page 2 Ceci est la fin de la page 2 Ceci est la fin de la page 2 Ceci est la fin de la page 2 Ceci est la fin de la page 2 Ceci est la fin de la page 2 Ceci est la fin de la page 2 Ceci est la fin de la page 2 Ceci est la fin de la page 2 Ceci est la fin de la page 2 Ceci est la fin de la page 2 Ceci est la fin de la page 2 Ceci est la fin de la page 2 Ceci est la fin de la page 2 Ceci est la fin de la page 2 Ceci est la fin de la page 2 Ceci est la fin de la page 2 Ceci est la fin de la page 2 Ceci est la fin de la page 2 Ceci est la fin de la page 2 Ceci est la fin de la page 2. <br /><br /> Nota : ceci n'a d'intérêt que si la page est volumineuse. III.6.3 IMAGE-LIEN La présentation du lien n'est pas obligatoirement textuelle. Voici une image établissant un lien : <title>page12_3.htm</title> À partir du cas Lafleur publié au Certa 8

9 Cette page sert de sommaire. <br /><br /><br /> <a href="page12_2.htm#debut"><img src="images/ordichapeau.gif" /></a><br /> <a href="page12_2.htm#milieu">milieu page 2</a><br /> <a href="page12_2.htm#fin">fin page 2</a><br /> III.6.4 LIEN EXTERNE Mis à part un document local au site, un lien peut référencer : Un document html situé quelque part sur le Web : <a href=" internet</a> Un fichier situé sur un serveur FTP : <a href="ftp://serveurftp/pub/unfichier.txt">télécharger</a> Le navigateur proposera le téléchargement ou affichera le contenu du fichier en fonction de son paramétrage. Un répertoire situé sur un serveur FTP : <a href="ftp://serveurftp/pub/">lister le répertoire</a> Le navigateur affichera le contenu du répertoire, ce qui permettra l'affichage ou le téléchargement de ses fichiers. Une adresse <a href="mailto:pierre.loisel@club-internet.fr">envoyer un message</a> Un clic sur ce lien ouvre le logiciel de messagerie installé sur le poste client et permet l'envoi d'un mail. On peut également fixer le sujet du message : <a href="mailto:pierre.loisel@club-internet.fr?subject=quelle affaire!">envoyer un message</a> À partir du cas Lafleur publié au Certa 9