Le HTML est le langage universel de la mise en page web.
Pour bien comprendre les bases du HTML, ce chapître détaillera étape par étape la création du page HTML simple.
Etape 1 :
Ouvrir un éditeur de texte, style Bloc Note, WordPad ou SimpleText... , et enregistrer une page avec l'extention .html (par exemple : mapage.html ) dans un dossier propre au site.
Lancer votre navigateur favori, et ouvrez votre page. Vous pouvez à tous moment tester vos modifications en actualisant la page.
Etape 2 :
On commence par écrire les balises de structure de la page. En HTML, on a en principe deux balises encadrant le contenu qu'elles définissent. Une balise au début, style <balise> et une à la fin, style </balise> .
Copier sur votre page :
<html>
<head>
<title>Titre de ma page</title>
</head>
<body>
Texte sur ma page
</body>
</html> |
On a d'abord défini le langage a utiliser : <html> , puis on trouve le <head> qui contient des données n'apparaissant pas dans la page, comme le <title> qui indique le titre de votre page apparaissant sur le navigateur par exemple.
Vient ensuite le <body> , le corp de la page, où on trouvera les indications de mise en page, les textes, les médias...
Etape 3 :
On peut commencer par enjoliver le texte de notre page, notament avec la balise <font>
Copier dans le body:
<font face="verdana" size="12px" color="#99CCCC">Mon texte bleu en police Verdana de 12 pixels</font>
<br />
<b>Mon texte en gras</b>
<br />
<i>Mon texte en italique</i>
<br />
<u>Mon texte souligné</u> |
Vous remarquerez, entre les balises définissant le texte, la balise <br /> qui est le saut de ligne en HTML.
Etape 4 :
Copiez, dans le dossier de votre site, une image (par exemple monimage.jpg), et enregistrez une autre page HTML (par exemple mapage-2.html).
Copier dans le body de mapage.html:
<a href="/mapage-2.html" target="_blank">
<img src="/monimage.jpg" border="0" alt="infobulle de mon image">
Lien image et texte vers ma page 2 dans une nouvelle fenêtre
</a> |
La balise <a> fait un lien, qui pointe vers le href. La target indique la cible du lien, qui peut être une nouvelle fenêtre (target="_blank"), une page en frame (target="nom_de_la_frame"), la même fenêtre sans frame (target="_parent")... Par défaut, la page en lien s"ouvre dans la même fenêtre.
La balise <img> appelle une image. La balise ne se ferme pas.
Etape 5 :
On va créer un tableau pour améliorer la mise en page.
Copier dans le body :
<table border="2" width="80%" bgcolor="#CCCCFF">
<tr valign="top">
<td>
<img src="/monimage.jpg" border="0" alt="infobulle de mon image">
</td>
<td align="right">
Mon texte<br />
Sur la colone<br />
de droite en haut<br />
aligné à droite
</td>
</tr>
<tr valign="top">
<td align="center">
Mon texte<br />
Sur la colone<br />
de gauche en bas<br />
Centrer dans la colone
</td>
<td>
<img src="/monimage.jpg" border="0" alt="infobulle de mon image">
</td>
</tr>
</table> |
Le tableau s'ouvre avec une balise <table> , puis, on crée une ligne avec la balise <tr> qui sera divisée en colonne avec des balises <td> . Le nombre de colonnes est volontairement le même sur les deux lignes pour cet exemple simple
Etape 6 :
on va améliorer le tableau en fusionnant des colones sur la première ligne :
Copier dans le body :
<table border="2" width="80%" bgcolor="#CCCCFF">
<tr valign="top">
<td colspan="2">
<img src="/monimage.jpg" border="0" alt="infobulle de mon image">
<br />
Mon texte<br />
Sur la colone<br />
fusionne
</td>
</tr>
<tr valign="top">
<td align="center">
Mon texte<br />
Sur la colone<br />
de gauche en bas<br />
Centrer dans la colone
</td>
<td>
<img src="/monimage.jpg" border="0" alt="infobulle de mon image">
</td>
</tr>
</table> |
On ajoute le critère colspan à la première balise <td> dont la valeur sera le nombre de colonnes fusionnées (2 dans l'exemple).
On peut aussi fusionner les cellules de différentes lignes.
Copier dans le body :
<table border="2" width="80%" bgcolor="#CCCCFF">
<tr valign="top">
<td rowspan="2">
<img src="/monimage.jpg" border="0" alt="infobulle de mon image">
<br />
Mon texte<br />
Sur la ligne<br />
fusionne
</td>
<td>
Mon texte<br />
Sur la colone<br />
de droite
</td>
</tr>
<tr valign="top">
<td>
<img src="/monimage.jpg" border="0" alt="infobulle de mon image">
</td>
</tr>
</table> |
On ajoute le critère rowspan à la première balise <td> dont la valeur sera le nombre de lignes fusionnées (2 dans l'exemple).
Vous voila maintenant parés pour réaliser vos premières pages web en html, et enjoliver les articles de vos blogs
visiteurs
visiteurs en ligne
Prévisualiser
Imprimer l'article
Haut