Analgolina HTML5 2SI v2324 VP

ANALGOLINA
DEVELOPPEMENT WEB
HMTL5 VP
SUPPORT
Section : 2eme Sciences Informatique
Professeur : Mr. Fethi HMIDA

Mobile : 216 98 542 942
E-Mail: analgolina@gmail.com
https://www.facebook.com/analgolina
https://www.facebook.com/groups/analgolina
Classe : 2 Ti 1 Fethi HMIDA

Groupe : 1 2 mettre une croix « X »
N° du Poste : …….
Matricule :
Prénom &Nom :
Adresse mail : ………………………@gmail.com
Edition 2023- 2024

Discipline: Algorithmiques et Programmation Section: Sciences Informatique mail to : analgolina@gmail.com A.S. 23-24
D I S C I P L I N E I N F O R M AT I Q U E
Page de gar de
P R O G R A M M AT I O N
S ECTION : S CIENTIFIQUES
DEVELOPPEMENT WEB
HTML5
Niveau : 2ème SI Section : Sciences Informatique
Fethi HMIDA
E-Mail : analgolina@gmail.com
Page : https://www.facebook.com/analgolina
Groupe : https://www.facebook.com/groups/analgolina
Mobile : 98 542 942
O bject if
Objectif :
Exploiter des techniques de développement
pour créer des documents Web
https://www.facebook.com/analgolina mailto : analgolina@gmail.com Page 2

Plan :
• Structure de base d'un document HTML5
Exploiter une page, site existant
Découvrir la structure : balises : doctype, racine, html, en-tête head, corps body
Traiter les attributs : Charset, Name et content de la balise meta contenue dans l’en-tête Head d’un document html.
• Editeurs HTML5
Explorer et Comparer certains éditeurs afin d’argumenter le choix de l’outil à adopter : Notepad++, Sublimetext,
Visual Studio Code,...
Exploiter un éditeur Web qui intègre le HTML5 offrant le mode assisté ou la fonctionnalité d’auto-complétion
(Exemples : BlueGriffon, pagebreeze, etc.).
• Vocabulaires et syntaxes d'une langage HTML5

identifier les balises du langage Html5
distinguer les types de balises (orpheline / paire) ;
organiser un texte : paragraphe, saut de ligne, titre, mise en valeur, texte surligné listes ;
insérer des objets : commentaire, tableau, image, lien hypertexte, son et vidéo ;
créer des formulaires : zone de saisie, liste déroulante, bouton radio, case à cocher et bouton ;
déclencher un évènement : onclick, onmouseover, onfocus et onblur.
• Les feuilles de style CSS3
• Syntaxes d'une règle CSS3
Explorer des pages web existantes.
Déclaration, Sélecteur, Propriété et Valeur)
• Techniques appropries pour appliquer la mise en forme
Prévoir des activités basées sur la variation de la valeur de l’attribut style pour mettre en forme des éléments d’une
page web créée.
Inciter les apprenants à découvrir la syntaxe d’une règle CSS3 (déclaration, sélecteur, propriété et valeur) en
explorant des pages web existantes.
Traiter essentiellement la mise en forme : Font-… (Police), Text-… (Texte) et background-… (Arrière-plan).

1-Comment fait-on pour créer des sites web ?

Exemple le site web Wikipédia.
Aujourd'hui, tout le monde sait

naviguer sur le Web, mais qui
sait vraiment comment le Web
fonctionne ?
Comment créer des sites web

comme celui-ci ?
Les navigateurs web les plus

répandus
1 2 3 4 5 6 …
Je suis certain que vous consultez des sites web tous les jours. Pour cela, vous lancez un
programme appelé navigateur web en cliquant sur l'une des icônes.
Les navigateurs web les plus répandus
N° Navigateur Système
1 Google Chrome Windows, Linux, macOs, Android, iOS
2 Firefox Microsoft, Linux, macOS, iOS, Android
3 Microsoft Edge Windows,
4 Safari macOS, iOS
5 Brave Windows, Linux, macOs, Android, IOS, Chromebook
6 Tor Windows, Linux, macOs
.. …
Avec le navigateur, vous pouvez consulter n'importe quel site web

2- HTML et CSS
❑ HTML : HyperText Markup Language - est le langage du World Wide Web.
❑ CSS : Cascading Style Sheets, aussi appelées feuilles de style.
HTML est un langage de description de page.

▪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 une page web: du texte, des liens, des images,…
CSS : Son rôle est de gérer l ’apparence de la page web (positionnement,

décoration, couleur, taille du texte,…)
Les explorateurs Internet (Browser) permettent d'interpréter le code HTML.

5
Il s'agit de langages informatiques qui permettent de créer des sites web.

Tous les sites web sont basés sur ces langages, ils sont incontournables et
universels aujourd'hui. Ils sont à la base même du Web.
Le langage HTML a été inventé par un certain Tim Berners-Lee en 1991…
Tim Berners-Lee suit encore aujourd'hui avec attention l'évolution du Web.
Il a créé le World Wide Web Consortium (W3C) qui définit les nouvelles
versions des langages liés au Web. Il a par ailleurs créé plus récemment
World Wide Web Foundation qui analyse et suit l'évolution du Web.
Les langages HTML et CSS sont à la base du fonctionnement de tous
les sites web.
Quand vous consultez un site avec votre navigateur, il faut savoir que, en
coulisses, des rouages s'activent pour permettre au site web de s'afficher.
L'ordinateur se base sur ce qu'on lui a expliqué en HTML et CSS pour
savoir ce qu'il doit afficher.

Vous pouvez très bien créer un site web uniquement en HTML, mais celui-ci ne sera pas très
beau, l'information apparaîtra « brute ». C'est pour cela que le langage CSS vient toujours le
compléter.

Diapositive 7
Les différentes versions de HTML et CSS
HTML 1 : c'est la première version créée par Tim

Berners-Lee en 1991. CSS 1 : c'est la première version dès
1996, qui permet de présenter sa page
HTML 2 : la deuxième version web, comme les couleurs, les marges,
les polices de caractères, etc.
HTML 3 : apparue en 1996
HTML 4 : apparue en 1998 et propose l'utilisation de CSS 2 : apparue en 1999, permet
frames. d'utiliser des techniques de
positionnement très précises.
HTML 5 : c'est la version actuelle,
CSS 3 : c'est la version actuelle
C'est cette version que nous allons découvrir

ensemble.
HTML 1 : c'est la première version créée par Tim Berners-Lee en 1991.

HTML 2 : la deuxième version
Les règles et le fonctionnement de cette version sont donnés par le W3C (World Wide Web
Consortium) : organisme international de normalisation.
HTML 3 : apparue en 1996
HTML 4 : apparue en 1998 et propose l'utilisation de frames (qui découpent une page web
en plusieurs parties).
HTML 5 : c'est la version actuelle, permet d'inclure facilement des vidéos, un meilleur
agencement du contenu, de nouvelles fonctionnalités pour les formulaires, etc.
C'est cette version que nous allons découvrir ensemble.
CSS 1 : c'est la première version dès 1996, elle pose les bases de ce langage qui permet de
présenter sa page web, comme les couleurs, les marges, les polices de caractères, etc.
CSS 2 : apparue en 1999, permet d'utiliser des techniques de positionnement très précises,
qui nous permettent d'afficher des éléments où on le souhaite sur la page.
CSS 3 : c'est la version actuelle, qui apporte des fonctionnalités particulièrement attendues
comme les bordures arrondies, les dégradés, les ombres, etc.

L’hypertexte
Ecran B
Notre Site
Ce site vous offre une
gamme d’informations
Ecran A sur notre
établissement. Ecran D
Ce document est la
page d'accueil de
Retour
notre site
Page précédente
Ecran C
Disciplines Nombre d’heures

• · Notre Site
• ·· Disciplines • Arabe
• Autres Site • Français Cinq par semaine
Un lien hypertexte constitue une zone active sur laquelle on clique pour se connecter
automatiquement sur une autre page. La zone active, appelée communément saut ou
hyperlien, peut être un caractère, un groupe de caractères ou une image. Le principe sera
toujours identique : associer à cette zone active l’adresse du document ( appelée URL) qui se
substituera au document affiché lorsque l’on cliquera sur cette zone.
Cette zone active est entourée par une bordure lorsqu’il s’agit d ’une image et soulignée
et/ou colorée dans le cas d’un groupe de caractères. Vous reconnaissez également l’existence
d’un lien en plaçant le pointeur de la souris sur la zone concernée. Il prendra alors la forme
d’une main.
Les liens peuvent vous amener vers :

- un autre document, identifié par son adresse (URL)
- ou une zone dans le même document. Cette zone étant identifiée par une ancre.

Qu'est-ce qu'une URL ?
URL : Uniform Resource Locator

Exemple :
http://www.edunet.tn/ie/default.htm
http : Protocole
www : Service
edunet.tn : Le nom du serveur
ie : Chemin du répertoire
default.htm : Nom du fichier
Qu'est-ce qu'une URL ?

L’URL se définit comme étant une sorte d ’itinéraire (Locator) menant aux données recherchées (Resource),
qui reste identique (Uniform) dans toutes les parties du monde et qui demeure exploitable par tous les
logiciels Web.
Chaque page Web a une adresse, appelée Uniform Resource Locator, ou URL. Vous pouvez la voir dans la
barre d'adresses, presque tout en haut de l'écran Internet Explorer, chaque fois que vous ouvrez une nouvelle
page Web.
Une URL apparaît généralement comme une série de lettres, de caractères de ponctuation et de barres
obliques, comme par exemple :
Exemple http://www.edunet.tn/ie/default.htm
http : L'HyperText Transfer Protocol, généralement abrégé HTTP, littéralement « protocole de transfert
hypertexte », est un protocole de communication client-serveur développé pour le World Wide Web. HTTPS
(avec S : sécurisé, soit « sécurisé ») est la variante sécurisée par le chiffrement et l'authentification (mode
d’accès). Les données recherchées prennent la forme d’un document Web.
Pour obtenir le dit document, vous devez d ’abord vous rendre en Tunisie « tn » : tn étant le domaine
Internet tunisien
On trouve un serveur nommé « WWW.edunet.tn » : c ’est le serveur du sous-domaine Edunet (sous-
domaine de l ’éducation tunisien) sur le serveur, il existe un répertoire « ie » hébergeant le fichier
« default.htm »
Abréviations de types de domaines : Pour vous aider à comprendre comment lire la fin de la première
partie d’une adresse Web (en l’occurrence le domaine), voici une liste de quelques abréviations courantes :
•.com commercial .edu education gov gouvernement
•.net organisme de réseau org organisations diverses
•fr France jp Japon it Italie tn pour le domaine tunisien
Préfixes : La partie qui précède l’adresse (http://dans notre exemple) désigne le type de ressource vers
laquelle on se dirige:
ftp:// désigne un site ftp ; permet d ’envoyer un fichier
gopher:// désigne une ressource Gopher ;
http:// désigne une page web (page codée en Html) ; permet d ’afficher un document Web
mailto:// désigne le service de la messagerie électronique ; permet d ’envoyer un message.

Ouvrir un navigateur disponible

Accéder à l'adresse suivante
http://www.edunet.tn/index.php?id=196&lan=2
10
Avec le bouton droit de la souris, Cliquer sur "Afficher le code source de la page".
C'est un texte écrit à l'aide d'un éditeur de texte mais en

langage HTML et CSS3 11

Les éditeurs HTML
Notepad ++
BlueGriffon
CoffeCup
Sublime Text PageBreeze5
BlueGriffon
Visual studio code Nvu

12

Exemple_0
Structure d’un document HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Ma première page HTML </title>
</head>
<body>
<h1> Ceci est un titre niveau 1 </h1>
<p> Ceci est mon premier paragraphe </p>
</body>
</html>
14
•La déclaration <!DOCTYPE ...> précise la version d’HTML utilisée.

•
La balise <html>
C'est la balise principale du code. Elle englobe tout le contenu de votre page. Comme vous
pouvez le voir, la balise fermante </html> se trouve tout à la fin du code !
L'en-tête <head> et le corps <body>

Une page web est constituée de deux parties :
❖ L'en-tête : cette section donne quelques informations générales sur la page comme
son titre, l'encodage , etc.
❖ Le corps : c'est là que se trouve la partie principale de la page. Tout ce que nous
écrirons 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.).
❖ <meta name="viewport" content="width=device-width, initial-scale=1.0">

Les balises de base d’un document HTML
<!- … -> : Définit …………

<!DOCTYPE html> : précise ……..
<html> : Définit …………
<meta charset="utf-8"/> : ….
<title> : Définit …………
<head> : Définit …………
<body> : Définit …………
<h1> : Définit …………
<p> : Définit …………
15
•<HTML> et </HTML> : Tous les documents HTML commenceront par la balise <HTML> et se
termineront par la balise </HTML>.
•<HEAD> et </HEAD> : On y indique toutes les informations qui accompagnent le fichier (en-
tête de la page) mais n'apparaissent pas explicitement dans la page Web, comme le nom de
l'auteur, le sujet de la page, les mots clefs, l'éditeur HTML avec lequel vous avez produit le
fichier etc.
Exemple :
<HEAD>
<TITLE> Mon premier exemple </TITLE>
</HEAD>
•<BODY> et </BODY> : Le corps de document contient le code de la page proprement dite
(corps de la page) : tout ce qui apparaîtra dans la fenêtre des navigateurs.
Un commentaire est un texte placé entre  ou encore entre les balises <COMMENT>
et </COMMENT>

Structure d’un document HTML

Exemple_01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Ma première page HTML </title>
<link rel="stylesheet“ href="Style_Exemple_0.CSS">
</head>
<body>
<h1> Ceci est un titre niveau 1 </h1>
<p> Ceci est mon premier paragraphe </p>
</body>
</html>
Style_Exemple_0.CSS
h1{
font-size: 32px;
color: orange;
}
P {
font-size: 24px;
color: blue;
}
16

<BODY>
<B> Ce texte va être affiché en gras </B>
<BR> <I> Ce texte va être affiché en italique </I>
<BR> <U> Ce texte va être souligné </U>
<BR> <S> Ce texte va être barré </S>
<BR> <TT> Ce texte va être en caractères de M.A.E </TT>
<CENTER> Ce texte va être centré </CENTER>
<BR> <BR> X <SUB> 1 </SUB> <SUP> 2 </SUP> + 4X <SUB>2 </SUB> + 5 = 0
<BR><B><I> Cette équation n’admet pas de solutions <U>dans R </U></B></I>
</BODY>
17
Les Divisions d’un document

<BR> : Retour à la ligne
<P…> … </P> : Nouveau paragraphe
<HR…> : Ligne horizontale de séparation
Attribut :
ALIGN : l’alignement de la ligne
COLOR : Couleur de la ligne
NOSHADOW : Supprime l’effet 3D
SIZE : la hauteur de la ligne
WIDTH : la largeur de la ligne
Les Styles
<B> ... </B> : Pour écrire en gras.
<I> ... </I> : Pour écrire en italique.
<U> ... </U> : Pour souligner le texte.
<S> … </S> : Pour barrer le texte
<TT> ... </TT> : Caractères de machine à écrire.
<CENTER> … </CENTER> : Le texte va être centré.
<SUB> ... </SUB> : Texte en indice.
<SUP> ... </SUP> : Texte en exposant.
<FONT…> ... </FONT> : Agit sur la police, la couleur et la taille des caractères.

Fond de page et couleur du texte
La balise <BODY> peut recevoir plusieurs attributs qui vont permettre de contrôler la couleur du fond
de la fenêtre du Browser, la couleur des caractères du texte, et enfin la couleur des liens.
⚫BGCOLOR : Couleur du fond (format RGB)
⚫BACKGROUND : Pour insérer une image de fond (GIF, JPG)
⚫TEXT : Couleur du texte (format RGB)
⚫LINK : Couleur des liens non encore visités (format RGB)
⚫VLINK : Couleur des liens visités (format RGB)
⚫LEFTMARGIN : Marge de gauche en pixels
⚫TOPMARGIN : Marge du haut en pixels
Exemple_TP04
18
…………………………….

Les Listes
⚫ Les listes sont composées de deux éléments:
1. Les ancres de type de liste (<UL> ou <OL>)
2. Les ancres d’item de liste (<LI>)
⚫ les types de liste

<UL> et </UL> : Délimitent une liste avec puces (Unordered List).
<OL> et </OL> : Délimitent une liste à numéros ou à lettres (Ordered List).
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title> TP3 : Les listes dans un texte </title>
</head>
<BODY>
<H3 ALIGN=“CENTER” > Exemple de listes régulières </H3>
<OL>
<LI> Pommes </LI>
<LI> Melon </LI>
</OL>
<BR>
<UL>
<LI> Pommes </LI>
<LI> Melon </LI>
</UL>
</BODY>
19
</HTML>
Liste non ordonnée (<UL> Unordered List)

Elles servent le plus souvent à lister des paragraphes pouvant faire plusieurs lignes.
On peut imposer un style avec l'attribut type qui peut prendre les valeurs : circle, disc ou
square.
• circle donne des cercles ;
• disc donne des disques (pleins) ;
• square donne des carrés.
Liste ordonnée (<OL> Ordered List)

Les paragraphes de la liste seront numérotés.
Par défaut, le navigateur choisira la forme de la numérotation, en changeant éventuellement
de forme selon le niveau d'incrémentation dans la liste. On peut toutefois imposer un style
avec l'attribut type qui peut prendre les valeurs : A, a, I, i ou 1.

Activité_6
20
<!DOCTYPE html>
<html>
<head>
<title> TP2 : organiser un texte </title>
</head>
<body>
<h1> HTML5 </h1>
<p> <strong>HTML5</strong> <mark>(HyperText Markup Language 5) </mark>est la dernière
révision majeure du HTML <br>(format de données conçu pour représenter les pages web).</p>
<p>Cette version a été finalisée le <em>28 octobre 2014.</em></p>
<h3> Évolution du langage : </h3>
<ol type="1">
<li> 1989-1992 : Origine </li>
<li> 1993 : HTML 1.0 </li>
<li> 1995-1996 : HTML 2.0 </li>
<li> 1997 : HTML 3.2. et 4.0 </li>
<li> 2000 : XHTML </li>
<li> De 2007 à nos jours : HTML 5 et abandon du XHTML 2 </li>
</ol>
<dl>
<dt> HTML </dt>
<dd> Hyper Text Markup Language </dd>
<dt> XHTML </dt>
<dd> Extensible Hyper Text Markup Language </dd>
</dl>
</body>
</html>

Insertion des Médias

<h1> INSERTION MEDIAS </h1> image, son et vidéo
<h2> Insertion d'une image </h2>
< img align= middle width="250" height="150" border= "2" controls

src = "D:/objets_web/logo.jpg" altl="logo HTML" title= "info" >
<h2> Insertion d'une image gif </h2>
< img align= middle width="250" height="150" border= "2" controls

src = "D:/objets_web/drapeau tn.gif" altl="drap tn" title= "info" >
<h2> Insertion son </h2>

<audio autoplay muted controls >
<source src ="D:/objets_web/Ambiance.mp3" type="audio/mp3" >
</audio>
<h2> Insertionvidéo </h2>
<video align= top width="250" height="150" border= "2" controls autoplay muted>
<source src ="D:/objets_web/ourse.mp4" type="video/mp4" >
</video>
21
1- Insertion image
<img width= "Valeur" height= "Valeur" border= "Valeur" controls
src ="chemin/nom du ficher" alt="texte" title ="texte" >
Les formats les plus utilisés sont : jpg, jpeg, png, gif, bmp, svg, ico,…
2- Insertion son
< audio :controls autoplay muted >
<source src = "chemin/nom du ficher" type ="audio/ extension" >
</audio>
Les formats les plus utilisés sont : wav, mp3, mpeg, ogg, …
3- Insertion vidéo
<video align = "Valeur" width= "Valeur" height= "Valeur" border = "Valeur" autoplay muted controls >
<source src = "chemin/nom du ficher" type ="video/extension" >
</video>
Les formats les plus utilisés sont : mp4, webm,, …
4- Les attributs
align : permet l'alignement de l’objet par rapport à la ligne du texte courant (top, middle, bottom, left,
right).
border : pour mettre un cadre au tour de l’objet.
width : largeur de l'objet = "valeur".
height : hauteur de l'objet = "valeur".
alt : texte alternatif texte s'affichent si le navigateur ne trouve pas l'objet ="texte".
title : texte qui va servir d’aide ="texte ".
controls : pour ajouter les bouton lecture, pause et la barre de défilement.
autoplay muted :
type : extension du fichier.

Exemple
Les 01
Tableaux
C’est tableau de …….. lignes et de …….. colonnes de la page :

Largeur : ……….. %
Bordure = …………..
Titre du tableau : ……………………………………………………………………………
Ligne des champs (en tête): ……………………………………………………………
Créer une page HTML permettant de créer ce tableau.

22
<!DOCTYPE HTML>
<html>
<head>
<title>Tableau Exemple 01</title>
</head>
<body>
<table width="60%" border="1">
<caption> <B>Les notes d'info </B></caption>
<tr>
<th>Nom</th>
<th>Note1</th>
<th>Note2</th>
</tr>
<tr>
<td>Nour</td>
<td>12.25</td>
<td>08.25</td>
</tr>
<tr>
<td>Meriem</td>
<td>11.75</td>
<td>07.50</td>
</tr>
</table>
</body>
</html>

Constatation
Constatation
<TABLE>
<TABLE>et
et </TABLE>
</TABLE> :: Définition
Définitiond’un
d’un tableau.
tableau.
<CAPTION>
<CAPTION> et
et</CAPTION>
</CAPTION> :: Titre
Titre du
dutableau
tableau
<TR>
<TR>et
et </TR>
</TR> :: Une
Uneligne
lignedu
dutableau.
tableau.
<TD>
<TD>et
et<TD>
<TD> :: Une
UneCellule
Celluledu
dutableau.
tableau.
<TH>
<TH>et
et</TH>
</TH> :: Une
UneCellule
CelluleEn-tête
En-tête du
dutableau
tableau(gras
(graset
etcentré).
centré).
.. propriétés de la balise <TABLE>
Les
Les propriétés de la balise <TABLE>
Attributs
Attributs Description
Description
CELLSPACING
CELLSPACING Définit
Définit l'espace
l'espace entre
entre les
les cellules
cellules (en
(en pixel).
pixel).
Représente l'espace entre le contenu
Représente l'espace entre le contenu de de la
la cellule
cellule et
et le
le bord
bord extérieur
extérieur de de la
la cellule
cellule
CELLPADING
CELLPADING (en
(en pixel).
pixel).
BORDER
BORDER Définit
Définit l’épaisseur
l’épaisseur dede bordure
bordure (en (en pixel).
pixel).
La largeur du tableau en pixel ou en
La largeur du tableau en pixel ou en pourcentage
pourcentage par par rapport
rapport αα la
la largeur
largeur dede la
la
WIDTH
WIDTH fenêtre.
fenêtre.
La
La hauteur
hauteur dudu tableau
tableau enen pixel
pixel ou
ou en
en pourcentage
pourcentage par par rapport
rapport αα la
la hauteur
hauteur dede la
la
HEIGHT
HEIGHT fenêtre.
fenêtre.
ALIGN
ALIGN L’alignement
L’alignement du du tableau
tableau par
par rapport
rapport au
au conteneur.
conteneur.
BGCOLOR
BGCOLOR La couleur d’arrière-plan du tableau.
La couleur d’arrière-plan du tableau. 23
23
Les tableaux sont extrêmement utiles en HTML : ils servent tout d'abord, évidemment, à retranscrire les
tableaux classiques (comme par exemple des résultats d'expériences ou des listings). Mais leur réelle utilité
provient du fait que le HTML ne prévoit pas, initialement, de mise en page. En créant un tableau dont les
séparations sont invisibles, on arrive ainsi à régler la disposition des différents éléments composant la page.
On définit le tableau dans l'ordre suivant :

• on déclare le tableau : <table>
• on déclare la première ligne : <tr>
• on déclare, une par une, les cellules de la première ligne :
• en les ouvrant par la balise <td>
• en les fermant par la balise </td>
• on conclut la ligne : </tr>
• on répète les opérations 2 à 4 autant de fois qu'il y a de lignes
• on conclut le tableau : </table>
La balise <TH> est identique à la balise <TD> sauf que le texte de la cellule sera considéré comme du texte
d’en-tête. Ce texte est automatiquement centré et est mis en caractères gras.

Les propriétés de la balise <TR>

L’alignement horizontal des différents contenus des cellules d’une même ligne
ALIGN
(les valeurs possibles : left, right et center).
L’alignement vertical des différents contenus des cellules d’une même ligne (les
VALIGN
valeurs possibles : bottom, top et middle).
BGCOLOR La couleur d’arrière-plan des différentes cellules d’une ligne.
La hauteur d’une ligne en pixel ou en pourcentage par rapport α la hauteur du
HEIGHT
tableau.
Propriétés de la balise <TD>

L’alignement horizontal du contenu d’une cellule (les valeurs possibles : left, right et
ALIGN
center).
L’alignement vertical du contenu d’une cellule (les valeurs possibles : bottom, top et
VALIGN
middle).
WIDTH La largeur d’une cellule en pixel ou en pourcentage par rapport α la largeur du tableau.
HEIGHT La hauteur d’une cellule en pixel ou en pourcentage par rapport α la hauteur d’une ligne.
BGCOLOR La couleur d’arrière-plan d’une cellule.
ROWSPAN Fusionner des cellules horizontalement.
COLSPAN Fusionner des cellules verticalement.
Résumé
Un tableau s'insère avec la balise <table> se définit ligne par ligne avec <tr>.
Chaque ligne comporte des cellules <td> (cellules normales) ou <th> (cellules d'en-tête).
Le titre du tableau se définit avec <caption>.
On peut ajouter une bordure aux cellules du tableau avec border.
Pour fusionner les bordures, on utilise la propriété CSS border-collapse.
Un tableau peut être divisé en trois sections : <thead> (en-tête), <tbody> (corps) et <tfoot>
(bas du tableau). L'utilisation de ces balises n'est pas obligatoire.
On peut fusionner des cellules horizontalement avec l'attribut colspan ou verticalement

avec rowspan. Il faut indiquer combien de cellules doivent être fusionnées.

Les liens hypertextes

On distingue 4 types de liens :
⚫Lien Interne vers une ancre “position”: Un lien vers un autre endroit de
la page web en cours,
<a href=“# signet “> : section “ancre” est le cible à atteindre </a>
⚫Lien Externe : Un lien vers un autre ,site ou une page d'un site
–<a href=“adresse du site ou de la page> : texte du lien vers le site </a>
<a href=“mailto:analgolina@gmail.com”> nous contacter </a>
Lien Externe Interne : On fait référence, dans ce cas, à un point précis
d’un autre fichier HTML.
<a href=“adresse/nom du fichier # signet ” > ,,, </a>
Lien Exécutable : On fait référence à un fichier rechargeable,
<a href=“adresse/nom du fichier”> ,,, </a>
25
Le langage HTML permet de transformer les objets textes et les images en liens cliquables
pour nous amener vers d'autres emplacements que ce soit dans la même page ou vers une
autre page : c'est la notion de lien hypertexte.
L ’attribut HREF peut pointer vers :
Un lien externe : Il s’agit de créer un lien vers un document HTML ou vers un serveur situé
quelque part sur Internet.
Un lien interne : Dans ce cas on se propose de mettre un lien hypertexte vers un point précis
du fichier en cours d’exécution.
Un point spécifique d’un lien externe (int/ext) : On fait référence, dans ce cas, à un point
précis d’un autre fichier HTML.
Lorsque la balise <A> comporte les deux attributs HREF et NAME en même temps, elle est
considérée comme ancre de départ pour un nouveau document HTML et ancre d’arrivée d’un
autre lien.

<p> Moteur de recherche:

<ul>
<li><a href="http://www.google.com"> Google </a> </li>
<li><a href="http://www.yahoo.com"> Yahoo </a> </li>
<li><a href="http://www.bing.com" > Bing </a> </li>
</ul>
</p>
26
Constatations
❖ Les zones sensibles aux clics sont des liens hypertextes crées avec la balise
<A href= « Adresse cible "> texte </A>
❖ Pour chaque adresse cible correspond un protocole, comme le montre le tableau suivant :
Syntaxe Description
<A HREF="adresse"> Protocole par défaut : http
<A HREF="#position"> Lien interne, protocole http
<A HREF="http://adresse Web"> Protocole http
<A HREF="ftp://adresse ftp"> Protocole FTP pour le transfert de fichiers
<A HREF="mailto:adresse email"> Protocole SMTP pour le courrier électronique
<A HREF="file://adresse fichier"> Adressage locale sur un poste non distant
❖ Avec la balise <A> on peut utiliser la propriété TARGET, qui permet de spécifier la fenêtre
d'affichage du lien. Cette propriété peut avoir les valeurs suivantes :
"_blank" : une nouvelle fenêtre
"_self« : la même fenêtre
"_parent" ou non du cadre : voir la partie du cours sur les cadres.

153

Analgolina HTML5 2SI v2324 VP

Transféré par

Informations du document

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

Analgolina HTML5 2SI v2324 VP

Transféré par

Droits d'auteur :

Formats disponibles

ANALGOLINA

Professeur : Mr. Fethi HMIDA

Classe : 2 Ti 1 Fethi HMIDA

Edition 2023- 2024

Niveau : 2ème SI Section : Sciences Informatique

Mobile : 98 542 942

https://www.facebook.com/analgolina mailto : analgolina@gmail.com Page 2

• Vocabulaires et syntaxes d'une langage HTML5

https://www.facebook.com/analgolina mailto : analgolina@gmail.com Page 3

1-Comment fait-on pour créer des sites web ?

Aujourd'hui, tout le monde sait

Comment créer des sites web

Les navigateurs web les plus

https://www.facebook.com/analgolina mailto : analgolina@gmail.com Page 4

❑ HTML : HyperText Markup Language - est le langage du World Wide Web.

❑ CSS : Cascading Style Sheets, aussi appelées feuilles de style.

HTML est un langage de description de page.

CSS : Son rôle est de gérer l ’apparence de la page web (positionnement,

Les explorateurs Internet (Browser) permettent d'interpréter le code HTML.

Il s'agit de langages informatiques qui permettent de créer des sites web.

https://www.facebook.com/analgolina mailto : analgolina@gmail.com Page 5

https://www.facebook.com/analgolina mailto : analgolina@gmail.com Page 6

Les différentes versions de HTML et CSS

HTML 1 : c'est la première version créée par Tim

C'est cette version que nous allons découvrir

HTML 1 : c'est la première version créée par Tim Berners-Lee en 1991.

https://www.facebook.com/analgolina mailto : analgolina@gmail.com Page 7

Disciplines Nombre d’heures

Les liens peuvent vous amener vers :

https://www.facebook.com/analgolina mailto : analgolina@gmail.com Page 8

Qu'est-ce qu'une URL ?

URL : Uniform Resource Locator

Qu'est-ce qu'une URL ?

https://www.facebook.com/analgolina mailto : analgolina@gmail.com Page 9

Ouvrir un navigateur disponible

C'est un texte écrit à l'aide d'un éditeur de texte mais en

https://www.facebook.com/analgolina mailto : analgolina@gmail.com Page 10

Les éditeurs HTML

Sublime Text PageBreeze5

Visual studio code Nvu

https://www.facebook.com/analgolina mailto : analgolina@gmail.com Page 11

•La déclaration <!DOCTYPE ...> précise la version d’HTML utilisée.

L'en-tête <head> et le corps <body>

https://www.facebook.com/analgolina mailto : analgolina@gmail.com Page 12

Les balises de base d’un document HTML

<!- … -> : Définit …………

https://www.facebook.com/analgolina mailto : analgolina@gmail.com Page 13

Structure d’un document HTML

https://www.facebook.com/analgolina mailto : analgolina@gmail.com Page 14

Les Divisions d’un document

https://www.facebook.com/analgolina mailto : analgolina@gmail.com Page 15

Fond de page et couleur du texte

https://www.facebook.com/analgolina mailto : analgolina@gmail.com Page 16

⚫ les types de liste

Liste non ordonnée (<UL> Unordered List)

Liste ordonnée (<OL> Ordered List)

https://www.facebook.com/analgolina mailto : analgolina@gmail.com Page 17

https://www.facebook.com/analgolina mailto : analgolina@gmail.com Page 18

Insertion des Médias

<h2> Insertion d'une image </h2>

< img align= middle width="250" height="150" border= "2" controls

<h2> Insertion d'une image gif </h2>

< img align= middle width="250" height="150" border= "2" controls

<h2> Insertion son </h2>