Cours html4

HTML – Cours théorique initial
HTML
Cours théorique
1
SOMMAIRE
Chapitres
Chapitre 1: Introduction
Chapitre 2: Première page
Chapitre 3: Mise en forme du texte
Chapitre 4: Liens hypertextes
Chapitre 5: Listes
Chapitre 6: Éléments de présentation
Chapitre 7: Images
Chapitre 8: LTableaux
Chapitre 9: Formulaires
Chapitre 10 : Balises HTML
Annexes
Annexe 1 : Table de caractères

Annexe 2 : Référence
Objectifs
Les objectifs de ce cours sont de pouvoir créer, modifier et interpréter le code source d'une page en
html.
Aucune connaissance de langage informatique n'est requise pour cette leçon.
2
Le HTML (Hypertext Markup Language : Langage de balisage d'hypertexte) est un langage descriptif
de structuration de documents interconnectés pour le World Wide Web.
Le HTML n'est en aucun cas un langage de programmation : son but est de décrire et structurer des
informations (textes, images, médias…) dans le but de les faire afficher dans un navigateur.
Le HTML devrait être aujourd'hui uniquement utilisé pour décrire le contenu (textes, images…) alors
que le CSS est utilisé pour la mise en page. Cependant, le contenu et la mise en page ont longtemps
été mélangé dans le code HTML c'est pourquoi les outils de mise en page du HTML seront présentés
dans ce cours. Ils ne sont pas censé être utilisés mais seront très utiles pour lire et « nettoyer » le
code de vieilles pages web.
Le XHTML est le successeur du HTML. Il dispose d'une syntaxe plus propre, basée sur le langage XML,
le rendant ainsi conforme aux directives du W3C (World Wide Web Consortium).
3
4
1 : Introduction
Pour développer en HTML, plusieurs outils sont nécessaires :
É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.
É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.
* Coda.
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).
Navigateurs Web
Du plus utilisé au moins utilisé :
1. Firefox 2. Internet Explorer 3. Chrome 4. Safari 5. Opera 6. Netscape
5
6
2 : Première page en HTML
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 et a
ajouter un code spécifique de mise en page qui contredit ou fausse le code HTML.
Les balises
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
7
* Un clic droit puis Source, ou CTRL+U sous Opera
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.
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>.
8
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 le web. Le code source
est le suivant :
<html>
<head>
<title>Première page</title>
</head>
<body>
Bonjour et bienvenue sur le <i>Web</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>.
9
10
3 : Mise en forme du texte
Introduction
Afin de créer des pages qui soient agréables à lire, faciles à déchiffrer et surtout compréhensibles
par le plus grand nombre, le texte nécessite une mise en page. 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 le <i>Web</i>.
affichera
Bonjour et bienvenue sur le Web.
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 le <i>Web</i>.
affichera
Bonjour et bienvenue
sur le Web.
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 />.
11
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 et du
navigateur qu'il utilise.
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
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, etc. 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="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 />
12
affichera
Ceci est un texte de taille 1

Je suis plus grand que les autres
Je suis plus petit que les autres
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
13
citron vert
marron
violet
marine
olive
argent
14
Les commentaires
Les commentaires se placent entre les balises  :

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
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
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 & (esperluette) et se
terminant par un ; (point virgule).
Pour en savoir plus sur ces entités, consultez 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é.
15
4 : Liens hypertextes
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.
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.
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.
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.
16
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>
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>
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.
17
5 : Listes
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
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>
</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
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>
</ol>
18
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
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>
</dl>
19
6 : Éléments de présentation
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.
Les fonds d'écran
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.
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.
<html>
<head>
<title>Image de fond</title>
</head>
<body background="images/nomimage.jpg" text="yellow">
Voilà une page avec une image de fond
</body>
</html>
20
Les séparateurs horizontaux
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.
texte texte texte

<hr>
texte texte texte
Cet exemple permet d'insérer une ligne horizontale entre les deux lignes de texte.
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.
21
22
7 : Images
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
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.
23
24
8 : Tableaux
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.
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
Attributs courants
* border règle la taille de la bordure.
Exemple
case 1 case 2
<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).
25
S'applique sur les balises tr, td et th.
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>
26
9 : les formulaires
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 (voir PHP - Cours théorique initial).
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
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).
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://temps-reels.fr/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 />
27
<INPUT type="submit" value="Envoyer"> <INPUT type="reset">

</P>
</FORM>
SELECT
Syntaxe
<SELECT name="nom du menu déroulant">
Exemple
Pour créer un menu déroulant qui affiche les projets Temps Réels en français, et renvoie leur nom en
anglais.
<SELECT name="Temps Réels">

<OPTION VALUE=" »" 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>
TEXTAREA
Syntaxe
<TEXTAREA rows="nombre de lignes -1" name="commentaires">

Exemple
Pour créer une zone de saisie de 6 lignes :
<TEXTAREA rows="5" name="suggestions">

Entrer ici vos suggestions</TEXTAREA>
28
10 : Balises HTML
Récapitulatif des balises XHTML

Effet Balise Signification
Hypertext Markup Language
Document HTML <html>...</html>
(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 <h1>...</h1> Headings 1 (entête 1, existe
paragraphe 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)
Font color (couleur des
Couleur <font color="couleur">...</font>
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)
<span style=text-
Texte clignotant decoration:blink>...</span> Span (taille) et blink (clignoter)
<span style="display:
Texte invisible none;">...</span> Span (taille) et display (afficher)
Unordered list (liste
Liste désordonnée <ul>
désordonnée)
Liste ordonnée <ol> Ordered list (liste ordonnée)
Entrée de liste <li> Liste entry (entrée de liste)
Definition list (liste de
Liste de définition <dl>...</dl>
définition)
Terme de <dt>...</dt> Definition term (terme de
définition définition)
Description de <dd>...</dd> Definition description
définition (description de définition)
29
Tableau <table>...<table> Table (table informatique)

Entête de tableau <thead>...</thead> Table head (tête de tableau)
Contenu de <tbody>...</tbody> Table body (corps de tableau)
tableau
Bas de tableau <tfoot>...</tfoot> Table foot (pied de tableau)
Groupe de <colgroup span="2" width="40" Column group (groupe de
colonnes align="left" /> colonne)
Légende de <caption>...</caption> Caption (légende)
tableau
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 <td>...</td> Table data (données de table)
tableau
Formulaire <FORM>...</FORM> Form (formulaire)
Étiquette <LABEL for="...">...</LABEL> Label (étiquette)
<OPTION VALUE="..."
Option SELECTED>...</OPTION> Option (option)
<SELECT name="nom du menu
Sélection déroulant"> Select (sélectionne)
<INPUT type="..." value="..."
Ajout name="..."> Input (ajoute)
<TEXTAREA rows="..."
Aire de texte Text area (aire de texte)
name="..."></nowiki>
Retour à la ligne <br /> Break (casser)
Horizontal rule (règle
Trait <hr>
horizontale)
Hyperlien <a href="http://...">...</a> Hyperlink (hyperlien)
<img src="....svg" width=50
Image height=50 alt="Image introuvable" Image (image)
align=left>
ISO est le type de codage des
<?xml version="1.0" encoding="iso-
Déclaration XML 8859-1"?> 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".
30

Cours html4

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Cours html4

Hochgeladen von

Copyright:

Verfügbare Formate

HTML – Cours théorique initial

Annexe 1 : Table de caractères

Aucune connaissance de langage informatique n'est requise pour cette leçon.

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

Un logiciel de saisie de texte rudimentaire tel le Bloc-notes de Windows ou TextEdit (Mac OS X)

Éditeurs de textes pour développeurs

Pour Microsoft Windows, on peut conseiller :

Pour Mac OS X, on peut conseiller :

Du plus utilisé au moins utilisé :

1. Firefox 2. Internet Explorer 3. Chrome 4. Safari 5. Opera 6. Netscape

2 : Première page en HTML

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

L'HTML est un langage informatique.

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 Source, ou CTRL+U sous Opera

Le document HTML minimum

Première page web

3 : Mise en forme du texte

Bonjour et bienvenue sur le Web.

Bonjour et bienvenue <br />

Les niveaux de titres

La taille par défaut est 3.

<font size="1">Ceci est un texte de taille 1</font><br />

Ceci est un texte de taille 1

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

<font color="black">noir</font><br />

Les commentaires se placent entre les balises  :

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

Les caractères spéciaux

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

Deux balises partagent la syntaxe des liens hypertextes :

* Les liens eux-mêmes.

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

<a lien> contenu </a>

* lien est la spécification du lien.

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.

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

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

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>

« href » signifie hypertext reference.

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

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

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

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

La section <a href="...">informations</a> de ce site liste les évènements récents.

Pour avoir les informations sur ce site, <a href="...">cliquer ici</a>.

* Les listes non ordonnées

Les listes non ordonnées

La syntaxe est donc :

Les listes ordonnées

La syntaxe est donc :

Les listes de définitions

Les fonds d'écran

Une image en fond d'écran

Les séparateurs horizontaux

texte texte texte

La balise <hr> dispose de nombreux attributs.

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