Vous êtes sur la page 1sur 15
(2é année) AU : 2017/2018 Pr : Laila Alami LE LANGAGE HTML Hyper Text Markup
(2é année) AU : 2017/2018 Pr : Laila Alami LE LANGAGE HTML Hyper Text Markup

(2é année) AU : 2017/2018 Pr : Laila Alami

LE LANGAGE HTML

Hyper Text Markup Language

SOMMAIRE

Avant Propos

2

1. Structure d’une page HTML

2

2. Notion de Balise

3

3. Balises

de mise en forme

3

4. Indices et exposants

5

5. Justification

5

6. Les listes

5

7. Les

tableaux

6

7.1. Balises simples de tableau

6

7.2. Options de la table

6

7.3. Options des cellules:

7

8. Images

8

9. Les liens hypertextes

8

10. Adresse relative et adresse Absolue

9

11. Options de la

balise body

10

12. Organisation

du texte

10

12.1. Les

paragraphes

10

12.2. Les

titres

10

<H3>Mon texte</H3>

12.3. Les séparateurs

10

11

13. Les caractères spéciaux

11

14. Les frames

 

12

15. Map, area et images réactives

13

16. La

balise

audio

13

17. La

balise

vidéo

14

 

1

Avant Propos

HTML est le langage de balisage hypertexte utilisé dans le Web (HyperText Markup Language). Votre information sera ainsi transportée sur cette gigantesque toile de réseaux interconnectés qu'est Internet, pour aboutir sur l'ordinateur de votre lecteur grâce à un programme appelé navigateur ou browser.

Ce logiciel, que l'on appelle un browser, vous permet de surfer sur le Net et d'afficher sur

votre écran les "pages" qu'il a interceptées. Il y a, hélas, beaucoup de marques et de types de

Les plus connus sont

Google Chrome, Netscape ainsi Internet Explorer de Microsoft mais il en existe beaucoup d'autres.

browsers différents. Des simples, des archaïques ou des sophistiqués

Chaque browser a sa propre façon de travailler.

A la différence de votre traitement de texte préféré qui restitue exactement votre document sur

une feuille de papier avec votre police de caractères et votre mise en page, vous ne saurez jamais exactement ce que le browser de votre lecteur du bout du monde affichera sur l'écran

de celui-ci.

HTML n'est pas un langage de programmation dans le sens ou il n’existe pas de variables, boucles, expressions conditionnelles, …

Il utilise "simplement" des balises pour mettre en forme (avec des liens, en tableau, etc

texte et des images.

) du

Pour avoir une idée de l'aspect d'une page écrite en HTML, cliquez sur "Affichage" (ou "View") dans votre navigateur, puis sélectionnez "page source".

Pour créer une page Web en HTML, nous avons besoin de:

pour visualiser le résultat;

2. Un éditeur HTML (Notepad ou WordPad) pour créer votre page HTML;

1. Un navigateur (google Chrome, Netscape,

),

A condition de sauvegarder le fichier ainsi créé au format texte, avec une extension .html (ou

.htm pour les versions de Windows antérieures à Windows 95).

NB: vous n'aurez pas besoin d'être connecté à Internet pour créer votre page Web.

1. Structure d’une page HTML

<html>

< !--- première balise d’un fichier HTML--- !>

<head>

< !--- entête --- !>

<title> Mon titre </title> < !--- titre --- !>

</head>

<body> < !--- corp : tout le document à afficher contenant texte, images,… --- !> Voici mon premier document! </body> </html> < !--- dernière balise d’un fichier HTML--- !>

Le document doit être sauvegardé avec l'extension ".htm" ou ".html".

Un double-clique sur le document : le navigateur par défaut sera alors ouvert sur la page.

Remarque :

<!-- ceci est un commentaire dans mon fichier HTML --> <!-- il n'apparaitra donc pas dans le texte de mon document -->

2. Notion de Balise

Une balise est une "instruction" comprise entre les signes < et > qui possède un nom et parfois des attributs.

La balise <Br> par exemple, permet de spécifier qu'il faut passer à la ligne.

La plupart des balises doivent être ouvertes puis fermées (début et fin).

Ouverture

:

<nomBalise>

Fermeture

:

</nomBalise>

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: nomAttribut="valeur"

3. Balises de mise en forme

Gras

<B>

</B>

Début et fin de zone en gras

<STRONG>

</STRONG>

 

Italique

<I>

</I>

Début et fin de zone en italique

<EM>

</EM>

Taille de

<FONT SIZE=?>

</FONT>

 

Début et fin de zone avec cette taille

caractère

 

Couleur de

<FONT COLOR="#$$$$$$"></FONT>

Début et fin de zone en couleur

caractère

A la ligne

<BR>

Aller à la ligne

Centrage

<CENTER></CENTER>

 

Centrer

ACRONYM

<ACRONYM

 

Afficher la signification d'une abréviation lorsqu'elle est survolée par le curseur

TITLE="signification

">

acronyme

</ACRONYM>

Exemple Couleur

<font color="red">Mon texte</font> <font color="#FF0000">Mon texte</font>

Le premier exemple est utilisable pour quelques couleurs prédéfinies: red, green, black Sinon, on peut utiliser le code commençant par #, basé sur le système "RGB" (Red-Green- Blue): les 2 premiers chiffres (en base 16, donc allant de 0 à F) fournissent le taux de rouge, les 2 suivants le taux de vert, et les 2 derniers le taux de bleu.

Par exemple, si vous voulez obtenir du rose, mélange du rouge et du bleu, tapez

<font color="#FF00FF">Mon texte</font>

Code de couleurs - extrait

Bleu

#0000FF

Vert

#00FF00

Blanc

#FFFFFF

Violet

#8000FF

Rouge

#FF0000

Jaune

#FFFF00

Gris clair

#C0C0C0

Noir

#000000

Exemple Taille

Taille absolue (de 1 à 7):

<font size=1>Mon texte</font> <font size=2>Mon texte</font> <font size=3>Mon texte</font> <font size=4>Mon texte</font>

<font size=5>Mon texte</font>

<font size=6>Mon texte</font>

<font size=7>Mon

Ou taille relative:

texte</font>

<font size=-2>Mon texte</font> <font size=-1>Mon texte</font> <font size=+1>Mon texte</font>

<font size=+2>Mon texte</font>

4.

Indices et exposants

<SUB>indice</SUB> Exemple H<SUB>2</SUB>O

donne : H 2 O

<SUP>exposant</SUP> Exemple : X<SUP>n</SUP> donne X n

5. Justification

Justification à droite

<DIV ALIGN="right"> texte ou objets

</DIV>

Justification centrée

<DIV ALIGN= "center"> texte ou objets

</DIV>

Justification à gauche

<DIV ALIGN=" left"> texte ou objets

</DIV>

6. Les listes

<OL>

correspond aux listes numérotées (Ordered List);

<UL>

correspond aux listes à puces (Unordered List);

<LI>

sert à spécifier qu'on démarre un nouvel élément de liste;

à noter que </LI> existe également, mais n'est pas nécessaire, car supposé à l'ouverture du <LI> suivant, ou à la fermeture de liste </UL>

Exemple :

<html> <head> <title> Les mois de l’année </title> </head> <body> <H1>Les mois du Printemps</H1>

<UL>

<LI>avril

<LI>mai

<LI>juin

</UL> <H3>Les mois de l’automne</H3>

<OL>

<LI>octobre

<LI>novembre

<LI>décembre

</OL>

</body>

</html>

Le résultat :

<LI>novembre <LI>décembre </OL> </body> </html> Le résultat : 5

7. Les tableaux

L'usage des tableaux est très fréquent. Ils servent à aligner des chiffres mais surtout à placer des éléments à l'emplacement que vous souhaitez. Un tableau est composé de lignes et de colonnes qui forment les cellules du tableau.

7.1. Balises simples de tableau

<TABLE> et </TABLE> servent respectivement à ouvrir une nouvelle table, et fermer la table courante;

<TR> et </TR> servent à définir une ligne du tableau;

<TD> et </TD> servent à définir une cellule du tableau (à noter que </TD> n'est pas indispensable, pour la même raison que </LI>).

<TH> et </TH> servent à définir un titre de ligne ou de colonne (le texte apparait alors centré en gras dans la cellule correspondante);

<CAPTION> et </CAPTION> servent à définir un titre pour le tableau.

Exemple :

Code HTML

Résultat Obtenu

<table> <caption>Mon titre</caption> <tr> <th>Nom 1 <th>Nom 2 </tr><tr> <td>Cellule 1 <td>Cellule 2 </tr> </table>

Mon titre

Nom 1

Nom 2

Cellule 1 Cellule 2

7.2. Options de la table

Border

: spécifie l'épaisseur du cadre extérieur, en pixels. Avec la valeur 0, le cadre est

Cellspacing

invisible; : épaisseur en pixels autours de chaque cellule;

Cellpadding

: épaisseur en pixels entre l'élément de la cellule et le cadre;

Width

: largeur occupée par le tableau en pixels ou en pourcentages;

Align

: l'alignement du tableau: center, right ou left.

Exemple En remplaçant la balise <table> de l'exemple précédent par: <table border=1 cellpadding=2

Exemple

Exemple En remplaçant la balise <table> de l'exemple précédent par: <table border=1 cellpadding=2

En remplaçant la balise <table> de l'exemple précédent par:

<table border=1 cellpadding=2 cellspacing=5>, on obtient:

Mon titre Nom 1 Nom 2 Cellule 1 Cellule 2
Mon titre
Nom 1
Nom 2
Cellule 1
Cellule 2

7.3. Options des cellules:

<Td colspan=2> <Td rowspan=2>

Exemple :

: fusion horizontale de 2 cellules; : fusion verticale de 2 cellules.

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

Résultat :

2</TD> <TD width=34%>3</TD> </TR> </TABLE> </CENTER> Résultat : 7

8.

Images

<IMG SRC="chemin_d_acces_a_l_image">

Attributs:

Align

Align = top / middle / botton / left / right Width : longueur Height : hauteur

Alt

: alignement désiré de l'image (de même que pour les tableaux)

: texte associé à l'image (apparait quand la souris passe au dessus, ou en remplacement de l'image si celle-ci n'existe pas)

Border = ? (en pixels)

9. Les liens hypertextes

<A HREF="chemin_d_acces_a_la_page">Texte du lien</A>

Liens à l'intérieur d'une même page:

Placer: <a name="myRef"></a> à l'intérieur de votre document

<a href="#myRef">Texte du lien</a> désigne alors l'emplacement nommé « myref »

A utiliser par exemple en bas de page pour proposer de revenir en haut de page.

Les chemins d'accès peuvent être:

Absolu : c'est-à-dire qu'on spécifie l'adresse complète de ce à quoi on fait référence:

par exemple C:/images/monImage.gif pour une image, ou http://www.google.fr pour un site;

Relatif

: la référence est faite par rapport à l'endroit où l'on se trouve:

"."

désigne le répertoire courant,

"

"

désigne le répertoire père

Par exemple

"." désigne le répertoire courant, " " désigne le répertoire père Par exemple 8

10. Adresse relative et adresse Absolue

Exemple1 : Le fichier deux.html se trouve dans le répertoire « yasmin » Etablir un lien dans le fichier un.html vers le fichier deux.html:

lien dans le fichier un.html vers le fichier deux.html : Exemple2 : Le fichier un.html se

Exemple2 : Le fichier un.html se trouve dans le répertoire « temp » Etablir un lien dans le fichier deux.html vers le fichier un.html :

lien dans le fichier deux.html vers le fichier un.html : Exemple3 : Le fichier un.html se

Exemple3 : Le fichier un.html se trouve dans le répertoire « temp » Etablir un lien dans le fichier un.html vers le fichier trois.html :

se trouve dans le répertoire « temp » Etablir un lien dans le fichier un.html vers

11.

Options de la balise body

Les principales options de la balise body:

Attribut

Signification

bgcolor

Couleur de fond de page

background

Image de fond de page

text

Couleur du texte

Bordercolor

Couleur de bordure

border

Dimension de la bordure

width

Permet de changer la largeur

height

Permet de changer la hauteur

Align

Précise l’alignement (left, center, right)

12. Organisation du texte

12.1. Les paragraphes

<p> paragraphe</p>

<p align=justify>paragraphe</p> <p align=left>paragraphe</p> <p align=center>paragraphe</p> <p align=right>paragraphe</p>

12.2. Les titres

de <H1> à <H6>:

<H1>Mon texte</H1>

<H2>Mon texte</H2>

<H3>Mon texte</H3>

<H4>Mon texte</H4>

<H5>Mon texte</H5>

<H6>Mon texte</H6>

12.3. Les séparateurs

<HR size=?>

Epaisseur en pixels

<HR width=?>

Largeur en pixels

<HR width="%">

Largeur en % de la fenêtre

<HR align=left>

Alignement gauche

<HR align=right>

Alignement droite

<HR align=center>

Alignement centré

Exepmle :

<HR width="50%">

centré Exepmle : <HR width="50%"> 13. Les caractères spéciaux Les caractères tels < et

13. Les caractères spéciaux

Les caractères tels < et > étant interprétés par votre navigateur comme marqueurs de balises, Pour cela, il existe les caractères spéciaux. Ceux-ci commencent par le signe "&" et finissent par un point-virgule ";".

&lt; pour: <

&gt; pour: >

&amp; pour: &

&quot; pour: "

Cette liste est également utile pour afficher des caractères n'existant pas sur notre clavier. Ainsi, par exemple, pour obtenir le caractère €, il faut écrire &euro;

De plus dans certaines versions il faut remplacer les caractères accentués:

€, il faut écrire &euro; De plus dans certaines versions il faut remplacer les caractères accentués:

14. Les frames

Permettent de diviser l'écran en plusieurs fenêtres, les balises de division sont :

<FRAMESET>

</FRAMESET>

Les attributs ROWS, COLS permettent d’indiquer si les frames sont horizontales ou verticales :

<FRAMESET ROWS="

">

Fenêtres horizontales

<FRAMESET COLS="

">

Fenêtres verticales

Pour remplir les frames

<FRAME SRC="URL ou adresse du document à afficher dans la fenêtre">

Exemple : On suppose trois fichiers A.html contenant « A », le fichier B.html contenant « B » et le fichier C.html contenant « C »,

RESULTAT : Fichier index.html <HTML> <HEAD> <TITLE>Frames</TITLE> </HEAD>
RESULTAT :
Fichier index.html
<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<FRAMESET ROWS="30%,70%">
<FRAME SRC="A.html">
<FRAMESET COLS
="30%,70%">
<FRAME
SRC="B.html">
<FRAME
SRC="C.html">
</FRAMESET>
</FRAMESET>
</HTML>

Remarque : Un fichier contenant des frames ne doit pas contenir la balise <BODY>

Référence entre pages

Name : Indique le nom de la fenêtre de telle sorte que cette frame puisse être utilisée comme cible d'un lien hypertexte.

Exemple : Dans le fichier index.html : <FRAME SRC="C.htm" NAME=“Cible">

On met un lien vers D.htm dans le fichier B.htm en désignant comme cible la frame C :

<HTML><BODY> <A HREF=“D.htm" TARGET=“Cible"><H1>B</H1></A> </BODY></HTML>

15.

Map, area et images réactives

<img src="monImage.jpg" usemap="#mymap" width="300" height="50"> <map name="mymap"> <area shape="rect" coords="0,0,100,50" href="page1.html" alt="zone 1"> <area shape="rect" coords="100,0,200,50" href="page2.html" alt="zone 2"> <area shape="rect" coords="200,0,300,50" href="page3.html" alt="zone 3"> </map>

3 types de formes peuvent être utilisés:

La forme rectangulaire, comme dans l'exemple :

shape="rect" → coords="left-x, bottom-y, right-x, top-y"

La forme sphérique :

shape="circle" → coords="center-x, center-y, radius"

Ou la forme polygonale :

shape="poly" → coords="x1, y1, x2, y2,

, xN, yN"

16. La balise audio

La balise <audio> permet de lire des fichiers sons ou des flux audio directement dans la page en proposant un lecteur intégré avec des contrôles génériques tels que lecture, pause et contrôle du volume. Lorsque le fichier audio n'est pas trouvé ou que son format n'est pas supporté, le lecteur n'est pour certains navigateurs pas visibles.

Exemple :

<audio controls="controls"> <source src="chanson.ogg" type="audio/ogg" /> <source src="chanson.mp3" type="audio/mp3" /> Votre navigateur ne supporte pas la balise AUDIO. </audio>

La balise <source> permet de définir au sein de l'élément <audio> plusieurs ressources alternatives au cas où le navigateur ne supporte pas le format initialement spécifié dans l'attribut "src" (il faut alors supprimer l'attribut "src" et spécifier les différents fichiers par ordre de priorité dans les balises <source>).

Le support des formats audio les plus courants par les navigateurs est le suivant :

 
 
 
 
 
 

V 14 et +

V 20 et +

V. 9

V 5.1 et +

12 et +

mp3

mp3
mp3
mp3
mp3
mp3

ogg

ogg
ogg
ogg
ogg
ogg

wav

wav
wav
wav
wav
wav

Remarque : la balise object permet également de lire des fichiers audio, et prend parfois en charge certains formats non supportés par la balise <audio> (comme le mp3 avec Firefox par exemple).

Propriétés :

Attribut

Valeur

Description

autoplay

autoplay

Indiquez si la lecture doit se lancer automatiquement

controls

controls

Indiquez si les boutons de controls (lecture, arret …) doivent apparaitre

loop

Loop

Indiquez si le fichier doit redémarrer (boucle) lorsque sa lecture est terminée

 

auto

 

preload

metadata

Indiquez si et comment les fichiers seront pré-chargés

none

Src

url

Indiquez l’adresse de voter fichier audio

17. La balise vidéo

L'élément <video> offre en HTML5 une solution simple, native pour les navigateurs pour l'intégration d'une vidéo dans une page web. Syntaxe : <video controls src="video.org">Ici la description alternative</video>

Sources multiples

On peut également proposer plusieurs sources dans plusieurs formats différents en indiquant les types MIME grâce à l'attribut type :

<video width = "400" height "200" controls ="controls"> <source src="video.mp4" type="video/mp4" /> <source src="video.webm" type="video/webm" /> <source src="video.ogv" type="video/ogg" /> Ici l'alternative à la vidéo : un lien de téléchargement, un message, etc. </video>

Les navigateurs ne pouvant pas lire le MP4/H.264 ni la version WebM nativement (comme Firefox 3.6 par exemple) prendront la version au format Ogg Theora. Cela vous oblige néanmoins à encoder le fichier avec différents codecs.

Les propriétés autoplay, controls, loop, preload et src sont les mêmes que celles utilisées pour la balise audio, il faut ajouter l'attribut Poster = "image.jpg" : une image à afficher par défaut dans l'espace réservé par la vidéo, avant que la lecture de celle-ci ne soit lancée.