petite introduction html1

T o u te P e t ite Introduction aux
L ang a g e s H T M L / X H T M L
Programmation Internet - P o u r D é b u t a n t
J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
+243 - 851278216 - 899508675 - 995624714 - 902263541 -
813572818
La dernière révision de ce texte est disponible sur CD.
L’Internet a été inventé par Tim Berners-Lee, celui-là même qui a par après
fondé le World Wide Web Consortium (W3C) qui tente d’élaborer un standard
commun du HTML.
La structure des pages Internet est souvent décrite avec le lange HTML (Hyper-
Text Markup Language). Les pages HTML sont sauvegardées avec l’extension
« htm » pour les versions antérieures du MS-DOS, et avec l’extension « html »
pour les systèmes récents.
Hyper-Texte (=hyperlien) signifie un texte qui activé, déclenche une action et
dans le cas de l’Internet cette action peut être l’accès ou le renvoi à un autre
endroit de la page en cours ou à une autre page Web, ou le déclenchement
d’une autre action (lancement d’une vidéo, d’une musique…).
Mark-up signifie que le langage est descriptif, qu’il sert juste à marquer
(baliser) le texte du code source (format texte normal : pur/brut) pour indiquer
à l’ordinateur comment rendre un élément texte à la position où se trouve
l’unité de sortie (écran [curseur de l’écran, pas celui de la souris], projecteur,
imprimante, circuit vidéo, son…). Actuellement le HTML peut r intégrer des
fichiers multimédias (texte et audiovisuel : image fixe, vidéo, audio…) dans une
page web, bref il décrit (ou structure) la page Web.
Les pages Web sont rendues (affichées) par un navigateur Web (Web Browser).
L’élément de base dans le langage HTML est la BALISE ou TAG, par exemple
l’élément dans la paire de balises <s></s> qui indique que le texte entre les
deux doit être affiché comme strikethru (rayé = barré). Chaque balise est
enfermée dans une paire <>.

Deux sortes de balises :
1. Les balises inaugurales (initiant la définition d’un l’élément, donc
indique le début d’un élément HTML) sont dites « ouvrantes » (parfois
aussi « d’ouverture ») et sont délimitées seulement par la paire <>.
2. Les balises de clôture (terminant la définition de l’élément, donc indique
la fin d’un élément HTML) sont dites « fermantes » (parfois aussi « de
fermeture ») et sont délimitées par </ et >.
Les balises sans le slash-bar barre oblique ( / ) sont donc dites ouvrantes pour
initier une action structurale, celles comportant le / sont dites fermantes ou de
fermeture, elles indiquent la fin de l’action.
Par exemple le mark-up
<s>Ce texte est rayé, barré</s>
ou
<strike>Ce texte est rayé, barré</strike>
ou
<del>Ce texte est rayé, barré</del>
Produiront tous trois l’affichage suivant :
Ce texte est rayé, barré
<s></s> et <strike></strike> et <del></del> ne sont que trois éléments
parmi tant d’autres.
<s> est une balise et </s> une autre balise. Les balises définissent (délimitent)
des éléments de la page Web. Balises, structure et contenu sémantique du
document web qu’elles définissent constituent un « élément de la page ». Par
exemple la description suivante indique un paragraphe :
<p>Un paragraphe</p>
Types de balises :
1. Certaines balises DOIVENT avoir leur paire fermante, pour délimiter
l’étendue de leur action. Par exemple <a>, <b>, <p>, <div>, <span>, <s>,
<ol>, <ul>, <dl>…

2. D’autres n’ont pas besoin de la paire fermante, par exemple <img>, <li>,
<br>.
a. La nouvelle convention notationnelle (XHTML) veut qu’on termine
(ferme) les balises ouvrantes des balises vides par un « espace
slash » juste devant le > de fermeture, comme ceci :
<balise_ouvrante />, sans la balise fermante (mais en fait c’est
une contraction d'une balise ouvrante et d'une balise fermante,
avec un espace et une barre oblique à la fin : <tag></tag> donne
<tag />).
b. On peut tout aussi bien sans problèmes dans le HTML définir ces
éléments avec la paire conventionnelle de balises, comme ceci :
<li></li>.
Types d’éléments HTML :
Il existe dans le HTML des éléments « bloc » et des éléments « inline ».
1. Les éléments bloc (éléments de bloc, par exemple : <div></div>,
<p></p>, <blockquote></blockquote>…) sont automatiquement
précédés d’un retour à la ligne et occupent en principe toute la largeur
du contenant. Par exemple <div>contenu de div</div> s’affichera
comme ceci :
Éléments HTML bloc :
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl>
<dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6>
<header> <hr> <li> <main> <nav> <noscript> <ol> <output> <p> <pre>
<section> <table> <tfoot> <ul> <video>.
2. Les éléments inline (Éléments en ligne, par exemple : <a></a>,
<span></span>, <b></b>, <em></em>…) ne sont pas repositionnés et
n’occupent que l’espace nécessaire à leur affichage, l'espace associé aux
balises.
Par exemple <b>Texte Gras</b> affiche en gras dans sa position exacte
dans la source.

Éléments HTML inline :
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code>
<dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <q>
<samp> <script> <select> <small> <span> <strong> <sub> <sup>
<textarea> <time> <tt> <var>
Contenu des « éléments :
1. La plupart des balises (<li />, <a></a>, <q></q>…) traitent la donnée
présentée, souvent du texte brut, mais ça peut bien aussi être un autre
élément (éléments imbriqués) contenant au final un texte.
Par exemple <li>Entrée de liste</li><li></li> suite d'après
Par exemple <li>Entrée de liste</li><li></ol> suite d'après
2. D’autres balises (<img />, <br />, <area /> …) dites balises vides ne
traitent pas les données présentées dans le texte du code source.
Par exemple <img border="1" title="dummy img1">Suite de la page
Web</img><img border=1 alt=dummy img2>2è Suite de la page Web
Dans cet exemple, la chaîne « border=1 » est dite « attribut de balise »
(ici la balise <img>). L’attribut, défini seulement dans la balise ouvrante,
donne des détails supplémentaires sur la façon de traiter l’élément, ici
« ajouter un cadre à l’espace réservé à cette image ».
En définitif, la syntaxe d’un élément HTML est la suivante :
<bo a1="v1" a2="v2" … an="vn"> Texte </bf>
<bo…> = Balise Ouvrante.

a1 … an = Attributs.
v1 … vn = Valeurs des Attributs.
</bf> = Balise Fermante.
Texte = Texte à afficher.
La version actuelle au mardi 7 novembre 2017 du HTML est le HTML 5.
Pour ne pas faire trop court, voici une petite application pour illustrer comment
utiliser le HTML, pour faire quelque chose d’utile : la création d’un tableau
(données tabulaires = données en rangées et en colonnes).
Rôle de différents éléments de tableau :
<table></table> : Délimite l’espace pour les éléments du tableau.
<legend></legend> : Légende du Tableu.
<summary></summary> : Résumé du Tableu.
<tr></tr> : Délimite un rang du tableau (table row = rangée [horizontale] de table).
<td></td> : Délimite une cellule de donnés du tableau (table data = données de table).
<caption></caption> : Délimite l’intitulé du tableau.
<th></th> : Délimite une entrée (contenu) cellule d’entête (intitulé de colonne) du tableau = Table
Heading.
<tbody></tbody> : Délimite le corps du tableau.
<thead></thead> : Délimite l’entête du tableau.
<tfoot></tfoot> : Délimite le pied du tableau.
<colgroup></colgroup > : Groupe des colonnes consécutifs du tableau
<col></col > : Groupe une pile de cellules verticales.
Par exemple le code ci-dessous :
<table>
<tfoot>
<tr> <th colspan=3> Pied du tableau </th> </tr>
</tfoot>
<tbody>
<colgr<tr> <th> TH1L1 </th> <th> TH2L1 </th> <th> TH3L1 </th> </tr>
<tr> <td> L1C1 </td> <td> L1C2 </td> <td> L1C3 </td> </tr>
<tr> <td> L2C1 </td> <td> L2C2 </td> <td> L2C3 </td> </tr>
<tr> <td> L3C1 </td> <td> L3C2 </td> <td> L3C3 </td> </tr>
<caption> Caption : Démonstration de Tableau </caption>
<thead> <th colspan=3> Entête du tableau </th> </thead>
</tbody>
</table>
Produit l’affichage suivant :