PROGRAMMER EN HTML
Plan du cours
I-OUTILS DE PRODUCTION DES SITES WEB STATIQUES
II-ELEMENTS DE BASE
D’UNE PAGE HTML
VIII-INSERTION D’UN
ELEMENT AUDIO
IX-INSERTION D'UN ELEMENT VIDEO
I : OUTILS DE PRODUCTION DES
SITES WEB STATIQUES
1-Editeurs de
textes
Ce sont des programmes
dédiés à l'écriture de code. On peut en général les utiliser pour de multiples langages
de programmation. Ils se révèlent être de puissants alliés pour les créateurs
de sites web. Il existe de nombreux éditeurs dédiés à la création de sites
web :
Sous Windows
·
Bloc-Notes
On peut tout à fait créer un site web juste avec Bloc-Notes, le
logiciel d'édition de texte intégré par défaut sur Windows.
·
Notepad++, est l'un des plus utilisés d'entre eux
sous Windows. Ce logiciel est simple, en français et gratuit.
D'autres éditeurs disponibles sous Windows existent : jEdit ; PSpad ; ConTEXT.
2-Navigateurs
Ce sont des logiciels qui permettent de
visualiser les pages web. Les principaux navigateurs sont : Internet Explorer, Mozilla Firefox, Opéra,
Google Chrome, Safari, etc.
3-Les
langages du web
HTML et CSS sont deux langages qu'il faut connaitre pour
créer des sites web. C'est le navigateur web qui fera la traduction entre ces
langages informatiques et ce qu’on verra s'afficher à l'écran.
Il faut cependant noter que 30% de sites web
sont réalisés à partir des CMS
(Content Managment System ou Système de Gestion des Contenus) qui sont des
plateformes toutes faites telles que : wordpress, drupal, joomla etc.
Le rôle de HTML et
CSS : Les deux langages qui se complètent ont des rôles différents :
·
HTML (HyperText Markup Language) : son rôle est de créer et d’organiser le
contenu du site. C'est en HTML qu’on écrit ce qu’on souhaite que la page
affiche : du texte, des liens, des images... On dira par exemple : "Ceci
est mon titre, ceci est mon menu, voici le texte principal de la page, voici
une image à afficher, etc.".
·
CSS (Cascading Style Sheets, aussi appelées Feuilles de style) : le rôle du
CSS est de gérer l'apparence de la page web (agencement, positionnement,
décoration, couleur, taille du texte...).
Le rôle du
navigateur :Le travail du navigateur est de lire et d’exécuter le code HTML et
CSS pour afficher un résultat visuel à l'écran. Si le code CSS dit "Les
titres sont en rouge", alors le navigateur affichera les titres en rouge.
Sites web statiques
et sites web dynamiques :Les pages web créées uniquement
avec le HTML et CSS sont dites statiques
parce qu’il n’y a pas interactivité (dialogue) entre l’internaute et le
serveur. Pour avoir des sites dynamiques,
il faut utiliser en plus d’autres langages comme le JavaScript, le PHP par
exemple pour compléter le html.
II-ELEMENTS DE BASE D’UNE PAGE HTML
Le HTML
(Hyper Text MarkupLanguage) est un langage qui permet de présenter des
informations sur Internet et dont le rôle est de formaliser l'écriture d'un
document avec des balises de formatage. Les balises permettent d'indiquer la
façon dont doit être présenté le document et les liens qu'il établit avec
d'autres documents.Le HTML a été inventé en1991 par un scientifique nommé Tim Berners-Lee.Les différentes
versions du HTML sont : HTML1, HTML2, HTML3, HTML4 et HTML5.
Lorsqu’on
regarde une page sur internet, ce qu’on voit est l’interprétation par le navigateur
du code HTML. Pour voir le code HTML d’une page sur internet, il suffit de
cliquer tout simplement sur la rubrique « vue » dans le menu
supérieur du navigateur et sélectionner « source ».
Le langage HTML utilise
les éléments, les balises et les attributs.
1-Éléments
Les éléments donnent la structure d'un document HTML en indiquant
comment le navigateur doit présenter la page web.
HTML n’est qu’une question d’éléments,
apprendre le HTML c’est apprendre à utiliser les éléments.
Exemples :
p est un élément utilisé pour marquer les
paragraphes
b est un élément utilisé pour afficher un texte
en caractères gras
i est un
élément utilisé pour mettre un texte en italique, etc.
2- Balises
Les
balises sont des étiquettes qu’on
utilise pour marquer le début et la fin d'un élément.Toutes les balises ont le
même format : elles commencent par un signe inférieur à « < » et finissent
par un signe supérieur à « > ». On les appelle des « chevrons ».
Il
existe deux types de balise :
-
Les balises ouvrantes :
<b>
-
Les balises
fermantes : </b>
Exemple :
Si on écrit dans un éditeur de
texte
<b>Ce texte doit être en caractères gras. </b>
<b> est une balise ouvrante qui marque le début de
la ligne.
</b>est une balise fermante qui marque la fin de la
ligne.
Le navigateur va
afficher pour cet exemple :
Ce texte doit être
en caractères gras.
Cependant, il existe des éléments à la fois ouverts et fermés dans la
même balise.
Ces éléments dits vides ne sont pas
associés à un passage particulier dans le texte, mais sont des étiquettes
isolées. Un exemple d'un tel élément est celui de <br />, qui force un saut de ligne (retour à la ligne) :
Exemple :
Si on écrit dans un éditeur de texte
Je suis<br
/> allé à la gare pour voyager en toute sécurité
Dans le navigateur,
cela donne :
Jesuis
allé à la gare pour voyager en toute sécurité.
Un autre élément ouvert
et fermé dans la même balise est<hr
/>, qui sert à tracer une ligne horizontale ; « hr » tient pour «
horizontal rule ».
Autre
classification des balises :
-
Les balises
paires : <b> …..</b>
-
Les balises
orphelines : <br/>
Remarque :
Les balises
s’ouvrent et se ferment dans un ordre précis. Elles doivent être fermées dans
le sens inverse de leur ouverture. Ainsi, on peut utiliser plusieurs éléments en même temps, tant qu’on évite les
chevauchements.
Exemple :
<b><i>Un
texte en caractères gras et en italique</i></b>
Et NON comme cela :
<b><i>Un
texte en caractères gras et en italique</b></i>
La différence tient au
fait que, dans le premier exemple, on a clos la deuxième balise ouverte
d’abord, la première en dernier. On évite ainsi de se tromper ainsi que le
navigateur.
Les éléments h1, h2, h3, h4, h5 et h6 servent à
marquer des titres, « h » tient pour « heading » où h1 est le premier niveau et
avec normalement le corps le plus grand, h2 est le deuxième niveau et
normalement un texte légèrement plus petit, et h6 est le sixième et dernier
niveau dans la hiérarchie des titres et normalement le plus petit texte
|
Exemple |
Résultat |
|
<h1> Titre
Principal</h1> |
Titre
Principal |
|
<h2> Titre Secondaire
</h2> |
Titre Secondaire |
|
<h3> Paragraphe
Principale </h3> |
Paragraphe Principal |
|
<h4> Paragraphe
Secondaire </h4> |
Paragraphe secondaire |
|
<h5> TitreParagraphe1
Secondaire </h5> |
Titre Paragraphe 1
secondaire |
|
|
|
3-Les Attributs
Les attributs viennent
compléter les balises avec des informations supplémentaires.Ils sont un peu
considérés comme les options des balises.
Exemple :
<h2 style="color:blue;">Je
retrouve la sérénité </h2>
Ici, style est un attribut ;
’’color : blue’’ est sa valeur.
Cet attribut donne une couleur bleue au texte ‘’ Je retrouve la sérénité ’’.
Le navigateur affiche : Je retrouve la sérénité
Les attributs s'inscrivent toujours
au sein de la balise ouvrante, et ils sont suivis par un signe égal et la
valeur de l'attribut entre des guillemets. Ici le point-virgule sert à séparer
plusieurs instructions de style.
4-Structure de base d’un document HTML
La
toute première ligne indique que c’est bien un document HTML qu’on veut créer.
On le fait avec la balise ouvrante <html>.Ensuite
le document a besoin d’un « en-tête »
(Head en anglais), qui fournit des informations à propos du document, d’un
« corps » (body), qui
constitue le contenu du document. Enfin, on ferme le document avec la balise
fermante </html>.
Ce qui donne la structure de base
suivante :
<html>
<head>
<title>…………………………………… </title>
</head>
<body>
……………………………………………………………
…………………………………………………………..
</body>
</html>
Exemple:
|
<html> <head> <title>Mon site Web</title> </head> <body> <h1>Présentation du site</h1> <p>Mon site web est la vitrine
de mes activités sur internet…...</p> <h2>Page d’accueil du site</h2> <p>La page d’accueil est la façade principale du site…</p> </body> </html> |
Remarques :
1°<title>est l’élément servant d’indiquer un titre.
2°Le titre ne s’affiche
pas dans la page, mais en haut de celle-ci (le plus souvent dans l’onglet du
navigateur).
3°il est fortement recommandé de structurer son
code HTML proprement avec des sauts de ligne et des indentations (obtenues avec
la touche TAB du clavier).
4°La première ligne
peut aussi s’écrire < ! Doctype html>.Ce n’est pas une balise comme
les autres.
5-Tester un document HTML
Pour tester un
document HTML, il faut d’abord
l’écrire dans un éditeur de texte
(bloc-note ou notepad++), après, l’enregistrer dans le disque dur de
l’ordinateur, enfin l’ouvrir dans un navigateur( internet explorer, Mozilla
firefox,etc.)
5.1-Enregistrer un site sur le disque dur :
Pour enregistrer
le site sur le disque dur de
l’ordinateur :
- Dans
« Bloc-notes », on sélectionne « Enregistrer
sous... » dans « Fichier »,
dans le menu supérieur.
- On
sélectionne ensuite « Tous fichiers
» dans la boîte « Enregistrer avec
le type ». C'est très important, car sinon on l'enregistrera comme un
document de type texte et non comme document HTML.
- Maintenant on sauvegarde le document avec le nom «
page1.htm » (le suffixe « .htm » indique qu'il s'agit d'un document HTML,
« .html » donne le même résultat). L'endroit où on enregistre le document
sur le disque dur importe peu, tant qu’on sait où le retrouver.
5.2-Pour
ouvrir un site déjà enregistré :
Ouvrez le navigateur Internet Explorer par exemple :
- Dans
le menu supérieur du navigateur (Internet Explorer par exemple), on
sélectionne « Ouvrir » dans « Fichier
»OU cliquez sur (CTRL+O).
- Cliquez
sur « Parcourir » dans le dialogue qui apparaît.
- Cherchez
ensuite le document HTML et cliquez
enfin sur « Ouvrir ».
La page web s’affiche
identique à celle qui apparaitra dans le site web.
6-Les commentaires :
Un commentaire en HTML est un texte qui sert simplement à
expliquer le code à l’utilisateur. Il n’est pas affiché, il n’est pas lu par
l’ordinateur, il ne change rien à l’affichage de la page.
Code
HTML :
< !
- -
Ceci est un commentaire-->
III-INSERTION DES LIENS
Il
s’agit d’un texte sur lequel on peut cliquer pour se rendre sur une autre page
d’un site ou dans un autre site. Il est généralement souligné et en couleur
bleue dans les pages web.
Exemple
:<a href= ‘’monFichier’’
> Lien vers monFichier</a>
L'élément « a » tient
pour « anchor » (ancre). Et l'attribut href est l'abréviation de « hypertext
reference » (appel hypertexte), qui indique où conduit le lien, habituellement
à une adresse Internet ou à un nom de fichier.
Le navigateur affiche: Lien vers
monFichier
Lorsqu’on clique sur ce
lien, on arrive au fichier nommé monFichier
1-Liens entre
deux pages différentes d’un même site
Si on veut aller de la page 1 à la page 2, on insère un lien à la page 1
de la manière suivante :
<a href="page2.htm">Cliquez ici pour aller à la page 2</a>
Si la page 2 se
trouvait dans un sous-dossier (appelé "sous-dossier"), le lien serait
alors :
<a href="sous-dossier/page2.htm">Cliquez ici pour aller à la
page 2</a>
En sens inverse, un
lien de la page 2 (dans le sous-dossier) à la page 1 serait le suivant :
<a href="……./page1.htm">Un lien vers la page 1</a>
Le
chemin « ……./ » pointe sur le dossier à un niveau supérieur par rapport à la
position du fichier où le lien se trouve. En suivant le même raisonnement, On
peut aussi pointer sur une position deux dossiers (ou plus) en amont avec «
…../….../ ».
NB : Ici on utilise des
liens sans connaitre l’adresse complète d’une page.
Par exemple : <ahref="page2.html">.
On dit que c'est un lien relatif. On
ne connait pas l’adresse internet complète (URL) de la page 2.
Exemple :
<p>Bonjour. Bien vouloir
visiter <a href="page2.html">la
page2</a>de notre site avant
de continuer la lecture</p>
2-Lien à l’intérieur d’une même page
On peut créer des liens internes à une
page, par exemple, une table de matières en haut de la page avec des liens vers
chaque chapitre en-dessous. On a seulement besoin d'un attribut très utile,
appelé id (pour identification), et
du symbole « # ».On utilise
l'attribut id pour marquer l'élément
qu’on veut relier.Il donne un nom "unique" à une balise, pour s'en
servir de repère.
Exemple :
<h1 id="heading1">Titre
1</h1>
On crée ensuite un lien
vers cet élément en utilisant le symbole «
# » dans l'attribut de liaison. Le « # » indique au navigateur de rester
sur la même page. Ce caractère doit être suivi de l'id de la balise à relier. Exemple :
<a href="#heading1">Lien vers le titre 1</a>
Remarque:Pour une table de matière, positionner d’abord
les liens au début de la page, placer <h1
id="heading1">Titre 1</h1> à l’endroit où est le titre.
3-Lien vers une ancre
Une ancre est une sorte de point de repère qu’on peut
mettre dans une grosse page HTML.
En effet, si la page
est très grande, il peut être utile de faire un lien amenant plus bas dans la
même page pour que le visiteur puisse sauter directement à la partie qui
l’intéresse.
Pour créer une ancre, il suffit de rajouter l’attribut id à une balise qui va alors servir de
repère. Ça peut être n’importe quelle balise, un titre par exemple.
-On crée le lien qui va
emmenerle visiteur à l’endroit où se trouve l’ancre :
<a
href= « #mon_ancre »>Aller vers l’ancre </a>
-Ensuite à cet endroit
précis, on crée l’ancre.
<h2 id= « mon_ancre »> Titre </h2>
Sil’ancre est située
dans une autre page, il faut faire un lien qui ouvre une nouvelle page ETqui amène directement à une ancre
située plus bas.En pratique, il suffit de taper le nom de la page, suivi d’un
dièse (#), suivi du nom de l’ancre.
<a href= « page2.html # mon_ancre »>Aller vers l’ancre
</a>amènera le visiteur sur la page page2.html,
au niveau de l’ancre appelée
« mon_ancre »
4- Lien vers une adresse e-mail
On peut également faire un lien vers une adresse e-mail.
Cela se fait presque de la même façon que pour relier un document :
<a
href="mailto: myperson@yahoo.fr">Envoyer
un e-mail à « myperson » </a>
Le navigateur affiche : Envoyer un e-mail à « myperson»
La seule différence
entre un lien d'e-mail et un lien de fichier, c'est que l'on tape « mailto: » suivi d'une adresse e-mail
au lieu de taper l'adresse d'un document.
5-Liens vers
une adresse URL
Lorsqu’on veut faire un lien vers un autre
site, il suffit de copier son adresse (URL) en http://.
Exemple
: un
lien vers le site de nexttel.net
<a href="http://www.nexttel.net/">Voici un lien vers
nexttel.net</a>
Le navigateur
affiche :Voici un lien vers nexttel.net
Dans
l'exemple précédent, l'attribut href
vaut "http://www.nextell.net", ce qui correspond à l'adresse complète
de la société de téléphonie mobile « nexttel » et qu'on appelle une
adresse URL (Uniform Resource Locator). Il faut clore l'élément par
</a>.Ce lien est dit « absolu »
car on indique l’adresse complète.
6-Lien qui affiche une infobulle au
survol
On peut utiliser l’attribut title qui affiche une bulle d’aide
lorsqu’on pointe sur le lien. Cet attribut est facultatif.
Exemple :
<p>Bonjour. Souhaitez-vous
visiter la<a href="http://www.cimencam.com" title=" Spécialisée dans la
production du ciment ">Société cimencam </a>
?</p>
Le navigateur affiche : Bonjour. Souhaitez-vous
visiter la Société cimencam ?
L’infobulle
apparait lorsqu’on pointe le curseur de la souris sur le lien.
7- Lien pour télécharger un fichier
Il
faut faire exactement comme si on faisait un lien vers une page web, mais en
indiquant cette fois le nom du fichier à télécharger.
Exemple :
<p><a
href="monFichier.zip">Télécharger
le fichier</a></p>
IV-INSERTION DES
IMAGES
Pour insérer une image, on utilise la balise orpheline <img />.
Exemple :
<img
src= « ma_photo.jpg »
/>
Le nom « ma_photo» est celui du fichier image
à insérer dans la page, et « .jpg »
est le type de fichier de l'image. Tout comme l'extension « .htm » indique
qu'il s'agit d'un document HTML, « .jpg » indique au navigateur que ce fichier
est une image. L’attribut src
(source) indique là où se trouve l’image que l’on veut insérer dans la page.
1-insérer des images situées dans d'autres dossiers, ou même situées
sur d'autres sites Web
Si l’image à insérer se
trouve dans le dossier images, on aura :
<img src="images/twitter.png"/>
Le fichier image twitter.png se trouve dans le dossier
images de l’ordinateur.
Le navigateur
affiche :
Exemple :
<img src=http://www.html.net/logo.png/>
2-les images peuvent être aussi des liens
Exemple :
<ahref="page10.htm"><img src="images/BOUTON.GIF"/></a>
Pour aller à la page
10, il suffit de cliquer sur l’image du bouton VALIDER
3-Quelques autres attributs
·
L'attribut alt sert à fournir une description de
remplacement de l'image si, pour une raison ou pour une autre, l'image n'était
pas affichée par le navigateur. C'est particulièrement important pour les
utilisateurs aveugles, ou si la page se charge très lentement. Donc, toujours
utiliser l'attribut alt :
Exemple :
<img src="logo.gif" alt="Le logo de HTML.net"/>
·
L'attribut title peut servir pour décrire
brièvement l'image :
Exemple:<img src="logo.gif"
title="Apprenez HTML avec HTML.net"/>
Si on place le curseur sur l'image sans cliquer, on verra
apparaître le texte « Apprenez HTML avec HTML.net » comme message contextuel.
·
Deux autres
attributs importants sont width et height :
Exemple :
<img src="logo.png"
width="141" height="32"/>
On peut utiliser les
attributs width et height pour fixer la largeur et la hauteur d'une image.
Exemple
:
< img src="logo.gif"
width="32" height="32"/>
V-INSERTION DES
TABLEAUX
On utilise différents éléments pour insérer des tables :
- La
balise ouvrante <table>
et la balise fermante </table>
marquent le début et la fin de la table.
- La
balise <tr> tient pour « table
row » (rangée de table), et commence et termine les rangées dans le
sens horizontal.
- La
balise <td> est
l'abréviation de « table data » (données de table). Elle
marque le début et la fin de chaque cellule dans les rangées de la table.
- La
balise <th> permet
d’encadrer une cellule du tableau.
- L’attribut border sert à indiquer l'épaisseur de la bordure autour de la
table.
Exemple :
|
<table> <tr> <td>Nom</td> <td>Prénom</td> </tr> <tr> <td>Ada</td> <td>Daniel</td> </tr> <tr> <td>Tene</td> <td>Paul</td> </tr> </table> |
Ce qui donne dans le navigateur :
Nom Prénom
|
Ada |
Daniel |
|
|
Tene |
Paul |
|
|
|
||
|
|
||
·
On peut
ajouter des bordures : On utilise pour cela l’attribut border, suivi de l’épaisseur de la
bordure exprimée en pixel.
Exemple:
|
<table border="1"> <tr> <td>Nom</td> <td>Prénom</td> <tr> <td>Ada</td> <td>Daniel</td> </tr> <tr> <td>Tene</td> <td>Paul</td> </tr> </table> |
Ce qui donne dans le
navigateur :
|
Nom |
Prénom |
|
Ada |
Daniel |
|
Tene |
Paul |
·
Comme pour les
images, on peut également fixer la largeur d'une table en pixels, ou autrement
en pourcentage de l'écran :
Exemple:
<table border="1" width="30%">
Cet exemple affichera
une table dont la largeur est 30 % celle de l'écran dans le navigateur.
Autres
attributs
- align : indique
l'alignement horizontal du contenu dans toute la table, dans une rangée ou
dans une seule cellule. Par exemple, les valeurs "left" (à
gauche), "center" (au centre) ou "right" (à droite).
- valign : indique
l'alignement vertical du contenu dans une cellule. Par exemple, les
valeurs "top" (en haut), "middle" (au milieu) ou
"bottom" (en bas).
Exemple
:
<td align="right" valign="top">Cellule 1</td>
Les deux attributs colspan et rowspan sont mis à profit pour créer des tables plaisantes.
·
L’attribut colspan permet de fusionner plusieurs
colonnes d’un tableau.
·
L’attribut rowspan permet de fusionner plusieurs
lignes d’un tableau.
