Cours HTML

Cours sur le langage HTML.

Plan


Le langage HTML

Ici le lien vers les supports de cours de Fabien Torre sur le langage HTML .

Qu'est ce que l'HTML?

HTML est le langage de balisage hypertexte utilisé dans le Web (HyperText Markup Language).
Ce n'est pas un langage de programmation proprement dit.
Ce sont "simplement" des balises pour mettre en forme (avec des liens, en tableau, etc...) du texte et des images.
Pour avoir une idée de l'aspect d'une page écrite en HTML, cliquez sur "Affichage" (ou "View") dans votre navigateur, puis sélectionnez "page source".

Qu'est ce qu'une balise?

Une balise est une "instruction" comprise entre crochets <  > qui possède un nom et parfois des attributs.
<br> est, par exemple, la balise utilisée pour spécifier qu'il faut passer à la ligne.

La plupart des balises doivent être ouvertes puis refermées.
On retrouvera donc souvent une balise de début et une balise de fin.
La balise de fin porte le même nom que la balise de début mais est en plus précédée du signe /.
Nous aurons donc: (ouverture) <nom_de_balise> et (fermeture) </nom_de_balise>.
Par exemple: <b>mon texte en gras (bold)</b>.
Le nom de la balise (contenu entre les crochets) n'est pas sensible à la casse:
il peut être écrit indifféremment en majuscule, en minuscule ou en un mélange des 2.

L'attribut d'une balise est défini comme suit: nom_attribut="valeur"
Par exemple, la balise utilisée pour faire un lien a pour nom "a", et pour nom d'attribut "href".
Ainsi, <a href="http://www.google.fr">Google</a> permet de faire un lien vers la page principale du site de Google.
Dans ce cas, la valeur de l'attribut "href" est donc "http://www.google.fr".

De quoi avez-vous besoin ?

Pour créer une page Web en HTML, vous avez besoin de:


Présentation des balises usuelles

Ici le lien vers des tutoriaux sur les balises de base.

Votre premier document

Explications des nouvelles balises utilisées:


Balises simples

Exemple

En tapant ça:
<center> <b> <u> Mon texte </u> </b> <br> Et la suite... </center>


Vous obtenez ça:
Mon texte
Et la suite...

Les commentaires

<!-- ceci est un commentaire dans mon fichier HTML -->
<!-- il n'apparaitra donc pas dans le texte de mon document -->


Balises de mise en forme

La balise de couleur

<font color="red">Mon texte</font>
<font color="#FF0000">Mon texte</font>

Le premier exemple est utilisable pour quelques couleurs prédéfinies: red, green, black...

Sinon, vous pouvez utiliser le code commençant par #, basé sur le système "RGB" (Red-Green-Blue):

Par exemple, si vous voulez obtenir du rose, mélange du rouge et du bleu, tapez <font color="#FF00FF">Mon texte</font>

Choisissez vos couleurs à partir du "colour picker" suivant ...

La balise de taille


Les listes

En tapant ça:

<UL>
<LI> Ligne 1
<LI> Ligne 2:
<OL>
<LI> Sous-Ligne 2.1
<LI> Sous-Ligne 2.2
</OL>
</UL>

Vous obtenez ça:

  • Ligne 1
  • Ligne 2
    1. Sous-Ligne 2.1
    2. Sous-Ligne 2.2

    Explication:

    • <OL> correspond aux listes numérotées (Ordered List);
    • <UL> aux listes à puces (Unordered List);
    • et <LI> sert à spécifier qu'on démarre un nouvel élément de liste;
    • à noter que </LI> existe également, mais n'est pas nécessaire, car supposé à l'ouverture du <LI> suivant, ou à la fermeture de liste </UL>

    Enfin, vous pouvez également spécifier les types de numérotations ou de puces utilisées:

    1. <ol type="a">
    2. <ol type="a">
    1. <ol style="list-style-type: lower-roman">
    2. <ol style="list-style-type: lower-roman">
    1. <ol style="list-style-type: upper-roman">
    2. <ol style="list-style-type: upper-roman">
    1. <ol style="list-style-type: lower-alpha">
    2. <ol style="list-style-type: lower-alpha">
    1. <ol style="list-style-type: upper-alpha">
    2. <ol style="list-style-type: upper-alpha">
  • <ul type="disc">
  • <ul type="disc">

  • <ul type="circle">
  • <ul type="circle">

  • <ul type="square">
  • <ul type="square">

    Les tableaux

    • <TABLE> et </TABLE> servent respectivement à ouvrir une nouvelle table, et fermer la table courante;
    • <TR> et </TR> servent à définir une ligne du tableau;
    • <TD> et </TD> servent à définir une cellule du tableau (à noter que </TD> n'est pas indispensable, pour la même raison que </LI>).
    • <TH> et </TH> servent à définir un titre de ligne ou de colonne (le texte apparait alors centré en gras dans la cellule correspondante);
    • et <CAPTION> et </CAPTION> servent à définir un titre pour le tableau.

    Par exemple en tapant ça:

    <table>
    <caption>Mon titre</caption>
    <tr>
    <th>Nom 1
    <th>Nom 2
    </tr><tr>
    <td>Cellule 1
    <td>Cellule 2
    </tr>
    </table>

    Vous obtenez ça:

    Mon titre
    Nom 1 Nom 2
    Cellule 1 Cellule 2

    Options de la table:

    • border: spécifie l'épaisseur du cadre extérieur, en pixels. Avec la valeur 0, le cadre est invisible;
    • cellspacing: épaisseur en pixels autours de chaque cellule;
    • cellpadding: épaisseur en pixels entre l'élément de la cellule et le cadre;
    • width: largeur occupée par le tableau en pixels ou en pourcentages;
    • align: l'alignement du tableau: center, right ou left.

    Exemple

    En remplaçant la balise <table> de l'exemple précédent par: <table border=1 cellpadding=2 cellspacing=5>, vous obtenez ça:

    Mon titre
    Nom 1 Nom 2
    Cellule 1 Cellule 2

    Options des cellules:

    • <td colspan=2>: fusion horizontale de 2 cellules;
    • <td rowspan=2>: fusion verticale de 2 cellules.

    Images et références

    Les images

    <IMG SRC="chemin_d_acces_a_l_image">

    Attributs:
    • align: alignement désiré de l'image (de même que pour les tableaux)
    • alt: texte associé à l'image (apparait quand la souris passe au dessus, ou en remplacement de l'image si celle-ci n'existe pas)
    • width: longueur
    • height: hauteur

    Les liens hypertextes

    <A HREF="chemin_d_acces_a_la_page">Texte du lien</A>

    Liens à l'intérieur d'une même page:

    • Placer: <a name="myRef"></a> à l'intérieur de votre document
    • <a href="#myRef">Texte du lien</a> désigne alors l'emplacement désigné
    • à utiliser par exemple en bas de page pour proposer de revenir en haut de page.

    Les chemins d'accès

    Les chemins d'accès peuvent être:

    • absolus: c'est-à-dire qu'on spécifie l'adresse complète de ce à quoi on fait référence:
      par exemple C:/images/monImage.gif pour une image, ou http://www.google.fr pour un site;
    • ou relatifs: la référence est faite par rapport à l'endroit où l'on se trouve:
      par exemple ./monImage.gif ou ./maPage.html désignant des fichiers situés dans le même répertoire que le fichier qui y fait référence.

    Dans ce cas:

    • "." désigne le répertoire courant,
    • et ".." désigne le répertoire parent.

    Par exemple, dans votre répertoire nommé "site" se trouve un répertoire nommé "images" et un fichier nommé "index.html".
    Dans le fichier "index.html", vous voulez faire référence à l'image nommée "monImage.gif" du répertoire "images".
    La référence se fait alors comme suit: <img src="./images/monImage.gif">
    Maintenant, vous êtes dans un fichier du répertoire "images" et vous voulez faire référence à votre fichier "index.html".
    Alors la référence se fait comme suit: <a href="../index.html">Ma ref</a>

    Options de la balise body

    Nous avons maintenant assez d'éléments pour introduire les principales options de la balise body:

    • bgcolor=couleur: couleur de fond
    • background=chemin_image: image de fond
    • text=couleur: couleur du texte
    • link=couleur: couleur des liens
    • vlink=couleur: couleur des liens visités
    • alink=couleur: couleur des liens actifs (au moment où vous cliquez dessus)

    Organisation du texte

    Les paragraphes

    <p> bla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla bla</p>

    <p align=justify> bla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla bla</p>

    <p align=left>bla blablabla blabla blablablabla blabla bla</p>

    <p align=center>bla blablabla blabla blablablabla blabla bla</p>

    <p align=right>bla blablabla blabla blablablabla blabla bla</p>

    L'indentation

    <blockquote></blockquote>
    <blockquote><blockquote></blockquote></blockquote>

    Les titres

    de <H1> à <H6>:

    <H1>Mon texte</H1>

    <H2>Mon texte</H2>

    <H3>Mon texte</H3>

    <H4>Mon texte</H4>

    <H5>Mon texte</H5>
    <H6>Mon texte</H6>

    Les séparateurs

    <HR>


    <HR width="50%">


    Les caractères spéciaux

    Les caractères tels < et > étant interprétés par votre navigateur comme marqueurs de balises, comment faire pour les afficher dans un texte sans qu'ils ne soient interprétés?

    Pour cela, il existe les caractères spéciaux. Ceux-ci commencent par le signe "&" et finissent par un point-virgule ";".
    Ainsi, par exemple, il faut taper &gt; pour obtenir le signe >.

    Cette liste est également utile pour afficher des caractères n'existant pas sur notre clavier.
    Ainsi, par exemple, pour obtenir le caractère €, il faut écrire &euro;

    Ici une liste des caractères spéciaux en HTML.


    Les frames

    <FRAMESET> et <FRAME>

    Exemple

    <HTML>
    <HEAD>
    <TITLE>Frames</TITLE>
    </HEAD>

    <FRAMESET COLS="250,*">
    <FRAME SRC="./menu.html">
    <FRAME SRC="./page1.html" NAME="pagePrincipale">

    <NOFRAMES>
    <H1>No Frames? No Problem!</H1>
    Take a look at our <A HREF="./page1.html">no-frames</A> version.
    </NOFRAMES>

    </FRAMESET>
    </HTML>

    Référence entre pages

    Si maintenant vous voulez qu'en cliquant sur un lien de la page "menu", ce soit la page "pagePrincipale" qui soit modifiée, vous écrivez:
    <a href="maReference" target="pagePrincipale">


    Map, area et images réactives

    <img src="monImage.jpg" usemap="#mymap" width="300" height="50">
    <map name="mymap">
    <area shape="rect" coords="0,0,100,50" href="page1.html" alt="zone 1">
    <area shape="rect" coords="100,0,200,50" href="page2.html" alt="zone 2">
    <area shape="rect" coords="200,0,300,50" href="page3.html" alt="zone 3">
    </map>

    3 types de formes peuvent être utilisées :

    • la forme rectangulaire, comme dans l'exemple : shape="rect" → coords="left-x, bottom-y, right-x, top-y"
    • la forme sphérique : shape="circle" → coords="center-x, center-y, radius"
    • ou la forme polygonale : shape="poly" → coords="x1, y1, x2, y2, ..., xN, yN"

    Exercice 1

    Ecrire le code HTML permettant d'obtenir ceci:

    BIG TITRE


    Une petite intro...


    Ma liste de refs:

  • Générale:
    1. Référence vers Google
    2. Référence vers Yahoo
  • Relative:
    1. Référence vers le fichier nommé "file.html" du répertoire "rep" se trouvant dans le répertoire courant
    2. Référence vers le fichier nommé "file2.html" du répertoire "rep2" se trouvant au même niveau que le répertoire courant

    Et mon tableau:

    Titre
    Texte 1
    Texte 2
    Texte 3
    Texte 4
    Texte 5


    Exercice 2

    Créez votre CV en HTML.

    Le minimum qui doit y figurer est:

    • en haut à gauche: Nom, Prénom, Nationalité, Date et lieu de naissance, Coordonnées (mail, tel, adresse),
    • en haut à droite: une photo,
    • un tableau récapitulatif de votre cursus scolaire,
    • une liste spécifiant votre expérience professionnelle,
    • et vos loisirs,

    le but étant de simultanément:

    • créer une page claire,
    • créer une page agréable,
    • et que le code qui l'a généré soit également le plus clair possible.

    HTML reste aujourd'hui le langage de publication sur le web par excellence.
    Cependant, on note l'abandon des balises de pure mise en page, celles-ci étant avantageusement remplacées par les feuilles de style.
    Celles-ci permettent de définir globalement les mises en page à effectuer. Ainsi, il est recommandé de ne plus utiliser de balises comme FONT, B, I, etc...

    De manière générale, les balises HTML ne doivent être utilisées que pour structurer le document, et non plus pour préciser son apparence.

    Les feuilles de style CSS

    Ici le lien vers les supports de cours de Fabien Torre sur les feuilles de style CSS.

    Et ici la feuille de style utilisée pour cette page.

    Principe

    L'idée de l'utilisation de feuilles de style (en anglais Cascading Style Sheets (CSS)) est de dissocier le contenu d'un document de sa mise en forme.

    Les intérêts de cette séparation sont nombreux :

    • un style, appliqué à toutes les pages d'un site, assure la cohérence graphique de ce site ;
    • la maintenance d'un site en est facilitée, un changement de charte graphique ne portera que sur la feuille de style et la modification sera naturellement propagée à toutes les pages ;
    • le code HTML est lisible et facilement modifiable, sans que l'on ait à penser en même temps au contenu et à son apparence ;
    • les pages, dégagées des balises de mise en forme, sont plus légères, donc plus rapides à circuler sur un réseau (la feuille de style est, le plus souvent, très légère et ne sera chargée qu'une seule fois pour l'ensemble des documents qui l'utilisent) ;
    • les balises donnent une indication sur la nature du contenu et cette indication pourra être utilisée par un moteur de recherche.

    La feuille de style est donc un fichier externe à vos pages HTML. Ce fichier doit avoir comme extension .css
    Et pour spécifier qu'une page HTML utilise une certaine feuille de style (qu'on nomme ici myStyle.css), on écrit ceci dans l'en-tête de la page HTML (balises head):
    <link rel="stylesheet" type="text/css" href="myStyle.css">

    Remarque: les navigateurs gèrent souvent une même feuille de style de manière différente...
    Après avoir écrit une feuille de style, il conviendra donc de vérifier l'apparence du document avec un maximum de navigateurs.
    Enfin, et surtout, il faut s'assurer impérativement que le document reste lisible même sans la feuille de style.

    Utilisation

    La syntaxe générale dans une feuille de style est la suivante:

    nomClasse{

    nomAttribut1: valeur1;
    nomAttribut2: valeur2;
    etc...
    }

    Les commentaires sont inclus entre /* et */

    Par exemple:

    H1{

    font-size: 20pt;
    text-align: center;
    text-decoration: underline;
    color: red;
    }

    va permettre de définir que tout titre H1:

    • est de taille 20 (pt = point),
    • est centré
    • est souligné,
    • et est de couleur rouge.

    Liste des propriétés CSS

    Une liste complète des propriétés CSS est accessible ICI.
    Voici une liste des plus utilisées: on présente ici d'abord le nom de l'attribut, sa signification, puis la liste de ses valeurs possibles:

    • Propriétés de police:

      • font-size: taille de police:
        numérique ( 10pt ...) / xx-small / x-small / small / medium / large / x-large / xx-large

      • font-family: famille de police:
        Arial / Helvetica / Times New Roman / Sans Serif ...

      • font-style: style de police:
        normal / italic / oblique

      • font-weight: graisse de police:
        normal / bold / et de 100 (très fin) à 900 (très gras)

      • font-variant: variante de police:
        normal / small-caps (petites capitales)

      • color: couleur de police:
        red / #FF0000 ...

    • Mise en forme du texte:

      • text-decoration: décoration du texte:
        underline / overline / line-through / blink / none

      • text-transform: transformation du texte:
        capitalize (début des mots en majuscule) / uppercase / lowercase / none

    • Agencement du texte:

      • display: position par rapport au reste: nouveau paragraphe (block) / ou à la suite du paragraphe précédent (inline)

      • text-align: alignement horizontal: à gauche (left) / centré (center) / à droite (right) / justifié (justify)

      • text-indent: retrait du texte: numérique

      • line-height: interligne: numérique

      • vertical-align: alignement vertical: aligner en haut (top) / aligner au milieu (middle) / aligner en bas (bottom) / aligner sur la ligne de base, ou en bas s'il n'y a pas de ligne de base (baseline) / mettre en indice, sans réduire la taille de la police (sub) / mettre en exposant, sans réduire la taille de la police (super) / aligner sur le bord supérieur de l'écriture (text-top) / aligner sur le bord inférieur de l'écriture (text-bottom)

    • Mise en forme de listes:

      • list-style-type: type de représentation:
        numériques: decimal / lower-alpha / upper-alpha / lower-roman / upper-roman
        à puces: disc / circle / square

      • list-style-position: retrait des listes:
        puces et numérotation dans le corps de la liste (inside) / retrait à gauche des puces et numérotation (outside)

      • list-style-image: graphique de puces personnalisées:
        url(chemin_vers_image.gif)

    • Couleurs et arrière-plans:

      • color: couleur du texte
      • background-color
      • background-image
      • background-repeat: effet de répétition (repeat, repeat-x, repeat-y, no-repeat)
      • background-attachement: effet de filigrane (scroll, fixed)
      • background-position

    • Retraits extérieurs et intérieurs:

      • margin (retrait extérieur): numérique
      • margin-top
      • margin-bottom
      • margin-left
      • margin-right
      • padding (retrait intérieur)
      • padding-top
      • padding-bottom
      • padding-left
      • padding-right

    • Cadres:

      • border: numérique
      • border-top
      • border-bottom
      • border-left
      • border-right
      • border-style (solid, double, groove, ridge, inset, outset, dotted, dashed)
      • border-style-top
      • border-style-bottom
      • border-style-left
      • border-style-right
      • border-width
      • border-color

    • Positionnement absolu des éléments:

      Balises div et span:
      • position (static, absolute, relative)
      • top
      • left
      • width
      • height
      • visibility (visible, hidden)
      • z-index (Position de la couche en cas de superposition)

    • Pseudo-classes pour liens hypertextes:

      • A:link
      • A:hover (passage de souris)
      • A:active (click de souris)
      • A:visited (prioritaire sur les précédents... ne pas utiliser mais préférer le VLINK de la balise BODY)

    Exemples

    Pour définir de façon globale la mise en forme du corps du document:

    body{

    background-color: #CCFFCC;
    font-size: 11pt;
    color: #000000;
    font-family: Helvetica, Arial, sans-serif;
    }

    Pour définir de façon globale la mise en forme des liens hypertextes:

    A:link{

    text-decoration: none;
    color: #0000FF;
    background-color: inherit;
    }


    Exercices sur les feuilles de style

    Modifier vos pages précédemment créées en utilisant les feuilles de style.

    Pour cela, vous pouvez utiliser les interfaces écrites par Dominique Gonzalez et récupérer les différents styles pour les inclure dans vos propres pages :


    Voir aussi...