SUPPORT DE COURS HTML5 (4STI)
Le fonctionnement des sites web :
Avec le navigateur, vous pouvez consulter n'importe quel site web.
Exemples :
Les langages HTML et CSS sont à la base du fonctionnement de tous les sites web.
C'est le navigateur web qui fera la traduction entre ces langages informatiques et ce qu’on
voit s'afficher à l'écran.
L'ordinateur se base sur ce qu'on lui a expliqué en HTML et CSS pour savoir ce qu'il doit
afficher, comme le montre la figure suivante :
HTML et CSS : deux langages pour créer un site web
HTML (HyperText Markup Language) : il a fait son apparition dès 1991 lors du lancement
du Web.Son rôle est de gérer et organiser le contenu.
C'est donc en HTML qu’on écrit ce qui doit être affiché sur la page : du texte, des liens, des
images…
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, couleurs, taille du
texte…). Ce langage est venu compléter le HTML en 1996.
Les versions de HTML :
HTML 1 : c'est la toute première version créée par Tim Berners-Lee en 1991.
HTML 2 : la deuxième version du HTML apparaît en 1994 et prend fin en 1996 avec
l'apparition du HTML 3.0. C'est cette version qui posera en fait les bases des versions
suivantes du HTML. Les règles et le fonctionnement de cette version sont donnés par le W3C
(tandis que la première version a été créée par un seul homme).
HTML 3 : apparue en 1996, cette nouvelle version du HTML rajoute de nombreuses
possibilités au langage comme les tableaux, les applets, les scripts, le positionnement du texte
autour des images, etc.
HAMMOUDA.H 1
SUPPORT DE COURS HTML5 (4STI)
HTML 4 : il s'agit de la version la plus répandue du HTML (plus précisément, il s'agit de
HTML 4.01). Elle apparaît pour la première fois en 1998 et propose l'utilisation de frames
(qui découpent une page web en plusieurs parties), des tableaux plus complexes, des
améliorations sur les formulaires, etc. Mais surtout, cette version permet pour la première fois
d'exploiter des feuilles de style.
XHTML : signifie eXtensible HyperText Markup Language, c'est à dire langage de balises
hypertexte extensible. XHTML se fonde sur la syntaxe définie par XML.
HTML 5 : c'est la dernière version. Encore assez peu répandue, elle fait beaucoup parler
d'elle car elle apporte de nombreuses améliorations comme la possibilité d'inclure facilement
des vidéos, un meilleur agencement du contenu, de nouvelles fonctionnalités pour les
formulaires, etc.
Les balises :
Les pages HTML sont représentées de ce qu'on appelle des balises.
Celles-ci sont invisibles à l'écran pour les visiteurs, mais elles permettent à l'ordinateur de
comprendre ce qu'il doit afficher.
Les balises sont entourées de « chevrons », c'est-à-dire des symboles < et >, comme ceci :
<balise>
Les balises en paires
Elles s'ouvrent, contiennent du texte, et se ferment plus loin.
Exemple :
<title>Ceci est un titre</title>
On distingue une balise ouvrante (<title>) et une balise
fermante (</title>) qui indique que le titre se termine.
Cela signifie pour l'ordinateur que tout ce qui n'est pas entre ces deux balises n'est pas un
titre.
Les balises orphelines
Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis.
Il n'est pas nécessaire de délimiter le début et la fin. Exemple :<image />
Les attributs
Les attributs sont un peu les options des balises.
Ils viennent les compléter pour donner des informations supplémentaires.
L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur de cette
façon : <balise attribut="valeur">
Exemple : <image nom="photo.jpg" />
L'ordinateur comprend alors qu'il doit afficher l'image contenue dans le fichier photo.jpg.
HAMMOUDA.H 2
SUPPORT DE COURS HTML5 (4STI)
Structure de base d'une page HTML5 :
<!DOCTYPE html>
<html><head><meta charset="utf-8" />
<title>Titre de la page</title></head>
<body>
</body></html>
La page HTML
<!DOCTYPE html>
La toute première ligne s'appelle le doctype.
Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web HTML.
Ce n'est pas vraiment une balise comme les autres car elle commence par un point
d'exclamation.
<html> … </html>
C'est la balise principale du code. Elle englobe tout le contenu de la page
L'en-tête <head> et le corps <body>
Une page web est constituée de deux parties :
L'en-tête <head> :
cette section donne quelques informations générales sur la page comme son titre, l'encodage
(pour la gestion des caractères spéciaux), etc.
Cette section est généralement assez courte.
Les informations que contient l'en-tête ne sont pas affichées sur la page, ce sont simplement
des informations générales à destination de l'ordinateur.
Le corps <body> : c'est là que se trouve la partie principale de la page.
Tout ce qui sera écrit ici sera affiché à l'écran.
L'encodage (charset)
<meta charset="utf-8" />
Cette balise indique l'encodage utilisé dans votre fichier .html.
L'encodage indique la façon dont le fichier est enregistré.
C'est lui qui détermine comment les caractères spéciaux vont s'afficher (accents,
idéogrammes chinois et japonais, caractères arabes, etc.).
HAMMOUDA.H 3
SUPPORT DE COURS HTML5 (4STI)
Le titre principal de la page
<title> … </title>
C'est le titre de la page.
Toute page doit avoir un titre qui décrit ce qu'elle contient.
Les commentaires :
Un commentaire en HTML est un texte qui sert simplement de mémo.
Il n'est pas affiché.Il n'est pas lu par l'ordinateur.
Cela ne change rien à l'affichage de la page. <!-- Ceci est un commentaire -->
Les paragraphes
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>Paragraphes</title></head>
<body>
<p>Bonjour et bienvenue sur mon site !</p>
</body>
</html>
Rq : Pour Sauter une ligne il faut utiliser une deuxième balise <p> car ça ne sert à rien de
taper Entrée.
La balise <br />
C'est une balise orpheline qui sert juste à indiquer qu'on doit aller à la ligne.
<p> </p> : pour organiser son texte en paragraphes.
<br /> : pour aller à la ligne.
Les titres :
La mise en valeur :
HAMMOUDA.H 4
SUPPORT DE COURS HTML5 (4STI)
Mettre un peu en valeur : utiliser la balise <em></em>.
Mettre bien en valeur : on utilise la balise <strong></strong>
Exemple :
<p>Ce texte est mis en évidence <em> avec em </em> et celui-là <strong> avec
strong</strong> </p>
Marquer le texte
La balise <mark> permet de faire ressortir visuellement une portion de texte.
L'extrait n'est pas forcément considéré comme important mais on veut qu'il se distingue bien
du reste du texte.
Exemple :
<p>Ce texte est mis en évidence <mark> avec mark </mark> </p>
Les listes :
Liste non ordonnée <ul> </ul>
<li></li> délimite un élément de la liste (une puce).
Exemple :
<ul><li>Fraises</li><li>Framboises</li><li>Cerises</li></ul>
Liste ordonnée <ol> </ol>
Exemple :
<ol><li>Fraises</li><li>Framboises</li><li>Cerises</li></ol>
Créer des liens :
Pour faire un lien, la balise que nous allons utiliser est très simple à retenir : <a>.
Il faut lui ajouter un attribut, href, pour indiquer vers quelle page le lien doit conduire.
Exemple : <a href="page.html">Page</a>
Un lien vers une ancre :
Une ancre est une sorte de point de repère que vous pouvez mettre dans vos pages HTML
lorsqu'elles sont très longues.
Il s’agit d’un lien interne.
Les liens internes permettent de se déplacer à l'intérieur d'un fichier HTML, sans que le
visiteur soit obligé de faire "scroller" la fenêtre.
Le visiteur va donc cliquer sur un lien et il sera amené vers l'ancre.
Pour cela deux étapes sont nécessaires :
HAMMOUDA.H 5
SUPPORT DE COURS HTML5 (4STI)
Définir la cible d'un lien (l'ancre) et associer ce même lien à cette ancre.
Pour créer une ancre :
il suffit de rajouter l'attribut id à une balise qui va alors servir de repère.
On peut utiliser l'attribut id pour donner un nom à l'ancre.
Cela nous servira ensuite pour faire un lien vers cette ancre. Exemple :
<a id="top"></a>
Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois l'attribut href contiendra
un dièse (#) suivi du nom de l'ancre. Exemple :
<a href="#top">top</a>
Liens externes :
Les liens externes commencent comme les autres liens, c'est à dire avec la balise <a
href="...."> et le reste de la syntaxe varie.
Lien externe vers un site http
Exemple :
<a href=http://www.meteo.tn>La météo</a>
Lien externe vers un serveur FTP
Exemple :
<a href="ftp://ftp.isetsf.rnu.tn">FTP ISET Sfax</a>
Lien externe vers un serveur de news (mais pour que ce lien soit valide il faut que le
visiteur soit abonné à ce serveur de news)
Exemple :
<a href="news:news.site">Serveur de news</a>
Note : Avec un lien externe on peut proposer un fichier (.exe ou .zip) en téléchargement
Exemple :
<a href="util.exe">Télécharger le fichier</a>
Un 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 :
<a href="page.html" title="Cliquer ici pour aller à la page suivante">Suivant</a>
Insertion d'une image :
La balise qui va nous permettre d'insérer une image est <img /> .
HAMMOUDA.H 6
SUPPORT DE COURS HTML5 (4STI)
La balise doit être accompagnée de deux attributs obligatoires :
src : il permet d'indiquer où se trouve l'image que l'on veut insérer.
alt : cela signifie « texte alternatif ». Càd un texte qui décrit ce que contient l'image.
Ce texte sera affiché à la place de l'image si celle-ci ne peut pas être téléchargée (cela arrive),
ou dans les navigateurs de personnes non- voyantes .
Cela aide aussi les moteurs de recherche pour les recherches d'images.
Exemple :
<p>Voici une photo que j'ai prise lors de mes dernières vacances à la montagne :<br />
<img src="images/montagne.jpg" alt="Photo de montagne" /></p>
L'attribut permettant d'afficher une bulle d'aide est le même que pour les liens : il s'agit de
title.
Cet attribut est facultatif. Exemple :
<p>Voici une photo que j'ai prise lors de mes dernières vacances à la montagne : <br />
<img src="montagne.jpg" alt="Photo de montagne" title="Belle montagne !" /> </p
Les balises structurantes de HTML5
<header> : l'en-tête
La plupart des sites web possèdent en général un en-tête, appelé header en anglais.
HAMMOUDA.H 7
SUPPORT DE COURS HTML5 (4STI)
On y trouve le plus souvent un logo, une bannière, le slogan du site…
On devrait placer ces informations à l'intérieur de la
balise <header> </header>
<header> <!-- Placez ici le contenu de l'en-tête de votre page --> </header>
<footer> : le pied de page
À l'inverse de l'en-tête, le pied de page se trouve en général tout en bas du document.
On y trouve des informations comme des liens de contact, le nom de l'auteur, les mentions
légales, etc.
<footer> <!-- Placez ici le contenu du pied de page --> </footer>
un article indépendant :
La balise sert à englober une portion généralement autonome de la page. C'est une partie de
la page qui pourrait ainsi être reprise sur un autre site. C'est le cas par exemple des actualités
(articles de journaux ou de blogs). Exemple :
: une section de page La balise sert à regrouper des contenus en fonction de leur thématique.
Une section distingue un bloc logique de contenu. Elle peut elle-même se subdiviser en
plusieurs sections et être constituée d’un en-tête, d’un pied, et d’une navigation. Exemple :
Les balises de type block et inline
block :
Une balise de type block sur la page web crée automatiquement unretour à la
ligne avant et après.
La page web sera en fait constituée d'une série de blocs les uns à lasuite des
autres.
Aussi, il est possible de mettre un bloc à l'intérieur d'un autre.Ex : <p> ,
<h1>, <footer>
inline :
Une balise inline ne crée pas de retour à la ligne, le texte qui se trouve à
l'intérieur s'écrit donc à la suite du texte précédent, sur lamême ligne.
Une balise de type inline se trouve obligatoirement à l'intérieur d'unebalise block.
Ex : <a>, <em>, <img />
Un tableau simple
table> </table> C'est la balise qui permet d'indiquer le debut et la fin d'un tableau.
H <tr> </tr> : indique le debut et la fin d'une ligne du tableau.
<td> </td> : indique le debut et la fin du contenu d'une cellule.
<th> </th> : indique le debut et la fin du contenu d'une cellule titre.
En HTML, un tableau se construit ligne par ligne. Dans chaque ligne (<tr>), on indique le
contenu des differentes cellules (<td> ou <th>).
Rq : Pour ajouter un titre pour le tableau, il faut utiliser la balise: <caption> </caption>.
HAMMOUDA.H 8
SUPPORT DE COURS HTML5 (4STI)
Fusionner un tableau
II existe deux types de fusion :
La fusion de colonnes : La fusion s'effectue horizontalement. On utilisera lattribut
colspan.
La fusion de lignes : La fusion s'effectuera verticalement. On utilisera I'attribut
rowspan.
I II faut donner une valeur a I'attribut (que ce soit colspan ou rowspan) pour indiquer le
nombre de cellules a fusionner entre elles.
Exemple
<table border='T>
<caption>Tester quelques parametres</caption>
<tr><th rowspan="2"> </th><th colspan="2">Moyenne </th> <th rowspan="2">Age
moyen </th> </tr>
<tr><th>Taille </th> <th>Poid </th> </tr>
<tr><th>Masculin</th><td>1.6</td><td>75</td><td>70</td> </tr>
<tr><th>Feminin</th> <td>1.5</td> <td> 65</td> <td>60 </td> </tr> </table>
Les formulaires
Les formulaires interactifs permettent aux auteurs de pages Web de doter leur page web
d'elements interactifs permettant un dialogue avec les internautes.
Le lecteur saisit des informations en remplissant des champs ou en cliquant sur des boutons,
puis appuie sur un bouton de soumission (submit) pour I'envoyer soit a un URL, c'est-a-dire
de fa$on generate a une aaresse e-mail ou a un script de page web dynamique tel que
PHP,ASP ou un script CGI.
Les formulaires sont delimites par la balise :
<FORM> </FORM>, une balise qui permet de regrouper plusieurs elements de formulaire
(boutons,champs de saisie,...).
HAMMOUDA.H 9
SUPPORT DE COURS HTML5 (4STI)
HAMMOUDA.H 10
SUPPORT DE COURS HTML5 (4STI)
HAMMOUDA.H 11
SUPPORT DE COURS HTML5 (4STI)
HAMMOUDA.H 12
SUPPORT DE COURS HTML5 (4STI)
Exemple de jeu de cadre (iframe)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>tttttt</title>
<style type="text/css">
nav, aside { display: inline-block; vertical-align: top;}
nav { height: 800px; width: 20%; border-style: solid;}
aside { height: 800px; width: 77%; border: 5px solid;}
#fr { height: 100%; width: 100%;}
header { border-style: solid; height: 100px;}
</style></head>
<body>
<header>entete</header>
<nav>
<ul>
<li><a href="page1.html" target="myfrime">lien1 </a></li>
<li><a href="page2.html" target="myfrime">lien2 </a></li>
<li><a href="page3.html" target="myfrime">lien3 </a></li>
</ul>
</nav>
<aside><iframe name="myfrime" id="fr"></iframe></aside>
<footer>pied de page</footer>
</body>
</html>
HAMMOUDA.H 13
