BASES DU LANGAGE HTML5
1. Introduction
Le langage html est interprété par les navigateurs internet.
Il repose sur la norme W3C.
C'est un langage qui utilise des balisespour la mise en forme d'un texte.
Exemple pour écrire du texte en gras on utilise la balise "strong"
Chaque balise est écrite ente les symboles < et >, et doit être refermée (symbole /).
(Certaines sont auto-fermantes comme <br/>, <img/>,<meta/>)
exemple: blablabla<strong>youpi</strong>blablabla, va écrire" youpi" en gras.
Toute page commence par <!DOCTYPE html > et finit par </html>.
Ensuite il y a l'entêtequi contient divers renseignements importants :
le titre de la page ,balise <title>,
le nom de l'auteur, (facultatif)
le mode d'encodage, (TRES IMPORTANT)
le lien vers la feuille de style (voir chapitre suivant), …..balises auto fermante <meta>
Elle est délimitée par les balises <head>et </head>
Voici un exemple :
<head>
<title> Page Web de l'option ISN </title>
<meta name="author" content="Cligniez-Djebali" />
<meta charset = "utf-8" />
</head>
Important: on a souvent des problèmes d'accents avec les pages WEB, les bases de données, …
C'est pourquoi il faut prendre garde au mode d'encodage des caractères.
Je vous recommande d'utiliser le jeu de caractères UTF-8.
Mais attention, votre fichier doit lui aussi être encodé en UTF-8!
Dans "Notepad++" dans l'onglet "encodage", choisissez "Encoder en UTF8 (sans BOM)"
Puis vient le corps de la page " body" entre les balises<body> et </body>
C'est entre ces balises que se trouvent les éléments de votre page.
Il repose sur la norme W3C.
C'est un langage qui utilise des balisespour la mise en forme d'un texte.
Exemple pour écrire du texte en gras on utilise la balise "strong"
Chaque balise est écrite ente les symboles < et >, et doit être refermée (symbole /).
(Certaines sont auto-fermantes comme <br/>, <img/>,<meta/>)
exemple: blablabla<strong>youpi</strong>blablabla, va écrire" youpi" en gras.
Toute page commence par <!DOCTYPE html > et finit par </html>.
Ensuite il y a l'entêtequi contient divers renseignements importants :
le titre de la page ,balise <title>,
le nom de l'auteur, (facultatif)
le mode d'encodage, (TRES IMPORTANT)
le lien vers la feuille de style (voir chapitre suivant), …..balises auto fermante <meta>
Elle est délimitée par les balises <head>et </head>
Voici un exemple :
<head>
<title> Page Web de l'option ISN </title>
<meta name="author" content="Cligniez-Djebali" />
<meta charset = "utf-8" />
</head>
Important: on a souvent des problèmes d'accents avec les pages WEB, les bases de données, …
C'est pourquoi il faut prendre garde au mode d'encodage des caractères.
Je vous recommande d'utiliser le jeu de caractères UTF-8.
Mais attention, votre fichier doit lui aussi être encodé en UTF-8!
Dans "Notepad++" dans l'onglet "encodage", choisissez "Encoder en UTF8 (sans BOM)"
Puis vient le corps de la page " body" entre les balises<body> et </body>
C'est entre ces balises que se trouvent les éléments de votre page.
2. Premières balises, première page
Il y a 6 balises de titres : h1, h2, h3, ….(ordre décroissant de taille)
Les textes sont écrits entre les balises de paragraphes <p> et </p>
Un saut à la ligne est provoqué par la balise auto fermante <br/>
<strong> et </strong> permettent d'écrire en gras,
<em> et </em> en italique,
<sub> et </sub> en indice
<sup> et </sup> en exposant.
Voici donc une première page web:
Pour l’écrire on utilise un simple éditeur de texte(par exemple le bloc note, ou mieux notepad++
qui pratique une coloration syntaxique bien pratique.)
Il est agréable pour la présentation, d'utiliser l'indentation comme en python.
Ainsi on risque moins de se tromper dans les balises imbriquées.
<!DOCTYPE html >
<head>
<title> Page test de l'option ISN </title>
<meta charset ="utf-8" />
</head>
<body>
<h1>Voici un gros titre</h1>
<p>Le langage xhtml permet d'écrire des textes <strong>en gras</strong> ou
<em>en italique</em>. On peut passer à la ligne,<br/>
et écrire des exposants ou des indices : u<sub>n</sub>=n<sup>2</sup>+1.</p>
</body>
</html>
Enregistrer ce fichier sous le nom " test.html " etouvrez avec un navigateur.
La page est très dépouillée ! On apprendra plus tard à mettre des couleurs, des bordures, des logos
avec les feuilles de styleet le langage css.
Les textes sont écrits entre les balises de paragraphes <p> et </p>
Un saut à la ligne est provoqué par la balise auto fermante <br/>
<strong> et </strong> permettent d'écrire en gras,
<em> et </em> en italique,
<sub> et </sub> en indice
<sup> et </sup> en exposant.
Voici donc une première page web:
Pour l’écrire on utilise un simple éditeur de texte(par exemple le bloc note, ou mieux notepad++
qui pratique une coloration syntaxique bien pratique.)
Il est agréable pour la présentation, d'utiliser l'indentation comme en python.
Ainsi on risque moins de se tromper dans les balises imbriquées.
<!DOCTYPE html >
<head>
<title> Page test de l'option ISN </title>
<meta charset ="utf-8" />
</head>
<body>
<h1>Voici un gros titre</h1>
<p>Le langage xhtml permet d'écrire des textes <strong>en gras</strong> ou
<em>en italique</em>. On peut passer à la ligne,<br/>
et écrire des exposants ou des indices : u<sub>n</sub>=n<sup>2</sup>+1.</p>
</body>
</html>
Enregistrer ce fichier sous le nom " test.html " etouvrez avec un navigateur.
La page est très dépouillée ! On apprendra plus tard à mettre des couleurs, des bordures, des logos
avec les feuilles de styleet le langage css.
3. Les liens
L’intérêt essentiel des pages web est l'utilisationdes liens. Les balises sont <a> et </a>
Un lien peut être absolu:
<a href="http://www.google.fr">Moteur de recherche</a>
affiche " Moteur de recherche " et lorsqu'on cliquedessus, envoie sur www.google .fr
Un lien peut être relatif:
<a href="python.html">Ma page de programmation</a>
affiche " Ma page de programmation " et lorsqu'on clique dessus envoie sur la page python.html qui
doit être dans le même dossierque la page qui contient le lien.
On peut changer de dossier en écrivant par exemple <a href="documents/python.html">
On peut aussi faire un lien vers un autre endroit de la même page (utile pour un lexique par
exemple). Il faut d'abord créer une "ancre" à l'endroit que l'on veut atteindre par le lien, avec:
<a name="toto">On veut aller ici</a>
puis créer le lien avec
<a href="ma_page.html#toto">
Un lien peut être absolu:
<a href="http://www.google.fr">Moteur de recherche</a>
affiche " Moteur de recherche " et lorsqu'on cliquedessus, envoie sur www.google .fr
Un lien peut être relatif:
<a href="python.html">Ma page de programmation</a>
affiche " Ma page de programmation " et lorsqu'on clique dessus envoie sur la page python.html qui
doit être dans le même dossierque la page qui contient le lien.
On peut changer de dossier en écrivant par exemple <a href="documents/python.html">
On peut aussi faire un lien vers un autre endroit de la même page (utile pour un lexique par
exemple). Il faut d'abord créer une "ancre" à l'endroit que l'on veut atteindre par le lien, avec:
<a name="toto">On veut aller ici</a>
puis créer le lien avec
<a href="ma_page.html#toto">
4. Les listes
On dispose de 2 types de listes.
Les listes à puces délimitées par les balises <ul> et </ul> et les listes numérotées délimitées par
<ol> et </ol>.
Chaque élément de la liste est alors délimité par <li> et </li>
Les listes à puces délimitées par les balises <ul> et </ul> et les listes numérotées délimitées par
<ol> et </ol>.
Chaque élément de la liste est alors délimité par <li> et </li>
5. Les images
On insère une image par la balise auto-fermante :
<img src="images/mon_image.jpg" />
ce qui affiche l'image "mon_image.jpg" situé dans le dossier "images"
ou si l'image est ailleurs, avec son adresse absolue :
<img src="http://www.cligniez.fr/images/logo.jpg" />
Il est souhaitable (indispensable pour respecter W3C) d'ajouter un texte alternatif, en cas de
problème de chargement, pour les non-voyants, …
<img src="robot.jpg" alt="photo du robot Thymio 2"/>
<img src="images/mon_image.jpg" />
ce qui affiche l'image "mon_image.jpg" situé dans le dossier "images"
ou si l'image est ailleurs, avec son adresse absolue :
<img src="http://www.cligniez.fr/images/logo.jpg" />
Il est souhaitable (indispensable pour respecter W3C) d'ajouter un texte alternatif, en cas de
problème de chargement, pour les non-voyants, …
<img src="robot.jpg" alt="photo du robot Thymio 2"/>
6. Les tableaux
On peut insérer un tableau par les balises
<table>
<tr><td> case 1 </td><td> case 2 </td><td> case 3</td></tr>
<tr><td> case 4 </td><td> case 5 </td><td> case 6</td></tr>
</table>
<tr> est la balise de ligne, <td> est la balise de cellule
<table>
<tr><td> case 1 </td><td> case 2 </td><td> case 3</td></tr>
<tr><td> case 4 </td><td> case 5 </td><td> case 6</td></tr>
</table>
<tr> est la balise de ligne, <td> est la balise de cellule
0 commentaires:
Enregistrer un commentaire