3 - Technologies Du Web 1 CHAPITRE 2 - Element HTML

UPB Technologies Web : HTML, les éléments
Technologies du web
HTML: les éléments
2021-2022
HTML (1/11)
au programme...
? Élément et attributs ?
? Catégories de contenu
? hyperliens
? autres
2/24
Éléments et attributs (1/5

Rappels :
 Les éléments permettent de structurer le contenu d’un document HTML
 les éléments sont identifiés par des balises
 a chaque élément est associée une sémantique qui définit son usage
NB: la liste officiel des éléments est disponible sur :

https://developer.mozilla.org/fr/docs/Web/HTML/Element Lien
3/24
Éléments et attributs (2/5)

attributs :
Les éléments peuvent être complétés par des attributs.
Un attribut
 définit une propriété pour un élément et lui associe une valeur
 se déclare au sein la balise ouvrante de l’élément
 se note en minuscules et sa valeur est entre guillemets "
<abbr title="Mozilla Developper Network">MDN</abbr> 3/24


attributs :
Les éléments peuvent être complétés par des attributs.
 certains attributs sont communs à tous les éléments

 title information textuelle sur le contenu de l’élément
 class associe une ou plusieurs classes à l’élément,
 Id nomme un élément de manière unique dans le document
 etc
3/24

attributs :
 title information textuelle sur le contenu de l’élément
 class associe une ou plusieurs classes à l’élément,
 Id nomme un élément de manière unique dans le document
 etc
3/24
? Liste des attributs ? Exemples

attributs :
 d’autres sont spécifiques à un élément
 src pour l’élément <img> (désigne la source de l’image)
 href pour l’élément <a> (désigne la cible du lien)
<img src="images/HTML5_Logo.png"
width = "300"
id="logo"
alt="le logo HTML 5" />
3/24
? Liste des attributs ? Exemples
au programme...
? hyperliens
? autres
8/24
catégories de contenu des éléments (1/9)
https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Content_categories
3/24
? Cf. Mozilla Developper Network ? Exemples
https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Content_categories
3/24

éléments de flux :
Ce sont des éléments structurants. Ils contiennent
généralement d’autres éléments emboités, du texte ou du
contenu intégré.
exemples:
 <p> paragraphe, ne peut contenir que des éléments de phrasé
 <ol>, <ul> listes ordonnées ou non ordonnées
 <table> tableaux
 <figure> contenu indépendant accompagné d’une légende et référencé dans le texte
 etc
3/24
?

éléments sectionnants :
Ils permettent une décomposition du document en sections.
Eléments sectionnants:
 <section> section générique dont le contenu est cohérent thématiquement
 <article> contenu autonome dans un document qui doit pouvoir être réutilisé indépendamment
 <aside> information connexe au contenu principal « voisin »
 <nav> contient des liens de navigation vers des fragments du document ou vers d’autres
documents (« menu »)
 etcs
3/24

éléments sectionnants :
Ils permettent une décomposition du document en sections.
Entête et pied:
 <header> introduction à un document, une section, un article. Peut contenir un titre, un logo,
etc.
 <footer> pied de page, d’une section, d’un article, etc. Peut contenir des informations, des liens
annexes, etc.
3/24
3/24
? MDN - article ? Exemples

éléments de titres:
Définissent le titre d’une section.
Titres:
 <h1> à <h6> titres, par ordre décroissant d’importance
3/24

éléments de titres:
Définissent le titre d’une section.
Titres:
 <h1> à <h6> titres, par ordre décroissant d’importance
3/24

éléments de phrasés :
Définissent le texte et ne peuvent contenir que du contenu de type phrasé.
Les séquences de contenu phrasé constituent des paragraphes.
exemples :
 <em> un élément de texte important, mis en valeur,
 <strong> un élément de texte très important, fortement mis en valeur,
 <code> une portion de code de programme
 <kbd> une entrée au clavier
3/24
HTML (1/11)
au programme...
? hyperliens
? autres
8/24
hyperliens (1/2)
<a> :
L’élément <a> permet de définir des liens hypertextes externes ou internes au document.
La cible du lien est définie par l’attribut href dont la valeur est une URL.
 élément de flux ou de phrasé, selon la catégorie du contenu
<a href="http://upb.ci"
target= "_blank" title=" Le site de UPB ">Le site de UPB</a>
3/24
hyperliens (2/2)
URL :
Uniform Resource Locator : identifiant des ressources web
= « adresses web »
 URL absolue :
 https://fr.wikipedia.org/wiki/Uniform_Resource_Locator
 mailto:prenom.nom@upb.ci?sujet=question
 URL relative :
 Images/firefox.png
3/24
HTML (1/11)
au programme...
? hyperliens
? autres
8/24
éléments génériques (1/1)
<div> et <span> :
<div> élément de flux générique
permet d’organiser le contenu du document
<span> élément de phrasé générique

permet de distinguer une portion de texte
 pas de sémantique spécifique a priori

 sémantique définie implicitement par le rédacteur, via les attributs class et id
 prendront leur importance avec les CSS
3/24
? ?
hors catégorie (1/1)
Certains éléments n’appartiennent à aucune catégorie car ils apparaissent nécessairement emboités dans un
autre élément.
quelques exemples :
<li> un élément dans une liste <ul> ou <ol>
permet d’organiser le contenu du document
<figcaption> la légende d’une <figcaption>
<tr>, <td> les cellules d’une <table>

etc.
3/24
? ?
À suivre :
HTML: arbre DOM
24/24
? ?

3 - Technologies Du Web 1 CHAPITRE 2 - Element 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

3 - Technologies Du Web 1 CHAPITRE 2 - Element HTML

Transféré par

Droits d'auteur :

Formats disponibles

UPB Technologies Web : HTML, les éléments

Éléments et attributs (1/5

NB: la liste officiel des éléments est disponible sur :

Éléments et attributs (2/5)

Les éléments peuvent être complétés par des attributs.

<abbr title="Mozilla Developper Network">MDN</abbr> 3/24

Éléments et attributs (3/5)

Les éléments peuvent être complétés par des attributs.

 certains attributs sont communs à tous les éléments

Éléments et attributs (4/5)

Éléments et attributs (5/5)

catégories de contenu des éléments (1/9)

catégories de contenu des éléments (2/9)

catégories de contenu des éléments (3/9)

catégories de contenu des éléments (4/9)

catégories de contenu des éléments (5/9)

catégories de contenu des éléments (6/9)

catégories de contenu des éléments (7/9)

catégories de contenu des éléments (8/9)

catégories de contenu des éléments (9/9)

 élément de flux ou de phrasé, selon la catégorie du contenu

éléments génériques (1/1)

<span> élément de phrasé générique

 pas de sémantique spécifique a priori

hors catégorie (1/1)

<figcaption> la légende d’une <figcaption>

<tr>, <td> les cellules d’une <table>

HTML: arbre DOM

Vous aimerez peut-être aussi