CM 1 : Rappels Web, HTML, CSS et JavaScript
Mickaël Martin Nevot
V1.12.1 18/10/2022 10:59
Cette œuvre de Mickaël Martin Nevot est mise à disposition selon les termes de la
licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage à l'Identique
3.0 non transposé.
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
I. Présentation du cours
II. Rappels Web, HTML, CSS et JavaScript
III. PHP
IV. PHP « avancé »
PHP – Développement Web Mickaël Martin Nevot
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Plantons le décor !
Théâtre Web
Pièce de théâtre Site Web consulté
Actes Pages Web
Livret Code source des pages Web
Producteur Web
Scène Écran de l’ordinateur
Metteur en scène Navigateur
Public Internautes
Auteur Webmaster
Comme au théâtre, le résultat final diffère selon le
metteur en scène. L’auteur doit veiller à ce que le metteur
en scène respecte le livret et ne dénature pas l’œuvre !
PHP – Développement Web Mickaël Martin Nevot 1/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Historique
1970, premiers pas :
ARPAnet
Courrier électronique (1972 : Ray Tomlinson)
FTP
TCP/IP (Transmission Control Protocol / Internet Protocol)
1980, Internet :
ARPAnet devient Inter Networking (Internet)
PHP – Développement Web Mickaël Martin Nevot 2/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Historique
1990, début du Web statique (Tim Berners-Lee) :
HTTP (hyper text transfer protocol)
HTML/XHTML
(extensible hypertext markup language)
3
Interprétation HTML 2
par le navigateur Page HTML
Client Internet Serveur
1
Requête HTTP
PHP – Développement Web Mickaël Martin Nevot 3/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Historique
1995, le Web orienté client :
JavaScript
3
Interprétation HTML 2
par le navigateur Page HTML
4
Exécution JavaScript
Internet Serveur
1
Client Requête HTTP
PHP – Développement Web Mickaël Martin Nevot 4/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Historique
2000, le Web orienté serveur :
PHP (hypertext preprocessor) Base de
Base de données
données
4 3
Échange de données
PHP/ Base de données
6 2
Interprétation HTML 5 Exécution PHP
par le navigateur Page HTML
7
Exécution JavaScript
Internet Serveur
1
Client Requête HTTP
PHP – Développement Web Mickaël Martin Nevot 5/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Historique
2005, le compromis client-serveur : 4
CSS (cascading style sheets) Base de
DOM (document object model)
données
3
Échange de données
PHP / Base de données
6 2
Interprétation 5 Exécution PHP
HTML/CSS par le Page HTML
navigateur
7
Exécution JavaScript Internet Serveur
1
Requête HTTP
Client
PHP – Développement Web Mickaël Martin Nevot 6/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Historique
2010, les tendances du Web 2.0 : 11 4
Ajax (asynchronous JavaScript and XML) Base de
données
10 3
12 Échange de données
Données serveur
PHP / Base de données
Moteur Ajax 8
6 HTTP Ajax 9 2
Interprétation Exécution PHP
HTML/CSS par le 5
navigateur Page HTML
7
Exécution JavaScript Internet Serveur
1
Requête HTTP
Client
PHP – Développement Web Mickaël Martin Nevot 7/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Historique : récapitulatif
1970 : premiers pas
1980 : Internet
1990 : début du Web statique
1995 : le Web orienté client
2000 : le Web orienté serveur
2005 : le compromis client-serveur
2010 : les tendances du Web 2.0
PHP – Développement Web Mickaël Martin Nevot 8/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Qu’est-ce
qu’Internet ?
Retrouvez cette carte
simplifiée, ainsi qu’une plus
complète, en ligne sur le site
Web de l’enseignant
Internet ≠ Web :
Internet contient le Web, les e-mails, les messageries instantanées, etc.
PHP – Développement Web Mickaël Martin Nevot 9/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Premières pages Web
Première page Web :
[Link]
hypertext/hypertext/WWW/[Link]
Exemple de site Web des années 1990 :
[Link]
Les Horribles Cernettes (premier groupe du Web)
PHP – Développement Web Mickaël Martin Nevot 10/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Premier navigateur
WorldWideWeb :
PHP – Développement Web Mickaël Martin Nevot 11/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Évolution du Web
et des navigateurs
Retrouvez cette infographie en
ligne sur le site Web de
l’enseignant
PHP – Développement Web Mickaël Martin Nevot 12/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Page Web ?
HTML CSS
Fond - Contenu Forme - Apparence
(textes, liens, images, etc.) (agencement, déco., couleur, etc.)
PHP – Développement Web Mickaël Martin Nevot 13/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
HTML
Extension(s) de fichier :.html (ou .htm)
HTML :
Langage de description de données (≠ programmation)
Utilisé pour créer le contenu des pages Web
Langage balisé
XHTML :
Même langage que HMTL
Respect de certaines règles syntaxiques
HTML5 / X/HTML5 :
Dernière version de HTML/XHTML
Normalisation 2014
PHP – Développement Web Mickaël Martin Nevot 14/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Balises
Balise simple : <br>
Balise double (paire de balises, ouvrante et fermante) :
<title>Titre de la page</title>
Attribut :
<html lang="fr"></html>
<meta charset="utf-8">
Élément :
Ensemble de données délimité par une balise double
PHP – Développement Web Mickaël Martin Nevot 15/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Ordre d’imbrication des balises
<balise1> <balise1>
<balise1>
… …
…
</balise1> <balise2>
<balise2>
…
</balise1>
<balise2> </balise2>
…
… …
</balise2>
</balise2> </balise1>
Correct Incorrect
Une bonne indentation permet d’éviter la plupart des erreurs d’imbrication !
PHP – Développement Web Mickaël Martin Nevot 16/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Commentaires HTML
Non interprétés par le navigateur
Visibles dans le code source
Exemple :
<!-- Un commentaire HTML -->
<!--
Un autre commentaire HTML
-->
<!--
Encore un autre commentaire HTML mais cette fois-ci, il est affiché
sur plusieurs lignes
-->
PHP – Développement Web Mickaël Martin Nevot 17/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Page HTML5 minimale
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Titre de la page</title>
<meta charset="utf-8">
</head>
<body>
<!-- Ici votre site Web -->
</body>
</html>
PHP – Développement Web Mickaël Martin Nevot 18/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Page HTML5 minimale
DTD (document type definition) du document (version de HTML utilisée)
<!DOCTYPE html> Titre de la page
<html lang="fr">
<head>
(visible dans le
<title>Titre de la page</title> navigateur)
<meta charset="utf-8">
</head> Encodage du fichier
<body>
<!-- Ici votre site Web --> Partie visible de la page HTML
</body>
</html> Informations
générales sur la
Page HTML page (invisible)
PHP – Développement Web Mickaël Martin Nevot 19/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Balises essentielles Il en existe d’autres !
Block Inline Spéciales
<p></p> <br> <html></html>
<hx></hx> (x : de 1 à 6)
<strong></strong> <head></head>
<pre></pre> <em></em> <body></body>
<blockquote></blockquote>
<code></code>
<div></div> <title></title>
<iframe></iframe> <a></a> <link>
<header></header>
<footer></footer> <img> <script></script>
<nav></nav> <meta>
<article></article>
<aside></aside>
<span></span>
<tr></tr>
<table></table> <input> <td></td>
<ol></ol> <textarea></textarea>
<ul></ul> <select></select> <li></li>
<dl></dl>
Block : bloc. Génère un retour à la ligne
<form></form> <audio></audio>
<option></option> Inline : à l’intérieur d’une balise block. <video></video>
Pas de retour à la ligne
PHP – Développement Web Mickaël Martin Nevot 20/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
CSS
Sans CSS Avec CSS
PHP – Développement Web Mickaël Martin Nevot 21/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
CSS
PHP – Développement Web Mickaël Martin Nevot 22/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Évolution des
sites Web de 1996
à 2011
Retrouvez cette infographie en
ligne sur le site Web de
l’enseignant
PHP – Développement Web Mickaël Martin Nevot 23/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Démonstration
CSS
Démonstration en ligne :
[Link]
PHP – Développement Web Mickaël Martin Nevot 24/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
CSS
Extension(s) de fichier : .css
Séparer contenu (HTML) et mise en forme (CSS)
Rappel : méthode recommandée d’utilisation d’un CSS :
<head>
<link rel="stylesheet" type="text/css" href="css/[Link]">
</head>
Possibilité d’utiliser plusieurs feuilles de style à la fois
CSS3 :
Prochaine révision de CSS (expérimental)
PHP – Développement Web Mickaël Martin Nevot 25/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Commentaires CSS
Non interprétés par le navigateur
Visibles dans le code source
Exemple :
/* Un commentaire CSS */
/*
Un autre commentaire CSS
*/
/*
Encore un autre commentaire CSS mais cette fois-ci, il est affiché
sur plusieurs lignes
*/
PHP – Développement Web Mickaël Martin Nevot 26/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Syntaxe CSS
sélecteur {
propriété: valeur;
}
Lien avec HTML Propriété CSS : Valeur de la propriété ;
PHP – Développement Web Mickaël Martin Nevot 27/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Sélecteurs
Simple : nom d’une balise
h1 {
color: black; /* met les titres h1 en noir */
}
Multiple : plusieurs balises séparées par ,
h1, h2, h3, h4, h5, h6 {
color: red; /* met l’ensemble des titres en rouge */
}
Contextuel : plusieurs sélecteurs séparés par (une espace)
h1 em {
color: blue; /* met les mots en emphase à l’intérieur d’un h1 en bleu */
}
Pseudo-classe : rajoute un contexte à un sélecteur
a:visited {
color: red; /* les a qui sont des liens déjà cliqués sont en rouge*/
}
PHP – Développement Web Mickaël Martin Nevot 28/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Sélecteurs
Position des fils :
table tr:nth-child(odd) { odd : impairs ; even : pair
background-color: #C8D8EA;
}
table tr:nth-child(2n + 1) {
background-color: #C8D8EA;
}
table tr:nth-of-type(2n + 1) {
background-color: #C8D8EA;
}
Valeur d’un des attributs :
a[href^="[Link] {
color: red; Liens dont l’attribut href commence par http://
}
Exclusion :
a:not(.notme) {
color: green; Liens qui ne sont pas de classe .notme
}
PHP – Développement Web Mickaël Martin Nevot 29/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Sélecteurs
HTML CSS
Classe : attribut class Classe : nom d’une classe, préfixé
<div class="person">
<p>John Smith</p>
d’un .
</div> .person {
<p>John <span /* Met l’ensemble
class="person">Doe</span></p> des balises de classe
<!-- Met "John Smith" et "Doe" en gras --> "person" en gras */
ID (Identifiant) : attribut id font-weight: bold;
<div id="monster"> }
<p>Shrek</p>
</div>
ID (Identifiant) : nom d’un id,
<!– Met "Shrek" en gras --> préfixé d’un #
#monster {
Les sélecteurs de classe et d’identifiant se /* Met la balise d’identifiant
comportent exactement de la même manière, à "monster" en gras */
ceci près qu’un identifiant ne peut être utilisé font-weight: bold;
qu’une seule fois dans une page HTML }
PHP – Développement Web Mickaël Martin Nevot 30/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Ordre de gestion des conflits
1. Si !important précisé après la valeur :
h1 {
color: blue !important;
}
2. Sinon, dans l’ordre de spécificité des règles
(poids des sélecteurs)
3. Sinon, la dernière règle (dans les fichiers CSS)
Plusieurs feuilles de style peuvent s’appliquer simultanément
Héritage : Chaque élément « enfant » reçoit en héritage toutes les propriétés de son
élément « parent » (seulement pour les propriétés qui s’héritent : presque toutes !)
Un même élément d’une page HTML peut recevoir
différentes mises en forme par différentes règles
PHP – Développement Web Mickaël Martin Nevot 31/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
JavaScript JavaScript ≠ Java
Extension de fichier : .js
Rappel : méthode recommandée d’utilisation de JavaScript :
<head>
<script type="text/javascript" src="js/[Link]"></script>
</head>
Principales caractéristiques :
Interprété côté client
Langage de programmation de script sensible à la casse
Conçu pour le développement d'applications Web
Langage objet non-typé
Pas de lecture/écriture ou d’exécution d’autres programmes
PHP – Développement Web Mickaël Martin Nevot 32/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Bonne utilisation
Apport d’interactivité, de dynamisme
Amélioration de l’ergonomie
Fonctionnalités non critiques
Fonctionnalités non sécurisées
Utilisation modérée
PHP – Développement Web Mickaël Martin Nevot 33/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Avantages/inconvénients
Avantages :
Soulage le trafic réseau
Bonne réactivité
Interactivité des sites Web « statiques » (orientés client)
Inconvénients :
Non pris en charge en mode dégradé
Problème de compatibilité entre navigateurs
Pénétration : ≈ 10 % de navigateurs incompatibles
Anciennes versions d’Internet Explorer
Insécurité des données
Peut alourdir le traitement côté client
Délicat à déboguer
PHP – Développement Web Mickaël Martin Nevot 34/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Règle des trois clics / landing page
Règle des trois clics :
Un internaute doit pouvoir accéder à n’importe quelle
information d’un site Web en suivant au plus trois liens
Meilleur référencement par les moteurs de recherche
Landing page (page d'atterrissage) :
Visibilité importante sur la première page d’un site Web
Communication ciblée sur l'acte direct
(inscription à un bulletin d'information, achat rapide, etc.)
PHP – Développement Web Mickaël Martin Nevot 35/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Norme et compatibilité
World Wide Web Consortium (W3C) :
Organisme de normalisation
Donne les standards à utiliser pour une meilleure :
Interopérabilité
Accessibilité
Portabilité
Pérennité des documents
Réduction des coûts
Validateurs HTML, CSS, vérificateur de liens
Compatibilité des navigateurs
Aucun navigateur ne respecte totalement la norme W3C !
PHP – Développement Web Mickaël Martin Nevot 36/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Règles XHTML
Utilisation d’un DTD (DOCTYPE)
Les balises doivent être écrites en minuscule
Les balises de fin sont obligatoires
Les valeurs d’attributs sont entre guillemets et attributs ne
comportent ni espace, ni retour chariot :
<html lang="fr">
Respecter l’ordre d’imbrication des balises
Utilisation recommandée des feuilles de style CSS
Plus d’informations :
[Link]
PHP – Développement Web Mickaël Martin Nevot 37/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Référencement (naturel)
Interne Externe Obtenir des liens
depuis d’autres sites
Balisage sémantique Mots clefs
Contenu Annuaires
Rapidité du site Web Forums
Design et ergonomie Communiqués de presse
Publicité Digg-like
Liens internes Réseaux sociaux
Plan de site Commentaires de blogs
Version mobile
URL canonique
PHP – Développement Web Mickaël Martin Nevot 38/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Navigateurs
Voir en ligne : [Link]
PHP – Développement Web Mickaël Martin Nevot 39/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Éditeurs
Multiplateformes :
Vi (Vim) : [Link]
VSCodium : [Link]
Atom : [Link]
Emacs : [Link]
Linux :
Geany : [Link]
Microsoft Windows :
Notepad++ : [Link]
ConText : [Link]
Dreamweaver (WYSIWYG) :
[Link]
Mac :
jEdit : [Link]
TextMate : [Link]
PHP – Développement Web Mickaël Martin Nevot 40/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Boîte à outils Web
Modules Mozilla Firefox Developer Edition :
Web Developer : [Link]
developer
Validateurs W3C :
XHTML : [Link]
CSS : [Link]
Vérificateur de liens :
[Link]
Aides :
École en ligne : [Link]
Compatibilités des navigateurs :
[Link]
[Link]
HTML/CSS Mickaël Martin Nevot 41/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Aller plus loin
HTML5
CSS3
CMS
Préprocesseur CSS (Less, etc.)
PHP – Développement Web Mickaël Martin Nevot 42/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Liens
Documents électroniques :
HTML :
[Link]
[Link]
CSS :
[Link]
[Link]
[Link]
[Link]
[Link]
JavaScript :
[Link]
Référencement :
[Link]
[Link]
PHP – Développement Web Mickaël Martin Nevot 43/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Liens
Documents classiques :
Sébastien Mavromatis. Langages de l’Internet.
Mathieu Nebra. Apprenez à créer votre site Web avec
HTML5/CSS3.
Antoine Cellerier. Formation HTML/CSS.
Simon Willison. Une réintroduction en JavaScript.
Vincent Riale. Initiation au langage JavaScript.
PHP – Développement Web Mickaël Martin Nevot 44/45
Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1
Crédits
Auteur
Mickaël Martin Nevot
[Link]@[Link]
[Link]@[Link]
Carte de visite électronique
Relecteur
Cours en ligne sur : [Link]
PHP – Développement Web Mickaël Martin Nevot 45/45
