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)