Chapitres :
- 01 - Introduction :
- 02 - Info :
- 03 - Donner un titre à votre page HTML :
- 04 - Insérer du texte dans votre page HTML :
- 05 - Les paragraphes :
- 06 - Allez à la ligne :
- 07 - Créer un titre de chapitre :
- 08 - Créer un filet horizontal :
- 09 - Révision des balises <P>, <BR>, <Hn> et <HR> :
- 10 - Définir une couleur de fond :
- 11 - Définir une couleur de texte :
01 - Introduction :
Une page HTML se compose de quatre balises indispensables :
- La balise <HTML></HTML> qui contient toutes les autres balises. Dans tous les cas, votre document source doit commencer par <HTML> et se finir par </HTML>.
- La balise <HEAD></HEAD> qui définit l'en-tête du document. On y place des informations qui ne sont pas visibles dites métas informations.
Par exemple, des scripts, des feuilles de styles, des informations sur l'auteur de la page, et sur la page en elle même.
- La balise <TITLE></TITLE> qui se trouve dans la balise <HEAD> nomme la page, c'est le seul élément visible qui se trouve dans l'en-tête.
- La balise <BODY></BODY> contient toutes les informations qui seront visibles, c'est le corps de votre document.
Voici comment elles sont organisées dans le code de la page Html :
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Nota : Le panneau réductible ci-dessus, se développe et se referme en cliquant dessus.
Une autre balise est insérée avant le code ci-dessus, c'est la DTD (Document Type Definition). La DTD (Définition de type de document) spécifie le langage utilisé par votre document.
Il existe plusieurs DTD pour le HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtmlxml:lang="fr" lang="fr">
02 - Info :
- Le XHTML s'étant rapproché du XML, il devient sensible à la casse, c'est à dire que vous ne pouvez plus écrire :<p></P>, mais vous devez écrire : <p></p>.
- Il faut maintenant tout écrire en minuscule (balise et attribut)
- Cependant, si par hasard vous faites une faute, cela ne devrait pas gêner l'affichage de votre page.
- Il se peut que dans mes cours, le nom des balises soit en majuscule, par oublie ou pour les mettre en avant.
- Chaque caractère spécial doit être encodé. Par exemple é doit s'écrire é
03 - Donner un titre à votre page HTML :
Maintenant, donnez un Titre à votre page web entre <TITLE> et </TITLE>.
<title> Votre Titre </title>
04 - Insérer du texte dans votre page HTML :
Nous allons à présent voir comment introduire du texte dans notre page HTML et observer comment il réagit. Voici du texte.
Faites un copier-coller du texte ci-joint entre <BODY> et </BODY>.
Lancer votre navigateur pour visualiser le résultat
Réduisez et augmentez la fenêtre, et observer le texte. Le texte se reformate suivant la taille de la fenêtre, c'est un élément à retenir lors de la conception de votre page. Pour ne plus avoir ce problème, il faut insérer votre texte dans un tableau de taille fixe.
<div style="width:400px">Le texte</div>
ou
<table width="350">
<tr>
<td>Le texte</td>
</tr>
</table>
05 - Les paragraphes :
Nous allons maintenant structurer le texte en créant des paragraphes.
Voici du texte.
Le paragraphe se détermine grâce à la balise <p> </p>.
Mettez après la balise <BODY> la balise <p>, copiez/collez le texte ci-joint et mettez à la fin du texte </p>.
Recommencez la manoeuvre à la suite.
Lancer votre navigateur pour visualiser le résultat
Vous avez maintenant deux paragraphes.
La balise <p> génère un saut de ligne qui peut varier suivant le navigateur, c'est son inconvénient.
Il est tout à fait possible de justifier le texte d'un paragraphe grâce à l'attribut ALIGN
<p style="text-align:right">Le texte</p>
06 - Allez à la ligne :
Pour éviter les sauts de ligne, la balise <br /> qui ne possède pas de balise de fin, est très utilisée.
Copier-coller le texte et mettez à la fin <br /> et coller le texte une seconde fois.
Lancer votre navigateur pour visualiser le résultat
Vous pouvez très bien insérer entre <p> et </p> une balise <br />.
07 - Créer un titre de chapitre :
Maintenant que vous savez créer des paragraphes, il nous reste à leur donner un titre.
C'est la balise <Hn> </Hn> qui le permet. Le "n" est un chiffre comprit entre 1 et 6 qui détermine la taille du titre. 1 est la plus grosse taille.
<H1> votre titre </H1>
Copiez, collez du texte à la suite.
Puis à la suite recommencez la manipulation en remplaçant <H1> par <H6>.
Vous observez que <Hn> génère un saut de ligne important. Je vous conseille fortement de "bannir" (si vous n'arrivez pas à gérérer les marges) la balise <Hn> au profit de la balise <BR> et la balise <FONT> qui sont plus maniables. Nous étudierons la balise html <FONT> dans le cours "Le texte".
08 - Créer un filet horizontal :
Je parle dans ce chapitre du filet horizontal, car il est très pratique pour séparer de chapitre, cela donne plus de clarté au document HTML. Il est très utilisé aussi pour marquer la fin du document ou séparer des parties.
Le texte <HR>
Copiez, collez du texte (Voici du texte) et taper <HR> (<HR> est une balise simple).
09 - Révision des balises <P>, <BR>, <Hn> et <HR>:
Cet exercice permet de revoir les bases de <P> (Paragraphe) <BR> (rupture de ligne) <Hn> (Taille du texte) et <HR> (Filet horizontal) il vous faut recréer "La page HTLM à recréer"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Filet Horizontal</title>
</head>
<body>
<h3>C'est le titre de mon chapitre</h3>
<P align="right"> <!-- P pour paragraphe align=right pour forcer le paragraphe à s'aligner à droite de la page --> Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.<BR>
Eros Et Accumsan dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend
option congue nihil imperdiet doming id quod mazim. Nos arsapiente delectus
au aut prefer endis dol tene sententiam, quid est cur verear ne ad eam nc quos
tu paulo ante memorite tum etia ergat.</P>
<hr width="50%" align="right"> <!-- Width= Longueur du filet horizontal align= force le <hr> à droite du document -->
<h5>C'est le titre de mon second chapitre</h5>
<P align="center"> <!-- P pour paragraphe align=center pour forcer le paragraphe à se centrer sur la page --> Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.<BR> <!-- La balise HTML < BR> permet de faire une rupture de ligne(force à aller à la ligne).<BR>La balise HTML BR est une balise simple, c'est à dire qu'elle n'a pas de balise fermeture.Contrairement à la Balise <P>, la balise HTML <BR> ne saute pas de ligne. -->
Eros Et Accumsan dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.<BR> <!-- <BR> est une balise simple pas de fin de BR -->
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming
id quod mazim.<BR>
Nos arsapiente delectus au aut prefer endis dol tene sententiam, quid est cur
verear ne ad eam nc quos tu paulo ante memorite tum etia ergat.</P>
<hr>
</body>
</html>
10 - Définir une couleur de fond :
Une page HTML n'est pas forcément blanche. Vous pouvez lui donner toutes les couleurs que vous désirez.
Pour cela, il faut introduire l'attribut BGCOLOR dans la balise <BODY>
Ce qui nous donne pour une couleur de fond noir
<BODY bgcolor="Black"> ou <BODY bgcolor="#000000">.
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| aliceblue | F0F8FF | antiquewhite | FAEBD7 | aqua | 00FFFF | |||||
| aquamarine | 7FFFD4 | azure | F0FFFF | beige | F5F5DC | |||||
| bisque | FFE4C4 | black | 000000 | blanchedalmond | FFEBCD | |||||
| blue | 0000FF | blueviolet | 8A2BE2 | brown | A52A2A | |||||
| burlywood | DEB887 | cadetblue | 5F9EA0 | chartreuse | 7FFF00 | |||||
| chocolate | D2691E | coral | FF7F50 | cornflowerblue | 6495ED | |||||
| cornsilk | FFF8DC | crimson | DC143C | cyan | 00FFFF | |||||
| darkblue | 00008B | darkcyan | 008B8B | darkgoldenrod | B8860B | |||||
| darkgray | A9A9A9 | darkgreen | 006400 | darkkhaki | BDB76B | |||||
| darkmagenta | 8B008B | darkolivegreen | 556B2F | darkorange | FF8C00 | |||||
| darkorchid | 9932CC | darkred | 8B0000 | darksalmon | E9967A | |||||
| darkseagreen | 8FBC8F | darkslateblue | 483D8B | darkslategray | 2F4F4F | |||||
| darkturquoise | 00CED1 | darkviolet | 9400D3 | deeppink | FF1493 | |||||
| deepskyblue | 00BFFF | dimgray | 696969 | dodgerblue | 1E90FF | |||||
| firebrick | B22222 | floralwhite | FFFAF0 | forestgreen | 228B22 | |||||
| fuchsia | FF00FF | gainsboro | DCDCDC | ghostwhite | F8F8FF | |||||
| gold | FFD700 | goldenrod | DAA520 | gray | 808080 | |||||
| green | 008000 | greenyellow | ADFF2F | honeydew | F0FFF0 | |||||
| hotpink | FF69B4 | indianred | CD5C5C | indigo | 4B0082 | |||||
| ivory | FFFFF0 | khaki | F0E68C | lavender | E6E6FA | |||||
| lavenderblush | FFF0F5 | lawngreen | 7CFC00 | lightpink | FFB6C1 | |||||
| lightsalmon | FFA07A | lightseagreen | 20B2AA | lightskyblue | 87CEFA | |||||
| lightslategray | 778899 | lightsteelblue | B0C4DE | lightyellow | FFFFE0 | |||||
| lime | 00FF00 | limegreen | 32CD32 | linen | FAF0E6 | |||||
| magenta | FF00FF | maroon | 800000 | mediumaquamarine | 66CDAA | |||||
| mediumblue | 0000CD | mediumorchid | BA55D3 | mediumpurple | 9370DB | |||||
| mediumseagreen | 3CB371 | mediumslateblue | 7B68EE | mediumspringgreen | 00FA9A | |||||
| mediumturquoise | 48D1CC | mediumvioletred | C71585 | midnightblue | 191970 | |||||
| mintcream | F5FFFA | mistyrose | FFE4E1 | moccasin | FFE4B5 | |||||
| navajowhite | FFDEAD | navy | 000080 | oldlace | FDF5E6 | |||||
| olive | 808000 | olivedrab | 6B8E23 | orange | FFA500 | |||||
| orangered | FFA500 | orchid | DA70D6 | palegoldenrod | EEE8AA | |||||
| palegreen | 98FB98 | paleturquoise | AFEEEE | palevioletred | DB7093 | |||||
| papayawhip | FFEFD5 | peachpuff | FFDAB9 | peru | CD853F | |||||
| pink | FFC0CB | plum | DDA0DD | powderblue | B0E0E6 | |||||
| purple | 800080 | red | FF0000 | rosybrown | BC8F8F | |||||
| royalblue | 4169E1 | saddlebrown | 8B4513 | salmon | FA8072 | |||||
| sandybrown | F4A460 | seagreen | 2E8B57 | seashell | FFF5EE | |||||
| sienna | A0522D | silver | C0C0C0 | skyblue | 87CEEB | |||||
| slateblue | 6A5ACD | slategray | 708090 | snow | FFFAFA | |||||
| springgreen | 00FF7F | steelblue | 4682B4 | tan | D2B48C | |||||
| teal | 008080 | thistle | D8BFD8 | tomato | FF6347 | |||||
| turquoise | 40E0D0 | violet | EE82EE | wheat | F5DEB3 | |||||
| white | FFFFFF | whitesmoke | F5F5F5 | yellow | FFFF00 | |||||
| yellowgreen | 9ACD32 |
11 - Définir une couleur de texte :
Introduire l'attribut TEXT dans la balise <BODY> Ce qui nous donne pour une couleur de texte blanc <BODY text="#FFFFFF"> ou <BODY text="White">.
Si nous désirons fond Gris et une couleur de texte rouge. Nous allons donc écrire :
- Pour le font gris <BODY BGCOLOR="#999999">
- Pour le texte rouge nous allons rajouter l'attribut TEXT.
Ce qui donne : <BODY BGCOLOR="#999999" TEXT="#FF0000">.
Soit le code complet :
<HTML>
<HEAD>
<TITLE>Webinnov</TITLE>
</HEAD>
<BODY>
<BODY BGCOLOR="#999999" TEXT="#FF0000">
On apprend le HTML sur Webinnov
</BODY>
</HTML>
