Académique Documents
Professionnel Documents
Culture Documents
Langages Web 1
Langages Web 1
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
• 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 (font-awesome)
– 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
Généralités sur le web
• url = type d’uri (Uniform Resource Identifier),
indiquant le protocole
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/
• 1er test :
Créer un premier fichier comprenant la structure de base
d’une page html :
model.html
Organisation du travail,
mise en place des outils
- hôte : access802828449.webspace-data.io
- protocole : SFTP
- utilisateur : u98937411-lw1
- mot de passe : Lw1@2021*
Organisation du travail,
mise en place des outils
http://s802828443.onlinehome.fr/cours/l
w1/000000/model.html
Principes du HTML,
apports du HTML 5
• Apports du HTML 5 :
• Apports du HTML 5 :
<!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 :
<p>
…
</p>
En cours :
• Bases du CSS :
• XML :
• « Extensible Markup Language »
•…
Introduction aux langages
et formats de données principaux
• XML :
• « Extensible Markup Language »
• De balises /tags
• Exemple :
Introduction aux langages
et formats de données principaux
Introduction aux langages
et formats de données principaux
• 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
Introduction aux langages
et formats de données principaux
Introduction aux langages
et formats de données principaux
Introduction aux langages
et formats de données principaux
Introduction aux langages
et formats de données principaux
• JSON :
• « JavaScript Object Notation »
• https://www.openstreetmap.org
• 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 :
• [démonstration]
CSS :
PRATIQUE ET APPROFONDISSEMENT
CSS : pratique et approfondissement
Concepts principaux
• Concept :
• Fonctions principales :
– Largeur réelle :
– Hauteur réelle :
• Pseudo-classes et pseudo-éléments
• pseudo-classe :
a:hover
:not()
• pseudo-élément :
a::before
CSS : pratique et approfondissement
Approfondissement
RÉVISONS !
CSS : pratique et approfondissement
Approfondissement
• px : taille en pixels
• % : dimension relative au conteneur
• (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
CSS : pratique et approfondissement
Approfondissement
• Les (r)em sont utilisés pour les polices ;mieux que le pixel,
accroissent la lisibilité par rapport aux supports
CSS : pratique et approfondissement
Approfondissement
• [démonstration]
CSS : pratique et approfondissement
Approfondissement
• « Font Awesome » :
• Transformations :
s’appliquent directement à l’objet dans sa classe par défaut (ne nécessite pas de
changement d’état/pseudo-classe) - exemples :
div.a {
transform: rotate(20deg);
}
div.b {
transform: skewY(20deg);
}
div.c {
transform: scaleY(1.5);
}
• Autre propriété importante – le choix de l’origine de la transformation :
CSS : pratique et approfondissement
Approfondissement
• Transitions, transformations, animations en CSS
• Transformations :
• Animations :
p{
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;