PROGRAMMATION
PROGRAMMATION
Table des matières
INTRODUCTION ..................................................................................................................................2
HTML ..................................................................................................................................................4
1. INTRODUCTION ...........................................................................................................................4
2. CONCEPT DE BALISE ....................................................................................................................4
3. STRUCTURE DU DOCUMENT........................................................................................................5
4. LES BALISES PRINCIPALES ............................................................................................................6
5. LIEN ABOSLU ET LIEN RELATIF .....................................................................................................7
6. FORMULAIRE...............................................................................................................................7
7. NOUVEAUX TYPES D’INPUT HTML5 .............................................................................................9
CSS ................................................................................................................................................... 10
1. INTRODUCTION ......................................................................................................................... 10
2. INSÉRER DU CSS ........................................................................................................................ 10
3. LES COULEURS EN HEXADÉCIMAL .............................................................................................. 10
4. STRUCTURE DU CSS ................................................................................................................... 11
5. POSITIONNEMENT..................................................................................................................... 14
JAVASCRIPT ...................................................................................................................................... 16
1. INTRODUCTION ......................................................................................................................... 16
2. EMPLACEMENT DU CODE .......................................................................................................... 16
3. VARIABLES ET TYPAGES ............................................................................................................. 17
4. STRUCTURES DE CONTRÔLE ...................................................................................................... 17
5. DOCUMENT OBJECT MODEL ...................................................................................................... 18
1
PROGRAMMATION
INTRODUCTION
Paradigme Client – Serveur
Protocole de communication :
Spécification de plusieurs règles pour un type de communication particulier :
HTTP : HyperText Transfer Protocol
HTTPS : HyperText Transfer Protocol Secure
FTP : File Transfer Protocol
SMTP
AJAX
Adresse :
URL : Uniform Resource Locator
Les différentes technologies
HTML – HyperText Markup Language
Langage de balisage conçu pour structurer les pages web
Permet de :
Créer des documents interopérables (valides sur des systèmes multiples)
Donner une structure sémantique
Inclure du contenu multimedia (images, vidéos,…)
Créer des formulaires de saisies
Intégrer des éléments programmables (applets)
Interprété côté CLIENT
CSS – Cascading Style Sheets
Langage informatique qui sert à décrire la présentation des documents HTML
Permet de :
Séparer la structure de la mise en forme
Décliner les styles de présentation selon le récepteur
Combiner différentes sources de mise en forme (cascade)
Interprété côté CLIENT
JavaScript
Langage de scripts principalement utilisé dans les pages web interactives
Permet de :
Contrôler les données saisies dans des formulaires HTML
Interagir avec le document HTML via l’interface Document Object Model
Réaliser des services dynamiques (cosmétiques, ergonomiques,…)
Interprété côté CLIENT
2
PROGRAMMATION
Ajax – Asynchronus JavaScript And XML
Architecture informatique
N’est pas un langage
Permet d’améliorer la maniabilité et le confort d’utilisation des applications web
Largement utilisé pour les larges applications web : Facebook, Gmail,…
Combine HTML, JavaScript, CSS, XML,…
Application typique : suggestions de recherche :
Vous saisissez quelques mots-clés
Le moteur propose spontanément d’autres mots-clés
Mais sans rafraichissement de la page
Interprété côté CLIENT pour interroger le SERVEUR
PHP –Hypertext Preprocessor
Langage de scripts principalement utilisé pour produire des pages web dynamiques via un
serveur HTTP
Langage impératif
Utilisation très répandue : Facebook, Yahoo !,…
Autres solutions : Java, ASP.NET, C#
Interprété côté SERVEUR
Les outils
Navigateur web :
Chrome
Mozilla
Internet Explorer
Editeur de texte :
Notepad++
IDE (Integrated Development Environment) :
Eclipse
Serveur web :
WAMP
Windows (OS)
Apache (server web)
Mysql (base de données)
PHP (langage de script)
3
PROGRAMMATION
HTML
1. INTRODUCTION
HTML est un langage pour décrire et structurer des pages web :
HTML est l’acronyme de HyperText Markup Language
HTML est un langage de balisage (markup language) : composé d’éléments de balisage (tags)
pour déterminer le début et la fin d’une séquence
Le type de document
Information à placer au début d’un document web afin de déclarer au navigateur quelle version de
HTML est utilisée.
< ! 𝐷𝑂𝐶𝑇𝑌𝑃𝐸 ℎ𝑡𝑚𝑙 >
Validation du code HTML
Le W3C met à disposition un outil permettant de vérifier la compatibilité d’un document avec une
norme HTML.
ℎ𝑡𝑡𝑝://𝑣𝑎𝑙𝑖𝑑𝑎𝑡𝑜𝑟. 𝑤3. 𝑜𝑟𝑔
2. CONCEPT DE BALISE
Les balises
Mots clés entourés par des chevrons.
Normalement définies par paires :
La première balise (ouvrante) est la balise de début
La seconde balise (fermante) est la balise de fin
Les balises sont écrites en minuscule
< 𝑡𝑖𝑡𝑙𝑒 ></𝑡𝑖𝑡𝑙𝑒 >
Les éléments
Commence par une balise ouvrante et se termine par une balise fermante.
Le contenu de l’élément est tout ce qui se trouve entre les balises ouvrante et fermante.
Certains éléments n’ont pas de contenu balise auto fermante
Peuvent avoir des attributs.
< ℎ1 ></ℎ1 >
< 𝑏𝑟 >
Les attributs
Fournit de l’information supplémentaire vis-à-vis d’un élément
Sont toujours définis dans les balises ouvrantes.
Un attribut est une paire
𝑛𝑜𝑚 = "𝑣𝑎𝑙𝑒𝑢𝑟"
𝑛𝑜𝑚 = "𝑣𝑎𝑙𝑒𝑢𝑟"
Balise – Elément – Attribut
< ℎ1 𝑖𝑑 = "𝑡𝑖𝑡𝑟𝑒1" 𝑐𝑙𝑎𝑠𝑠 = "𝑟𝑒𝑑" > 𝑀𝑜𝑛 𝑡𝑖𝑡𝑟𝑒 </ℎ1 >
Type d’élément Attribut Nom d’attribut Valeur d’attribut
Balise ouvrante Contenu Balise fermante
Elément
4
PROGRAMMATION
Imbrication des balises
3. STRUCTURE DU DOCUMENT
Balise de structuration :
< ℎ𝑡𝑚𝑙 > balise racine
< ℎ𝑒𝑎𝑑 > information sur la page
< 𝑡𝑖𝑡𝑙𝑒 > titre de la page
< 𝑚𝑒𝑡𝑎 > infos supplémentaires
< 𝑙𝑖𝑛𝑘 > lien vers ressource externe (CSS)
< 𝑠𝑐𝑟𝑖𝑝𝑡 > code à exécuter par le client (Javascript)
< 𝑠𝑡𝑦𝑙𝑒 > permet de définir un style CSS
< 𝑏𝑜𝑑𝑦 > corps de la page
< 𝑑𝑖𝑣 > définit une division, une section
< ℎ𝑒𝑎𝑑𝑒𝑟 > container for introductory content
< 𝑛𝑎𝑣 > a set of navigation links
< 𝑎𝑟𝑡𝑖𝑐𝑙𝑒 > independent, self-contained content
< 𝑠𝑒𝑐𝑡𝑖𝑜𝑛 > sections, chapitres
< 𝑎𝑠𝑖𝑑𝑒 > content aside from the content it is placed in
< 𝑓𝑜𝑜𝑡𝑒𝑟 > pied de page
Exemple :
5
PROGRAMMATION
4. LES BALISES PRINCIPALES
Niveaux de titre : < ℎ1 > ⋯ < ℎ6 >
Permet de définir différents niveaux de titres du plus important ℎ1, au moins important ℎ6
Les headings sont extrêmement important :
Pour la structure de la page
Pas pour la mise en forme
Utilisés par les moteurs de recherche
Pas d’attributs particuliers.
Paragraphes : < 𝑝 >
Définition d’un paragraphe
Pas d’attributs particuliers
Listes : < 𝑢𝑙 > < 𝑜𝑙 >
< 𝒖𝒍 >
Permet de définir une liste non-ordonnée (unordered list)
Définition de la lise : < 𝑢𝑙 >
Définition d’un élément de la liste : < 𝑙𝑖 >
Pas d’attributs particuliers
< 𝒐𝒍 >
Permet de définir une liste ordonnée
Définition de la liste : < 𝑜𝑙 >
Définition d’un élément de la liste : < 𝑙𝑖 >
Pas d’attributs particuliers
Tableaux : < 𝑡𝑎𝑏𝑙𝑒 >
Un tableau est un ensemble de lignes, constituées chacunes d’un ensemble de cellules.
Définition d’un tableau : < 𝑡𝑎𝑏𝑙𝑒 > </𝑡𝑎𝑏𝑙𝑒 >
Définition d’une cellule de l’en-tête : < 𝑡ℎ ></𝑡ℎ >
Définition d’une ligne : < 𝑡𝑟 ></𝑡𝑟 >
Définition d’une cellule : < 𝑡𝑑 ></𝑡𝑑 >
Définition d’une légende au tableau : < 𝑐𝑎𝑝𝑡𝑖𝑜𝑛 >
Groupe l’en-tête d’un tableau : < 𝑡ℎ𝑒𝑎𝑑 >
Groupe le corps d’un tableau : < 𝑡𝑏𝑜𝑑𝑦 >
Groupe le bas du tableau : < 𝑡𝑓𝑜𝑜𝑡 >
6
PROGRAMMATION
Liens hypertextes : < 𝑎 >
<𝒂>
La balise définit un lien hypertexte.
Est utilisée pour (entre autre) lier des pages internet les unes aux autres
L’attribut le plus important est ℎ𝑟𝑒𝑓 qui définit la destination du lien
L’attribut 𝑡𝑎𝑟𝑔𝑒𝑡 définit où le lien sera ouvert : _blank nouvel onglet, _self même onglet
Images : < 𝑖𝑚𝑔 >
Permet d’insérer des images dans une page web
Deux attributs obligatoires :
𝑠𝑟𝑐 : lien vers l’image
𝑎𝑙𝑡 : un texte alternatif à l’image
Autres attributs :
width : largeur de l’image
height : hauteur de l’image
5. LIEN ABOSLU ET LIEN RELATIF
Lien absolu
Référence qui ne tient pas compte de la position actuelle
Lien relatif
Référence qui tient compte de la position actuelle
Répertoire actuel : ./
Répertoire parent : . ./
Répertoire parent du répertoire parent : . ./. ./
Pour « remonter » dans les dossiers : ../
Pour « descendre » dans les dossiers : ./
Dans le même dossier : ./
6. FORMULAIRE
Objectifs des formulaires :
La création d’un formulaire se fait via la balise < 𝑓𝑜𝑟𝑚 >
Les formulaires sont utilisés pour récolter des informations des utilisateurs
Deux problèmes :
Comment envoyer les données au serveur ?
Comment le serveur traite-t-il les données reçues ?
7
PROGRAMMATION
Comment faire transiter les données ?
2 méthodes :
GET
o envoie les données via l'adresse de la page
o limité à 255 caractères
POST
o envoie les données via la requête HTTP
o permet de faire transiter un plus gros nombre de caractères
Définit avec l’attribut 𝑚𝑒𝑡ℎ𝑜𝑑 de la balise "𝑓𝑜𝑟𝑚"
𝑚𝑒𝑡ℎ𝑜𝑑 = "𝑔𝑒𝑡"
𝑚𝑒𝑡ℎ𝑜𝑑 = "𝑝𝑜𝑠𝑡"
Comment traiter les données ?
Il faut envoyer la requête contenant les données du formulaire (via GET ou POST) à un script qui
pourra les traiter (ex : page contenant du PHP)
Définit avec l’attribut 𝑎𝑐𝑡𝑖𝑜𝑛
La balise < 𝑖𝑛𝑝𝑢𝑡 >
L’élément le plus populaire d’un formulaire est la balise < 𝑖𝑛𝑝𝑢𝑡 >
Est utilisé pour recueillir l’information de l’utilisateur
Peut être utilisé de plusieurs manières ≠ en fonction de la valeur de son attribut 𝑡𝑦𝑝𝑒
Quelques attributs : height/width, min/max, maxlength, mutliple, placeholder, required, value,…
Champs de texte
Mot de passe
Bouton radio
Checkbox
8
PROGRAMMATION
La balise < 𝑠𝑒𝑙𝑒𝑐𝑡 >
La balise < 𝑡𝑒𝑥𝑡𝑎𝑟𝑒𝑎 >
Zone de texte
La balise < 𝑙𝑎𝑏𝑒𝑙 >
Soumettre un formulaire
Une fois rempli, le formulaire doit être soumis (càd les données envoyées) au serveur
Bouton de type “submit”
o Codage moderne
Bouton de type “button”
o Ne soumet pas automatiquement le formulaire
o Nécessite une programmation en JavaScript
o N’est pas utilisé dans ce cours
7. NOUVEAUX TYPES D’INPUT HTML5
Color
Date/time
Email
Month
Number
Range
Search
Tel (utile pour mobile (clavier adapté))
Url
9
PROGRAMMATION
CSS
1. INTRODUCTION
Le CSS permet de définir la mise en forme des pages web :
CSS est l’acronyme de Cascading Style Sheets
L’utilisation de feuille de style externe permet d’épargner le développeur web d’un laborieux
travail de mise en page puisque la mise en forme de toutes les pages web peut être modifiée
de manière centralisée.
2. INSÉRER DU CSS
Il existe 3 méthodes pour insérer du CSS :
Dans un fichier . 𝑐𝑠𝑠
Dans la balise < ℎ𝑒𝑎𝑑 >
Dans chacune des balises avec l’attribut 𝑠𝑡𝑦𝑙𝑒
3. LES COULEURS EN HEXADÉCIMAL
Le système décimal est un système de numération en base 10
{0, 1, 2, 3, 4, 5, 6, 7, 8, 9}
Le système hexadécimal est un système de numération en base 16
{0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F}
Exemple :
10 = (1x16) + (0x1) = 16 E3 = (14x16) + (3x1) = 227
CC = (12x16) + (12x1) = 204 C4B = (12x162) + (4x16) + (11x1) = 3147
10
PROGRAMMATION
Augmenter la valeur d’une couleur, augmente son intensité.
vert
#𝟎𝟎𝑭𝑭𝟎𝟎
rouge bleu
Couleurs standards :
Blanc (#FFFFFF)
Noir (#000000)
Rouge (#FF0000)
Vert (#00FF00)
Bleu (0000FF)
4. STRUCTURE DU CSS
Structure générale
Exemple :
Les sélecteurs
Le sélecteur de type permet de cibler les éléments d’une page web.
HTML : CSS :
Le sélecteur d’ID permet de cibler un élément par son identifiant. Dans le document HTML, 2
éléments ne peuvent pas avoir le même ID.
HTML : CSS :
Les sélecteurs de classes peuvent cibler plusieurs éléments d’une même classe.
HTML : CSS :
Plusieurs classes peuvent être associées à un élément :
HTML : CSS :
11
PROGRAMMATION
Le sélecteur descendant permet de cibler des éléments (𝑎) encastrés (directement ou non)
dans d’autres éléments (𝑢𝑙).
HTML : CSS :
Le sélecteur de pseudo-éléments permet de cibler des éléments qui satisfont certaines
propriétés.
HTML : CSS :
Les propriétés
Background
12
PROGRAMMATION
Text
Font
List
Border
Dimensions
CSS3
13
PROGRAMMATION
5. POSITIONNEMENT
Overflow
Permet de définir le comportement à adopter lorsque le contenu dépasse l’espace disponible.
Display
Un élément "block" occupe toute la largeur disponible
Retour à la ligne avant et après l'élément
On peut spécifier une dimension déterminée (ex : <h1> <div>)
Un élément "inline" n'occupe que la largeur nécessaire
Peut être encastré dans un autre élément (c’est-à-dire ne force pas de retour à la ligne)
On ne peut pas déterminer une dimension particulière (ex : <a> <span>)
L'élément est placé comme un élément inline
On peut déterminer une dimension spécifique
N’affiche pas l’élément
La page se comporte comme si l'élément n'était pas présent
Il y a beaucoup d'autre possibilité d'afficher un élément
14
PROGRAMMATION
Position
Permet de positionner un élément. 4 méthodes de positionnement différentes :
Positionnement par défaut
Positionné suivant le flux normal de la page
Positionnement par rapport à la fenêtre du navigateur
Propriétés (left, right, top, bottom) utilisées pour spécifier l'emplacement par rapport à la
fenêtre du navigateur
Éléments retirés du flux normal de la page
Éléments superposables à d'autres
Positionnement par rapport à sa position normale
Déplaçable (left, right, bottom, top)
Superposables à d'autres éléments, mais espace d'origine préservé
Souvent utilisé comme container pour des éléments positionné de manière absolue
Positionnement relativement au premier parent non statique ou sinon, à l'élément <html>
Retiré du flux normal de la page
Afin de définir l'ordre de chevauchement (quel élément se trouve au-dessus d'un autre), on
peut utiliser la propriété z-index.
Au plus la valeur est élevée, au plus l'élément se trouve au-dessus
Visibility
Affiche l'élément - comportement par défaut
N’affiche pas l'élément
L'emplacement réservé à ce dernier est toujours présent même s'il est caché
Balises <div> et <span>
Définit une division dans un document HTML
Pour grouper des éléments de type "block"
Pour les formater avec CSS
Pour grouper des éléments de type "inline"
Pour les formater avec CSS
Centrer un élément
15
PROGRAMMATION
JAVASCRIPT
1. INTRODUCTION
Compatibilité entre navigateurs : les différences sont de moins en moins importantes
Langage exécuté coté client : presque plus aucun internaute ne bloque l’exécution du JS
2. EMPLACEMENT DU CODE
Dans une page HTML :
Dans un fichier externe :
Dans un attribut évènement ( ! à éviter) :
Remarque: le code JS est exécuté par le navigateur de manière séquentielle à la lecture de la page
web. Attention à l'emplacement du code !
Exercice :
16
PROGRAMMATION
3. VARIABLES ET TYPAGES
JavaScript est un langage à typage dynamique
Le type d'une variable est défini au run-time et peut être changé en cours d'exécution
(comme PHP)
Nom des variables :
Commence par une lettre, un « _ » ou un « $ »
Les caractères suivants sont des alphanumériques, underscores ou dollars
Opérateurs d'affectation =
Opérateurs de calcul +-*/%
Opérateurs de comparaison >, <, >=, <=
4. STRUCTURES DE CONTRÔLE
17
PROGRAMMATION
5. DOCUMENT OBJECT MODEL
L’API du DOM permet d’accéder à une page Web et de manipuler son contenu, sa structure ainsi que
ses styles. DOM présente un document sous la forme d'un arbre de nœuds.
Exemple :
Objets du DOM
DOM Document DOM Element DOM Attr DOM Node
DOM Document
L'objet Document est l'élément racine d'un document (ex. page web, document XML).
Il hérite des méthodes et propriétés de l'objet Nœud.
Retourne l'élément ayant l'attribut id spécifié
Retourne une collection d'éléments ayant le nom spécifié
Retourne l'élément répondant au sélecteur spécifié
Retourne une collection d'éléments répondant au sélecteur CSS
Retourne l’élément créé
18
PROGRAMMATION
DOM Element
DOM – Changing HTML
InnerHTML = cet attribut permet d'accéder ou de remplacer complètement le contenu d’un élément
par celui spécifié dans une chaîne de caractères.
Exemple :
DOM Node
Représente un nœud dans un document HTML. Il existe 12 types de nœuds HTML, dont:
Element
Attr
Text
Comment
…
DOM NodeList
Propriété : length = retourne le nombre de nœuds dans une collection
Exemple :
19
