HTML Rappels2021

2019/2021
HTML – Rappels
1. Web et Html:
Qu'est ce que l'HTML?
HTML est le langage de balisage hypertexte utilisé dans le Web (HyperText Markup Language). Ce n'est pas
un langage de programmation proprement dit.
Ce sont "simplement" des balises pour mettre en forme (avec des liens, en tableau, etc...) du texte et des
images. Pour avoir une idée de l'aspect d'une page écrite en HTML, cliquez sur "Affichage" dans votre
navigateur, puis sélectionnez "page source".
Qu'est ce qu'une balise?
 Une balise est une "instruction" comprise entre crochets < > qui possède un nom et parfois des
attributs.
<br> est, par exemple, la balise utilisée pour spécifier qu'il faut passer à la ligne.
 La plupart des balises doivent être ouvertes puis refermées. On retrouvera donc souvent une balise
de début et une balise de fin.
La balise de fin porte le même nom que la balise de début mais est en plus précédée du signe /.
Nous aurons donc: (ouverture) <nom_de_balise> et (fermeture) </nom_de_balise>.
Par exemple: <b>mon texte en gras (bold)</b>.
 Le nom de la balise (contenu entre les crochets) n'est pas sensible à la casse: il peut être écrit
indifféremment en majuscule, en minuscule ou en un mélange des 2.
 L'attribut d'une balise est défini comme suit: nom_attribut="valeur"
Par exemple, la balise utilisée pour faire un lien a pour nom "a", et pour nom d'attribut "href". Ainsi,
<a href="http://www.google.fr">Google</a> permet de faire un lien vers la page principale du site
de Google. Dans ce cas, la valeur de l'attribut "href" est donc "http://www.google.fr".
2. Premiers outils
Vous avez besoin de:
 d'un éditeur de texte tout simple comme par exemple le Bloc-notes ou Notepad de Windows ou
tout autre équivalent dans votre système d'exploitation.
 un browser (navigateur internet)
3. Document Html minimum

<HTML> Ceci est le début d'un document de type HTML.
</HTML> Ceci est la fin d'un document de type HTML.
Ceci est le début de la zone d'en-tête (prologue au document proprement dit
<HEAD>
contenant des informations destinées au browser).
</HEAD> Ceci est la fin de la zone d'en-tête.
A. Ouchatti1 1
<TITLE> Ceci est le début du titre de la page.
</TITLE> Ceci est la fin du titre de la page.
<BODY> Ceci est le début du document proprement dit.
</ BODY> Ceci est la fin du document proprement dit.
Remarques
 Vous aurez remarqué qu'à chaque balise de début d'une action, soit <...>, correspond (en toute logique) une balise de fin
d'une action </...>.
 Vous noterez aussi que les balises ne sont pas "case sensitive". Il est donc équivalent d'écrire <HTML>, <html>, <Html>, etc.
Notre premier document Html:

1-. Ouvrir l'éditeur de texte.
2-. Ecrire les codes Html suivants:
<HTML>
<HEAD>
<TITLE>Document Html minimum</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
3-. - Enregistrer le document avec l'extension .html ou .htm.
4-. - Ouvrir le navigateur.
5-. - Afficher le document via le menu File/Open file...
Remarques
 Celui-ci est vide (c'est normal) mais tout à fait opérationnel! Il faudra maintenant lui fournir votre
information à l'intérieur des balises <BODY></BODY>. Remarquez que votre "TITLE" est présent
dans la fenêtre de Netscape.
 Pour vos éventuelles modifications, il n'est pas nécessaire de rouvrir à chaque fois le navigateur.
 Retourner dans l'éditeur de texte (sans fermer le navigateur).
 Modifier les codes Html.
 Enregistrer le fichier.
 Utiliser la commande Reload du browser ou cliquer dans la barre "Location"et faire "Enter".
4. Texte
Tout document Html contiendra en majorité du texte. Voyons comment l'arranger par quelques balises
élémentaires.
<B>...</B>
Gras [Bold] Début et fin de zone en gras
<STRONG>...</STRONG>
<I>...</I>
Italique [Italic] Début et fin de zone en italique
<EM>...</EM>
Début et fin de zone avec cette
Taille de caractère [Font size] <FONT SIZE=?>...</FONT>
taille
Couleur de
[Font color] <FONT COLOR="#$$$$$$">... </FONT> Début et fin de zone en couleur
caractère
A la ligne [Line break] <BR> Aller à la ligne
Commentaires [Comments]  Ne pas afficher
Centrage [Center] <CENTER>...</CENTER> Centrer
Exemple
1.- Ouvrir l'éditeur de texte
A. Ouchatti2 2
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>texte simple<BR>
<B>texte en gras</B><BR>
<STRONG>texte en gras</STRONG><BR>
<I>texte en italique</I><BR>
<EM>texte en italique</EM><BR>
<B><I>texte en gras et en italique</I></B><BR>
<FONT SIZE=5>texte</FONT>
<FONT COLOR="#0000FF">en bleu</FONT>

</BODY>
</HTML>
2.- - Ouvrir le browser
Remarques & commentaires :
 Le texte tout simple s'écrit sans balises. Il sera repris par le browser avec la police et taille de
caractères choisies dans sa configuration par défaut.
 Le browser affiche le texte qu'on lui "dicte" en passant à la ligne lorsque celui-ci atteint le bord de la
fenêtre. Pour le forcer à passer outre à cette règle de conduite et à faire un saut à la ligne comme vous
le souhaitez, il faut une instruction particulière. C'est la balise <BR>. Celle-ci représente une action
ponctuelle et n'a donc pas besoin de balise de fin.
 Le même browser ne tient compte que d'un seul espace entre les mots. Ainsi pour lui
<FONT SIZE=5>texte</FONT> <FONT COLOR="#0000FF">en bleu</FONT> est équivalent à
<FONT SIZE=5>texte</FONT><FONT COLOR="#0000FF">en bleu</FONT>
 Il n'est pas rare d'utiliser plusieurs balises pour un même élément de texte. Il faut veiller à bien les
imbriquer. Ainsi <B><I>...</I></B> est correct et <B><I>...</B></I> risque de créer des ennuis.
 La taille dans <FONT SIZE=?> peut être indiquée de deux façons :
 avec un nombre de 1 à 7. La valeur par défaut étant 3.
 de façon relative par rapport à la valeur par défaut (ici 0). Soit -3 -2 -1 0 +1 +2 +3.
 Les balises <I> et <EM>, <B> et <STRONG> ne sont pas totalement équivalentes.
Voici les codes de quelques couleurs basiques.
Bleu #0000FF Vert #00FF00
Blanc #FFFFFF Violet #8000FF
Rouge #FF0000 Jaune #FFFF00
Gris clair #C0C0C0 Noir #000000
5. Titres et listes
Tout document d'une certaine consistance se doit de présenter, par exemple dans la table des matières, les
différents niveaux de son exposé. Html a disposé dès son origine d'outils spécialement conçus à cet effet.
En-têtes [Heading] <Hn></Hn> avec n=1 à 6 Afficher une en-tête de niveau n et sauter une ligne
Liste non-ordonnée [Bullet list] <UL></UL> Afficher le texte sous forme d'une liste non ordonnée.
Liste ordonnée [Numbered list] <OL></OL> Afficher le texte sous forme d'une liste ordonnée.
Elément de liste [List items] <LI> Voici un élément de la liste
Paragraphe [Paragraph] <P></P> Saut de ligne, insérer une ligne vierge et commencer un paragraphe
- On ouvre l’éditeur de texte

<H1>Les mois du printemps</H1>
<UL><LI>avril
<LI>mai
<LI>juin</UL>
<P>
<H3>Les mois d'automne</H3>
<OL><LI>octobre
<LI>novembre
<LI>décembre</OL>
A. Ouchatti3 3
Remarques & commentaires :
1. é est l'un de ces caractères spéciaux utilisés pour représenter le é. Les éditeurs Html vous
déchargeront de cette corvée.
2. Les paragraphes et les en-têtes peuvent s'aligner à gauche, au centre ou à droite.
<H1 align=left></H1>
<P align=left></P>
<H1 align=center></H1>
<P align=center></P>
<H1 align=right></H1>
<P align=right></P>
3. Les listes peuvent s'imbriquer:
<H4>Les 12 mois</H4>
<UL><LI>Les mois du printemps
<OL><LI>avril
</OL></UL>
6. Liens
Html (Hyper Text Markup Language) est un langage hypertexte (et hypergraphique) qui vous permet en
cliquant sur un mot, généralement souligné (ou une image) de vous transporter;
 vers un autre endroit du document.
 vers un autre fichier Html situé sur l’ordinateur.
 vers un autre ordinateur situé sur le Web.
Ce système d'hypertexte vous est familier car il est également utilisé par les fichiers d'aide de Windows. Ce
sont ces liens qui vous permettent de surfer de page en page et qui constituent l'essence des documents
Html.
La syntaxe de ces liens entre plusieurs pages, est simple: <A HREF="URL ou adresse">...</A>
Lien externe
Tout ordinateur situé sur le réseau Internet possède une adresse ou une URL (Universal Ressource
Locator). Html permet d'accéder à toutes les machines et toutes les ressources du Net.
Ce sont les adresses du type : http://serveur/chemin.../fichier, ftp://serveur/chemin.../fichier
mailto:utilisateur@hôte
Lien local
L'organisation classique d'un site Web consiste à regrouper l'ensemble des éléments de celui-ci (fichiers
html, images, ...) dans un même répertoire. Ceci permet de "transporter" aisément le site pour sur un
autre ordinateur ou le charger sur un serveur.
7. Tableaux
En Html, les tableaux servent non seulement à aligner des chiffres mais surtout à placer des éléments à
l'emplacement souhaité. L'usage des tableaux est donc très fréquent.
Un tableau est composé de lignes et de colonnes qui forment les cellules du tableau. Les balises de base
sont:
Définition du tableau [Table] <TABLE></TABLE> Début et fin de tableau
Définition d'une ligne [Table Row] <TR></TR> Début et fin de ligne
Définition d'une cellule [Table Data] <TD></TD> Début et fin de cellule
Exemples
Un tableau à deux lignes et deux colonnes, et donc à quatre cellules se représente comme suit :
A. Ouchatti4 4
<TABLE>
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>
Si on souhaite y adjoindre des bordures :

Bordure de cadre [Border] <TABLE border=?></TABLE>
<TABLE border=2>
</TABLE>
Il y a encore trois éléments (définis par défaut mais modifiables) :

L'espace entre les cellules ou l'épaisseur des lignes du quadrillage <TABLE cellspacing=?>
L'enrobage des cellules ou l'espace entre le bord et le contenu <TABLE cellpadding=?>
La largeur de la table <TABLE width=?> <TABLE width=%>
Exemples
<TABLE border=2 cellspacing=10>
</TABLE>
<TABLE border=2 cellpadding=10>

</TABLE>
Les cellules peuvent contenir tous les éléments Html suivants:

 du texte
 des images
 des liens
 des arrière-plans
 et même des tableaux
Chaque cellule est en quelque sorte un petit univers à part qui a ses propres spécifications :
<TD width=?> en pixels
Largeur d'une cellule
<TD width=%> en pourcentage
Fusion de lignes <TD rowspan=?>
Fusion de colonnes <TD colspan=?>
Exemple
<CENTER><TABLE width=60% border=1>
<TR>
<TD colspan=3>cellule 1</TD>
</TR>
<TR> <TD width=33%>cellule 1</TD> <TD
width=33%>cel 2</TD>
<TD width=34%>3</TD> </TR>
</TABLE></CENTER>
A. Ouchatti5 5
Exercice
Donnez le code HTML permettant de présenter le contenu d’une page pour les cas suivants
a-.
b-.
c-.
d-.
8. Frames
Pour diviser l'écran en plusieurs fenêtres, les balises sont peu nombreuses :
Zone avec des fenêtres
<FRAMESET> Début de zone avec des fenêtres
</FRAMESET> Fin de zone avec des fenêtres
Agencement des fenêtres
<FRAMESET ROWS="..."> Fenêtres horizontales
<FRAMESET COLS="..."> Fenêtres verticales
Exemples:
<HTML>
<HEAD></HEAD>
<FRAMESET ROWS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>
</HTML>
Exemple d’un agencement vertical

<FRAMESET COLS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>
On peut mélanger les deux :

<FRAME>
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
Le remplissage des fenêtres se fait par les attributs de la balise <FRAME>:

<FRAME .SRC="URL ou adresse du document à afficher dans la fenêtre">
Exemple :
A. Ouchatti6 6
On construit 3 fichiers Html élémentaires que l'on place dans le même répertoire que le fichier de frames :
A.htm B.htm C.htm
<HTML><BODY> <HTML><BODY> <HTML><BODY>
<H4>A</H4> <H1>B</H1> <H1>C</H1>
</BODY></HTML> </BODY></HTML> </BODY></HTML>
On reprend le fichier de frame précédent que l'on

complète par :
<FRAME SRC="A.htm">
<FRAME SRC="B.htm">
<FRAME SRC="C.htm">
</FRAMESET>
</FRAMESET>
Remarque :
Les ascenseurs, apparaissent automatiquement.
Par l'attribut de la balise <FRAME> SCROLLING="yes/no/auto" vous pouvez indiquer si la fenêtre doit
ou non posséder une barre de défilement.
9. Formulaires
Un formulaire sert à récupérer des données que l’utilisateur va entrer et les envoyer au serveur pour un traitement
(en PHP par exemple). La Balise principale du formulaire est :
• Deux méthodes :
 method="get" : limitée à 255 caractères, informations passées dans la barre d’adresse
 method="post" : envoie les données dans le corps de la requête sans passer par la barre d’adresse, c’est la
méthode la plus utilisée
• Action : l’adresse du fichier ou programme qui va traiter les données
Les éléments de formulaires HTML
Elément Définition
form Définit un formulaire
input Définit un champ de données pour l’utilisateur
label Définit une légende pour un élément input
textarea Définit un champ de texte long
select Définit une liste de choix
optgroup Définit un groupe d’options dans une liste
option Définit une option dans une liste
fieldset Permet de regrouper les éléments d’un formulaire en différentes parties
legend Ajoute une légende à un élément fieldset
Exemple :
<html>
<head>
<title>Un exemple simple de formulaire</title>
</head>
<body>
<H1>Exemple simple de formulaire utilisant l'interface CGI</H1>
A. Ouchatti7 7
<P>
Ceci est un formulaire simple qui illustre l'utilisation de
la bibliothèque de fonctions CGI permettant de traiter
les informations saisies dans les zones de dialogue.
</P>
<HR>
<form method="post" action="formulaire-simple.cgi">
<H2>Questionnaire</H2>
Quel est votre prénom ? <input name="prenom">
<P>
Quel est votre nom ? <input name="nom">
<P>
Quelle est votre couleur favorite ?
<select name="couleur">
<option selected>blanc
<option>jaune
<option>orange
<option>rouge
<option>vert
<option>bleu
<option>violet
<option>noir
</select>
<P>
Aimez vous l'informatique ?
<input type="radio" name="choix" value="oui" checked> Oui ou
<input type="radio" name="choix" value="non"> Non
<P>
Veuillez expliquer brièvement ci-dessous le choix que vous venez de faire :
<input name="message" size=60,5>
<P>
Cliquez sur <input type="submit" value="Valider"> pour soumettre votre requête.,
sinon <input type="reset" value="Annuler">
</form>
</body>
</html>
A. Ouchatti8 8
10. Liste complète des balises HTML5
Balise Description
<!– … –> Définit un commentaire
<!DOCTYPE> Définit le type du document
<a> Définit un lien
<abbr> Définit une abréviation
<address> Définit une adresse
<area> Définit une zone à l’intérieur d’une image
<article> NOUVEAU Définit un article
<aside> NOUVEAU Définit une partie latérale au contenu
<audio> NOUVEAU Définit un fichier audio
<b> Texte en gras
<base> Définit une URL de base pour tous les liens de la page
<bdo> Définit la direction du texte
<blockquote> Définit une longue citation
<body> Définit le corps de la page
<br> Saut de ligne
<button> Définit un bouton cliquable
<canvas> NOUVEAU Définit un graphique
<caption> Légende du tableau
<cite> Définit une citation
<code> Mise en forme d’un texte en code informatique
<col> Définit une colonne d’un tableau
<colgroup> Définit un groupe de colonne pour un tableau
<command> NOUVEAU Définit un bouton de commande
<datalist> NOUVEAU Définit une liste d’options
<dd> Définition d’un terme
<del> Définit un texte supprimé
<details> NOUVEAU Définit les détails d’un élément
<dfn> Définition
<div> Définit un calque ou une section
<dl> Liste de définition
<dt> Définition d’un terme
<em> Mise en exergue d’un texte – italique
<embed> NOUVEAU Définit un contenu extérieur (audio, vidéo …)
<fieldset> Regroupe plusieurs éléments d’un formulaire
<figcaption> NOUVEAU Légende d’un groupe d’élément multimédia
<figure> NOUVEAU Définit un groupe d’élément multimédia
<footer> NOUVEAU Définit le bas d’un section ou d’une page
<form> Définit un formulaire
<h1> to <h6> Définit un titre par degré importance de 1 à 6
<head> Définit l’en-tête d’un document
<header> NOUVEAU Définit le haut d’une section ou d’une page
<hgroup> NOUVEAU Regroupe les informations du haut d’une page ou section
<hr> Barre horizontale
<html> Définit un document html
<i> Texte en italique
A. Ouchatti9 9
<iframe> Introduit un page html dans une frame
<img> Définit une image
<input> Définit un champ
<ins> Définit un texte insérer
<keygen> NOUVEAU Générateur de clé pour un formulaire
<kbd> Raccourcis ou touche du clavier
<label> Légende d’un groupe d’élément de formulaire
<legend> Titre d’un groupe d’élément d’un formulaire
<li> Élément d’une liste
<link> Définit les relations entre les documents
<map> Définit une carte
<mark> NOUVEAU Mise en valeur d’un mot ou d’un texte – Texte marqué
<math> NOUVEAU Définit une formule mathématique
<menu> Définit un menu en liste
<meta> Définit des informations relatives au document
<meter> NOUVEAU Définit une unité de mesure
<nav> NOUVEAU Définit un groupe de liens de navigation
<noscript> Définit une alternative au script non supporté
<object> Définit un objet du contenu extérieur multimédia
<ol> Définit une liste ordonné
<optgroup> Regroupe d’une liste d »option dans un formulaire
<option> Option d’une liste dans un formulaire
<output> NOUVEAU Définit un type de sortie
<p> Définit un paragraphe
<param> Définit les paramètres d’un objet
<pre> Texte pré-formaté
<progress> NOUVEAU Définit une progression
<q> Définit une courte citation
<rp> NOUVEAU Annotation ruby si le script n’est pas supporté
<rt> NOUVEAU Annotation ruby d’explication
<ruby> NOUVEAU Définit une annotation en ruby
<samp> Définit un échantillon de code
<script> Définit un script
<section> NOUVEAU Définit une section
<select> Définit une liste sélectionnable
<small> Minimise l’importance d’un texte
<source> NOUVEAU Définit la source d’un contenu multimédia
<span> Définit une section de type inline
<strong> Mise en exergue d’un texte – Texte en Gras
<style> Définit un style CSS
<sub> Mise en indice d’un texte
<summary> NOUVEAU Définit l’en-tête des détails d’un document ou section
<sup> Mise en exposant d’un texte
<svg> NOUVEAU Définit une image vectorielle
<table> Définit un tableau
<tbody> Définit le corps d’un tableau
<td> Définit une cellule d’un tableau
A. Ouchatti10 10
<textarea> Définit une zone de texte
<tfoot> Définit le bas d’un tableau
<th> Définit une cellule d’en-tête d’un tableau
<thead> Définit le haut d’un tableau
<time> NOUVEAU Définit une unité de temps
<title> Définit le titre d’un document
<tr> Définit une ligne de tableau
<track> NOUVEAU Définit une unité de temps pour les éléments <audio> et <video>.
<ul> Définit une liste non-ordonné
<var> Définit une variable
<video> NOUVEAU Définit une vidéo
<wbr> NOUVEAU Définit un possible retour à la ligne
A. Ouchatti11 11

HTML Rappels2021

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML Rappels2021

Transféré par

Droits d'auteur :

Formats disponibles

2019/2021

3. Document Html minimum

Notre premier document Html:

- On ouvre l’éditeur de texte

Si on souhaite y adjoindre des bordures :

Il y a encore trois éléments (définis par défaut mais modifiables) :

<TABLE border=2 cellpadding=10>

Les cellules peuvent contenir tous les éléments Html suivants:

Exemple d’un agencement vertical

On peut mélanger les deux :

Le remplissage des fenêtres se fait par les attributs de la balise <FRAME>:

On reprend le fichier de frame précédent que l'on

Vous aimerez peut-être aussi