A) Introduction à l’html
Comme la page sur laquelle vous vous trouvez, 98% des pages Internet sont en html. Mais qu’est ce que l’html ?
Vous n’êtes pas s’en savoir que l’on se déplace sur le web en passant successivement d’une page a une autre. Et l’html est un système de mise en page de ces donnés (textes, images, etc..), il permet en quelque sorte de rendre les pages lisibles.
B) Créer sa première page
1) Ouvrez un fichier bloc-notes
2) Tapper:
|
<html>
<body>
Salut Kamal
</body>
</html> |
Comme tout autre balise, <html> est identifiable par les flèches ouvrir: "<" et fermer: ">"
<html> indique le debut le debut du document html et </html> sa fin.
<body> indique le debut de la zone de texte qui s'affichera à l'écran et </body> sa fin.
3) Enregistrer votre fichier et remplacez l'extension .txt par .html.
Lorsque vous lancez le fichier.html, une fenêtre Internet explorer (ou autre client www.) apparaît et affiche:
4) Modifier votre document comme ci-dessous:
|
<html>
<head>
<title>Ma premiere page</title>
</head>
<body>
Salut Kamal
</body>
</html> |
<head> est une balise d'en-tête qui se situe en <html> et <body> et qui permet d'y insérer des éléments divers qui n'apparaîtront pas sur la page.
Ainsi entre les balises <title> l'on définie le titre de la page qui s'affichera dans la barre des titres de votre client www.
5) Enregistrer votre document et actualisez votre page.html pour voir les modifications
C) Apprendre l'htm
a) Le minimum à savoir, le formatage du texte.
Il existe un grand nombre de balise html permettant de formater le texte à afficher. Nous allons voir ici les principales. (Il existe d’autres balises mais qui ne vous seront pas utiles pour vos débuts).
Il faut savoir que certaines balises peuvent posséder des arguments et sont alors du type:
<balise argument1="valeur" argument2="valeur"> texte </balise>
<i>texte</i> affiche le texte en italique
<b>texte</b> affiche le texte en gras
<u>texte</u> affiche le texte souligné
<br> passe à la ligne (ne nécessite pas de balise de fin)
<p> passe à la ligne et en saute une (ne nécessite pas de balise de fin)
<div align="valeur">texte</div> permet d'aligner le texte avec les valeur suivantes:
- right : aligne a droite
- left : aligne a gauche
- center : centre le texte
- justify: justifie le texte
<font color="couleur" size="taille">texte</font> va permetre de changer la couleur et la taille du texte situé entre les balises.
- couleur peut être le nom de la couleur (exemple: black) ou le code hexadécimal de celle ci précédé de # (exemple: #000000)
- taille peut être l'identifiant de la taille (exemple: 6) ou alors augmente ou diminue la taille par défaut (exemple: +2 ou -2)
<a name="etiquette">texte</a> permet de marquer un texte avec une etiquette qui permettra par la suite de le rejoindre grâce a un lien.
<a href="destination">texte cliquable</a> va permetre de crée un lien cliquable sur un texte.
Voici les différentes valeurs que peut prendre destination :
- URL: (exemple: http://www.votreadresse.com) ouvre la page en question.
- Lien directe: (exemple: /dossier/page.html) donne le chemin complet de la page a ouvrir.
- Adresse e-mail: (exemple: mailto:nicocyno@hotmail.com) ouvre une fenêtre d'envoi d'e-mail (Outlook ou autre).
- Fichier: (exemple: /dossier/fichier.zip) lance une fenêtre de téléchargement.
- Etiquette: (exemple: #etiquette) rejoint l'etiquette souhaité sur la page.
(exemple2: /dossier/page.html#etiquette) rejoint directement l'etiquette situé sur la page ciblée.
b) Example I
|
<html>
<body>
<div align=center><u>Voici une première page d'exemple</u></div><p>
En cliquant <a href="http://www.google.fr">ici</a> vous allez sur <b>google</b>.<br>
<font color=red size=" -1 ">Si vous avez des questions vous
pouvez me joindre a cette adresse:
<a href="mailto:Kamaroc2005@Hotmail.com">nicolas.cynober@supinfo.com</a></font>
</body>
</html> |
Voila le résultat :
|
Voici une première page d'exemple
En cliquant ici vous allez sur google.
Si vous avez des questions vous pouvez me joindre a cette adresse: Kamaroc2005@Hotmail.com |
c) Parfaire ses connaissances, les tableaux.
Les tableaux vont permettes a la fois de crée des tableaux traditionnels mais aussi de répartir les informations dans sa page.
(En faisant clique droit puis "afficher la source" sur la page http://www.yahoo.com vous vous apercevrez que son architecture elle celle d'un tableau.)
Voici les principales balises permettant de crée un tableau:
<table></table> définie le début et la fin du tableau.
<tr></tr> définie le début et la fin d'une ligne.
<td></td> définie le contenu d'une cellule.
Chacune de ces balises peuvent recevoir les arguments suivants:
- border="n" : définie la largeur de la bordure (vaut 0 si il n'y en a pas).
- bordercolor="couleur" : définie la couleur de la bordure.
- bgcolor="couleur" : définie la couleur de font (bgcolor peut être aussi utiliser dans une balise <body>).
- width="n" : définie la largeur.
- height="n": définie la hauteur.
- colspan="n" : la cellule occupe n colonnes. (pour la balise <td> uniquement)
- rowspan="n" : la cellule occupe n lignes. (pour la balise <td> uniquement)
- align="valeur" : aligne les éléments avec right, left ou center.
Vous vous rendrez compte en affichant les sources de pages (clic droit/afficher la source) que des pages comme www.yahoo.com ne sont qu’une association de tableaux imbriqués les uns dans les autres. Voici un petit exemple de tableau …
d) Exemple II
|
<html>
<body>
<div align=center><u>Exemple II, Les tableau</u><br>
<table border=1 bgcolor="#ccffaa">
<td colspan=3>Grand titre<!-- Va regrouper trois colonnes pour faire une
grande cellule de titre -->
<td rowspan=2>2eme<BR>partie<!--2eme Titre sur 2 lignes -->
<td rowspan=2>3eme<BR>partie<!-- 3eme Titre sur 2 lignes -->
<tr><!--Marque le debut d’une nouvelle ligne et y insere des sous titres -->
<td>Sous menu 1</td>
<td>Sous menu 2</td>
<td>Sous menu 3</td>
</tr>
<tr><!--Marque le debut d’une nouvelle ligne et y insere des éléments -->
<td>Peugeot 106</td>
<td>B2</td>
<td align=middle>234.34</td>
<td>132</td>
<td>5,7</td>
</tr>
<tr><!--Marque le debut d’une nouvelle ligne et y insere des éléments -->
<td>Citroën AX</td>
<td>AT67B8</td>
<td align=middle>6789</td>
<td>126</td>
<td>5,5</td>
</tr>
</table>
</div>
</body>
</html> |
