Les Langages HTML et CSS. Anselmet Html 27 août / 16

(1)

Les Langages HTML et CSS

(2)

1 Introduction au codage HTML

2 une premi `ere page Web

3 une seconde page Web

4 Feuilles de style : le langage CSS

(3)

Lien entre le Web et le langage HTML

Le World Wide Web (WWW), litt éralement la^≪toile (d araign ée) mondiale^≫, commun ément appel é le web, le Web, et parfois la toile, est un syst ème hypertexte public fonctionnant sur internet qui permet de consulter, avec un navigateur, des pages accessibles sur des sites.

Le langage HTML est particuli èrement adapt é à la consultation de ce type de page produite sur le Web.

(source :wikipedia )

(4)

Qu’est-ce que le langage HTML ?

(5)

Qu’est-ce que le langage HTML ?

Le langage HTML(HyperText Mark-Up Language) est un langage dit de marquage (de structuration ou de balisage) dont le r ˆole est de formaliser l’ ´ecriture d’un document avec des balises de formatage.

(6)

Qu’est-ce que le langage HTML ?

Les balises permettent d’indiquer la façon dont doit être pr ésent é le document et les liens qu’il établit avec d’autres documents.

(7)

Qu’est-ce que le langage HTML ?

exemple de code HTML :

(8)

Qu’est-ce que le langage HTML ?

Ceci est<i>un exemple</i> <b>simple</b>

(9)

Qu’est-ce que le langage HTML ?

S’affichera dans le navigateur :

(10)

Qu’est-ce que le langage HTML ?

S’affichera dans le navigateur : Ceci est un exemple simple

(11)

exemple de balises HTML

(12)

exemple de balises HTML

La page affich ´ee est une balise de type div

(13)

exemple de balises HTML

La page affich ´ee est une balise de type div code html :<div>. . . </div>

(14)

exemple de balises HTML

Le titre affich ´e est une balise de type title

(15)

exemple de balises HTML

Le titre affich ´e est une balise de type title code html :<title>. . . </title>

(16)

exemple de balises HTML

Le paragraphe est encadr ´e par<p>. . . </p>et le retour `a la ligne est<br>

(17)

exemple de balises HTML

La mise en forme du texte (balise<h1>), les liens hypertexte (balise<a>), les images (balise<img>), etc. seront cod és de la m ême mani ère

(18)

exemple de balises HTML

La mise en forme du texte (balise<h1>), les liens hypertexte (balise<a>), les images (balise<img>), etc. seront cod és de la m ême mani ère

code html :<...>. . . </ ...>

(19)

En r ´esum ´e

Une balise est donc :

(20)

En r ´esum ´e

entour ´ee des caract `eres<et>

(21)

En r ´esum ´e

constitu ´ee de deux parties :

(22)

En r ´esum ´e

une ouvrante qui transforme ce qui suit

(23)

En r ´esum ´e

une ouvrante qui transforme ce qui suit une fermante qui remet la forme comme avant

(24)

(25)

Une page HTML se construit toujours selon le

mod `ele :

(26)

Une page HTML se construit toujours selon le mod `ele :

<html>

(27)

Une page HTML se construit toujours selon le mod `ele :

<html>

<head>

(28)

Une page HTML se construit toujours selon le mod `ele :

<html>

<head>

<title>Titre de la page</title>

(29)

Une page HTML se construit toujours selon le mod `ele :

<html>

<head>

</head>

(30)

Une page HTML se construit toujours selon le mod `ele :

<html>

<head>

</head>

<body>

(31)

Une page HTML se construit toujours selon le mod `ele :

<html>

<head>

</head>

<body>

contenu de la page

(32)

Une page HTML se construit toujours selon le mod `ele :

<html>

<head>

</head>

<body>

contenu de la page

</body>

(33)

Une page HTML se construit toujours selon le mod `ele :

<html>

<head>

</head>

<body>

contenu de la page

</body>

</html>

(34)

(35)

De nombreux standards existent ; il est donc

n écessaire de d éclarer au d ébut de chaque document

le standard utilis ´e comme suit :

(36)

De nombreux standards existent ; il est donc

n écessaire de d éclarer au d ébut de chaque document le standard utilis é comme suit :

<!DOCTYPE HTML PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN”

http ://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

(37)

De nombreux standards existent ; il est donc

n écessaire de d éclarer au d ébut de chaque document le standard utilis é comme suit :

<html>

(38)

De nombreux standards existent ; il est donc

n écessaire de d éclarer au d ébut de chaque document le standard utilis é comme suit :

<html>

<head>

(39)

De nombreux standards existent ; il est donc

n écessaire de d éclarer au d ébut de chaque document le standard utilis é comme suit :

<html>

<head>

(40)

De nombreux standards existent ; il est donc

n écessaire de d éclarer au d ébut de chaque document le standard utilis é comme suit :

<html>

<head>

</head>

(41)

De nombreux standards existent ; il est donc

n écessaire de d éclarer au d ébut de chaque document le standard utilis é comme suit :

<html>

<head>

</head>

<body> contenu de la page </body>

(42)

De nombreux standards existent ; il est donc

n écessaire de d éclarer au d ébut de chaque document le standard utilis é comme suit :

<html>

<head>

</head>

</html>

(43)

De nombreux standards existent ; il est donc

n écessaire de d éclarer au d ébut de chaque document le standard utilis é comme suit :

<html>

<head>

</head>

</html>

(44)

(45)

pour faire simple :

(46)

pour faire simple :

C’est aussi un langage `a balises...

(47)

pour faire simple :

Il va permettre de personnaliser ce qui a ét é écrit gr âce aux balises HTML (h1, h2, p, body, . . . ).

(48)

pour faire simple :

le code obtenu formera un fichier .css.

(49)

pour faire simple :

la balise HTML<link>permettra de lier ce fichier `a votre page HTML.

(50)

(51)

pour faire simple :

(52)

pour faire simple :

(53)

pour faire simple :

(54)

pour faire simple :

(55)

pour faire simple :

la balise HTML<link>permettra de lier ce fichier `a votre page HTML.

(56)

un peu d’anglais ne fera pas de mal :

Il est possible de modifier principalement :

(57)

un peu d’anglais ne fera pas de mal :

Il est possible de modifier principalement : color.

background.

padding.

marging.

font-family.

font-size.

width et height.

border.

(58)

un exemple de feuille de style

h1{

(59)

un exemple de feuille de style

h1{

color :# 999 ;

font-family :Verdana,Arial,Sans-serif ;

/* il est possible de mettre plusieurs polices de caract `eres */

font-size :28pt ; /* taille assez grande ...*/

padding :0 ; /* Pas de marge */

}

(60)

un exemple de feuille de style

h1{

color :# 999 ;

} h2{

(61)

un exemple de feuille de style

h1{

color :# 999 ;

} h2{

color :# 456 ;

font-family : Georgia,Verdana,Arial,Helvetica,Sans-serif ; border-bottom : 1px solid # 788 ;

/* une bordure en bas d ?une taille de 1 pixel et d ?une couleur 788 */

padding : 3px 3px 3px 15px ;