LE HTML ISN Terminale S

Un peu d’histoire …

SGML

Déclaration de type de document (DTD)  Une DTD décrit la « grammaire » d’un document et précise :  Les balises (tags) possibles et leurs attributs  l’imbrication des balises à l’intérieur d’autres balises  quels balises et attributs sont facultatifs et lesquels sont obligatoires

Document bien formé

Document bien formé ?

Les bases du HTML

Hypertext Markup Language (HTML)  Décrit le contenu et la structure de l’information sur une page web  Ce n’est pas la même chose que la présentation  Le texte est entouré de balises d’ouverture et de fermeture  Le nom de chaque balise est appelé un élément  Syntaxe : contenu  Exemple: c’est un paragraphe

HTML 5  HTML 5 assure une rétrocompatibilité avec l’existant  Le principe de séparation du contenu et de la présentation est renforcé  Le code est relativement simplifié  Il est orienté vers le développement d’applications web

Structure minimale d’une page HTML 5

Exemple de structure d’une page

Titre de la page  Placé dans l’entête de la page  Affiché dans le navigateur et les favoris…

Paragraphe  Placé dans le « corps » de la page

Titres,, …,

Eléments de type bloc  Les éléments de type bloc occupent toute une région de contenu  Exemples : paragraphes, listes, tableaux, …  Le navigateur insère un saut de paragraphe entre les éléments de type bloc.

Eléments de type ligne  Les éléments de type ligne occupent une plus petite partie de l’espace  Exemples : texte en gras, images, liens, etc…  Le navigateur autorise l’affichage de plusieurs éléments de type ligne sur la même ligne  Ils doivent être imbriqués dans des éléments de type bloc

D’autres balises  Certaines balises contiennent des attributs  Syntaxe: contenu  exemple: Page suivante

D’autres balises  Des balises sont vides ; elles sont ouvertes et fermées en une seule instruction  syntaxe:  exemple:

Les liens  L’attribut href spécifie la destination de l’URL  Les liens ou les ancres sont des éléments de type ligne, aussi doivent-ils être placés à l’intérieur d’un élément de type bloc comme p ou h1

Les liens  Plusieurs types de liens peuvent être utilisés :  Absolu: vers un autre site web  Relatif : vers une page du même site

Images  L’attribut src spécifie le fichier (source) de l’image  On précise la description de l’image avec l’attribut “alt” (inutile de préciser image de …)

Plus sur les images  Si elle est placée dans une ancre, l’image devient un lien  L’attribut title spécifie une info-bulle

« Mapper » une image

Commentaires  Les commentaires sont utiles …  Les commentaires ne peuvent pas être imbriqués

Eléments phrase et  em: texte mis en évidence  strong: texte très fortement mis en évidence

Liste non ordonnée :,  ul représente une liste à puce d’items (de type bloc)  li représente un item dans cette liste

Liste ordonnée :  ol représente une liste numérotée d’items  On peut modifier les puces (avec les feuilles de styles)

Liste de description,,  dl représente une liste de description de termes  dt représente chaque terme, et dd est la description

Tableaux,,  table définit l’ensemble du tableau, tr chaque ligne, et td chaque cellule

Entête et légende des tableaux :,  th contient les cellules de titre du tableau  Caption contient une description du tableau

HTML Caractères spéciaux