M1106 Introduction Web

T1 : Administration et Sécurité des Réseaux
ODA – funded Vocational Training
Projects Management Unit
under the General Department of Vocational Training
Ministry of Labor,
Invalids
and Social Affairs
 

Program: DUT Networks & Telecommunications
 

M1106.P1
Introduction to Web development
Presentation deck

 
Investment in development
of high
 
quality vocational training schools
in Vietnam
 

TV02 Component
 

Networks & Telecom - M1106.P1 : Introduction to web development

1

Introduction au développement web

Module M1106

Introduction au
développement web
IUT la Rochelle
Département Réseaux & Télécom

Networks & Telecom - M1106.P1 : Introduction to web development

2


Introduction au développement web

Objectifs
- Notion d’architecture client-serveur web

- Découvrir le contenu et le contenant d'une page Web pour
PC, Tablette et Smartphone
- Ecrire et modifier des pages Web dans un langage normalisé
de description de contenus
- Mettre en œuvre des feuilles de styles
- Modifier les attributs de présentation d'une page Web
- Adapter un contenu Web pour navigateur mobile
- Conception de sites Web adaptatif (RWD)

Networks & Telecom - M1106.P1 : Introduction to web development

3


Introduction au développement web

Plan
I
II
III
IV
V
VI

-

Introduction - Généralités
Le web vu par … les administrateurs réseaux
Le web vu par … les éditeurs de contenus web
HTML 5
CSS
RWD

Networks & Telecom - M1106.P1 : Introduction to web development

4


I – Introduction - Généralités

Qu’est ce que le web ?
Web : Le World Wide Web (WWW), littéralement la « toile (d’araignée)
mondiale », communément appelé le Web, est une des applications
d’Internet (aux côtés d’autres applications comme le courrier
électronique, la messagerie instantanée, le partage de fichiers…).
Le Web est un système hypertexte qui permet de consulter, avec un
navigateur, des pages accessibles sur des sites hébergeant du contenu
web.
Le Web revient à un échange d’informations présentées le plus souvent
sous forme de pages, entre deux types d’utilisateurs d’Internet :
- les fournisseurs d’informations
- les clients en recherche d’information ou d’un service sur Internet

Networks & Telecom - M1106.P1 : Introduction to web development

5


I – Introduction - Généralités
Utilisation de protocoles : comme tout trafic sur réseau local ou
Internet, les échanges d’informations sont régis par des protocoles,
définissant des normes à respecter.
Echanges web basés sur modèle client-serveur pour la diffusion du
contenu web (voir cours M1101) : un serveur web est sollicité par des
clients web pour fournir du contenu web.

Networks & Telecom - M1106.P1 : Introduction to web development

6

I – Introduction - Généralités
Différence entre HTTP et HTML :
- le navigateur d’un client Web fait une requête web à l'adresse IP d’un
serveur Web en utilisant le port de destination 80 pour demander des
services Web. Cette requête est envoyée au serveur à l'aide du
protocole de transfert hypertexte HTTP (HyperText Transfer Protocol).
- lorsqu'un serveur reỗoit une requête sur le port 80, il l’interprète
comme une demande concernant son serveur web, et répond au
client en envoyant la page Web, dont les infos contenues sont codées
à l'aide de langages de balisage spécialisés. Le langage de balisage
hypertexte HTML (Hypertext Mark-up Language) est le plus utilisé,
mais d'autres langages (XML, XHTML, …) sont également populaires.
Rq : HTTP n‘est pas sûr (possibilité de lire les informations
interceptées) ;
=> le protocole HTTPS (HTTP sécurisé) permet l’authentification et le
chiffrement pour sécuriser les données ; n° port destination serveur:
443
7
Networks & Telecom - M1106.P1 : Introduction to web development


Introduction au développement web

Plan
I
II
III
IV
V

VI

-

Introduction - Généralités
Le web vu par … les administrateurs réseaux
Le web vu par … les éditeurs de contenus web
HTML 5
CSS
RWD

Networks & Telecom - M1106.P1 : Introduction to web development

8


II – Le Web vu par … les administrateurs réseau
Protocole de + haut niveau pour trafic web :
- HTTP : port 80 ; transport TCP
- HTTPS : port 443 ; transport TCP
Exemples de serveurs web les + répandus :
- apache2 sous environnement Linux
- ISS (Internet Information Services) sous Windows Server
- …
Exemples de clients web les + répandus :
- Internet Explorer, Edge, Firefox, Chrome, Safari, …

Networks & Telecom - M1106.P1 : Introduction to web development

9

II – Le Web vu par … les administrateurs réseau
Les clients ont recours un navigateur (client web) pour obtenir le
contenu web souhaité, en indiquant une URL = Uniform Resource
Locator, correspondant au nom d’un site :
Ex: www.iut-larochelle.fr fait référence à une machine nommée
« www » hébergée dans le domaine « iut-larochelle.fr ».
Mais l’information importante pour pouvoir communiquer sur Internet
n’est pas le nom d’une machine, mais son @ IP !
L’être humain utilise des noms, plus faciles à se rappeler que des @ IP,
mais les machines doivent avoir recours à des @ IP pour dialoguer avec
=> Recours à un serveur DNS pour effectuer une résolution de noms :
Ex: l’URL www.iut-larochelle.fr correspond à l’@ IPv4 178.33.169.130 .
Un navigateur Web a recours à des instructions définies dans le
protocole HTTP pour échanger du contenu Web (instructions « Get … »
ou « Put… » par exemple).
Networks & Telecom - M1106.P1 : Introduction to web development

10


II – Le Web vu par … les administrateurs réseau
Hébergement d’un site web :
Un serveur web et son contenu peut être hébergé :
- au sein de son entreprise => souvent besoin pour cela de faire en
interne une « redirection des ports web 80 et 443 » pour diriger le
trafic web arrivant à l’entreprise vers el serveur web (cf cours
M2103).
Besoin dans ce cas d’une bande passante numérique suffisante sur le

lien WAN de l’entreprise.
- chez un hébergeur (solution cloud), indépendant ou un opérateur ISP
=> avantage pour les clients qui bénéficient d’une connexion
performante vers le serveur Web, car situé plus près du cœur de
réseau Internet ; un faible débit du lien WAN d’une entreprise n’est
plus un frein pour la consultation du site web de l’entreprise.

Networks & Telecom - M1106.P1 : Introduction to web development

11


Introduction au développement web

Plan
I
- Introduction - Généralités
II - Le web vu par … les administrateurs réseaux
III - Le web vu par … les éditeurs de contenus
web
IV - HTML 5
V - CSS
VI - RWD

Networks & Telecom - M1106.P1 : Introduction to web development

12


III – Le web vu par … les éditeurs de contenus web

Le web vu par …
les éditeurs de contenus web

Il est plutôt facile aujourd’hui de construire un site Web, même pour les
novices, car des outils intelligents existent : des éditeurs WYSIWYG sont
des logiciels d'édition graphique de type « What You See Is What You
Get »).
Ex: Adobe Dreamweaver,
Microsoft Expression Web,
Golive, Hotdog, NVU,
Kompozer, Bluegriffin, …
Inconvénient de ces outils : on ne mtrise pas le contenu du code de
ses sites, ce qui est peu glorieux pour un futur administrateur réseau, et
qui peut être parfois dangereux…
Networks & Telecom - M1106.P1 : Introduction to web development

13


III – Le web vu par … les éditeurs de contenus web
Aujourd’hui, on ne code plus une page web à l’aide d’un seul fichier. On
cherche à séparer le contenu de la page et la forme de la page web.
Principe de séparation du contenu (HTML) et de la forme (CSS) :
- contenu => les pages HTML
Toutes les pages internet de votre site sont dans le format de fichier
HTML, contenant à la fois le message et la structure vos pages.
Il est formé de blocs qui servent à délimiter et décrire la signification
de chaque information (titres, paragraphes, liens, listes...)
Mais ce fichier ne contiendra pas la faỗon d'afficher les informations

(mise en gras, coloration de textes, ajustement police de caractères...)
- forme => la feuille de style CSS
Le CSS est un ou plusieurs fichiers séparés qui définissent la mise en
page et la maquette graphique des pages HTML.
C'est là et seulement là qu’on ajoute des couleurs, images de fond,
structure du texte en plusieurs colonnes...
Networks & Telecom - M1106.P1 : Introduction to web development

14


III – Le web vu par … les éditeurs de contenus web
Ex: on a ici 2 pages internet et 1 feuille de style appliquée à ces 2 pages :

=> Le contenu (les pages du site) décrit les données (le texte) et leur
structure sémantique (certains textes sont des titres, d'autres des
paragraphes, ou des liens...), le HTML ne fait qu'indiquer la
signification du texte à l'ordinateur, sans jamais l'informer de la
représentation graphique de ces informations.
=> La présentation CSS, quant à elle, décrit comment afficher chaque
type de texte.
Source : />Networks & Telecom - M1106.P1 : Introduction to web development

15


III – Le web vu par … les éditeurs de contenus web
HTML => structure et contenu :
- titres, sous-titres
- paragraphes

- listes
- tableaux
- liens
- …
CSS => mise en forme :
- polices, taille
- couleurs
- position des éléments
- alignement du texte
- …

Networks & Telecom - M1106.P1 : Introduction to web development

16


III – Le web vu par … les éditeurs de contenus web
De faỗon plus gộnộrale :

HTML5

+

CSS

+

Comportement

JavaScript

Site
Web
Networks & Telecom - M1106.P1 : Introduction to web development

17


III – Le web vu par … les éditeurs de contenus web
Organisation du site : dès le début de la conception d’un site, bien
penser à l’organisation des fichiers :
Exemple : mettre toutes les pages HTML dans le
dossier racine, les fichiers dans un sous dossier
images... ; ou si votre site est composé de
plusieurs rubriques, faire un sous dossier par
rubrique et placer tous les fichiers concernant une
rubrique dans son dossier (en incluant le ou les
fichiers HTML).…
Ne pas mettre d’espace ni d’accents ou caractères
spéciaux dans le nom de vos dossiers et fichiers !
Format des images : les compresser en .png (sans perte)
pour la plupart des images (meilleure qualité qu’en .gif),
et en .jpg pour les photos.
Networks & Telecom - M1106.P1 : Introduction to web development

18


III – Le web vu par … les éditeurs de contenus web
Editeurs HTML pour développeurs : Brackets, SublimeText, Notepad++…

Tester son site Web : même si les formats HTML Strict et du CSS sont
des standards du Web et donc reconnus par tous les navigateurs, il est
fortement conseillé de tester vos pages Web (surtout les CSS) dans au
moins deux navigateurs : Internet Explorer, Firefox, Safari…
Rq: Firebug = extension de Firefox pratique pour deboggage HTML/CSS.
Corriger et valider son site Web : La validation signifie qu’on envoie ses
pages HTML et/ou feuilles CSS à un programme qui va indiquer les
endroits où il y a des erreurs.
Networks & Telecom - M1106.P1 : Introduction to web development

19


III – Le web vu par … les éditeurs de contenus web
Exemples de sites offrant service de validation : organisme W3C (World
Wide Web Consortium), qui a défini les normes HTML et CSS :
- validateur HTML : />- Validateur CSS : />Autre site : />
Networks & Telecom - M1106.P1 : Introduction to web development

20


III – Le web vu par … les éditeurs de contenus web
Référencement de son site Web sur les moteurs de recherche :
Le travail de référencement consiste à améliorer le positionnement et
la visibilité de sites dans des pages de résultats de moteurs de
recherche ou d'annuaires.
Pour que le référencement de son site soit effectué auprès de moteurs
de recherche (Google, …), il faut déclarer l’existence de son site aux

moteurs de recherche. Ex: Google My Business :

Networks & Telecom - M1106.P1 : Introduction to web development

21


III – Le web vu par … les éditeurs de contenus web
Des outils spécifiques aux moteurs de recherche analysent
régulièrement le contenu de votre site pour évaluer son placement
(ranking) dans la liste de réponse à un mot clé.
Pour avoir un bon ranking, il faut que le moteur de recherche juge votre
site comme étant un site de qualité. Ce qui peut aider :
- vérifier que la syntaxe utilisée dans les pages HTML est correcte (pas
d’erreurs, pas d’utilisation de balises dépréciées ou mal utilisées …)
- alimenter régulièrement votre site avec du contenu récent (news
régulières, …)
La validation est donc très importante, car elle permet de s’assurer que
le code de ses pages soit de qualité, et cela aidera pour le
référencement de son site.

Networks & Telecom - M1106.P1 : Introduction to web development

22


Introduction au développement web

Plan
I

II
III
IV
V
VI

-

Introduction - Généralités
Le web vu par … les administrateurs réseaux
Le web vu par … les éditeurs de contenus web
HTML 5
CSS
RWD

Networks & Telecom - M1106.P1 : Introduction to web development

23


IV – HTML
IV – 1 Structure d’une page HTML 5
HTML est un langage permettant d'écrire des pages internet à l’aide de
balises (Markup). La version actuelle est HTML 5.
Une balise permet de hiérarchiser ses données en les entourant par une
balise ouvrante et une balise fermante, permettant de donner une
signification au texte ainsi entouré.
2 sortes de balises :
- balise bloc : il s'agit des paragraphes ; ils peuvent contenir d'autres
blocs, mais aussi des passages en ligne

- balise ligne : permet le passage en
ligne, pour donner la signification
d'un mot ou groupe de mots à
l'intérieur d'un bloc ou paragraphe.
Source : />
Networks & Telecom - M1106.P1 : Introduction to web development

24


IV – HTML
Exemple de page HTML5 de base, extrêmement simple :

Networks & Telecom - M1106.P1 : Introduction to web development

25