Programmation
web
(HTML & CSS)
Présentation :
◇ Nom et prénom
◇ Spécialisation
◇ Pourquoi avez-vous besoin de l’Informatique ?
◇ Connaissance en informatique
2
Les technologies
Utilisées
Visual Studio Code Navigateur Web
est un éditeur de code extensible développé par est un logiciel d'application permettant d'explorer
Microsoft pour Windows, Linux et macOS. www (World Wide Web). Il fournit une interface
entre le serveur et le client et demande au serveur
des documents et des services Web.
3
Définir
◇ Web
◇ Internet
◇ Back end
◇ Data
◇ Front end
◇ Framework
◇ CMS
◇ Big Data
◇ Intelligence
Artificiel
◇ Cloud Computing
4
Les technologies Web
World Wide Web (WWW) Navigateur Web
est basé sur plusieurs technologies différentes : est un logiciel d'application permettant d'explorer
les navigateurs Web, le langage de balisage www (World Wide Web). Il fournit une interface
hypertexte (HTML) et le protocole de transfert entre le serveur et le client et demande au serveur
hypertexte (HTTP). des documents et des services Web.
Serveur Web Navigateur Web
est un programme qui traite les demandes réseau est un document numérique lié au World Wide
des utilisateurs et leur fournit des fichiers qui Web et visible par toute personne connectée à
créent des pages Web. Cet échange s'effectue à Internet disposant d'un navigateur Web.
l'aide du protocole de transfert hypertexte (HTTP).
5
Le développement Web
peut être classé de
deux manières :
6
1 Développement frontal
8
2 Développement Backend
10
Langages
frontaux
◇ HTML
◇ CSS
◇ JAVASCRIPT
11
Langages Back
◇ PHP
◇ Python
◇ Java …
12
HTML
HyperText Markup Language
Signifie langage de balisage hypertexte.
Créé en 1991
Fonction : donner du sens et structurer les
contenus
13
css
Cascading Style Sheets
Signifie feuilles de style en cascade.
Créé en 1996
Fonction : mettre en forme le contenu en
ajoutant des styles
14
Javascript
est utilisé pour améliorer la
fonctionnalité d'un site Web afin
d'exécuter des jeux sympas et des
logiciels Web
15
Version 5
◇ Insérer des vidéos
◇ Bordures arrondies
◇ Formulaires
◇ …
16
Fondation du
HTML
Elément Balise Attribut
Définissent des objets dans notre Constitue d’une paire de balises Propriétés utilisées pour
page Balise ouvrante : <p> donner des indications
o Paragraphe : p supplémentaires aux élément
Balise fermante : </p>
o Titres : h1, h2, …, h6 NB: Indiquer la cible d’un lien
Exception : balises orphelines : <br
o Lien : a />
17
HTML génère un
arbre
◇ Un arbre contient une racine, des
parents, des frères, des enfants
◇ comme un arbre généalogique
18
Structure d’une page
HTML
19
<!DOCTYPE html>
◇ Permet de dire au navigateur ◇ Au début du document
comment lire le HTML, et de ◇ Doit correspondre à la version
construire l’arbre associé. HTML utilisée
◇ Plusieurs versions de HTML ◇ Des validateurs existent pour
différentes, le doctype permet de vérifier que le HTML est correct et
les différentier (c.f. DTD avec XML) correspond au doctype déclaré
◇ Aujourd’hui, si vous utilisez HTML5
: <!DOCTYPE html>
20
Commentaires
◇ Commentaires n’importe où : <!-- ... -->
21
Contenu de <head>
◇ Titre du document
<title></title>
◇ Styles
◇ <style /> : inclure une feuille de style CSS dans la page
◇ <link /> lier le document à une ressource externe (typiquement, feuille de style)
◇ Scripts
◇ <script /> ajouter un script à la
page
22
Le contenu de <body>
Deux grandes classes d’éléments :
◇ Block
◇ Prennent toute la largeur disponible
◇ Provoque un retour à la ligne
◇ Peuvent contenir des éléments inline
◇ Inline
◇ Ne provoque pas de retour à la ligne
◇ Ne peuvent pas contenir des éléments block
◇ Peuvent contenir des éléments inline
23
Feuille de Style
CSS :
Principe
:
Décoration de l’arbre des éléments HTML
Associer un certain nombre d’attributs de style à un
élément
24
‣ Une feuille de style est composée d'un certain nombre de règles
(rules)
‣ Une règle se compose :
‣ d’un sélecteur
‣ d'une déclaration
‣ Une déclaration se compose d’un ensemble de propriétés/valeurs
‣ Remarque
‣ L’ordre des règles est indifférent
‣ Tous les styles ne peuvent pas s’appliquer à tous les
éléments
25 ‣ Ex. : une image n’a pas de style de police
Structure des
règles
26
Exempl
e
body {
background: #FFFFFF;
color: black; /* commentaire */
margin-left: 5%;
margin-right: 5%;
font-family: Tahoma, Optima,
Arial, sans-serif;
}
27
Styles
intégrés
Déclarés comme attribut style d’un élément
Exemple
<h1 style="font-family: Arial; font-style: italic;”>
Un texte qui se retrouvera en arial italique
<h1>
Exempl
e
<html>
<head>
<title>Texte du titre</title>
<style type="text/css">
.important {color: red;}
h1 {font-family: Arial; font-style:
italic; }
em { color: green }
</style>
</head>
<body>… </body>
28
</html>
Feuilles de styles liées
Les règles se trouvent dans un fichier extérieur
On indique au navigateur où ce trouve cette ressource de
style, en utilisant un élément link dans l’en-tête <head>
<link rel="stylesheet" type="text/css"
href="[Link]" >
29
Types de
sélecteur
‣ Simples et groupes
‣ Classes
‣ Pseudo-classes
‣ Pseudo-éléments
‣ Contextuels
30
Sélecteurs CSS : simples et groupes
Simple
‣ Lié à un type d’élément HTML
‣ Utilisation de son nom
‣ Exemple : h1 { text-align: center; }
Groupe
‣ Regroupement de règles qui s’appliquent à
plusieurs éléments
‣ Exemple : h2, p { font-family: Optima, Arial,
sans-serif; }
31
Sélecteurs CSS : classes
‣ On peut assigner une classe à un élément HTML
<h1 class="centre" >
‣ Celle-ci spécifie un sélecteur particulier dans le feuille de style
[Link] { text-align: center; }
‣ Une classe peut s’appliquer à de multiples éléments
.centre { text-align: center; }
‣ s’appliquera aussi à <h2 class="centre">, etc.
32
Sélecteur CSS : pseudo-classes
Sélecteurs qui sélectionnent des éléments en fonction de leur état à un moment
donné
Exemple et intérêt
‣ a:linkprincipal
— lien non visité et inactif
‣ a:hover — lien sur lequel passe le pointeur
de la souris
‣ a:active — lien sur lequel on clique
‣ a:visited — lien déjà visité
Exempl
e ‣a:link {color: blue;}
‣a:visited {color: magenta;}
‣a:hover { color: red; text-decoration:none;
font-weight: bold;}
‣a:active {color: red;}
33
Sélecteurs CSS : pseudo-
éléments
:first-letter
‣ première lettre dans un élément bloc (ex. p, h1,
…)
:first-line
‣ première ligne dans un élément bloc (ex. p, h1,
...)
:after
:before
34
Sélecteurs CSS :
contextuels
Exemple de style
contextuel :
CSS :
h1 em { color: red; }
!
HTML :
<h1>Ceci est un texte de header
<em>ce texte est mis en évidence</em>
celui-ci ne l'est pas.</h1>
<p>Dans ce paragraphe,
<em>ceci est mis en évidence</em>
</p>
35
Propriétés de
texte
‣ font-size: small | medium...| % | x pt
‣ font-family: fontname1, fontname2 (si la première n’est
pas disponible),
familyname (serif, sans-serif, etc.)
‣ font-weight: bold | lighter
‣ font-style: italic, oblique
‣ text-align: left | center | right | justify
‣ text-indent: (retrait de première ligne) % | 2 px
36
Les couleurs
color:
‣ red | blue...| hexcode
background-color:
‣ red | blue...| hexcode
37
