Web 1.
1
Introduction HTML-CSS
1
Comment consulter une page
web ?
> Principe de client / serveur
> Machines clients : consultent les ressources
› Emettent des requêtes pour consulter des contenus
> Machines serveurs : mettent les ressources à disposition
› Attendent les requêtes
› Renvoient l’information aussi vite que possible
2
Comment c’est fait ?
> Utilisation de langages spécifiques
Visualiser le code source
3
Langages de base du web
> Langage HTML
> HyperText Markup Langage
> Langage de description du contenu d’une page web
> HTML 5
> Langage CSS
> Cascading Style Sheet
> Langage de description de la mise en forme de la page web
> CSS3
Deux langages
> Fichier .html
> Contenu logique et sémantique de la page HTML
> Exemple
› Titre « Mes recettes de cuisine »,
› Texte « Bienvenue sur mon site »
> Fichier .css
> Mise en forme à appliquer aux éléments html
> Exemple
› Les titres sont en gras et en rouge CSS
› Les sous-titres en italique et en vert
5
Application d’un fichier CSS
> Chaque page HTML doit inclure la/les pages de style
qui la concerne
> Intérêt : réutilisabilité, homogénéité
HTML
Mes recettes de cuisine
HTML CSS
Gateau au chocolat Titre en rouge, menus blanc
sur fond violet
HTML
Quiche Lorraine
6
PLAN
> Premiers pas
> En HTML
> En CSS
7
HTML : un langage de balises
<html>
<head>
<meta charset="UTF-8"/>
<title>Promenade</title>
</head>
<body>
<h1> Promenades en pays Rennais </h1>
<p> Le pays Rennais est particulièrement riche
en promenades</p>
</body>
</html>
8
Balise
> Permet de délimiter une zone (titre, paragraphe,
image, lien…) entre deux balises
> Balise ouvrante <nom>
> Balise fermante </nom>
> Exemple : délimitation d’un titre de niveau 1
> <h1> Le titre de ma page </h1>
9
Imbrication des balises
> Respecter l’ordre d’imbrication
> Ce qu’on peut faire
<h1> <a> </a> </h1>
<body><a></a> <a> </a> </body>
> Ce qu’on ne peut pas faire
<h1> <a> </h1> </a>
<body><a></ body > <a> </a> </a>
10
Balises seules
> Quelques balises sont à la fois ouvrantes et fermantes
> De la forme
> <nom/>
> Exemple
> <img/> (image)
11
Paramètres des balises
> Attribut
> Préciser le comportement d’un environnement
> Définition de la valeur d’une variable dans le corps de la balise
> attr="valeur"
<a href="[Link] ceci est un lien </a>
12
Structuration de la page
html
<!DOCTYPE html> • <!DOCTYPE html>
<html>
– Indique le type du document
(HTML 5)
<head> • <html>
<meta charset="UTF-8"/>
– Tout le contenu de la page
<title>Le titre du document</title> web
</head> • <head>
– L’entête de la page web
<body>
…
• <title>
</body>
– Le titre de la page
• <meta>
</html> – L’encodage des caractères
• <body>
– Le contenu du corps de la
page
13
Titres
> Balises
> <h1> Mon titre de niveau 1</h1>
> <h2> Mon titre de niveau 2 </h2>
> …
> <h6> Mon titre de niveau 6 </h6>
> Contenu
> Titres de niveaux 1 à 6
> Hiérarchie logique du document
14
Paragraphes
> Balise
> <p> Le texte du paragraphe </p>
> Contenu
> Texte
> Images
> Objets de formulaires
15
Exemple complet
16
17
/
18
/
19
PLAN
> Premiers pas
> En HTML
> En CSS
20
Principe de CSS
> Associer un style à des catégories d’éléments
> Définir le type d’objet concerné
› Ex : titre de niveau 1
> Définir les propriétés à appliquer
› Ex : police Arial, couleur bleue, taille 12
> Syntaxe
selecteur {
propriété1:valeur1;
propriété2:valeur2;
…
}
21
Lien d’une page html avec
une feuille de style
> Lien entre le fichier .html et la css
> Pour tous les fichiers html incluant la css
> Dans l’entête <head>
> Indiquer l’url (chemin) du fichier CSS
<link rel="stylesheet" href="[Link]" />
22
Couleurs
> Couleur des textes
> Propriété : color
> Valeur : valeur de la couleur
h1{
color:yellow;
}
> Couleur d’arrière plan
> Propriété : background-color
> Valeur : valeur de la couleur
h1{
background-color:pink;
}
23
Expression de la couleur
> Noms prédéfinis
h1{
color:DarkOrange;
}
> Code RGB
h1{
color:rgb(255,140,0);
}
> Code hexadécimal
h1{
color:#FF8C00;
}
[Link]
24
Alignement horizontal
> Propriété
> text-align
> Valeurs
> left, right, center, justify
> Exemple
p{
text-align:justify;
}
25
/
26
27
28
29