HTML Rappel

HTML, les principes
Il contient des commandes, implémentées par

des balises pour marquer les différents types de
texte (titres, paragraphe, listes …) , pour inclure
des images, des formulaires, des liens …
C'est un langage à balisage qui décrit la

structure logique d'un document hypertexte. Il
a volontairement été conçu pour être simple.
L'hypertexte
Le langage HTML permet de créer des documents

interactifs grâce à des liens hypertextes, qui
relient votre document à d'autres documents.
En cliquant sur une zone de texte (ou une image,

un logo) mise en évidence, on peut accéder a un
nouveau document situé sur un autre ordinateur
en n'importe quel point du globe.
Introduction
Une page HTML se compose de quatre balises indispensables :
– La balise <HTML></HTML>
• Contient toutes les autres balises.
• Le document source doit commencer par <HTML> et se finir par </HTML>.
– La balise <HEAD></HEAD>
• Définit l'en-tête du document.
• Contient des informations qui ne sont pas visibles dites métas informations.
– La balise <TITLE></TITLE>
• Se trouve dans la balise <HEAD>
• Titre de la page
• Est le seul élément visible qui se trouve dans l'en-tête.
– La balise <BODY></BODY>
• Contient les informations qui seront visibles,
• c'est le corps de votre document.
Les paragraphes
• Le paragraphe se détermine grâce à la balise
<P> </P>
• La balise <P> génère un saut de ligne

Exercice
<body>
Bonjour, <p> bienvenue sur ma page d'accueil, </p>
voici ma page 1 : <a href="page1.htm">ici</a>
</body>
sauts de ligne
• la balise <BR> qui ne possède pas de balise de
fin
Exercice
Insérer la balise <BR> dans le texte
Titre de chapitre
• balise <Hn> </Hn>
• "n" est un chiffre comprit entre 1 et 6 qui
détermine la taille du titre
• 1 est la plus grosse taille
Exercice
Insérer <Hn> Mon titre </Hn> dans le <Body>
Filet horizontal
• Balise <HR>
• Donne plus de clarté au document HTML
Exercice
Insérer <HR> dans le <Body> avant et après le texte
Couleur de fond
• Attribut BGCOLOR
• <BODY bgcolor="Black"> ou <BODY
bgcolor="#000000">.
Exercice
Modifier <BODY > par <BODY bgcolor=“#FFFF00">
Couleur du texte
• Attribut text
• <BODY text=“aqua"> ou <BODY
bgcolor="#00FFFF">.
Exercice
Modifier <BODY > par <BODY bgcolor=“#FFFF00“ text=“#00FFFF">
Mise en forme du texte
• Gras: Balise <B> et </B>
• Italique: Balise <I> et </I>
• Souligné: <U> et </U>
• Taille: <FONT size="10pt"> et </FONT>
• Couleur: <FONT color="red"> et </FONT>
• Police: <FONT face="arial"> et </FONT>
Exercice
Appliquer toutes ces balises sur votre texte
Les images
• Balise <IMG>
• Balise simple, sans balise de fermeture
Exercice
Insérer le code:
<img src="imagecours.gif" >
Taille: width=“largeur en pixel " height=“hauteur

en pixel"
Exercice
Insérer le code:
<img src="imagecour.gif" width="100" height="66">
Espace entre l'image et le texte
• Attributs HSPACE et VSPACE
Exercice
Insérer le code:
<IMG src="imagecours.gif" HSPACE="5" > (ecrire un texte)
<IMG src="imagecours.gif" VSPACE="20“ > (ecrire un
texte)
Image de fond
• Attribut BACKGROUND
• <BODY BACKGROUND= "image">
Exercice
Remplacer:
<BODY bgcolor=“#FFFF00"> par <BODY BACKGROUND="bg.WMF">
Les liens
• Balise <A> </A>
• Attribut HREF
Exercice
Inserer:
<a href="page1.htm"> mon premier lien </a>
Exercice
Créez de la même façon une page nommée index.htm (attention pas de majuscule)
qui contient le texte suivant :
<html>
<head><title>ma page d'accueil</title></head>
<body>
Bonjour bienvenue sur ma page d'accueil, voici ma page 1 :
<a href="page1.htm">ici</a>
</body>
</html>
Exercice
Créez de la même façon une page nommée page1.htm (attention pas de majuscule)
qui contient le texte suivant :
<html>
<head><title>ma page d'accueil</title></head>
<body>
Voici ma page 1, retour à la page d'accueil :
<a href="index.htm">ici</a>
</body>
</html>
La couleur des liens
• Attribut link dans la balise body
• Couleur des liens ------- > attribut link
• Couleur des liens actifs ------- > attribut alink
• Couleur des liens visités ------- > attribut vlink
Exercice
Modifier le body par:
<BODY alink="#FF6633" Vlink = "#66FF66" Link =
"red">
Ouvrir le lien dans une nouvelle
fenêtre
• Attribut TARGET de la balise <A>
Exercice
Ajouter TARGET="_blank" dans:
<a href="page1.htm"> mon premier lien </a>
Les tableaux
• La balise <TABLE> qui définit le début et la fin du tableau.
• La balise <TR> qui définit le début d'une ligne et la fin de
cette ligne.
• La balise <TD> qui définit une cellule dans une ligne.
Exercice
1. Insérer :
<TABLE border = 1>
<TR>
<TD> Cellule 1 </TD>
</TR>
</TABLE>
2. Faire un tableau avec 5 lignes et 3 colonnes
Les frames
• Balise: < FRAMESET>
• Permet de définir le nombre de zones et leurs
dimensions
• Principaux attributs: rows et cols
Exercice
Insérer:
<frameset rows="25%,35%,40%">
<frame>
<frame>
<frame>
</frameset>
Les frames
• < FRAME> permet de définir le contenu de
chacune des zones
Exercice
Insérer:
<FRAMESET rows="100,3*,*">
<FRAME src=fichier1.html name=sommaire ...>
<FRAME src=fichier2.html name=principale>
<FRAME src=fichier3.html name=secondaire>
</FRAMESET>
Lien vers un cadre
• L'attribut ’’target’’ permet de diriger un
document vers un autre cadre
Exercice
Transformer sur page1.htm:
<a href="index.htm" target=principale>ici</a>
Formulaire HTML
1.Introduction
• La présence d’éléments de formulaires HTML
fait distinguer une application web d’un site
web.
• Un formulaire HTML est une partie de page

web qui accepte des entrées de l’utilisateur.
Un formulaire peut contenir :
• Des champs de saisi de texte;

• Des listes de sélections;
• Des boutons;
• Des cases à cocher;
• Des boutons d’options.
• Un bouton de soumission du formulaire et son
contenu au serveur web.
2.Exemple de page avec formulaire
• <HTML>
• <HEAD>
• <TITLE>SELECT -4</TITLE>
• </HEAD>
• <BODY BGCOLOR="white" TEXT="black">
• <H3>Formulaire </H3>
• <FORM ACTION="select_4.htm">
• </FORM>
• </BODY>
• </HTML>
3.Entrée d’une ligne de texte
BALISES ATTRIBUTS FONCTIONS
<INPUT TYPE = "text" Indique une boîte d'une seule ligne permettant l'entrée du
OPTIONS…> texte
NAME = "nom" Identifier la boîte de texte pour pouvoir répérer/identifier le

contenu
SIZE = nombre Spécifier la largeur de la boîte en nombre de caractères
MAXLENGTH = n Spécifier le nombre maximum de caractères permis dans

la boîte
Si ce nombre est plus grand que SIZE alors le texte se
défilera à l'horizontale
VALUE = "texte" Indiquer quoi écrire ou spécifier le début du texte à entrer
READONLY Convertit le "champ de saisie" en "champ de sortie" non

modifiable
Exemple 2 « text »
<HTML>
<HEAD>
<TITLE>INPUT -1</TITLE>
</HEAD>
<BODY BGCOLOR="white" TEXT="black">
<H3>Formulaire pour entrer le nom</H3>
<FORM ACTION="input_2.htm">
<P>Prénom:
<INPUT NAME="prénom" TYPE="text" SIZE="25" MAXLENGTH="40">
<P>Nom de famille:
<INPUT NAME="nom" TYPE="text" SIZE="25" MAXLENGTH="40">
</FORM>
</BODY>
</HTML>
4.Entrée d’un « Mot de Passe »
<INPUT TYPE = Indentique à une boîte de texte sauf que l'écriture est
OPTIONS…> "password" remplacée par des * *
Les mots de passe sont, malgré la saisie cachée, transmis
en clair sur Internet
NAME = "nom" Donner un nom pour identifier/répérer le contenu de la
boîte de dialogue.
SIZE = nombre Spécifier la largeur de la boîte en nombre de caractères
VALUE = "texte" Indiquer le mot de passe qui apparaîtra sous forme *****
(Pas sécuritaire!!)
Exemple 3 « Password »
<HTML>
<HEAD>
<TITLE>PASSWORD -2</TITLE>
</HEAD>
<H3>Formulaire pour "mot de passe"</H3>
<FORM ACTION="password_2.htm">
<P>Nom :
<INPUT NAME="nom" TYPE="text" SIZE="25"
MAXLENGTH="20">
<P>Mot de Passe :
<INPUT NAME="nom" TYPE="password" SIZE="8"
MAXLENGTH="5">
</FORM>
</BODY>
</HTML>
5. Entrée d’un choix par « Bouton
Radio »
<INPUT TYPE = "radio" Disposera des boutons où un seul choix pourra être
OPTIONS…> sélectionné.
Tous les boutons dans un même groupe doivent avoir le
même nom.
NAME = "nom" Identifie à quel groupe de boutons le 'bouton-radio'
appartient.
VALUE = "texte" Indiquer le choix sélectionné. Peut être différent du choix
affiché.
CHECKED Indique un choix par défaut parmi les options proposées.
DISABLED Montre les choix mais ne permet pas de faire, ou de

modifier, la sélection.
Exemple 4 « Bouton Radio »
<HTML>
<HEAD>
<TITLE>RADIO-2</TITLE>
</HEAD>
<H3>Formulaire pour "sélection d'un choix"</H3>
<FORM ACTION="radio_2.htm">
<P>Faites votre choix:<BR>
<INPUT TYPE="radio" NAME="Saison" VALUE="1">Printemps<BR>
<INPUT TYPE="radio" NAME="Saison" VALUE="2" CHECKED>Eté<BR>
<INPUT TYPE="radio" NAME="Saison" VALUE="3">Automne<BR>
<INPUT TYPE="radio" NAME="Saison" VALUE="4">Hiver<BR>
</FORM>
</BODY>
</HTML>
6. Entrée de plusieurs choix par « Cases à
Cocher »

<INPUT TYPE = "checkbox" Disposera des cases où plusieurs choix pourront être
OPTIONS…> sélectionnés.
Toutes les cases dans un même groupe doivent avoir le même
nom (NAME).
NAME = "nom" Identifie à quel groupe de cases la 'case à cocher' appartient.
VALUE = "texte" Indiquer le(s) choix sélectionné(s). Peut être différent du choix
affiché.
CHECKED Indique un choix pré-définie parmi les options proposées.
DISABLED Montre les choix mais ne permet pas de faire, ou de modifier, la

sélection.
Exemple 5 « Cases à Cocher »
<HTML>
<HEAD>
<TITLE>CHECKBOX-2</TITLE>
</HEAD>
<H3>Formulaire pour "sélection des choix"</H3>
<FORM ACTION="checkbox_2.htm">
<P>Faites votre choix:<BR>
<INPUT TYPE="checkbox" NAME="4S" VALUE="1">Printemps<BR>
<INPUT TYPE="checkbox" NAME="4S" VALUE="2" CHECKED>Eté<BR>
<INPUT TYPE="checkbox" NAME="4S" VALUE="3">Automne<BR>
<INPUT TYPE="checkbox" NAME="4S" VALUE="4">Hiver<BR>
</FORM>
</BODY>
</HTML>
7. Bouton « Envoyer »
<INPUT OPTIONS…> TYPE = "submit" Envoyer le formulaire à l'adresse indiquée

dans <FORM ACTION="...">
VALUE = "texte" Permet de modifier le texte affiché sur le

bouton. (Par défaut = Submit)
8. Bouton « Reset »
<INPUT OPTIONS…> TYPE = "reset" Remise à zéro de toutes les entrées du formulaire.
VALUE = "texte" Permet de modifier le texte affiché sur le bouton. (Par

défaut = Reset)
9.Bouton général

<INPUT OPTIONS…> TYPE = "button" Utilisé pour placer une bouton cliquable à
l'écran.
Sans l'utilisation de 'fonctions JavaScript',
le bouton ne peut rien faire.
NAME = "nom" Donner un nom unique au bouton pour

identifier le clic de la souris.
VALUE = "texte" Permet de placer un ou des mots

descriptifs sur le bouton.
10. Bouton image
<INPUT OPTIONS…> TYPE = "image" Identique au "Submit" mais le bouton est

remplacé par une image.
Les coordonnées x et y de l'emplacement
où l'utilisateur a cliqué sur l'image
seront également envoyées avec les
autres informations du formulaire.
11. Liste déroulante
<SELECT>… Permet d'inclure une liste déroulante dans
</SELECT> laquelle on pourra faire un choix.
Les balises <OPTION> et </OPTION>
permettent de définir les choix.
<SELECT NAME = "nom" Assignera un nom à l'item sélectionné par
OPTIONS>… l'utilisateur.
</SELECT>
SIZE = "n" Indique le nombre d'items à afficher dans la
fenêtre en tout temps.
Si l'attribut n'est pas spécifié, une liste
déroulante est utilisé. (Size = 1)
MULTIPLE Permet de sélectionner plus qu'un item en
enfonçant le bouton 'Ctrl' ou 'Shift'
Si l'attribut n'est pas indiqué, un seul item de la
liste pourra être sélectionné.
DISABLED Permet de créer une liste désactivée, c'est-à-
dire affichée en grisée.
•
Exemple 6 « liste »
<HTML>
• <HEAD>
• <TITLE>Submit</TITLE>
• </HEAD>
• <BODY >
• <H3>Formulaire pour "lISTE déroulante"</H3>
• <FORM>
• <P>Faites votre choix:<BR>
• <select name = "liste" size = 3>

• <option> Element 1 </option>
• <option selected> Element 5 </option>
• </select>
• <BR>
• <BR>
• <BR>
• <select name = "liste2" size = 1>
• <option selected> Element 5 </option>
• </select>
• <BR>
• </FORM>
• </BODY>
• </HTML>
12. Items d’une liste déroulantes
<OPTION>… Permet de détailler les items d'une

</OPTION> liste déroulante.
<OPTION>… VALUE = "texte" Indiquera la phrase qui sera envoyé
</OPTION> lors de la sélection de l'item.
SELECTED Permet de pré-identifier un item de la

liste déroulante.
13. Entrée de textes dans une boîte
<TEXTAREA>… Boite de texte éditable multi-lignes et multi-
colonnes. Si le texte dépasse la
</TEXTAREA> limite verticale de la boîte, une barre de
déroulent verticale apparaîtra.
NAME = "nom" Identifier la boîte de texte pour pouvoir
repérer/identifier le contenu
COLS = nombre Spécifier la largeur de la boîte de texte en
nombre de caractères
ROWS = nombre Spécifier le nombre de lignes pour la
hauteur de la boîte de texte
VALUE = "texte" Permet de pré-définir du texte qui sera
envoyé par défaut au script si le champ de
saisie n'est pas modifié par une frappe de
l'utilisateur.
READONLY Spécifie que la boîte est en mode lecture
seulement.

HTML Rappel

Transféré par

Informations du document

Titre original

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 Rappel

Transféré par

Droits d'auteur :

Formats disponibles

HTML, les principes

Il contient des commandes, implémentées par

C'est un langage à balisage qui décrit la

Le langage HTML permet de créer des documents

En cliquant sur une zone de texte (ou une image,

• La balise <P> génère un saut de ligne

Taille: width=“largeur en pixel " height=“hauteur

• Un formulaire HTML est une partie de page

• Des champs de saisi de texte;

NAME = "nom" Identifier la boîte de texte pour pouvoir répérer/identifier le

MAXLENGTH = n Spécifier le nombre maximum de caractères permis dans

VALUE = "texte" Indiquer quoi écrire ou spécifier le début du texte à entrer

READONLY Convertit le "champ de saisie" en "champ de sortie" non

BALISES ATTRIBUTS FONCTIONS

DISABLED Montre les choix mais ne permet pas de faire, ou de

BALISES ATTRIBUTS FONCTIONS

CHECKED Indique un choix pré-définie parmi les options proposées.

DISABLED Montre les choix mais ne permet pas de faire, ou de modifier, la

<INPUT OPTIONS…> TYPE = "submit" Envoyer le formulaire à l'adresse indiquée

VALUE = "texte" Permet de modifier le texte affiché sur le

BALISES ATTRIBUTS FONCTIONS

VALUE = "texte" Permet de modifier le texte affiché sur le bouton. (Par

BALISES ATTRIBUTS FONCTIONS

NAME = "nom" Donner un nom unique au bouton pour

VALUE = "texte" Permet de placer un ou des mots

<INPUT OPTIONS…> TYPE = "image" Identique au "Submit" mais le bouton est

• <select name = "liste" size = 3>

BALISES ATTRIBUTS FONCTIONS

<OPTION>… Permet de détailler les items d'une

SELECTED Permet de pré-identifier un item de la

Vous aimerez peut-être aussi