Langages Web 1

Langages web 1
Par Olivier MASSON
EC DTB1ED14
G2M – M1
@ : olivier.masson.cours.p8@gmail.com
Modalités du cours
• (à confirmer en 2-3 séances) :
• 12 séances :
8/10, 15/10, 22/10, 29/10,
05/11, 12/11, 19/11, 26/11,
03/12, 10/12, 17/12,
07/01
• Une séance, en général : une intro cours, des exos; réponse aux questions
• Un examen final – 1 DM en cours de semestre

(un rendu de projet *)
• Présence obligatoire (*) – l’acquis des savoirs repose majoritairement sur

des exos en cours
Plan général
• Généralités et organisation de l’environnement de travail
• Principes du HTML et apports du HTML 5
• Structure de fichiers d’un site web basique, coder en HTML
• Langages et Formats de données principaux + appliqués à la géo
• Valider le code
• CSS - pratique et approfondissement :
– Concepts principaux
– Modèles de boîtes (ontologies d’un bloc)
– Sélecteurs avancés
– Utilisation des unités de grandeur (px, %, em, rem)
– Méthodes de design adaptatif (web responsive)
– Formater les images pour le web
– Bases d’utilisation et des polices – intégrer des polices originales
– Utilisation de Bootstrap pour optimiser les travaux de mise en page
– Transitions, transformations, animations
• Bonnes pratiques générales et optimisation des pages
• Se servir des outils de navigateur
Généralités sur le web
• Internet : technologie de réseau
• Web (World Wide Web) :
– applicatif client-serveur, reposant sur la technologie
internet
– repose sur un protocole spécifique : «http»
HyperText Transfer Protocol
-> permet l’échange de contenus entre serveur et client
– Utilise des « url(s)» pour naviguer de contenu en
contenu :
Uniform Resource Locator
-> identifiant de ressource web (page / image)
-> adresse permettant au navigateur et au serveur de localiser
cette ressource
• url = type d’uri (Uniform Resource Identifier),
indiquant le protocole
• Différentes applications, pour différentes

technologies
• Objet de notre cours : présentation de pages

web
• Chaque fois que l’on accède à une ressource
située sur un serveur web, on utilise une URL :
– En renseignant directement une url dans le
navigateur
– En cliquant sur un lien
– Via l’exécution d’un script (exemple JavaScript)
• Le protocole http va transmettre la requête au

serveur et la retourner
• En arrière-plan (non-visible du public),
• le navigateur envoie un requête normalisée

au serveur, sous l’entête:
GET /blog/posts/243.html HTTP/2.0

Host: www.toto.fr
Accept: text/html
Accept-Charset: utf-8
Connection: keep-alive
• le serveur répond en servant la ressource une entête :
HTTP/1.1 200 OK
Date: …
Last-Modified: …
Content-Type: text/html; charset=UTF-8
Content-Length: 323
Connection: close
<html>
<head> <title>Le blog de Toto</title> </head>
<body>
<p>Bienvenue sur mon blog !</p>
</body>
</html>
Organisation du travail,
mise en place des outils
• Utiliser un éditeur pour écrire le code
Geany :
https://www.geany.org/download/releases/
ou Notepad++ (PC, Linux)
https://notepad-plus-plus.org/downloads/
(éditeurs plus évolués : Visual Code, Xcode, Eclipse)
• 1er test :
Créer un premier fichier comprenant la structure de
base d’une page html :
model.html
• Mise à disposition d’un serveur pour utiliser le

protocole http au lieu du protocole de fichier
standard de l’OS.
• Mise en place d’un serveur local à domicile

pour tester les fichiers. Exemple de logiciels
basés sur Apache :
EasyPHP, MAMP/LAMP.
• Utiliser logiciel « client FTP » favori ou installer

FileZilla :
https://filezilla-project.org/download.php
• Connexion à l’espace dédié au cours :
- hôte : access802828449.webspace-data.io
- protocole : SFTP
- utilisateur : u98937411-lw1
- mot de passe : Lw1@2021*
• Créer votre répertoire (numéro d’étudiant)
• Accès à vos fichiers par url :
http://s802828443.onlinehome.fr/cours/
lw1/000000/model.html
Principes du HTML,
apports du HTML 5
• Généralités sur le langage HTML :
• HyperText Markup Language
• Langage de « balise »
• World Wide Web Consortium, W3C (1994, Tim Berners-
Lee) -> amener à des standards
• Titres, sous-titres, listes, tableaux, … liens
• 1997 : html 4 -> 2000 : XHTML (plus strict !)
• 2007 : HTML 5, orienté vers l’extensibilité et la sémantique
• Aujourd’hui, l’utilisation du HTML 5 est fortement
conseillée par le W3C
• Dernière mise à jour : html 5.1
permet les définitions de listes de sources par <srcset>
Principes du HTML,
apports du HTML 5
• Apports du HTML 5 :
• Interactivité - RIA : applications internet riches (gestion

accrue de medias, gestions d’événements facilités)
• Amélioration du code (simplicité, structuration)
• Portabilité du code
• Aspect « sémantique » :
– Permet d’apporter de la signification supplémentaire à
certains éléments de la page
– Sémantique reconnue par la machine
– Nouvelles balises ; exemple : <time>
Principes du HTML,
apports du HTML 5
• Apports du HTML 5 :
• En termes de compatibilité des navigateurs ?

• http://html5readiness.com/
Tester des fonctionnalités :
http://www.html5test.com
• Conclusion : améliore la compatibilité entre
navigateurs … mais aussi entre supports !
Principes du HTML,
apports du HTML 5
Structurer un site
Coder en HTML
Créer un fichier avec l’extension .html
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Page d’exemple</title>
</head>
<body>
Hello World!
</body>
</html>
Structurer un site
Coder en HTML
Structure des fichiers :
• Pas de formalisme spécifique
• Bonne pratique : séparer les fichiers de pages, de documents, des styles,
des bibliothèques.
• Suggestion pour un site basique, dans le rép. racine du projet :
•
/(dossier du site)
- pages html : *.html
- img/
- *.jpg/png …
- css/
- *.css
- API/(JS/)
- *.js …
Structurer un site
Coder en HTML
Balises (tags) de contenus :
<h*>, <p>, <table>, <ul> <i>, <b>, <strong>,

<img>, <video> etc.
Balises de mise en forme de page :
<div>, <section>, <header>, <footer>, <nav>,
<aside>
Structurer un site
Coder en HTML
• Une page HTML est une hiérarchie d’éléments
• Chaque élément peut contenir :

– Du texte
– D’autres éléments
– Des attributs
• Commence par une balise de début et une balise de fin :

<p>
…
</p>
• Certaines balise ne nécessitent qu’une balise : <br>, <img>, <input>

Structurer un site
Coder en HTML
En cours :
• Utilisation de l’espace de travail
• Définitions et exemples – balises html essentielles

(blocs : listes, tableaux; éléments en ligne)
– pour tester rapidement avec des contenus :

https://loremipsum.io/fr/
Structurer un site
Coder en HTML
• Bases du CSS :
• écrire des premières propriétés

+ création/importation d’un fichier en HTML
Structurer un site
Coder en HTML
• Bases du CSS :
• Propriétés d’une boîte (« block ») :
• Avec ces premières bases, peaufiner l’exemple de

page
Introduction aux langages
et formats de données principaux
• Beaucoup de systèmes d’informations
géographiques (SIG)
• Utilisation des données appuyées sur deux

langages principaux : XML, JSON
• Point commun : largement mutualisés,

libres -> systèmes open source
• XML :
• « Extensible Markup Language »
•…
• XML :
• « Extensible Markup Language »
• De balises /tags
• Exemple :
• XML :
• Caractéristiques principales : repose sur les balises,
langage strict*, sémantique
• Terminologie :
« tronc », nœuds, arguments, contenu (« feuilles »)
• Avantages :
- la structure même est sémantique
- chaque balise peut renseigner sur le sens de son
contenu
- nom des balises au choix du développeur
• JSON :
• « JavaScript Object Notation »
• Terminologie : objet, clef, valeur

• Equivalent en XML - exemple :
• JSON :
• Avantages :
- directement manipulable en JS (de façon native ,
sans devoir recourir à une fonction de parsing)
- plus souple et permissif (peut aussi être un
inconvénient…)
- compatible avec certains gestionnaires de BDD
(Mongo, noSQL…)
• Formats de données basés sur XML :
• Exemple avec démonstration d’OSM
(Open Street Map)
• https://www.openstreetmap.org
• Base de données cartographique Open Source.

• Formats de données basés sur JSON :
• GeoJSON : « geographical JSON »
• Pas écrit par l’OGC (Open Geospatial

Consortium) mais développeurs
• Utilisé notamment par Leaflet (OSM), Python

• Formats de données basés sur JSON :
• GeoJSON : « geographical JSON »
• Avantage : langage plus flexible/intuitif
• Permet de grouper les éléments à l’écriture par le préfixe
« Multi » :
•
• Formats de données en géomatique :
[ressource pour en savoir plus] :

https://georezo.net/wiki/main/donnees/extensions
Validation du code HTML
• Comment savoir si mon code est correct ?
• Le code doit être orienté vers l’accessibilité et la
lisibilité
• Un code contenant des erreurs sera moins bien
référencé
• Outil du W3C pour la validation du code :
• https://validator.w3.org/
• Exercice : corriger les erreurs de la page d’exemple
• Index des balises HTML 5 existantes (Mozilla) :
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
• Démo sur les balises à connaître
Formulaires
• Balises :
• Conteneur : form
• Champ de texte simple : input[type=text, tel, email]
• Champ de nombre : input[type=number]
• Champ de mot de passe : input[type=password]
• Zone de texte : textarea
• Liste de sélection : select
• Cases à cocher : input[type=checkbox]
• Boutons radio : input[type=radio]
• Champs cachés/masqués : input[type=hidden]
• Balises <label> pour les étiquettes de champ
• Bouton de traitement / soumission
Formulaires
• Attributs d’un formulaire :
• Method : méthode de transmission des données

– Post : paramètres envoyés directement côté serveur de façon
non-visible
– Get : paramètres transmis via l’url :
format url -> ajout de :
?champ1=valeur1&champ2=valeur2…
• Action : chemin fichier qui traitera le formulaire
• Target : cible
• Apports du HTML5 : attributs pour le traitement avant la
soumission
• [démonstration]
Autre modèle : sites single page
• Un modèle de site en vogue, adapté au support
mobile (mobile first), convient pour les sites de
présentation
• Tout le contenu sur une seule page grâce à la

balise <section> :
permet de définir des titres de section avec des
entêtes de 1er niveau <h1>
• [démonstration]
CSS :
PRATIQUE ET APPROFONDISSEMENT
CSS : pratique et approfondissement
Concepts principaux
• Concept :
• « Cascading Style Sheets »
• (feuille de style en cascade)
• Fonctions principales :
• Séparer le style de la structure

• Appliquer des propriétés de style à des éléments HTML (ou de tout autre
langage balisé : xml, svg…)
• Permet de faciliter la maintenance
• Voir exemple en cours :

modifier un fichier stylé en html en séparant les styles de la structure
Concepts principaux
• Avantages :
• Un standard; multitude d’applications

• Puissant (peu de lignes nécessaires pour modifier
totalement l’apparence d’un contenu)
• Simple et léger
• Compréhensible par tous
• Inconvénient : encore des différences selon les
navigateurs
Concepts principaux
• Comment appliquer les CSS ?
• (rappel)
• 3 manières :
Concepts principaux
• (rappel)
• 3 méthodes :
– Application directe dans l’attribut style de l’élément :
<a href=‘’#’’ style=‘’color: red;’’>lien rouge</a>
Concepts principaux
• (rappel)
• 3 méthodes :
– Dans une balise de style (entête du document) :
<style type=‘’text/css’’>
[règles css]
</style>
Concepts principaux
• (rappel)
• 3 méthodes :
– Dans une balise de style (entête du document) :
<style type=‘’text/css’’>
[règles css]
</style>
– Par l’import d’un fichier séparé au format CSS :
<link rel=‘’stylesheet’’ href=‘’chemin_fichier_css’’
type=‘’’text/css’’ media=‘’all’’></link>
Concepts principaux
• Variante de la 3ème méthode – import :

• -> utilise la commande @import
<style type=‘’text/css’’ media=‘’all’’>
@import url(chemin_vers_fichier_css);
</style>
Vérifier la compatibilité navigateurs :

https://caniuse.com/
Concepts principaux
• Liste des mots-clefs des principaux medias
(supports) en CSS :
– all
– screen
– print
– aural
– projection
– handled
• [démonstration avec print]
Approfondissement
• Dimensions des boîtes :
Approfondissement
• Taille réelle d’une boîte :
– Largeur réelle :
margin-left + border-left + padding-left + width + padding-

right + border-right + margin-right
– Hauteur réelle :
margin-top + border-top + padding-top + height + padding-

bottom + border-bottom + margin-bottom
• Modifier la prise en compte des dimensions :

box-sizing
Approfondissement
• Pseudo-classes et pseudo-éléments
• pseudo-classe :
a:hover
:not()
• pseudo-élément :
a::before
Approfondissement
• Opérateurs de sélection avancée
• Selon la position des éléments dans le code :

ul + a
div > span
• Selon une valeur d’argument :

a[href=‘’https://google.fr’’]
a[href*=‘’google’’]
a[href$=‘’.pdf’’]
Attention…
RÉVISONS !
Approfondissement
• Unités de tailles en CSS
• Pour les boîtes : px et % suffisent la plupart du temps pour

gérer les dimensions
• Pour les polices, plusieurs choix –principales unités :

- px
- em
- pt
-%
+ Nouvelles unités CSS3 –tailles relatives :
- rem
- vw / vh
Approfondissement
• Les unités en détail :
• px : taille en pixels
• % : dimension relative au conteneur
• pt : point - unité typographique

• em : 1 em = taille de la police en cours
• rem : root em – permet d’utiliser une taille de police relative à celle
spécifiée en root
• (vw/vh : plus utilisées pour les liseuses/supports de lecture; très

peu en web)
• Unités recommandées pour la plupart des cas pour les écrans : px,
%, em, rem
Approfondissement
• Les unités en détail :
• Utiliser les px ou (r)em ?
• Les px sont privilégiés pour les emplacement visuels

(par exemple alignement, disposition de contenus les
uns par rapport aux autres dans la page);
permettent aussi un rendu plus net pour les bordures
• Les (r)em sont utilisés pour les polices ;mieux que le

pixel, accroissent la lisibilité par rapport aux supports
Approfondissement
• Bases du design adaptatif (= site responsive)
• Propriétés déjà utiles :

• Utiliser des tailles de boîtes dynamiques (%)
• Utiliser les propriétés min-width & max-width
• Et les media queries ?

• Permettent de spécifier des blocs de règles CSS
dépendantes de la disposition d’un support
Approfondissement
• Propriétés déjà utiles :

• Utiliser des tailles de boîtes dynamiques (%)
• Utiliser les propriétés min-width & max-width
• La propriété display (inline-block) pour l’alignement
des contenus
• Et les media queries ?

• Permettent de spécifier des blocs de règles CSS
dépendantes de la disposition d’un support grâce au
terme clef @media
Approfondissement
• Exemple de media query :

• @media screen and (min-width: 200px) and (max-
width: 640px) and (orientation:portrait){
[règles CSS]
}
• Pour plus de détails; consulter :

https://www.alsacreations.com/article/lire/930-css3-media-
queries.html
Approfondissement
• Tailles d’écran « remarquables » - en largeur :
• 576px, 768px, 992px, 1200px

Approfondissement
• Format des images pour le web

• Quels formats privilégier pour les images ?
– jpg/jpeg
– gif
– png
– Tiff
• [Démonstration en utilisant photoshop]

Langages Web 1

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

Langages Web 1

Transféré par

Droits d'auteur :

Formats disponibles

Langages web 1

Par Olivier MASSON

• Un examen final – 1 DM en cours de semestre

• Présence obligatoire (*) – l’acquis des savoirs repose majoritairement sur

• Différentes applications, pour différentes

• Objet de notre cours : présentation de pages

• Le protocole http va transmettre la requête au

• le navigateur envoie un requête normalisée

GET /blog/posts/243.html HTTP/2.0

• Mise à disposition d’un serveur pour utiliser le

• Mise en place d’un serveur local à domicile

• Utiliser logiciel « client FTP » favori ou installer

• Connexion à l’espace dédié au cours :

• Créer votre répertoire (numéro d’étudiant)

• Accès à vos fichiers par url :

• Interactivité - RIA : applications internet riches (gestion

• En termes de compatibilité des navigateurs ?

<h*>, <p>, <table>, <ul> <i>, <b>, <strong>,

• Chaque élément peut contenir :

• Commence par une balise de début et une balise de fin :

• Certaines balise ne nécessitent qu’une balise : <br>, <img>, <input>

• Utilisation de l’espace de travail

• Définitions et exemples – balises html essentielles

– pour tester rapidement avec des contenus :

• écrire des premières propriétés

• Avec ces premières bases, peaufiner l’exemple de

• Utilisation des données appuyées sur deux

• Point commun : largement mutualisés,

• Terminologie : objet, clef, valeur

• Base de données cartographique Open Source.

• Pas écrit par l’OGC (Open Geospatial

• Utilisé notamment par Leaflet (OSM), Python

[ressource pour en savoir plus] :

• Method : méthode de transmission des données

• Tout le contenu sur une seule page grâce à la

• Séparer le style de la structure

• Voir exemple en cours :

• Un standard; multitude d’applications

• Variante de la 3ème méthode – import :

Vérifier la compatibilité navigateurs :

margin-left + border-left + padding-left + width + padding-

margin-top + border-top + padding-top + height + padding-

• Modifier la prise en compte des dimensions :

• Opérateurs de sélection avancée

• Selon la position des éléments dans le code :

• Selon une valeur d’argument :

• Pour les boîtes : px et % suffisent la plupart du temps pour

• Pour les polices, plusieurs choix –principales unités :

• pt : point - unité typographique

• (vw/vh : plus utilisées pour les liseuses/supports de lecture; très

• Utiliser les px ou (r)em ?

• Les px sont privilégiés pour les emplacement visuels

• Les (r)em sont utilisés pour les polices ;mieux que le

• Bases du design adaptatif (= site responsive)

• Propriétés déjà utiles :

• Et les media queries ?

• Propriétés déjà utiles :

• Et les media queries ?

• Exemple de media query :

• Pour plus de détails; consulter :

• Tailles d’écran « remarquables » - en largeur :

• 576px, 768px, 992px, 1200px

• Format des images pour le web