HTML Css Handout

Introduction - Généralités HTML CSS
Plan
1 Introduction - Généralités
Programmation Web Navigateurs Web
HTML & CSS
Jean-Christophe Deneuville
2 HTML
jean-christophe.deneuville@xlim.fr
3 CSS
Introduction - Généralités HTML CSS Introduction - Généralités HTML CSS
Plan du cours Navigateurs

Il existe une multitude de navigateurs web.
2 HTML
3 CSS
Navigateurs Navigateurs
Il existe une multitude de navigateurs web, même en ligne de
commande !
Mais qu’est réellement un navigateur ?
Navigateurs Navigateurs
Certains même permettent de surfer “anonymement”.

Navigateur
Un navigateur web est un logiciel (couche applicative)
permettant de consulter le World Wide Web. Il s’agit donc a
minima d’un client HTTP.
Navigateurs HTML & CSS
Hypertext Markup Language & Cascading Style Sheets

Navigateur Le HTML et le CSS sont donc 2 langages qui, ensemble,
Un navigateur web est un logiciel (couche applicative) permettent de créer des sites web.
permettant de consulter le World Wide Web. Il s’agit donc a Tous les sites web sont basés sur ces langages !
minima d’un client HTTP.
Il s’agit donc d’un logiciel permettant d’interpréter le code
source de la page, composé principalement d’HTML, et de
CSS.
Plan HTML & CSS
Hypertext Markup Language & Cascading Style Sheets

Navigateurs Web Le HTML et le CSS sont donc 2 langages qui, ensemble,
HTML & CSS permettent de créer des sites web.
Tous les sites web sont basés sur ces langages !
2 HTML
3 CSS HTML
Gérer et organiser le
contenu.
HTML & CSS Historique (non exhaustif)
1991 : Début du HTML par Tim Berners-Lee

1994 : Création du W3C
Hypertext Markup Language & Cascading Style Sheets 1994-1995 : Début du CSS
1995 : v2.0 + draft v3.0 (tables, figures, ...)
Le HTML et le CSS sont donc 2 langages qui, ensemble, fin 1996 : standardisation CSS1 (relativement basique)
permettent de créer des sites web. début 1997 : v3.2 (standardisation)
Tous les sites web sont basés sur ces langages ! fin 1997 : v4.0 (support style + scripts, cadres, ...)
1998 : CSS2 (fonctionnalités étendues)
2000 : XHTML (basé sur XML → moins souple)
HTML CSS 2001 : CSS2.1 (correction de la v2, prématurée)
Gérer et organiser le Gérer l’apparence de la 2004 : WHATWG (relance de l’HTML)
contenu. page web. 2007 : Débuts d’HTML5, aboutissement CSS3
(modularité)
fin 2009 : abandon d’XHTML2
(source : Wikipédia)
Historique (non exhaustif) Historique (non exhaustif)
1991 : Début du HTML par Tim Berners-Lee 1991 : Début du HTML par Tim Berners-Lee
1994 : Création du W3C 1994 : Création du W3C
1994-1995 : Début du CSS 1994-1995 : Début du CSS
1995 : v2.0 + draft v3.0 (tables, figures, ...) 1995 : v2.0 + draft v3.0 (tables, figures, ...)
fin 1996 : standardisation CSS1 (relativement basique) fin 1996 : standardisation CSS1 (relativement basique)
début 1997 : v3.2 (standardisation) début 1997 : v3.2 (standardisation)
fin 1997 : v4.0 (support style + scripts, cadres, ...) fin 1997 : v4.0 (support style + scripts, cadres, ...)
1998 : CSS2 (fonctionnalités étendues) 1998 : CSS2 (fonctionnalités étendues)
2000 : XHTML (basé sur XML → moins souple) 2000 : XHTML (basé sur XML → moins souple)
2001 : CSS2.1 (correction de la v2, prématurée) 2001 : CSS2.1 (correction de la v2, prématurée)
2004 : WHATWG (relance de l’HTML) 2004 : WHATWG (relance de l’HTML)
2007 : Débuts d’HTML5, aboutissement CSS3 2007 : Débuts d’HTML5, aboutissement CSS3
(modularité) (modularité)
fin 2009 : abandon d’XHTML2 fin 2009 : abandon d’XHTML2
(source : Wikipédia) (source : Wikipédia)
Historique (non exhaustif) Plan

1994 : Création du W3C
1994-1995 : Début du CSS 1 Introduction - Généralités
1995 : v2.0 + draft v3.0 (tables, figures, ...)
fin 1996 : standardisation CSS1 (relativement basique) 2 HTML
début 1997 : v3.2 (standardisation) Présentation
fin 1997 : v4.0 (support style + scripts, cadres, ...) Syntaxe
1998 : CSS2 (fonctionnalités étendues) Formulaires
2000 : XHTML (basé sur XML → moins souple) Les entêtes
2001 : CSS2.1 (correction de la v2, prématurée) Frames et XHTML
2004 : WHATWG (relance de l’HTML)
2007 : Débuts d’HTML5, aboutissement CSS3 3 CSS
(modularité)
Historique (non exhaustif) Présentation

1994 : Création du W3C Il s’agit d’un langage de marquage/balisage. On spécifie donc
1994-1995 : Début du CSS “Ceci est mon titre, ceci est mon menu, voici le texte principal
1995 : v2.0 + draft v3.0 (tables, figures, ...) de la page, voici une image à afficher, etc...”
fin 1996 : standardisation CSS1 (relativement basique)
début 1997 : v3.2 (standardisation)
fin 1997 : v4.0 (support style + scripts, cadres, ...)
1998 : CSS2 (fonctionnalités étendues)
2000 : XHTML (basé sur XML → moins souple)
2001 : CSS2.1 (correction de la v2, prématurée)
2004 : WHATWG (relance de l’HTML)
2007 : Débuts d’HTML5, aboutissement CSS3
(modularité)
Présentation Encodage (1/2)
Il s’agit d’un langage de marquage/balisage. On spécifie donc Un document HTML est de type text (au sens MIME).
“Ceci est mon titre, ceci est mon menu, voici le texte principal Cependant, le standard HTML 4.01 est Unicode.
de la page, voici une image à afficher, etc...”
Editeurs de pages Web

Mozilla Composer
Microsoft Expression Web
Dreamweaver ... Qualité du code généré médiocre
Présentation Encodage (1/2)
Il s’agit d’un langage de marquage/balisage. On spécifie donc Un document HTML est de type text (au sens MIME).
“Ceci est mon titre, ceci est mon menu, voici le texte principal Cependant, le standard HTML 4.01 est Unicode.
de la page, voici une image à afficher, etc...” HTML définit donc des “entités de caractères” afin de gérer
les différents accents.
Editeurs de pages Web
Mozilla Composer
Microsoft Expression Web
Dreamweaver ... Qualité du code généré médiocre
Je vous conseille donc d’utiliser votre éditeur de texte préféré

pour la création de pages Web (surtout s’il s’agit de Sublime
Text !)
Encodage (1/2) Encodage (2/2)
Un document HTML est de type text (au sens MIME).

Cependant, le standard HTML 4.01 est Unicode.
HTML définit donc des “entités de caractères” afin de gérer
les différents accents.
Lettre initiale Modificateur

a A acute accent aigu
e E grave accent grave
& i I circ accent circonflexe ;
o O uml accent trema
c C cedil cédille
Encodage (1/2) Plan
Un document HTML est de type text (au sens MIME).

Cependant, le standard HTML 4.01 est Unicode. 1 Introduction - Généralités
HTML définit donc des “entités de caractères” afin de gérer
les différents accents. 2 HTML
Présentation
Lettre initiale Modificateur
Syntaxe
a A acute accent aigu
Formulaires
e E grave accent grave
Les entêtes
& i I circ accent circonflexe ;
Frames et XHTML
o O uml accent trema
c C cedil cédille
3 CSS
Exemple : Réseaux −→ Réseau
Squelette HTML Squelette HTML

<html> <html>
<head>
Balise <html> Balise <html>

Délimite le document Délimite le document .
.
.
HTML HTML
Balise <head>
</head>
Définit les méta-données
associées au document <body>
HTML
Balise <body> .
.
Contient le corps de la .
page HTML
</body>
</html> </html>
Squelette HTML Syntaxe

<html>
<head>
Il est possible d’insérer des commentaires dans une page
Balise <html>
HTML :
Délimite le document .
.
.
HTML
Balise <head>
</head>
Définit les méta-données
associées au document
HTML
</html>
Syntaxe Syntaxe
Il est possible d’insérer des commentaires dans une page Il est possible d’insérer des commentaires dans une page
HTML : HTML :
Simple :  Simple : 
Multilignes :

Syntaxe
Il est possible d’insérer des commentaires dans une page

HTML :
Simple : 
Multilignes :

Hyperlien
Hyperlien
Liens locaux
Plan
2 HTML
Présentation
Syntaxe
Formulaires
Les entêtes
Frames et XHTML
3 CSS
FORMULAIRE
Plan
2 HTML
Présentation
Syntaxe
Formulaires
Les entêtes
Frames et XHTML
3 CSS
damien
Plan
2 HTML
Présentation
Syntaxe
Formulaires
Les entêtes
Frames et XHTML
3 CSS
Plan Plan
1 Introduction - Généralités 1 Introduction - Généralités
2 HTML 2 HTML
3 CSS 3 CSS
Bon croquis > long discours Bon croquis > long discours
Exemple introductif Exemple introductif
Classes et Identificateurs Classes et Identificateurs
Div et Span Div et Span
Attributs et Valeurs Attributs et Valeurs
Notre exemple Propriétés
● Supposons que nous désirions qu'un titre de
taille 1 ait une couleur bleue.
● Il y a trois façons d'obtenir cet effet avec le
CSS.
Solution 1 : Utilisation de l'attribut de Solution 2 : Feuille de style intégrée

style à la page HTML
Solution 3 : Les feuilles de style
Solution 2
externes
Remarques Solution 3
Remarques Classes
Plan Illustration classe 1/2
2 HTML
3 CSS
Bon croquis > long discours
Exemple introductif
Classes et Identificateurs
Div et Span
Attributs et Valeurs
Illustration classe 2/2 Plan
2 HTML
3 CSS
Exemple introductif
Div et Span
Identificateur L'élément Div

L'élément Div (suite) Plan
2 HTML
3 CSS
Exemple introductif
Div et Span
L'élément span L'attribut media

Quelques propriétés et valeurs
Quelques propriétés et valeurs

Les liens hypertextes

HTML Css Handout

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML Css Handout

Transféré par

Droits d'auteur :

Formats disponibles

Introduction - Généralités HTML CSS

Introduction - Généralités HTML CSS Introduction - Généralités HTML CSS

Plan du cours Navigateurs

Introduction - Généralités HTML CSS Introduction - Généralités HTML CSS

Mais qu’est réellement un navigateur ?

Navigateurs HTML & CSS

Hypertext Markup Language & Cascading Style Sheets

Introduction - Généralités HTML CSS Introduction - Généralités HTML CSS

Plan HTML & CSS

Hypertext Markup Language & Cascading Style Sheets

HTML & CSS Historique (non exhaustif)

1991 : Début du HTML par Tim Berners-Lee

Introduction - Généralités HTML CSS Introduction - Généralités HTML CSS

Historique (non exhaustif) Historique (non exhaustif)

Historique (non exhaustif) Historique (non exhaustif)

Introduction - Généralités HTML CSS Introduction - Généralités HTML CSS

Historique (non exhaustif) Historique (non exhaustif)

Historique (non exhaustif) Historique (non exhaustif)

Introduction - Généralités HTML CSS Introduction - Généralités HTML CSS

Historique (non exhaustif) Historique (non exhaustif)

Historique (non exhaustif) Plan

Introduction - Généralités HTML CSS Introduction - Généralités HTML CSS

Historique (non exhaustif) Présentation

Présentation Encodage (1/2)

Editeurs de pages Web

Introduction - Généralités HTML CSS Introduction - Généralités HTML CSS

Présentation Encodage (1/2)

Je vous conseille donc d’utiliser votre éditeur de texte préféré

Encodage (1/2) Encodage (2/2)

Un document HTML est de type text (au sens MIME).

Lettre initiale Modificateur

Introduction - Généralités HTML CSS Introduction - Généralités HTML CSS

Encodage (1/2) Plan

Un document HTML est de type text (au sens MIME).

Squelette HTML Squelette HTML

Balise <html> Balise <html>

Introduction - Généralités HTML CSS Introduction - Généralités HTML CSS

Squelette HTML Syntaxe

Introduction - Généralités HTML CSS

Il est possible d’insérer des commentaires dans une page

1 Introduction - Généralités 1 Introduction - Généralités

Solution 1 : Utilisation de l'attribut de Solution 2 : Feuille de style intégrée

Introduction - Généralités HTML CSS

Plan Illustration classe 1/2

Illustration classe 2/2 Plan

Identificateur L'élément Div

L'élément Div (suite) Plan

L'élément span L'attribut media

Quelques propriétés et valeurs

Vous aimerez peut-être aussi