introduction au développement webstephane.ayache.perso.luminy.univ-amu.fr/classic/... ·...
TRANSCRIPT
Introduction au développement web
HTML5, CSS3, Javascript
Les principaux mé7ers du développement web
• développeur web
• développeur base de données
• architecte d’informaAon• architecte web
• concepteur web• consultant progiciel (wordpress, drupal, …)
• analyste test et validaAon
• analyste foncAonnel• expert en sécurité
• consultant cloud compuAng
• intégrateur web
• ergonome web
• graphiste web• webdesigner
• directeur artistique web• modérateur
• comunity manager
• webmaster• traffic manager
• Responsable référencement
Source: https://www.studyrama.com/formations/fiches-metiers/internet-web/
Les principaux métiers du développement web
Le web ?
Le Web a 30 ans !
• Le World-Wide Web (ou WWW, ou Web) est un gigantesque système d’informa/on, réparA sur un ensemble de machines connectées par internet
• Le web est classiquement consAtué de documents web (pages html) et de documentsmul/media: textes, images, sons, vidéos, etc.
• Chaque machine propose un ensemble plus ou moins important de documents qui sont transmis sur le réseau par l’intermédiaire d’un programme serveur.
⇒ Exemple : Apache, un serveur open source très couramment uAlisé
• Ce programme serveur dialogue avec un programme client qui peut être situén’importe où sur le réseau
⇒ Le programme client prend le plus souvent la forme d’un navigateur Web
La première page web
• Ecrite en 1989 par Tim Berners-Lee (CERN)
• Concerne une proposiAon de l’Internet !
• En 1991 il introduit le protocol HTTP
• En 1993, première version du HTML
Le protocole HTTP
• Le dialogue entre un serveur et un client s’effectue selon des règles précises qui constituent un protocole. ⇒ Le protocole du Web est le HTTP
Uniform Resource Locator (URL)
• Les liens sont des pointeurs, relatifs ou absolus‣ Permettent d’identifier une ressource sur le réseau‣ Page Web, image, programme, fichier à télécharger…
• Liens relatifs :‣ Les liens relatifs pointent vers un endroit relatif à la position de la page courante,
‣ Utilisent .. ou /
• Liens absolus :‣ Les liens relatifs pointent vers une destination absolue,‣ Structure : protocole :// adresse / chemin
8
Pages web sta7ques
• Le contenu d’une page web staAque :• Ne varie pas en foncAon des caractérisAques de la demande• Correspond souvent au contenu d’un fichier présent sur le serveur
Deux langages pour écrire le web
• HTML : HyperText Markup Language• Dès 1991• Gestion et structuration du contenu• Dernière version : HTML5
• CSS : Cascading Style Sheets• Feuilles de style• Gestion de l'apparence (agencement, positionnement, décoration, couleurs,
taille du texte…). • Complément du HTML depuis 1996• Dernière version : CSS3
Pages web statiques
• Le plus souvent, écrit en HTML
• Sépare le fond et la forme• Style en CSS
• Adapté aux tailles des clients• « Responsive design »• Grid Layout, Bootstrap…
Pages web dynamiques
• Le contenu d’une page web dynamique :• Varie en fonction des caractéristiques de la demande• Est généré par un serveur
CGI
CGI : Common Gateway Interface
• Interface de base qui définit la communicaAon entre • Le serveur HTTP• Le serveur d'applicaAons
• CGI est un standard (RFC 3875) depuis 1997
• Un programme (ou script CGI) accède à la « requête » • Via des variables d’environnement…
• Une applicaAon (web) s’exécute sur le serveur d’applicaAons• Ce programme génère des pages HTML dynamiques
Un programme CGI (et/ou PHP) …
• s'exécute sur le serveur• est compilé (binaire) ou interprété (script)
• récupère les données d’un formulaire ou d’une URL (méthode GET)• Pour chaque champ, un couple NAME / VALUE
• effectue des traitements (de tous types !) sur le serveur
• génère un résultat qui est renvoyé au client (page HTML, image, postcript...)
Pages dynamiques (côté client)
• Javascript ajoute de « l’interactibilité » aux pages web• Contrôles, affichage, traitements DOM, …
• Créé en 1995, considérablement évolué depuis !• Standardisé• Dernière version ES 6 en 2014
HTML5HyperText Markup Language
Un tout premier exemple
<!doctype html><html lang="fr"> <head> <meta charset="utf-8" /> <title>Titre de la page</title> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script>
</head> <body> Ma première page web !!!</body>
</html>
Un deuxième exemple
<!DOCTYPE html><html>
<head><title>Un titre de page HTML</title>
</head><body>
<h1>Une page HTML</h1><p>Ceci est une page HTML avec deux paragraphes.</p><p>Dans ce paragraphe il y a un <a href=“https://fr.wikipedia.org">lien
vers wikipedia</a>.</p></body>
</html>
Généralités sur le HTML
• HTML est un langage structuré et structurant• Balises et aqributs organisent le contenu d’une page• Liens entre des pages• Balise : <balise> de début, </balise> de fin • Aqribut : couple (nom, "valeur") qualifiant une balise
• Standardisé par le W3C, reconnu par tous les navigateurs
• Règles de syntaxe • Une seule balise « racine » (la balise <html>) : l’ensemble des balises forme un arbre• Pas de chevauchement entre les balises, ie: <a><b></a></b>
Anatomie d’une page Web
‣ Une (bonne) page HTML commence par un DOCTYPE‣ Ensuite <html>, <head> et <body> ‣ Les méta-informaAons vont dans <head>‣ Le contenu va dans <body>
20
<!DOCTYPE html><html lang="fr">
<head>...meta stuff...
</head><body>
...your website...</body>
</html>
Contenu de <head>• Titre du document <Atle> … </Atle>
• Autre informaAons non affichées à l’écran, uAlisées par le navigateur, les moteurs, etc.<meta name="author" content=“”/><meta name="Keywords" content="motcle1, motcle2, motcle3”/><meta name="language" content="fr"/>
• Styles‣<style /> : inclure une feuille de style CSS dans la page ‣ <link /> lier le document à une ressource externe (typiquement, feuille de style)
• Scripts‣<script /> ajouter un script à la page
21
Contenu de <body>
• Balises de structuration (classiques)
• <h1> … </h1> écrit en très gros (existe aussi h2, h3, h4 qui sont moins gros)• <p> … </p> délimite un paragraphe• <br /> passe à la ligne• <div> … </div> délimite un nouveau bloc, à la ligne suivante• <span> … </span> délimite un bloc, affiché à la suite de la ligne
<span> et <div>
• <span> ... </span>• Élément de type inline• ConAent du texte ou d’autres éléments inline
• <div> ... </div>• Élément de type block• ConAent du texte, d’autres éléments inline ou block • Retour chariot à la fin
Balises de structura7on « séman7que »
• <article>, <section>, <header>, <footer>, <nav>, <aside>
• Introduit avec HTML5, ajoute une sémantique au <div>
• Pas de mise en forme par défaut !
Création de tableau
• <table><tr><th>Name</th><th>Description</th>
</tr><tr><td>A</td><td>Description of A</td>
</tr><tr><td>B</td><td>Description of B</td>
</tr></table>
Name Description
A Description of A
B Description of B
Listes•Un élément liste contient des élément items
• <ul> ... </ul> (unordered list) : liste non-ordonnée• <ol> ... </ol> (ordered list) : liste ordonnée• <li> ... </li> : item de liste
• Les listes sont souvent utilisées pour créer des menus
• Exemple :
<ul><li> item 1</li><li> item 2
<ol><li> first </li><li> second </li><li> third </li>
</ol></li>
</ul>
- item 1- item 2
1. first2. second3. third
Liens « hypertext »
• Lien vers une autre page<a href="page.html">lien vers une autre page </a> è Le lien peut être un chemin relatif ou une URL vers un autre site
• Lien interne dans la page : ancre• <a id="haut" />• <a href="#haut" />
Balises multimédia
• <img src="mon_image.jpg" /> ajoute une image à la suite d’une ligne
• <video src="ma_video.mp4"/> ajoute une vidéo à la suite d’une ligne
• <audio src="mon_son.mp3"/> ajoute un son à la page
è Nombreux formats supportés, mais dépend des navigateurs
Formulaires
• Envoie des informations à un serveur
• Saisir les informations• listes déroulantes, cases à cocher, zones de texte, bouton, etc
• Envoyer les informations• Méthode GET : les informations passent par l’URL
Ex. : http://google.com/search?sourceid=mozclient&ie=utf-8&oe=utf-8&q=html5• Méthode POST : les informations sont échangées par le protocole HTTP
Formulaires
• <form> ... </form> : définit un formulaire• Aqribut method : POST ou GET• Aqribut ac=on : URL du programme qui interprétera le formulaire
• <input> ... </input> : entrée de formulaire • Aqribut type : text, checkbox, radio, email, date, url, tel, number, submit• Aqribut name : uAlisé côté serveur pour traiter le formulaire
• <select> ... </select> : liste déroulante• Aqribut name• <opAon> ... </opAon> : élément de la liste
Formulaires
Un premier exemple :
<input type="submit" />
CSS3Cascading Style Sheets
Mettre en forme le Web
•Pourquoi ? • Décrire comment un document HTML doit être affiché
•Comment ? • Associer un certain nombre d’aqributs de style à un élément
Généralités
• Une feuille de style est composée d'un certain nombre de règles (rules)
• Une règle se compose • d’un sélecteur• d'une déclaraAon
• Une déclaraAon se compose d’un ensemble de propriétés/valeurs
• Remarques• L’ordre des règles est indifférent• Tous les styles ne peuvent pas s’appliquer à tous les éléments
• Ex. : une image n’a pas de style de police
Syntaxe de base
h1 { color: purple; font-size:16pt;}
propriété valeur
déclarationsélecteur
Sélecteurs CSS
• Simple‣ Lié à un type d’élément HTML , une classe d’éléments, ou un élément précis‣ UAlisaAon de son nom‣ Exemple : h1 { text-align: center; }
• Groupe‣ Regroupement de règles qui s’appliquent à plusieurs éléments ‣ Exemple : h2, p { font-family: OpAma, Arial, sans-serif; }
• Impossibilité de considérer différemment des éléments de même type
36
Exemple CSS
• Définition du style par famille de balise :
body {background: #FFFFFF;color: black; /* commentaire */ margin-left: 5px;margin-right: 5px;font-family: Tahoma, Optima, Arial, sans-serif;
}
Exemple CSS
• Sélecteur par classe de balise :
.menu-item {display:inline-block; background: #FFFFFF;color: blue; /* commentaire */ font-family: Tahoma, Optima, Arial, sans-serif;
}
è Style associé aux éléments de la classe "menu-item"<div class="menu-item"> …
Exemple CSS
• Sélecteur par classe de balise :
h1.centre { text-align: center; } è pour l’élément h1 de classe centre
.centre { text-align: center; } è pour tous les éléments de classe centre
Exemple CSS
• Sélecteur par identifiant de balise :
#menu {list-style-type: none; background: #FFFFFF;
}
è Style associé aux éléments d’attribut id "menu"<div id="menu"> …
Sélecteur CSS : pseudo-classes
• Sélecteurs d’éléments selon leur état
• Quelques exemples classiques
a:link { color: blue;} è lien non visité et inactif en bleua:visited { color: magenta;} è lien déjà visité en magentaa:hover { color: green; } è lien survolé par la souris en verta:active { color: red;} è lien sur lequel on clique en rouge
p:first-letter {color: red; font-size: 16pt; } è première lettre dans un élément de type block
p:first-line {color: red; } è première ligne dans un élément de type block
41
Propriétés de texte
font-size: small | medium...| % | x pt
font-family: fontname1, fontname2 (si la première n’est pas disponible)
font-weight: bold | lighter font-style: italic | oblique
text-align: le� | center | right | jusAfy color: red | blue | hexcode
background-color: red | blue | hexcode
42
Propriété display
• Définie le type de l’élément ‣ block, inline, inline-block, flex, grid…‣ tout n’est pas toujours compatible entre navigateurs
• Attribut z-index‣ Positionnement en profondeur‣ Indique l’ordre dans lesquels le navigateur doit les afficher (cf. couches/layers en dessin)
43
Grid Layout
• Un élément « conteneur » affiche des éléments selon une grille è display:grid;
• Position des éléments selon leurs coordonnées (ligne, colonne)è grid-row, grid-column
• Position d’éléments sur plusieurs lignes / colonnesè /span à longueur de ligne/colonne utilisé pour un élément
Grid Layout - Exemple
Propriété posi7on
• S’applique aux éléments de type block
→ staAc‣ bloc placé en foncAon de sa posiAon dans l’ordre des balises, ‣ ne peut pas être modifiée dynamiquement
→ absolute‣ bloc placé précisément par rapport aux bords de la fenêtre d’affichage ‣ la posiAon peut être modifiée dynamiquement (déplacement)
→ relaAve‣ bloc posiAonné par rapport à sa posiAon normale, dans le flux..
46
Le modèle de boite (box model)
47
Où placer le CSS ??
• Styles intégrés‣ Déclarés comme attribut style d’un élément è
• Dans l’entête du document HTML‣ Balises <head> <style> … </style></head> è
• Dans une feuille de style liée‣ Plusieurs pages HTML peuvent utiliser la même feuille de style
è
48
<html> <head>
<style type="text/css">h1 {font-family: Times; color:red; }
</style></head><body>… </body>
</html>
<h1 style="font-family: Times; color:red;”>
Un texte en Times et rouge
<h1>
<link rel="stylesheet" type="text/css" href= "feuille-de-style.css" />
Javascript
Capture d'évenements en javascript
50
<html><head><script type="text/javascript">
function createAlertMessage(){alert("Stop what you're doing!");
}</script>
</head>
<body><button onclick="createAlertMessage()">Alert!</button>
</body></html>
• Exemple : onclick()
DOM: Document Object Model
• API javascript pour interagir la page ‣ InteracAon avec le contenu ‣ InteracAon avec la structure
• La page est un arbre dont la racine est la balise <html>
• La variable javascript document permet d’accéder à la racine‣ document.head, document.body ,…‣ childNodesà propriété qui conAent un tableau des fils du nœud courant
DOM: Document Object Model
• getElementsByTagName(string): retourne un tableau d’éléments dont le nom correspond à string
• getElementsByClassName(string): retourne un tableau d’éléments dont la classe correspond à string
• getElementById(string): retourne l’élément dont l’id correspond à string
Intéragir avec le contenu HTML
• La propriété innerHTML permet de récupérer tout le contenu HTML d'un élément du DOM
‣ Accessible en « lecture »
‣ Et en écriture !è Change dynamiquement le contenu d’un élément
Intéragir avec la structure HTML
• Ajout, insertion, suppression d’éléments, via appendChild()
• Via innerHTML :
document.getElementById("myDiv").innerHTML = "<img src='new_image.png' />";
Ajout du style en DOM
Changer de stylesheet CSS
• Etant donné la déclaration d'une feuille de style (dans <head>)
• Via DOM :
<link id="link_css" href="default.css" rel="stylesheet" type="text/css" />
document.getElementById("link_css").setAttribute("href", "advanced.css");
Puis plein d'autres ressources sur le web…
dont https://www.w3schools.com