Wikiversité

Hypertext Markup Language/Version imprimable

< Hypertext Markup Language
Image logo
Ceci est la version imprimable de Hypertext Markup Language.
  • Si vous imprimez cette page, choisissez « Aperçu avant impression » dans votre navigateur, ou cliquez sur le lien Version imprimable dans la boîte à outils, vous verrez cette page sans ce message, ni éléments de navigation sur la gauche ou en haut.
  • Cliquez sur Rafraîchir cette page pour obtenir la dernière version du cours.
  • Pour plus d'informations sur les version imprimables, y compris la manière d'obtenir une version PDF, vous pouvez lire l’article Versions imprimables.


Hypertext Markup Language

Une version à jour et éditable de ce livre est disponible sur la Wikiversité,
une bibliothèque de livres pédagogiques, à l'URL :
http://fr.wikiversity.org/wiki/Hypertext_Markup_Language

Vous avez la permission de copier, distribuer et/ou modifier ce document selon les termes de la Licence de documentation libre GNU, version 1.2 ou plus récente publiée par la Free Software Foundation ; sans sections inaltérables, sans texte de première page de couverture et sans Texte de dernière page de couverture. Une copie de cette licence est inclue dans l'annexe nommée « Licence de documentation libre GNU ».

Introduction

Début de la boite de navigation du chapitre
Version imprimable
 
Chapitre no 1
Leçon : Hypertext Markup Language
Retour auSommaire
Chap. suiv. :Première page
fin de la boite de navigation du chapitre
En raison de limitations techniques, la typographie souhaitable du titre, « Hypertext Markup Language : Version imprimable
Hypertext Markup Language/Version imprimable », n'a pu être restituée correctement ci-dessus.

Pour développer en HTML, plusieurs outils sont nécessaires :

Éditeurs de texte

modifier

Un logiciel de saisie de texte rudimentaire tel le Bloc-notes de Windows ou TextEdit (Mac OS X) suffisent amplement pour créer un site web. Le Bloc-notes se trouve par défaut dans le menu Accessoires du menu Démarrer de Windows, TextEdit dans le dossier Applications de Mac OS X. L'utilisation de logiciels de création de sites web n’est pas conseillée car ils sont la plupart du temps optimisés pour un navigateur particulier (par exemple Microsoft FrontPage est optimisé pour Internet Explorer…) et ils créent des pages «lourdes» (en moyenne 20% plus lourdes qu'avec le Bloc-notes) et donc longues à charger par le navigateur. De plus, le jour où le besoin d'ajouter une fonction que votre logiciel ne permet pas d'ajouter se fera ressentir, il sera intéressant d’être familier avec le langage HTML pour faire les modifications nécessaires. Il faut également faire attention aux logiciels de traitement de texte « puissants » tels que Word qui utilisent des caractères non standards (comme des apostrophes inversées) qui peuvent générer des erreurs d'interprétation par les navigateurs.

Pour créer une page web, il suffit de taper le code HTML dans le Bloc-notes et d'enregistrer le tout avec l'extension .html ou .htm (attention à ne pas oublier de préciser l'extension. Par défaut le Bloc-notes et TextEdit enregistrent au format .txt). Il existe deux extensions, sans aucune différence entre les deux. Vous pouvez donc choisir entre .html ou .htm. Pour cela, cliquez sur Fichier → Enregistrer sous… puis dans le champ Nom du fichier, tapez nomfichier.html ou nomfichier.htm.

Éditeurs de textes pour développeurs

modifier

On peut également utiliser des logiciels un peu plus évolués et supportant la coloration syntaxique. Ils ont les mêmes atouts que le Bloc-notes et ont l'avantage supplémentaire de colorer de différentes couleurs les éléments du langage afin d’en faciliter la lecture. Ils sont fortement conseillés !

Pour Microsoft Windows, on peut conseiller :

Pour Mac OS X, on peut conseiller :

Pour les systèmes d'exploitation de type Unix (GNU/Linux, BSD, etc.), on peut conseiller :

  • vi/vim ;
  • GNU Emacs (également disponible pour plateforme Windows) ;
  • gedit (bureau GNOME) ;
  • Kate (bureau KDE);
  • Geany léger avec autocomplétion (également disponible pour plateforme Mac OS X ou Windows).
modifier

Du plus utilisé au moins utilisé en 2017 :

  1. Chrome
  2. Safari
  3. Edge (+ IE)
  4. Firefox
  5. « Opera » (consulté le 17 juin 2017)


  Sommaire


Première page

Début de la boite de navigation du chapitre
Version imprimable
 
Chapitre no 2
Leçon : Hypertext Markup Language
Chap. préc. :Introduction
Chap. suiv. :Mise en forme du texte
fin de la boite de navigation du chapitre
En raison de limitations techniques, la typographie souhaitable du titre, « Hypertext Markup Language : Version imprimable
Hypertext Markup Language/Version imprimable », n'a pu être restituée correctement ci-dessus.

Introduction

modifier

Une page HTML est composée d’un ensemble d'instructions données grâce à des balises.
Pour écrire du code HTML, il suffit d’utiliser n’importe quel éditeur de texte simple. N'utilisez pas de logiciel de traitement de texte, qui a tendance à reformater le texte écrit par l'utilisateur.

Les balises

modifier

Définition

modifier

Les instructions en HTML sont définies grâce à des balises (ou tags en anglais). Ce sont ces balises qui vont permettre au navigateur qui interprétera le code de faire la différence entre la présentation et le texte proprement-dit.

Les balises indiquent donc au navigateur comment mettre en forme le texte. Une balise s'écrit entre les signes inférieur (<) et supérieur (>), appelés également chevrons. Cela donne : <balise>. Une balise est en général accompagnée d’une seconde balise de la forme </balise>. La première balise est appelée balise d'ouverture ou balise ouvrante et la deuxième est nommée balise de fermeture ou balise fermante. La balise de fermeture permet d'indiquer au navigateur qu’il faut arrêter d'appliquer la mise en forme introduite par la balise ouvrante.

Prenons un exemple pour expliquer ce principe de balises ouvrante et fermante. La balise <i> permet de mettre le texte en italique. Ainsi, si dans la phrase Le langage HTML est un langage informatique, on veut mettre seulement le mot HTML en italique, on utilise la syntaxe suivante : 

L'<i>HTML</i> est un langage informatique.

affichera 

L'HTML est un langage informatique.

La balise ouvrante <i> indique au navigateur que la suite du texte doit apparaître en italique et la balise fermante </i> indique au navigateur qu’il doit cesser d'écrire en italique.

Les balises peuvent être écrites indifféremment en majuscules ou en minuscules. Cependant, il est conseillé de les écrire en minuscules pour assurer une plus grande compatibilité avec le XHTML et faciliter la migration vers ce langage le moment venu.


Une balise peut avoir un ou plusieurs attributs. Les attributs permettent de préciser les propriétés de la balise. Ils se présentent sous la forme <balise attribut="valeur">. Les guillemets autour de la valeur ne sont pas obligatoires mais sont recommandés pour des raisons de compatibilité avec le XHTML. Les attributs ne doivent pas être répétés dans la balise fermante.


On appelle code source (ou source tout court), l’ensemble des balises et du texte de la page.

Il est possible d'observer le code source de toute page web en faisant :

  • Un clic droit puis Code source de la page sous Firefox
  • Un clic droit puis Afficher la source sous Internet Explorer
  • Un clic droit puis Afficher le code source de la page sous Chrome
  • Un contrôle+clic puis "code source" sous Safari
  • Un clic droit puis Source, ou CTRL+U sous Opera

L'imbrication

modifier

Une des forces du HTML est le fait que les balises puissent être imbriquées. En effet pour écrire un texte en italique (balise <i>) et souligné (balise <u>), il suffit d'écrire <i><u>texte</u></i>. Cependant les balises ne doivent pas se chevaucher. En d'autres termes, il est impératif de fermer la première balise ouverte après la deuxième. Ainsi, <u>Firefox est un <i>navigateur Web</i></u> est correct mais <u>Firefox est un <i>navigateur Web</u></i> est incorrect puisque la balise <u> a été ouverte avant la balise <i> et a été fermée en premier. On peut bien évidemment imbriquer plus de deux balises.

Le document HTML minimum

modifier

Nous avons déjà vu qu'un document HTML n'est qu'un document texte avec l'extension .html ou .htm. Cependant, pour que le navigateur reconnaisse le fichier comme un fichier HTML, il faudrait au minimum écrire : 

<html>
 <head>
  <title></title>
 </head>
 <body>
 </body>
</html>

La balise <html> permet de déclarer le document comme un document HTML, et annonce son début. La balise </html> annonce la fin du document HTML au navigateur.

La page web possède une entête délimitée par les balises <head> et </head> et qui permet de donner un titre à la page (avec <title>…</title>), ainsi que des informations au navigateur et aux moteurs de recherches.

La balise <title> permet de définir le titre du document, qui n'est composé que de texte. Celui-ci n’est pas affiché dans le document, mais comme une donnée à propos du document.

Enfin les balises <body> et </body> délimitent le corps de la page HTML, c'est-à-dire ce qui sera affiché dans le navigateur.

Cette disposition est équivalente à celle d’une lettre. En effet, l'entête d’une lettre comporte les informations concernant l’objet et des informations sur l'expéditeur. Elle est représentée par la balise <head>. Le corps de la lettre comprend le message proprement-dit et est représenté par la balise <body>.

Première page web

modifier

Créons maintenant une première page web. La syntaxe de base doit être celle du paragraphe précédent. Nous allons créer une page qui affiche Bonjour et bienvenue sur Wikiversité. Le code source est le suivant : 

<html>
 <head>
  <title>Première page</title>
 </head>
 <body>
  Bonjour et Bienvenue sur <i>Wikiversité</i>
 </body>
</html>

La balise <title> permet d'ajouter un titre au document qui s'affichera dans la barre de titre du navigateur. Attention à ne pas oublier de la fermer avec la balise </title>.


  Introduction


Mise en forme du texte

Début de la boite de navigation du chapitre
Version imprimable
 
Chapitre no 3
Leçon : Hypertext Markup Language
Chap. préc. :Première page
Chap. suiv. :Liens hypertextes
fin de la boite de navigation du chapitre
En raison de limitations techniques, la typographie souhaitable du titre, « Hypertext Markup Language : Version imprimable
Hypertext Markup Language/Version imprimable », n'a pu être restituée correctement ci-dessus.

Introduction

modifier

Afin de créer des pages qui soient agréables à lire, il faut savoir présenter le texte. Il y a cependant une remarque préliminaire à faire.

Les navigateurs ne prennent pas en compte les retours à la ligne et les tabulations et quel que soit le nombre d'espaces à la suite que vous tapez, un seul sera affiché. Pour mieux comprendre, le code suivant : 

 Bonjour et             Bienvenue
 sur <i>Wikiversité</i>.

affichera 

Bonjour et Bienvenue sur Wikiversité.

On remarque que le texte n’est pas passé à la ligne après Bonjour et Bienvenue et que le fait de mettre 10 espaces entre et et Bienvenue n'a eu aucun effet.

Ceci est un avantage car ça permet d'indenter et d'espacer le document sans que cela n'ait d'influence sur le page web finale. L'indentation est le fait d’utiliser la touche tabulation pour mettre en valeur la structure du document. Il est fortement conseillé de bien indenter le document afin d’en faciliter la relecture et la maintenance.

Cependant, il est souvent nécessaire de sauter une ligne. Pour passer à la ligne, il faut utiliser la balise <br />. En ce qui concerne les espaces, nous verrons comment faire lorsque nous aborderons les caractères spéciaux.

Ainsi, il suffit d'ajouter la balise <br /> à l'endroit où l’on veut passer à la ligne. 

 Bonjour et Bienvenue <br />
 sur <i>Wikiversité</i>.

affichera 

Bonjour et Bienvenue
sur Wikiversité.

Les niveaux de titres

modifier

Pour qu'un document soit aisément lisible, il se doit de comporter des titres. Il existe des balises permettant de créer des titres, ce sont <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Il existe bien sûr les balises fermantes associées.

La balise <h1> correspond aux titres les plus gros et la balise <h6> aux titres de la plus petite taille.

Il est à noter que les titres sont toujours en gras et impliquent un retour à la ligne. Ils ne nécessitent donc pas l’utilisation de la balise <br />.

La police du texte

modifier

La police du texte se spécifie grâce à la balise <font face="police"> qui est associée à la balise fermante </font>.

police doit être un nom de police comme Arial ou Comic sans MS.

Il existe un problème de compatibilité avec cet attribut puisque la personne qui visite le site doit avoir la police sur son ordinateur pour qu'elle s'affiche. Il faut donc choisir des polices qu'une majorité de personnes possède. Si le visiteur ne possède pas la police sur son ordinateur, c’est la police par défaut qui va s'afficher. La police par défaut dépend du système du visiteur.

Il existe cependant une astuce pour assurer la plus grande compatibilité possible. Si vous voulez être sûr que soit Arial (police très populaire sur PC), soit Chicago (police très populaire sur Macintosh) s'affiche écrivez la chose suivante : <font face="Arial,Chicago">.

Le navigateur recherchera alors la police Arial et s'il ne la trouve pas, il cherchera la police Chicago. S'il n'en trouve aucune des deux, il affichera la police par défaut.

La taille du texte

modifier

La taille du texte se spécifie grâce à la balise <font size="taille"> qui est associée à la balise fermante </font>.

taille est un chiffre compris entre 1 et 7, où 1 correspond à la taille la plus petite et 7 à la taille la plus grande. Malheureusement, c’est la numérotation contraire aux titres ce qui ne simplifie pas la mémorisation.

La taille par défaut est 3.

Il existe une autre manière de choisir la taille, c’est en donnant à taille une valeur du type +1, -1, +2, -2… La taille du texte sera alors celle du texte alentour ajoutée de la valeur spécifiée.

Par exemple, <font size="3">Je suis plus <font size="+1">grand</font> que les autres</font> affichera la phrase je suis plus grand que les autres en taille 3 sauf le mot grand qui sera en taille 3+1=4.

Au contraire, <font size="taille">Je suis plus <font size="-1">petit</font> que les autres</font> affichera la phrase je suis plus petit que les autres en taille 3 sauf le mot petit qui sera en taille 3-1=2.

Il est impossible d’utiliser une valeur inférieure à 1 ou supérieure à 7. Ainsi, font size="+10"> équivaut à font size="7">.

Ainsi, le code : 

<font size="1">Ceci est un texte de taille 1</font><br />
<font size="2">Ceci est un texte de taille 2</font><br />
<font size="3">Ceci est un texte de taille 3</font><br />
<font size="4">Ceci est un texte de taille 4</font><br />
<font size="5">Ceci est un texte de taille 5</font><br />
<font size="6">Ceci est un texte de taille 6</font><br />
<font size="7">Ceci est un texte de taille 7</font><br />
<font size="3">Je suis plus <font size="+2">grand</font> que les autres</font><br />
<font size="3">Je suis plus <font size="-2">petit</font> que les autres</font><br />

affichera 

Ceci est un texte de taille 1
Ceci est un texte de taille 2
Ceci est un texte de taille 3
Ceci est un texte de taille 4
Ceci est un texte de taille 5
Ceci est un texte de taille 6
Ceci est un texte de taille 7
Je suis plus grand que les autres
Je suis plus petit que les autres

La couleur du texte

modifier

La couleur du texte se spécifie grâce à la balise <font color="couleur"> qui est associée à la balise fermante </font>.

Il existe deux manières de définir les couleurs.

La première consiste à remplacer couleur par le code hexadécimal de la couleur voulue précédé du signe #. Cette méthode étant fastidieuse, les couleurs « basiques » peuvent être appelées par leur nom en anglais. Ainsi, pour afficher du bleu, on tapera <font color="blue">.

Ainsi, le code : 

<font color="black">noir</font><br />
<font color="white">blanc</font><br />
<font color="red">rouge</font><br />
<font color="blue">bleu</font><br />
<font color="green">vert</font><br />
<font color="yellow">jaune</font><br />
<font color="aqua">eau</font><br />
<font color="fuchsia">fuchsia</font><br />
<font color="grey">gris</font><br />
<font color="lime">citron vert</font><br />
<font color="maroon">marron</font><br />
<font color="purple">violet</font><br />
<font color="navy">marine</font><br />
<font color="olive">olive</font><br />
<font color="silver">argent</font><br />

affichera 

noir
blanc (blanc)
rouge
bleu
vert
jaune
eau
fuchsia
gris
citron vert
marron
violet
marine
olive
argent

Polices de caractères

modifier 
<p style="font-family: times, serif; font-size:14pt; font-style:italic">
Lorem ipsum.
</p>

donne :

Lorem ipsum.

Les commentaires

modifier

Les commentaires se placent entre les balises <!-- et --> : 

<!-- Ceci est un commentaire -->

Les commentaires sont des lignes que le navigateur ne «lira» pas. Ils sont très utiles pour documenter le code, facilitant ainsi la relecture et la maintenance. Ils sont par conséquent fortement recommandés.

Les paragraphes

modifier

Les paragraphes sont des blocs de textes compris entre les balises <p> et </p>.

Un paragraphe implique un saut de ligne avant et après celui-ci.

On ajoute parfois à la balise <p> l'attribut align qui permet de définir l'alignement du texte à l'intérieur du paragraphe. align peut prendre les valeurs left pour un alignement à gauche, right pour un alignement à droite, center pour obtenir un texte centré ou justify pour avoir un paragraphe justifié (c'est-à-dire aligné à la fois à droite et à gauche).

Les caractères spéciaux

modifier

Certains caractères peuvent être absent du jeu de caractères utilisé par votre éditeur lors de la création du document. On utilise alors les entités commençant par le caractère & et se terminant par un ;.

Pour en savoir plus sur ces entités, consulter la table des caractères.

Par exemple, pour afficher le signe €, il peut être nécessaire d'écrire €.

De même, certains caractères spéciaux peuvent être difficiles à saisir directement ou à retrouver ensuite sous leur forme littérale. Ainsi, pour écrire un espace insécable, on utilise fréquemment l'entité &nbsp;.


  Première page


Liens hypertextes

Début de la boite de navigation du chapitre
Version imprimable
 
Chapitre no 4
Leçon : Hypertext Markup Language
Chap. préc. :Mise en forme du texte
Chap. suiv. :Listes
fin de la boite de navigation du chapitre
En raison de limitations techniques, la typographie souhaitable du titre, « Hypertext Markup Language : Version imprimable
Hypertext Markup Language/Version imprimable », n'a pu être restituée correctement ci-dessus.

Introduction

modifier

Les liens hypertextes sont des références « en ligne » navigables vers des ressources, en particulier d'autres documents HTML, pages Web, ou médias.

Deux balises partagent la syntaxe des liens hypertextes :

  • Les liens eux-mêmes.
  • Les marques.

Syntaxe

modifier

Les liens hypertextes sont introduits par la syntaxe générale : 

    <a lien> contenu </a>

où

  • lien est la spécification du lien.
  • contenu est la portion du document qui référence la ressource.

Le « a » vient de la première lettre du mot anglais anchor (ancre).

Contrairement à la spécification, le contenu ne varie pas d’un type de lien à l'autre.

Marques

modifier

Les marques servent à introduire un point pouvant être référencé dans le document. Elles sont introduites par la syntaxe 

    <a name="''marque''"> ''contenu'' </a>

où

  • marque est le nom de la marque, par lequel on la référencera.

Liens

modifier

Les liens servent à référencer un document ou une marque dans un document.

Ils sont introduits par la syntaxe 

    <a href="''lien''"> ''contenu'' </a>

où

  • lien est une référence non nulle vers une ressource, composée d’une URL, suivie optionnellement d’un « # » et d’un nom de marque, qui n'est pertinent que lorsque la ressource est une page HTML.

« href » signifie hypertext reference.

Dans le cas de référence vers une ressource, la syntaxe est 

    <a href="''ressource''"> ''contenu'' </a>

Dans le cas de référence vers une marque dans une ressource, la syntaxe est 

    <a href="''ressource''#''marque''"> ''contenu'' </a>

Dans le cas où le lien référence une marque interne, l'URL est optionnelle. La syntaxe peut être raccourcie en 

    <a href="#''marque''"> ''contenu'' </a>

Pour ouvrir le lien dans un nouvel onglet sur clic gauche (au lieu de CTRL + clic par défaut) : 

    <a href="''lien''" target="_blank"> ''contenu'' </a>

Exemple

modifier 
    <html>
        <head>
            <title>Page avec des liens</title>
        </head>
        <body>
            <h1>Le HTML</h1>
            <p>
                Le site du <a href="http://www.w3.org/">w3</a> a une section présentant les
                <a href="http://www.w3.org/#news">informations</a>.
                La section <a href="#infos">informations</a> en fait un résumé.
            </p>
            <h2><a name="infos">Informations</a></h2>
            <p>
                Les informations ici.
            </p>
        </body>
    </html>


Remarques

modifier
  • Les liens hypertextes s'affichent de manière standard en bleu souligné, pour les distinguer du texte courant.
  • Il est conseillé de faire des liens descriptifs, comme
    La section <a href="...">informations</a> de ce site liste les évènements récents.

et non comme 

    Pour avoir les informations sur ce site, <a href="...">cliquer ici</a>.
  • Lorsque la ressource est un document HTML, le navigateur l'affiche. Lorsqu’il s'agit d’un média quelconque, le navigateur le télécharge.


  Mise en forme du texte


Listes

Début de la boite de navigation du chapitre
Version imprimable
 
Chapitre no 5
Leçon : Hypertext Markup Language
Chap. préc. :Liens hypertextes
Chap. suiv. :Éléments de présentation
fin de la boite de navigation du chapitre
En raison de limitations techniques, la typographie souhaitable du titre, « Hypertext Markup Language : Version imprimable
Hypertext Markup Language/Version imprimable », n'a pu être restituée correctement ci-dessus.

Introduction

modifier

Les listes peuvent être très utiles pour tout ce qui est énumération, sommaire, menu… En HTML, il existe trois types de listes :

  • Les listes non ordonnées
  • Les listes ordonnées
  • Les listes de définitions

Les listes non ordonnées

modifier

Les listes non ordonnées ou listes à puces sont délimitées par les balises <ul> et </ul>, (ul signifiant unordered list). Chaque élément de la liste est délimité par les balises <li> et </li> (li signifiant LIste entry).

La syntaxe est donc : 

 <ul>
  <li> entrée 1 </li>
  <li> entrée 2 </li>
  <li> entrée 3 </li>
  <li> entrée 4 </li>
  <li> entrée 5 </li>
  <li> entrée 6 </li>
 </ul>

Il est à noter que la puce a la même couleur que le texte qui la suit.

Les listes non ordonnées disposent de l'attribut type qui permet de choisir la forme de la puce. Les valeurs possibles sont disc qui affiche un cercle plein comme puce, circle qui affiche un cercle vide comme puce et square qui affiche un carré.

Les listes ordonnées

modifier

Les listes ordonnées ou listes numérotées sont délimitées par les balises <ol> et </ol> (ol signifiant ordered list). Chaque élément de la liste est délimité par les balises <li> et </li> comme pour les listes non ordonnées.

La syntaxe est donc : 

<ol>
  <li> entrée 1 </li>
  <li> entrée 2 </li>
  <li> entrée 3 </li>
  <li> entrée 4 </li>
  <li> entrée 5 </li>
  <li> entrée 6 </li>
</ol>

Il est à noter que la puce a la même couleur que le texte qui la suit.


Les listes ordonnées disposent de l'attribut type qui permet de choisir le type de numérotation. Les valeurs possibles sont A (le système de numérotation sera les lettres majuscules), a (le système de numérotation sera les lettres minuscules), I (le système de numérotation sera les chiffres romains majuscules), i (le système de numérotation sera les chiffres romains minuscules) et 1 (le système de numérotation sera les chiffres arabes).

Elles disposent également de l'attribut start qui prend pour valeur le numéro (en chiffres arabes) à partir duquel le navigateur doit compter. Par exemple, si l’on entre <ol type="a" start="4">, la numérotation débutera à d.

Les listes de définitions

modifier

Les listes de définitions ou listes de glossaire sont délimitées par les balises <dl> et </dl> (dl signifiant definition list). Chaque élément de la liste est délimité par les balises <dt> et </dt> (dt signifiant definition term) et sa définition est délimitée par les balises <dd> et </dd> (dd signifiant definition description). La syntaxe est donc : 

<dl>
  <dt>Tomate</dt>
  <dd>Plante annuelle de la famille des solanacées, originaire d’Amérique du Sud et Centrale</dd>
  <dt>Poire</dt>
  <dd>Fruit à pépin, de saveur agréable, ordinairement de forme oblongue, et qui va en diminuant vers la queue</dd>
  <dt> … </dt>
  <dd> … </dd>
</dl>



  Liens hypertextes


Éléments de présentation

Début de la boite de navigation du chapitre
Version imprimable
 
Chapitre no 6
Leçon : Hypertext Markup Language
Chap. préc. :Listes
Chap. suiv. :Images
fin de la boite de navigation du chapitre
En raison de limitations techniques, la typographie souhaitable du titre, « Hypertext Markup Language : Version imprimable
Hypertext Markup Language/Version imprimable », n'a pu être restituée correctement ci-dessus.

Introduction

modifier

L'attractivité d’un site dépend en grande partie de son ambiance visuelle. Nous allons voir comment mettre un fond d'écran sur votre site et comment inclure des séparateurs horizontaux.

Les fonds d'écran

modifier

Couleur de fond

modifier

L'ajout d’une couleur de fond se fait par l'intermédiaire de l'attribut bgcolor de la balise <body>. La valeur de l'attribut bgcolor est une couleur. Pour plus d'information, sur les couleurs, consultez la table des couleurs.

En fonction de la couleur que vous choisissez, le texte risque de devenir illisible. Pour corriger ce problème, il existe l'attribut text de la balise <body> qui modifie la couleur du texte de la page. La valeur de l'attribut text est une couleur.

Prenons un exemple : 

<html>
<head>
<title>Couleur de fond</title>
</head>
<body bgcolor="blue" text="white">
  Voilà une page écrite en blanc sur fond bleu
</body>
</html>

Cet exemple permet d'afficher une page ayant un fond de couleur bleu et le texte « Voilà une page écrite en blanc sur fond bleu » écrit en blanc.

Une image en fond d'écran

modifier

Il est aussi possible d'ajouter une image en fond. Pour cela, on utilise l'attribut background de la balise <body>. La valeur de l'attribut background doit être une adresse qui peut être absolue ou relative[1].

Il est recommandé d’éviter les images trop lourdes qui augmentent le temps de chargement de la page. Cependant, une fois que l’image est chargée, elle passe dans la cache du navigateur et ne nécessitera plus de temps de chargement pour la session en cours.

Prenons un exemple : 

<html>
<head>
<title>Image de fond</title>
</head>
<body background="images/fond.jpg" text="yellow">
 Voilà une page avec une image de fond
</body>
</html>

Les séparateurs horizontaux

modifier

Définition

modifier

Le HTML intègre un élément intéressant de mise en page, la ligne horizontale. La ligne horizontale est introduite par la balise <hr> (hr signifie horizontal rule soit règle horizontale). Il n'y a pas de balise fermante associée.

Prenons un exemple : 

 texte texte texte
<hr>
 texte texte texte

Cet exemple permet d'insérer une ligne horizontale entre les deux lignes de texte.

Les attributs

modifier

La balise <hr> dispose de nombreux attributs.

L'attribut size permet de définir l'épaisseur de la barre. La valeur de l'attribut size doit être une valeur numérique exprimée en pixels.

L'attribut width permet de définir la largeur de la barre. La valeur de l'attribut width est soit une valeur numérique exprimée en pixels soit une valeur numérique suivie du symbole % et alors la valeur correspond à la largeur de la barre en pourcentage de la fenêtre. On préférera cette deuxième méthode car la largeur de la barre s'adapte ainsi à la taille et à la résolution de l'écran de l'utilisateur.

L'attribut align permet de définir l'alignement de la barre. Les valeurs possibles sont left, center et right.

L'attribut noshade permet d'appliquer ou non un ombrage à la barre.

Notes

modifier
  1. ↑ Pour plus d'informations, voir Liens hypertextes


  Listes


Images

Début de la boite de navigation du chapitre
Version imprimable
 
Chapitre no 7
Leçon : Hypertext Markup Language
Chap. préc. :Éléments de présentation
Chap. suiv. :Tableaux
fin de la boite de navigation du chapitre
En raison de limitations techniques, la typographie souhaitable du titre, « Hypertext Markup Language : Version imprimable
Hypertext Markup Language/Version imprimable », n'a pu être restituée correctement ci-dessus.

La base

modifier

On insère une image dans une page HTML en utilisant la balise <IMG>. Cette balise possède plusieurs attributs :

  • NAME: Nom de l'image (utile en javascript)
  • SRC: l'adresse (qu'elle soit relative ou absolue) de l'image
  • WIDTH: la largeur en pixel ou en pourcentage
  • HEIGHT: la hauteur en pixel ou en pourcentage
  • BORDER: son éventuelle bordure en pixel (souvent 2 par défaut, sans bordure=0)
  • ALT: équivalent textuel de l'information véhiculée par l'image. s'affiche si l'image ne peut pas être chargée.
  • ALIGN: alignement de l'image par rapport au texte. Valeurs généralement utilisées : LEFT|RIGHT|TOP|BOTTOM

Exemple

modifier 
<html>
<img src="Text-html.svg" width=48 height=48 alt="Image introuvable" align=left>
</html>

Donne :

  • Si l'image existe :
     
  • Sinon le texte : Image introuvable.


  Éléments de présentation


Tableaux

Début de la boite de navigation du chapitre
Version imprimable
 
Chapitre no 8
Leçon : Hypertext Markup Language
Chap. préc. :Images
Chap. suiv. :Formulaires
fin de la boite de navigation du chapitre
En raison de limitations techniques, la typographie souhaitable du titre, « Hypertext Markup Language : Version imprimable
Hypertext Markup Language/Version imprimable », n'a pu être restituée correctement ci-dessus.

Introduction

modifier

Syntaxe

modifier
  • caption permet de définir une légende (c'est un paramètre optionnel).
  • tr (table row) délimite une ligne.
  • td (table data) délimite une colonne.
  • th (table header) permet de définir des intitulés de colonne ou de ligne.
Début de l'exemple
Exemple
<table>
 <caption>légende</caption>
 <tr>
  <th>Titre de la colonne 1</th>
  <th>Titre de la colonne 2</th>
 </tr>
 <tr>
  <td>case 1</td>
  <td>case 2</td>
 </tr>
</table>

donne un tableau comme suit:

légende
Titre de la colonne 1 Titre de la colonne 2
case 1 case 2
Fin de l'exemple


Attributs courants

modifier
  • border règle la taille de la bordure.
Début de l'exemple
Exemple
case 1 case 2 
<table border="1">
 <tr>
  <td>case 1</td>
  <td>case 2</td>
 </tr>
</table>
Fin de l'exemple


  • colspan et rowspan permettent de fusionner des cellules horizontalement (respectivement verticalement). S'applique sur les balises tr, td et th.
Début de l'exemple
Exemple
case 1 case 2
case 4 case 5 case 6
case 8 case 9 
<table border="1">
 <tr>
  <td>case 1</td>
  <td colspan="2">case 2</td>
 </tr>
 <tr>
  <td rowspan="2">case 4</td>
  <td>case 5</td>
  <td>case 6</td>
 </tr>
 <tr>
  <td>case 8</td>
  <td>case 9</td>
 </tr>
</table>
Fin de l'exemple


Voir aussi

modifier


  Images


Formulaires

Début de la boite de navigation du chapitre
Version imprimable
 
Chapitre no 9
Leçon : Hypertext Markup Language
Chap. préc. :Tableaux
Chap. suiv. :Balises HTML
fin de la boite de navigation du chapitre
En raison de limitations techniques, la typographie souhaitable du titre, « Hypertext Markup Language : Version imprimable
Hypertext Markup Language/Version imprimable », n'a pu être restituée correctement ci-dessus.

Introduction

modifier
Un formulaire permet d'envoyer des données à une autre page, généralement codée en PHP, pour être ensuite interprétées et traitées. La création d'un formulaire permet, par exemple, la gestion d'une connexion à un espace membre (expliqué dans PHP/Formulaire).
En HTML, il peut-être réalisé à l'aide de la balise <FORM> ... </FORM>, qui s'emploie avec différents paramètres :
  • METHOD : forme des réponses envoyées.
  • POST : envoi de données.
  • GET : envoi des données via l'URL.
  • ACTION : adresse d'envoi.
L'intérieur du formulaire peut être complété avec 3 balises :
  1. LABEL : assigne un nom à un objet.
  2. INPUT : ajoute des boutons ou des champs de saisie.
  3. TEXTAREA : ajoute une zone de saisie.
  4. SELECT : ajoute une liste à choix multiples.


INPUT

modifier

Syntaxe

modifier

<INPUT type="type du champ" value="valeur par défaut" name="nom de l'objet">

Il existe les types de champs "text" (zone de texte), "radio" (case à cocher) et "submit" (bouton de soumission).

Exemple

modifier
  • Pour se rendre sur une URL en fonction de paramètres :
<FORM method="GET" action="http://fr.wikiversity.org/wiki/Hypertext_Markup_Language/Formulaires">
Nom :<INPUT type=text name="nom" maxlength="10"><br />
Homme : <INPUT type=radio name="sexe" value="Masculin" checked><br />
Femme : <INPUT type=radio name="sexe" value="Féminin"><br />
<INPUT type="submit" value="Envoyer">
</FORM>


  • Pour poster des champs sur un site :
 <FORM action="http://fr.wikiversity.org/w/index.php?title=Hypertext_Markup_Language/Formulaires" method="POST">
    <P>
    <LABEL for="prenom">Prénom  </LABEL>
              <INPUT type="text" id="prenom"><br />
    <LABEL for="nom">Nom : </LABEL>
              <INPUT type="text" id="nom"><br />
    <LABEL for="email">email: </LABEL>
              <INPUT type="text" id="email"><br />
    <INPUT type="radio" name="sexe" value="Homme"> Homme<br />
    <INPUT type="radio" name="sexe" value="Femme"> Femme<br />
    <INPUT type="submit" value="Envoyer"> <INPUT type="reset">
    </P>
 </FORM>


SELECT

modifier

Syntaxe

modifier 
<SELECT name="nom du menu déroulant">

Exemple

modifier
  • Pour créer un menu déroulant qui affiche les projets Wikimédia en français, et renvoie leur nom en anglais.
<SELECT name="Wikimédia">
<OPTION VALUE="Wikipedia" SELECTED>Wikipédia</OPTION>
<OPTION VALUE="Wiktionary">Wiktionnaire</OPTION>
<OPTION VALUE="Wikiversity">Wikiversité</OPTION>
<OPTION VALUE="Wikinews">Wikinews</OPTION>
<OPTION VALUE="Wikibooks">Wikilivres</OPTION>
<OPTION VALUE="Wikisources">Wikisources</OPTION>
<OPTION VALUE="Wikiquotes">Wikiquotes</OPTION>
</SELECT>

TEXTAREA

modifier

Syntaxe

modifier 
<TEXTAREA rows="nombre de lignes -1" name="commentaires">

Exemple

modifier
  • Pour créer une zone de saisie de 6 lignes :
<TEXTAREA rows="5" name="suggestions">
Entrer ici vos suggestions</TEXTAREA>

Upload

modifier

INPUT TYPE="file" : 

<!-- Écrire un email à OTRS -->
<FORM NAME="permission" ACTION="mailto:permissions-fr@wikimedia.org" METHOD="post" ENCTYPE="multipart/form-data">
<INPUT TYPE="file" NAME="PièceJointe" SIZE="20">
</FORM>

Voir aussi

modifier

Sur les autres projets Wikimedia :


  Tableaux


Balises HTML

Début de la boite de navigation du chapitre
Version imprimable
 
Chapitre no 10
Leçon : Hypertext Markup Language
Chap. préc. :Formulaires
fin de la boite de navigation du chapitre
En raison de limitations techniques, la typographie souhaitable du titre, « Hypertext Markup Language : Version imprimable
Hypertext Markup Language/Version imprimable », n'a pu être restituée correctement ci-dessus.

Récapitulatif des balises XHTML

modifier
Effet Balise Signification
Document HTML <html>...</html> Hypertext Markup Language (langage hypertexte de balisage)
Entête de page <head>...</head> Head (tête)
Corps de page <body>...</body> Body (corps)
Titre de page <title>...</title> Title (titre)
Paragraphe <p>...</p> Paragraph (paragraphe)
Titre de paragraphe <h1>...</h1> Headings 1 (entête 1, existe jusqu'à l'entête 6)
Gras <b>...</b> Bold (gras)
Souligné <u>...</u> Underline (souligné)
Italique <i>...</i> Italic (italique)
Police <font face="police">...</font> Font face (police de caractère)[1]
Taille <font size="taille">...</font> Font size (taille des caractères)
Couleur <font color="couleur">...</font> Font color (couleur des caractères)
Commentaires <!--...--> -
Centrer <center>...</center> Center (centre)[1]
Abréviation <abbr>...</abbr> Abbreviation (abréviation)
Acronyme <acronym>...</acronym> Acronym (acronyme)
Adresse <address>...</address> Address (adresse)
Police plus grande <big>...</big> Big (grand)[1]
Citation <q>...</q> Quote (citer)
Instruction <code>...</code> Code (code)
Emphase <em>...</em> Emphasize (accentuer)
Police plus petite <small>...</small> Small (petit)
Texte accentué <strong>...</strong> Strong (fort)
Police barrée <strike>...</strike> Strike (rayer)[1]
Indice <sub>...</sub> Sub (sous)
Exposant <sup>...</sup> Superior (supérieur)
Texte clignotant <span style=text-decoration:blink>...</span> Span (taille) et blink (clignoter)
Texte invisible <span style="display: none;">...</span> Span (taille) et display (afficher)
Liste désordonnée <ul> Unordered list (liste désordonnée)
Liste ordonnée <ol> Ordered list (liste ordonnée)
Entrée de liste <li> Liste entry (entrée de liste)
Liste de définition <dl>...</dl> Definition list (liste de définition)
Terme de définition <dt>...</dt> Definition term (terme de définition)
Description de définition <dd>...</dd> Definition description (description de définition)
Tableau <table>...<table> Table (table informatique)
Entête de tableau <thead>...</thead> Table head (tête de tableau)
Contenu de tableau <tbody>...</tbody> Table body (corps de tableau)
Bas de tableau <tfoot>...</tfoot> Table foot (pied de tableau)
Groupe de colonnes <colgroup span="2" width="40" align="left" /> Column group (groupe de colonne)
Légende de tableau <caption>...</caption> Caption (légende)
Ligne de tableau <tr>...</tr> Table row (ligne de table)
Entête de tableau <th>...</th> Table header (entête de table)
Données de tableau <td>...</td> Table data (données de table)
Formulaire <FORM>...</FORM> Form (formulaire)
Étiquette <LABEL for="...">...</LABEL> Label (étiquette)
Option <OPTION VALUE="..." SELECTED>...</OPTION> Option (option)
Sélection <SELECT name="nom du menu déroulant"> Select (sélectionne)
Ajout <INPUT type="..." value="..." name="...">[2]
Liste des attributs
  • button
  • checkbox
  • color
  • date
  • datetime
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week
 
 Input (ajoute)
Aire <AREA shape="circle" coords="90,58,3">[3] area (aire)
Aire de texte <TEXTAREA rows="..." name="..."> Text area (aire de texte)
Retour à la ligne <br /> Break (casser)
Trait <hr> Horizontal rule (règle horizontale)
Hyperlien <a href="http://...">...</a> Hyperlink (hyperlien)
Image <img src="....svg" width=50 height=50 alt="Image introuvable" align=left> Image (image)
Déclaration XML <?xml version="1.0" encoding="iso-8859-1"?> ISO est le type de codage des caractères, et 8859 correspond aux latins

Notez que les huit dernières balises n'en nécessitent pas fermante, elles sont appelées "balises en-ligne".

Références

modifier
  1. ↑ 1,0 1,1 1,2 et 1,3 Balise désuète en HTML5
  2. ↑ http://www.w3schools.com/tags/att_input_type.asp
  3. ↑ http://www.w3schools.com/tags/tag_area.asp

Voir aussi

modifier

Les cours de :


  Formulaires
  GFDL Vous avez la permission de copier, distribuer et/ou modifier ce document selon les termes de la licence de documentation libre GNU, version 1.2 ou plus récente publiée par la Free Software Foundation ; sans sections inaltérables, sans texte de première page de couverture et sans texte de dernière page de couverture.




Récupérée de « https://fr.wikiversity.org/w/index.php?title=Hypertext_Markup_Language/Version_imprimable&oldid=735719 »