cours web chap1.pptx

Développement Web
Chapitre I : Langage HTML
Enseignante : Maha Maalej
Année universitaire : 2021/2022
Ecole Polytechnique Méditerranéenne

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

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.

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)

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).

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.

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…)

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

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

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.

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 :

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

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>

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">

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>

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">

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

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">

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

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 ≥ ≥

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,)

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.

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)

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 >

• 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>

• 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>

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

Les listes
• Les items sont marqués par <li>
• Trois types de liste:
• Listes à puce
• Listes numérotée
• Liste descriptive

• 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>

• 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>

• Liste descriptive (glossaire) :
• Exemple:
<dl>
<dt> terme1 </dt>
<dd> description du terme1 </dd>
<dt> terme2 </dt>
<dd> description du terme2 </dd>
</dl>

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)

• Exemple :
<table border =1 >
<caption><em> Statistiques en Tunisie</em></caption>
<tr>
<th rowspan=2> </th>
<th colspan=2> Age </th>
</tr>
<tr> <th> <30 </th> <th> >30 </th> </tr>
<tr> <th> Hommes </th> <td> 1.8 </td> <td> 1 </td> </tr>
<tr> <th> Femmes </th> <td> 1.7 </td> <td> 0.8</td> </tr>
</table>

• Exemple :
<table border =1 >
<tr>
<th colspan=2> Age </th>
</tr>
<tr> <th> <30 </th> <th> >30 </th> </tr>
<tr> <th> Hommes </th> <td> 1.8 </td> <td> 1 </td> </tr>
<tr> <th> Femmes </th> <td> 1.7 </td> <td> 0.8</td> </tr>
</table>

• Exemple :
<table border =1 >
<tr>
<th colspan=2> Age </th> <th rowspan=2> Pourcentage </th>
</tr>
<tr> <th> <30 </th> <th> >30 </th> </tr>
<tr> <th> Hommes </th> <td> 1.8 </td> <td> 1 </td> <td> 52% </td> </tr>
<tr> <th> Femmes </th> <td> 1.7 </td> <td> 0.8</td> <td> 48% </td> </tr>
</table>

cours web chap1.pptx

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a cours web chap1.pptx

Semelhante a cours web chap1.pptx (20)

Último

Último (20)

cours web chap1.pptx