Post on 26-Jan-2021
Développement WEBSéance n°0
EIL Côte d’Opale – CALAIS Jordan SABLON
Les bases : HTML, CSS & PHP
HTMLHyperText Markup Language
Un langage basé sur des balises
Un langage basé sur des balises
Les différentes parties d’une page HTML
DOCTYPE
La première ligne d'en-tête est appelée « doctype »
Un doctype permet de préciser quel est le type de document qui
va suivre, afin de permettre au navigateur de savoir quel langage
il devra interpréter.
Les différentes parties d’une page HTML
L’élément racine HTML
Recueille les deux principaux éléments de la hiérarchie :
On y définit l'attribut : cela précise la langue utilisée pour le contenu de la page.
Utile pour les synthèses vocales (WCAG 2.0 : « Web Content Accessibility Guidelines »)
Les différentes parties d’une page HTML
L’en-tête (« header »)
Regroupe toutes les méta-informations, c'est-à-dire les
données qui ne sont pas représentées directement à l'écran dans
le rendu du document, mais qui lui sont tout de même liées
Les différentes parties d’une page HTML
L’attribut « charset »
Précise l'encodage des caractères : primordial pour afficher
correctement les caractères spéciaux ou accentués.
Le choix de l'UTF-8 est préconisé par le W3C pour tous les
protocoles échangeant du texte sur internet (dont HTML).
Ce doit être la première balise de l’en-tête
Les différentes parties d’une page HTML
L’élément « link »
Une balise placée dans l'en-tête permet de mettre en
relation la page avec d'autres documents externes.
La plupart du temps cela concerne les feuilles de style CSS
externes avec une relation du type stylesheet.
Les différentes parties d’une page HTML
L’élément « script »
Cet élément permet d'ajouter des scripts (JavaScript) qui vont
s‘exécuter côté client dans le navigateur dès leur chargement.
Les différentes parties d’une page HTML
Le corps (« body »)
Comprend le corps de la page, soit tout le reste du contenu
HTML, structuré par des balises variées selon ce que l'on aura à
y placer et dont l'apparence sera affectée par les styles CSS
chargés via les balises .
Liste des balises HTML5 : https://jaetheme.com/balises-html5/
https://jaetheme.com/balises-html5/
Création d’une page HTML
Fichier « .html »
Le code HTML se place dans un fichier dont l’extension est
« .html ».
Exemple
fichier.html
CSSCascading Style Sheets
Utilité du CSS
Permet de faire la mise en page du site web
Comment intégrer du code CSS ?
Directement dans le code HTML Non recommandé
Comment intégrer du code CSS ?
Dans une feuille de style importée dans l’en-tête Recommandé
Principales balises
Propriétés de mise en forme du texte
Principales balises
Propriétés de couleur et de fond
Principales balises
Propriétés des boites
Principales balises
Propriétés de positionnement et d’affichage
Liste des balises
http://www.css-faciles.com/proprietes-css-liste-alphabetique.php
http://www.css-faciles.com/proprietes-css-liste-alphabetique.php
Création d’une page CSS
Fichier « .css »
Le code CSS se place dans un fichier dont l’extension est
« .css ».
Exemple
style.css
PHPHypertext Preprocessor
Pourquoi util iser du PHP ?
HTML & CSS : un site statique
Deux types de sites
Pourquoi util iser du PHP ?
HTML, CSS & PHP : un site dynamique
Deux types de sites
Pourquoi util iser du PHP ?
Fonctionnement
1. Le client demande au serveur de voir une page web
2. Le serveur prépare la page spécialement pour le client
3. Le serveur lui envoie la page qu’il vient de générer
Insertion de code PHP
Exemple de code PHP
Possibilité d’échapper les caractères spéciaux :
Possibilité d’insérer du code HTML dans du code PHP :
Traduction du code PHP par le serveur
Débuter en PHP
Les variables
Le symbole $ précède toujours le nom d’une variable
Chaque ligne de code PHP se termine par un ;
Débuter en PHP
Les différents types de variables
Débuter en PHP
Afficher le contenu d’une variable
HTML en sortie : 17
HTML en sortie : Le visiteur a 17 ans
Débuter en PHP
Afficher le contenu d’une variable
HTML en sortie : Le visiteur a 17 ans
HTML en sortie : Le visiteur a $age_du_visiteur ans
Débuter en PHP
Afficher le contenu d’une variable
HTML en sortie : Le visiteur a 17 ans
Syntaxe à privilégier :
Débuter en PHP
Les opérations de base
Débuter en PHP
Les conditions
Débuter en PHP
Les conditions (if / else)
Débuter en PHP
Les conditions (switch)
Débuter en PHP
Les conditions (ternaires)
Débuter en PHP
Les boucles (while)
Débuter en PHP
Les boucles (for)
Débuter en PHP
Les boucles (foreach)
Débuter en PHP
Les boucles (foreach)
Débuter en PHP
Les boucles (foreach)
Débuter en PHP
Les tableaux
Clé Valeur
0 François
1 Michel
2 Nicole
3 Véronique
4 François
… …
Débuter en PHP
Les tableaux associatifs
Clé Valeur
prenom François
nom Dupont
adresse 3 Rue du
Paradis
ville Marseille
Débuter en PHP
Les fonctions
Il existe deux types de fonctions :
▪ Celles présentes dans l’API
▪ Celles que nous créons
Débuter en PHP
Les fonctions (API)
Débuter en PHP
Les fonctions (perso)