Technologies Web: Pr. Ayoub Abdellaoui

Technologies Web
Pr. Ayoub ABDELLAOUI

Ayoub.abdellaoui@gmail.com
ENSAM-Rabat, Université Mohamed V, Département Math-Informatique
1/200
OBJECTIF DU MODULE
 Le module Technologies Web permet aux étudiants d’acquérir et de

développer les compétences nécessaires pour programmer des pages
Web en HTML, CSS et JavaScript. Via ces éléments, les étudiants seront
en mesure de maîtriser le développement d’applications Web modernes
(pages HTML, les feuilles de styles CSS et les scripts JavaScript, etc.).
Aussi, ce module passe en revue les standards, les langages et les
technologies utilisées de nos jours pour le développement Web.
 Ce module se focalise également sur la mise en pratique et le
développement Web avancé en utilisant JavaScript et la gestion de
modèles de données pour le Web.
02/04/2023 Technologies Web 2/200 2

PLAN DU MODULE (COURS)
 Introduction
 Qu'est ce qu'un réseau ?
 c’est quoi « internet » ?
 c’est quoi « le web » ?
 HTML
 CSS
 Javascript
 Javascript avancée

QU'EST CE QU'UN RÉSEAU ?
 Un réseau est un ensemble d’éléments informatiques

(ordinateur, imprimante, hub, modem..) connectés les
uns aux autres
 La connexion entre ces éléments peut se faire :
– de manière physique (connexion filaire avec prise Ethernet),
– via des ondes radio (connexion sans fil, wifi).
 Deux ordinateurs reliés entre eux constituent un mini réseau.
 On parlera d’un réseau local pour désigner l’installation de ces périphériques dans un
espace défini (maison, entreprise…).
 Un réseau informatique permet de partager des données, des documents, des
applications et des imprimantes.

QU'EST CE QUE INTERNET?
Internet est un réseau mondial (supranational) de machines interconnectées

TCP: Transmisson Control Protocol
 un réseau de réseaux
 des protocoles de communication : TCP-IP IP: Internet Protocol
 nombreuses applications : courrier électronique, transfert de fichiers (ftp),

messagerie instantanée, peer-to-peer, World Wide Web

QU'EST CE QUE LE WEB ?
le Web (Tim Berners-Lee, 1989) :

 repose sur internet
 système d’information réparti en « pages web » = documents web
 basé sur la notion d’hypertexte et la notion d’hyperliens permettant de
naviguer entre les documents web
HTTP: HyperText Transfer Protocol
 des protocoles de communication HTTP, HTTPS
 des adresses pour nommer les documents : URL URL: Uniform Resource Locator
 des langages pour créer les documents : HTML, CSS, javascript

 des navigateurs qui interprètent les documents
Internet Explorer Google Chrome Opera Epiphany
Mozilla Firefox Safari Konqueror

URI: UNIFORM RESOURCE IDENTIFIER
 URI : chaîne de caractères pour identifier les ressources Internet.

Protocol utilisé par le serveur Nom de domaine Nom de resource
Protocol Site File
http://www. monsite.com/Accueil/index.html
Hôte Path
Chemin pour accès au ressources
 URI = URL + URN

Uniform Resource Identifier
URI
http://www.webdev.com/index.html
URL URN
Uniform Resource Locator Uniform Resource Name

HYPERTEXTE
 Texte "normal" :
 Organisation linéaire.
 Eventuellement renvois sous forme de sommaires, index, notes de bas de page.
 Hypertexte :
 Organisation pas forcément linéaire.
 Texte enrichi de liens :
• renvoi vers un document.
• renvoi vers une partie du même document.
• renvoi vers une partie d'un autre document.

CLIENT / SERVEUR
 Client : le navigateur (Internet Explorer, Firefox, Chrome, Opera, Safari...)
 Serveur : le serveur Web (Apache, Microsoft IIS...)
1. Le client émet une requête
2. Le serveur répond en fournissant le document demandé ou un message d'erreur si le
document n'existe pas

CLIENT / SERVEUR

CLIENT / SERVEUR

CLIENT / SERVEUR

CLIENT / SERVEUR

CLIENT / SERVEUR

Chapitre 1
LANGAGE HTML
15/200 15
HISTORIQUE
 Années 1990 : HTML est créé par Tim Berner-Lee au Centre Européen de
Recherche Nucléaire (CERN)
 1995 : HTML 2.0 normalisation par l’IETF (Internet Engineering Task Force)
 1996 : HTML 3.2 ajout des tables, des applets (Java), etc.
 1998 : HTML 4.01 ajout des feuilles de styles, des frames, etc.
 2000 : XHTML 1.0 reformulation de HTML 4 en XML 1.0
 2002-2006 : XHTML 2.0 en cours de spécification
 2007-maintenant : HTML5
Normalisation par le W3C(World Wide Web Consortium http://www.w3c.org)

depuis 1996.

HTML
HTML = HyperText Markup Language

langage à balises pour hypertextes
 un langage
– de description de documents web, il permet de structurer le contenu de ces
documents
 à balises
– la structure des documents est organisée à l’aide de balises
 pour hypertextes
– les documents contiennent des hyperliens permettant un accès direct à une autre
partie du document

LANGAGE
 langage
vocabulaire + syntaxe + sémantique
– syntaxe = grammaire
– sémantique = sens
– Le vocabulaire permet de construire des textes qui respectent la syntaxe et qui ont un
sens.

VOCABULAIRE
 Vocabulaire: éléments prédéfinis, identifiés par des balises (ou tags)

– Balise ouvrante : <element>
– Balise fermante : </element>
<h1> <p> <strong> …… </h1> </p> </strong> ...

– balises auto-fermantes : <element/>
<br/> <img/>
 HTML insensible à la casse : <eLEmENt> = <eLeMeNT>
 Contenu d’un élément : le code qui se trouve entre ses balises ouvrante et
fermante.
<p> contenu de l’élément p </p>
 NB : les balises auto-fermantes ont un contenu vide.

SYNTAXE
 La syntaxe définit :
– la structure du document (un document est un fichier d’extension .html)
– les règles d’écriture
 structure minimale d’un document
<!DOCTYPE html> déclaration du DOCTYPE
<html xmlns="http://www.w3.org/1999/xhtml"> un élément racine

<head> l’entête du document
<title>Document HTML 5 minimal</title> un titre
<meta charset="UTF-8"/> la déclaration de l’encodage de
caractères utilisé
</head>

<body> le corps du document

...
</body>
</html>
SYNTAXE (RÈGLES D’ÉCRITURE)
 Parenthésage :
Un document html valide est bien parenthésé.
1. A toute balise ouvrante <element> doit être associée une balise fermante
</element>.
2. Les éléments ne doivent pas se chevaucher : premier ouvert, dernier fermé
Exemple
<p> debut <code>emboité ?</p> suite </code> ! illégal !
<p> debut <code>emboité ? </code> suite</p> ! légal !
 Commentaires


SYNTAXE (RÈGLES D’ÉCRITURE)
 Emboitement
– Le contenu d’un élément peut être constitué d’autres éléments « emboités ».
<p>
début du contenu de p
<code>
début emboité 1
<strong>
contenu emboité 2
</strong>
fin emboité1
</code>
suite du contenu de p
</p>
– Tous les emboitements ne sont pas possibles.

• un élément <p> ne peut pas contenir un élément <h1>
• Un élément <ul> contient nécessairement au moins un élément <li>
• un élément <li> est nécessairement emboité dans un élément <ul>

DOCUMENT VALIDE
 Un document (X)HTML est valide s’il respecte toutes ces règles.

 Les outils de validation permettent de vérifier la correction syntaxique d’un
document.
http://validator.w3.org/nu
 important
 La validation d’un document produit doit être systématique

SÉMANTIQUE
 A chaque élément (balise) est associée une sémantique qui définit son usage.
 Elle permet de savoir quand et pourquoi utiliser un élément.
 Exemple :
– l’élément <p> sert à représenter un paragraphe
– l’élément <time> sert à identifier une heure ou une date
– l’élément <td> représente une « case » dans un tableau
– l’élément <strong> sert à donner de l’importance à un texte
– etc.
 Aux balises s’ajoutent bien évidemment les contenus texte pour donner la
sémantique (le sens) global du document

OUTILS
 Des outils pour écrire un code HTML

– Source code editors :
• Notepad++
• SublimeText
• TextMate
– IDE :
• Adobe Dreamweaver
• WebStorm
 Des outils pour éditer, debugger HTML, CSS, JS dans les navigateurs modernes
par in inspecteur intégré:
• Google Chrome, Opera, Apple Safari
• Microsoft Edge
• Mozilla Firefox
• Vivaldi
• …..
Chapitre 2
ÉLÉMENTS HTML
26/200 26
ÉTAPE PAR ÉTAPE…
 Nous allons écrire une simple page web

– un simple CV
 Pour découvrir les balises HTML de base

 Sans CSS pour le moment…

ÉLÉMENTS HTML
 Exemple de CV
Titre de Page
Titre
principale
Liens vers les ancres
Image
liste Ordonner
Paragraphe

ÉLÉMENTS HTML
 Exemple de CV
Listes non ordonnées
Titre secondaire
Table
Hyperlien

BALISES HTML DE BASE
Avant tout: commentaires!
 Invisible pour les navigateurs Web

 Utilities:
– La reprise du projet après une longue période
– La reprise du projet par un autre développeur web
– Travail d'équipe
– …
<!–- C'est un commentaire qui peut vous aider dans le futur -->

CATÉGORIES DE CONTENU DES ÉLÉMENTS
Éléments de flux
 Ce sont des éléments structurants. Ils contiennent généralement d’autres

éléments emboités, du texte ou du contenu intégré.
exemples
<p> paragraphe, ne peut contenir que des éléments de
phrasé
<ol>, <ul> listes ordonnées ou non ordonnées
<table> Tableaux
<figure> contenu indépendant accompagné d’une légende et
référencé dans le texte
etc.

Éléments sectionnants
 Ils permettent une décomposition du document en sections.
Eléments sectionnants
<section> section générique dont le contenu est cohérent
thématiquement
<article> contenu autonome dans un document qui doit pouvoir
être réutilisé indépendamment
<aside> information connexe au contenu principal « voisin »
<nav> contient des liens de navigation vers des fragments du
document ou vers d’autres documents (« menu »)
 en accompagnement...
Entête et pied
<header> introduction à un document, une section, un article. Peut
contenir un titre, un logo, etc.
<footer> pied de page, d’une section, d’un article, etc. Peut
contenir des informations, des liens annexes, etc.

<body >
<header >
<nav > </ nav >
</ header >
<aside > </ aside >
<section >
<header > </ header >
<article > </ article >
<footer > </ footer >
</ section >
<footer > </ footer >
</ body >

Éléments de titres
 Définissent le titre d’une section.
Eléments Titres
<h1> à <h6> titres, par ordre décroissant d’importance

Éléments de phrasés
 Définissent le texte et ne peuvent contenir que du contenu de type phrasé. Les

séquences de contenu phrasé constituent des paragraphes.
exemples
<em> Un élément de texte important, mis en valeur,
<strong> Un élément de texte très important, fortement mis
en
valeur,
<code> une portion de code de programme
<kbd> une entrée au clavier
etc.

Étape 1: structure
<!DOCTYPE html>
<html>
<head>
<title>Première page HTML</title>
<meta charset =“utf-8”>
</head>
<body>
...
</body>
</html>

Étape 1: structure
< ! DOCTYPE html >
 Tout d’abord, nous devrons toujours démarrer une page HTML en précisant le doctype de
notre document. Comme son nom l’indique, le doctype sert à préciser le type du document.
 Faites bien attention à l’écriture du doctype : vous pouvez remarquer que la balise
représentant le doctype commence par un point d’exclamation. Ceci est un cas unique.
 Dans la balise doctype, on va préciser le langage utilisé, à savoir le HTML dans notre cas.
 Lorsque les standards HTML se sont d'abord devenus populaires, le Web était plein de pages
qui ne respectaient pas les normes. Pour aider les navigateurs à rendre ces pages
correctement, les navigateurs ont utilisé la déclaration doctype pour distinguer les pages non
conformes et conformes.
 si vous quittez la déclaration de la page HTML, cela indiquera au navigateur qu'il devrait traiter
vos pages comme une norme HTML non conforme.

Étape 1: structure
<html>
...
</html>
 Racine du document
 Cet élément est composé de deux balises <html> et </html> et va représenter notre page
HTML en soi. On va donc insérer tout le contenu de notre page (et donc les autres
éléments) à l’intérieur de celui-ci.
 Contient les balises <head> et <body>

Étape 1: structure
<head>
...
</head>
 A l’intérieur de l’élément html
 L’élément head va contenir des meta informations relatives à la page, c’est-à-dire des
informations générales dont la page va avoir besoin pour fonctionner, comme le titre de
la page, le style ou encore le type d’encodage utilisé.
– <title>
• Va contenir le titre de la page
– <meta charset ="utf-8">

• Va nous permettre de définir l’encodage de la page pour que tous nos caractères,
notamment les accents, s’affichent normalement dans notre page. Pour nous, français, nous
utiliserons la valeur utf-8.
– <style> , <link /> et <script>
• Inclure des styles et script (CSS et javascript, voir plus loin)
Étape 1: structure
<body>
...
</body>
 type tag contenant les en-têtes:
– Contient tout l'élément qui décrit le contenu du document

• Paragraphes
• Images
• Etc…

Étape 2: Titre de la page
< ! DOCTYPE HTML >

<html>
<head>
<title> Mon CV </title>
<meta charset ="utf-8">
</head>
<body>
</body>
</html>

Étape 2: les Metas

 Informations supplémentaires sur la page
– Propriété du document / non affichée.
– <meta name="propriété" content="valeur">
• Content est obligatoire
– Valeurs possibles
• author, description, keywords, generator, revised
• Autres valeurs possibles, potentiellement utilisées mais pas normalisées :
 Robots : indexer la page ? suivre les liens ?
<head>
<title>Ma page web</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta name="author" content="moi" />
<meta name="description" content="cours web" />
<meta name="mise a jour" content="tous les ans" />
<meta name="robots" content="index,follow"/>
</head>
Étape 3: Les Titres
<hn>...</hn>
 Il existe six niveaux hiérarchiques de titres ("heading" en anglais) définis par les
éléments h1, h2, h3, h4, h5 et h6. L'élément h1 représente un titre très important, h2 un
titre important, h3 un titre d'importance moyenne, etc.
<h1> Titre niveau 1</h1>




Étape 3: Les Titres
...
<body>
<h1>Pr. Abdelalim SADIQ</h1>
<h3>Enseignements </h3>
<h3>Recherches </h3>
<h3>Langues </h3>
</body>
...

Étape 4: Paragraphes
<p>...</p>
 Pour créer des paragraphes
 Pour chaque nouveau paragraphe, un retour à la ligne va être créé
automatiquement et affiché par votre navigateur (exactement comme c’était le
cas avec les titres).
...
<br /> ,<br> <body>
<p>premier Paragraphe</p>
 est l'abréviation de « break », <p> Deuxième <br/> Paragraphe</p>
<hr>
 Pour créer un retour à la ligne <p>Troisième paragraphe</p>
</body>
<hr > ,<hr/> ...
 Pour définir un retour à la ligne avec changement de thématique

<body>
<p>
Professeur de d'enseignement supérieur <br/>
Département Informatique <br/>
Faculté des sciences <br/>
Université Ibn Tofail
</p>
<h3>Enseignements</h3>
<h3>Recherches</h3>
<h3>Domaines d’intérêt</h3>
<P>
visitez ma page web : www.sadiq.ma
</p>
</body>


 La balise <pre></pre> permet de représenté le texte qu'elle contient de la façon

dont il est agencé :
– sans modifier le nombre d'espaces
– en utilisant une police à chasse fixe (dont tous les caractères ont la même largeur)
– en allant à la ligne au même endroit que dans le code source

<body>
<pre>
Professeur de d'enseignement supérieur
Département Informatique
Faculté des sciences
Université Ibn Tofail
</pre>
<h3>Enseignements</h3>
<h3>Recherches</h3>
<h3>Domaines d’intérêt</h3>
<P>
visitez ma page web : www.sadiq.ma
</p>
</body>

Étape 5: Les listes
 Il existe deux grands types de listes en HTML :

– les listes ordonnées
– les listes non-ordonnées.
 Il existe également un troisième type de liste un peu particulier et moins utilisé :
– les listes de définitions.

Étape 5: Les listes  Listes non-ordonnées
 vont être utiles pour lister des éléments sans hiérarchie ni ordre logique
 Pour créer une liste non-ordonnée, nous allons avoir besoin
– d’un élément <ul> (pour « unordered list », ou « liste non-ordonnée » en français) qui
va représenter la liste en soi
– d’éléments <li> ("list items" = "éléments de liste") représentant chaque élément de la
liste.
– Un attribut type de puce à pour valeur :
• disc <body>
<h1>Les listes</h1>
o circle
<ul type="disc">
 square <li>Java</li>
<li>Base de données</li>
<li>HTML</li>
</ul>
</body>

Étape 5: Les listes  Listes ordonnées
 vont être utiles lorsqu’il y aura une notion d’ordre ou de progression logique
entre les éléments de notre liste.
 Pour créer une liste non-ordonnée, nous allons avoir besoin
– d’un élément <ol> (pour « ordered list », ou « liste ordonnée » en français) qui va
représenter la liste en soi
– d’éléments <li> représentant chaque élément de la liste.
– Un attribut type de puce à pour valeur :
• 1 --> {1,2,3…} <body>
<h1>Les listes</h1>
• A --> {A,B,C…} <ol type="i">
• a --> {a,b,c…} <li>Java</li>
<li>Base de données</li>
• I --> {I,II,III,…} <li>HTML</li>
</ul>
• i --> {i,ii,iii…} </body>

Étape 5: Les listes  Listes de définitions
 L'élément HTML <dl> représente une liste de descriptions sous la forme d'une

liste de paires associant des termes et leurs descriptions ou définitions.
 les items sontdéclarés par les balises
 <dt> pour le terme et
 <dd> pour la définition associée.
<dl>
<dt>Nom</dt>
<dd>Mohamed</dd>
<dt>naissance</dt>
<dd>1995</dd>
<dt>lieu</dt>
<dd>Rabat</dd>
<dt>Taille</dt>
<dd>1m70</dd>
</dl>

...
<body>
<ol>
<li>Enseignements</li>
<li>Recherches</li>
<li>Langues</li>
</ol>
...
<h3> Enseignements </h3>
<ul>
<li>Technologies Web</li>
<li>Bases de données</li>
<li>Big Data</li>
<li>Java</li>
<li>C</li>
<li>Matlab</li>
<li>UML</li>
</ul>
</body>
...


Étape 6: Lien hypertexte
<a href="..." >...</a>
 Un lien hypertexte est une partie de texte cliquable qui fait référence à un autre
document.
 Pour créer des liens en HTML, nous allons utiliser l’élément </a> accompagné de
son attribut href (hypertext reference) qui va prendre comme valeur la cible du
lien (l’URI).
– URL : http://www.google.com
– URL (mail) : mailto:a.sadiq@uit.ac.ma
– Fichier local avec chemin relatif : ./dossier/autre_page.html
– Fichier local avec chemin absolu : /www/dossier/autre_page.html
 Il existe deux types de liens:
– les liens internes (la référence se trouve dans le document actuel)
– les liens externes (la référence est un autre document)
 Trois types:
– Lien Relative
<a href="file.html">mon lien</a>
– Lien Absolue
<a href="www.website.com/file.html">mon lien </a>
– Lien à un ANCRE
<span id="myAnchor">mon texte</span>
<a href="file.html#myAnchor">Mon lien</a>


...
<ol>
<li><a href="#Ens"> Enseignements </a></li>
<li><a href="#Rec"> Recherches </a></li>
<li><a href="#Lan"> Langues </a></li>
</ol>
...
<h3 id="Ens"> My picture </h3>
...
<h3 id="Rec"> Recherches </h3>

...
<h3 id="Lan"> Langues </a></h3>

...
<P>
visitez ma page web :
<a href="http://www.sadiq.ma">
Ma page
</a>
</p>


 Lien vers une autre page - nouvelle fenêtre du navigateur
 <a href="exemples/page1.html" target="_blank">Lien</a>

Étape 7: Les images
 La balise <img/> permet d’insérer une image

 Les attributs suivants sont obligatoires :
– src : l’URI où se situe l’image, va fonctionner de la même manière que href
– alt : va contenir un texte alternatif décrivant l’image
– width : largeur
– height : hauteur
<img src="picture.jpg" alt="une photo" title="Photo HTML" />

Étape 7: Les images
...
<h1> Abdelalim SADIQ</h1>
<img src="image.png" alt="Une Photo HTML"

title="HTML 5" />
<ol>
<li>
<a href="#Ens"> Enseignements </a>
</li>
<li>
<a href="#Rec"> Recherches </a>
</li>
<li>
<a href="#Lan"> Langues </a>
</li>
</ol>
...

Étape 8: Les tableaux
 Les tableaux en HTML doivent être utilisés pour organiser de façon logique des

données.
 Pour créer un tableau simple, nous allons avoir besoin de trois éléments HTML :
– L’élément <table> (« tableau » en français) va définir le tableau en soi ;
– L’élément <tr>, pour « table row » ou « ligne de tableau » en français va nous servir à
introduire une nouvelle ligne dans notre tableau ;
– L’élément <td>, pour « table data » ou « donnée de tableau » en français va nous
permettre d’ajouter des cellules dans nos lignes.
 Pour créer une ligne d’en-tête en, nous allons cette fois-ci devoir utiliser
l’élément <th>, pour « table head » ou « en-tête du tableau » en français à la
place de nos éléments td dans notre première ligne.

<table border="1">
<tr>
<th>Line 1, Header 1</th>
<th>Line 1, Header 2</th>
</tr>
<tr>
<td>Line 2, Cell 1</td>
</tr>
<tr>
</tr>
</table>

 Nous allons ainsi pouvoir combiner plusieurs cellules adjacentes d’une même
ligne ou d’une même colonne entre elles grâce aux attributs
HTML colspan et rowspan.
 Ces deux attributs vont prendre comme valeur le nombre de cellules à combiner
entre elles tout simplement

<table border="1">
<tr>
<th colspan="2">Header</th>
</tr>
<tr>
<td>1</td>
<td rowspan="2">Merging two lines</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td colspan="2">
Fusionning two cells
</td>
</tr>
</table>

<table border="1">
<tr>
<th colspan="2" rowspan="2"></th>
<th colspan="5">Niveau</th>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th></tr>
</tr>
<tr>
<th rowspan="3">Anglais</th>
<th>Lire</th>
<td></td><td></td><td></td><td></td><td>X</td>
</tr>
<tr>
<th>Parler</th>
<td></td><td></td><td>X</td><td></td><td></td>
</tr>
<tr>
<th>écrire</th>
<td></td><td></td><td></td><td>X</td><td></td>
</tr>
<tr>
<th rowspan="3">Français</th>
<th>Lire</th>
</tr>
<tr>
<th>Parler</th>
</tr>
<tr>
<th>écrire</th>
<td></td><td></td><td></td><td>X</td><td></td>
</tr>
</table>
...


Les figures
 Ce sont des éléments qui viennent enrichir le texte pour compléter les
informations de la page.
 Les figures peuvent être de différents types :
– images ;
– codes source ;
– citations ;
– etc.

Les figures
 Une figure <figure> est le plus souvent accompagnée d'une légende. Pour
ajouter une légende, utilisez la balise <figcaption> à l'intérieur de la balise
<figure>, comme ceci :
<figure>
<img src="images/blocnotes.png" alt="Bloc-Notes" />
<figcaption> Le logiciel Bloc-Notes</figcaption>
</figure>

La mise en valeur
 Au sein de vos paragraphes, certains mots sont parfois plus importants que d'autres et
vous aimeriez les faire ressortir. HTML propose différents moyens de mettre en valeur le
texte de votre page.
 <em> (pour emphase) Pour mettre un peu en valeur votre texte. cet élément est affiché
avec une police italique
 <strong> qui signifie « fort », ou « important » Pour mettre un texte bien en valeur. La
balise <strong> ne signifie pas « mettre en gras » mais « important »
 <mark> permet de faire ressortir visuellement une portion de texte. L'extrait n'est pas
forcément considéré comme important mais on veut qu'il se distingue bien du reste du
texte.
 <strike> permet de barrer une partie d'un texte
 <cite> permet d'introduire une citation
 <sup><sub> exposant et indice
La mise en valeur de texte
<p> Bonjour et bienvenue sur

<mark> mon site</mark> !
<br />
Ceci est mon premier test alors
<em> soyez indulgents</em>
s'il vous plaît,
<strong> j'apprends </strong>
petit à petit comment cela marche.
</p>
<p>
<small> Ceci est un texte small</small> <br>
<strike> Ceci un Texte barré </strike>
P<sub>i</sub>
1<sup>er</sup>
</p>

Les balises universelles

 En fait, on a inventé deux balises dites universelles, qui n'ont aucune signification
particulière. Il y a une différence minime (mais significative !) entre ces deux balises
 <span></span> c'est une balise de type inline, c'est-à-dire une balise que l'on place au
sein d'un paragraphe de texte, pour sélectionner certains mots uniquement. Les balises
<strong> et <em> sont de la même famille. Cette balise s'utilise donc au milieu d'un
paragraphe.
 <div></div> c'est une balise de type block, qui entoure un bloc de texte. Les balises <p>,
<h1>, etc. sont de la même famille. Ces balises ont quelque chose en commun : elles
créent un nouveau « bloc » dans la page et provoquent donc obligatoirement un retour à
la ligne. <div> est une balise fréquemment utilisée dans la construction d'un design,
comme nous le verrons plus tard.

Les balises universelles
<p>
<div style=" color : red; font-weight : bold ">
Bonjour et bienvenue sur mon site !
</div>
<span style=" background : #ffff00 ">

Ceci est mon premier test
</span>
alors soyez indulgents s'il vous plaît, j'apprends petit à petit comment cela
marche.
</p>

Caractères spéciaux
 La règle: « & » + lettre utilisé + abréviation + « ; »
Code Display
è è
é é
â â
ç ç
ü ü
&tilde; ~

EN RÉSUMÉ
 Le HTML comporte de nombreuses balises qui nous permettent d'organiser le texte de

notre page. Ces balises donnent des indications comme « Ceci est un paragraphe », « Ceci
est un titre », etc.
 Les paragraphes sont définis par la balise <p> </p> et les sauts de ligne par la balise <br/>.
 Il existe six niveaux de titre, de <h1> </h1> à <h6> </h6>, à utiliser selon l'importance du
titre.
 On peut mettre en valeur certains mots avec les balises <strong>, <em> et <mark>.
 Pour créer des listes, on doit utiliser la balise <ul> (liste à puces, non ordonnée) ou <ol>
(liste ordonnée). À l'intérieur, on insère les éléments avec une balise <li> pour chaque
item.
 Les liens permettent de changer de page et sont, par défaut, écrits en bleu et soulignés.
Pour insérer un lien, on utilise la balise <a> avec l'attribut href pour indiquer l'adresse de
la page cible.

EN RÉSUMÉ
 On insère une image avec la balise <img />. Elle doit obligatoirement comporter au moins
ces deux attributs : src (nom de l'image) et alt (courte description de l'image).
 Si une image illustre le texte (et n'est pas seulement décorative), il est conseillé de la
placer au sein d'une balise <figure>. La balise <figcaption> permet d'écrire la légende de
l'image.
 Un tableau s'insère avec la balise <table> et 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>. 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.
 Pour plus de détail sur balises : https://developer.mozilla.org/fr/docs/Web/HTML

Chapitre 3
CSS : Feuilles de style en cascade

Cascading Style Sheets
02/04/2023
Technologies Web 80/200 80
FEUILLES DE STYLE EN CASCADE
 N'oubliez pas : HTML pour le fond, CSS pour la forme

– la structure d’un document et son contenu sont décrits en HTML
– sa présentation est gérée par les CSS
 CSS :
– Cascading Style Sheets
– feuilles de style en cascade
 Description :
– Un document en mode texte
– Utilisable par des documents HTML
– Présentation identique de tous les documents HTML
– Apporte la modularité du formatage
– Séparation du contenu et de la présentation
 Des exemples Avec CSS
– « le site Zen garden : http://www.csszengarden.com/ » : le même site avec des CSS
différents
81/200 81
Avantage
 document HTML et feuille CSS peuvent être définis dans des fichiers séparés
 création plus efficace
 code HTML plus simple et plus lisible
 on peut changer la feuille de style sans modifier le document
 on peut avoir plusieurs feuilles de style pour un document
 plusieurs pages peuvent partager la même feuille de style

Principe
 le langage CSS définit un ensemble de propriétés qui ont une influence sur l’affichage des
éléments d’une page
 pour chaque propriété il existe un ensemble de valeurs possibles
 il est possible de fixer ces propriétés pour chacun des éléments d’un document HTML
 les propriétés agissent sur l’apparence de la boîte d’un élément
– les propriétés concernent
– l’apparence du contenu (fonte, style, couleur, ...)
– la taille de la boîte (largeur, marges, ...)
– le positionnement de la boîte (absolu ou relatif, visibilité)
– ...

Inclusion d’une CSS
 Trois possibilités d’inclusion :

– Directement dans les balises (à éviter)
<h2 style=" color : red ">Titre en rouge</h2>
– Définition de la CSS dans le head de fichier via la balise <style>

<head>
<style type=" text/css">
déclaration des styles
</style>
</head>
– Déclaration d’un lien externe vers la CSS via la balise <link>

<head>
<link href=" fichier.css " rel= " stylesheet " type=" text/css"/>
</head>

Inclusion d’une CSS : Dans un fichier .css (recommandé)

Style.css
Index.html p{
color: blue;
<html> }
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title> Premiers tests du CSS</title>
</head>
<body>
<h1> Mon super site </h1>
<p> Bonjour et bienvenue sur mon site ! </p>
<p> Pour le moment, mon site est un peu <em> vide </em>.
Patientez encore un peu ! </p>
</body>
</html>
 le contenu de la ligne 4, <link rel="stylesheet" href="style.css" /> : c'est elle qui indique que
ce fichier HTML est associé à un fichier de type feuille de style (rel=stylesheet) appelé
style.css et chargé de la mise en forme.
Inclusion d’une CSS : Dans l'en-tête <head> du fichier HTML

 Il existe une autre méthode pour utiliser du CSS dans ses fichiers HTML : cela consiste à
insérer le code CSS directement dans une balise <style> à l'intérieur de l'en-tête <head>.
<html>
<head>
<style>
</stylep
{
color: blue;
}
>
</head>
<body>
<p> Bonjour et bienvenue sur mon site ! </p>
</body>
</html>

Inclusion d’une CSS : Directement dans les balises (non recommandé)

 vous pouvez ajouter un attribut style à n'importe quelle balise. Vous insérerez votre code
CSS directement dans cet attribut
<html>
<head>
</head>
<body>
<p style="color: blue;" > Bonjour et bienvenue sur mon site ! </p>
</body>
</html>
Déclaration d’une règle :

Une règle CSS définit la valeur d’une propriété CSS pour un sélecteur donné (Le sélecteur
détermine les éléments sur lesquels s’applique la règle.)
sélecteur { propriété : valeur; }

le sélecteur détermine les éléments sur lesquels s’applique la règle
Propriété valeur
Sélecteur
p{
color: blue;
}
déclaration

il est possible de regrouper plusieurs règles d’un même sélecteur les définitions sont
alors séparées par des points-virgules
p{
Plusieurs
color: blue;
déclarations
possible font-size: 20px;
width: 200px;
}
p{
color: blue;
font-size: 20px;
width: 200px;
}
feuilles de
h1 { style
color: green;
font-size: 36px;
text-align: center;
}
...

TYPE DE SÉLECTEUR
Sélecteur de type : nom de balise

Les sélecteurs de type CSS ciblent des éléments en fonction du nom de leur nœud. Ainsi, lorsqu'un
sélecteur de type est utilisé seul, il ciblera tous les éléments de ce type (autrement dit tous les nœuds
avec ce nom) contenus dans le document.
p{
color: blue;
}
Texte en bleu
<p> texte en bleue </p>

……..
<p> texte en bleue </p>

TYPE DE SÉLECTEUR
Sélecteur Classe
• Les sélecteurs de classe CSS permettent de cibler des éléments d'un document en fonction du
contenu de l'attribut class de chaque élément.
• Plusieurs objets peuvent être de la même classe
• Style : utilisation du symbole "."
Définition de class
utilisation de la class
.blue {
color: blue;
}
Texte non <p class=" blue"> texte en bleue </p>

définie …….. Texte en bleu
<p> texte non bleue </p>
……………………..
<p class=" blue"> texte en bleue </p>
TYPE DE SÉLECTEUR
Sélecteur Classe
 /* Cible tous les éléments ayant la classe "spacious" */
.spacious
{
margin: 2em;
}
 /* Cible tous les éléments <li> ayant la classe "spacious" */
li.spacious
{
margin: 2em;
}

TYPE DE SÉLECTEUR
Chaque p qui à la classe .big (pas d’espace entre l’élément et la classe)
p.big {
font-size: 20px;
} Taille de
texte 20px
<p class="big">...</p>
<div class="big">...</div>
Texte non définie

TYPE DE SÉLECTEUR
Sélecteur id
• Un sélecteur d'identifiant (ID selector) permet, pour un document HTML, de cibler un élément grâce
à la valeur de son attribut id. Il faut que la valeur soit exactement la même que celle du sélecteur
pour que l'élément soit effectivement ciblé.
• Style : utilisation du symbole "#"
Définition de l’id
utilisation de id sans #
#name {
color: blue;
}
<p> texte non définie </p>

Texte non Texte en bleu
définie <div id="name">
<p class=" blue"> texte en bleu </p>
</div>

TYPE DE SÉLECTEUR
Groupement de Sélecteurs
Sélecteurs séparer par
virgule
div, .blue{
color: blue;
}
<p class=" blue"> texte en bleue </p>

Texte non …. Texte en bleu
définie
<p> texte non définie </p>
<div>
<p > texte en bleue </p>
</div>

TYPE DE SÉLECTEUR
Les sélecteurs avancés

 * : sélecteur universel :
*
{
}
– Sélectionne toutes les balises sans exception. On l'appelle le sélecteur universel.

 A B : une balise contenue dans une autre
h3 em
{
}
– Sélectionne toutes les balises <em> situées à l'intérieur d'une balise <h3>. Notez qu'il n'y a pas de
virgule entre les deux noms de balises
 A + B : une balise qui en suit une autre
H3+p
<h3>Titre</h3>
{
} <p>Paragraphe</p>
– Sélectionne la première balise <p> située après un titre <h3>.

TYPE DE SÉLECTEUR
Les sélecteurs avancés

 A[attribut] : une balise qui possède un attribut
a[title]
{ <a href="http://site.com" title="Infobulle">
}
– Sélectionne tous les liens <a> qui possèdent un attribut title..

 A[attribut="Valeur"] : une balise, un attribut et une valeur exacte
a[title="Cliquez ici"]
{ <a href="http://site.com" title=" Cliquez ici ">
}
– l'attribut doit en plus avoir exactement pour valeur « Cliquez ici ».
 A[attribut*="Valeur"] : une balise, un attribut et une valeur

a[title*="ici"]
{ <a href="http://site.com" title=" Cliquez ici ">
}
– l'attribut doit cette fois contenir dans sa valeur le mot « ici » (peu importe sa position).

COMBINAISON DE SÉLECTEUR
 Sélecteur de descendant
p h2 {color: green}
les h2 qui sont dans un p
 Sélecteur d’enfant
p > h2 {font-size: 30px}
les h2 qui sont directement fils d’un p
 Sélecteur d’adjacent :
p + h2 {font-size: 10px}
les h2 qui sont directement après un p

Sélecteur de descendant
Article p {
color: blue;
} Texte bleu
<article>...
Texte <p>………………...</p>
non </article>
définie ...
<p>........</p>
<article>...
<div><p>……...</p></div>
</article>
Texte bleu
Sélecteur enfant
article > p {
color: blue;
} Texte bleu
<article>...
Texte <p>………………...</p>
non </article>
définie ...
<p>........</p>
<article>...
<div><p>……...</p></div>
</article>
Texte non définie

EXEMPLE
02/04/2023
PSEUDO-CLASSE
 Les pseudo classes vont nous permettre de changer le style d’un élément HTML selon son
état, c’est-à-dire de façon quasi dynamique.
 Par exemple, nous allons pouvoir afficher un paragraphe en gras lorsque l’utilisateur passe
sa souris dessus ou changer la couleur d’un lien une fois celui-ci cliqué.
 Les pseudo classes sont reconnaissables au fait qu’elles commencent tous par le symbole
« : sélecteur »
– :link va nous permettre de styliser un lien non visité;
– :visited va nous permettre de styliser un lien une fois celui-ci visité.
– :hover va nous permettre de changer l’aspect d’un élément lorsque les visiteurs poseront leur
curseur dessus ;
– :active va nous permettre de modifier l’aspect d’un lien lors du clic.

PSEUDO-CLASSE
<body>
<h1>Pseudo classes CSS</h1>
<div class="test">
<p> un
<a href="http://www.sadiq.ma"> h1:hover{
lien1 color: orange;
</a> font-family : verdana, sans-serif;
non visité }
</p> a:link{
<p> un paragraphe </p> color: blue;
</div> text-decoration : none;
<div> }
<p> un a:active
<a href="http://www.sadiq.ma"> {
lien2 background-color : #FFCC66;
</a> }
déjà visité a:visited{
</p> color : green;
</div> }
<p>un paragraphes</p>
<P><strong>paragraphe importatnt</strong></p>
</body>

PSEUDO-CLASSE
Les pseudo élément
 :first-child : Sélectionne la première balise <p> du corps de la page (body) ou les premières balises p à
l'intérieur d'une autre balise parent p:first-child{}
<p> Mon premier paragraphe </p>
<p> Mon second paragraphe </p>
 :last-child : Sélectionne la dernière balise <p> du corps de la page (body) ou les dernières balises p à
l'intérieur d'une autre balise parent p:last-child{}
 :nth-child(n) : Sélectionne toutes les balises <p> étant positionnées en 2e élément dans son parent ou
dans le corps de page général (body) p:nth-child(2){}
 :first-letter :Sélectionne la 1ère lettre du texte contenue dans tous les éléments <p>
p:first-letter{}
<p> Ce texte comporte une première lettre </p>
 :first-line : Sélectionne chaque 1ère ligne de chaque balise <p>

p:first-line{}
<p> Mon premier line <br>
Mon second line</p>
EXEMPLE
02/04/2023
RÉSOLUTION DES CONFLITS
 La cascade est une caractéristique fondamentale de CSS.

 C'est un algorithme qui définit comment combiner les valeurs de propriétés provenant de
différentes sources.
 La cascade combine l'importance, l'origine, la spécificité et l'ordre source des déclarations
de style applicables pour déterminer exactement quelle déclaration doit être appliquée à
un élément donné.
 S'il y a un conflit, comment résoudre ce conflit? En d'autres termes, comment dire quelle
règle CSS gagne?

Règles de gestion de conflits
 La précédence de l’origine :
– HTML est traité séquentiellement de haut en bas
– Pour la priorité pensez a des CSS externes comme déclare a l’endroit ou il est lie
– Fusion de déclaration
 Spécificité : La combinaison de sélecteurs la plus spécifique gagne

Body
Élémen
élément élément
t
élément élément

Calcul de priorité
 On compte pour chaque sélecteur :

– a le style lié à la balise
– b nombre de sélecteurs d’id (= nombre de #)
– c nombre de classes, pseudo-classes ou d’attributs
– d nombre d’éléments ou de pseudo-éléments
 Le sélecteur reçoit la priorité a b c d.
 Le sélecteur avec la plus grande priorité l’emporte.
 En cas d’égalité, la dernière déclaration l’emporte.

Calcul de priorité
Style = "…" ID Class, pseudo-class, Eléments

attribut
0 0 0 2
div p { color: green; }

Calcul de priorité
Class,
sélecteur style ID Pseudo-Class Élément
attribut
* {...} 0 0 0 0
h1 {...} 0 0 0 1
div.reponse{...} 0 0 1 1
#joconde{...} 0 1 0 0
div a{...} 0 0 0 2
div a:visited{...} 0 0 1 2
p span.fichier{...} 0 0 1 2
p a[href$=”.pdf”] {...} 0 0 1 2
p.enonce a[href$=”.pdf”] {...} 0 0 2 2
ol.exercice li.question{...} 0 0 2 2
div#diaporama img.gauche{...} 0 1 1 2
article#special p:hover{...}
1 1 1 2
<p style="…"> texte </p>
112/200
<p> zero </p>

1
<h1> Titre </h1> 1 p { b-g :pink }
<p> premier </p> 2 h1+p { b-g:red; }
1 2
<p> second </p> 3 div>p { b-g:yellow; }
1 7
<p> troisième </p> 4 p#special { b-g:gold; }
1 7
<p lang="en"> quatre </p>
5 p[lang=en] { b-g:green; }
1 5 7
<p class="bleu"> cinquième </p>
6 p.bleu { b-g:lightblue; }
1 6 7 7
<p class="bleu"> sixième </p> p+p { b-g:lightgreen; }
1 6 7
<p class="bleu" id="special"> 7ème </p>
1 4 6 7
a b c
<p> huitième </p>
1 7 1 0 0 1
<div> 0 0 2
2
<p> neuvième </p> 3 0 0 2
1 3
<p lang="en"> dix </p> 1 3 5 7 4 1 0 1
</div> 5 0 1 1
<p> onzième </p> 6 0 1 1
1
<h1> Second titre </h1> 7 0 0 2
<p> douzième </p>
1 2
4 > 6 > 5 > 7 > 3 > 2 > 1
113/200 113
FORMATAGE DU TEXTE
 Formatage de texte signifie simplement que l'on va modifier l'apparence du texte

(on dit qu'on le « met en forme »).
La taille
 Pour modifier la taille du texte, on utilise la propriété CSS font-size
 plusieurs techniques sont proposées :
– taille absolue : en pixels, en centimètres ou millimètres. Cette méthode est très
précise mais il est conseillé de ne l'utiliser que si c'est absolument nécessaire, car on
risque d'indiquer une taille trop petite pour certains lecteurs.
– taille relative : en pourcentage, « em » ou « ex », cette technique a l'avantage d'être
plus souple. Elle s'adapte plus facilement aux préférences de taille des visiteurs.

FORMATAGE DU TEXTE
une taille absolue
 Pour indiquer une taille absolue, on utilise généralement les pixels. Pour avoir un
texte de 16 pixels de hauteur, vous devez donc écrire : font-size: 16px;
 Exemple
p{
font-size: 14px;
}
h1
{
font-size: 40px;
}

FORMATAGE DU TEXTE
Une valeur relative

 C'est la méthode recommandée car le texte s'adapte alors plus facilement aux préférences
de tous les visiteurs. Il y a plusieurs moyens d'indiquer une valeur relative. Vous pouvez
par exemple écrire la taille avec des mots en anglais comme
 ceux-ci :
– xx-small : minuscule ;
– x-small : très petit ; p{
font-size: small;
– small : petit ; }
– medium : moyen ; h1{
font-size: large;
– large : grand ; }
– x-large : très grand ;
– xx-large : … gigantesque.

FORMATAGE DU TEXTE
Une valeur relative
 La technique précédente a un défaut : il n'y a que sept tailles disponibles (car il

n'y a que sept noms). il existe d'autres moyens. Cette technique consiste à
indiquer la taille en « em ».
– Si vous écrivez 1em, le texte a une taille normale.
– Si vous voulez grossir le texte, vous pouvez inscrire une valeur supérieure à 1, comme
1.3em, Multiplier la taille par 1.3
– Si vous voulez réduire le texte, inscrivez une valeur inférieure à 1, comme 0.8em.
 D'autres unités sont disponibles. Vous pouvez essayer le « ex » (qui fonctionne
sur le même principe que le em mais qui est plus petit de base) et il y a le
pourcentage (80%, 130%…).

FORMATAGE DU TEXTE
La police
 La propriété CSS qui permet d'indiquer la police à utiliser est font-family
 liste de polices qui fonctionnent bien sur la plupart des navigateurs :
– Arial ;
– Arial Black ;
– Comic Sans MS ; p
– Courier New ; {
font-family: Arial;
– Georgia ;
}
– Impact ;
– Times New Roman ;
– Trebuchet MS ;
– Verdana.

FORMATAGE DU TEXTE
Italique, gras, souligné…
 en CSS, pour mettre en italique, on utilise font-style qui peut prendre trois valeurs :
– italic : le texte sera mis en italique.
– oblique : le texte sera passé en oblique (les lettres sont penchées, le résultat est légèrement
différent de l'italique proprement dit).
– normal : le texte sera normal (par défaut). Cela vous permet d'annuler une mise en italique.
 La propriété CSS pour mettre en gras est font-weight et prend les valeurs suivantes :
– bold : le texte sera en gras ;
– normal : le texte sera écrit normalement (par défaut).
 La propriété CSS pour changer la taille de la police est font-size

– font-size:40px;
– font-size:2.5em; p
{
font-style: italic;
font-weight: bold;
}

FORMATAGE DU TEXTE
D’autres propriétés CSS de type « text-

 Parmi ces propriétés :
– La propriété text-align (gère l'alignement) ;
– La propriété text-transform (gère la mise en majuscules / minuscules) ;
– La propriété text-decoration (gère la décoration) ;
– La propriété text-indent (gère l'indentation) ;
– La propriété text-shadow (gère les ombres).
 La propriété CSS associée porte bien son nom : text-decoration. Elle permet, entre autres,
de souligner le texte, mais pas seulement. Voici les différentes valeurs qu'elle peut
prendre :
– underline : souligné.
– line-through : barré.
– overline : ligne au-dessus.
– blink : clignotant. Ne fonctionne pas sur tous les navigateurs (Internet Explorer et Google Chrome,
notamment).
– none : normal (par défaut).
FORMATAGE DU TEXTE
Alignement de texte
 Le langage CSS nous permet de faire tous les alignements connus : à gauche, centré, à
droite et justifié.
 C'est tout simple. On utilise la propriété text-align et on indique l'alignement désiré :
– left : le texte sera aligné à gauche (c'est le réglage par défaut).
– center : le texte sera centré.
– right : le texte sera aligné à droite.
– justify : le texte sera « justifié ». Justifier le texte permet de faire en sorte qu'il prenne toute la
largeur possible sans laisser d'espace blanc à la fin des lignes.
p
{
text-decoration : underline;
Text-align: center;
}

FORMATAGE DU TEXTE
La propriété CSS text-transform

 La propriété CSS text-transform va nous permettre de transformer un texte ou une partie
d’un texte en majuscules ou en minuscules. Cette propriété nous permet de choisir parmi
cinq valeurs :
– Lowercase : Met tout le texte en minuscules ;
– Uppercase : Met tout le texte en majuscules ;
– Capitalize : Met la première lettre de chaque mot en majuscule ;
– Inherit : Hérite de la valeur de l’élément parent ;
– None : Pas de transformation du texte. Utile pour annuler une transformation par défaut donnée
par héritage.
p
{
text-transform : capitalize;
}

FORMATAGE DU TEXTE
La propriété CSS text-shadow

 La propriété CSS text-shadow va nous permettre de créer des ombres autour de nos
textes, afin que ceux-ci se détachent de l’arrière plan. On va devoir indiquer quatre valeurs
dans un ordre précis à la propriété text-shadow afin que celle-ci fonctionne
correctement :
– La projection horizontale de l’ombre (en px) ;
– La projection verticale de l’ombre (en px) ;
– Le rayon de propagation de l’ombre (le « radius », en px) ;
– La couleur de l’ombre. Accepte les mêmes valeurs que la propriété color.
h1{
text-shadow : -1px 1px 1px blue;
}

FORMATAGE DU TEXTE
Les couleurs
 Le nom de la couleur : La figure suivante vous montre les seize

couleurs que vous pouvez utiliser en tapant simplement leur nom.
 La notation hexadécimale. : cela ressemble à #FF23B8 On doit toujours
commencer par écrire un dièse (#), suivi de six lettres ou chiffres allant
de 0 à 9 et de A à F. Les deux premiers indiquent une quantité de
rouge, les deux suivants une quantité de vert et les deux derniers une
quantité de bleu.
 La méthode RGB : cela ressemble à RGB(240,96,204) signifie En
anglais, Rouge-Vert-Bleu s'écrit Red-Green-Blue. Es valeur varie entre 0
et 255.

FORMATAGE DU TEXTE
L’opacité des textes
 Il y a deux manières de gérer l’opacité des textes (le fait d’être plus ou moins
transparent).
– La première est en utilisant la propriété CSS opacity. Cette propriété va prendre une
valeur entre 0 (texte totalement transparent) et 1 (texte totalement opaque).
opacity: 0.5;
– La deuxième façon est d’indiquer une quatrième valeur définissant l’opacité dans nos
notations RGB. Dans ce cas là, la notation devient RGBa. Cette quatrième valeur, doit
être comprise entre 0 (texte transparent) et 1 (texte opaque).
color: RGBa(255,000,000,0.9);

L’ARRIÈRE PLAN
Background
 La propriété CSS background va nous permettre de modifie la couleur de fond
 Vous pouvez définir directement en CSS le fond d'une page HTML et meme une image.
 Grâce à la propriété background-color, nous allons tout aussi bien pouvoir rajouter une
couleur derrière un texte ou une couleur de fond pour un élément ou une page en
l’appliquant à l’élément body.
 Pour ajouter une image de fond derrière un élément nous allons cette fois-ci utiliser la
propriété background-image.

L’ARRIÈRE PLAN
body{
background-color: purple;
}
h1{
background-color: #069;
}
div{
background-color: RGBa(200, 200, 000, 0.5);
}

L’ARRIÈRE PLAN
body{
background-image: url(Koala.jpg);
background-size: 25%;
}

EXEMPLE
02/04/2023
LE MODÈLE DES BOÎTES
En HTML, la plupart des balises peuvent se ranger dans l'une ou l'autre de deux catégories :
– Les balises inline : se trouve obligatoirement à l'intérieur d'une balise block. Une balise inline ne
crée pas de retour à la ligne, le texte qui se trouve à l'intérieur s'écrit donc à la suite du texte
précédent, sur la même ligne
– Les balises block : crée automatiquement un retour à la ligne avant et après. il est possible de
mettre un bloc à l'intérieur d'un autre, ce qui va augmenter considérablement nos possibilités
pour créer le design de notre site !
 Il existe deux balises génériques et, comme par hasard, la seule différence entre les deux
est que l'une d'elle est inline et l'autre est block :
– <span></span> (inline) ;
– <div></div> (block).
 Contrairement à un inline, un bloc a des dimensions précises. Il possède une largeur et
une hauteur. on dispose de deux propriétés CSS :
– width : c'est la largeur du bloc. À exprimer en pixels (px) ou en pourcentage (%).
– height : c'est la hauteur du bloc. On l'exprime soit en pixels (px), soit en pourcentage(%).
130/200 130
 pour que notre site s'adapte aux différentes résolutions d'écran de nos visiteurs un bloc
ait des dimensions minimales et maximales :
– min-width : largeur minimale ;
– min-height : hauteur minimale ;
– max-width : largeur maximale ;
– max-height : hauteur maximale.
 les blocs possèdent des marges. Il existe deux types de marges :

– padding : la marges intérieure. l’espace entre le texte
et la bordure (en vert). La propriété
– margin : les marges extérieures. L'espace entre la
bordure et le bloc suivant (en rouge). La propriété
div{
width: 350px;
border: 1px solid black;
padding: 12px;
margin: 50px;
}
 La première boîte (la boîte centrale) représente le contenu de l’élément ou l'élément en soi.
 Ensuite, autour du contenu, la deuxième boîte contient en plus la marge intérieure de l’élément qu'on
appelle en CSS le "padding".
 La troisième boîte va contenir en plus la bordure de l’élément.
 Enfin, la dernière boîte va également contenir la marge extérieure de l’élément.
div{
/*Couleur de fond (bleu-vert)*/
<!DOCTYPE html> /*Largeur de l'élément en soi*/
<html> width: 300px;
<head> /*Marge intérieure*/
<title>Le modèle des boîtes</title> padding: 20px;
<meta charset= "utf-8"> /*Bordure (vert)*/
</head> border: 20px solid #0C0;
/*Marge extérieure*/
<body> margin: 50px;
<div> }
<h1>Le modèle des boîtes</h1>
<p>Un premier paragraphe.</p> border
<p>Un autre paragraphe</p>
</div> padding
</body>
</html>
width

 margin (comme padding d'ailleurs) s'applique aux quatre côtés du bloc

 Si vous voulez spécifier des marges différentes en haut, en bas, à gauche et à droite, il va falloir utiliser
des propriétés plus précises
 Voici la liste pour margin :
– margin-top : marge extérieure en haut ;
– margin-bottom : marge extérieure en bas ;
– margin-left : marge extérieure à gauche ;
– margin-right : marge extérieure à droite.
 Et la liste pour padding :

– padding-top : marge intérieure en haut ;
– padding-bottom : marge intérieure en bas ;
– padding-left : marge intérieure à gauche ;
– padding-right : marge intérieure à droite.
 Il y a d'autres façons de spécifier les marges avec les propriétés margin et padding. Par exemple :
margin: 2px 0 3px 1px; signifie : 2 px de marge en haut, 0 px à droite (le px est facultatif dans ce cas),
3 px en bas, 1 px à gauche ».

 Pour régler efficacement la hauteur et la largeur d’un élément, il faut avant tout bien avoir
compris le modèle des boîtes.
 En effet, vous devez bien vous rappeler que vous ne définissez que la hauteur et la largeur
du contenu de l’élément en soi. Les tailles des marges intérieures, extérieures et des
bordures viendront s’ajouter à cette hauteur et à cette largeur afin de former la taille
totale de l’élément.
 Si vous ne faîtes pas attention, vous risquez de créer des éléments plus grands au final que
leurs éléments parents, ce qui est généralement considéré comme une mauvaise pratique
en HTML et en CSS.

div{
<!DOCTYPE html> background-color: #088;
width: 500px;
<html> }
<head> h1{
<title>Le modèle des boîtes</title> width:300px;
<meta charset= "utf-8"> background-color: white;
height: 100px;
</head> border: 1px solid black;
}
<body> .para1{
<div> width: 400px;
background-color: red;
<h1>Le modèle des boîtes</h1> padding: 60px;
<p class="para1"> border: 5px solid #A04;
Un premier paragraphe. margin-top:70px;
</p> margin-left:50px;
}
<p class="para2">
Un autre paragraphe
Div
</p> .para1 width : 500px
</div> width : 400px
</body> .para1
margin-left : 70px
</html>
élément p fait donc au final 400 + 2*60 + 2*5 + 50=

580px de large, soit 80px de plus que le div, son
élément parent , ce qui fait qu'il déborde
.para1: 400px
.para1 width
padding : 60px

Les bordures
 L’espace pris par la bordure va se trouver entre la marge intérieure et la marge extérieure
d’un élément HTML.
 Nous pouvons définir les bordures d’un élément de différentes manières en CSS : soit en
utilisant les trois propriétés
– border-style,
– border-width
– border-color,
– soit un utilisant directement la notation courte border.
 Le CSS nous permet également de définir des bordures différentes au dessus, à droite, en
dessous et à gauche de nos éléments HTML. Pour cela, nous allons devoir ajouter les mots
clefs top (haut), right (droit), bottom (bas) et left (gauche) dans le nom de nos propriétés
 Nous pouvons créer des bordures arrondies avec la propriété border-radius.

Les bordures
 La propriété border-style peut prendre huit valeurs différentes qui vont définir

l’allure générale (le style) de notre bordure.

 Il est tout à fait possible de centrer des blocs. C'est même très pratique pour réaliser un
design centré quand on ne connaît pas la résolution du visiteur.
 Pour centrer, il faut respecter les règles suivantes :
– donnez une largeur au bloc (avec la propriété width) ;
– indiquez que vous voulez des marges extérieures automatiques, comme ceci : margin: auto;.
p{
width: 350px; /* On a indiqué une largeur (obligatoire) */
margin: auto; /* On peut donc demander à ce que le bloc soit centré avec auto */
text-align: justify;
padding: 12px;
margin-bottom: 20px;
}

div{
width: 400px;
border : 5px ridge #444;
}
.para1{
width:75%;
border-width : 2px;
border-style: dashed;
border-color: yellow;
}
.para2{
border: 5px double yellow;
}

div{
width: 400px;
border-bottom : 5px ridge #444;
border-top: 5px ridge #444;
}
.para1{
width:75%;
border-top-width : 2px;
border-bottom-width: 10px;
border-right-width: 5px;
border-left-width: 5px;
border-style: inset;;
border-color: yellow;
}
.para2{
border-top: 5px solid red;
border-right: 5px solid lime;
border-bottom: 5px solid red;
border-left: 5px solid lime;
}

div{
background-color : #269;
width : 400px;
border-radius : 15px;
padding-left: 100px;
}
.para1{
width:300px;
border : 3px solid yellow;
}
.para2{
width:300px;
padding: 25px;
}

 Supposons que vous ayez un long paragraphe et que vous vouliez qu'il fasse 250 px de
large et 110 px de haut. Pour que le texte ne dépasse pas des limites du paragraphe, il va
falloir utiliser la propriété overflow. Voici les valeurs qu'elle peut accepter :
– visible (par défaut) : si le texte dépasse les limites de taille, il reste visible et sort volontairement
du bloc.
– hidden : si le texte dépasse les limites, il sera tout simplement coupé. On ne pourra pas voir tout
le texte.
– scroll : là encore, le texte sera coupé s'il dépasse les limites. Sauf que cette fois, le navigateur
mettra en place des barres de défilement pour qu'on puisse lire l'ensemble du texte. C'est un peu
comme un cadre à l'intérieur de la page.
– auto : c'est le mode « pilote automatique ». En gros, c'est le navigateur qui décide de mettre ou
non des barres de défilement (il n'en mettra que si c'est nécessaire). C'est la valeur que je
conseille d'utiliser le plus souvent.

div{
background-color : #269;
width : 400px;
border-radius : 15px;
padding-left: 100px;}
.para1{
width:300px;
height : 50px;
overflow : auto;
}
.para2{
width:300px;
padding: 25px;
}

La propriété box-shadow
 créer des ombres autour de nos boîtes (à l’extérieur ou à l’intérieur des bordures) grâce à
la propriété CSS box-shadow.
 la propriété text-shadow, box-shadow va prendre quatre valeurs différentes dans l’ordre
suivant :
– Le déplacement horizontal (vers la droite ou la gauche) de l’ombre ;
– Le déplacement vertical (vers le bas ou le haut) de l’ombre ;
– Le rayon de propagation de l’ombre ;
– La couleur de l’ombre.

div{
background-color: #89B;
width: 400px;
border: 5px solid #777;
border-radius: 15px;
box-shadow: 3px 3px 9px orange;
}
.para1{
width: 50%;
margin: 0px auto;
padding: 20px;
border: 2px solid #BB0;
box-shadow: -4px -4px 5px yellow;
}
.para2{
width: 50%;
margin: 50px auto;
padding: 20px;
border: 2px solid #0B0;
box-shadow: -4px 4px 5px lime inset;
}

La propriété CSS display

 les éléments HTML vont s’afficher soit sous forme de « bloc », soit « en ligne ».
 La propriété display est une propriété CSS très puissante, puisqu’elle va nous permettre de maîtriser la
façon dont un élément va être affiché, et ainsi de gérer la mise en page de nos éléments.
 La propriété display peut prendre de nombreuses valeurs nous permettant de gérer précisément la
façon dont chaque élément va être affiché.
– Display : inline l’élément ciblé va se comporter comme un élément de type inline et donc n’occuper que la
largeur qui lui est strictement nécessaire.
– Display : block les éléments ciblés vont se comporter comme des éléments HTML de type block et ainsi
prendre toute la largeur disponible.
– Display : inline-block permettre d’emprunter certaines propriétés des éléments de type block et certaines
propriétés des éléments de type inline. Ainsi, l’élément en soi va être de type inline tandis que ce qu’il contient
(« l’intérieur de la boîte ») va être considéré comme étant de type block.
– Display : none la valeur none va nous permettre tout simplement de ne pas afficher un élément. Cela peut se
révéler très pratique dans de nombreux cas, notamment lorsqu’on veut modifier l’affichage de nos pages selon
l’appareil utilisé par nos visiteurs (ordinateur de bureau, téléphone portable, tablette, etc.).

div{
width: 400px;
box-shadow: 3px 3px 9px orange;
}
.para1{
display: inline-block;
width: 50%;
}
.para2{
display: inline-block;
width: 40%;
}

La propriété CSS position

 gérer le positionnement de nos éléments HTML en CSS grâce à la propriété CSS position
qui supporte quatre valeurs différentes que nous allons étudier dans cette partie :
– static : correspond au positionnement par défaut des éléments HTML dans une page.
– relative : relativement par rapport à sa position par défaut. si on positionne un élément HTML de
façon relative et qu’on lui ajoute left:50px, l’élément sera déplacé de 50 pixels vers la droite par
rapport à sa position par défaut.
– fixed : toujours rester à la même place, même si l’un de vos visiteurs descend ("scroll") dans la
page. très utile pour conserver un élément constamment visible, comme un menu ou un
sommaire par exemple.
– Absolute: positionner un élément de façon relative par rapport à son parent le plus proche
auquel on a appliqué un positionnement spécifique (relative, fixed ou absolute).
149/200 149
div{
width: 400px;
}
.para1{
postion: relative;
left: 50px;
width: 50%;
}
.para2{
position: absolute;
right: 70px;
top :10px
}

La propriété float, clear

 Les CSS sont en effet conçues pour afficher les éléments au sein d'un flux : pour simplifier, les
éléments en ligne, ou inline, sont affichés les uns à la suite des autres, tandis que les éléments
conteneurs, ou block, amènent un retour à la ligne après leur affichage.
– Le texte et les balises de présentations (b, i, span, ...) sont des éléments inline,
– les images et balises de regroupement (p, div, form, ...) sont des éléments block.
 Le flux fait en sorte que ces éléments s'affichent naturellement, les uns à la suite des autres, en
respectant les spécificités de chaque type.
 float permet de sortir un élément du flux en cela que l'on peut préciser si l'élément ciblé, par
exemple une image. Alors le reste du flux, lui, sera décalé à droite de l'élément flottant, et poursuivra
en dessous selon sa longueur. ou une colonne de contenu, s'affiche à gauche ou à droite.
 La propriété clear entre en jeu lorsque un comportement inattendu du reste du flux se retrouve
souvent sous la forme d'autres éléments flottants qui n'occupent pas la place

La propriété float, clear

 La propriété float va nous permettre de faire « flotter » des éléments HTML à gauche ou à
droite dans une page web.
 On utilisera généralement soit la valeur right (l’élément ciblé flotte à droite), soit left
(l’élément ciblé flotte à gauche) avec cette propriété.
 La propriété float va faire sortir un élément du flux normal de la page. Il y a trois choses à
retenir lorsque l’on utilise cette propriété :
– Les éléments suivants un élément flottant vont se positionner à côté de celui-ci par défaut. Nous
allons pouvoir annuler ce comportement grâce à la propriété clear ;
– Les éléments positionnés de façon absolue avec position:absolute ignoreront la
propriété float (ils ne pourront pas flotter) ;
– Un élément flottera toujours dans les limites (en terme de largeur) de son élément parent
conteneur.

Arrêter le flottement avec clear

 La propriété clear va nous permettre de contrôler le comportement d’éléments flottants.
 cette propriété va nous permettre d’empêcher des éléments de venir se positionner aux
côtés d’éléments flottants.
 Cette propriété peut prendre les valeurs suivantes :
– Left : neutralise l'effet d'un float:left ;
– Right : neutralise l'effet d'un float:right ;
– Both : neutralise l'effet d'un float:left et d'un float:right ;
 Faîtes bien attention à appliquer le clear à l’élément qui va venir flotter par défaut autour
de l’élément flottant, pas à celui qui possède la propriété float.

.main {
width: 800px;
<div class="main"> border: 2px dotted;
<div class="left">1</div> }
<div class="right">2</div> .main div {
<div class="left clear-left">3</div> background: #abc123;
<div class="left">4</div> text-align: center;
line-height: 50px;
<div class="left clear-left">5</div> width: 200px;
<div class="left">6</div> box-shadow: inset 0 0 1px #000;
<div class="left">7</div>
margin-bottom: 10px;
}
div.left {
float: left;
<div class="right clear-left">10</div> }
</div> div.right {
float: right;
}
div.clear-left {
clear: left;
}

FORMULAIRE
02/04/2023
FORMULAIRE
 Le langage Html permet de construire un formulaire.

– Très important pour le web dynamique
– Permet à l'utilisateur d'insérer des données
– Envoi et réception de données
 Le langage CSS permet de mettre en forme un formulaire.

 Un langage comme PHP (ou autre) permet de récupérer les saisies d'un formulaire. Le
langage SQL permet de sauvegarder les informations dans une base de données.
 Le langage JAVASCRIPT permet (par exemple) de contrôler les informations saisies par
l'internaute.
156/200 156
FORMULAIRE
 Un formulaire se trouve toujours à l'intérieur des balises <form></form>.

 Attributs principaux :<form action="…" method="…" … >
– L’attribut method permet de préciser la manière dont vont circuler les données, généralement 2
choix s'offrent à nous, GET (dans l'url) et POST (côté serveur).
– L'attribut action url vers laquelle envoyer les données saisies. Si vous souhaitez récupérer les
saisies des internautes sur la même page, vous pouvez laisser la valeur vide sinon il faudra
préciser le nom d'une page, par exemple : traitement.php
– L'attribut enctype permet de faire véhiculer des fichiers multimédias (fichier pdf, doc word, etc.
mais aussi des images et des vidéos)..
• application/x-www-form-urlencoded : encodage par défaut
• multipart/form-data : aucun encodage, (utilisé notamment pour le file-upload)
• text/plain : seul les espaces sont remplacés par des ‘+’
<body>
<form method="post" action="" enctype="multipart/form-data">
…………….
</form>
</body>
FORMULAIRE
Méthodes de soumission - GET

 Données envoyées par l'URL
– <URI>?name1=value1&name2=value2
 Problèmes de sécurité
 Le nombre autorisé de caractères dépend du navigateur (certains sont limités à 255)

FORMULAIRE
Méthodes de soumission - POST

 Données envoyées par le corps de la requête HTTP
– Nombre de caractères autorisé presque illimité
– Invisible à l'utilisateur dans son navigateur
– Toujours visible dans le message de requête HTTP
 Juste un peu plus sécurisé que GET
 Données envoyées par le corps de la requête HTTP

FORMULAIRE
 L’élément <fieldset>...</fieldset> permet de définir un regroupement dans un

formulaire.
 L’élément <legend>...</legend> permet de donner une légende à un fieldset.
 L’élément <label>...</label> permet de définir une étiquette.
 L’élément <input/> contient les attributs suivant :
– type : spécifie le type d’élément à utiliser
– name : donne un nom à l’élément
– value : donne une valeur à l’élément

FORMULAIRE
<body>
<fieldset>
<legend>test</legend>
<label for="pseudo">Pseudo *</label>
<input type="text" id="pseudo" name="pseudo" required>
</fieldset>
</form>
</body>

FORMULAIRE
Les champs input

 L'élément HTML <input> est utilisé pour créer un contrôle interactif dans un formulaire
web qui permet à l'utilisateur de saisir des données
 Les saisies possibles et le comportement de l'élément <input> dépend fortement de la
valeur indiquée dans son attribut
– <input type="text"/> Zone de texte d'une ligne –
– <input type="password"/> Mot de passe (le texte est caché)
– <input type="file"/> Envoi de fichier
– <input type="checkbox"/> Case à cocher
– <input type="radio"/> Bouton d'option
– <input type="submit"/> Bouton d'envoi
– <input type="reset"/> Bouton de remise à zéro
– <input type="hidden"/> Champ caché

FORMULAIRE
<fieldset>
………
</fieldset>
<fieldset>
<legend>Input 1</legend>
<label for="prenom">Prénom : </label>
<input type="text" id="prenom" ><br>
<label for="nom">Nom : </label>
<input type="text" id="nom"><br>
<label for="email">e-mail: </label>
<input type="text" id="email"><br>
<input type="radio" name="sexe" value="homme">
homme<br>
<input type="radio" name="sexe" value="femme">
femme<br>
<input type="submit" value="envoyer">
<input type="reset" >
</fieldset>

FORMULAIRE

<fieldset>
<legend>Input 1</legend>
<input type="text" id="pseudo" name="pseudo" required> <br><br>
<input type="password" id="pwd" name="pwd" required> <br><br>
<input type="file" id= "file" name="file" required> <br>
<input type="checkbox" id="chk" name="chk" required> <br>
<input type="radio" id="rd" name="rd" required> <br>
<input type="submit" id="sm" name="sm" required> <br>
<input type="reset" id="rs" name="rs" required> <br>
<input type="hidden" id="hd" name="hd" required> <br>
</fieldset>
</form>
</body>

FORMULAIRE
Textarea
 Nous allons utiliser les balises <textarea> et Pour un champs texte sur plusieurs lignes
– L'attribut name permet de spécifier le nom de la variable qui sera envoyé.
– L'attribut rows permet de préciser le nombre de lignes de la zone de texte. Plus le chiffre sera
grand, plus notre textarea sera long.
– L'attribut cols permet de préciser le nombre de caractère par ligne de la zone de texte. Plus le
chiffre sera grand, plus notre textarea sera large.
– Le texte placé entre les balises <textarea> et </textarea> permet de spécifier une valeur par
défaut, c'est à dire que le champs sera affiché prérempli.
<fieldset>
Votre message :<br />
<textarea name="le-message" rows="6" cols="40">
Vous pouvez saisir ici un message.
</textarea>
</fieldset>

FORMULAIRE
sélection
 Les champs select permettent de proposer une liste déroulante de choix.
 Nous allons utiliser les balises <select> et </select>.
– L'attribut name permet de spécifier le nom de la variable qui sera envoyé.
– Entre ces balises <select> </select>, nous allons placer des couples <option> </option>
– Nous pouvons afficher le champs select avec une option pré-sélectionnée selected="selected" :
<fieldset>
Vous êtes :<br />
<select name="profil">
<option value="parti" selected="selected" >Un particulier</option>
<option value="profe">Un professionnel</option>
<option value="insti">Un institutionnel</option>
</select>
</fieldset>

FORMULAIRE
sélection
–<select name="FrenchDepartments">
• <optgroup label="Alsace">
 <option value="67">Bas-Rhin</option>
 <option value="68">Haut-Rhin</option>
• </optgroup>
– <optgroup label="Corse">
• <option value="2B">Haute-Corse</option>
• <option value="2A">Corse-du-Sud</option>
– </optgroup>
–</select>

EXEMPLE

FORMULAIRE
<body>
<label for="pseudo">Pseudo *</label>
<input type="text" id="pseudo" name="pseudo" required><br>
</form>
</body>
 La balise label nous permet de déclarer une étiquette permettant de préciser le type
d'informations dont nous aurons besoin.
 La balise input comportant
– l'attribut type="text" qui va nous permettre de saisir du texte dans une case.
– L'attribut required permet de rendre le champ obligatoire.
– L'attribut name est indispensable pour pouvoir récupérer plus tard la saisie via le langage PHP.
 Nous ne verrons pas la différence si nous travaillons uniquement en HTML mais, au niveau
du développement côté PHP il ne sera pas possible de récupérer le texte saisie par
l'internaute sans l'attribut name.
 L'attribut for de la balise label fonctionne avec l'attribut id de la balise input. en effet une
personne pourra cliquer sur le mot "Pseudo" et cela activera le curseur dans la case de
saisie input.
JAVASCRIPT
171/200
JAVASCRIPT
 JavaScript est un langage de programmation de scripts principalement utilise dans les pages web
interactives (comme par exemple, la validation de données d'un formulaire).
 Interprète du côte client
 Les scripts ne sont pas obligatoirement exécutés au chargement de la page. Ils sont lancés lorsqu'un
événement spécifique se produit.
 Voici quelques exemples (on pourrait en citer beaucoup d'autres) de ce que l'on peut en faire dans
une page Web :
– ouvrir des pop-up (les petites fenêtres qui s'ouvrent de manière intempestive)
– faire défiler un texte
– insérer un menu dynamique (qui se développe au passage de la souris)
– proposer un diaporama (changement d'image toute les X secondes, boutons pour mettre en pause, aller à
l'image précédente / suivante, etc.)
– avoir une horloge "à aiguilles" (avec la trotteuse)
– faire en sorte que des images suivent le pointeur de la souris
– créer de petits jeux
– insérer des balises du zCode (les balises qui apparaissent en cliquant sur le bouton)
– …
172/200 172
JAVASCRIPT
 L‘élément HTML <script> permet d'intégrer du code JavaScript dans une page.
– Déclaration de fonctions dans l'en-tête HTML (entre <head> et </head>)
– appel d'une fonction ou exécution d'une commande JavaScript dans <body> et</body>
– insertion d'un fichier externe (usuellement '.js')
 Utilisation dans une URL, en précisant que le protocole utilise est du JavaScript ex :
<a href="javascript:instructionJavaScript;">Texte</a>
 Utilisation des attributs de balise pour la gestion événementielle :
<balise > Les attributs de l’élément <script type="" src="" charset="" defer=""> sont :
– type : indique le type de contenu (appelé aussi type MIME). La valeur est typiquement
"text/javascript".
– src (optionnel) : indique que le code se situe dans un fichier externe.
– charset (optionnel) : indique le jeu de caractères utilise.
– defer (optionnel) : indique si l'exécution du script doit être décalée.

JAVASCRIPT
Inline Code
 Il suffit d'utiliser uniquement l'attribut type et de placer le code au cœur de l‘élément
script.
<body>
<script type="text/javascript">
//<![CDATA[
function sayHi() {
alert("Hi!");
//]]>
}
</script>
<body>
function sayHi() {
alert("Hi!");
}
</script>

JAVASCRIPT
Fichier Externe
 Il suffit d'utiliser uniquement l'attribut type avec l'attribut src.
<head>
<title> Example </title>
<script type="text/javascript" src="example1.js"> </script>
...
 Pour exécuter le code après le chargement de la page, on utilisera :
<body>
<!– le contenu ici-->
</body>

JAVASCRIPT
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Exemple de page XHTML contenant du Javascript</title>
function fenetre() { alert('Message d alerte dans une fonction.');}
</script>
</head>
<body d alerte genere a la fin du chargement.')">
alert('Message d alerte dans le corps du document.');
</script>
<p>
Ceci est le corps du document.
<a href="javascript:fenetre()">Message d'alerte</a>.
</p>
</body>
</html>

JAVASCRIPT
Exemple
Page statique Page dynamique JavaScript
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<head>
<html>
<title>Page dynamique</title>
<head>
</head>
<title>Page statique</title>
<body>
</head>
<scripttype = "text/javascript ">
<body>
<![CDATA[
<div>
date = new Date();
Nous sommes le 31/10/2017
document.writeln("Nous sommes le ", date);
</div>
]]>
</body>
</script>
</html>
</body>
</html>

JAVASCRIPT
Bases du langage
 Variable : Déclarer une variable nécessite l'utilisation du mot-cle var.
 Les identificateurs: sont sensibles à la casse: test n'est pas Test
 Les instructions :
– se terminent par un point-virgule ;
– nécessitent des accolades lorsqu'elles forment un bloc {…}
 Les commentaires
– // commentaire d’un seule ligne
– /*
* commentaire
*multi-ligne
*/

JAVASCRIPT
Entrée et sortie
 3 types de boites de messages peuvent être affichés en utilisant JavaScript : Alerte,
Confirmation et Invite
– Méthode alert()
• sert à afficher à l’utilisateur des informations simples de type texte. Une fois que ce dernier a lu le
message, il doit cliquer sur OK pour faire disparaître la boîte
– Méthode confirm()
• permet à l’utilisateur de choisir entre les boutons OK et Annuler.
– Méthode prompt()
• La méthode prompt() permet à l’utilisateur de taper son propre message en réponse à la question posée
 La méthode document.write permet d ’écrire du code HTML dans la page WEB

JAVASCRIPT
Exemple
<html>
<head>
<title> une page simple </title>
</head>
<body>
Bonjour
<script type = "text/javascript">
alert('bonjour');
document.write (
prompt('quel est votre nom ?','Indiquer votre nom ici')
);
confirm('quel bouton allez-vous choisir ?');
</script>
</body>
</html>

JAVASCRIPT
Les variables
 Le mot-clé var permet de déclarer une ou plusieurs variables.
 Après la déclaration de la variable, il est possible de lui affecter une valeur par
l'intermédiaire du signe d'égalité (=).
 Si une valeur est affectée à une variable sans que cette dernière ne soit déclarée, alors
JavaScript la déclare automatiquement.
//Déclaration de i, de j et de k.
var i, j, k;
//Affectation de i.
i = 1;
//Déclaration et affectation de prix.
var prix = 0;
//Déclaration et affectation de caractere

var caractere = ["a", "b", "c"];
 La lecture d'une variable non déclarée provoque une erreur

 Une variable correctement déclarée mais dont aucune valeur n'est affectée, est indéfinie
(undefined).

JAVASCRIPT
Exemple
 les variables peuvent être globales ou locales.

 Une variable globale est déclarée en début de script et est accessible à n'importe
quel endroit du programme.
 Une variable locale est déclarée à l'intérieur d'une fonction et n'est utilisable que
dans la fonction elle-même.
Portée locale Portée globale
function test() { function test() {

var message = "hi"; message = "hi";
} }
test(); test();
alert(message); // undefined alert(message); // "hi"

JAVASCRIPT
Type
 Il y a principalement trois types classiques de données Boolean, Number and String et un
type complexe Object (liste de couples nom-valeurs). Il est possible de déterminer le type
(courant) d'une variable avec l'operateur typeof qui retourne l'une des valeurs suivantes:
– undefined si la valeur est indéfinie (variable déclarée mais pas initialisée ou variable non
déclarée)
– Boolean (true (vrai) et false (faux))
– Number (Les nombres entiers, les nombres décimaux en virgule flottant)
– string
– object si la valeur est un objet ou null
– function si la valeur est une fonction

JAVASCRIPT
Type : Valeurs undefined et null

 La valeur undefined fait référence a une variable non déclarée ou déclarée mais pas
initialisée,
 La valeur null signifie l’absence e données dans une variable
var message = "coucou";

alert (typeof message); // "string"
var m1;
alert(m1); // "undefined"
alert(m2); // erreur
alert(typeof m1); // "undefined"
alert(typeof m2); // undefined
...
var car = null;
alert(typeof car); // "object"

JAVASCRIPT
Type : Boolean et Number

 Le type Boolean a deux valeurs true et false. Le type Number sert a représenter des
valeurs entières et des valeurs flottantes (réelles).
var x = 55;
var y = 070; //octal pour 56 (en base 10)
var z = 0xA, //hexadécimal pour 10
var f1 = 10.2;
var f2 = 3.12e7; // représente 31 200 000
var f3 = 3e-10; // représente 0,0000000003
 Remarque : Les valeurs particulières du type Number sont :

– Number.MIN_VALUE, Number.MAX_VALUE
– Number.NEGATIVE_INFINITY, Number.POSITIVE_INFINITY
– NaN (Not a Number)

JAVASCRIPT
Type : Conversions numeriques

 Relatifs aux valeurs et conversions des nombres, on trouve 4 fonctions :
– isNaN détermine si un paramètre donne n'est pas un nombre
– Number effectue une conversion
– parseInt effectue une conversion en valeur entière
– parseFloat effectue une conversion en valeur réelle
alert(isNaN(10)); // false
alert(isNaN("10")); // false - peut être convertie
alert(isNaN("blue")); // true - ne peut être convertie
var num1 = Number("hello world"); // NaN
var num2 = Number("00001"); // 1
var num3 = Number(true); // 1
var num3 = parseInt(""); // NaN
var num4 = parseInt(22.5); // 22
var num5 = parseInt("70",10); // 70 - la base 10 est spécifiée
var num6 = parseFloat("22.5"); // 22.5

JAVASCRIPT
Type : String
 On utilise les quottes simples (apostrophes '…') ou doubles (guillemets "…") pour définir
des valeurs chaînes de caractères. L'attribut length permet de déterminer la longueur
d'une chaîne.
var nom = "Wilde";

var prenom = 'Oscar';
alert(prenom.length); // 6
var message = "toto a dit \"je suis malade\".";
 Il est possible de transtyper une valeur en chaîne avec String().
var v1 = 10; alert(String(v1)); // "10"

var v2 = true; alert(String(v2)); // "true"
var v3 = null; alert(String(v3)); // "null"
var v4;

JAVASCRIPT
Type : String
 Il existe de nombreuses fonctions sur les chaînes de caractères.
var s = "hello world";

alert(s.length); // 11
alert(s.charAt(1)); // "e"
alert(s.charCodeAt(1)); // 101
alert(s.slice(3)); // "lo world"
alert(s.slice(-3)); // "rld"
alert(s.substring(3,7)); // "lo w"
alert(s.indexOf("o")); // 4
alert(s.lastIndexOf("o")); // 7
alert(s.toUpperCase()); // HELLO WORLD
alert(s + " !"); // hello world !
var hi = 'Bonjour', name = 'toi', result;
result = hi + name;
alert(result); // Bonjourtoi

JAVASCRIPT
Type : Math
 Il s'agit d'un objet définissant de nombreuses constantes et fonctions mathématiques.
alert(Math.E); // la valeur de e
alert(Math.PI); // la valeur de pi
alert(Math.min(5,12)); // 5
alert(Math.max(23,5,7,130,12)); // 130
alert(Math.ceil(25.3)); // 26
alert(Math.floor(25.8)); //25
alert(Math.random()); // valeur aleatoire entre 0 et 1
var n = Math.floor(Math.random()*nb + min);
alert(n); // valeur aleatoire entre min et min+nb (exclus)
 D'autres fonctions :
Math.abs(x) Math.exp(x) Math.log(x)
Math.pow(x,y) Math.sqrt(x)
Math.sin(x) Math.cos(x) Math.tan(x)

JAVASCRIPT
Operateurs
 Typiquement, ceux de C, C++ et java:
– incrémentation/décrémentation (++, --)
– arithmétiques (+-,*,/,%)
– relationnels (>,<,>=,<=,==,! =) et (===,! ==)
– logique (!,&&,||)
– affectation (=,+=,-=,*=,/=,%=)
– bit a bit (&,|,<<,>>, ...)
var age = 10;

age++;
alert(age); // 11
alert(age > 10 && age < 20); // true
alert(26 % 5); // 1
age*=2;
alert(age); // 22

JAVASCRIPT
Structures de contrôle
 Elles sont très proches de celles de langages tels que C, C++ et Java. Pour rappel, les
structures de contrôles sont de trois types :
– Séquence : exécution séquentielle d'une suite d'instructions séparées par un point-virgule
– Alternative : structure permettant un choix entre divers blocs d'instructions suivant le résultat
d'un test logique
– Boucle : structure itérative permettant de répéter plusieurs fois la même bloc d'instructions tant
qu'une condition de sortie n'est pas avérée
 Toute condition utilisée pour une alternative ou boucle sera toujours placée entre
parenthèses.
 Il ne faut pas confondre x == y (test d‘égalité) avec x = y (affectation).

JAVASCRIPT
Structures de contrôle : Alternative

 L'instruction if sans partie else :
if (condition) instruction; if (condition) {

instruction1;
if (condition) { instruction2;
instruction; ...
} }
if (x >= 0) alert("valeur positive ou nulle");

...
if (note > 12 && note <= 14) {
alert("bravo");
mention="bien";
}

JAVASCRIPT

 L'instruction if...else :
if (condition) instruction1; if (condition1) {
else instruction2; instructions1;
} else if (condition2) {
if (condition) { instructions2;
instructions1; } else {
} else { instructions3;
instructions2; }
}
if (rank == 1)
medaille="or";
else if (rank == 2)
medaille="argent";
else if (rank == 3)
medaille="bronze";

JAVASCRIPT

 L'instruction switch :
switch (expression) {
case valeur1 :
instructions1;
break;
case valeur2 :
instructions2;
break;
...
case valeurN :
instructionsN;
break;
default: instructionsDefault;
}
 Remarque
Le branchement par default n'est pas obligatoire.

JAVASCRIPT

 L'operateur ternaire ?: permet de remplacer une instruction if...else simple. Sa syntaxe
(lorsqu'utilisée pour donner une valeur a une variable) est :
variable = condition ? expressionIf : expressionElse;
 Elle est équivalente a :
if (condition) variable=expressionIf;
else variable=expressionElse;
var civilite = (sexe == "F") ? "Madame" : "Monsieur";
 Cet operateur est utile pour les expressions courtes.

JAVASCRIPT
Structures de contrôle : Boucle

 L'instruction while :
while (condition) instruction;
while (condition) {
instruction1;
instruction2;
...
}
var num = 1;
while (num <= 5) {
alert(num);
num++;
}

JAVASCRIPT

 L'instruction for :
for (instructionInit; condition; instructionIter) instruction;
for (instructionInit; condition; instructionIter) {

instruction1;
instruction2;
...
}
for (var num = 1; num <= 5; num++)

alert(num);
 Il n'est pas nécessaire de placer des parenthèses autour de la condition pour le for.

JAVASCRIPT

 L'instruction do...while :
do {
instruction1;
instruction2;
...
}
while (condition);
 L'instruction for-in pour les objets :
for (var prop in window)
document.writeln(prop);

JAVASCRIPT

 Certaines instructions permettent un contrôle supplémentaire sur les boucles :
– break permet de quitter la boucle courante
– continue permet de terminer l'itération en cours de la boucle courante
for (var i=0; i<5; i++) {

for (var j=0; j<5; j++) {
if ((i+j)%3 == 0)
continue;
for (var k=0; k<5; k++) {
if ((i+j+k)%3 == 0)
break;
alert(i + " " + j + " " + k);
}
}
}

JAVASCRIPT
Types/Classes : Object
 Utilise pour stocker des données.
 Création d'une variable (de type Object) avec new Object() ou de manière littérale
(énumération entre accolades).
var person = {
var person = new Object();
name : "mon nom",
person.name = "Etudiant";
age : 23
person.age = 23;
}
 Il est possible d'utiliser les crochets pour accéder a un champ.

alert(person.name);
alert(person["name"]);
var field="name"; alert(person[field]);

JAVASCRIPT
Types/Classes : Array
 Les tableaux peuvent contenir des données de nature différente.
var colors1 = new Array(); // tableau vide

var colors2 = new Array(20); // tableau avec 20 cases
var colors3 = new Array("red","blue","green"); // 3 cases
var colors4 = ["red","blue","green"]; // notation littérale
 Le champ length indique la taille d'un tableau.
var colors = ["red","blue","green"];

alert(colors.length); // 3
colors[colors.length]="black"; // nouvelle couleur
colors[99]="pink";
alert(colors.length); // 100
alert(colors[50]): // undefined
colors.length=10; // plus que 10 cases

JAVASCRIPT
Types/Classes : Array

JAVASCRIPT
Types/Classes : Reordonner les tableaux

JAVASCRIPT
Types/Classes : Fonctions

JAVASCRIPT
Types/Classes : Arguments

JAVASCRIPT
Types/Classes : Fonctions comme objets

JAVASCRIPT
Types/Classes :

Questions ?
02/04/2023 Technologies Web 208
208/200
Exercice
<style> </body>
/* tous avec ="highlight" */ <h1> Sélecteur enfant </h1>
<h1 class="highlight"> Element with Class Selector </h1>
xxx { <p>
background-color: green; Bonjour et bienvenue sur mon site Pour le moment, mon site
} est un peu vide Patientez encore un peu !
?
/* tous les éléments p avec </p>
class="highlight" */ <p class="highlight">
C'est P avec CLASS = "highlight“
xxx { </p>
font-style: italic; <div class="mainpoint highlight">
} C'est le point principal de l'article entier.
</div>
/* tous les éléments avec class </body>
'highlight' ainsi qu'avec class
'mainpoint'. */
xxx {
color: red;
background-color: black;
}
</style>
02/04/2023
Technologies
21 Web 212/200
HTML
FORMS
213/200 213
MAIN STRUCTURE
 Forms
<form id="myForm" action="page.html" method="post">

<!-– Form codes -->
</form>
 Attributes:
– Action: données de manipulation de page
– Method: Méthodes de soumission
 Attribute « name » forbidden!

Forms
Input elements
 The input tag:

– Type « text »
• Displays text fields
• Optionals attributes: size, maxlength, …
La balise d'entrée:
Tapez «texte»
Affiche les champs de texte
Attributs optionnels: taille, longueur maximale, ...
<input type="text" name="firstname" value="textfield" />
215/200
Forms
Input elements
 The input tag:

– Other types exist, here are some examples:
• color
• date & datetime
• email • number & range
• url
La balise d'entrée:
D'autres types existent, voici quelques exemples:
• week
Couleur • nombre et gamme
date et date-heure • url
email • la semaine
<input type="range" min="1" max="5" />
216/200
Forms
Input elements
 The input tag:

– Type « password »
• Characters entered by the user are replaced by *
• La balise d'entrée:
• Tapez votre mot de passe "
• Les caractères entrés par l'utilisateur sont remplacés par *
<input type="password" name="pass" value="1234" />
217/200
Forms
Input elements
 The input tag:

– Type « checkbox »
• Displays a checkbox to select or unselect
• Optional attribute: checked
• Tapez «case à cocher»
• Affiche une case à cocher pour sélectionner ou désélectionner
• Attribut facultatif: vérifié
<input type="checkbox" name="day" value="6"
checked="checked" /> Saturday
218/200
Forms
Input elements
 The input tag:

– Type « radio »
• User can choose between different options
• Tapez «radio»
• L'utilisateur peut choisir entre différentes options
<input type="radio" name="sex" value="m" /> Man

<input type="radio" name="sex" value="f"
checked="checked" /> Woman
219/200
Forms
Input elements
 The input tag:

– Type « submit »
• Button
• Send form’s datas
• Tapez «soumettre»
• Bouton
• Envoyer des données de formulaire
<input type="submit" value="Send contents" />
220/200
Forms
Input elements
 The input tag:

– Type « reset »
• Button
• Reset all the control’s values
• Type «réinitialiser»
• Bouton
• Réinitialiser toutes les valeurs du contrôle
<input type="reset" value="Reset values" />
221/200
Forms
Input elements
 The input tag:

– Type « button »
• Button
• Doesn’t implement specific functionnalities
• Tapez «bouton»
• Bouton
• Ne pas implémenter des fonctionnalités spécifiques
<input type="button" value="No Action" />
222/200
Forms
Input elements
 The input tag:

– Type « image »
• Displays an image
• Works as a submit input
• Type «image»
• Affiche une image
• Fonctionne comme une entrée de soumission
<input type="image" src="go.png" alt="Go" />
223/200
Forms
Input elements
 The input tag:

– Type « hidden »
• Hidden control  Invisible to the user
• Tapez «caché»
• Contrôle caché  Invisible à l'utilisateur
<input type="hidden" name="hide" value="Invisible" />
224/200
Forms
Input elements
 The input tag:

– Type « file »
• Files selection
• POST method and attribute enctype required in <form>
• Tapez «fichier»
• Sélection de fichiers
• Méthode POST et attribut enctype requis dans <form>
<form id="form1" method="post" enctype="multipart/form-data">
<input type="file" name="file_send" />
</form>
225/200
Forms
Other elements
 The button tag:

– Displays a specific button
• HTML can be displayed inside
• La balise de bouton:
• Affiche un bouton spécifique
• HTML peut être affiché à l'intérieur
<button name="send" type="submit">

Envoyer <img src="accept.png" alt="wow" />
</button>

<button name="delete" type="reset">
Effacer <img src="delete.png" alt="oops" />
</button>
226/200
Forms
Other elements
 Menus:
– Tags
• <select></select>
• <optgroup></optgroup>
• <option></option>
– Attributes
• size
• multiple
• selected
• Menus
• Mots clés
• <select> </ select>
• <optgroup> </ optgroup>
• <option> </ option>
02/04/2023•Les attributs Technologies Web 227
• Taille 227/200
Forms
Other elements
Menus:
<select name="FrenchDepartments">
<optgroup label="Alsace">
<option value="67">Bas-Rhin</option>
<option value="68">Haut-Rhin</option>
</optgroup>
<optgroup label="Corse">
<option value="2B">Haute-Corse</option>
<option value="2A">Corse-du-Sud</option>
</optgroup>
</select>
228/200
Forms
Other elements
Labels:
– Tag <label></label>
– Used to identify controls
– Implicit version:
– Étiquettes:
– Balise <label> </ label>
– Utilisé pour identifier les contrôles
– Version implicite:
<label>
<input type="radio" name="sex" value="h" /> Homme
</label>
229/200
Forms
Other elements
Labels:
– Tag <label></label> Étiquettes:
Balise <label> </ label>
Utilisé pour identifier les contrôles
– Used to identify controls Version explicite
– Explicit version:
<input type="radio" name="sex" value="f" id="femme" />
<label for="femme">Femme</label>
– Prefer to use the explicit way

• Easier to manage CSS later
Préfère utiliser la méthode explicite
Plus facile de gérer les CSS plus tard
230/200
Forms
Other elements
 Textarea:
– Text field that may content many lines
– Attributes: cols, rows
<textarea cols="25" rows="10" name="comments">

Put your text here
</textarea>
Textarea:
Champ de texte pouvant contenir plusieurs lignes
Attributs: cols, lignes
231/200
Forms
Other elements
 Fieldset and legend:

– Aggregate controls around a thematic
Fieldset et légende:
Agréger les contrôles autour d'un thème
<fieldset>
<legend>Informations</legend>
<label for="last">Lastname:</label>
<input type="text" name="last" />
<label for="first">Firstname :</label>
<input type="text" name="first" />
</fieldset>
232/200
Forms
Specifics attributes
 Type « hidden »
– readonly (<input/>, <textarea/>)
– disabled (<button/>, <input/>,

<optgroup/>, <option/>, <select/>,
<textarea/>)
Tapez «caché»
readonly (<input />, <textarea />)
désactivé (<button />, <input />, <optgroup />, <option />, <select />,
<textarea />)
233/200
Forms
Specifics attributes
 Accessibility attributes
– tabindex (<a>,<input/>, <button>,

<select/>,<textarea/>)
– accesskey (<a>,<input/>, <button>,

<label/>,<legend/>,<textarea/>)
Attributs d'accessibilité
tabindex (<a>, <input />, <button>,

<select />, <textarea />)
accesskey (<a>, <input />, <button>,

<label />, <legend />, <textarea />
234/200
Questions ?
235/200
Forms
Exercices
 Create a new HTML
page named
contact.html and
reproduce this form:
 Add a hyperlink to this

form in your Resume
Créez une nouvelle page HTML nommée? Contact.html et?

Reproduisez ce formulaire:
Ajouter un lien hypertexte à ce formulaire dans votre CV
236/200
HTML
AUDIO AND VIDEO
237/200 237
Audio & Video
Introduction
 There are more and more Audio and Video on the web
 Until now, you had to use non standardize technologies like Java Applets or Flash
– Need specific plug-in

Audio & Video
Audio
 The audio new element represents a sound or audio stream
 Content may be provided inside the audio element

– User agents should show this content to the user only if they don’t support the audio
element

Audio & Video
Audio
 Example :
<audio src="http://images.wikia.com/starwars/images/3/38/UlicFalls.ogg" controls>

Your browser doesn't support the HTML5 audio element.
</audio>

Audio & Video
Video
 The new video element is used for playing videos and audio files with captions
 Again, content may be provided inside the video element

– User agents should show this content to the user only if they don’t support the video
element

Audio & Video
Video
 Example :
<video src="myVideo.mp4" poster="movie.jpg" controls>

Your browser doesn't support the HTML5 video element.
</video>

Audio & Video
Common attributes
 audio and video have some common attributes
– preload: to pre-download the media resource
– autoplay: to automatically begin playback of the media resource

Audio & Video
Common attributes
 audio and video have some common attributes
– controls: to ask to the user agent to provide its own set of controls
– loop: to seek back to the start of the media resource upon reaching the end

Audio & Video
Alternative sources
 The source element allows to specify multiple alternative of sources to a media
element
 Allows the browser to choose the better source based on its media type or codec
support

Audio & Video
Alternative sources
 Example:
<audio controls autoplay loop>

<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser doesn't support the HTML5 audio element.
</video>

Audio & Video
Support for audio codecs
Browser Version Codec Support

Internet Explorer 9.0+ MP3, AAC
Firefox 4.0+ Ogg Vorbis, WAV
Ogg Vorbis, WAV,
Google Chrome 27.0+ MP3, AAC, Ogg Opus
Apple Safari 3.1+ WAV, MP3, AAC
Opera 10.0+ Ogg Vorbis
MP3, AAC (device
Android 2.3+ dependent)
iOS 3.2+ WAV, MP3, AAC
Blackberry 6.0+ MP3, AAC

Audio & Video
Support for video codecs
Browser Version Codec Support

Internet Explorer 9.0+ MP4
Firefox 4.0+ WebM, Ogg Vorbis
Google Chrome 6.0+ MP4, WebM, Ogg
Apple Safari 5.0+ MP4
Opera 10.6+ WebM, Ogg
MP4, WebM (since
Android 2.3+
4.0)
iOS 3.0+ MP4

Questions ?
249/200
Audio & Video
Exercices
 Create a new HTML page
– Try both Audio and Video elements!
250/200
HTML
The end
Thanks for your

attention
251/200

Technologies Web: Pr. Ayoub Abdellaoui

Transféré par

Droits d'auteur :

Formats disponibles

Technologies Web: Pr. Ayoub Abdellaoui

Transféré par

Informations du document

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

Technologies Web: Pr. Ayoub Abdellaoui

Transféré par

Droits d'auteur :

Formats disponibles

Technologies Web

Pr. Ayoub ABDELLAOUI

ENSAM-Rabat, Université Mohamed V, Département Math-Informatique

 Le module Technologies Web permet aux étudiants d’acquérir et de

02/04/2023 Technologies Web 2/200 2

02/04/2023 Technologies Web 3/200 3

 Un réseau est un ensemble d’éléments informatiques

02/04/2023 Technologies Web 4/200 4

Internet est un réseau mondial (supranational) de machines interconnectées

 nombreuses applications : courrier électronique, transfert de fichiers (ftp),

02/04/2023 Technologies Web 5/200 5

le Web (Tim Berners-Lee, 1989) :

 des langages pour créer les documents : HTML, CSS, javascript

Mozilla Firefox Safari Konqueror

02/04/2023 Technologies Web 6/200 6

 URI : chaîne de caractères pour identifier les ressources Internet.

Protocol Site File

 URI = URL + URN

02/04/2023 Technologies Web 7/200 7

02/04/2023 Technologies Web 8/200 8

 Client : le navigateur (Internet Explorer, Firefox, Chrome, Opera, Safari...)

 Serveur : le serveur Web (Apache, Microsoft IIS...)

1. Le client émet une requête

2. Le serveur répond en fournissant le document demandé ou un message d'erreur si le

document n'existe pas

02/04/2023 Technologies Web 9/200 9

02/04/2023 Technologies Web 10/200 10

02/04/2023 Technologies Web 11/200 11

02/04/2023 Technologies Web 12/200 12

02/04/2023 Technologies Web 13/200 13

02/04/2023 Technologies Web 14/200 14

Normalisation par le W3C(World Wide Web Consortium http://www.w3c.org)

02/04/2023 Technologies Web 16/200 16

HTML = HyperText Markup Language

02/04/2023 Technologies Web 17/200 17

vocabulaire + syntaxe + sémantique

02/04/2023 Technologies Web 18/200 18

 Vocabulaire: éléments prédéfinis, identifiés par des balises (ou tags)

<h1> <p> <strong> …… </h1> </p> </strong> ...

02/04/2023 Technologies Web 19/200 19

02/04/2023 Technologies Web 21/200 21

– Tous les emboitements ne sont pas possibles.

02/04/2023 Technologies Web 22/200 22

 Un document (X)HTML est valide s’il respecte toutes ces règles.

02/04/2023 Technologies Web 23/200 23

02/04/2023 Technologies Web 24/200 24

 Des outils pour écrire un code HTML

 Nous allons écrire une simple page web

 Pour découvrir les balises HTML de base

02/04/2023 Technologies Web 27/200 27

02/04/2023 Technologies Web 28/200 28

Listes non ordonnées

02/04/2023 Technologies Web 29/200 29

Avant tout: commentaires!

 Invisible pour les navigateurs Web

02/04/2023 Technologies Web 30/200 30

 Ce sont des éléments structurants. Ils contiennent généralement d’autres

02/04/2023 Technologies Web 31/200 31

02/04/2023 Technologies Web 32/200 32