HTML / CSS Gestion des systèmes d’information Classe terminale Professeur: Mme BELLILI
Liens http://www.siteduzero.com HTML www.html.net/tutorials/html/ http://xhtml.developpez.com/cours/ http://www.siteduzero.com CSS http://www.cssdebutant.com// http://css.mammouthland.net/ http://www.csszengarden.com/tr/francais/
Langage de document interprétable par les navigateurs www. Partie 1 : HTML Langage de document interprétable par les navigateurs www. Exemple : Internet Explorer, FireFox … Langage de script caractérisé par des balises marquant la mise en forme: Texte, Image, Son, Vidéo 1
Hypertext Markup Language Partie 1 : HTML Hypertext Markup Language Hypertexte lien dans document pointe vers autre document Markup Language code pour marquer des zones dans un document 2
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) Un document html peut être édité 4 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
Balise Les balises sont emboîtées. <p>Ceci est un paragraphe avec un mot <b>en gras</b>.</p> Une balise peut avoir des attributs. <p align="center>Paragraphe centré</p> Balises non sensibles à la casse. <b> = <B>, <b> </B> toléré 5
Exemple1 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. <!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> 6
Différence HTML/XHTML XHTML: une évolution de HTML 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"> 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 Exemple : HTML: <img src= " image1.jpg " height= " 200" width= " 200" > XHTML: <img src= " image1.jpg " class= " image" > 7
CSS : Cascading Style Sheets Partie 2 : CSS CSS : Cascading Style Sheets Feuille de styles permettant la présentation et la mise en forme de no page HTML. Deux mode de présentation: Entre les balises <head></head> <style type= " text/css " > { /*code CSS */ } </style> 8
<link rel="stylesheet" type="text/css" href="style.css" /> Partie 2 : CSS Dans un fichier.css séparé appelé dans le fichier html par le lie suivant: <link rel="stylesheet" type="text/css" href="style.css" /> 9
Exemple 2 (avec css) <?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"> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Site du lycée Guy de Maupassant</title> </head> <body> <h1 class="centrage">Bienvenue au lycée</h1> <h1 class="centrage">Guy de Maupassant!</h1> <div class="image"> <img class="image" src=« logo.jpg"> <div> </body> </html> 10
11 Créer das le dossier web , un dossier nomé CSS. Créer un fchier “style.css” .centrage { text-align:center; } img.image height:221px; width:158px; div.image margin-top:60px; margin-bottom:30px; 11
Partie 3 : Exemple récaputilitaif (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
Solution <!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> 14
Menu vertical 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; 15
Exercice Google http://www.google.fr Yahoo http://fr.yahoo.com Définissez le code XHTML/CSS pour afficher un menu vertical qui donne accès aux trois sites Web suivants : Google http://www.google.fr Yahoo http://fr.yahoo.com Live Search http://search.live.com 16
Solution <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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
Menu horizontal 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;*/ 18
Solution 19 <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
Les tableaux HTML 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) 20
Exemple 21 <TABLE BORDER="1"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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> <TD> Valeur B1 </TD> <TD> Valeur B2 </TD> <TD> Valeur B3 </TD> <TD> Valeur B4 </TD> </TABLE> </body> </html> 21
Les formulaires HTML 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 : Input Champs de saisie de texte et différents types de boutons Select Listes (menus déroulants et ascenseurs) Textarea Zone de saisie de texte libre 22
INPUT 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. 23
SELECT Cet élément sert à définir des listes (menus déroulant ou ascenseurs). Elle s'utilise avec l'élément OPTION. 24
Textarea Permet de créer une zone de texte en spécifiant sa taille grâce aux attributs ROWS et COLS 25
Merci pour votre attention