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 :
 http://www.w3.org/History/19921103-
hypertext/hypertext/WWW/TheProject.html
 Exemple de site Web des années 1990 :
 http://themostamazingwebsiteontheinternet.com
 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 :
www.csszengarden.com

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/monfichier.css">
</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^="http://"] {
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/myFile.js"></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 :
 http://www.w3.org/TR/xhtml1

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 : gs.statcounter.com

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) : http://www.vim.org
 VSCodium : http://www.vscodium.com
 Atom : http://www.atom.io
 Emacs : http://www.gnu.org/software/emacs
 Linux :
 Geany : http://www.geany.org
 Microsoft Windows :
 Notepad++ : http://www.notepad-plus-plus.org
 ConText : http://www.contexteditor.org
 Dreamweaver (WYSIWYG) :
http://www.adobe.com/dreamweaver
 Mac :
 jEdit : http://www.jedit.org
 TextMate : https://macromates.com
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 : http://chrispederick.com/work/web-
developer
 Validateurs W3C :
 XHTML : http://validator.w3.org
 CSS : http://jigsaw.w3.org/css-validator
 Vérificateur de liens :
http://validator.w3.org/checklink
 Aides :
 École en ligne : http://www.w3schools.com
 Compatibilités des navigateurs :
 http://www.caniuse.com
 http://findmebyip.com/litmus

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 :
 http://www.w3.org/
 http://giminik.developpez.com/xhtml/
 CSS :
 http://fr.html.net/tutorials/css
 http://css.mammouthland.net
 http://www.cssdebutant.com
 http://www.colorschemer.com/online.html
 http://pourpre.com

 JavaScript :
 http://www.alsacreations.com/tuto/liste/5-javascript.html

 Référencement :
 http://www.whiteref.com/blog/guide-du-referencement-
naturel.html
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
[email protected]
[email protected]

Carte de visite électronique

Relecteur

Cours en ligne sur : www.mickael-martin-nevot.com

PHP – Développement Web Mickaël Martin Nevot 45/45