HTML / CSS Gestion des systèmes dinformation Classe terminale Professeur: Mme BELLILI.

HTML / CSSHTML / CSS

Gestion des systèmes d’information

Classe terminale

Professeur: Mme BELLILI

LiensLiens

HTMLHTML

www.html.net/tutorials/html/www.html.net/tutorials/html/

http://xhtml.developpez.com/cours/http://xhtml.developpez.com/cours/

http://www.siteduzero.comhttp://www.siteduzero.com

CSSCSS

http://www.cssdebutant.com/http://www.cssdebutant.com///

http://css.mammouthland.net/http://css.mammouthland.net/

http://www.csszengarden.com/tr/francais/http://www.csszengarden.com/tr/francais/

Langage de document interprétable Langage de document interprétable par les navigateurs www.par les navigateurs www.

Exemple : Internet Explorer, FireFox …Exemple : Internet Explorer, FireFox …

Partie 1 : HTML

Langage de script caractérisé par des Langage de script caractérisé par des balises marquant la mise en forme: balises marquant la mise en forme:

Texte,Texte, Image,Image,Son,Son,VidéoVidéo

1

Hypertext Markup LanguageHypertext Markup Language

Hypertexte Hypertexte lien dans document lien dans document pointe vers autre documentpointe vers autre document

Markup Language Markup Language code pour code pour marquer des zones dans un documentmarquer des zones dans un document

Partie 1 : HTML

2

Principes du HTML (1)Principes du HTML (1)

Fonctionne sous la base de la balise (ou tag).

Ex: <html>, <p>, <table>

Une balise formate le document en entier ou une partie du texte

A (pratiquement) chaque balise correspond une balise fermante, ce qui délimite l'effet de la balise.

<p>Ceci est un paragraphe.</p>

3

Principes du HTML (2)Principes du HTML (2)

Un document html peut être édité

Dans un simple éditeur de texte (exemple: Notepad, Document text …)

A l'aide d'éditeurs plus ou moins sophistiqués (grand choix sur Internet)

4

BaliseBalise

Une balise peut avoir des attributs.<p align="center>Paragraphe centré</p>

Les balises sont emboîtées.<p>Ceci est un paragraphe avec un mot <b>en gras</b>.</p>

Balises non sensibles à la casse. <b> = <B>, <b> </B> toléré

5

Exemple1Exemple1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Page HTML</title>

</head>

<body> Ceci est un <b>document HTML</b>. <br />

Son contenu fait l'objet d'un formatage de présentation<br />

défini à l'aide de balises HTML et interprétées par le<br />

logiciel qui affiche cette page.<br />

</body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Page HTML</title>

</head>

<body> Ceci est un <b>document HTML</b>. <br />

Son contenu fait l'objet d'un formatage de présentation<br />

défini à l'aide de balises HTML et interprétées par le<br />

logiciel qui affiche cette page.<br />

</body>

</html>

Créer un dossier nommé web (dans lequel toutes vos pages seront stockées) sur votre

compte. A l’intérieur du dossier web créer deux autres dossiers nommés : images et files.

le nom des pages HTML est libre.

6

Différence HTML/XHTMLDifférence HTML/XHTML

XHTML: une évolution de HTML

Approche fondé sur la séparation entre, d’une part, le contenu et la structure, et d’autre part, définie à l’aide de feuilles de style

Doctype:<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

Exemple :Exemple :HTML: HTML: <img src=<img src= " " image1.jpg image1.jpg " height= " " height= " 200200" width= " " width= " 200200" >" >

XHTML:XHTML: <img src=<img src= " " image1.jpg image1.jpg " class= " " class= " imageimage" >" >

7

CSS : Cascading Style SheetsCSS : Cascading Style Sheets

Partie 2 : CSS

Feuille de styles permettant la Feuille de styles permettant la présentation et la mise en forme de no présentation et la mise en forme de no page HTML.page HTML.

Deux mode de présentation:Deux mode de présentation:

Entre les balises <head></head>Entre les balises <head></head><style type=<style type= " text/csstext/css " >>{{

/*code CSS *//*code CSS */}}</style></style>

8

Dans un fichier.css séparé appelé dans le fichier Dans un fichier.css séparé appelé dans le fichier html par le lie suivant:html par le lie suivant:

Partie 2 : CSS

<link rel="stylesheet" type="text/css" href="style.css" />

9

Exemple 2 (avec css)Exemple 2 (avec css)

<?xml version="1.0" encoding="ISO-8859-1"?><?xml version="1.0" encoding="ISO-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head><head>

<link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="style.css" />

<title>Site du lycée Guy de Maupassant</title> <title>Site du lycée Guy de Maupassant</title>

</head> </head>

<body><body>

<h1 class="centrage">Bienvenue au lycée</h1><h1 class="centrage">Bienvenue au lycée</h1>

<h1 class="centrage">Guy de Maupassant!</h1><h1 class="centrage">Guy de Maupassant!</h1>

<div class="image"><div class="image">

<img class="image" src=« logo.jpg"><img class="image" src=« logo.jpg">

<div> <div>

</body> </body>

</html> </html>

<?xml version="1.0" encoding="ISO-8859-1"?><?xml version="1.0" encoding="ISO-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head><head>

<link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="style.css" />

<title>Site du lycée Guy de Maupassant</title> <title>Site du lycée Guy de Maupassant</title>

</head> </head>

<body><body>

<h1 class="centrage">Bienvenue au lycée</h1><h1 class="centrage">Bienvenue au lycée</h1>

<h1 class="centrage">Guy de Maupassant!</h1><h1 class="centrage">Guy de Maupassant!</h1>

<div class="image"><div class="image">

<img class="image" src=« logo.jpg"><img class="image" src=« logo.jpg">

<div> <div>

</body> </body>

</html> </html>

10

.centrage.centrage

{{

text-align:center;text-align:center;

}}

img.imageimg.image

{{

height:221px;height:221px;

width:158px;width:158px;

}}

div.imagediv.image

{{

margin-top:60px;margin-top:60px;

margin-bottom:30px;margin-bottom:30px;


}}

.centrage.centrage

{{


}}

img.imageimg.image

{{

height:221px;height:221px;

width:158px;width:158px;

}}

div.imagediv.image

{{

margin-top:60px;margin-top:60px;

margin-bottom:30px;margin-bottom:30px;


}}

Créer das le dossier web , un dossier nomé CSS.Créer un fchier “style.css”

11

Partie 3 : Exemple récaputilitaif Partie 3 : Exemple récaputilitaif (les menus)(les menus)

La technique consiste à utiliser les balises:

<ol> (délimiteur de liste numérotée) , <ul> (délimiteur de liste à puces) et <li> (élément de liste) du XHTML

Les mettre en forme avec quelques lignes de CSS.

12

Définissez une liste à puces en XHTML. Pour cela, vous utiliserez les balises <ol> et <li>, comme ceci (bien entendu, il manque les désormais classiques balises <!DOCTYPE>, <html>, <head> et <body> :

<ol> <li>Premier élément de la liste</li> <li>Deuxième élément de la liste</li> <li>Troisième élément de la liste</li> </ol>

13

SolutionSolution

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html> <head>

<title>Menu</title> </head> <body> <ul>

<li>Premier élément</li> <li>Deuxième élément</li> <li>Troisième élément</li>

</ul> </body></html></html>


<html> <head>

<title>Menu</title> </head> <body> <ul>

<li>Premier élément</li> <li>Deuxième élément</li> <li>Troisième élément</li>

</ul> </body></html></html>

14

Pour définir un menu vertical, il suffit de modifier le comportement des balises <ul> et <li> avec un peu de CSS :

Dans le style ul, définissez les propriétés suivantes :width: 150px;float: left;

Dans le style li, supprimez les puces avec :List-style-type: none;

Menu verticalMenu vertical

15

Définissez le code XHTML/CSS pour afficher un Définissez le code XHTML/CSS pour afficher un menu vertical qui donne accès aux trois sites Web menu vertical qui donne accès aux trois sites Web

suivants :suivants :

GoogleGoogle http://www.google.frhttp://www.google.frYahooYahoo http://fr.yahoo.comhttp://fr.yahoo.com

Live SearchLive Search http://search.live.comhttp://search.live.com

ExerciceExercice

16

SolutionSolution


<html> <head> <style type="text/css"> ul { width: 150px; float: left; } li { list-style-type: none; } </style> </head> <body> <ul> <li><a href="http://www.google.fr">Aller sur Google</a></li> <li><a href="http://fr.yahoo.com">Aller sur Yahoo</a></li> <li><a href="http://search.live.com">Aller sur Live Search</a></li> </ul></body></html>


<html> <head> <style type="text/css"> ul { width: 150px; float: left; } li { list-style-type: none; } </style> </head> <body> <ul> <li><a href="http://www.google.fr">Aller sur Google</a></li> <li><a href="http://fr.yahoo.com">Aller sur Yahoo</a></li> <li><a href="http://search.live.com">Aller sur Live Search</a></li> </ul></body></html>

17

Pour définir un menu horizontal, il suffit d'affecter la valeur inline à la propriété display du CSS li. En d'autres termes :

li { display: inline; }

/*padding-right: 20px;*/

Menu horizontalMenu horizontal

18

SolutionSolution

<html> <head> <style type="text/css"> ul { list-style-type: none; } li { display: inline; padding-right: 20px; } </style> </head> <body> <ul> <li><a href="http://www.google.fr">Aller sur Google</a></li> <li><a href="http://fr.yahoo.com">Aller sur Yahoo</a></li> <li><a href="http://search.live.com">Aller sur Live Search</a></li> </ul></body></html>

<html> <head> <style type="text/css"> ul { list-style-type: none; } li { display: inline; padding-right: 20px; } </style> </head> <body> <ul> <li><a href="http://www.google.fr">Aller sur Google</a></li> <li><a href="http://fr.yahoo.com">Aller sur Yahoo</a></li> <li><a href="http://search.live.com">Aller sur Live Search</a></li> </ul></body></html>

19

Un tableau doit respecter les quelques règles suivantes :

Le tableau est encadré par les balises <TABLE> et </TABLE>.

Le titre du tableau est encadré par <CAPTION> </CAPTION>

Chaque ligne est encadrée par <TR> </TR> (Table Row, traduisez par ligne du tableau).

Les cellules d'en-tête sont encadrées par <TH> </TH> (pour Table Header : En-tête de tableau)

Les cellules de valeur sont encadrées par <TD> </TD> (Table Data: Donnée de tableau)

Les tableaux HTMLLes tableaux HTML

20

ExempleExemple


<html> <head></head> <body>

<TABLE BORDER="1"> <CAPTION> Voici le titre du tableau </CAPTION>

<TR> <TH> Titre A1 </TH> <TH> Titre A2 </TH> <TH> Titre A3 </TH> <TH> Titre A4 </TH>

</TR> <TR>

<TD> Valeur B1 </TD> <TD> Valeur B2 </TD> <TD> Valeur B3 </TD> <TD> Valeur B4 </TD> </TR>

</TABLE></body>

</html>


<html> <head></head> <body>

<TABLE BORDER="1"> <CAPTION> Voici le titre du tableau </CAPTION>

<TR> <TH> Titre A1 </TH> <TH> Titre A2 </TH> <TH> Titre A3 </TH> <TH> Titre A4 </TH>

</TR> <TR>

<TD> Valeur B1 </TD> <TD> Valeur B2 </TD> <TD> Valeur B3 </TD> <TD> Valeur B4 </TD> </TR>

</TABLE></body>

</html>

21

Les formulaires HTML sont des ensembles de composants appelés aussi champs qui permettent à l’utilisateur d’entrer des informations, d’exprimer ses choix, de saisir un texte …

Un formulaire est délimité par les balises <form> </form>

Les éléments de formulaires sont répartis en 3 classes :

InputChamps de saisie de texte et différents types de boutons

SelectListes (menus déroulants et ascenseurs)

TextareaZone de saisie de texte libre

Les formulaires HTMLLes formulaires HTML

22

INPUTINPUT

23

Cet élément est utilisé pour définir des zones d'entrée de texte simple, des boutons, des cases à cocher ou des boutons radio. Le type d'élément dont il s'agit sera précisé en utilisant l'attribut TYPE.

SELECTSELECT

24

Cet élément sert à définir des listes (menus déroulant ou ascenseurs). Elle s'utilise avec l'élément OPTION.

TextareaTextarea

25

Permet de créer une zone de texte en spécifiant sa taille grâce aux attributs ROWS et COLS

Merci pour votre Merci pour votre attentionattention

HTML / CSS Gestion des systèmes dinformation Classe terminale Professeur: Mme BELLILI.

Documents

Transcript of HTML / CSS Gestion des systèmes dinformation Classe terminale Professeur: Mme BELLILI.