Hypertext Markup Language : Introduction
Hypertext Markup Language/Introduction

Une page de Wikiversité.

Introduction

Chapitre 1
Leçon : HTML
Retour au	sommaire
Chap. suiv. :	Première page

En raison de limitations techniques, la typographie souhaitable du titre, « Hypertext Markup Language : Introduction
Hypertext Markup Language/Introduction », n'a pu être restituée correctement ci-dessus.

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

[modifier] Éditeurs de texte

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.

[modifier] Éditeurs de textes pour développeurs

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 :

• Notepad++ ;
• Scite.

Pour Mac OS X, on peut conseiller :

• Smultron ;
• TextWrangler.

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).

Hypertext Markup Language : Première page en HTML
Hypertext Markup Language/Première page

Une page de Wikiversité.

Première page en HTML

Chapitre 2
Leçon : Hypertext Markup Language
Chap. préc. :	Introduction
Chap. suiv. :	Mise en forme du texte

En raison de limitations techniques, la typographie souhaitable du titre, « Hypertext Markup Language : Première page en HTML
Hypertext Markup Language/Première page », n'a pu être restituée correctement ci-dessus.

[modifier] Introduction

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.

[modifier] Les balises

[modifier] Définition

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 command+clic puis "code source" sous Safari
• Un clic droit puis Source, ou CTRL+U sous Opera

[modifier] L'imbrication

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.

[modifier] Le document HTML minimum

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>.

[modifier] Première page web

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>.






 

Hypertext Markup Language : Mise en forme du texte
Hypertext Markup Language/Mise en forme du texte

Une page de Wikiversité.

Mise en forme du texte

Chapitre 3
Leçon : Hypertext Markup Language
Chap. préc. :	Première page
Chap. suiv. :	Liens hypertextes

En raison de limitations techniques, la typographie souhaitable du titre, « Hypertext Markup Language : Mise en forme du texte
Hypertext Markup Language/Mise en forme du texte », n'a pu être restituée correctement ci-dessus.

[modifier] Introduction

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'espace à 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 de pouvoir 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

Hypertext Markup Language : Liens hypertextes
Hypertext Markup Language/Liens hypertextes

Une page de Wikiversité.

Liens hypertextes

Chapitre 4
Leçon : Hypertext Markup Language
Chap. préc. :	Mise en forme du texte
Chap. suiv. :	Listes

En raison de limitations techniques, la typographie souhaitable du titre, « Hypertext Markup Language : Liens hypertextes
Hypertext Markup Language/Liens hypertextes », n'a pu être restituée correctement ci-dessus.

[modifier] Introduction

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.

[modifier] Syntaxe

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.

[modifier] Marques

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.

[modifier] Liens

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>

[modifier] Exemple

    <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>

[modifier] Remarques

• 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.

sur Wikiversité.

[modifier] Les niveaux de titres

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 />.

[modifier] La police du texte

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.

[modifier] La taille du texte

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

[modifier] La couleur du texte

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

[modifier] Les commentaires

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.

[modifier] Les paragraphes

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).

[modifier] Les caractères spéciaux

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é  .

Hypertext Markup Language : Listes
Hypertext Markup Language/Listes

Une page de Wikiversité.

Listes

Chapitre 5
Leçon : Hypertext Markup Language
Chap. préc. :	Liens hypertextes
Chap. suiv. :	Éléments de présentation

En raison de limitations techniques, la typographie souhaitable du titre, « Hypertext Markup Language : Listes
Hypertext Markup Language/Listes », n'a pu être restituée correctement ci-dessus.

[modifier] Introduction

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

[modifier] Les listes non ordonnées

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é.

[modifier] Les listes ordonnées

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.

[modifier] Les listes de définitions

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> … </dt>
  <dd> … </dd>
 <dt> … </dt>
  <dd> … </dd>
 <dt> … </dt>
  <dd> … </dd>
 <dt> … </dt>
  <dd> … </dd>
 <dt> … </dt>
  <dd> … </dd>
 <dt> … </dt>
  <dd> … </dd>

Hypertext Markup Language : Éléments de présentation
Hypertext Markup Language/Éléments de présentation

Une page de Wikiversité.

Éléments de présentation

Chapitre 6
Leçon : Hypertext Markup Language
Chap. préc. :	Listes
Chap. suiv. :	Images

En raison de limitations techniques, la typographie souhaitable du titre, « Hypertext Markup Language : Éléments de présentation
Hypertext Markup Language/Éléments de présentation », n'a pu être restituée correctement ci-dessus.

[modifier] Introduction

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.

[modifier] Les fonds d'écran

[modifier] Couleur de fond

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.

[modifier] Une image en fond d'écran

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>

[modifier] Les séparateurs horizontaux

[modifier] Définition

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.

[modifier] Les attributs

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 symbôle % 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.

[modifier] Notes

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

</dl>

Hypertext Markup Language : Images
Hypertext Markup Language/Images

Une page de Wikiversité.

Images

Chapitre 7
Leçon : HTML
Chap. préc. :	Éléments de présentation
Chap. suiv. :	Tableaux

En raison de limitations techniques, la typographie souhaitable du titre, « Hypertext Markup Language : Images
Hypertext Markup Language/Images », n'a pu être restituée correctement ci-dessus.

[modifier] La base

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

[modifier] Exemple

<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.

Hypertext Markup Language : Tableaux
Hypertext Markup Language/Tableaux

Une page de Wikiversité.

Tableaux

Chapitre 8
Leçon : HTML
Chap. préc. :	Images
Chap. suiv. :	Formulaires

En raison de limitations techniques, la typographie souhaitable du titre, « Hypertext Markup Language : Tableaux
Hypertext Markup Language/Tableaux », n'a pu être restituée correctement ci-dessus.

[modifier] Introduction

[modifier] Syntaxe

• 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.

<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>

[modifier] Attributs courants

• border règle la taille de la bordure.

<table border="1">
 <tr>
  <td>case 1</td>
  <td>case 2</td>
 </tr>
</table>

• colspan et rowspan permettent de fusionner des cellules horizontalement (resp. verticalement). S'applique sur les balises tr, td et th.

<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>

[modifier] Voir aussi

Hypertext Markup Language : Formulaires
Hypertext Markup Language/Formulaires

Une page de Wikiversité.

Formulaires

Chapitre 9
Leçon : HTML
Chap. préc. :	Tableaux
Chap. suiv. :	Balises HTML

En raison de limitations techniques, la typographie souhaitable du titre, « Hypertext Markup Language : Formulaires
Hypertext Markup Language/Formulaires », n'a pu être restituée correctement ci-dessus.

[modifier] Introduction

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.

[modifier] INPUT

[modifier] Syntaxe

<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).

[modifier] Exemple

• 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>

[modifier] SELECT

[modifier] Syntaxe

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

[modifier] Exemple

• 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" SELECTED>Wikilivres</OPTION>
<OPTION VALUE="Wikisources">Wikisources</OPTION>
<OPTION VALUE="Wikiquotes">Wikiquotes</OPTION>
</SELECT>

[modifier] TEXTAREA

[modifier] Syntaxe

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

[modifier] Exemple

• Pour créer une zone de saisie de 6 lignes :

<TEXTAREA rows="5" name="suggestions">
Entrer ici vos suggestions</TEXTAREA>

Hypertext Markup Language : Balises HTML
Hypertext Markup Language/Balises HTML

Une page de Wikiversité.

< Hypertext Markup Language

Aller à : Navigation, rechercher

 

Balises HTML

Chapitre 10
Leçon : HTML
Chap. préc. :	Formulaires

En raison de limitations techniques, la typographie souhaitable du titre, « Hypertext Markup Language : Balises HTML
Hypertext Markup Language/Balises HTML », n'a pu être restituée correctement ci-dessus.

[modifier] Récapitulatif des balises HTML

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)
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)
Abréviation	<abbr>...</abbr>	Abbreviation (abréviation)
Acronyme	<acronym>...</acronym>	Acronym (acronyme)
Adresse	<address>...</address>	Address (adresse)
Police plus grande	<big>...</big>	Big (grand)
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)
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)
Légende	<caption>...</caption>	Caption (légende)
Ligne de table	<tr>...</tr>	Table row (ligne de table)
Entête de table	<th>...</th>	Table header (entête de table)
Données de table	<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="...">	Input (ajoute)
Aire de texte	<TEXTAREA rows="..." name="..."></nowiki>	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".

[modifier] Voir aussi

Les cours de :

• XHTML
• XML
• CSS (balises <style>...</style>)
• Javascript (balises <script>...</script>)