Développement WEBjordansablon.fr/wp-content/uploads/2021/01/Developpement... · 2021. 1. 22. ·...
Transcript of Développement WEBjordansablon.fr/wp-content/uploads/2021/01/Developpement... · 2021. 1. 22. ·...
-
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)