Les Fiches pratiques Coin-Web

Transcription

1 Le langage HTML Sommaire 1. Définitions Remarque liminaire : l organisation du site La page L entête Le corps de la page...3 a. Le texte...3 i. Titres et paragraphes...3 ii. Listes...4 iii. Les tableaux...6 b. Faire des liens...7 c. Insérer une image...8 L objectif de cette fiche pratique est de vous présenter la structuration d une page web. La mise en forme approfondie sera traitée dans la fiche se rapportant aux feuilles de style CSS. Le but est d apprendre ici à organiser sa page avec les balises standard HTML afin d obtenir un code propre et compatible des navigateurs et moteurs de recherche. Utiliser le HTML Strict et le CSS permet de séparer le contenu et la forme. Cela permet : D'avoir des pages HTML organisées et structurées, lisibles autant par des humains que par des robots (moteurs de recherche), et même par des personnes handicapées De ne définir la présentation qu'une seule fois, dans un seul fichier. Et de pouvoir la changer très simplement, une seule fois, que ce soit juste un petit changement ou le changement de tout le style du site D'avoir des pages HTML très légères à télécharger. De plus la présentation étant dans un seul fichier, celui-ci n'a pas à être re-télécharé à chaque page que les visiteurs téléchargent D'avoir des fichiers HTML très clairs à éditer : il n'y a que le minimum de code, sans fioritures et sans s'occuper de la présentation 1. Définitions Un site internet Un site internet est en fait un ensemble de pages WEB (de fichiers.html) reliés ensemble par des liens hypertextes. Le HTML (HyperText Markup Language) Le HTML est le format de fichier avec lequel vous structurez vos pages : c'est le contenu. Il est formé de blocs ou balises (markup en anglais) qui servent à délimiter et décrire la signification de chaque information. Ces balises permettent de structurer et hiérarchiser les informations dans la page. Un bon site sépare le contenu et la forme : c'est ce que nous allons faire. Le principe de base du langage HTML est que toute instruction commence par une balise ouvrante et se termine par une balise fermante Balise ouvrante

2 Toute balise ouvrante se note <balise> Balise fermante Une balise fermante a la syntaxe </balise> 2. Remarque liminaire : l organisation du site Les Fiches pratiques Nous l avons vu : un site internet est un ensemble de pages HTML. Pour améliorer la maintenabilité de votre site, il est intéressant de structurer ces pages dans une arborescence. Vous pouvez mettre toutes vos pages dans le dossier racine, les fichiers images dans un dossier spécifique «images», etc. mais si votre site prend de l ampleur, vous allez vite être débordé. Nous vous conseillons d adopter une structuration par thèmes : / Communs Images Image1.jpg Image2.jpg Image3.gif CSS Autres Thème 2 Sous-thème 1 Sous-thème 2 Sous-thème 3 Thème 3 Sous-thème 1 Sous-thème 2 Thème 4 Lorsque vous nommez vos éléments (page, dossier ), veillez à donner un nom court mais explicite et à n utiliser que les caractères a-z, 0-9, -, _ ou. (évitez les espaces ou les majuscules, qui ne sont pas reconnus par tous les systèmes.) En ce qui concerne les images, les formats classiques sont.gif et.jpg. Le.png a un meilleur rendu mais Internet Explorer ne gère pas bien sa transparence. Dans tous les cas, veillez à vérifier votre site avec au moins 2 navigateurs : Internet Explorer et Netscape ou Firefox : ces 2 grandes familles ne gèrent pas les standards web exactement de la même façon.

3 3. La page Votre fichier html doit commencer par indiquer au navigateur que la page est décrite avec le langage HTML ainsi que la version utilisée. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> La page est délimitée par les balises <html> et </html>. A l intérieur de cette page, on trouve deux éléments différents : l entête (délimité par les balises <head> et </head>) qui contient des informations sur la page comme son titre, les mots clés pour le navigateur, etc (on parle de meta-données) qui ne sont pas affichées par le navigateur et le corps (délimité par les balises <body> et </body>) qui, lui, contient tout ce qui va être affiché sur le navigateur. Un commentaire en HTML est délimité par  Voici donc le squelette minimaliste d une page HTML : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>  </head> <body>  </body> </html> Vous remarquerez que nous avons pris soin d indenter la page en mettant un décalage lorsque nous passons à une balise incluse dans une autre : ceci améliore la lisibilité de la page. N hésitez pas à commenter votre code et à sauter des lignes. 4. L entête L entête contient ce qu on appelle les meta-données. Parmi celles-ci nous allons retrouver : Le titre de la page délimité par <title> et </title> -- à compléter Le corps de la page a. Le texte i. Titres et paragraphes L élément principal de votre page, c est son contenu textuel. Celui-ci n est pas directement mis dans le corps de la page, mais il va être structuré en chapitres, sous-chapitres et paragraphes.

4 <h1>ici mon titre</h1> <h2>sous-titre de 1er niveau</h2> <h3>sous-titre de 2ème niveau</h3> Un paragraphe normal sur 2 lignes : <br /> La balise br permet d ajouter des sauts de ligne à l intérieur d un bloc. Deux paragraphes vont être espacés à l écran de façon à les différencier facilement Ce qui donne : <br /> est une balise unique : elle regroupe à elle seule balise ouvrante & fermante, d où le / avant le > de fin de balise. Les titres et sous-titres peuvent aller jusqu à 6 niveaux (h1 à h6). ii. Listes Lorsqu on hiérarchise des informations, on apprécie de pouvoir créer des listes à puces ou des listes numérotées. Ces éléments sont également disponibles dans le langage HTML. <h1>les listes</h1> <h2>liste à puce</h2> Nous allons voir ici comment écrire une liste à puces. Les balises impliquées sont ul et li. <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> <h2>liste numérotée</h2> Les listes peuvent également être numérotées grâce à la balise ol. <ol>

5 <li>item 1</li> <li>item 2</li> </ol> <li>item 3</li> <h2>imbrication de listes</h2> Les listes peuvent s'imbriquer. <ul> <li>item 1 <ul> <li>ss Item 1</li> <ol> <li>ss ss Item 1</li> <li>ss ss Item 2</li> </ol> <li>ss Item 2</li> </ul> </li> <li>item 2 <ol> <li>ss Item 1</li> <li>ss Item 2</li> <li>ss Item 3</li> </ol> </li> </ul>

6 iii. Les tableaux De même que le langage HTML permet de faire des listes, vous allez pouvoir mettre en place des tableaux. <h1>les tableaux </h1> <table border="1"> <td>case 1 </td> <td>case 2 </td> <td>case 3 </td> <td>case 4 </td> <td colspan="2">2 colonnes fusionnées </td>

7 <td rowspan="3">3 lignes fusionnées </td> </table> Ce qui donne : b. Faire des liens Avant de voir comment faire un lien en HTML, il convient de revenir sur 2 définitions : Le lien absolu Il s agit d un lien établi à partir de l adresse complète de l élément que vous souhaitez adresser. Ce sont les liens pour relier votre page à un élément extérieur à votre site. Le lien relatif Ex. : est une adresse absolue. Il s agit d un lien établi en relatif par rapport à la page courante. Ce sont les adresses que vous allez utiliser pour relier vos pages entre elles. Ex :../commun/images/image1.jpg est une adresse relative... permet de remonter d un répertoire dans l arborescence des fichiers (accès au dossier parent).. désigne le répertoire courant. <h1>les liens</h1>

8 Définissons une ancre désignant le haut de la page <a name="haut_page" id="haut_page"></a>. Nous allons voir ici comment faire un lien vers une <a href="../theme2/page2.html">autre page de mon site</a>, à moins qu'on ne souhaite se rendre directement à une <a href="../theme2/page2.html#ancre_page2">ancre</a> définie dans cette page?. Etablissons maintenant un lien vers une <a href=" extérieure</a> avant de revenir au <a href="#haut_page">haut de la page</a>. c. Insérer une image Comme pour le saut de ligne, la balise d insertion d image est une balise unique. Voici sa syntaxe : <img src="lien vers l image" alt="texte au survol de l image par la souris" width="largeur de l image en pixels" height="hauteur de l image en pixels" /> L image doit toujours être positionnée dans un bloc, généralement un paragraphe. Vous voilà maintenant armé pour faire votre premier site. d. Ajouter un formulaire Le langage HTML permet également l ajout de formulaires. Nous allons voir ici simplement les balises associées au formulaire et non pas la façon de traiter les informations recueillies par formulaire (ceci est traité dans la fiche pratique PHP) ou leur mise en forme (traité dans la fiche pratique CSS) <h1>les éléments de formulaire</h1> <form id="form1" name="form1" method="post" action=""> <label>un champ de saisie de texte <input type="text" name="textfield" /> </label> <label>une zone de texte plus importante

9 <textarea name="textarea"></textarea> </label> <label> <input type="checkbox" name="checkbox" value="checkbox" /> Une case à cocher</label> <label> <input type="radio" name="radiobutton" value="radiobutton" /> Une autre case</label> <label> <input type="radio" name="un groupe de boutons à cocher" value="1" /> Bouton radio 1</label> <br /> <label> <input type="radio" name="un groupe de boutons à cocher" value="2" /> Bouton radio 2</label> <br /> <label>une liste de valeurs à sélectionner <select name="select2"> <option value="1" selected="selected">valeur 1</option> <option value="2">valeur 2</option> <option value="3">valeur 3</option> </select> </label> </form>