LE HTML
- Définition
- Première page avec le bloc-note
- Structure de base d'une page
- Commandes courantes
- Les attributs
- Quelques règles simples pour débuter
Définition
L'HTML est le langage de base pour mettre en forme des pages web. Il signifie "Hypertext
Markup Langage" soit "Langage
de balisage hypertexte", l'hypertexte étant le système permettant
de relier les pages web les unes entre les autres (on parle de liens ou
liens hypertexte...)
L'HTML est un langage de description. A l'aide d'instructions que vous
insérez, vous allez définir la forme de votre page, de votre texte (gras,
italique, polices, ...), inclure des images, du son de la video, implanter
des liens vers d'autres pages...
L'HTML est composé de "balises"
ou "tag" facilement identifiable, car constituée d'un mot (ou plusieurs
dans certain cas) encadrée par les signes inférieur (<) et supérieur
(>). Ex: <html>, <body>, <p>....
-> Il est facile de voir le code
HTML d'une page web:
- Dans Internet Explorer 7, dans le menu "Page" en haut à droite, sélectionner
"Afficher la source"
- Dans Mozilla Firefox, dans le menu "Affichage", choisir "Code
source de la page"
Depuis sa création à la fin des années 80, jusqu'à aujourd'hui, le HTML n'a cessé d'évoluer pour intégrer de nouvelles fonctionnalités et pouvoir être utilisé. On parle aujourd'hui de XHTML, eXtensible Hypertext Markup Langage, une version qui permet notemment d'afficher des pages web sur d'autres sytèmes bien moins puissants que l'ordinateur classique (téléphone, PDA...)
Pour voir à quoi ressemble le code HTML
d'une page web:
- Dans votre navigateur, un clic avec le bouton droit de la souris sur la page sur laquelle vous êtes. Choisissez "code source de la page" ou "afficher la source".
Créer une première page avec le bloc-notes
a ) Ouvrir le Bloc-notes
(sous Windows : Démarrer, programmes, accessoires et bloc-notes)
b ) Tapez le code ci-dessous :
<html> ceci est le texte de ma première page </html>
c ) Sauvegardez votre fichier sous ce nom : "page1.html"
Attention au nom du fichier et à son extension ".html". Le bloc-note
enregistre par défaut des fichiers au format ".txt". Vérifiez que vous
n'ayez pas un fichier se nommant "page1.html.txt" par exemple, sinon renommer-le
pour qu'il n'y ai que l'extention ".html". Attention également à la syntaxe
(les points, les espaces...).
Notez bien l'endroit ou vous enregistrez votre fichier (Mes documents...)
d ) Ouvrez le fichier créée avec Internet Explorer ou Mozilla Firefox:
- Soit double-cliquez directement sur le fichier en question.
- Soit dans le menu "Fichier" d'Internet Explorer ou Mozilla, sélectionner "Ouvrir un fichier"
Vous constatez que le texte "ceci est le texte de ma première page" apparait bien dans le navigateur. Allons un peu plus loin....
Structure de base d'une page web :
<html> // Balise d'ouverture de la page
<head> //Balise d'ouverture de l'en-tête
<title> Titre de ma page </title>
</head> //Balise de fermeture de l'en-tête
<body> //Balise d'ouverture du corps de la page
Contenu de la page
</body>//Balise de fermeture du corps de la page
</html> // Balise de fermeture de la page
Les premières balises (ou tags) : les balises "structurelles"
La balise <html> : Elle apparaît en premier et signale aux différents navigateurs que c'est une page Web, le tag indique la fin de la page.
La balise <head> : Elle indique les informations propres à votre page. Elle inclut la balise title définissant le titre de la page (voir ci-dessous), ainsi que les balises meta qui permettront aux moteurs de recherche d'indexer votre site Web.
La balise <title> : Elle définit le titre de votre site (ou page). Ce titre se loge dans la barre supérieure de votre navigateur, ainsi que lors d'un ajout dans les favoris (ou bookmark) d'un navigateur.
La balise <body> : Elle va contenir toutes les informations qui s'afficheront dans la fenêtre du navigateur : Textes, liens, images...
Les balises courantes
| Structure du document | ||
| <html> </html> | Déclaration du document HTML | |
| <head> </head> | En-tête du document | |
| <title> </title> | Titre du document | |
| <body> </body> | Corps du document | |
| <meta> | Informations méta (pour le référencement) |
|
| <div> </div> | sert à structurer le document en plusieurs sections. Très utilke pour la mise en forme structurelle de la page. | |
| Mise en forme | ||
| <h1> </h1> | Titre de niveau 1 | |
| <h2> </h2>... <h6> </h6> | Titre de niveau 2. Il existe 6 niveaux. | |
| <p> </p> | Paragraphe | |
| <br> | Saut de ligne | |
| <hr> | Ligne horizontale | |
| <b></b> | Texte en gras | |
| <i> </i> | Texte en italique | |
| <s> </s> | Texte barré | |
| <u> </u> | Texte souligné | |
| <blink> </blink> | Texte clignotant. Attention ne fonctionne pas bien dans Internet Explorer | |
| <font> </font> | Définition de la police | |
| <marquee> | Texte défilant de gauche à droite | |
| <!-- commentaires --> | Pour commenter le code |
| Liens hypertexte | ||
| <a href="page1.html">lien vers la page 1 </a> | Lien hypertexte vers la page1.html | |
| Image | ||
| <img href="image1.jpg"> | Insert l'image "image1.jpg" | |
| Objet multimédia | ||
| <embed> et <object> | Son, video, image... |
| Tableau | ||
| <table> </table> | Définition d'un tableau | |
| <th> </th> | Cellule d'en tête d'un tableau | |
| <tr> </tr> | Ligne d'un tableau | |
| <td> </td> | Cellule de donnée d'un tableau | |
| <caption> </caption> | Légende de tableau |
| Liste | ||
| <ul> </ul> | Liste d'éléments | |
| <li> </li> | Un élément de la liste | |
Les attributs :
La plupard des balises, permettant de structurer la page, peuvent recevoir un ou plusieurs "attributs", sorte de mot-clés pour lesquels on attribut une valeur, et précisant ainsi des aspects de mise en forme ou des options spécifiques à la balise elle-même:
<h2 style="text-align: center;"> titre de niveau 2 centré </h2>
<a href="HTML1.html">Le HTML</a> <!-- Lien vers la page HTML1.html" -->
<img src="images/image_1.jpg"> <!-- insert "image_1.jpg" se trouvant -->
<!-- dans le dossier "images· -->
<div class="conteneur"> ... </div> <!-- Division ayant pour -->
<!-- attribut la classe "conteneur"-->
(voir "Aspect graphique")
Quelques règles simples pour débuter
a) Le principe de base du langage HTML est le "balisage" : les balises vont généralement par paire, avec une balise d'ouverture et une balise de fermeture.- Balise d'ouverture (ex: <body>)
- Texte, images...
- Balise de fermeture (ex: </body>)
- <b> texte en gras </b>
b ) Ecrivez vos balises en minuscules.
c ) Essayer d'aérer au maximum votre code
d ) Le langage HTML ignore les retours chariot et les tabulations. Servez-vous des balises <br> ou <p> pour passer à la ligne
e) Certaines balises sont ignorées par certains navigateurs ou ne s'affichent pas de la même façon. Ex: Un titre de niveau supérieur h1 peut ne pas s'afficher de la même façon selon le navigateur utilisé....