Chapitre 1 - 18

Technologies Web
Pr. Abdelalim SADIQ

[email protected]
Faculté des sciences, Université Ibn Tofail, Département Informatique
https://sites.google.com/site/sadiqalim/
1/200
PLAN DE COURS
 Introduction
 Qu'est ce qu'un réseau ?
 c’est quoi « internet » ?
 c’est quoi « le web » ?
 HTML
 CSS
 Javascript
09/10/2017 Technologies Web 2/200 2

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

 un réseau de réseaux TCP: Transmisson Control Protocol
 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
14 14/200
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
25 25/200
É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

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.

BALISES HTML DE BASE
É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:[email protected]
– 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 1 - 18

Transféré par

Informations du documentcliquez pour développer les informations du document

Informations du documentcliquez pour développer les informations du document

Droits d'auteur :

Formats disponibles

Chapitre 1 - 18

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

Chapitre 1 - 18

Transféré par

Droits d'auteur :

Formats disponibles

Technologies Web

Pr. Abdelalim SADIQ

Faculté des sciences, Université Ibn Tofail, Département Informatique

09/10/2017 Technologies Web 2/200 2

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

09/10/2017 Technologies Web 3/200 3

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

 des protocoles de communication : TCP-IP IP: Internet Protocol

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

09/10/2017 Technologies Web 4/200 4

le Web (Tim Berners-Lee, 1989) :

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

Mozilla Firefox Safari Konqueror

09/10/2017 Technologies Web 5/200 5

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

Protocol Site File

 URI = URL + URN

09/10/2017 Technologies Web 6/200 6

09/10/2017 Technologies Web 7/200 7

 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

09/10/2017 Technologies Web 8/200 8

09/10/2017 Technologies Web 9/200 9

09/10/2017 Technologies Web 10/200 10

09/10/2017 Technologies Web 11/200 11

09/10/2017 Technologies Web 12/200 12

09/10/2017 Technologies Web 13/200 13

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

09/10/2017 Technologies Web 15/200 15

HTML = HyperText Markup Language

09/10/2017 Technologies Web 16/200 16

vocabulaire + syntaxe + sémantique

09/10/2017 Technologies Web 17/200 17

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

09/10/2017 Technologies Web 18/200 18

09/10/2017 Technologies Web 20/200 20

09/10/2017 Technologies Web 21/200 21

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

09/10/2017 Technologies Web 22/200 22

09/10/2017 Technologies Web 23/200 23

 Des outils pour écrire un code HTML

 Nous allons écrire une simple page web

 Pour découvrir les balises HTML de base

09/10/2017 Technologies Web 26/200 26

09/10/2017 Technologies Web 27/200 27

Listes non ordonnées

09/10/2017 Technologies Web 28/200 28

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

09/10/2017 Technologies Web 29/200 29

<aside > </ aside >

<article > </ article >

<footer > </ footer >

</ body >

09/10/2017 Technologies Web 31/200 31