Chapitre 1

Chapitre 1:
Initiation à HTML
1
Les bases
2
Principes de publication
Un site est
Réalisé par un concepteur
Hébergé sur un serveur
Consulté par des utilisateurs
Le site est déposé par le concepteur chez l’hébergeur
Site web : ensemble de pages web
Page web : un document HTML+ documents utilisés (ex:
images, sons, vidéo, etc.)
Conception d’un site = réalisation d’un ensemble de pages

connectées entre elles par des liens hypertextes
3
Concepts fondamentaux
HTML est le langage du web. Deux concepts se
cachent derrière HTML :
Hypertexte : façon d’inter-relier des documents
multimédias
Balises: façon d’indiquer le formatage des éléments
Mise en forme décrite par des fichiers de style CCS
Les navigateurs sont très tolérants, ils affichent des

choses même quand ils ne comprennent pas (c’est à
dire quand l’utilisateur a fait des erreurs)
4
Le langage HTML
HTML : HyperText Markup Language

Langage de description de pages web
Un document HTML est
un fichier texte, construit suivant une syntaxe précise
structuré par des balises
interprété (visualisé) dans un navigateur (Google chrome, Mozilla Firefox,
Internet Explorer, etc.)
créé dans un éditeur de pages web (Dreamweaver) ou tout éditeur de texte
(bloc-notes, wordpad)
5
Navigateurs
Logiciel destiné à consulter des pages du web : Google chrome, Firefox,
Internet Explorer…
Ils savent lire les documents html ou htm, et éventuellement adapter
l’affichage aux différents media :
Moniteurs (écran), Imprimante, Carte son, etc.
Code source HTML (idéal pour apprendre les techniques des autres)
Pour faire votre site web :

Il faut un hébergeur pour avoir un serveur web
Un logiciel d’édition de texte
Un logiciel FTP (File Transfer Protocol) client pour communiquer avec le
serveur.
6
Code HTML vs. Visualisation
Pour voir le code HTML d'une page :

Menu Affichage / Code source
7
Les liens
Un lien est constitué par un mot, une suite de mots, ou une
image repérés par une balise HTML spéciale
Cliquer sur un lien permet de naviguer vers :
Un nouveau document HTML du même serveur ou d’un autre
endroit du web (par URL)
Un autre endroit du même document
Un document quelconque
En général, les liens sont indiqués sur une page web par du
texte souligné ou par un changement d’apparence du
pointeur de la souris.
Dans un navigateur, le passage du pointeur sur un lien fait
afficher la cible en bas de la fenêtre
8
Exemple
9
Les balises (ou tags)
Une balise est un mot clé encadré par 2 chevrons < et > et
Correspondent à des informations sur la page web ou sur
une zone de la page
La plupart des balises vont par paire:
La balise initiale
La balise terminale (la même que celle du début, mais le chevron
< est remplacé par </ )
Exemple: <HEAD></HEAD>
Certaines balises initiales renferment des valeurs
particulières, appelées attributs, qui précisent des paramètres
Exemples:
<a href="http://www.isimed.rnu.tn"></a>
<img src=« example.jpg">
Zone d'action de la balise : entre la balise ouvrante et la
balise fermante
10
Organisation d’un document: Organisation
hiérarchisée (1)
11
Organisation d’un document: Organisation
hiérarchisée (2)
Document Document Document

secondaire secondaire secondaire
Document Document
secondaire Document principal secondaire
Document Document Document

secondaire secondaire secondaire
12
Comment faire pour Créer une page web ?
Un simple éditeur de texte permet de créer une page
On sauvegarde la page avec l’extension .html ou .htm
Ensuite on l’ouvre, « à côté » avec un navigateur
Puis on commence le cycle édition/correction :
Modifier/éditer la page
L’afficher,
Recommencer jusqu’à satisfaction
Remarque : certain éditeur de textes peuvent fournir un
mode spécial d’édition pour les pages HTML et il existe de
nombreux éditeurs spécialisés pour HTML
13
La programmation HTML
14
Exemple simple HTML
<html> Début document
<head> Début de l’entête
<title>Exemple</title>
</head> Fin entête
<body> Début corp
Bonjour à tous !
</body> Fin corp
</html> Fin document

15
Structuration
16
Principales balises (1)
<html> : pour dire que l’on va parler en HTML
<head> : pour décrire le document, l’en tête du fichier
<body> : pour écrire le document, le corps du fichier
Balises de formatage/mise en page
<p></p> paragraphe (pas obligatoire)
<h1></h1> style de caractères
<font></font> police d’écriture
Balise propres à l’hypertexte et au multimédia
<a href="cible">texte</a> lien vers cible (chemin dans le système
de fichier ou url) et avec un texte
<img src="cible"> insertion d’une image (cible est un chemin ou
un url)
17
Exemple (2)
<html>
<head>
<title>Exemple 2</title>
</head>
<body bgcolor=black>
<img src=«affiche.jpg» width=60%>
<hr>
<font color=red>
<h1>Bonjour à tous !</h1>
</font>
</body>
</html>
18
<br> : saut de ligne
<hr> : trait horizontale sur toute la page
Styles de caractère :
Il existe par défaut 7 niveaux; Le premier niveau est compris entre les
balises <h1> et </h1>, le second est compris entre les balises <h2> et
</h2>, etc.
Des lettres ou des mots peuvent avoir un style différent. On a pour cela à
dispositions les balises pour marquer en gras (entre <b> et </b>), en
italique (entre <i> et </i>, en style machine à écrire (entre <tt> et </tt>)
Création de listes :
Il y a deux types de listes : les listes numérotées et les listes à puces. Une
liste numérotées est comprise entre les balises <ol> et </ol>. Une liste à
puces est comprise entre les balises <ul> et </ul>
Chaque élément de la liste est quant à lui compris entre les balises <li>
et </li>. Il est possible d’imbriquer des listes
19
Balise images :
Il peut également contenir un attribut align qui va indiquer
comment le texte est aligné par rapport à l’image (cet attribut peut
prendre les valeurs top, bottom, middle) et un attribut alt qui donne
un texte de remplacement au cas où le navigateur ne pourrait
afficher l’image.
Exemple : <img src="logo.gif" alt="le logo" align="top"></img>
Divers :
Pour centrer un texte, il suffit de le mettre en les balises <center>
et </center>
La balise <body> permet l’utilisation de nombreux attributs dont
l’attribut bgcolor qui indique la couleur de fond de la page
La balise <font> … </font> permet de modifier l’apparence de
caractères ou de mots par l’utilisation des attributs size (qui peut
prendre des valeurs entre –3 et +4) et color (qui prend des noms de
couleur comme Red, White, Blue, etc.) 20
Tableaux en HTML
Les tableaux sont construits en utilisant quatre balises :
<table>, <th>, <tr> et <td>
La première balise permet simplement de délimiter le
tableau. Ensuite chaque ligne du tableau est comprise entre
<tr> et </tr> et chaque cellule entre <td> et </td>. La balise
<th> est utilisée pour les cellules de titre
Par exemple le code suivant :
<table>
<tr> <th>Auteur</th> <th>Titre</th> </tr>
<tr> <td>Zola</td> <td>L’assomoir</td> </tr>
<tr> <td>Balzac</td> <td>Eugénie Grandet</td> </tr>
</table>
donnera le tableau suivant :
21
Créer des pages Web en HTML
1) Ouvrez le bloc-note, recopiez le code suivant :
<html>
<head>
</head>
<body>
Bienvenue sur mon site web
</body>
</html>
2) Enregistrez le fichier sous le nom « test.html »

3) Ouvrez le fichier que vous venez d’écrire avec
Internet Explorer, puis avec Mozilla
Firefox. 22
L’organisation
du texte
23
Les paragraphes
Le langage HTML propose la balise <p> pour délimiter les
paragraphes.
<p> signifie Début du paragraphe; </p> signifie Fin du
paragraphe.
<html>
<head>
<title> Paragraphes </title>
</head>
<body>
<p>Bonjour </p>
<p> Bienvenue sur mon site web </p>
<p> Ceci est mon premier test </p>
</body>
</html> 24
Sauter une ligne
En HTML, si vous appuyez sur la touche « Entrée », cela ne

crée pas une nouvelle ligne
<html>
<head>
<title> Paragraphes </title>
</head>
<body>
<p>Bonjour </p>
<p> Bienvenue sur mon site web <br>
Ceci est mon premier test </p>
</body>
</html> 25
Les titres
<h1> </h1> : signifie titre très important . En général, on s'en

sert pour afficher le titre de la page au début de celle-ci.
<h2> </h2> : signifie titre important .
<h3> </h3> : pareil, c'est un titre un peu moins important
<h4> </h4> : titre encore moins important.
<h5> </h5> : titre pas important.
<h6> </h6> : titre vraiment, mais alors là vraiment pas
important du tout.
26
Les titres
27
Les listes
Les listes permettent de mieux structurer un texte et

d'ordonner les informations.
Liste non ordonnée
C'est un système qui permet de créer une liste d'éléments
sans notion d'ordre. Créer une liste non ordonnée est très
simple. Il suffit d'utiliser la balise <ul> et </ul>.
Chaque élément de la liste doit être délimité par deux balises
<li></li>. Chacune de ces balises doit se trouver entre <ul>
et</ul>.
<ul>
<li> Rouge </li>
<li> Vert </li>
<li> Bleu </li>
</ul> 28
Les listes
Liste ordonnée
Une liste ordonnée fonctionne de la même façon, seule une
balise change : il faut remplacer <ul></ul> par <ol></ol>. À
l'intérieur de la liste, on ne change rien : on utilise toujours
des balises <li></li> pour délimiter les éléments.
<ol>
<li> Rouge </li>
<li> Vert </li>
<li> Bleu </li>
</ol>
29
Remarque
La balise <ul> peut prendre d'autres arguments:

<UL type=disc>
<UL type=circle>
<UL type=square>
La balise <ol> peut prendre d'autres arguments:

<OL TYPE=i> Numérotation du type i,ii,iii...
<OL TYPE=I> Numérotation du type I, II, III, IV...
<OL TYPE=A> Numérotation du type A, B, C, D...
<OL TYPE=a> Numérotation du type a, b, c, d...
<OL START=5> Numérotation du type 5, 6, 7, 8...
30
Les listes
Liste de définition
La balise <dl> fait partie des tags permettant d'établir des
listes de définitions. Les autres éléments employés pour ce
même objectif sont la balise <dd> et la balise <dt> :
- dl (Definition list) : élément structurel annonçant et

encadrant une liste de définitions.
- dt (Definition term) : élément contenant le terme à définir.
- dd (Definition description) : élément contenant la
description du terme précédemment écrit.
31
Les listes
Liste de définition
32
Les caractères spéciaux
 L’espace insécable:

 Le symbole inférieur <: <
 Le ET logique &: &
 Le symbole supérieur >: >
 Les deux guillemets " : "
33
Autres balises
 La balise <hr> permet de dessiner une ligne horizontale

d'une épaisseur, couleur et longueur paramétrable.
Propriétés pour la balise <hr> :
Exemple:
34
La mise en valeur
La balise <strong> permet de mettre en forme du texte en

appliquant un effet gras sur celui-ci, comme le fait la balise
<b>. L'usage de cette balise donne cependant
sémantiquement du poids au texte qu'elle contient au niveau
des moteurs de recherche. (pour le référencement).
35
Gérer la taille du texte
La balise <font size=+3> définit la taille du texte puis se

termine par </font> (valeurs de -3 à +3)
Exemple:
La balise : <font size =+3>Texte en grand<font>
Formater un texte en couleur
La balise <font color="code_de_couleur"> définit un texte

en couleur puis se termine par </font>
Pour les codes de couleurs HTML, voir les couleurs RVB
Exemple:
La balise : <font color="#FF0000">Texte en Couleur</font>
36
Formater un texte en couleur
La balise <font color="code_de_couleur"> définit un texte
en couleur puis se termine par </font>
Pour les codes de couleurs HTML, voir les couleurs RVB
Exemple:
37
Exercice
Curriculum Vitae
1) IDENTITÉ
Nom: …..
Prénom: ……….
Nationalité : Tunisienne
Adresse : ………
Situation familiale : Célibataire
------------------------------------------------------------------
2) CURSUS UNIVERSITAIRE
2012- jusqu’à présent: ………
2012 : ……………
2006: BACCALAUREAT Technique
------------------------------------------------------------------
3) COMPÉTENCES
Langages de Programmation: Html, …
 ………..
------------------------------------------------------------------
4) AUTRES
Langues: …..
Loisirs :….. 38
Exercice
d’application
39
Les liens
hypertextes
40
Les liens hypertexte permettent de surfer en passant de pages
en pages. Ils peuvent pointer vers un autre site web, vers
d’autres pages de votre site ou pointer vers un endroit précis
d’une même page.
Pour créer un lien hypertexte en HTML, on utilise la balise

<a>. Elle se referme en utilisant la balise </a>. Il est
important de noter qu’un lien peut contenir plusieurs mots.
Dans l’exemple suivant, la phrase entière est un lien. Elle est
donc cliquable.
<a> Ceci est un lien </a>
41
Un lien vers un autre site
Il faut ajouter un attribut, href, dans la balise <a> pour

indiquer vers quelle page le lien doit conduire.
<a href="http://www.google.com">Faire une recherche</a>
42
Un lien vers une autre page du même site
1. Deux pages situées dans un même dossier

Si les deux fichiers html sont situés dans le même dossier, il
suffit d'écrire comme cible du lien le nom du fichier vers
lequel on veut amener.
Par exemple, si nous sommes sur la page1 (page1.html) et

que nous souhaitons faire un lien vers la page 2
(page2.html), nous pourrons l’écrire comme dans l’exemple
suivant:
<a href="page2.html">Cliquer ici pour passer à la
page 2</a>
43
Un lien vers une autre page du même site
2. Deux pages situées dans des dossier différents
Si nous sommes sur la page1 (page1.html) et que nous
souhaitons faire un lien vers la page 2 (page2.html) situé
dans le dossier nommé « Files », nous pourrons l’écrire
comme dans l’exemple suivant:
<a href="Files/page2.html">Cliquer ici pour passer à la page

2</a>
Ou:
<a href="http: www.mon-site.fr/Files/page2.html">Cliquer
ici pour passer à la page 2</a>
44
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.
Parfois, 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.
45
Lien vers une ancre
Pour créer une ancre, il suffit de rajouter l'attribut id à
l’élément qu’on veut pointer. Ce peut être n'importe quelle
balise, un titre par exemple. L'attribut id est nécessaire pour
donner un nom à l'ancre.
<h2 id="cours">cours web </h2>
•Référence depuis la même page: nom de l’ancre précédé par

#
<a href="#cours"> visualiser le cours web </a>
•Référence depuis une autre page
<a href="page.html#cours"> visualiser le cours web </a>
46
Exemples
47
Un lien pour envoyer un mail
Le contenu de l’attribut href doit commencer par le

préfixe mailto: suivi de votre adresse e-mail
<a href="mailto:ahmed@gmail.com">Envoyez-moi un message !</a>
48
Un lien pour télécharger un fichier
Pour le téléchargement d'un fichier à partir d’un lien, il

faut procéder exactement comme si vous faisiez un lien
vers une page web, mais en indiquant cette fois le nom
du fichier à télécharger
<a href=“monfichier.zip">Télécharger le fichier</a>
49
HTML
Insertion des images
50
Les différents formats d'images
Les images peuvent être présentés avec plusieurs

formats différents. Le poids (en Ko, en Mo) de l'image
sera plus ou moins élevé selon le format choisi.
Toutes les images diffusées sur Internet ont un point

commun : elles sont compressées. Cela veut dire que
l'ordinateur fait des calculs pour qu'elles soient moins
lourdes et donc plus rapides à charger. 51
JPEG
Les images au format JPEG (Joint Photographic Expert

Group) sont très répandues sur le Web. Ce format est
conçu pour réduire le poids des photos, qui peuvent
comporter plus de 16 millions de couleurs différentes.
Les images JPEG sont enregistrées avec l'extension .jpg
ou .jpeg.
Notez que le JPEG détériore un peu la qualité de l'image.
C'est ce qui le rend si efficace pour réduire le poids des
photos.
52
PNG
Le format PNG (Portable Network Graphics ) est le plus
récent de tous. Ce format est adapté à la plupart des
graphiques. Depuis, le PNG a bien évolué et c'est devenu
le format le plus puissant pour enregistrer la plupart des
images.
GIF
C'est un format assez vieux, qui a été néanmoins très
utilisé. Aujourd'hui, le PNG est globalement bien
meilleur que le GIF : les images sont généralement plus
légères et la transparence est de meilleure qualité.
Néanmoins, le GIF conserve un certain avantage que le
PNG n'a pas : il peut être animé. 53
Remarques
- Les autres formats non cités ici, comme le format

BITMAP (*.bmp) sont à bannir car bien souvent ils ne
sont pas compressés, donc trop gros. Ils ne sont pas du
tout adaptés au Web. On peut en mettre sur son site mais
le chargement sera vraiment extrêmement long.
54
Insérer une image
La balise <img /> 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 . On doit toujours
indiquer un texte alternatif à l'image, c'est-à-dire un court
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.
=> Une image cliquable: combiner les balises <a> et
<img/>
<a href="http://www.photo.org"><img src="photo.jpg«
alt="maphoto"/></a>
55
Ajouter une infobulle
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.
56
Les figures
Les éléments <figure> et <figcaption> fonctionnent de

concert pour associer une légende à une illustration ou
un autre élément média.
<figure>
<img src="image.jpg" alt="" />
<figcaption>
Légende associée
</figcaption>
</figure>
57
Les figures
 <figure> est une unité de contenu, c'est-à-dire que cet

élément sert de conteneur dans lequel s'insèrent divers
éléments comme des images, des schémas, des vidéos,
des tableaux ou encore des blocs de code. L'objectif est
de lier ce contenu à une légende, définie par
l'élément <figcaption> .
<figcaption> Enfant direct de <figure>, son rôle est de

légender son parent, sous forme de texte et/ou de liens. Il
peut se placer avant ou après le contenu principal
de <figure>.
58
Les figures
Exemple1:
59
Exercice
Si vous avez une image dans vos fichiers, tant mieux. Sinon, téléchargez-
en une sur internet, n'importe laquelle. Créez un sous-répertoire photo
dans votre répertoire principale, et mettez-y cette image.
Vous pouvez maintenant ajouter le code: <img
src="photo/monimage.jpg"> en adaptant au nom de l'image.
Déplacez le répertoire photo dans un autre répertoire. Que se passe t-il ?
Insérez maintenant votre image au milieu d'un paragraphe, et ajoutez-lui
un attribut align. Essayez les valeurs : top, bottom, center, left, right.
Arrangez-vous pour que cliquer sur votre image renvoie sur votre autre
page. Pensez à ajouter un attribut alt="Texte alternatif" qui sera utilisé
par les navigateurs ne pouvant afficher d'image. 60
HTML
La vidéo et l’audio
61
Les formats audio
Pour diffuser de la musique ou n'importe quel son, il
existe de nombreux formats. La plupart d'entre eux sont
compressés (comme le sont les images JPEG, PNG et
GIF) ce qui permet de réduire leur poids :
 MP3 : C'est l'un des plus vieux, mais aussi l'un des
plus compatibles (tous les appareils savent lire des
MP3), ce qui fait qu'il est toujours très utilisé
aujourd'hui.
 AAC : utilisé majoritairement par Apple sur iTunes,
c'est un format de bonne qualité. Les iPod, iPhone et
autres iPad savent les lire sans problème.
OGG : le format Ogg est très répandu dans le monde
du logiciel libre, notamment sous Linux 62
Les formats audio
WAV (format non compressé) : évitez autant que

possible de l'utiliser car le fichier est très volumineux
avec ce format. C'est un peu l'équivalent du Bitmap
(BMP) pour l'audio.
Aucun navigateur ne gère tous ces formats à la fois.
63
Insertion d’un fichier audio
Pour insérer un fichier audio dans une page HTML, il
doit utiliser la balise <audio>
<audio src=" fichiermusique . mp3 "></ audio >
Les attributs de la balise <audio>

 src : URL du fichier audio.
 autoplay : joue le fichier automatiquement.
 loop : joue en boucle.
 controls : affiche les contrôles.
64
Exemple
L'apparence du lecteur audio change en fonction du

navigateur. La figure suivante représente par exemple le
lecteur audio dans Google Chrome.
<audio src="media/music.mp3" autoplay controls loop> </audio>
65
Sources multiples
Certains navigateurs ne géraient pas le MP3. Pour cela,
il faut proposer plusieurs versions du fichier audio. Dans
ce cas, on va construire notre
balise comme ceci :
<audio controls >

<source src=" hype_home . mp3"></ source >
<source src=" hype_home . ogg"></ source >
</ audio >
Le navigateur prendra automatiquement le format qu'il

reconnaît.
66
Les formats vidéo
Plusieurs formats tiennent le devant de la scène : WebM,

MP4 et Ogg Theora.
MP4: Les fichiers MP4 sont lisibles nativement sur les

navigateurs Apple (Safari, Safari Mobile), Opera,
Google Chrome et Firefox.
WebM/VP8: WebM est un format multimédia qui a été

lancé par Google.
OGG/Theora: est lisible sur Firefox, Opera, et Google

Chrome. 67
Insertion d’une vidéo
Pour insérer une vidéo dans une page HTML, on doit
utiliser la balise <video>
<video controls src="video.ogv">Ici la description alternative</video>
Les attributs de la balise <vidéo>
 src : URL du fichier audio.

 autoplay : joue le fichier automatiquement.
 loop : joue en boucle.
 controls : affiche les contrôles.
 width, height 68
Sources multiples
On peut proposer plusieurs sources dans plusieurs

formats différents en indiquant leurs types grâce à
l'attribut type
69
HTML 5
Les tableaux
70
Les balises du tableau
La balise <table> est un conteneur très utilisé dans les

pages web. Elle facilite la mise en forme des
informations grâce à son découpage en lignes et cellules
complètement paramétrables. Il est nécessaire d'utiliser
au minimum les balises <tr> et <td> pour mettre en
forme les éléments à afficher dans la table.
71
72
Les attributs du tableau
 border : option de la balise <table>.

Epaisseur du cadre extérieur en pixels. Avec la valeur 0,
le cadre est invisible.
 cellspacing : option de la balise <table>.
Epaisseur en pixels autours de chaque cellule.
width : option de la balise <table>. Largeur occupée
par le tableau en pixels ou en pourcentages.
 width : option de la balise <TD>. Largeur occupée par
une colonne en pixels ou en pourcentages.
73
 align : option de la balise <caption>. pour la valeur

top, affiche le titre au-dessus ; bottom, affiche en-
dessous.
 align : option des balises <td>,<tr>,<th>. pour les
valeurs left, right et center, affiche les éléments de la
cellule à gauche, à droite ou au centre.
 valign : option des balises <td>,<tr>,<th>. Aligne le
contenu de la cellule en haut, en bas ou au milieu pour
les valeurs TOP, BOTTOM et MIDDLE.
 nowrap : option des balises <td>, <th>. Empêche le
retour à la ligne dans la cellule.
74
 colspan : option de la balise <td>, <th>. prend pour

valeur un chiffre qui est le nombre de colonnes
qu'occupera une seule et unique cellule.
 rowspan : option de la balise <td>, <th>. prend pour

valeur un chiffre qui est le nombre de lignes qu'occupera
une seule et unique cellule.
75
76
77
78
Si votre tableau est assez gros, vous aurez tout intérêt à
le découper en plusieurs parties. Pour cela, il existe des
balises HTML qui permettent de définir les trois zones
du tableau :
 l'en-tête (en haut) : il se définit avec les balises
<thead></thead> ;
 le corps (au centre) : il se définit avec les balises
<tbody></tbody> ;
 le pied du tableau (en bas) : il se définit avec les
balises <tfoot></tfoot>.
79
80
Exercice d’application
1. Ecrire le code source du tableau suivant:
2. Créer un tableau similaire à votre emploi du

temps.

Chapitre 1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Chapitre 1

Transféré par

Droits d'auteur :

Formats disponibles

Chapitre 1:

Conception d’un site = réalisation d’un ensemble de pages

Les navigateurs sont très tolérants, ils affichent des

HTML : HyperText Markup Language

Pour faire votre site web :

Pour voir le code HTML d'une page :

Document Document Document

Document Document Document

<head> Début de l’entête

<body> Début corp

</html> Fin document

2) Enregistrez le fichier sous le nom « test.html »

En HTML, si vous appuyez sur la touche « Entrée », cela ne

<h1> </h1> : signifie titre très important . En général, on s'en

Les listes permettent de mieux structurer un texte et

La balise <ul> peut prendre d'autres arguments:

La balise <ol> peut prendre d'autres arguments:

- dl (Definition list) : élément structurel annonçant et

 L’espace insécable: &nbsp;

 La balise <hr> permet de dessiner une ligne horizontale

La balise <strong> permet de mettre en forme du texte en

La balise <font size=+3> définit la taille du texte puis se

La balise <font color="code_de_couleur"> définit un texte

Pour créer un lien hypertexte en HTML, on utilise la balise

<a> Ceci est un lien </a>

Il faut ajouter un attribut, href, dans la balise <a> pour

<a href="http://www.google.com">Faire une recherche</a>

1. Deux pages situées dans un même dossier

Par exemple, si nous sommes sur la page1 (page1.html) et

<a href="Files/page2.html">Cliquer ici pour passer à la page

Une ancre est une sorte de point de repère que vous

Parfois, il peut être utile de faire un lien amenant plus bas

•Référence depuis la même page: nom de l’ancre précédé par

•Référence depuis une autre page

<a href="page.html#cours"> visualiser le cours web </a>

Le contenu de l’attribut href doit commencer par le

<a href="mailto:ahmed@gmail.com">Envoyez-moi un message !</a>

Pour le téléchargement d'un fichier à partir d’un lien, il

<a href=“monfichier.zip">Télécharger le fichier</a>

Les images peuvent être présentés avec plusieurs

Toutes les images diffusées sur Internet ont un point

Les images au format JPEG (Joint Photographic Expert

- Les autres formats non cités ici, comme le format

L'attribut permettant d'afficher une bulle d'aide est le

Les éléments <figure> et <figcaption> fonctionnent de

 <figure> est une unité de contenu, c'est-à-dire que cet

<figcaption> Enfant direct de <figure>, son rôle est de

WAV (format non compressé) : évitez autant que

Aucun navigateur ne gère tous ces formats à la fois.

<audio src=" fichiermusique . mp3 "></ audio >

Les attributs de la balise <audio>

L'apparence du lecteur audio change en fonction du

<audio src="media/music.mp3" autoplay controls loop> </audio>

<audio controls >

Le navigateur prendra automatiquement le format qu'il

Plusieurs formats tiennent le devant de la scène : WebM,

MP4: Les fichiers MP4 sont lisibles nativement sur les

WebM/VP8: WebM est un format multimédia qui a été

OGG/Theora: est lisible sur Firefox, Opera, et Google

<video controls src="video.ogv">Ici la description alternative</video>

Les attributs de la balise <vidéo>

 src : URL du fichier audio.

On peut proposer plusieurs sources dans plusieurs

 L’espace insécable: