Qu'est-ce que le HTML ?
Le HTML (Hypertext Mark-Up Language) est une language qui permet de structurer des données et créer des liens hypertext. Il permet ainsi de pouvoir passer de document en document sur internet.
Outils nécessaires pour créer une page HTML :
Si vous voulez travailler en code, un simple éditeur de texte suffit. Néanmoins, aujourd'hui, il existe de très bon logiciel WYSIWYG (What You See Is What You Get, en français, ce que vous voyez est ce que vous obtenez) comme Dreamweaver MX, FrontPage, voire FrontPage express, la version gratuite de FrontPage.
Il existe aussi des programmes dit OPEN SOURCE, c'est-à-dire libres d'utilisation et livrés avec leurs codes sources. Vous pouvez télécharger un site internet complet, puis le modifier à volonté. C'est le cas pour OSCOMMERCE qui vous permet de faire du e-commerce et XOOPS, qui lui, vous permet de créer des portails avec gestion des utilisateurs.
Mais avant de vous servir de logiciels WYSIWYG ou programmes OPEN SOURCE, quelques bases en HTML s'imposent afin de pouvoir personnaliser au mieux votre page HTML.
Les balises :
Le HTML est un language à balise. Une balise commence par le caractère < et se termine par la caractère >. Par exemple <html>.
Cepedant, ce n'est pas aussi facile ! Il existe deux types de balises, les balises ouvrantes (ou balises d'ouverture) et les balises fermantes (ou balises de fermeture). Toutes les balises vont par paire. Si vous utilisez une balise ouvrante, après avoir tapé votre texte ou code, vous devrez utiser une balise fermante. La balise fermante est la même que la balise ouvrante sauf qu'elle est précédée du caractère /.
Un exemple avec la balise paragraphe : <p> Votre texte ici </p>
Il existe néanmoins quelques exceptions comme les balises <img> ou <br>. Celles-ci ne sont pas utilisées avec des balises fermantes.
Un exemple avec la balise <img> : <img src="chemin_de_mon_image.extentension">
Beaucoup de balises admettent des attributs (propriétés) qui vont modifier son affichage dans le navigateur. Dans <img src="chemin_de_mon_image.extentension">, src est un attribut qui permet d'indiquer au navigateur où aller chercher le fichier image.
Liste des balises :
Légende pour les balises fermantes (ou de fermeture) :
| Nom |
Fonction |
Balise
de fin |
| <!-- --> |
Permet de placer des commentaires dans le code source d'une page. Un commentaire n'est pas affiché par les navigateurs. |
O |
|
Attributs : aucun |
|
Exemple : <!-- Ce commentaire ne sera pas affiché par le navigateur -->
|
| A |
Crée un lien hypertexte vers une autre page web ou vers une ancre (endroit précis d'une page). |
O |
|
Attributs : href, name, target
|
|
Exemple : <a href="http://www.bursoft.fr" target="_blank">BURSOFT.FR</a>
|
| B |
Pour mettre le texte en gras. |
O |
|
Attributs : aucun |
|
Exemple : <b>Ce texte est en gras.</b>
|
| BIG |
Augmente la taille du texte. |
O |
|
Attributs : aucun |
|
Exemple : <big>Ce texte est plus grand!</big>
|
| BLOCKQUOTE |
Pour mettre le texte en retrait. |
O |
|
Attributs : aucun |
|
Exemple : <blockquote>ce texte est en retrait !</blockquote>
|
| BODY |
Corps de la page web (contenu). |
O |
|
Attributs : bgcolor, background, alink, link, vlink, text
|
|
Exemple : <body>Le contenu de ma page web</body>
|
| BR |
Ajoute un saut de ligne. |
N |
|
Attributs : aucun |
|
Exemple : Ligne1<br>Ligne2 |
| CENTER |
Centre le texte. |
O |
|
Attributs : aucun |
|
Exemple : <center>Un texte centré</center>
|
| DIV |
Feuille regroupe des éléments. La structure des "div" peut être changer à l'aide des feuilles de style. |
O |
|
Attributs : id, class
|
|
Exemple : <div id="menu">Mon menu</div>
|
| FONT |
Permet de modifier la l'aspect des caractères (couleur, taille, police,...). |
O |
|
Attributs : color, face, size
|
|
Exemple : <font size=2 color="#000000" face="Arial">Texte écrit avec la police Arial, de couleur noir et de taille 2</font>
|
| FORM |
Pour créer un formulaire. |
O |
|
Attributs : action, method, enctype, name, target
|
|
Exemple : <form action="Mon_CGI.php" method="POST">Mes champs ajoutés</form>
|
| H1, H2,... à H6 |
Définit 6 niveaux pour les titres. Chaque niveau possède son propre style. |
O |
|
Attributs : align
|
|
Exemple : <h1>Titre</h1><h6>texte</h6> |
| HEAD |
Définit l'en-tête de la page web. Ces informations ne sont pas affichées par les navigateurs. |
O |
|
Attributs : aucun |
|
Exemple : <head><title>Le titre de mon page</title></head>
|
| HR |
BARRE HORIZONTAL. |
N |
|
Attributs : align, size, width, color (seulement IE) |
|
Exemple : <hr size=2 width=400 align="left">
|
| HTML |
Indique que le fichier est un document HMTL. |
O |
|
Attributs : aucun |
|
Exemple : <html><head><title>Titre de ma page web</title></head><body>le contenu de ma page web></body></html>
|
| I |
Met le texte en italique. |
O |
|
Attributs : aucun |
|
Exemple : <i>Ce texte est en italique</i>
|
| IMG |
Ajoute une image (gif, jpg, jpeg, png,...). |
N |
|
Attributs : src, border, width, height, alt, align, hspace, vspace
|
|
Exemple : <img src="Monimage.gif" border=2 width=88 height=31 alt="Texte affiché lorsque mon image n'est pas chargée">
|
| INPUT |
Ajoute un champ de formulaire (plusieurs types sont disponibles). |
N |
|
Attributs : type, name, value, checked, size, maxlength
|
|
Exemple : <input type="text" name="nom" value="Votre nom" size=25 maxlength=25>
|
| LI |
Crée un nouvel élément pour une liste. |
O |
|
Attributs : value |
|
Exemple : <li>Eléments de ma liste</li> |
| LINK |
lien vers un fichier externe (une feuille de style par exemple). |
N |
|
Attributs : type, href, rel |
|
Exemple : <link href="style.css" rel="stylesheet" type="text/css">
|
| MARQUEE |
Texte défilant (IE uniquement). |
O |
|
Attributs : direction, behavior, loop, ScrollAmount |
|
Exemple : <marquee direction="left" behavior="scroll" loop=1>Texte défilant</marquee> |
| META |
Définit des paramètres supplémentaires dans l'en-tête de votre page.. |
N |
|
Attributs : name, content, http-equiv, url (seulement IE)
|
|
Exemple : <meta name="description" content="Description du site pour les moteurs de recherches">
|
| OL |
Liste numérotée. |
O |
|
Attributs : type, start
|
|
Exemple : <ol type="1">Votre liste</ol>
|
| OPTION |
Crée un nouveau choix dans un SELECT. |
O |
|
Attributs : value, selected
|
|
Exemple : <option value="choix1" selected>Webmaster (</option>)
|
| P |
Paragraphe. |
O |
|
Attributs : align, class
|
|
Exemple : <p align="left">Mon paragraphe</p> |
| SELECT |
Crée une liste de sélection dans un formulaire. |
O |
|
Attributs : name, multiple, size
|
|
Exemple : <select name="choix" size=2>Mes balises</select>
|
| SMALL |
Diminue la taille du texte (contraire de BIG). |
O |
|
Attributs : aucun |
|
Exemple : <small>Texte plus petit</small>
|
| SPAN |
Facilite la mise en forme. |
O |
|
Attributs : id, class |
|
Exemple : <span class="normal">Texte écrit en "normal"</span>
|
| STRONG |
Texte en gras (similaire à B). |
O |
|
Attributs : aucun |
|
Exemple : <strong>texte en gras</strong>
|
| STYLE |
Permet de définir les règles de mise en forme dans le document HTML. |
O |
|
Attributs : type
|
|
Exemple : <style type="text/css">Mes styles</style>
|
| SUB |
Met le texte en indice. |
O |
| Attributs : aucun |
| Exemple : <sub>Mon texte en indice</sub> |
| SUP |
Met le texte en exposant . |
O |
| Attributs : aucun |
| Exemple : <sup>Mon texte en exposant</sup> |
| TABLE |
Crée un tableau. |
O |
|
Attributs : align, border, cellpadding, cellspacing, bgcolor, width, bordercolor (IE uniquement), background (IE uniquement)
|
|
Exemple : <table width=200 border=2 cellpadding=3 cellspacing=0 align="center">Mes lignes et cellules</table>
|
| TD |
Celulle de tableau. A insérer entre <tr> et </tr>. |
O |
|
Attributs : align, valign, bgcolor, colspan, rowspan, width, height
|
|
Exemple : <table><tr><td align="left" valign="middle" colspan=5 width=100>contenu</td></tr></table>
|
| TEXTAREA |
Zone de texte dans les formulaires. |
O |
|
Attributs : rows, cols, name
|
|
Exemple : <textarea name="Adresse" cols=30 rows=5>Votre texte par défaut dans le textarea</textarea>
|
| TITLE |
Définit le titre qui sera affiché dans la barre de titre du navigateur. A insérer entre <head> et </head>. |
O |
|
Attributs : aucun |
|
Exemple : <html><head><titre>Le titre de ma page</titre></head></html> |
| TR |
Ligne dans un tableau. A insérer entre <table> et </table>. |
O |
|
Attributs : align, bgcolor, valign
|
|
Exemple : <table><tr>vos celulles</tr></table>
|
| U |
Pour souligner le texte. |
O |
|
Attributs : aucun |
|
Exemple : <u>Mon texte souligné</u>
|
| UL |
Crée une liste à puces. |
O |
|
Attributs : type, start |
|
Exemple : <ul type="square">vos éléments de liste</ul>
|
Squelette d'une page HTML :
<html>
<head>
Votre section d'en-tête. Celle-ci vous permet d'utiliser des balises qui vont permettre de donner des informations sur le document, comme, par exemple, la date de création, le titre de la page, le créateur, les mots clefs pour les moteurs de recherche, de définir des styles, ...
</head>
<body>
Le corps de la page. C'est là où nous allons retrouver toutes les balises de mise en forme du texte, les balises d'insertion d'images comme <img src="votre_fichier_graphique.extension">, ..., votre texte personnel.
</body>
</html>
Je crée ma première page web
Dans un premier temps vous allez ouvrir le bloc-notes de windows en faisant Démarrer => Acessoires => Bloc-notes
Une fois le bloc-notes ouvert, vous devriez avoir la fenêtre suivante.
Avant de commencer à programmer votre première page, quelques conseils de mise en forme s'imposent.
Lorque vous utilisez une balise ouvrante, il est conseillé de décaler tout le bloc de code suivant à l'aide de la touche tab (tabulation) de votre clavier, ceci afin d'avoir une meilleure lisibilité du code et d'éviter de laisser des balises ouvertes.
Il ne faut pas mettre d'espaces ou caractères spéciaux dans les noms de fichier qu'il s'agisse d'images ou documents.
Nous vous proposons de saisir le code suivant, en respectant la mise en forme afin de vous familiariser avec le HTML. N'hésitez surtout pas à aller voir la liste des balises HTML, qui vous renseignera sur les balises et leurs attributs.
Une fois que vous avez fini, enregistrer votre document. Faites fichier => enregistrer sous.
Dans type de document, choisissez "tous".
Dans "Nom", saisir Ma_première_page_HTML.html (attention, vous devez mettre l'extension .html ou htm pour indiquer que le document que vous venez de créer est un document HTML). Vous pouvez enregistrer dans le fichier que vous désirez, néanmoins nous vous conseillons le "bureau". Ensuite, fermez le bloc-notes.
Maintenant, ouvrez le document HTML créé.
Vous obtenez le résultat suivant :
|