Cours02 1

14/03/2023
Document HTML :
Faculté de génie électrique et informatique Licence : L2  Avant de concevoir un site internet dans son ensemble, il faut apprendre
Département d’informatique Année : 2022/2023
à rédiger/composer une page web au format .html
Module : Développement Web
 document HTML.
 Un document HTML est un hypertexte décrit à l'aide du langage HTML.

Le langage HTML
 Un hypertexte est un texte contenant des liens.
Hyper-Text Markup Language  Un lien est un élément particulier (mot/image) sur lequel on clique pour
se déplacer vers :
 Un autre emplacement du document,

 Un autre document sur le même site,
 Un document sur un autre site WEB,
Responsable du module : Mme Bousnina1 Lila  Un autre service Internet (mail, ftp… ) 2
Document HTML (2)

Qu'est ce que HTML?
 Un document HTML est contenu dans un fichier .html, qui est

 HTML (HyperText Markup Language) est un langage de
un simple fichier texte, un bloc-note suffit donc pour écrire un tel
description (dit de marquage ou de balisage) de pages Web.
fichier. Toutefois, utiliser un éditeur de texte avec coloration
 Il permet de présenter les documents hypertextes destinés à
syntaxique permet de travailler plus confortablement (Par exemple être affichés sur le navigateur.
Visual Studio Code).  Il s'agit d'un langage coté client (tout comme CSS et Javascript).
 L’extension du fichier devra être .html pour être interprété par  Il est supporté et développé par W3C.
le navigateur. Exemple : index.html  L'origine du HTML remonte au début du Web.
 Il a été inventé vers les années 1989 afin qu'il puisse présenter
Note : Le navigateur n'affichera jamais de message d'erreur même les documents qui circulent sur la toile et établir des liens entre
si le fichier .html comporte des erreurs de syntaxe. eux à travers les liens hypertextes (ou hyperliens).
3 4
Nouveautés de HTML5
Versions du langage
 Nouveau conteneurs: Web sémantique (ou Web3.0).

 En 1989 HTML1.0 est apparu, il se basait sur les spécifications
du standard SGML (Standard Generalized Markup  Prise en charge du flux multimédia: le navigateur peut
Language) qui est aussi un langage de description à balises. déchiffrer un contenu multimédia d'une façon autonome.
 Puis HTML2.0 a vu le jour en 1995.  De nouveaux champs de formulaire : de nouveaux champs de
 En 1997, HTML3 puis HTML4 sont apparus. formulaire de la famille <input> qui s'avèrent très utiles lors de
 HTML4 est la version du langage la plus populaire, elle est leur saisie.
toujours supportée de nos jours malgré l’apparition du standard  D'autres fonctionnalités qui mettent en valeur le contenu:
HTML5 qui constitue une révolution dans le monde du Web. Des fonctionnalités tel que glisser-déposer (drag & drop), accès
aux périphériques tel que la webcam... ont été également
5
ajoutées. 6
1
14/03/2023
Que permet le langage HTML ? Structure d’un document html de base conforme :
HTML permet :
 La création d'hyperliens;
 La mise en forme de documents : polices, styles.. tableaux,
listes,…
 L’insertion d'images;
 L’insertion de composants multimédia : son, vidéo...
 La création de formulaires de saisie ;
 …
7 8
Structure d’un document html : Le code source d’une page web minimale conforme :
 Un fichier .html (code source de la page web) a une structure

d'éléments emboîtés . <!DOCTYPE html>
 Cette structuration d’éléments est faite grâce au balisage. <html lang="en">
 Chaque balise a un sens que le navigateur comprend et exécute pour <head>

<meta charset="UTF-8">
que le document soit présenté tel que les balises le dictent. <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Autrement dit : <title>Document</title>
</head>
 Un fichier écrit en langage HTML n'est autre qu'un fichier texte, mais dont le <body>
contenu est structuré à l'aide de repères que l'on appelle des éléments.
<p> <strong> Bla </strong> bla bla</p>
 Chaque élément est constitué de : </body>
 Balises ; </html>
 Et d'attributs qui permettent d'apporter des informations sur son contenu.
9 10
Les balises HML de base:

Structure arborescence de la page web :
 La balise <!DOCTYPE html>
Est indispensable car c'est elle qui indique au navigateur qu'il s'agit
html
bien d'une page web html 5.
 Les balises <html>, <head> et <body> :

head body
Tout document HTML conforme doit contenir au minimum

meta title p les 3 balises : <html>, <head> et <body>.
Sans ces balises, le document sera quand même exécuté par le
Le rendu de la page web sur le navigateur
strong navigateur mais il ne sera pas valide de point de vue de W3C,
et peut présenter des problèmes lors de son référencement sur
les outils de recherche.
11 12
2
14/03/2023
Les balises <html>, <head> et <body> :

Exemple
 <html> : renferme toute la page Web.
<head> 
<meta charset="utf-8"> 
dans l'onglet du navigateur (la balise <title> ), le nom de <link rel="stylesheet" href="Lien vers la feuille de style">
</head> 
l'auteur, l’encodage utilisé, …
et la balise <link> qui appelle une ressource externe comme une
 <body> : renferme le contenu (sous forme d’éléments) qui sera
feuille de style CSS ou une icone à afficher sur la barre des titre du
réellement visible sur le navigateur par les internautes.
navigateur.
13 14
Les balises html du body : Balises de formatage de texte :

 Chaque balise a une signification que le navigateur connait et applique au Balises <h1>, <h2>...<h6>
contenu  La présentation du document
La balise <h1> (heading) désigne un titre de premier niveau. Le
 Le balisage associe une balise ouvrante < nom_balise> et une fermante
</ nom_balise > par paire (non obligatoire). texte qu'elle entoure est de grande taille et mis en gras. Il est
 Il existe des balises ouvrantes qui n'ont pas de balises fermantes associées. On utile pour créer les grands titres d'une pages.
les appelle des balises auto fermantes ou des balises orphelines. Elles servent le La balise <h2> désigne un titre de deuxième niveau, elle applique
plus souvent à insérer un élément à un endroit précis sans contenu.(par exemple le même effet que la balise précédente mais avec une taille de
une image, un retour à la ligne,..).
caractères légèrement plus petite. C'est pratique pour les sous-
Exemple : <img src=lion.jpeg >, <br>
titres.
 Les balises ont des noms différents (définis par le langage) selon
leurs rôle.
Il existe aussi <h3>, <h4>, <h5> et <h6> avec une taille de
 Les noms des balises ne sont pas sensibles à la casse. caractères de plus en plus petite.
Par exemple : <BODY> = <BodY> = <body> 15 16
Balise de paragraphe <p> :

Exemple :
Elle sert à définir un paragraphe, qui est un

<html>
<head>
<title> Titres </title> élément de base en traitement de texte.
</head>
<body > Elle place une ligne vide au-dessus et en dessous du
<H1> Titre 1 </H1>
<H2> Titre 2 </H2> texte pour le mettre en évidence, et le navigateur la
<H3> Titre 3 </H3>
<H4> Titre 4 </H4>
<H5> Titre 5 </H5> considèrera comme telle.
<H6> Titre 6 </H6>
</body>
</html>
17 18
3
14/03/2023
Balises de formatage du texte : Exemple de mise en forme:
<html>
Balise Effet Exemple Rendu <head>
<b> ou Gras <title> Mise en form </title>
<b>Texte en gras</b> Texte en gras
<strong> (bold) </head>
<body >
Souligné
<u> <u>Texte souligné</u> Texte souligné <B> c'est Gras </B> <br>
(underline)
<i> Italique <i>Texte en italique</i> Texte en italique <I> c'est Italique </I> <br>
Barré <U> Souligné </U> <br>

<s> <s>Texte barré</s> Texte barré
(strike) <BIG> Police plus grande </BIG> <br>
<mark> Surligné <mark> Texte surligné </mark> <SMALL> Police plus petite </SMALL> <br>
<sub> Indice <b>H <sub> 2 </sub> O</b> H2O <STRIKE> Texte barré </STRIKE> <br>
<sup> Exposant <b>10<sup> 2</sup></b> 102 A<SUB> Indice </SUB> <br>
Police plus A<SUP> Exposant </SUP>
<small> plus petit <small> Police plus petite </small>
petite
</body>
</html>
19 20
Balise retour à la ligne <br> : Exemple :

 Pour retourner à la ligne à n'importe quel moment, il suffit de déclarer
la balise <br>. Il s'agit d'une balise orpheline (donc pas de </br>).
<p> Le paragraphe est un élément de base en traitement de
texte. <i>La balise d'un <strong>paragraphe</strong>est
Balise ligne horizontale <hr> :
<p> </i>.</p> <hr> <p>Elle place une ligne vide au-
dessus et en dessous du texte pour le mettre en évidence,
 Utilisez <hr> pour créer une ligne horizontale.
et le navigateur la considèrera comme telle.</p>
 Qui représente un changement thématique entre des éléments
de paragraphe (par exemple, un changement de décor dans un
récit, un changement de sujet au sein d'une section).
Caractères spéciaux :
C’est des séquences que le navigateur reconnait et remplace par
leurs significations. Par exemple, le code html de " est "
21 22
Balise <pre> et <code> :

 Le contenu de la balise <pre> sera affiché tel qu'il a été édité dans le code
(conserve toute la mise en forme qui a été crée dans l’éditeur de texte) . Çad par Note :
exemple, pour intégrer un retour à la ligne ou pour mettre plusieurs espaces ou
tabulations, ce n’est pas la peine de déclarer la balise <br>, ou passer par le caractère Il ne faut pas abuser de cet élément (<pre>), et ne
spécial .
Exemple:
l’utiliser que si nous n’avons pas d’autres choix, car
<pre> celui-ci ne comporte aucune signification de point de

Là-haut sur la montagne, l'était un vieux chalet.
vu sémantique. Pour cela, il n’est pas très apprécié par
Murs blancs, toit de bardeaux,
Devant la porte un vieux bouleau. le html car il ne renforce pas le rôle de ce dernier .
</pre>

Murs blancs, toit de bardeaux,
Le résultat du code est le suivant :
Devant la porte un vieux bouleau.
23
Là-haut sur la montagne, l'était un vieux chalet. 24
4
14/03/2023
Commentaire HTML 

Imbrication des balises
 Un commentaire HTML est déclaré comme ceci:
 Un contenu peut subir l'effet de plusieurs balises à la fois. Si .
c'est le cas, alors une règle s'impose:  Il est visible dans le code source mais ignoré par le navigateur.
« En cas d'imbrication de plusieurs balises, la première balise  Il sert à marquer un bloc de code pour que celui-ci soit
ouverte est la dernière à fermer. » facilement trouvé et compris lors de sa prochaine manipulation.
Il faut donc fermer les balises dans l’ordre inverse de leur
Exemple:
ouverture.

<i>Le commentaire n'est pas visible sur le navigateur.</i>
Exemple :
Le résultat eu sur le navigateur est:
<balise1> <balise2> <balise3> Contenu </balise3> </balise2> </balise1>
Le commentaire n'est pas visible sur le navigateur.

25 26
Les éléments (balises) de type block et inline

En HTML, tout élément est soit de type block (servent à structurer la page Exemples :
en plusieurs blocs), soit de type inline. Les éléments de type block Les éléments de type inline
P (paragraphe) Em (emphase : marquer un texte
Les éléments de type block… Les éléments de type inline… sur lequel on veut insister)
Commencent sur une nouvelle ligne. S’insèrent dans une ligne. h1, h2, h3, h4, h5, h6 (titres) Strong, b, i (gras, italique)
Occupent toute la largeur Occupent seulement la largeur ol, ul, dl (listes) mark (texte marqué ou surligné)
disponible. nécessaire.
Peuvent être imbriqués les uns dans Peuvent être imbriqués les uns dans li (représenter un élément dans a (lien)
les autres et contenir des éléments les autres mais ne peuvent pas une liste)
de type inline. contenir d’éléments de type block.
Elles seront affichées les unes en Elles seront affichées les unes à côté table (tableau) Img (image)
dessous des autres, alignées sur le des autres.
bord gauche.
27 28
Les attributs Balise de formatage du texte <font> :
 La plupart des balises HTML peuvent appliquer des effets différents  L'élément HTML <font> définit grâce à ses attributs, la taille, la
selon les préférences du développeur. C'est là où les attributs couleur et la police de son contenu.
interviennent.  Cette fonctionnalité a été supprimée des standards du Web.
 Les attributs sont déclarés dans la balise ouvrante. Ils représentent des Bien que quelques navigateurs puissent encore la prendre en
paramètres qui personnalisent la balise où ils sont définis et ils charge, elle est en cours d'éradication. Les pages et applications
possèdent des valeurs indiquées entre guillemets. web l'utilisant peuvent cesser de fonctionner à tout moment.
 Une balise peut renfermer plusieurs attributs à la fois, chacun avec sa  À partir de HTML 4, HTML ne véhicule plus d'informations de
valeur.
style (en dehors de l'élément <style> ou de l'attribut style de
 Une balise possédant des attributs ressemble à ceci:
chaque élément). Pour tout nouveau développement web, le style
<balise attribut1="valeur1" attribut2="valeur2"
attribut3="valeur3"...> Contenu </balise> doit être écrit en utilisant le CSS uniquement.
29 30
5
14/03/2023
Les listes :
 Les listes HTML permettent d’ordonner du contenu.

 Ce contenu peut être hiérarchisé ou non.
 Il existe deux grands types de listes en HTML : les listes
Les listes ordonnées (liste numérotée) (<ol>) et les listes non-
ordonnées (liste à puces) (<ul>).

 Une liste en HTML est composée de différents éléments (<li>)
de listes.
– Provoque l'affichage d’une puce ou d’un chiffre selon le contexte.
 Les listes sont imbriquables.
31 32
Exemple de liste ordonnée OL :

Attributs de listes :
<ol>
 Type = Voitures allemandes
<li>BMW</li>
 pour <ul> : disc, circle , square <li>MERCEDES</li>
 pour <ol> : A, a, I, i, 1 <li>PORSCHE</li>
</ol>
 Value =
Exemple de liste non ordonnée UL :
 pour <li> : un rang de numérotation
 Start = <ul>
Voitures allemandes
 pour <ol> : un rang de numérotation <li>BMW</li>
<li>MERCEDES</li>
<li>PORSCHE</li>
33 </ul> 34
Les liens, l’élément <a> (pour ancre ou anchor en anglais) :

Les liens en HTML vont nous servir à créer des ponts entre
différentes pages d’un même site ou de sites différents.
Le principe d’un lien :
Un lien permet de définir une région sensible au clic souris, on

Les liens
l’appelle ancre. Il peut être un texte ou une image.
En cliquant dessus, nos utilisateurs vont être redirigés vers une
page cible.
Exemple :
<a href = "http://www.wikipedia.com"> web </a>
35 36
6
14/03/2023
Attributs :
Types de liens :
Quel que soit le type de liens que l’on souhaite créer en HTML nous
1. Les liens internes qui vont servir à naviguer d’une page à utiliserons toujours l’élément <a> en précisant l'endroit où l'on va se
l’autre dans un même site ; retrouver après le clic dans l’attribut href «hypertext reference » qui
2. Les liens externes qui vont envoyer les utilisateurs vers une peut être :
page d’un autre site. 1. "url du document"(lien externe) ;
3. Nous allons également pouvoir utiliser les liens en HTML Par exemple: Visitez le site de <a href ="http://www.ummto.dz">
pour naviguer au sein d’une même page (« ancres ») et UMMTO </a>
renvoyer à un endroit précis de celle-ci. Cela est utile pour 2. "nom du fichier " (lien local);
fournir des accès ou des repères rapides à nos utilisateurs Par exemple: Consultez mon <a href= "cv.html"> curriculum vitae </a>
dans le cas d’un page très longue. 3. Une ancre dans la même page ou dans une autre page, les ancres se
définissent grâce à l'attribut name ou id.
37 38
Types de chemin :
Par exemple : section
1. Si l’ancre se trouve dans la même page : Chemin absolu :
• Définir d’abord la cible qui va servir de repère : Il correspond à l’emplacement d’un fichier par rapport à la
<p id = " ancre"> ancre </p>
racine (soit sur un ordinateur ou sur le web).
• Créer son lien ancre
<a href = " # ancre"> section </a> Document Exemple :

section /home/john/www/blog/index.php
2. Si l’ancre se trouve dans une autre page : Chemin relatif :

ancre
• Définir d’abord la cible qui va servir de repère Est une description de l'emplacement d'un fichier à
<p id = " ancre"> ancre </p>
atteindre, depuis l'emplacement du fichier actuel.
• Créer son lien Document a Document b
<a href = " url/nom_du_fichier.html#ancre"> section </a>
39 40
Exemples : Quel est le chemin de dinosaure2.jpg à partir de page3.html?

Exemples :
<img src="../../TP 02/Images/bureau.jpg"
1. Si votre image s'appelle dinosaur.jpg, et qu'elle est située dans le même
Web
répertoire que votre page HTML, vous pouvez intégrer cette image comme ceci :
TP 01 <a href="dinosaur1.jpg">
<img src="dinosaur.jpg">
page1.html
dinosaur1.jpg
2. Et si cette image se trouve dans un sous-répertoire images situé dans le TP 02
même dossier que la page HTML, alors vous l'intégrerez comme ceci : page2.html < a href ="./images/dinosaur2.jpg">
<img src=" ./images/dinosaur.jpg"> Images
dinosaur2.jpg
3. Et si cette image se trouve dans un sous-répertoire images situé dans le TP 03

même dossier que le dossier contenant la page HTML, alors vous l'intégrerez
Pages html < a href ="../images/dinosaur3.jpg">
comme ceci : page3.html
<img src=" ../images/dinosaur.jpg"> Feuilles css
Images
41 42
dinosaur3.jpg
7
14/03/2023
L’attribut: Target
Note
 L'attribut TARGET peut aussi prendre certaines valeurs
Pour la conception de son propre site, il faut utiliser des prédéfinies :
chemins relatifs. En organisant correctement ses dossiers et ses  _blank qui indique au browser qu'il doit créer une nouvelle
fichiers, on peut être certain que les liens hypertextes créés fenêtre afin d'y afficher le fichier.
resteront valables quel que soit le serveur sur lequel le site
 _self qui indique que le fichier sera chargé dans la même
internet est hébergé.
fenêtre que celle dans laquelle se trouve le lien, c’est la
valeur par défaut .
43 44
Les tableaux <table> :
 L'élément HTML <table> permet de représenter un tableau

de données, c'est-à-dire des informations exprimées sur un
Les tableaux tableau en deux dimensions.

 Un tableau s'insère avec la balise HTML <table> et se
définit ligne par ligne avec <tr> (table row ou "rangée du
tableau " ).
 Chaque ligne comporte des cellules <td> (pour table
data ou "donnée" (cellules normales)
45 46
Les attributs de l'élément TABLE :

Exemple : menu.html cellpadding border
Les principaux attributs applicables à l'élément TABLE sont :
<html>
 border : pour définir et spécifier l'épaisseur de la bordure <head>
<title>Menu</title>
extérieure; </head>
<body bgcolor="#FFFFFF">
 cellpading : pour spécifier l'espace entre bordures et contenu <TABLE border=3 ALIGN="center"
cellpadding =20 cellspacing = 30 >
des cellules;
<TR> <TD>Home </TD> </TR>
 cellspacing : pour spécifier les marges entre cellules. <TR> <TD>News </TD> </TR>
<TR> <TD>Links </TD> </TR>
<TR> <TD>Contact</TD> </TR>
Note : Il est fortement conseillé de ne pas utiliser ces </TABLE>
</body>
attributs car ils ont été déprécié. La mise en forme d'un </html>
tableau doit se faire en utilisant CSS.

47 cellspacing 48
8
14/03/2023
Exemple : initiative.html Les attributs des éléments TD

<TABLE border=0 ALIGN="center">
<TR> L'élément TD peut être utilisé avec les attributs suivants :
<TD width=20% ><h2>Tux Fan</h2></TD>
<TD> <b>Le site des fanatiques de Tux</b></TD>  Colspan : indique que la cellule courante s'étend sur
</TR>
<TR> plusieurs colonnes.
<TD width=20% >
Home<br>  Rowspan : Indique que la cellule courante s'étend sur
News<br>
Links<br> plusieurs lignes.
Contact<br>
</TD>  BGCOLOR : Définit la couleur de fond des cellules de
<TD> L' Open Source Initiative est une organisation
dévouée à la promotion du logiciel Open Source. Elle a cette ligne. RR, GG et BB sont les valeurs hexadécimales du
été créée par Bruce Perens et Eric S. Raymond.
</TD> Rouge(RR), Vert(GG) et Bleu(BB).
</TR>
</TABLE>
49 50
Exemple
Entête et légende d’un tableau
<TABLE border>
<TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> <TD>E</TD> </TR>  Entêtes
<TR> <TD rowspan=2>F</TD> <TD>G</TD> <TD colspan=3>H</TD> </TR>
<TR> <TD>I</TD> <TD>J</TD> <TD colspan=2 rowspan=2>K</TD> </TR> L'élément th (pour table header ou "en-tête de tableau") permet
<TR> <TD>L</TD> <TD>M</TD> <TD>N</TD> </TR>
</TABLE> de définir des cellules d'entête. Les navigateurs utilisent cette
information pour mettre ces cellules en gras.
 Légendes
L'élément caption permet de placer une légende (titre du
tableau) au-dessus ou au-dessous d'un tableau (selon que
l'attribut align a la valeur top ou bottom).
51 52
Exemple Exemple (code complet):

<TABLE BORDER BGCOLOR="#ccffaa">
<CAPTION>Comparatif modèle économique</CAPTION> <html>
<TR> <head>
<TH COLSPAN=3>Modèle <TH ROWSPAN=2>Vitesse<BR>en km/heure <TH <title>Menu</title>
ROWSPAN=2>Consommation<BR>en litre/100 km </TR> </head>
<TR> <TH>Marque</TH> <TH>Type</TH> <TH>Numéro de série</TH> </TR> <body bgcolor="#FFFFFF">
<TR> <TD>Peugeot 106</TD> <TD>B2</TD> <TD <a href="#ancre"> allez au bas de la page</a>
ALIGN=MIDDLE>234.34</TD><TD>132</TD> <TD>5,7</TD> </TR> <TABLE border=2 ALIGN="center"cellpadding =20 cellspacing = 30 >
<TR> <TD>Citroën AX</TD> <TD>AT67B8</TD><TD <TR> <Th>Home </Th> <Th>Home1 </Th> <Th>Home 2</Th> </TR>
ALIGN=MIDDLE>6789</TD><TD>126</TD> <TD>5,5</TD> </TR> <TR> <TD>News </TD> <TD>News1 </TD></TR>
</TABLE> <TR> <TD>Links </TD> </TR>
<TR> <TD>Contact</TD> </TR>
</TABLE>
<p id="ancre"> je suis le bas de page</p>
</body>
</html>
53 54
9
14/03/2023
Les images :
 L'élément HTML <img> permet d'intégrer une image dans un document.
Attributs :
 SRC : Est obligatoire, et contient le chemin vers l'image qu'on veut intégrer.
 ALT : Propose un texte de remplacement à l'image, permet de décrire
l’image.
Les Images  N'est pas obligatoire mais extrêmement utile pour l'accessibilité. En effet,
les outils de lecture d'écran utilisent cette description pour la lire afin que
les personnes qui ont des déficiences visuelles sachent ce que l'image
représente.
 Ce texte alternatif sera également affiché sur la page si l'image ne peut pas
être chargée (par exemple s'il y a des erreurs réseau, du blocage de contenu
ou un lien périmé),
55 56
 Il peut être aussi utilisé par les moteurs de recherche.
Autres attributs :
Notes :
 WIDTH, HEIGHT
 L’élément <img> est de type inline, en effet,
Permettent de définir la taille intrinsèque de l'image, lui permettant
 On peut le placer dans un paragraphe <p>;
ainsi de prendre l'espace nécessaire avant son chargement (évitant
 L’entourer d’un lien <a>.
ainsi d'avoir des décalages indésirables lors du chargement de la
 Dans le cas où on indique les valeurs de width et height en
page).
pourcentage, ce pourcentage représente l’espace que l’image
La largeur, la hauteur intrinsèque de l'image, exprimée en pixels.
doit prendre par rapport à la taille de son conteneur (son
Cette valeur doit être un nombre entier, sans unité.
élément parent le plus proche, c’est-à-dire l’élément dans lequel
Note : Eviter de redimensionner les images avec html.
il est directement inclus dans le code) et n’est pas un pourcentage
 TITLE
de la taille de base de l’image !
La valeur de l'attribut title est généralement affichée via une bulle
d'information qui apparaît au survol du curseur sur l'image… 57 58
Formats d'images pris en charge par le web : https://www.net-concept.fr/actualites/quels-sont-les-differents-formats-dimage-et-ceux-

adaptes-pour-le-
 JPEG (Joint Photographic Expert Group image) : est le format photo le plus web/#:~:text=JPEG%20%3A%20Parfait%20pour%20les%20images,d%C3%A9former%20sans
%20alt%C3%A9rer%20la%20qualit%C3%A9.
répandu. Ceci est dû à :
 Sa compression de données : supprime toutes les informations que l’on ne
peut pas voir avec l’ œil.
 Légèreté => temps de chargement optimisé ; Remarques :
 Qualité suffisante pour une utilisation digitale ;  Une bonne image vaut mieux qu'un long discours,
 Format universel qui peut être lu sur n’importe quel support ;  MAIS une bonne image est plus longue à charger qu'un
 Ne nécessite pas de logiciel ou d’outil particulier. long discours ...
 GIF (Graphics Interchange Format) : Ce format est utilisé pour les images
animées idéale pour illustrer vos propos, fortement utilisé sur les réseaux sociaux.
 PNG (Portable Network Graphics) Idéal pour les images à fond transparent,
graphique et logo. Celui-ci a un très bon taux de compression tout en conservant
59 60
une bonne qualité d’image.
10

Cours02 1

Transféré par

Droits d'auteur :

Formats disponibles

Cours02 1

Transféré par

Informations du document

Description originale:

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

Cours02 1

Transféré par

Droits d'auteur :

Formats disponibles

14/03/2023

 Un document HTML est un hypertexte décrit à l'aide du langage HTML.

 Un autre emplacement du document,

Document HTML (2)

 Un document HTML est contenu dans un fichier .html, qui est

 Nouveau conteneurs: Web sémantique (ou Web3.0).

 Un fichier .html (code source de la page web) a une structure

 Cette structuration d’éléments est faite grâce au balisage. <html lang="en">

 Chaque balise a un sens que le navigateur comprend et exécute pour <head>

Les balises HML de base:

 Les balises <html>, <head> et <body> :

Tout document HTML conforme doit contenir au minimum

Les balises <html>, <head> et <body> :

Les balises html du body : Balises de formatage de texte :

Balise de paragraphe <p> :

Elle sert à définir un paragraphe, qui est un

Balises de formatage du texte : Exemple de mise en forme:

Barré <U> Souligné </U> <br>

Balise retour à la ligne <br> : Exemple :

Balise <pre> et <code> :

<pre> celui-ci ne comporte aucune signification de point de

Là-haut sur la montagne, l'était un vieux chalet.

Commentaire HTML

Le commentaire n'est pas visible sur le navigateur.

Les éléments (balises) de type block et inline

Les attributs Balise de formatage du texte <font> :

 Les listes HTML permettent d’ordonner du contenu.

ordonnées (liste à puces) (<ul>).

 Les listes sont imbriquables.

Exemple de liste ordonnée OL :

Les liens, l’élément <a> (pour ancre ou anchor en anglais) :

Le principe d’un lien :

Un lien permet de définir une région sensible au clic souris, on

<a href = " # ancre"> section </a> Document Exemple :

2. Si l’ancre se trouve dans une autre page : Chemin relatif :

<a href = " url/nom_du_fichier.html#ancre"> section </a>

Exemples : Quel est le chemin de dinosaure2.jpg à partir de page3.html?

3. Et si cette image se trouve dans un sous-répertoire images situé dans le TP 03

Les tableaux <table> :

 L'élément HTML <table> permet de représenter un tableau

Les tableaux tableau en deux dimensions.

Les attributs de l'élément TABLE :

tableau doit se faire en utilisant CSS.

Exemple : initiative.html Les attributs des éléments TD

Exemple Exemple (code complet):

Formats d'images pris en charge par le web : https://www.net-concept.fr/actualites/quels-sont-les-differents-formats-dimage-et-ceux-

Vous aimerez peut-être aussi