Cours 02
Le langage HTML
[Link]@[Link]
Document HTML
(« Hyper-Text Markup Language »)
Un document HTML est un hypertexte décrit à l'aide du langage HTML.
Un hypertexte est un texte contenant des hyperliens.
Unhyperlien est un élément particulier (mot/image) sur lequel on clique
pour se déplacer vers :
un autre emplacement du document,
un autre document sur le même site,
un document sur un autre site WEB,
un autre service Internet (mail, ftp… )
HTML
Fichier html
Exemple
interprété
brut
<html>
<head>
<title>ma premiere page</title>
<meta http-equiv="Content-Type" content="text/html" />
</head>
<body>
<h1>Page Web</h1>
<p>Ma première page.</p>
</body>
</html>
Le langage HTML
Le langage HTML permet la :
mise en forme de documents : polices, styles.. Tableaux,listes,…
création d'hyperliens
insertion d'images
insertion de composants multimedia : son, vidéo...
définition de formulaires de saisie .
……..
Le Web et HTML
HTML est un langage informatique dont le principe de base
repose sur l’utilisation de balises (tags ) 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>
<HEAD>
<TITLE> Titre de votre page </TITLE>
</HEAD>
<BODY>
Insérer vos textes, images, formulaires,
etc. ici
</BODY>
</HTML>
Retour à la ligne : <BR>
<HTML>
<HEAD><TITLE> saut de ligne </TITLE> </HEAD>
<BODY>
la 1ére ligne
encore la 1ère ligne
toujours la 1 ère ligne
<BR>
la 2ème ligne <BR> la 3ème ligne
</BODY>
</HTML>
Commentaires
<html>
<head> <title>Commentaires </title>
</head>
<body>
<!-- Ceci est un commentaire inséré dans le code mais
invisible pendant la navigation -->
</body>
</html>
Les paragraphes <P> </P>
Les balises <P> et </P> définissent le début et la fin
d’un paragraphe
Le paramètre align indique l’alignement du paragraph
(left, right, center).
Les paragraphes <P> </P>
<HTML>
<HEAD> <TITLE> Paragraphe </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) ou <STRONG> et </ STRONG >
• Italique : <I> et </I>
•Souligné : <U> et </U> (pour Underlined)
• Police plus grande : <BIG> et </BIG>
• Police plus petite : <SMALL> et </SMALL>
• Texte barré : <STRIKE> et </STRIKE> ou <S> et </S>
• Indice : <SUB> et </SUB>
• Exposant : <SUP> et </SUP>
Mise en forme
<html>
<head><title> Mise en form </title></head>
<body >
<B> c'est Gras </B> <br>
<I> c'est Italique </I> <br>
<U> Souligné </U> <br>
<BIG> Police plus grande </BIG> <br>
<SMALL> Police plus petite </SMALL> <br>
<STRIKE> Texte barré </STRIKE> <br>
A<SUB> Indice </SUB> <br>
A<SUP> Exposant </SUP>
</body>
</html>
Mise en forme de texte (suite)
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 RGB (#004422).
Exemple
<html>
<head> <title> Mise en form du texte </title></head>
<body >
<FONT FACE="Arial" SIZE="5" COLOR="red">
Un texte Arial Rouge
</FONT>
<br>
<FONT FACE="times" SIZE="3" COLOR="blue">
Un texte Time Times new roman
</FONT>
</body>
</html>
Mise en forme de texte les titres
Il y a 6 niveaux de titres.
<H1> et </H1> grand
<H2> et </H2>
<H3> et </H3>
………..
jusqu’à <H6> et </H6> (petit)
Exemple
<html>
<head> <title> Titres </title> </head>
<body >
<H1> Titre 1 </H1>
<H2> Titre 2 </H2>
<H3> Titre 3 </H3>
<H4> Titre 4 </H4>
<H5> Titre 5 </H5>
<H6> Titre 6 </H6>
</body>
</html>
Centrer du texte
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>
Listes ordonnées
<OL>
<LI> Valeur1 </LI>
<LI> Valeur2 </LI>
<LI> Valeur3 </LI>
</OL>
On peut préciser le type (A, a, 1, i, I). Exemple :
<OL TYPE="A">
On peut faire démarrer à une valeur précise. Exemple :
<OL START=2000>
Listes non ordonnées
<UL>
<LI> Valeur1 </LI>
<LI> Valeur2 </LI>
<LI> Valeur3 </LI>
</UL>
On peut préciser le type de « puces » (disc, circle, square)
Exemple : [Link]
<html>
<head> <title> Format Open source </title></head>
<body bgcolor="#00FF55">
<h2>Quelques formats de données libres</h2>
<p>L'utilisation de ces formats n'est pas limitée par
l'existence de brevets connus.</p>
<ul type="square">
<li> Audio : Vorbis, FLAC</li>
<li> Compression : gzip, bzip2, lzma </li>
<li> Image : PNG, SVG, MNG</li>
<li> Tableur : [Link] (.ods)</li>
<li> Texte : ASCII (.txt) </li>
<li> Texte formaté : TeX, [Link] (.odt) </li>
<li> Video : Matroska (.mkv), XviD, Theora </li>
</ul>
</body>
</html>
Exemple [Link]
Les images
L’insertion d’une image dans une page Web se fait grâce à la
balise
<IMG SRC="nom du fichier">
(IMG SRC pour Image Source).
L’attribut ALT permet de décrire l’image. Cette description
est visible lorsque l’on passe sur l’image.
L’argument ALIGN définit l’alignement de l’image sur la
page.
Exemple :
<img src= ‘images/[Link]’ alt=‘Tux fan’ >
Images
<img src="[Link]" />
<img src="[Link]" />
<img src="[Link]" />
JPEG : avec perte, pour les photos
GIF : sans perte, pour les illustrations
PNG : sans perte, plus de couleurs.
Exemple : [Link]
<html>
<head><title>Tux Fan</title></head>
<body bgcolor="#FFFFFF">
<img src="images/[Link]" alt="Entete de site">
</body>
</html>
Les tableaux < TABLE>
<TABLE Border=N Align="center">
<TR>
<TD>Donnée N°1</TD> <TD> Donnée N°2</TD>
</TR>
</TABLE>
<TR> correspond à une ligne du tableau
<TD> correspond à une donnée (une cellule) du tableau
Exemple : [Link]
<html>
<head>
<title>Menu</title>
</head>
<body bgcolor="#FFFFFF">
<TABLE border=1 ALIGN="center">
<TR> <TD>Home </TD> </TR>
<TR> <TD>News </TD> </TR>
<TR> <TD>Links </TD> </TR>
<TR> <TD>Contact</TD> </TR>
</TABLE>
</body>
</html>
Exemple : [Link]
<TABLE border=0 ALIGN="center">
<TR>
<TD width=20% ><h2>Tux Fan</h2></TD>
<TD><b>Le site des fanatiques de Tux</b></TD>
</TR>
<TR>
<TD width=20% >
Home<br>
News<br>
Links<br>
Contact<br>
</TD>
<TD> L' Open Source Initiative est une organisation
dévouée à la promotion du logiciel Open Source. Elle a
été créée par Bruce Perens et Eric S. Raymond.
</TD>
</TR>
</TABLE>
[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>
Les hyperliens
La balise <A> </A> sert à définir un hyperlien (une ancre
hypertextuelle) dans une page Web.
Format : <A HREF= "Chemin du document"> Texte qui
sera souligné </A>
Exemples :
<A HREF="[Link]
<A HREF="[Link]"> Formation </A>
Exemple : [Link]
<h2> Open Source </h2>
<a href="[Link]" >Formats libres</a> <br>
<a href="[Link]">
Open source initiative
</a><br>
<a href="[Link]" >links</a><br>
<a href="[Link]">contact</a><br>
<a href="[Link]
search on google
</a><br>
Les hyperliens
Pour qu’une image soit un hyperlien, il suffit d’écrire :
<A HREF="page cible"> <IMG SRC= "fichier image"> </A>
Exemples :
<A HREF="[Link]
<IMG SRC="[Link]">
</A>
