Pour terminer, voici quelques balises très utilisées :
4.1 La balise a
|
1 |
<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 :
|
1 |
<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.
4.2 La balise img
Comme vous devez déjà vous en douter, la balise img sert à insérer des……images :
|
1 |
<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.
4.3 Les balises form, input et button
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é.
À faire vous même 4.3.1
Créez un fichier html contenant le code suivant :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Voici mon site</title> </head> <body> <form> <p>Entrez votre nom : <input name="nom" type="text"/></p> <p>Fille ou Garçon ? </p> <input name="sexe" type="radio" value="F"/>Fille</br> <input name="sexe" type="radio" value="G"/>Garçon</br> <button>Cliquez ici !</button> </form> <img src="http://informatique.metz.chez.com/informatique/creation-realisation-site-internet-moselle.png" alt="image quelconque en ligne" /> </body> </html> |
Vous remarquez que la balise <img /> va chercher une image en ligne mais vous pouvez prendre une autre image en indiquant précisément son chemin d’accès.
Que le choix du sexe ne permet pas les deux (bouton radio) alors que si on veut des cases à cocher on prendra un type checkbox.
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.
4.4 Les balises div et span
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.
À faire vous même 4.4.1
Créer un fichier html contenant le code suivant :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!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
Pour allez plus loin :
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 ou le site #CSS {débutant}
Voici un lien un peu désuet mais bien pratique pour retrouver une balise : Le petit mémo HTML