La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

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

Présentations similaires


Présentation au sujet: "HTML / CSS Gestion des systèmes dinformation Classe terminale Professeur: Mme BELLILI."— Transcription de la présentation:

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

2 Liens HTML CSS / /

3 Langage de document interprétable par les navigateurs www. Langage de document interprétable par les navigateurs www. Exemple : Internet Explorer, FireFox … Exemple : Internet Explorer, FireFox … Partie 1 : HTML Langage de script caractérisé par des balises marquant la mise en forme: Langage de script caractérisé par des balises marquant la mise en forme: Texte, Texte, Image, Image, Son, Son, Vidéo Vidéo 1

4 Hypertext Markup Language Hypertext Markup Language Hypertexte lien dans document pointe vers autre document Hypertexte lien dans document pointe vers autre document Markup Language code pour marquer des zones dans un document Markup Language code pour marquer des zones dans un document Partie 1 : HTML 2

5 Principes du HTML (1) Fonctionne sous la base de la balise (ou tag). Ex:,, 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. Ceci est un paragraphe. 3

6 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

7 Balise Une balise peut avoir des attributs. Paragraphe centré Les balises sont emboîtées. Ceci est un paragraphe avec un mot en gras. Balises non sensibles à la casse. =, toléré 5

8 Exemple1 Page HTML Ceci est un document HTML. Son contenu fait l'objet d'un formatage de présentation défini à l'aide de balises HTML et interprétées par le logiciel qui affiche cette page. Page HTML Ceci est un document HTML. Son contenu fait l'objet d'un formatage de présentation défini à l'aide de balises HTML et interprétées par le logiciel qui affiche cette page. Créer un dossier nommé web (dans lequel toutes vos pages seront stockées) sur votre compte. A lintérieur du dossier web créer deux autres dossiers nommés : images et files. le nom des pages HTML est libre. 6

9 Différence HTML/XHTML XHTML: une évolution de HTML Approche fondé sur la séparation entre, dune part, le contenu et la structure, et dautre part, définie à laide de feuilles de style Doctype: Exemple : HTML: HTML: XHTML: XHTML: 7

10 CSS : Cascading Style Sheets CSS : Cascading Style Sheets Partie 2 : CSS Feuille de styles permettant la présentation et la mise en forme de no page HTML. Feuille de styles permettant la présentation et la mise en forme de no page HTML. Deux mode de présentation: Deux mode de présentation: Entre les balises Entre les balises { /*code CSS */ } 8

11 Dans un fichier.css séparé appelé dans le fichier html par le lie suivant: Dans un fichier.css séparé appelé dans le fichier html par le lie suivant: Partie 2 : CSS style.css 9

12 Exemple 2 (avec css) style.css Site du lycée Guy de Maupassant Site du lycée Guy de Maupassant Bienvenue au lycée Bienvenue au lycée Guy de Maupassant! Guy de Maupassant! style.css Site du lycée Guy de Maupassant Site du lycée Guy de Maupassant Bienvenue au lycée Bienvenue au lycée Guy de Maupassant! Guy de Maupassant! 10

13 .centrage{text-align:center;}img.image{height:221px;width:158px;}div.image{margin-top:60px;margin-bottom:30px;text-align:center;}.centrage{text-align:center;}img.image{height:221px;width:158px;}div.image{margin-top:60px;margin-bottom:30px;text-align:center;} Créer das le dossier web, un dossier nomé CSS. Créer un fchier style.css 11

14 Partie 3 : Exemple récaputilitaif (les menus) La technique consiste à utiliser les balises: (délimiteur de liste numérotée), (délimiteur de liste à puces) et (élément de liste) du XHTML Les mettre en forme avec quelques lignes de CSS. 12

15 Définissez une liste à puces en XHTML. Pour cela, vous utiliserez les balises et, comme ceci (bien entendu, il manque les désormais classiques balises,, et : Premier élément de la liste Deuxième élément de la liste Troisième élément de la liste 13

16 Solution Menu Premier élément Deuxième élément Troisième élément Menu Premier élément Deuxième élément Troisième élément 14

17 Pour définir un menu vertical, il suffit de modifier le comportement des balises et 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 vertical 15

18 Définissez le code XHTML/CSS pour afficher un menu vertical qui donne accès aux trois sites Web suivants : Définissez le code XHTML/CSS pour afficher un menu vertical qui donne accès aux trois sites Web suivants : Googlehttp://www.google.fr Yahoohttp://fr.yahoo.com Live Searchhttp://search.live.com Exercice 16

19 Solution ul { width: 150px; float: left; } li { list-style-type: none; } Aller sur Google Aller sur Yahoo Aller sur Live Search ul { width: 150px; float: left; } li { list-style-type: none; } Aller sur Google Aller sur Yahoo Aller sur Live Search 17

20 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 horizontal 18

21 Solution ul { list-style-type: none; } li { display: inline; padding-right: 20px; } Aller sur Google Aller sur Yahoo Aller sur Live Search ul { list-style-type: none; } li { display: inline; padding-right: 20px; } Aller sur Google Aller sur Yahoo Aller sur Live Search 19

22 Un tableau doit respecter les quelques règles suivantes : Le tableau est encadré par les balises et. Le titre du tableau est encadré par Chaque ligne est encadrée par (Table Row, traduisez par ligne du tableau). Les cellules d'en-tête sont encadrées par (pour Table Header : En-tête de tableau) Les cellules de valeur sont encadrées par (Table Data: Donnée de tableau) Les tableaux HTML 20

23 Exemple Voici le titre du tableau Titre A1 Titre A2 Titre A3 Titre A4 Valeur B1 Valeur B2 Valeur B3 Valeur B4 Voici le titre du tableau Titre A1 Titre A2 Titre A3 Titre A4 Valeur B1 Valeur B2 Valeur B3 Valeur B4 21

24 Les formulaires HTML sont des ensembles de composants appelés aussi champs qui permettent à lutilisateur dentrer des informations, dexprimer ses choix, de saisir un texte … Un formulaire est délimité par les balises 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 Les formulaires HTML 22

25 INPUT 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.

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

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

28 Merci pour votre attention


Télécharger ppt "HTML / CSS Gestion des systèmes dinformation Classe terminale Professeur: Mme BELLILI."

Présentations similaires


Annonces Google