HTML, CSS Accueil
Chapitres :

HTML et CSS Chapitre 3
Les balises fondamentales en HTML5

3.1 Balises pour un fichier minimal

Le fichier minimal HTML5 se présente comme suit :

<!DOCTYPE html>

<html>

<head>

<title>Insérer le titre de la page ici</title>

</head>

<body>

</body>

</html>

3.1.1 Balise DOCTYPE

Il ne s'agit pas ici en tant que tel d'une balise.

Cette première ligne dans le fichier HTML permet de donner sa signature au fichier, pour une reconnaissance en tant que page Web.

En HTML5, cette signature est la première ligne du fichier et se présente comme suit :

<!DOCTYPE html>

Avant le HTML5, il fallait faire usage d'une syntaxe plus complexe et graduelle en fonction du type de contenu intégré dans notre page Web.

Vous trouverez davantage de détails ici : (HTML <!DOCTYPE> Declaration).

3.1.2 < html>

C'est une balise en paire qui englobe tout le code qui décrira le contenu de la page.

</html> signe la fin du fichier.

3.1.3 < head>

C'est une balise en paire qui délimite la section en-tête du fichier.

On y précise en particulier :

- Le titre de la page

- L'encodage

Aucune information contenue dans l'en-tête ne se retrouvera affichée dans le corps de la page, mais cette partie du code contient cependant des informations importantes.

3.1.4 < meta>

Cette balise orpheline permet de préciser l'encodage de notre page, le jeu de caractères choisi.

Elle se place dans l’en-tête. Elle s'utilise de pair avec son attribut « charset »

L'encodage UTF-8 se répand sur le Web, c'est donc celui que l'on préconise autant que possible. Il correspond à un standard informatique appelé Unicode mondialement reconnu.

L'encodage ISO-8859-1 (encodage de l'alphabet Latin) est aussi quelquefois utilisé, sur des pages plus anciennes.

Autres encodages possibles :

- OEM 775 (langues de l’Europe de l'est)

- Windows-1252 (ANSI)

- ASCII (ancien et dépassé)

3.1.5 < title>

Cette balise en paire permet de préciser le titre de la page, qui s'affichera dans le bandeau supérieur du navigateur. Elle se place dans l’en-tête.

Je conseille d'éviter les titres trop longs pour vos pages (au-delà de la centaine de caractères).

3.1.6 < body>

C'est une balise en paire qui délimite la partie principale du code, de la page.

De plus, tout ce qui sera écrit ici apparaîtra sur la page.

3.2 Balises de structuration de texte

3.2.1 <p> pour paragraphe

C'est une balise en paire qui permet de délimiter un paragraphe de texte.

3.2.2 <br /> pour retour à la ligne

C'est une balise orpheline qui permet de revenir à la ligne dans un paragraphe de texte.

Il existe également <br> et <br/>.

3.2.3 <h1> à <h6> pour les titres

Ce sont des balises en paire qui permettent de construire des hiérarchies de titres.

Une fois votre texte délimité en paragraphes, vous aurez le goût d'y mettre des titres. 6 Niveaux de hiérarchie vous sont proposés. <h1> étant le plus haut, <h6> le plus bas.

(Il est rare en pratique d'utiliser en-dessous de h3).

Si pour l'instant les dimensions, styles et polices sont non-modifiables, ils deviendront paramétrables grâce à l'usage du CSS.

3.2.4 <em> pour italique

Cette balise en paire permet de mettre une partie du texte en italique par défaut, mais tout autre changement de forme sera possible éventuellement avec CSS.

3.2.5 <strong> pour gras

Cette balise en paire permet de mettre une partie du texte en gras par défaut, mais tout autre changement de forme sera possible éventuellement avec CSS.

3.2.6 <mark> pour surligné

Cette balise en paire permet de mettre une partie du texte en surligné par défaut, mais tout autre changement de forme sera possible éventuellement avec CSS.

Pour les 3 balises précédentes, il est important de préciser que le CSS pourra venir repréciser le style d'affichage désiré. Ainsi, les balises sont avant tout là pour venir apposer un étiquetage sur le texte, celui-ci sera formaté avec précision par CSS en second lieu. De plus, cet étiquetage est aussi là pour venir mettre une importance accrue sur ces morceaux de texte. Ainsi, lors de l'utilisation d'outils de recherche, ceux-ci peuvent être sensibles à cette mise en importance, et vous pouvez utiliser ceci pour améliorer le référencement.

3.2.7 <ul> pour liste à puces

Cette balise en paire permet de signaler une liste non ordonnée (ou liste à puces). Exemple :

3.2.8 <ol> pour liste à numéros

Cette balise en paire permet de signaler une liste ordonnée (ou liste numérotée). Exemple :

3.2.9 <li> pour élément de liste

Cette balise en paire permet de signaler un élément de liste, ordonnée ou non ordonnée

Exemple de liste non-ordonnée :

<ul>

<li>Couteaux</li>

<li>Fourchettes</li>

<li>Cuillers</li>

</ul>

Exemple de liste ordonnée :

<ol>

<li>J'etudie</li>

<li>Je passe l'examen</li>

<li>J'obtiens une bonne note</li>

</ol>

Résultat dans un navigateur :

3.2.10 <a> pour hyperlien

Les hyperliens se présentent toujours par défaut en bleu, et soulignés, partie intégrante du texte.

Si un lien a déjà été visité, il apparaîtra en violet.

Il est possible de changer ces paramètres en utilisant CSS (voir plus bas)

3.2.11 Attribut href

La balise orpheline <a>, couplée avec son attribut href, permet de coder un hyperlien.

· Lien absolu:

Exemple :

<a href="http://www.google.com">Lien google</a>

Résultat (sur votre page web) :

Exemple d'intégration au sein d'un paragraphe :

<p>Bonjour, voici le

vers mon site Web, bonne visite!</p>

Ceci est un exemple de lien absolu, un lien vers un autre site.

Pour effectuer des liens vers d'autres pages de votre site, on effectue des liens relatifs (vers des fichiers dans le même répertoire que l'actuel, ou proche dans l'arborescence de l'hébergeur).

· Lien relatif :

Exemple :

<p>Cliquez <a href="contenu/page2.html">ici</a> pour la page 2</p>

Dans cet exemple, la page 2 de mon site web sera décrite par le fichier page2.html, situé dans le répertoire contenu, situé au même endroit que ma page actuelle.

3.2.12 Attribut id

Cet attribut effectue un lien vers une ancre. Il s’applique sur une balise de titre, par exemple.

Il peut être pratique de définir une ancre, un point de repère à placer dans la page Web lorsque celle-ci devient trop longue. Ceci symbolise une forme de saut, à des parties prédéfinies. L'attribut id permet de faire ceci.

Exemple :

<h1>Bienvenue sur ma grande page perso</h1>

<p>Aller directement à la partie traitant de :<br />

<a href="#cuisine">La cuisine</a><br />

<a href="#musique">La musique</a><br />

<a href="#electronique">Les montages en électronique</a><br />

</p>

<h2 id="cuisine">Mes recettes de cuisine préférés</h2>

<p>... (beaucoup de texte) ...</p>

<h2 id="musique">Mes groupes de musique préférés</h2>

<p>... (beaucoup de texte) ...</p>

<h2 id="electronique">Mes montages d'électronique</h2>

<p>... (beaucoup de texte) ...</p>

3.2.13 Attribut title

Cet attribut crée une infobulle dans un hyperlien. On utilise pour cela l'attribut title, comme suit :

<p>Bonjour. Souhaitez-vous visiter le

<a href="http://www.clg.qc.ca/"

title="Bienvenu chez vous!">

Site du Collège

</a> ?

</p>

Résultat :

3.2.14 Attribut target

Cet attribut permet l’ouverture de l'hyperlien dans une nouvelle fenêtre (ou un nouvel onglet).

Souvent on ne veut pas perdre notre page d'origine, on veut que l'hyperlien s'ouvre dans une nouvelle fenêtre ou un nouvel onglet.

Pour cela, on assigne l'attribut comme suit : target="_blank".

Exemple :

<p>Bonjour. Souhaitez-vous visiter le

Site du Collège

</a> ? La page s'ouvrira dans une nouvelle fenêtre.

</p>

3.2.15 Pour envoyer un courriel

Aucun attribut particulier n’est nécessaire pour cela, juste la valeur de href, qui devra débuter par mailto.

Utiliser la syntaxe suivante :

<p>

<a href="mailto:votrenom@monsite.com">Envoyez-moi un courriel !

</a>

</p>

3.2.16 Pour télécharger un fichier (download)

Encore href tout simplement.

<p>

<a href="http://monchemin/monfichier.zip">Télécharger le fichier

</a>

</p>

HTML et CSS Chapitre 3 Les balises fondamentales en HTML5

HTML et CSS Chapitre 3
Les balises fondamentales en HTML5