LE HTML ISN Terminale S 2014-2015. Un peu d’histoire …

Présentation au sujet: "LE HTML ISN Terminale S 2014-2015. Un peu d’histoire …"— Transcription de la présentation:

1 LE HTML ISN Terminale S 2014-2015

2 Un peu d’histoire …

3 SGML

4 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

5 Document bien formé

6

7 Document bien formé ?

8

9

10

11 Les bases du HTML

12 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

13 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

14 Structure minimale d’une page HTML 5

15 Exemple de structure d’une page

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

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

18 Titres,, …,

19 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.

20 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

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

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

23 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

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

25 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 …)

26 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

27 « Mapper » une image

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

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

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

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

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

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

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

35 HTML Caractères spéciaux

36

37