Pour terminer, voici quelques balises très utilisées :
<a href="mon_autre_page.html">Cliquez ici pour vous rendre sur mon autre page</a>La balise a permet de créer des liens hypertextes, ce sont ces liens hypertextes qui vous permettent de "voyager" entre les pages d'un site ou entre les sites. Les liens hypertextes sont par défaut soulignés et de couleur bleue (modifiable grâce au CSS). La balise a possède un attribut href qui a pour valeur le chemin du fichier que l'on cherche à atteindre ou l'adresse du site cible (exemple : <a href="http://www.google.fr">Cliquez ici pour vous rendre sur google.fr</a>). Entre la balise ouvrante et fermante, on trouve le texte qui s'affichera à l'écran (c'est ce texte qui est souligné et de couleur bleue).La balise peut sans problème se trouver en plein milieu d'un paragraphe.
Comme vous devez déjà vous en douter, la balise image sert à insérer des......images :
<img src="mon_image.jpg" alt="avion"/>la balise img est à la fois ouvrante et fermante comme la balise br. Elle possède 2 attributs :
- src qui doit être égal au nom du fichier image (ou au chemin si le fichier image se trouve dans un autre dossier).
- alt qui doit être égal à une description de votre image (cet attribut est utilisé notamment par les systèmes de description des pages web utilisés par les non-voyants), il faut donc systématiquement renseigner cet attribut.
Les formulaires sont des éléments importants des sites internet, ils permettent à l'utilisateur de transmettre des informations. Un formulaire devra être délimité par une balise form (même si ce n'est pas une obligation) :
<form>
....
</form>Il existe différentes balises permettant de construire un formulaire, notamment la balise input. Cette balise possède un attribut type qui lui permet de jouer des rôles très différents.
La balise button nous sera aussi d'une grande utilité.
Créez un fichier html contenant le code suivant :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Voici mon site</title>
</head>
<body>
<form>
<p>voici un champ de texte : <input type="text"/></p>
<p>voici une checkbox <input type="checkbox"/></p>
<button>Cliquez ici !</button>
</form>
</body>
</html>
Testez votre code à l'aide d'un navigateur web (Firefox ou Chrome) en “double-cliquant” sur le fichier html que vous venez de créer.
Ces 2 balises sont très utilisées (surtout la balise div). Pourtant, il faudrait, autant que possible, les éviter, pourquoi ?
Parce qu'elles n'ont aucune signification particulière, ce sont des balises dites “génériques”.
À quoi servent-elles alors ?
À organiser la page, à regrouper plusieurs balises dans une même entité.
Pourquoi 2 balises génériques ?
Parce que div est une balise de type “block” et que span est une balise de type “inline” !
Sans vouloir trop entrer dans les détails, Il faut bien comprendre que l'ordre des balises dans le code HTML a une grande importance. Les balises sont affichées les unes après les autres, on parle du flux normal de la page.
C'est ici qu'entrent en jeu les balises de type "block" et les balises de type "inline".
- Les contenus des balises de type "block" (p, div,h1,...) se placent sur la page web les uns en dessous des autres.
- Les contenus des balises de type "inline" (strong, img, span, a) se placent sur la page web les uns à côté des autres.
Cela revient à dire qu'une balise de type “block” prend toute la largeur de la page alors qu'une balise de type “inline” prend juste la largeur qui lui est nécessaire.
Créer un fichier html contenant le code suivant :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Voici mon site</title>
</head>
<body>
<div>div est une balise de type "block"</div>
<p>la balise p est une autre balise de type block</p>
<span>En revanche, span est une balise de type "inline"</span>
<a href="www.google.fr">Et voici une autre balise de type "inline"</a>
<h1>h1 est bien une balise de type "block"</h1>
<span>la malheureuse balise span est "obligée" de se placer en dessous</span>
</body>
</html>
Tester ce code
Nous avons juste survolé le HTML et le CSS, pour ceux qui veulent entrer dans les détails, je vous conseille l'excellent cours de Mathieu Nebra sur le site openclassrooms :
http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3
Élaborez une page HTML en utilisant les balises vues dans les activités consacrées au HTML.