Les balises HTML

C'est parti pour les balises HTML !
Je vais faire un petit résumé des balises (avec quelques précisions au niveau pratique)

Astuce: Copier coller les codes dans Notepad++, vous y verrez plus clair,
Je rappelle d'aller dans Langage > H > HTML pour choisir le langage utilisé, ici le HTML.

I Balise <html>

Il n'y a pas de questions à se poser pour la balise html, il suffit de mettre <html> au tout début et </html> à la toute fin, ce qui encadre votre page HTML.

En pratique vous pouvez remplacer <html> par :

HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

On indique l'url W3C et la langue en français.

II Balise <head>

Comme son nom l'indique, c'est l'en-tête de la page :
On peut y mettre :

- <title> </title> Le texte à l'intérieur sera le titre affiché dans la barre de votre navigateur.

- <meta /> Cette balise indique entre autre qu'on utilise des lettres dérivées du francais " â ï é... "
Pour l'instant on n'a pas besoin de plus d'infos sur cette balise.

En pratique on aura par exemple :

HTML
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

- <link /> On va, pour l'instant, utiliser cette balise simplement pour charger notre fichier CSS. Je rappelle que le CSS permet de mettre en forme votre page web.
Pour ce faire, mettez le fichier HTML et CSS dans le même dossier, puis par exemple, mettez :

HTML
<link rel="stylesheet" media="screen" type="text/css" href="pagedeforme.css" />

Avec pagedeforme.css le nom de votre fichier CSS.

Et si vous avez suivi, il est inutile de rappeler que c'est maintenant qu'il faut fermer sa balise </head>

III Balise <body>

Comme son nom l'indique aussi, c'est le corps de la page :
On peut y mettre énormément de balises... Je vais mettre l'essentiel pour créer une petite page web.

Texte

- <h1> </h1> Donc h veut dire titre, et 1 le 1er. En fait h1 = le titre le plus important, h2 = le 2^ème plus important, h3 = 3^ème plus important etc... jusqu'à h6.

(Oui 1 titre et 5 sous titres, c'est suffisant)

HTML
<h1>I Complexes</h1>

<h2>a) Module de z</h2>
...
<h2>b) Argument de z</h2>
...

<h1>II Trigonométrie</h1>

<h2>a) Loi des sinus d'Abbes</h2>
...
<h2>b) Cercle de rayon 1</h2>
...
<h2>c) Loi des tangentes</h2>
...

> voir la page <

Youpi des maths ! Hrum... Pardon.

- <p></p> permet de faire des paragraphes, au passage je rappelle la balise <br /> pour revenir à la ligne.

HTML
<h1>L'amour de Moe</h1>
<p>Il était une fois, Moe qui était barman...<br />...et soudain ce fut le drame.</p>
<h1>La vengeance de Burns</h1>
<p>Il était une fois...</p>

> voir la page <

On retrouve le code en faisant clique droit > code source (sous Firefox)

Et puis comme d'hab : on ferme sa balise </body>
Puis on ferme sa balise </html>

Si on combine tout ce qu'il y a ici, on peut faire une page comme ceci :

HTML
<html xmlns="http://www.w3.org/1999.xhtml" xml:lang="fr">
<head>
    <title>Football</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" media="screen" type="text/css" href="foot.css" />
</head>
<body>
    <h1>Thierry Henry</h1>
    <p>- Bonjour <em>Thierry</em>, un recruteur de basket vous a contacté, qu'est ce qu'il en ait ?<br />
    - C'était un mal entendu, ce n'est pas facile depuis la main au match contre l'Irlande...</p>
    <h1>Grégory Coupet</h1>
    <p>- Avez vous sauvé le corner lors de votre dernière <strong>blessure</strong> ?<br />
    - Non, ça ne valait pas le coup de se péter la jambe !</p>
</body>
</html>

> voir la page <

Pour l'instant le fichier foot.css est encore vide.

Remarque :
Après et avant un titre ou un paragraphe, une ligne est sautée automatiquement,
il n'est donc pas nécessaire d'ajouter la balise <br />.
Quand vous créez une page web, ouvrez votre fichier HTML en même temps que vous tapez votre code,

il est alors simple d'enregistrer puis d'actualiser la page pour voir si on a ce qu'on veut

Liens

Pour créer un lien, on utilise la balise <a>, ainsi que l'attribut href pour indiquer l'adresse.

Exemples :

HTML
<a href="http://www.kelt-informatique.fr/">Venez vite !</a>

Vous aurez sur votre page web : Venez vite !

Vous pouvez également ajouter une "bulle", un petit message au survol de la souris, à l'aide de title.

HTML
<a href="http://www.kelt-informatique.fr/" title="KelT Informatique">Venez vite !</a>

Vous aurez sur votre page web : Venez vite !

Vous remarquez que les liens ci-dessus s'ouvrent dans une nouvelle fenêtre (nouvel onglet sous Firefox),
pour ce faire il suffit d'ajouter la valeur _blank de l'attribut target.

Vous avez donc ce code :

HTML
<a href="http://www.kelt-informatique.fr/" title="KelT Informatique" target="_blank">Venez vite !</a>

Images

On peut insérer une image grâce à la balise <img />, avec l'attribut src qui nous donnera l'adresse.

HTML
<img src="http://adresse-image/" alt="image de fou" />

L'attribut alt va indiquer le texte dans le cas où l'image ne pourra pas être affichée (rassurez-vous, c'est assez rare)

Il y a encore beaucoup de balises très utiles qu'il faut apprendre au fur et à mesure avec la pratique.
Vous avez déjà les bases ici.
Je vous invite à suivre le tutoriel sur le langage CSS, histoire de mettre un minimum en forme notre texte brut.

Revenir à l'accueil