CompLit - Journal of European Literature, Arts and Society - n. 7 - Table of ...
cours web chap1.pptx
1. Développement Web
Chapitre I : Langage HTML
Enseignante : Maha Maalej
Année universitaire : 2021/2022
Ecole Polytechnique Méditerranéenne
2. Plan
1. Structure d’un document HTML
1. Entête
2. Corps
2. Les balises de mise en forme
3. Les liens hypertextes
4. Les tableaux HTML
5. Les images
6. Les formulaires et les cadres HTML
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 2
3. Historique
• Internet réseau des réseaux qui a été créé en 1969 avec le réseau
militaire américain ARPANET (Advanced Research Projects Agency
NETwork)
• L’infrastructure de ARPANET est mise à disposition des universitaires
américains le nombre d’utilisateurs a augmenté ARPANET se
détache de sa vocation dans les années 70
• Le protocole de transport TCP/IP (Transmission Control Protocol /
Internet Protocol) s’impose comme protocole de communication sur
internet
Le CERN est l’Organisation européenne pour la recherche nucléaire.
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 3
4. Historique
• ARPANET s’est divisée en 2 organisations (NSFnet et M!LNET)
dans les années 80
il y avaient quelques centaines de serveurs sont interconnectés
• Début des années 90 le CERN (Centre Européen de recherche
nucléaire)
• Projet qui définit un langage de présentation de documents
hypertextes ainsi qu’un protocole de transfert pour ces documents
deux technologies permettant l’échange d’information
(commerce, messagerie électronique)
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 4
5. HTTP (Hypertext Transfer Protocol)
• C’est le protocole de transfert de documents hypertextes.
• Il est conçu pour échanger des documents HTML
• Le langage HTML permet notamment la lecture de documents sur internet à partir
de machines différentes, grâce au protocole HTTP, permettant d'accéder via le
réseau à des documents repérés par une adresse unique, appelée URL (Uniform
Resource Locator).
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 5
6. Principe du protocole HTTP
• HTTP utilise un modèle client-serveur où le navigateur Web est le client.
• Le client communique avec le serveur Web hébergeant le site Web.
• Chaque fois qu'un client demande des informations au serveur du site Web.
• Le navigateur envoie un message de requête au serveur HTTP pour les objets
demandés.
• Puis :
• HTTP ouvre une connexion entre le client et le serveur via TCP.
• HTTP envoie une requête au serveur qui collecte les données demandées.
• HTTP renvoie la réponse avec les objets au client.
• HTTP ferme la connexion.
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 6
7. Les serveurs Web
• Logiciel qui permet à l'utilisateur de consulter des pages web
• Exemple: Apache, IIS ( Microsoft )…
• Envoyer des fichiers qui décrivent des pages web aux utilisateurs qui
en font la requête
• Exemple: moteurs de recherches consultables sur le web (Google, Bing,
Yahoo…)
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 7
8. Les moteurs de recherche
• Un programme entre l’utilisateur et un logiciel de base de données
• Programme qui traduit la requête pour interroger la base de données et insérer les
résultats obtenus dans une squelette de pages Web
• Les pages sont construites à la volée et non pas stockées sur le serveur
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 8
9. HTML
• Le HTML (HyperText Mark-up Language) [Tim Berners-Lee 1990]
• Langage confié à un groupe international indépendant le « World Wide Web
Consortium » (W3C) (www.w3c.org)
• C’est un langage de marquage (de structuration ou de balisage) dont le rôle est de
formaliser l'écriture d'un document avec des balises de formatage.
• Langage de description de documents hypertextes qui se base sur une syntaxe de
balisage simple
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 9
10. HTML
• Une page web peut contenir : du texte, des images, des tableaux, des formulaires,
etc.
• Le code source est basé sur des éléments repérés par des balises.
• Les balises sont des informations spéciales destinées au navigateur, elles
n’apparaissent pas à l’écran (sauf lorsqu’on affiche le code source).
• Les balises permettent d'indiquer la façon dont doit être présenté le document et
les liens qu’il établit avec d'autres documents.
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 10
11. Syntaxe de base de HTML
• Langage à balises qui permet de définir des zones qui ont certaines propriétés
• Définir une zone : <BALISE> Zone </BALISE>.
• Exemple: <html> …..</html>
• Paramétrage d’une balise : <BALISE paramètre="valeur">
• Exemple: align= left|center|right...
• Certaines marques de fin sont facultatives
• Exemple : <br> ou <br/>
• Imbrication des balises:
<head>
<title> Titre de la page </title>
</head>
• Commentaires : <!-- Ceci est un commentaire -->
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 11
12. Règles de base
• Les balises HTML utilisent les caractères < et > comme délimiteurs
• Exemple: <html>, <table>, <img>, <a>, <ul>, etc.
• Les balises HTML peuvent être utilisées en minuscules ou majuscules
• Exemple: <html> ou <HTML>
• Un fichier rédigé en HTML doit être suffixe .html ou .HTML ou .HTM ou
.htm
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 12
13. Structure d’un document
• Délimité par la balise <html>
• Contient une entête (balise <head>) et un corps (<body>)
• Exemple
<html>
<head>
<title> Mon premier document HTML
</title>
</head>
<body>
<p> Bonjour tout le monde </p>
</body>
</html>
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 13
14. Entête
• Donne des informations qui n’apparaitront pas sur le document
• Exemple de données :
• Le titre de la fenêtre dans laquelle est affichée la page web (<title>),
• Le nom de l’auteur ou les mots clés (<meta>)
<meta name= "nom" lang="langue" content="info">
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 14
15. Exemple
<html>
<head>
<meta name="Author" content="Jean Dupont">
<meta name="Date" content="2003-01-23">
<meta name="Keywords" lang= "en-us" content="vacation, Japan, Osaka">
<title> Mes vacances au Japon </title>
</head>
<body>
<p> Le Japon est un beau pays </p>
</body>
</html>
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 15
16. Corps
• Définit la zone qui contient la description du document visualisé
• Définit le contenu et la présentation du document
• Utilise plusieurs paramètres : background, text, link, ylink, alink, bgcolor
• Exemple de couleurs:
• black= "#000000"
• yellow="#FFFF00"
• blue="#0000FF"
• olive="#808000"
• Exemple:
<body bgcolor="cyan" text="red" link="red" alink="# FF00FF" vlink="maroon">
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 16
17. Couleurs en HTML
Nom HTML Traduction Code RGB
aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
white
yellow
eau
noir
bleu
fuchsia
gris
vert
lime, citron vert
marron
bleu marine
vert olive
violet
rouge
argent
sarcelle
blanc
jaune
#00FFFF
#000000
#0000FF
#FF00FF
#808080
#00x000
#008000
#00FF00
#000080
#808000
#800080
#FF0000
#C0C0C0
#008080
#FFFFFF
#FFFF00
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 17
18. La mise en page
<br> : saut de ligne
<p> : début de paragraphe
<h1> à <H6 > h1 pour les gros titres, h3 taille de la police standard
<hr> : affiche une ligne de séparation avec les paramètres align, noshade (enlève
l’ombrage de la barre), size, width
Exemple : <HR noshade size="5" width="50%" align= "center">
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 18
19. Les styles
<em> : met en valeur une partie du texte
<b> : met une partie en gras
<i> : italique
<strike> : caractères barrés
<blink> : clignote la partie du texte concernée
<big> : écris en gras
<small> : écris en petit
<q> citation
<sup> exposant
<sub> indice
<font size=12>
<div> cette commande permet de cadrer un bloc de texte
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 19
20. Caractères spéciaux
a accent grave à à
a accent grave majuscule À À
e accent grave è è
e accent grave majuscule È È
e accent aigu é é
e accent aigu majuscule É É
e accent circonflexe ê ê
e accent circonflexe majuscule Ê Ê
inférieur / chevron ouvrant < <
inférieur ou égal ≤ ≤
supérieur / chevron fermant > >
supérieur ou égal ≥ ≥
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 20
21. Les balises avancées
• les liens hypertextes permettent de relier une partie du texte à un autre endroit du
Web
< a href="URL"> Un texte </a >
• Les URLs ont la forme service://serveur/chemin/fichier
• https://www.facebook.com/home.php
• Les services proposés : http ( serveur web ), ftp (serveur de fichiers), mailto:file
• Le nom du serveur composé de plusieurs parties
• 1ère identifie le service qu’il rend www ou ftp
• 2ème localise le serveur
• enfin le type d’organisme ou de pays (org, com, gov, fr, ca, uk, tn, etc,)
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 21
22. Qu’est ce qu’une URL
• URL (Uniform Resource Locator) : moyen de nommer un objet dans le monde
WWW dont la syntaxe est :
type:serveur:port/chemin_acces/fichier#etiquette?parametres
• Types de serveur possibles:
- http: serveurs WWW
- ftp: pour les fichiers à transférer
- etc.
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 22
23. Les balises avancées (Suite)
• Chemin et nom du fichier : donne l’arborescence de fichier de la machine qui
contient le site web
Exemple : https://www.w3.org/WAI/teach-advocate/accessible-presentations/
<a href ="adresse"> lien </a> permet de lier à:
• L’adresse d’un autre site
• Les adresses de fichiers
• Une adresse dans la page (il faut définir des points d’ancrages et la référence à
chaque point)
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 23
24. Ancre, un lien particulier
• Une adresse dans la page (il faut définir des points d’ancrages et la référence à chaque point)
• On va créer un repère invisible dans la page.
• Ce repère s’appelle une ancre .
• Et on va créer un lien vers cette ancre.
<a name="label"> Point d'ancrage </a>
<a href="#label"> Référence à mon point d'ancrage </a>
• Ancre dans une autre page
• Pour créer l'ancre, on ajoute l'attribut id="nomdelancre"
• dans à peu prés n'importe quelle balise de la page cible (par exemple cible.html).
• On crée un lien vers l'ancre nomdelancre dans notre page :
<a href="cible.html#nomdelancre">mon lien </a >
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 24
25. Les balises avancées (Suite)
• Accéder au paragraphe 3 du document local
• Exemple:
<a name="[3]"> Paragraphe 3</a>
<a href="exemple.html#[3]"> Note 3</a>
• Accéder à une partie du document courant ( au mot "ancres" du document )
• Exemple:
<a name="ancres"> Les ancres </a>
<a href=" #ancres"> Retournons au début du document </a>
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 25
26. Les balises avancées (Suite)
• Envoyer un message électronique
<a href mailto:"adresse_correspondant">ancre</a>
Ou
<a href mailto:"adresse?Subject=sujet&bcc=email@email.fr">Ecrivez-moi</a>
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 26
27. Les balises avancées (Suite)
Les images <img src="nom du fichier">
Les paramètres sont :
- alt : donne une alternative à l’image lorsque le navigateur ne peut afficher l’image
- align : utilisé pour l’alignement
- width : largeur de 1’image
- height : hauteur de 1’image
- border : épaisseur du bord de l’image
- space : espace vertical entre les bords de l’image et un autre objet
- title : info bulle avec l’image
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 27
28. Les balises avancées (Suite)
Les listes
• Les items sont marqués par <li>
• Trois types de liste:
• Listes à puce
• Listes numérotée
• Liste descriptive
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 28
29. Les balises avancées (Suite)
• Listes simples ("Unnumbered") : <ul>
• Paramètres type=disc|circle|square
compact: permet de tasser un peu la liste
• Exemple:
<ul type = square>
<li> texte 1 </li>
<li> texte 2 </li>
</ul>
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 29
30. Les balises avancées (Suite)
• Listes ordonnées : <ol>
• Paramètres : type= 1|a|A|i|I
• Les items sont marques par <li>
• Exemple :
<ol >
<li> texte 1 </li>
<li> texte 2 </li>
</ol>
<ol type=A>
<li> texte 1 </li>
<li> texte 2 </li>
</ol>
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 30
31. Les balises avancées (Suite)
• Liste descriptive (glossaire) :
• Exemple:
<dl>
<dt> terme1 </dt>
<dd> description du terme1 </dd>
<dt> terme2 </dt>
<dd> description du terme2 </dd>
</dl>
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 31
32. Les balises avancées (Suite)
Les tableaux
• Les balises sont :
• <table> : définit la zone qui contiendra les objets du tableau
• Paramètres : summary, width, align (position du texte), border, cellspacing
• <caption> : définit la légende du tableau
• <tr> : définit une ligne du tableau
• Paramètres : align, valign (top, middletop, baseline)
• <td> : définit une cellule du tableau
• <th> : définit les entêtes du tableau ( 1ère ligne ou colonne )
• Paramètres : align, valign, colspan (recouvrir plusieurs colonnes avec une seule
cellule), rowspan (fusionner des lignes dans une cellule)
10/02/2023 Maha Maalej Ecole Polytechnique Méditerranéenne 32