Didacticiel HTML

[Mot de passe perdu] - [Inscription au site]


Leçon 1 : l'environnement de travail

Le répertoire de travail

- Créer dans le répertoire de travail habituel, le répertoire : _public_html
- Créer dans "_public_html" le répertoire du site : monSite
- Prendre l'habitude de nommer ses fichiers et ses répertoires en respectant les règles :
      * ne jamais utiliser de caractères accentués tels que : é, è, ç, ù, etc.
      * ne jamais utiliser de caractères spéciaux tels que : :, !, ?, ), @, etc.
      * ne jamais utiliser d'espace;
      * à la place des espaces, soit utiliser des "_", soit mettre une majuscule en début de mot. Exemple : monTresBeauSite.html
      * les caractères autorisés sont : [a b... z], [A B... Z], [0 1... 9], [. - _]
- Les fichiers HTML peuvent se terminer par ".htm" ou par ".html". Il vaut mieux utiliser ".html".
- Le fichier d'accès au site s'appelle toujours "index.html".

L'éditeur de texte

- Un "éditeur de texte" est un logiciel qui enregistre le texte saisi tel quel, sans mise en forme. Exemples :
      * Linux : emacs, vi
      * Windows : notepad, bloc notes, wordpad en faisant "enregistrer au format texte seul" ou équivalent.
- Un "traitement de texte" est un logiciel qui enregistre le texte saisi avec les mises en forme comme le soulignement, les italiques, des tableaux, etc. Exemple :
      * open office, winword (word)
- Pour s'en convaincre :
      * Enregistrer un fichier avec un traitement de texte.
      * Ouvrir ce fichier avec un éditeur de texte.
      * Constat ? Une multitude de caractères apparaissent. Ces caractères sont les mises en forme évoquées plus haut.
-  Un fichier HTML est un fichier texte enregistré avec un éditeur de texte qui contient des mises en forme de type HTML.

Le navigateur ou butineur

- Pour lire le fichier HTML, c'est à dire interpréter les mises en forme HTML, il faut un "navigateur", ou encore un "butineur", ou encore un "client web". Exemples : firefox, mozilla, internet explorer
- Comme le HTML est un langage interprété, des différences peuvent apparaître selon le navigateur utilisé.




Leçon 2 : la structure d'une page HTML

Code source d'une page HTML

<html>
<head>
  <title>Mon site</title>
</head>
<body>
Bonjour Toto
</body>
</html>

- Ouvrir un éditeur de texte et copier le code ci-dessus.
- Enregistrer le fichier dans le répertoire "monSite" sous le nom index.html.
- Fermer l'éditeur de texte.
- Pour ouvrir le fichier "index.html" :
      * soit ouvrir "l'explorer", trouver le fichier "index.html" et double-cliquer dessus.
      * soit ouvrir le navigateur, faire "ouvrir un fichier".

Explication du code

- Le code source est constitué :
      * de termes encadrés par "<" et ">". Ce sont des balises. Il y a des "balises ouvrantes" (par exemple <body>) et des balises fermantes (par exemple </body>)
      * de textes entre les balises. C'est le contenu de la page qui apparaît dans le navigateur.
- La page HTML est structurée de la façon suivante :
      * les balises <html> et </html> encadrant la page;
      * d'une tête de page encadrée par <head> et </head>;
      * d'un corps de page encadré par <body> et </body>.
- A l'intérieur de ces balises, on trouve le contenu de la page :
      * le titre de la page obligatoirement dans la tête de page et encadré par <title> et </title>;
      * le contenu de la page qui sera enrichi avec d'autres balises HTML à découvrir par la suite.

Quelques remarques générales

- Les retours à la ligne, les tabulations et les espaces successifs sont interprétés par un seul espace.
      * "bonjour            toto" sera interprétré de la même manière que "bonjour toto"
      * <head><title>ma page</title></head> est équivalent à :
            <head>
            <title>
            ma page
            </title>
            </head>
- Il ne faut pas croiser les balises :
      * <head><title>blabla</head></title> n'est pas bon.
      * <head><title>blabla</title></head> est bon.
- Ne pas hésiter à aérer son code avec des retours à la ligne et des tabulations pour le rendre davantage lisible et facile à entretenir.
- Pour insérer du code qui ne doit pas être interprété (par exemple pour l'ajout de commentaires), il faut utiliser :

<!-- commentaires sur le code -->

Attributs des balises

- Les balises peuvent être enrichies par des attributs. Exemple : <body bgcolor="black" text="white">
- Chaque balise possède sa liste d'attributs. Dans la suite des leçons, les attributs et leurs valeurs possibles seront présentées de la façon suivante :

<body>
  bgcolor="[couleur: white, red, blue, black]"  // couleur du fond de page
  text="[couleur]"  // couleur du texte
  link="[couleur]"  // couleur des liens, cf prochaine leçon
  vlink="[couleur]"  // couleur des liens déjà visités
  alink="[couleur]"  // couleur les liens actifs
  background="URL"  // URL est l'adresse de l'image de fond de page, cf prochaine leçon

- Ne pas oublier de fermer la balise avec </body>.
- La balise fermante s'écrit sans ses attributs. Par exemple : </body>
- "//" signifie ici "explication :". Il ne faut donc pas l'écrire dans le code HTML
- Pour cette balise <body>, ce que sont un lien et une URL sera expliqué dans une prochaine leçon. Tester simplement les attributs "bgcolor" et "text".
- La plupart des autres balises et de leurs attributs seront présentés dans les leçons suivantes. Internet est également une source d'information précieuse pour les découvrir. Ne pas oublier que l'interprétation des balises et de leurs attributs dépend des navigateurs.




Leçon 3 : la mise en forme du texte

Styles des textes

- <b>gras</b>
- <i>italic</i>
- <u>souligné</u>
- <strike>barré</strike>
- <s>barré</s>
- <basefont size=x>  // fixe la taille de référence des fonts
- <font>  // définit les caractéristiques de la font
   size="[x, +x, -x]"  // taille aboslue ou relative par rapport à basefont
   color="[couleur]"  // couleur de la font
   face="[police ou type]"  // police (arial, verdana) 
                            // ou type (sans-serif, serif) de la font

- Une font ou police est une famille de caractères. Elles sont définies :
      * soit par un nom : arial, verdana, etc.
      * soit par un type : serif, sans-serif. Le serif désigne le petit support horizontal à la base des caractères typographiques.

- <big>plus gros</big>
- <small>plus petit</small>
- <sub>en indice</sub>
- <sup>en exposant</sup>
- <blink>clignotant</blink>

- Et quelques autres balises de moindre utilité :

- <address>met le texte en italique, à utiliser pour des remarques particulières</address>
- <cite>citation</cite> - <code>instruction</code> - <del>texte supprimé mais laissé en place</del> - <dfn>définition d'instance</dfn> - <em>emphase</em> - <tt>style courrier tapé à la machine à écrire</tt> - <ins>nouveau texte inséré a cet endroit</ins> - <kbd>suite de caractères devant être tapés tel quel</kbd> - <person>accentuation du nom d'une personne</person> - <q>encadre le texte par des guillemets</q> - <samp>exemple</samp> - <strong>gras</strong> - <var>déclaration de variable</var>

Gestion des paragraphes

- <p>paragraphe, avec retour chariot avant et après</p>
    align="[center, right, left, justify]"
- <h1>titre de niveau 1</h1>
    align="[center, right, left, justify]"
- <h2>titre de niveau 2</h2>
- ...
- <h6>titre de niveau 6</h6>
- <center>texte au centre</center>
- <pre>texte préformaté en style courrier (conservation des espaces et des retours chariot)</pre> - <br>retour chariot. Il n'y a pas de balise fermante clear="[all, right, left]" // position de l'image par rapport au texte - <nobr>force le texte à être sur une seule ligne</nobr>
- <blockquote>Indentation avec retour chariot avant et après</blockquote>
- <hr>barre de séparation. Il n'y a pas de balise fermante width="[x, x%]" // largeur en pixels ou en % de la page size="[x]" // épaisseur en pixels align="[center, right, left]" noshade // ligne sans ombre color="[couleur]" // couleur de la ligne - <marquee>fait défiler le texte</marquee> align="[top, middle, bottom]" // alignement vertical du texte behavior="[scroll, slide, alternate]" // comportement en bout de défilement : // gauche-droite ou disparition ou rebond bgcolor="[couleur]" // couleur d'arrière plan direction="[left, right]" // sens de défilement height="[x, x%]" // hauteur en pixels ou % de la taille de la fenêtre loop="[x, infinite, -1]" // nombre de boucles ou boucles infinies width="[x, x%]" // largeur en pixels ou % de la taille de la fenêtre



Leçon 4: les couleurs

Le codage en nombre hexadécimal

- un nombre décimal est un nombre qui va de 0 à 9
- un nombre hexadécimal est un nombre qui va de 0 à 16 et qui se code ainsi :
      * les nombres décimaux 0, 1, 2,... ,9 valent respectivement en hexadécimal 0, 1, 2,... ,9
      * les nombres décimaux 10, 11, 12, 13, 14, 15 valent respectivement en hexadécimal A, B, C, D, E, F (ou a, b, c, d, e, f)
      * le nombre décimal 16 s'écrit en hexadécimal : 10
      * exemples de conversion hexadécimal vers décimal : B vaut 11, D vaut 13, 10 vaut 16, 4 vaut 4
      * exemple de conversion hexadécimal vers décimal : le nombre hexadécimal 14 se décompose en 10+4. Cela se convertit en décimal par 16+4=20 en décimal.

Le codage des couleurs

- les couleurs en HTML se codent avec un dièse "#" et des nombres hexadécimaux : #RRVVBB
      * chaque lettre un est chiffre hexadécimal qui va de 0 à F. Exemple : #3D8FA0
      * les deux chiffres hexadécimaux RR correspondent au rouge
      * les deux chiffres hexadécimaux VV correspondent au vert
      * les deux chiffres hexadécimaux BB correspondent au bleu
      * plus le chiffre est petit, plus la couleur est sombre
      * exemples : #990000 est un rouge plus sombre que #FF0000
      * exemples : #009900 est un vert plus sombre que #00FF00
      * exemples : #000099 est un bleu plus sombre que #0000FF
      * Exemple : <font color="#BA55D3">La couleur est "mediumorchid"</font>
- des couleurs ont été prédéfinies et acceptent un nom exprimé en anglais :
      * exemple : "black" est équivalent à "#000000"
      * exemple : "white" est équivalent à "#FFFFFF"
      * exemple : "indigo" est équivalent à "#4B0082"
      * etc.
      * Exemple : <font color="mediumorchid">La couleur est "mediumorchid"</font>
- Pour davantage de codes couleur, aller sur internet. Par exemple : Lien à créer




Leçon 5 : les url ou adresses internet

L'adresse ou l'url

- Une URL est une adresse internet : celle que l'on trouve dans la barre d'adresse du navigateur. Exemple : http://tardus.org
- Une URL est aussi plus simplement l'adresse d'un fichier au sein d'une arborescence. C'est aussi ce que l'on retrouve dans la barre d'adresse de "l'explorer" de windows. C'est la façon "windosienne". Exemple : C:\mesDocuments\repertoireDeTravail
- L'adresse d'un fichier (ou d'une page web) est donc la succession de dossiers et le nom du fichier pour y parvenir. Ces dossiers sont séparés soit par un slash "/", soit dans le cas particulier de windows par un anti-slash "\".
- Bien respecter la casse, c'est à dire l'écriture des minuscules et des majuscules, sinon le fichier risque de ne pas être reconnu.

L'adresse absolue

- Une adresse absolue est une adresse qui débute à la racine de l'endroit où est stocké le fichier :
      * racine d'un site internet : http://
      * racine d'un disque Windows : C:\
      * racine d'un disque Linux : /
- Dans le cas d'un site internet, si aucun fichier n'est indiqué par l'adresse, le nom de fichier "index.html" ou "index.php" est mis par défaut.
- Exemple d'adresse absolue : http://tardus.org/_environnement/accueil.php

L'adresse relative

- Une adresse relative est une adresse qui débute à "l'emplacement courant, c'est à dire le répertoire du dernier fichier appelé.
- Exemple d'adresse relative : ./images/toto.jpg
- Exemple d'adresse relative : ../_environnement/accueil.php
- Le point ./ indique l'emplacement courant.
- Le double point ../ indique qu'il faut remonter dans l'arborescence des répertoires.
- Les adresses relatives sont donc très pratiques pour transférer un site internet entre ordinateurs puisqu'il n'est alors par nécessaire de connaître le nom où le type de la racine.




Leçon 6 : les images

Les images pour l'attribut d'une balises

- Comme vu au début de ces leçons, il est possible d'indiquer une image dans certaines balises comme <body>
- Pour cela indiquer simplement l'adresse relative ou absolue de l'image dans l'attribut. Exemple : background="../mesImages/belleImage.jpg"

Mettre une image dans une page html

<img src="URL">  // adesse de l'image
  align="[top, middle, bottom, left, right, absmiddle]" 
        // par rapport au texte qui est sur la même ligne que l'image
  alt="[commentaire de l'image]"  // lors du passage de la souris
  title="[commentaire de l'image]"  // idem pour d'autres navigateurs
  border="[x]"  // épaisseur de la bordure en pixels
  width="[x, x%]"  // largeur forcée de l'image en pixels ou %
  height="[x, x%]"  // largeur forcée de l'image en pixels ou %

- Les attributs "alt" et "title" fonctionne l'une sur certains navigateurs, la seconde sur d'autres. Donc mettre les deux.
- En indiquant les attributs "width" et "height", la place sur la page html sera réservée. En cas de chargement long, cela évite alors des tressautements de la page au fur et à mesure du chargement de la page.

Les fichiers image

- Il y a trois types principaux de fichiers image :
      * le format "jpg" ou "jpeg" dont sont faits en majorité les photos;
      * le format "gif" qui gère les transparences et les animations;
      * le format "png" qui gère les transparences mais que certains navigateurs anciens n'interprètent pas en mettant un fond blanc à la place.




Leçon 7 : les liens hypertext

Ce qu'est un lien hypertext

- Le langage HTML (« HyperText Mark-Up Language ») vient, en autre, de cette capacité à créer des liens sur du texte ou des images pour basculer de pages en pages, d'adresses en adresses;
- Les liens hypertextes (ou ancrages) sont soulignés lorsqu'il s'agit de texte. Ils permettent notamment de naviguer vers :
      * d'autres pages HTML, mais pas seulement;
      * d'autres fichiers : images, film, fichiers de texte, etc.
      * à l'intérieur d'une page (comme ici, avec les numéros des leçons.

Le code pour les liens hypertext

<a href="URL">ancre   // voir plus bas pour "l'URL" et "l'ancre"
  target="[_self, _top, _blank, _parent]" // ne pas oublier le "_"

- Comme vu plus haut, l'ancre est du texte ou une image <img src="...">
- Pour que le bord de l'image en surbrillance disparaisse, écrire :
      * <img src="..." border=0>
- l'URL peut prendre plusieurs formes :
      * adresse absolue d'un fichier sur internet (http) ou sur l'ordinateur (C:);
      * adresse relative d'un fichier sur internet (http) ou sur l'ordinateur (C:);
      * adresse d'un emplacement dans une page en ajoutant au sein de la page

<a name="nomMarqueur">

         et à la fin de l'URL du lien "#nomMarqueur" (sans oublier le "#");
      * adresse au sein de la page en cours en prenant pour URL uniquement "#nomMarqueur";
      * adresse vers un email (cela ouvre alors un mail)

<a href="mailto:toto@fai.fr">Mail de toto</a>

Les petites astuces de navigation

- les navigateurs ont chacun leurs raccourcis touche qui facilitent et accélèrent l'accès aux ressources d'internet. En voilà quelques exemples qui ne fonctionnent pas tous avec tous les navigateurs.
- "MAj + clic" sur lien permet d'enregistrer la destination du lien.
- "F11" bascule entre le plein écran et le mode fenêtré.
- "CTRL + clic" ouvre le lien vers un nouvel onglet. C'est très pratique car évite les retours en arrière.
- "CTRL W" ferme l'onglet en cours.
- "F5" ou "CTRL R" raffraichit la page.
- touche "BACKSPACE" revient à la page précédente.




Leçon 1 : l'environnement de travail

Le répertoire de travail




 Aides mémoire 


Ecrire au webmestre
Suggérer une idée
Signaler un bug


Bienvenue dans le monde merveilleux des lutins