SÃ© Quence 2-LES ELEMENTS ET ATTRIBUTS HTML

LES ELEMENTS ET ATTRIBUTS HTML
Introduction aux langages HTML et CSS

El hadji Mamadou NGUER Enseignant
chercheur en Informatique UGB
Chapitre 2 : Les éléments et attributs HTML
Séquence 2 :
•Objectifs spécifiques : A la suite de cette séquence, l’étudiant doit être capable de:
1. Définir la notion de balise et d’élément HTML
2. Définir la notion d’attribut en HTML
3. Créer des rubriques et des paragraphes dans une page HTML
4. Commenter correctement un document HTML
5. Etc.
Définition et syntaxe
• Un élément HTML est généralement constitué d'une balise de début, de sa balise de fin et
du contenu inséré entre les deux balises.
<nomelement> Le contenu de l’élément ... </nomelement>
Exemple: <p> Mon premier paragraphe. </p>
Balise de début Contenu de l’élément Balise de fin*
<p> C’est un paragraphe </p>
<a href="default.htm" > C’est un lien </a>
<br />
* Les éléments sans contenu sont appelés éléments vides. Ils n’ont pas de balise de fin.
C’est le cas de <br> (qui indique un saut de ligne).
Imbrication des éléments HTML
• La plupart des éléments HTML peuvent être imbriqués (c.à.d. peut contenir d'autres
éléments HTML).
• Un document HTML est une imbrications d’éléments HTML.
Exemple
<html> • L'élément <html> définit l'ensemble du
<head> document HTML.
<title>Titre de la page</title>
</head>
<body> • Les éléments head, title et body sont imbriqués
<h1>Ma premiere entête</h1> dans l’élément html.
<p>Mon premier paragraphe.</p>
</body>
</html>
• Les éléments h1 et p sont imbriqués dans
l’element body.
La balise de fin
• Certains éléments HTML peuvent s'afficher correctement même si la balise de fin est oubliée :
<p> Ceci est un paragraphe
• L'exemple ci-dessus fonctionne dans la plupart des navigateurs, parce que cette balise de
fermeture est considérée comme facultative.
• Mais ne vous en fiez jamais. Beaucoup d'éléments HTML produiront des résultats inattendus
ou des erreurs si la balise de fin est oubliée.
Eléments HTML vides
• Les éléments HTML sans contenu sont appelés éléments vides. C’est le cas de la balise
<br> sans balise de fermeture.
• Les éléments vides peuvent être « fermé » dans la balise de début comme ceci: <br />.
• HTML5 n’exige pas la fermeture des éléments vides.
• Mais si vous avez besoin d’une validation plus stricte, ou de rendre votre document lisible
par les parseurs XML, vous devez correctement fermer tous les éléments HTML.
Sensibilité à la casse des balises
• Les noms de balises HTML ne sont pas sensibles à la casse: <P> signifie la même chose
que <p>.
• La norme HTML5 n’exige pas les noms de balise en minuscule,
• Mais W3C recommande l’utilisation des noms de balises HTML en minuscules, et l’exige
pour des types de documents plus stricts comme XHTML.
• Dans ce cours, nous utilisons toujours des noms de balise en minuscule.

Les attributs
• Tous les éléments HTML peuvent avoir des attributs
• Les attributs fournissent des informations supplémentaires sur les éléments HTML.
• Ils sont toujours spécifiés dans la balise de début,
• et sont généralement en paires nom/valeur comme: name = "value"

Exemple
• La langue du document peut être déclarée dans la balise <html> avec l’attribut lang comme
suit : <html lang="wo-SN">
• Déclarer la langue est importante pour les applications d'accessibles (lecteurs d'écran) et les
moteurs de recherche.
Les attributs
Les attributs en minuscule
• En HTML 5 les noms des attributs ne sont pas sensibles à la casse.
• Mais W3C recommande les attributs en minuscules en HTML, et l’exige pour les types de
documents plus strictes comme XHTML.
Citation des valeurs d'attribut
• La norme HTML5 n’exige pas de guillemets autour des valeurs d'attribut.
<a href=https://www.gouv.sn> est correct en HTML 5
• Mais W3C le recommande en HTML, et l’exige pour les types de documents plus stricts
comme XHTML.
• Les guillemets sont les plus utilisés, mais les apostrophes sont également autorisés.
Les attributs
Référence des attributs HTML
• Voici une liste de certains des attributs standards pour la plupart des éléments HTML:
Attributs Valeur Description
class classname Indique un nom de classe pour un élément
id Identifiant Indique un identifiant unique pour un élément
style style_definition Spécifie un style en ligne pour un élément
title tooltip_text Indique des informations supplémentaires sur un élément
(affiché comme un outil de pointe)
• Pour avoir la liste complète des attributs en HTML

https://www.w3schools.com/tags/ref_attributes.asp
Les rubriques
Les titres
• Les titres sont définies avec les balises <h1> à <h6>. <h1> définit le titre le plus important
et <h6> le moins important.
Ceci est un titre 1
• Exemple
<h1>Ceci est un titre 1</h1> Ceci est un titre 2
<h4>Ceci est un titre 4</h4>
Ceci est un titre 5
<h6>Ceci est un titre 6</h6>
• Remarque: Les navigateurs ajoute automatiquement un espace vide (une marge) avant
et après chaque titre.
Les rubriques
L’importance des entêtes
• Utilisez les entêtes HTML pour les titres seulement et non pour rendre un texte gros
ou gras .
• Les moteurs de recherche utilisent les entêtes pour indexer la structure et le contenu de vos
pages web.
• Comme les utilisateurs peuvent parcourir vos pages par ses rubriques, il est important
d'utiliser des rubriques pour montrer la structure du document.
• Les rubriques H1 doivent être utilisées comme rubriques principales, suivies des rubriques
H2, puis les rubriques H3, et ainsi de suite.
Les rubriques
Lignes HTML
• La balise <hr /> crée une ligne horizontale dans une page HTML.
• L'élément hr peut être utilisé pour séparer le contenu:
Exemple
Ceci est un paragraphe
<p>Ceci est un paragraphe</p>
<hr />
Ceci est un paragraphe
<hr />
<p>Ceci est un paragraphe</p> Ceci est un paragraphe
Les rubriques
L’élément <head>
• L’élément <head> n'a rien à voir avec les titres. Il est placé entre les balises <html> et
<body>
• C’est un conteneur pour les métadonnées c.à.d. des données sur le document HTML. Les
métadonnées ne sont pas affichées.
• Remarque: Les métadonnées définissent

• Exemple:
généralement le titre du document, le jeu <!DOCTYPE html>

de caractères, les styles, des liens, des <html>
scripts, etc. <head>
<title>Titre de la page</title>
<meta charset="UTF-8">
</head>
Les paragraphes
• Les documents HTML sont divisés en paragraphes.
• Les paragraphes sont définies avec la balise <p>.
• Exemple
<p>Ceci est un autre paragraphe </p>
• Notons que les navigateurs ajoutent automatiquement une ligne vide avant et après un
paragraphe
• Ne pas oublier la balise de fin même si la plupart des navigateurs s’afficheront
correctement si la balise de fin est oublié.
• Exemple <p>Ceci est un paragraphe
Les paragraphes
Sauts de ligne HTML
• L’élément <br> définit un saut de ligne .
• Il est utilisé si on veut une nouvelle ligne sans commencer un nouveau paragraphe:
• Exemple
<p>Ceci est<br>un paragraphe<br>avec des sauts de ligne.</p>
• <br> est un élément HTML vide. Il n'a pas de balise de fin.
• <br> ou <br />

Même si <br> marche dans tous les navigateurs, écrire <br /> sera exigé en XHTML et en
XML où les éléments sans balise de fin ne sont pas autorisés.
Les paragraphes
L’élément <pre>
• L'élément <pre> définit un texte préformaté.
• Le texte à l'intérieur d'un élément <pre> est affiché dans une police à largeur fixe
(généralement Courier), et il préserve à la fois les espaces et les sauts de ligne:
• Exemple
<pre>
Université Cheikh Anta Diop de Dakar.
Université Gaston Berger de Saint-Louis.
Université Alioune Diop de Bambey.
Université Assane Seck de Ziguinchor.
</pre>
Divers
Les commentaires en HTML
• Les commentaires peuvent être insérés dans le code HTML pour le rendre plus lisible et
compréhensible. Les commentaires sont ignorés par le navigateur et ne sont pas affichés.
• Syntaxe : 
• Remarque: Il ya un point d'exclamation après le crochet ouvrant, mais pas avant le crochet
fermant.
Commentaire conditionnel
• On peut avoir des commentaires conditionnels en HTML qui permettent de définir des
balises à exécuter par Internet Explorer. • Syntaxe : 
Divers
Afficher le code source HTML
• Pour le savoir, faites un clic droit dans la page et sélectionnez "Afficher la source" (IE) ou
"source de la page" (Firefox), ou similaire pour les autres navigateurs.
• Cela ouvre une fenêtre contenant le code HTML de la page.
Inspecter un élément HTML

• Pour inspecter un élément (c.à.d. voir les éléments le constituant), on fait un clic droit sur
l’élément (ou une zone vierge) et choisir « Vérifier » ou « Inspecter l'élément ». On verra à la
fois le HTML et le CSS).
• On pourra également modifier le code HTML ou CSS à la volée dans le panneau Eléments
ou styles qui s'ouvrira.
Divers
• Un chemin de fichier décrit l'emplacement d'un fichier dans la structure des dossiers d'un site
Web. Ils sont utilisés pour localiser des fichiers externes tels que:
• les pages Web
• les images
• les feuilles de style
• les fichiers de scripts JavaScript
Chemin Description
<img src="image.jpg"> picture.jpg est situé dans le même dossier que la page courante
<img src="images/image.jpg"> picture.jpg se trouve dans le dossier images du dossier courant
<img src="/images/image.jpg"> picture.jpg se trouve dans le dossier images à la racine du site Web
<img src="../picture.jpg"> picture.jpg est situé dans le dossier parent du dossier courant

SÃ© Quence 2-LES ELEMENTS ET ATTRIBUTS HTML

Transféré par

Droits d'auteur :

Formats disponibles

SÃ© Quence 2-LES ELEMENTS ET ATTRIBUTS HTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

SÃ© Quence 2-LES ELEMENTS ET ATTRIBUTS HTML

Transféré par

Droits d'auteur :

Formats disponibles

LES ELEMENTS ET ATTRIBUTS HTML

Introduction aux langages HTML et CSS

• HTML5 n’exige pas la fermeture des éléments vides.

• La norme HTML5 n’exige pas les noms de balise en minuscule,

• Dans ce cours, nous utilisons toujours des noms de balise en minuscule.

• Ils sont toujours spécifiés dans la balise de début,

• et sont généralement en paires nom/valeur comme: name = "value"

• Pour avoir la liste complète des attributs en HTML

• Remarque: Les métadonnées définissent

généralement le titre du document, le jeu <!DOCTYPE html>

• <br> ou <br />

• Cela ouvre une fenêtre contenant le code HTML de la page.

Inspecter un élément HTML

<img src="images/image.jpg"> picture.jpg se trouve dans le dossier images du dossier courant

Vous aimerez peut-être aussi