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.
