HTML
1- Qu’est-ce que HTML ?
HTML est la « langue maternelle » de votre navigateur. Le HTML est le langage “de
balises” utilisé pour construire des pages web pouvant être visualisées sur internet par un
navigateur ou explorateur (Internet Explorer, Firefox, Google Chrome,…).
2- Les éléments de base d’une page HTML
<html>
<head>
<title>
Titre de votre page
</title>
</head>
<body>
Insérer vos textes, images, tableaux...
</body>
</html>
< !-- --> Pour ajouter un commentaire
<body bgcolor=“blue ”> Définir une couleur de fond pour la page
<body background=image.gif > Définir une image de fond pour la page
<p> Hello World! </p> Inserer un paragraphe
<h1>Mon texte</h1>
Mon texte
<h2>Mon texte</h2> Mon texte
<h3>Mon texte</h3> Mon texte
<h4>Mon texte</h4> Mon texte
<h5>Mon texte</h5> Mon texte
<h6>Mon texte</h6> Mon texte
Mon texte en <b>gras</b> Mon texte en gras
mon texte en <i>italique</i> Mon texte en italique
Mon texte <u>souligné</u> Mon texte souligné
<strike>rayé</strike> Mon texte rayé
H<sub>2</sub>O Mon texte en indice : H2O
Cl<sup>2</sup> Mon texte en exposant : Cl 2
<font size=+3>Mon texte en grand</font> Mon texte en grand
<font color=”#FF0000”>Mon texte en couleur </font> Mon texte en couleur
<font face=”Arial Narrow”>Mon texte en police Arial Mon texte en police Arial Narrow
Narrow</font>
<p align=“left”>Votre texte aligné à gauche, Votre texte aligné à gauche, ce qui nécessite
</p> plusieurs lignes
<p align=“right”>Votre texte aligné à droite, Votre texte aligné à droite, ce qui nécessite
</p> plusieurs lignes pour
<p align=“center”>Votre texte centré, </p> Votre texte centré, ce qui nécessite plusieurs
lignes pour
<p align=“justify”>Votre texte justifié, </p> Votre texte justifié, ce qui nécessite plusieurs
lignes pour l’exemple de mise en forme du
Votre texte avec un saut de ligne forcé, <br> Votre texte avec un saut de ligne forcé,
ce qui nécessite
a- Insérer une espace insécable
Votre texte avec un espace insécable, pour un Votre texte avec une espace insécable, pour
nombre 10 000 euros. un nombre 10 000 euros.
3- ÉDITER DES LISTES
a- Listes à puce
<UL> o texte 1
<LI>texte 1</LI> o texte 2
<LI>texte 2</LI>
</ UL>
b- Listes numérotées
<OL> 1. texte 1
<LI>texte 1</LI> 2. texte 2
<LI>texte 2</LI>
</ OL>
c- Listes de definition
<DL> Terme 1 à définir
<DT>Terme 1 à définir</DT> Définition du terme 1
<DD>Définition du terme 1</DD> Terme 2 à définir
<DT>Terme 2 à définir</DT> Définition du terme 2
<DD>Définition du terme 2</DD> suite du terme 2
<DD>suite du terme 2</DD>
</DL>
4- Formater une ligne
5- Insérer un lien dans la page
<a href="page.html"> cliquer ce lien </a> Mon lien s’ouvre dans la même fenêtre
<a href="page.html" target ="_blank"> 2e lien </a> Mon lien s’ouvre dans une
nouvelle fenêtre
<a href="?" target="_self "> 3e lien</a> définit un lien sur une page avec pour cible
la même fenêtre
<a href=http://www.instagram.com target ="blank">Lien lemonade.fr </a> Le lien ouvre le link
adresse dans une
nouvelle fenêtre
<a href="mailto:[email protected]"> email us </a> Envoie un email à l’adresse
6- Insérer une image
<img src="image.gif">
<img src="image.gif" border="1">
<img src="image.jpg" border="3">
Mettre un commentaire à l’image
<img src="image.gif" title="Une photo du « Center Park » ">
Aligner une image
<img src="image.gif" align="left">
<img src=“image.gif” align=“right”>
<img src=“image. gif” align=“center”>
7- Formatage d’un tableau
Les tables servent pour l’affichage de « données tabulaires », c’est-à-dire des informations
présentées logiquement en rangées et en colonnes.
Définir un tableau
<table cellspacing="0" cellpadding="0"
border="1" bgcolor="green" bordercolor="blue"
width="60%" align="center">
<tr>
<td width="20%" bgcolor="red">1</td>
<td width="80%" bgcolor="lime">2</td>
</tr>
<tr>
<td width="20%" bgcolor="gray">3</td>
<td width="80%">4</td>
</tr>
Les attributs d’un tableau
border= définit la taille du cadre
bordercolor= définit la couleur du cadre
cellspacing= définit l’espacement entre les cellules
cellpadding= définit les marges intérieures
width= définit la largeur des cellules du tableau
bgcolor= définit la couleur de fond du tableau
background= définit le fond du tableau avec une image (comme pour le <body>)
Les attributs d’une ligne dans un tableau
align= formate l’alignement horizontal
valign= formate l’alignement vertical
Les attributs d’une colonne dans un tableau
align= formate l’alignement horizontal
valign= formate l’alignement vertical
colspan= fusionne sur une même ligne le nombre de cellules indiquées
rowspan= fusionne sur une même colonne le nombre de cellules
indiquées
width= formate la largeur des cellules du tableau
bgcolor= formate la couleur de fond d’une cellule d’un tableau
<select>La balise select permet de choisir une option dans une liste.
