Un document html est un fichier texte tout ce qu'il y a de plus classique, vous pouvez donc
utiliser un éditeur de texte comme le notepad, vim, emacs pour éditer votre fichier. Afin de
présenter votre document il existe plusieurs tags pour mettre en forme votre texte, par exemple :
<b>ce texte est en gras</b>. Ainsi lorsque vous encadrez un texte avec le tag b
le texte est en gras.
Tous les tags html sont formés de la même façon, la commande est encapsulée entre un < et un > pour démarrer et encapsulée entre un </ et un > pour la terminer.
La structure de départ d'un document html est toujours la suivante:
Pour plus d'infos sur la section head rendez vous ici ou vous trouverez un descriptif des tags meta qui permettent de décrire votre document.
le tag body défini donc la partie principale de votre document, c'est ici que sera écrit le texte de votre page ainsi que les références de vos images.
Vous allez en tapant votre texte avoir besoin de quelques tags
qui vont vous permettre de mettre en forme et de présenter
votre document, voici quelques tags indispensables:
Tous les tags html sont formés de la même façon, la commande est encapsulée entre un < et un > pour démarrer et encapsulée entre un </ et un > pour la terminer.
La structure de départ d'un document html est toujours la suivante:
<html> <head> </head> <body> </body> </html>Le tag html indique que ce document est de l'html, le tag head renferme des informations sur le document qui sera contenu dans la section body.
Pour plus d'infos sur la section head rendez vous ici ou vous trouverez un descriptif des tags meta qui permettent de décrire votre document.
le tag body défini donc la partie principale de votre document, c'est ici que sera écrit le texte de votre page ainsi que les références de vos images.
- h1, h2 .. h6 : ces tags permettent de modifier la taille de votre texte, du plus gros h1 au plus
petit h6.
- b : pour écrire en gras
- font : pour changer la taille (eg: <font size=+2> ) ou la couleur (eg: <font color=red> )
- div : pour centrer un texte (eg: <div align=center> )
- p : permet de définir un paragraphe
- pre : la présentation du texte contenu dans une section pre ne sera pas modifiée,
en effet en html une succesion de blanc ou de retour à la ligne sera considérer comme
un seul blanc sauf a l'intérieur d'une section pre, cela est très pratique pour
présenter un code de programme
Si cette ligne est particulièrement simple, il est néanmoins important d'y ajouter deux paramètres pour optimiser l'affichage dans le navigateur : la hauteur et la largeur, ce qui donne finalement :
<img src="nom du fichier" height="hauteur" width="largeur" >.C'est maintenant que ça se gate, lorsque vous souhaitez avoir une mise en page un peu sympa, le mieux c'est d'utiliser des tableaux.
Un petit exemple:
<table width="80%"> <tr>
<td valign=top> cell 1 </td>
<td align=center> cell 2 </td> </tr>
<tr> cell 3 </td>
</tr>
</table>
ce qui donne :
| cell 1 | cell 2
cell 2 cell 2 |
| cell 3 | |
Explications : le tag table permet de débuter un tableau, tr une ligne et td une cellule. Les attributs intéressants sont width pour table et td pour donner la largeur du tableau par rapport à la page ou de la cellule dans la ligne.
border permet de spécifier la bordure des cellules, par défaut il n'y en a pas ( i.e: border=0 ).
valign et align permettent de gérer l'alignement vertical et horizontal.
l'attribut colspan specifie que la cellule aura la largeur de deux cellules des autres lignes. ( rowspan s'utilise de la même manière pour les colonnes )
Les framesets permettent de diviser une page en plusieurs parties, pour ensuite insérer dans chaque partie une page à part entière.
Exemple :
<frameset cols="100,*"> <frame name=menu src="menu.html"> <frame name=princ src="princ.html"> </frameset>Dans un fichier ( généralement index.html ), on met le code ci dessus. Cela permettra de séparer la page avec une colonne de 100 pixels à gauche et le reste a droite. A gauche figure le contenu du fichier menu.html, à droite princ.html.
Chaque frame a un nom, ce qui permet lorsque vous faites un lien d'afficher le résultat dans la frame ad hoc ( voir section suivante ).
Pour séparer la page dans la hauteur, utilisez l'attribut rows à la place de cols L'une des particularités d'un document web est de pouvoir cliquer sur une partie de texte ou une image et d'être renvoyé vers une autre page, c'est un lien.
Pour cela il suffit d'encadrer le texte ou l'image avec le tag a:
<a href="page_suivante.html">vers la page suivante</a>
Un attribut utile est target, il permet de spécifier ou la page pointée sera affichée, ex: target=princ affichera le résultat du lien dans la frame ou la fenêtre princ.
Attention si vous voulez faire un lien vers un autre site n'oubliez pas de mettre l'addresse complète, c'est à dire précédée de http:// , ex:
<a href="http://chel7.blogspot.be/">Tutoriel html pour créer son site</a>.
0 commentaires:
Enregistrer un commentaire