Cours n° 1
Module : Application
hypermédia
Langage HTML
Formateur : Mr Omar
Année scolaire 2022/2023
Le WWW (Web)
Le World Wide Web est une toile d'araignée de
serveurs d'informations reliés les uns aux autres
par des liens physiques (le réseau matériel) et
des liens logiques (les liens hypertextes). Ces
liens hypertextes permettent de voyager d'un
serveur à l'autre sur le réseau Internet.
Le Web n’est qu’une partie de l’Internet. C’est le
service le plus connu, mais il en existe d’autres :
FTP (File Transfer Protocol), Telnet, News, IRC
(Internet Relay Chat) …
WWW, HTTP et HTML
D'un point de vue technique, le WWW relie des
serveurs HTTP qui envoient des pages HTML à
des postes dotés d'un navigateur.
Le protocole de communication entre les
navigateurs et les serveurs est basé sur le
principe des hypertextes (HyperText Transfer
Protocol).
Le langage permettant de décrire les pages
Web est le HTML (HyperText Markup
Language).
Architecture Clients-Serveur
Document HTML
HTML (HyperText Markup Language) est un langage
de description (dit de marquage) de pages Web. Il
permet de présenter les
documents hypertextes destinés à être affichés sur
le navigateur. Il s'agit d'un langage coté client (tout
comme CSS et Javascript). Il est supporté et
développé par W3C.
Le langage HTML
Le langage HTML permet la :
mise en forme de documents : polices, styles..
tableaux listes cadres bannières…
création d'hyperliens
Création des formulaires
insertion d'images
insertion d'images animées
insertion de composants multimedia : son, vidéo...
Le Web et HTML
HTML est un langage informatique dont le
principe de base repose sur l’utilisation de
balises pour délimiter les différents
éléments d’un document.
Ces balises ont la forme <…> et </…>
Exemple :
<B> Mon texte </B> (pour mettre en gras)
<I> Autre texte </I> (pour mettre en italique)
On peut combiner ces balises :
<B> <I> Texte en gras et en italique </I> </B>
Éléments de base d’une page HTML
<HTML> Définit le contenu HTML d'un document
Nécessite un marqueur de fin.
Règle : <HTML>.....</HTML>
<HEAD> Définit l'en-tête d'un document HTML
Nécessite un marqueur de fin.
Règle : <HEAD>.....</HEAD>
<TITLE> Définit le titre d'un document HTML
Nécessite un marqueur de fin.
Règle : <TITLE>.....</TITLE>
<BODY> Définit le corps du document HTML
Nécessite un marqueur de fin.
Règle : <BODY>.....</BODY>
Exemple d’une base de page HTML
<HTML> début du document HTML
<HEAD> début de l’en-tête du
document
<TITLE> Titre de votre page </TITLE> titre du document
</HEAD> fin de l’en-tête du document
<BODY> début du corps du
document
Insérer vos textes, images, formulaires, etc. ici
</BODY> fin du corps du document
</HTML> fin du document HTML
Création d’une page Web sans éditeur HTML
Dans un éditeur de texte traditionnel, (Blok-notes par ex.), taper, puis
sauvegarder ce fichier, en précisant : Nom du [Link]
<HTML>
<HEAD>
<TITLE>
Ceci est le titre de ma page
</TITLE>
</HEAD>
<BODY>
Voici ma première page Web.
</BODY>
</HTML>
Retour à la ligne : <BR>
La balise <BR> (qui signifie break) permet de revenir à la ligne
<HTML>
<HEAD>
<TITLE>
Deuxième exemple de page HTML, avec un BR
</TITLE>
</HEAD>
<BODY>
Voici ma deuxième page Web.
<BR>
Et là, une autre phrase après un retour à la ligne.
</BODY>
</HTML>
Les paragraphes et l’alignement : <P> </P>
Les balises <P> et </P> définissent le début et la fin d’un paragraphe.
Le paramètre align indique une position (left, right, center).
<HTML>
<HEAD>
<TITLE> Exemple de paragraphe en HTML </TITLE>
</HEAD>
<BODY>
<p> Ma première ligne. </p>
<p align="center"> Cette phrase est centrée sur la page. </p>
<p align="right"> Celle-ci est alignée à droite. </p>
<p align="left"> Par défaut, l'alignement se fait à gauche. </p>
</BODY>
</HTML>
Mise en forme de texte
• Gras : <B> et </B> (pour Bold)
• Italique : <I> et </I> (pour Italic)
• Souligné : <U> et </U> (pour Underlined)
• Police plus grande : <BIG> et </BIG>
• Police plus petite : <SMALL> et </SMALL>
• Texte barré : <S> et </S>
• Indice : <SUB> et </SUB>
• Exposant : <SUP> et </SUP>
Mise en forme de texte
Exercice :
Reproduire cette page
à l’aide des balises
de mise en forme
d’un texte HTML.
Mise en forme de texte (suite)
• Pour centrer un/des élément(s) :<CENTER> et </ CENTER >
• Ligne horizontale : <HR> (Horizontal Rulers)
Exemple :
<HR SIZE=3 WIDTH=50% ALIGN=RIGHT COLOR=BLACK>
• Police de caractères, taille, et couleur :
<FONT FACE="Arial" SIZE="5" COLOR="red"> et </FONT>
avec la police pouvant être : Arial, Arial Black, Comic sans MS,
Courier New, Impact, Times new roman, Verdana, etc.
avec size de 1 à 7, et color étant une couleur (en anglais) ou un code.
Mise en forme de texte (suite)
Exercice : Reproduire cette page à l’aide des balises de mise en
forme d’un texte HTML.
50% 3
60% 5
40% 10
Accueil Google Element dans ma meme page Chemin intern
<a href="#">Accueil</a> la même page
<a href="[Link] nouvelle page de destination
<a href="#id">Element dans la page</a> une section a travers un ID
<a href="/[Link]">Chemin interne</a>
Nouveau lien : la couleur sera bleu
Lien visité : la couleur se transforme vers le violet
Attribut target <a href=" #" Target= " _self" >Google</a>
Target Utilité
_self Défaut. Ouvre le document dans la même fenêtre/onglet que celui où
il a été cliqué
_blank Ouvre le document dans une nouvelle fenêtre ou un nouvel onglet
_parent Ouvre le document dans le cadre parent
_top Ouvre le document dans tout le corps de la fenêtre
Syntaxe insertion image :
<img src="url" alt="alternatetext">
Exercice :
Attribus image: Ajouter une image en
Src : Source de l’image « Chemin » precisant la longueur et la
Alt : Texte sur l’image largeur tout mettant l’image
Width : Largeur au centre de la page
Height : Longueur
<ul> <ol>
<li>Article</li> <li>Premier élément </li>
<li>Article</li> <li> Deuxième élément </li>
<li>Article</li> <li> Troisième élément </li>
<li>Article</li> <li> Quatrième élément </li>
</ul> </ol>
Exemple
TYPE : Exemple
list-style-type: circle I. Circle
list-style-type: square II. Square
list-style-type: upper-roman I III. Upper Roman
list-style-type: decimal 1 IV. Decimal
list-style-type: lower-alpha a V. Lower alpha
POSITION : • Outside1
• Outside2
list-style-position: outside
• Inside1
1
list-style-position: inside • Inside2
2
IMAGE: Image1
Image2
Liste-style-image: url (‘chemin’) Image3
Les tableaux (Méthode)
Forme canonique de la balise TABLE :
<TABLE Border=N Align="center">
<TR>
<TD>Donnée N°1</TD> <TD> Donnée N°2</TD>
</TR>
</TABLE>
Exemple :
<TABLE>
<TR>
<TD>Paris</TD>
<TD>Lille</TD>
</TR>
<TR>
<TD>Marseille</TD>
<TD>Lyon</TD>
</TR>
</TABLE>
Les tableaux Exemple
<TABLE border=2 ALIGN="center">
<TR>
<TD align="center">Paris</TD>
<TD align="center">Lille</TD>
</TR>
<TR>
<TD align="center">Marseille</TD>
<TD align="center">Lyon</TD>
</TR>
</TABLE>
• <TR> correspond à une ligne du tableau
• <TD> correspond à une donnée (une cellule) du tableau
[Link]
Les tableaux Exemple
<TABLE WIDTH=80% border=10 ALIGN="center">
<COL ALIGN="center" SPAN=2>
<TR>
<TD>Paris</TD>
<TD>Lille</TD>
</TR>
<TR>
<TD>Marseille</TD>
<TD>Lyon</TD>
</TR>
</TABLE>
NB : Cette autre manière de centrer utilise la balise COL (que pour IE).
L’attribut SPAN de la balise COL définit le nombre de colonnes
qui seront affectées par l'attribut ALIGN.
[Link]
Les tableaux (avec en-tête)
Les balises <TH> et </TH> permettent de spécifier un en-tête
Exemple :
<TR> <TH> En-tête 1 </TH> <TH>En-tête 2 </TH> </TR>
Exercice :
Reproduire ce
tableau,
avec en-tête
[Link]
Les tableaux (avec en-tête) Solution de l’exercice
<Table border=1 align="center">
<COL align="center" span=3>
<TR> <TH> Pizza </TH> <TH> Prix (d'une Moyenne) en Frs
</TH> <TH> Prix (d'une Grande) en Frs </TH> </TR>
<TR> <TD>5 Fromages </TD> <TD> 50 </TD> <TD> 81 </TD> </TR>
<TR> <TD> Cantal </TD> <TD> 43 </TD> <TD> 70</TD> </TR>
<TR> <TD> Reblochon </TD> <TD> 45 </TD> <TD> 69 </TD> </TR>
<TR> <TD> Chèvre </TD> <TD> 43 </TD> <TD> 72 </TD> </TR>
<TR> <TD> Bleu </TD> <TD> 45 </TD> <TD> 69 </TD> </TR>
</Table>
[Link]
Les tableaux (cellules non proportionnelles)
<TABLE WIDTH=40% BORDER=5>
<TR>
<TH COLSPAN=2>En-tête tablo</TH>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
</TR>
<TR >
<TD COLSPAN=2 align="center">C</TD>
</TR>
</TABLE>
[Link]
Les tableaux (CELLPADDING)
Espace entre la bordure et le contenu de la cellule du tableau de 15
<TABLE CELLPADDING=15 WIDTH=80%
border=10 BORDERCOLOR="blue" ALIGN="center">
<COL ALIGN="center" span=2>
<TR>
<TD>Paris</TD>
<TD>Lille</TD>
</TR>
<TR>
<TD>Marseille</TD>
<TD>Lyon</TD>
</TR> </TABLE>
[Link]
Les tableaux (CELLSPACING)
Tableau avec espace de 18 entre les cellules
<TABLE CELLSPACING=18 CELLPADDING=15 WIDTH=80%
border=10 BORDERCOLOR="blue" ALIGN="center">
<COL ALIGN="center" span=2>
<TR>
<TD>Paris</TD>
<TD>Lille</TD>
</TR>
<TR>
<TD>Marseille</TD>
<TD>Lyon</TD>
</TR> </TABLE>
[Link]
Contenu de Cadres (Frameset) et Cadres (Frame)
Les balises <FRAMESET> et </FRAMESET> permettent de définir un contenu
de cadre dans une page HTML. On indique ainsi la structure de la page.
Exemple :
<FRAMESET COLS="20%, 80%">
</FRAMESET>
NB : Dans un document utilisant des cadres, il n'y a pas de section BODY (donc,
aucune autre balise ne sera prise en compte).
La balise <FRAME> définit un cadre à l'intérieur d'un Frameset.
Exemple :
<HTML> <HEAD> <TITLE> Les cadres </TITLE> </HEAD>
<FRAMESET COLS="40%,*">
<FRAME NAME="ZoneA" SRC="[Link]">
<FRAME NAME="ZoneB" SRC="[Link]">
</FRAMESET>
</HTML>
[Link]
Les principaux attributs de Frameset et de Frame
• Frameset :
COLS = « liste de valeurs de largeur des colonnes » (en pixel ou en %)
ROWS = « liste de valeurs de la hauteur des rangées »
BORDER = nombre
• Frame :
NORESIZE = Noresize | Resize
SCROLLING = Auto | No | Yes
<HTML> <HEAD> <TITLE> Les cadres, 4 pages </TITLE> </HEAD>
<FRAMESET COLS="60%,*" ROWS="70%,*">
<FRAME NAME="nom1" SRC="[Link]">
<FRAME NAME="nom2" SRC="[Link]">
<FRAME NAME="nom3" SRC="[Link]">
<FRAME NAME="nom4" SRC="[Link]">
</FRAMESET>
</HTML>
[Link]
Imbrication de Frameset
<HTML> <HEAD> <TITLE> Les cadres </TITLE> </HEAD>
<FRAMESET COLS="33%,*">
<FRAME NAME="nom1" SRC="[Link]">
<FRAMESET ROWS="25%,*">
<FRAME NAME="nom2" SRC="[Link]" SCROLLING="no">
<FRAME NAME="nom3" SRC="[Link]" SCROLLING="yes">
</FRAMESET>
<NOFRAMES>
<BODY>
Contenu de votre document pour les utilisateurs qui naviguent sans les cadres.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
25%
33% 67%
75%
[Link]
Cadres avec pages cibles
<HTML> <HEAD> <TITLE> Les cadres, avec target</TITLE> </HEAD>
<FRAMESET COLS="40%,*">
<FRAME NAME="gauche" SRC="[Link]" SCROLLING="yes" NORESIZE>
<FRAME NAME="droite" SRC="[Link]" SCROLLING="yes">
</FRAMESET>
</HTML>
[Link], etc.
[Link] [Link]
<html> <head> <title>Page de Menu</title> </head>
<body> <center> <H3> Page de Menu </H3> </center>
Faites votre choix : <br>
<A Href="[Link]" Target="droite"> Voir la Page de départ</A>
<ol>
<li> <A Href="[Link]" Target="droite"> Voir la Page N°1</A>
<li> <A Href="[Link]" Target="droite"> Voir la Page N°2</A>
<li> <A Href="[Link]" Target="droite"> Voir la Page N°3</A>
<li> <A Href="[Link]" Target="droite"> Voir la Page N°4</A>
</ol>
</body> </html>
Les formulaires
La création d’une formulaire se fait avec la balise
<FORM ACTION="URL d'un script" METHOD="POST ou
GET">
// la description des différents éléments du formulaire
</FORM>
Avec ACTION on désigne le fichier qui devra être exécuté une fois
que l’utilisateur aura cliqué sur le bouton qui valide le formulaire.
Avec METHOD on précise le type de passage de paramètres : soit
POST, soit GET (POST est plus souvent utilisé et conseillé, pour
des raisons de sécurité).
Éléments de formulaire
Zone de saisie :
<INPUT NAME="identificateur de la zone" TYPE="Type de la zone">
Le TYPE peut être, notamment :
- text (type par défaut) = une ligne de saisie
- submit = le bouton de soumission du formulaire (validation)
- reset = le bouton d’annulation du formulaire (remise à zéro)
- radio = bouton radio (De 0 à N choix parmi N)
- checkbox = case à cocher (1 choix parmi N)
Pour créer une zone de texte, on utilise la balise textarea
Les types d’éléments de formulaire
Exemple de formulaire text
<HTML> <BODY>
Envoi du contenu du formulaire dans un <strong>mail</strong> destiné à
machine@[Link]
<FORM ACTION="[Link] METHOD="POST"
NAME="Envoi_Mail">
Taper votre message ici :
<input type="text" size="20" name="Commentaire">
<input type="submit" name="Bouton_Envoyer" value="Cliquer ici pour
Envoyer">
</FORM>
</BODY> </HTML>
[Link]
Exemple de formulaire text
<HTML> <BODY> <FORM> <PRE>
Votre Nom : <INPUT TYPE="text" NAME="Nom" SIZE="50">
Votre Courriel :<INPUT TYPE="text" NAME="E-mail" SIZE="50">
Votre Adresse : <INPUT TYPE="text" NAME="Adresse" SIZE="30">
<INPUT TYPE="text" NAME="suite_adresse" SIZE="30">
Votre CP : <INPUT TYPE="text" NAME="code postal" SIZE="5"
MAXLENGTH=5>
Votre Ville : <INPUT TYPE="text" NAME="ville" SIZE="50"> </PRE>
<INPUT TYPE=RESET VALUE="Tout effacer">
<INPUT TYPE=SUBMIT VALUE="OK, c'est parti">
</FORM> </BODY> </HTML>
[Link]
Exemple de formulaire textarea
<HTML>
<BODY>
<FORM METHOD=POST ACTION="fichier_destination.asp">
<TEXTAREA NAME="unNom" ROWS=5 COLS=40>
Contenu ...
</TEXTAREA>
<INPUT TYPE=SUBMIT VALUE="Envoyer le formulaire">
</FORM>
</BODY>
</HTML>
Formulaire_textarea.html
Exemple de formulaire radio
<HTML> <BODY>
<B>Votre mode de paiement</B>
<FORM>
<INPUT NAME="payer" TYPE="radio" VALUE="comptant">Comptant
<INPUT NAME="payer" TYPE="radio" VALUE="cheque">Chèque
<INPUT NAME="payer" TYPE="radio" VALUE="cc">Carte de
crédit
<BR>
<INPUT TYPE="RADIO" NAME="monnaie" VALUE="Francs"> En Francs
<INPUT TYPE="RADIO" NAME="monnaie" VALUE="Euros" CHECKED>
En Euros
</FORM> </BODY> </HTML>
formulaire_radio.html
Exemple de formulaire option
<HTML> <BODY>
<FORM>
<SELECT NAME="Club">
<OPTION VALUE="OM"> Marseille
<OPTION VALUE="PSG"> Paris
<OPTION VALUE="RC LENS"> Lens
<OPTION SELECTED VALUE="LOSC"> Lille
</SELECT>
</FORM>
</BODY> </HTML>
formulaire_choix.html
Exemple de formulaire sélection multiple
<HTML> <BODY> <FORM>
Quel type de Voiture ?
<SELECT MULTIPLE NAME="all">
<OPTION VALUE="Porsche"> Porsche
<OPTION VALUE="BMW"> BMW
<OPTION VALUE="FIAT"> FIAT
<OPTION VALUE="LOTUS"> LOTUS
<OPTION VALUE="autre"> Autre choix
</SELECT>
</FORM> </BODY> </HTML>
formulaire_autre_choix.html
Exemple de formulaire cases à cocher
<HTML> <BODY>
Vous aimez :
<FORM METHOD=GET ACTION="[Link]
<INPUT TYPE="CHECKBOX" NAME="aime" VALUE="Fric" CHECKED>
L'argent
<INPUT TYPE="CHECKBOX" NAME="aime" VALUE="Boire"> Bien Boire
<INPUT TYPE="CHECKBOX" NAME="aime" VALUE="Manger"> Bien manger
<INPUT TYPE="CHECKBOX" NAME="aime" VALUE="TV"> La télévision
<INPUT TYPE="CHECKBOX" NAME="aime" VALUE="Info"> L'actualité
<HR>
Vous n'aimez pas : <BR>
<INPUT TYPE="CHECKBOX" NAME="aimepas" VALUE="Fric"> L'argent
<INPUT TYPE="CHECKBOX" NAME="aimepas" VALUE="Foule"> La foule
<INPUT TYPE="CHECKBOX" NAME="aimepas" VALUE="Baston"> La violence
<INPUT TYPE="CHECKBOX" NAME="aimepas" VALUE="TV"> La télévision
<INPUT TYPE="CHECKBOX" NAME="aimepas" VALUE="Julien Lepers"
CHECKED> Julien Lepers
</FORM>
</BODY> </HTML>
[Link]
Exemple de formulaire cases à cocher + image
Même code que pour [Link] avec cette ligne en plus
avant le </FORM> :
<INPUT TYPE=IMAGE NAME=image-valider
SRC="[Link]">
[Link]
Exemple de formulaire password
<HTML> <BODY>
<FORM METHOD=POST ACTION="[Link]">
Entrez votre login :
<INPUT TYPE=Text NAME="login" SIZE=30>
<BR>
Entrez votre mot de passe :
<INPUT TYPE=PASSWORD NAME="motdepasse" SIZE=30>
<BR>
<INPUT TYPE=reset Value="RAZ">
<INPUT TYPE=submit Value="VALIDER">
</FORM>
</BODY> </HTML>
[Link]
Exemple de formulaire file
<HTML> <BODY>
<FORM METHOD=GET ACTION="[Link]
<INPUT TYPE=FILE NAME=Telechargement>
</FORM> </BODY> </HTML>
[Link]
DIV
La <div>balise définit une division ou une section dans un document HTML.
La <div>balise est utilisée comme conteneur pour les éléments HTML - qui sont
ensuite stylisés avec CSS ou manipulés avec JavaScript.
La <div>balise est facilement stylisée à l'aide de l'attribut class ou id.
N'importe quel type de contenu peut être placé à l'intérieur de la <div> balise !
Remarque : Par défaut, les navigateurs placent toujours un saut de ligne avant et après
l' <div>élément.
Exemple :
<div style="border:1px solid red">
<h2>Ce ci un élément H2 dans un div</h2>
<p>Ce ci un élément p dans un div.</p>
</div>
L'attribut HTML id est utilisé pour spécifier un identifiant unique pour un élément HTML.
Vous ne pouvez pas avoir plus d'un élément avec le même identifiant dans un document
HTML.
Exemple : <h1 id="Header">My Header</h1>
L'attribut HTML class est utilisé pour spécifier une classe pour un élément HTML.
Plusieurs éléments HTML peuvent partager la même classe.
Exemple : <h1 class="Header">My Header</h1>
<div class="Header">Je suis un DIV</div>
