Module: Programmation HTML/CSS
Chapitre 1: Hyper Text MarkUp Langage 5
Professeur Assistant: H. HAMOUT
Département Informatique, Ecole Supérieur de Technologie -Guelmim-
Université Ibn Zohr
Avenue Abdou Maachar Al Balki B. P: 1317 Guelmim 81000
Année Universitaire: 2022/2023
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Plan de cours
I. HTML: Hyper Text MarkUp Langage
1) Vos premier outils.
2) Le texte en HTML.
3) Les titres et les listes.
4) Les liens et les ancres.
5) Les tableaux et les cellules.
6) Les frames.
7) Les images et vidéos.
8) Les séparateurs.
9) Les arrière-plans.
Pr. H. HAMOUT Département Informatique 2
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Vos premier outils
HTML est l'abréviation de HyperText Markup Language, soit en français Langage
hypertexte de balisage. Ce langage a été créé en 1991.
HTML est utilisé seulement pour balise un contenu afin de le structurer et lui
donner du sens.
HTML sert a indiquer aux navigateurs quel texte doit être considéré comme un
paragraphe, quel texte doit être considéré comme un titre; quel contenu est une
image ou une vidéo.
Pr. H. HAMOUT Département Informatique 3
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Vos premier outils
Vous avez besoin:
Un éditeur de texte tout simple comme Notepad, Sublime Text sous Windows
ou tout autre équivalent dans votre système d'exploitation.
Un navigateur que vous le disposé déjà sous Windows comme Microsoft
Explorer ou bien vous pouvez cependant télécharger gratuitement comme
Google-Chrome, Opéra, .....
Vous n'avez pas besoin:
Avoir un ordinateur puissant.
D'être connecté pour écrire ou exécuter un fichier HTML.
Pr. H. HAMOUT Département Informatique 4
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Vos premier outils
Un fichier HTML est un format de fichier texte avec extension .html
Le document HTML minimum:
La déclaration <!DOCTYPE> n'est
pas une balise HTML mais une
information au navigateur pour
l'informer de quel type de
document il s'agit.
Pr. H. HAMOUT Département Informatique 5
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Vos premier outils
Un fichier HTML est un format de fichier texte au format .html
Le document HTML minimum:
La balise <html> représente le root
d'un document HTML, elle contient
tous les autres éléments (balises)
HTML à l'exception de la balise
<!DOCTYPE>.
Pr. H. HAMOUT Département Informatique 6
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Vos premier outils
Un fichier HTML est un format de fichier texte au format .html
Le document HTML minimum:
La balise <head> contient
seulement les informations sur la
page HTML comme titre <title>,
styles <style>, script <script>, méta
donnée <meta>,... qui ne seront
pas afficher aux utilisateurs.
Pr. H. HAMOUT Département Informatique 7
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Vos premier outils
Un fichier HTML est un format de fichier texte au format .html
Le document HTML minimum:
La balise <meta> présente la
métadonnée "Metadata" sur les
données HTML. Metadata est tous
simplement l'information sur les
données.
Pr. H. HAMOUT Département Informatique 8
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Le texte en HTML
Tout document HTML contiendra en majorité du texte.
Le texte tout simple s'écrit sans balises. Il sera repris par le navigateur avec la police
et taille de caractères choisies dans sa configuration par défaut.
Le navigateur affiche le texte qu'on lui "dicte" en passant à la ligne lorsque celui-ci
atteint le bord de la fenêtre.
Le navigateur ne prend en compte d’un seul espace entre les mots.
Pr. H. HAMOUT Département Informatique 9
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Le texte en HTML
Voyons quelques balises:
Gras: <B> ….. </B> Début et fin de zone en gras.
<STRONG>...</STRONG>
Italique : <I> ….. </I> Début et fin de zone en italique.
<EM>...</EM>
Les balises <I> et <EM>, <B> et <STRONG> ne sont pas totalement
équivalentes:
Les balises <EM> et <STRONG> appartiennent aux définitions structurales
(style logique) dont l'apparence dépend des options reprises dans la
configuration du navigateur.
Les balises <B> et <I> appartiennent aux formats de présentation (style
physique) dont l'apparence dépend de la volonté de l'auteur.
Pr. H. HAMOUT Département Informatique 10
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Le texte en HTML
Voyons quelques balises:
Taille de caractères : <FONT SIZE=?> ….. </ FONT > Début et fin de zone avec
cette taille.
Couleur de caractères : <FONT COLOR=#$$$$$> ….. </ FONT > Début et fin de
zone en couleur caractère.
Retour à la ligne : <BR> Aller à la ligne.
Commentaire : <!-- *** --> Ne pas afficher au utilisateur.
Centrage : <CENTER>……</CENTER> Centrer
Pr. H. HAMOUT Département Informatique 11
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Le texte en HTML
Voyons quelques balises:
La taille dans <FONT SIZE=?> peut être indiquée de deux façons :
Avec un nombre de 1 à 7. La valeur par défaut étant 3.
De façon relative par rapport à la valeur par défaut (ici 0). Soit -3 -2 -1 0
+1 +2 +3.
Pr. H. HAMOUT Département Informatique 12
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Le texte en HTML
Voyons quelques balises:
La taille dans <FONT COLOR=?> indiquée la couleur avec lequel un texte sera
coloré:
Voici les codes de quelques couleurs basiques.
Bleu #0000FF Vert #00FF00
Blanc #FFFFFF Violet #8000FF
Rouge #FF0000 Jaune #FFFF00
Gris clair #C0C0C0 Noir #000000
Pr. H. HAMOUT Département Informatique 13
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Le texte en HTML
Voyons quelques balises:
La balise <blockquote cite=‘’URL_reference’’>….</blockquote> spécifie une
section qui est citée à partir d'une autre source.
La balise <PRE>...</PRE> affiche un texte dit préformaté. Le navigateur prend
ainsi en compte tous les espaces et sauts de ligne définis à l'écran.
Les tags <SUB>...</SUB> et <SUP>...</SUP> placent le texte respectivement en
indice et en exposant.
Pour aligner du texte, on a utilisé l'attribut ALIGN de la balise <DIV>:
<DIV align=left>...</DIV>
<DIV align=center>...</DIV>
<DIV align=right>...</DIV>
Pr. H. HAMOUT Département Informatique 14
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Le texte en HTML
Pr. H. HAMOUT Département Informatique 15
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Le texte en HTML
Pr. H. HAMOUT Département Informatique 16
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les titres et les listes
Tout document d'une certaine consistance se doit de présenter, par exemple les
titres, les liste ordonnées.... Voyons quelques balises:
La balise <Hn>….</Hn> Affiche une en-tête de niveau n et sauter une ligne
avec n=1 à 6.
les en-têtes peuvent s'aligner à gauche, au centre ou à droite: (n= 1 à 6)
Aligner à gauche: <Hn align=left></Hn>
Aligner à droite: <Hn align=right></Hn>
Aligner au centre: <Hn align=center></Hn>
Pr. H. HAMOUT Département Informatique 17
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les titres et les listes
Pr. H. HAMOUT Département Informatique 18
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les titres et les listes
Tout document d'une certaine consistance se doit de présenter, par exemple les
titres, les liste ordonnées.... Voyons quelques balises:
La balise <UL>….</UL> Afficher le texte sous forme d'une liste non-ordonnée.
Pr. H. HAMOUT Département Informatique 19
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les titres et les listes
Tout document d'une certaine consistance se doit de présenter, par exemple les
titres, les liste ordonnées.... Voyons quelques balises:
La balise <OL>….</OL> Afficher le texte sous forme d'une liste ordonnée.
<OL start=‘’nombre’’>…..</OL> spécifier la valeur avec laquelle la liste va
commencer.
<OL type=‘’symbole’’>…..</OL> spécifier le type de numération de la
liste, type = 1, I, A, a, i
Pr. H. HAMOUT Département Informatique 20
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les titres et les listes
Pr. H. HAMOUT Département Informatique 21
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les titres et les listes
Tout document d'une certaine consistance se doit de présenter, par exemple les
titres, les liste ordonnées.... Voyons quelques balises:
La balise <P>…..</P> Saut de ligne, insérer une ligne vierge et commencer un
paragraphe.
les paragraphes peuvent s'aligner à gauche, au centre ou à droite:
Aligner à gauche: <P align=left></ P >
Aligner à droite: < P align=right></ P >
Aligner au centre: < P align=center></ P >
Pr. H. HAMOUT Département Informatique 22
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les titres et les listes
Pr. H. HAMOUT Département Informatique 23
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les liens et les ancres
HTML (Hyper Text Markup Language) est un langage HyperText qui vous permet en
cliquant sur un mot, généralement souligné ou une image afin de vous transporter:
Vers un autre endroit du document HTML.
Vers un autre fichier HTML situé sur votre ordinateur.
Vers un site Web situé dans un autre ordinateur.
Ce sont ces liens qui vous permettent de surfer de page en page et qui constituent
l'essence des documents Html.
Les liens: <A HREF="URL ou adresse">...</A>
Les ancres: <A NAME="***">...</A>
Pr. H. HAMOUT Département Informatique 24
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les liens et les ancres
Lien externe:
Tout ordinateur situé sur le réseau internet possède une adresse ou une URL
(Universal Ressource Locator).
HTML permet d'accèder à toutes les machines et toutes les ressource du Net.
Ce sont des lien du type:
[Link]
[Link]
[Link]
Pr. H. HAMOUT Département Informatique 25
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les liens et les ancres
Lien local:
L'organisation classique, et plus que conseillée, d'un site Web consiste à
regrouper l'ensemble des éléments de celui-ci (fichiers htm, images, ...) dans
un même répertoire.
Vous pourrez ainsi "transporter" aisément votre site pour le présenter sur un
autre ordinateur et ,but ultime, le charger sur un serveur.
Cette façon de procéder est la plus facile et vous évitera pas mal de problèmes.
L'adresse du lien sera alors tout simplement : [Link]
Pr. H. HAMOUT Département Informatique 26
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les liens et les ancres
Lien mixte:
Nous entendons par un lien mixte, un lien vers un fichier situé à un autre
endroit de votre ordinateur (et donc non situé dans le répertoire de votre site).
L'adresse prendra la forme:
En adressage absolu: [Link]
En adressage relatif: ../../../[Link].
Pr. H. HAMOUT Département Informatique 27
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les liens et les ancres
Lien avec l’attribut ‘’target”: <A HREF="URL ou adresse“ target=“......”>...</A>
L’attribut target possède les valeurs suivantes:
_blank: Ouvrir le document dans une nouvelle fenêtre ou tab.
_self: Ouvrir le document dans la même fenêtre où elle a été cliquer.
_parent: Ouvre le document lié dans le cadre parent.
_top: Ouvre le document lié dans tout le corps de la fenêtre.
Pr. H. HAMOUT Département Informatique 28
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les liens et les ancres
Pr. H. HAMOUT Département Informatique 29
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les liens et les ancres
Pr. H. HAMOUT Département Informatique 30
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les liens et les ancres
Les ancres:
Des liens sous HTML peuvent aussi pointer vers un endroit précis du même
document ou d'un autre fichier. C'est ce qu'on appelle les ancres, ancrages ou
pointeurs.
Point d'ancrage <A NAME="***">……</A> Ceci est une cible dans un
fichier HTML.
Lien vers une ancre dans la même page <A HREF="#***">...</A> Lien
vers la cible *** dans la même page HTML.
Lien vers une ancre dans une autre page <A HREF="URL#***">...</A>
Lien vers la cible *** dans une autre page.
Pr. H. HAMOUT Département Informatique 31
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les liens et les ancres
Pr. H. HAMOUT Département Informatique 32
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les liens et les ancres
Cible local Cible externe
Pr. H. HAMOUT Département Informatique 33
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les tableaux et les cellule
En HTML, l'usage des tableaux est donc très fréquent servent non seulement à
aligner des chiffres mais surtout à placer des éléments à l'emplacement que vous
souhaitez.
Un tableau est composé de lignes et de colonnes qui forment les cellules du
tableau.
Les balises de base sont donc:
Définition du tableau <TABLE>....</TABLE> Début et fin de tableau.
Définition d'une ligne <TR>....</TR> Début et fin de ligne.
Définition d’en-tête du tableau <TH>….</TH> Début et fin d’en-tête de tableau.
Définition d'une cellule <TD>....</TD> Début et fin de cellule.
Pr. H. HAMOUT Département Informatique 34
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les tableaux et les cellule
Un tableau à deux lignes et deux colonnes, et donc à quatre cellules se représente
comme suit.
Pr. H. HAMOUT Département Informatique 35
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les tableaux et les cellule
Dans un tableau on peut ajouter des bordures ou bien cadrer les cellules d’un
tableau à l’aide de l’attribut border de la balise <TABLE>.
Pr. H. HAMOUT Département Informatique 36
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les tableaux et les cellule
Il y a encore deux éléments définis par défaut mais modifiables:
1) L'espace entre les cellules ou l'épaisseur des du quadrillage <TABLE
cellspacing=?>....</TABLE>
Pr. H. HAMOUT Département Informatique 37
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les tableaux et les cellule
Il y a encore trois éléments définis par défaut mais modifiables:
2) L'enrobage des cellules ou l'espace entre le bord et le contenu <TABLE
cellpadding=?>....</TABLE>
Pr. H. HAMOUT Département Informatique 38
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les tableaux et les cellule
Les cellules des tableaux: Allons plus loin dans note étude en nous penchant sur les
cellules de ces tableaux. Avant tout, les cellules peuvent contenir tous les éléments
HTML déjà passés:
Du texte. Des arrière-plans.
Des images. Des tableaux.
Des liens.
Chaque cellule est en quelque sorte un petit univers à part qui a ses propres
spécifications. Découvrons les balises suivantes:
Largeur d'une cellule <TD width=?>....</TD> la largeur en pixels.
<TD width=%>....</TD> la largeur en pourcentage.
Fusion de lignes <TD rowspan=?>....</TD>.
Fusion de colonnes <TD colspan=?>....</TD>.
Pr. H. HAMOUT Département Informatique 39
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les tableaux et les cellule
Les cellules des tableaux:
Je veux un tableau centré qui occupe 60% de la fenêtre avec sur une ligne,
trois colonnes égales.
Pas brillant!
Pr. H. HAMOUT Département Informatique 40
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les tableaux et les cellule
Les cellules des tableaux:
Je veux un tableau centré qui occupe 60% de la fenêtre avec sur une ligne,
trois colonnes égales. Il faut utiliser la balise de largeur de la cellule.
Pr. H. HAMOUT Département Informatique 41
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les tableaux et les cellule
Les cellules des tableaux:
Je souhaite que la première ligne prenne toute la largeur de la ligne en
fusionnant trois colonnes.
Pr. H. HAMOUT Département Informatique 42
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les tableaux et les cellule
Les cellules des tableaux:
Je souhaite que la première colonne prenne toute la hauteur de la colonne.
Pr. H. HAMOUT Département Informatique 43
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les tableaux et les cellule
Les cellules des tableaux: Pour positionner les données on utilise les attributs
suivants:
Ligne de tableau:
<TR align=left/center/right>….</TR> horizontalement
<TR valign=top/middle/bottom>….</TR > verticalement
Cellule de tableau:
<TD align=left/center/right>....</TD> horizontalement
<TD valign=top/middle/bottom >....</TD> verticalement
Pr. H. HAMOUT Département Informatique 44
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les tableaux et les cellule
Les cellules des tableaux: Pour positionner les données on utilise les attributs
suivants:
Ligne de tableau:
Pr. H. HAMOUT Département Informatique 45
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les tableaux et les cellule
Les cellules des tableaux: Pour positionner les données on utilise les attributs
suivants:
Cellule de tableau:
Pr. H. HAMOUT Département Informatique 46
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les frames
Les frames: est un mécanisme qui permet de diviser l'écran en plusieurs fenêtre.
Les balises utilisées sont peu nombreuses:
Zone avec des fenêtres: <FRAMESET>....</FRAMESET> Début et fin de zone avec des
fenêtres.
Agencement des fenêtres:
<FRAMESET ROWS="..."> Fenêtre horizontales.
<FRAMESET COLS="..."> Fenêtre verticales.
Une sous fenêtre: <Frame SRC=“[Link]”>
Pr. H. HAMOUT Département Informatique 47
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les frames
Attention: La balise <FRAMESET>....</FRAMESET> remplace la balise
<BODY>….</BODY>.
La forme générale:
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS|CLOS="X%,Y%,Z%,…….">
<FRAME>
<FRAME>
</FRAMESET>
</HTML>
Pr. H. HAMOUT Département Informatique 48
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les frames
Agencement horizontal:
L'attribut ROWS="hauteur1,hauteur2,...,hauteurN" définit la hauteur des
différentes fenêtres en cas de division horizontale.
La hauteur s'exprime en pixels ou en %. Dans ce cas, on veillera à ce que le
total soit égal à100%;
30%
70%
Pr. H. HAMOUT Département Informatique 49
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les frames
Agencement vertical:
L'attribut COLS="largeur1,largeur2,...,largeurN" définit la largeur des
différentes fenêtres en cas de division verticale.
La largeur s'exprime en pixels ou en %. Dans ce cas, on veillera à ce que le total
soit égal à 100%.
30% 70%
Pr. H. HAMOUT Département Informatique 50
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les frames
Agencement horizontal et vertical: On peut mélanger les deux.
Pr. H. HAMOUT Département Informatique 51
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les frames
Les frames: Pour l'instant, nos frames sont vides, on va voir comment les remplir à
l'aide de l'attribut SRC de la balise <FRAME>.
On construit 3 fichiers HTML élémentaires que l'on place dans le même répertoire
que le fichier de frames :
[Link] [Link] [Link]
Pr. H. HAMOUT Département Informatique 52
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les frames
Les frames: Pour l'instant, nos frames sont vides, on va voir comment les remplir à
l'aide de l'attribut SRC de la balise <FRAME>.
On reprend le fichier de frame précédent que l'on complète:
Pr. H. HAMOUT Département Informatique 53
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les frames
Les frames: Pour l'instant, nos frames sont vides, on va voir comment les remplir à
l'aide de l'attribut SRC de la balise <FRAME>.
Les ascenseurs, comme à la fenêtre A, apparaissent automatiquement. Par l'attribut
de la balise <FRAME> SCROLLING="yes/no/auto" vous pouvez indiquer si la fenêtre
doit ou non posséder une barre de défilement.
Pr. H. HAMOUT Département Informatique 54
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les images et vidéos
L’image: Avant de passer aux balises, il faut savoir ce qui suit:
Les deux formats d'images reconnus sur le Web, sont le format GIF et le format
JPEG.
L'ennemi sur le Web, c'est la taille des images. Plus l'image sera grande, plus le
temps de chargement sera long.
En HTML, l'image ne fait pas partie de votre document. Le browser va la
chercher à l'adresse indiquée.
Généralement, on place les images dans le même répertoire que les pages
HTML.
Pr. H. HAMOUT Département Informatique 55
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les images et vidéos
Le code HTML est de la balise <IMG>:
<IMG src="adress de l'image’’ > Affiche l'image qui se trouve à l'adresse
indiquer.
La balise image possède de nombreux attributs:
Texte alternatif alt="****" Ce texte alternatif sera par exemple affiché sur la
page si l'image ne peut pas être chargée.
Dimensions width=? height=? spécifier la largeur et la hauteur de l'image.
border=? (en pixels) spécifier la Bordure de l'image.
Alignement align=top|middle|bottom|left|right spécifier l'alignement de
l'image dans la page.
Pr. H. HAMOUT Département Informatique 56
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les images et vidéos
Le code HTML est de la balise <IMG>:
<IMG src="adress ’’ alt=‘’texte’’ width=? height=? border=? align=***>
Pr. H. HAMOUT Département Informatique 57
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les images et vidéos
Le code HTML est de la balise <Video>: Au minimum pour utiliser l’élément video,
les attributs suivants doivent être utilisés:
<Video width=? Height=? controls> <source src=‘’adresse video’’ type=‘’****’’>
</video>
src: définit l'URL, où le contenu vidéo est hébergé.
controls: doit être spécifié ou aucun élément visuel n'apparaîtra pour
contrôler la lecture du contenu.
Pr. H. HAMOUT Département Informatique 58
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les images et vidéos
Le code HTML est de la balise <Video>: Au minimum pour utiliser l’élément video,
les attributs suivants doivent être utilisés:
<Video width=? Height=?’ controls> <source src=‘’adresse video’’
type=‘’****’’> </video>
type: définit le format de fichier vidéo. Actuellement, la balise de HTML5
<video> support trois types de fichiers vidéos:
Pr. H. HAMOUT Département Informatique 59
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les images et vidéos
Il y a beaucoup d'attributs optionnels, qui peuvent être utilisés pour influencer la
façon dont le contenu vidéo est chargé. Ces attributs comprennent:
autoplay: spécifie que la vidéo commencera à jouer dés qu'elle sera prête.
<video width=“?" height=“?" controls autoplay>
loop: spécifie que la vidéo va recommencer à chaque fois qu'elle est terminée.
<video width=“?" height=“?" controls loop >
poster: sélectionne une image à afficher comme affiche pour la vidéo jusqu'à
ce que la lecture commence.
<video width=“?" height=“?" controls poster="URL’’ >
Pr. H. HAMOUT Département Informatique 60
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les images et vidéos
Il y a beaucoup d'attributs optionnels, qui peuvent être utilisés pour influencer la
façon dont le contenu vidéo est chargé. Ces attributs comprennent:
preload: explique comment l'auteur pense que la vidéo doit être chargée lors
du chargement de la page.
auto: l'auteur pense que le navigateur doit charger la vidéo en entière lors
de la chargement de la page.
metadata: l'auteur pense que le navigateur doit charger seulement meta-
donnée lors de la chargement de la page.
none: l‘auteur pense que le navigateur ne doit pas charger la vidéo lors de
la chargement de la page.
<video preload="auto|metadata|none">
Pr. H. HAMOUT Département Informatique 61
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les séparateurs
Les navigateurs intègrent un outil de mise en forme intéressant pour clarifier la
présentation de votre texte. C'est la ligne horizontale (un séparateurs).
La syntaxe est simple:
Ligne horizontale <HR> Insérer une ligne horizontale.
La balise <HR> possède des attributs. Les valeurs par défaut de la balise <HR> sont:
Une épaisseur de trait de 2 pixels.
Un alignement centré.
Une largeur de 100% de la fenêtre.
Pr. H. HAMOUT Département Informatique 62
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les séparateurs
On peut changer les valeurs de ces différents attributs comme suit:
<HR size=?> Epaisseur en pixels.
<HR width=?> Largeur en pixels.
<HR width="%"> Largeur en % de la fenêtre.
<HR align=left> Alignement gauche.
<HR align=right> Alignement droite.
<HR align=center> Alignement centré.
Il est donc tout à fait équivalent d'écrire:
<HR> ou <HR size=2 align=center width="100%">
Pr. H. HAMOUT Département Informatique 63
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les séparateurs
Commentaires :
On préférera spécifier la largeur en % de la fenêtre plutôt qu'en pixels car
l'affichage s'adaptera ainsi à toutes les tailles et résolutions d'écran.
Pr. H. HAMOUT Département Informatique 64
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les arrière-plans
Le langage HTML permet de gérer la présentation du document d'un arrière plan
coloré ou composé d'une image.
La balise à utiliser est la suivante:
Couleur d'arrière plan: <BODY BGCOLOR="#????">...</BODY>
Couleur de texte: <BODY TEXT="#????">...</BODY>
Couleur de lien: <BODY LINK="#????">...</BODY>
Lien visité: <BODY VLINK="#????">...</BODY>
Lien actif: <BODY ALINK="#????">...</BODY>
Texture d'arrière-plan <BODY BACKGROUND="Adresse">
Pr. H. HAMOUT Département Informatique 65
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les arrière-plans
Pr. H. HAMOUT Département Informatique 66
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
Les arrière-plans
Pr. H. HAMOUT Département Informatique 67
Hyper Text MarkUp Langage 5 Programmation HTML/CSS
FIN.
MERCI DE VOTRE ATTENTION
DES QUESTIONS ?
Pr. H. HAMOUT Département Informatique 68