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

1 HTML-CSS-XHTML. 2 HTML: HyperText Markup Language (Markup balisage). Sert à structurer les pages html4.01 XHTML: eXtensible HTML xhtml 1.0 CSS: Cascading.

Présentations similaires


Présentation au sujet: "1 HTML-CSS-XHTML. 2 HTML: HyperText Markup Language (Markup balisage). Sert à structurer les pages html4.01 XHTML: eXtensible HTML xhtml 1.0 CSS: Cascading."— Transcription de la présentation:

1 1 HTML-CSS-XHTML

2 2 HTML: HyperText Markup Language (Markup balisage). Sert à structurer les pages html4.01 XHTML: eXtensible HTML xhtml 1.0 CSS: Cascading Style Sheets. Sert a gérer la présentation du HTML

3 3 ex1.html M2 Protocoles Internet Ceci est le début du cours, avec un grand titre Pour faire le premier paragraphe avec du texte et autre Ceci est un titre de niveau inférieur il y a 6 niveaux Pour faire le second paragraphe avec une image et autre Pour faire le troisième paragraphe avec du texte. Si le texte dépasse la ligne ce n'est pas les retours à la ligne du texte source qui sont conservés. De nouveaux retours à la ligne seront insérés là où le navigateur considérera que c'est nécessaire.

4 4 ex2.html M2 Protocoles Internet exemple2 body {background-color: #d2b48c; margin-left: 20%; margin-right: 20%; font-family: sans-serif; } M2 Protocoles Internet Ceci est le début du cours, avec un grand titre Pour faire le premier paragraphe avec du texte et autre Ceci est un titre de niveau inférieur il y a 6 niveaux Pour faire le second paragraphe avec une image et autre Pour faire le troisième paragraphe avec du texte. Si le texte dépasse la ligne ce n'est pas les retours à la ligne du texte source qui sont conservés. De nouveaux retours à la ligne seront insérés là où le navigateur considérera que c'est nécessaire.

5 5 M2 Protocoles Internet: exemple 2 …. Ceci est le début du cours, avec un grand titre Pour faire le premier paragraphe avec du texte et autre Ceci est un titre de niveau inférieur il y a 6 niveaux Pour faire le second paragraphe avec une image et autre Pour faire le troisième paragraphe avec du texte. Si le texte dépasse la ligne ce n'est pas les retours à la ligne du texte source qui sont conservés. De nouveaux retours à la ligne seront insérés là où le navigateur considérera que c'est nécessaire. ex2VALID.htmlex2VALID.html CertifCertif

6 6 Construction dune page Elément en-ligne, élément de bloc –Chaque élément de bloc saffiche toujours comme si il y avait un saut de ligne avant et après –Un élément en ligne saffiche dans le cours du texte de la page

7 7 Elément de bloc … titre (6 niveaux) … paragraphe … Listes: – … liste numérotée – … liste non numérotée … pour un élément de liste – … liste de définitions (balise titre dt, description dd)

8 8 ex4.html M2 Protocoles Internet body {background-color: #d2b48c; margin-left: 20%; margin-right: 20%; font-family: sans-serif; }

9 9 ex4.html Cours HTML En HTML il y a des balises, la première est < html>. Avec & suivi d'une entité vous aurez tous les symboles spéciaux. Pour consulter les entités, aller voir Pour renvoyer vers le premier exemple Pour renvoyer vers le second exemple Pour renvoyer vers le troisième exemple un autre type liste avec indentation des éléments le titre et sa description

10 10 Maintenant il y a le contenu qui occupe toute cette partie. Cest du texte certaines parties peuvent être emphasées, etc…. espacement bordure marge Contenu

11 11 Elément de ligne … mis en emphase hypertexte insertion dune image saut de ligne ligne horizontale... structuration

12 12 Attributs Permettent de donner à un élément des informations supplémentaires Ex: ex5.html ex5.html Pour les listes: Pour lélément ancre ( )

13 13 ~cd/public_html/index.html

14 14

15 15 … La même chose en gras pour avoir un long texte. … Pour revenir au début

16 16 XHTML M2 Protocoles Internet body {background-color: #d2b48c; margin-left: 20%; margin-right: 20%; font-family: sans-serif; } … Ex6.html

17 17 M2 Protocoles Internet: exemple 2 body {background-color: #d2b48c; margin-left: 20%; margin-right: 20%; font-family: sans-serif; } Ceci est le début du cours, avec un grand titre Pour faire le premier paragraphe avec du texte et autre Ceci est un titre de niveau inférieur il y a 6 niveaux Pour faire le second paragraphe avec une image et autre Pour faire le troisième paragraphe avec du texte. Si le texte dépasse la ligne ce n'est pas les retours à la ligne du texte source qui sont conservés. De nouveaux retours à la ligne seront insérés là où le navigateur considérera que c'est nécessaire. ex2VALIDX.htmlex2VALIDX.html CertifXCertifX

18 18 CSS p{background-color: yellow; } h1,h2 {font-family:times; }

19 19 Cours HTML En HTML il y a des balises, la première est < html>. Avec & suivi d'une entité vous aurez tous les symboles spéciaux. Pour consulter les entités, aller voir CSS En CSS, il y a de nombreux parametres possibles. Il y a héritage des propriétés suivant la strucyure du document

20 20 html body h1 h2p p em

21 21 M2 Protocoles Internet body {background-color: #d2b48c; color: red; margin-left: 20%; margin-right: 20%; font-family: sans-serif; } p{background-color: yellow; } em {color : black; } h1,h2 {font-family:times; }

22 22 On peut créer une feuille de style valable pour plusieurs documents. Attention cest du css pas du html pas Ex: body {background-color: #d2b48c; color: red; margin-left: 20%; margin-right: 20%; font-family: sans-serif;} p{background-color: yellow;} em {color : black;} h1,h2 {font-family:times;} mafeuille.css

23 23 Inclusion dans un document (X)HTML M2 Protocoles Internet …. Ex8.html

24 24 Sélecteur: particulariser le style des éléments (attribut class et id) M2 Protocoles Internet Cours HTML En HTML il y a des balises, la première est < html>. Avec & suivi d'une entité vous aurez tous les symboles spéciaux. Pour consulter les entités, aller voir CSS En CSS, il y a de nombreux parametres possibles. Il y a héritage des propriétés suivant la strucyure du document Ex9.html

25 25 body {background-color: #d2b48c; color: red; margin-left: 20%; margin-right: 20%; font-family: sans-serif;} p{background-color: yellow;} p#sec {background-color: green;} em {color : black;}.titre {font-family:symbol;} mafeuille2.css

26 26 Placement des éléments sur la fenêtre Le navigateur utilise le flux pour effectuer la mise en pages des éléments (X) HTML. Commence au début du fichier (X)HTML. Les éléments de bloc sont disposés de haut en bas au fur et à mesure de la lecture Les élément de ligne se placent les uns à coté des autres depuis le coin en haut à gauche jusquau coin en bas à droite Sauf si la taille a été spécifiée, les éléments occupent la largeur de la page. La mise en page sadapte à la modification de la taille de la fenêtre.

27 27 Attribut float Lorsque le navigateur rencontre lattribut float il le place suivant sa valeur à gauche ou à droite et le retire du flux Les blocs se comportent comme si cet élément nexistait pas MAIS les éléments en ligne sont positionnés en respectant les limites de lélément flottant

28 28 Cours CSS En CSS, il y a de nombreux paramètres possibles. Il y a héritage des propriétés suivant la structure du document. HTML En HTML il y a des balises, la première est < html>. Avec & suivi d'une …. Pour consulter les entités, aller voir Un nouveau paragraphe pour voir. Un nouveau paragraphe pour voir. Un nouveau paragraphe pour voir. Un nouveau paragraphe pour voir.

29 29 mafeuille3.cssmafeuille3.css (ex10.html)ex10.html) body {background-color: #d2b48c; color: red; margin-left: 20%; margin-right: 20%; font-family: sans-serif; } #gauche { color: green; width: 200px; float: left;}

30 30 mafeuille3b.css (ex10b.html)ex10b.html ex10b.html: Un nouveau paragraphe pour voir mafeuille3b.css: #dernier {clear:left;}

31 31 Pseudo classe Un élément peut avoir plusieurs états Un lien peut être: –non visité, a:link –visité, a:visited –survolé, a:hover –…

32 32 ex11.html Cours HTML/XHTML Pour renvoyer vers le premier exemple Pour renvoyer vers le second exemple Pour renvoyer vers le troisieme exemple Pour renvoyer vers le vers google Un lien peut avoir plusieurs états: non visité a:link visité a:visited survole a:survole

33 33 body {background-color: #d2b48c; color: red; margin-left: 20%; margin-right: 20%; font-family: sans-serif; }.etat { font-family:times; color:black}.affiche {font-family: geneva; color:white} #chetat a:link {color: green;} #chetat a:visited {color: white;} #chetat a:hover {color:yellow}

34 34 Vérification Par W3C validator validCSS.html

35 35 A faire…. Gerer les fontes Affichage des images Tableaux et tables ….

36 36 Formulaire Prénom: POST possible..

37 37 Ex12.html Votre nom et prénom Prénom: Nom: …..

38 38 Acheter vous aujourd'hui? Oui Non Peut-être …. Le bon choix Le meilleur Le moins cher … Par qui voulez vous être servi?: Pierre Bleu Paul Blanc Jacques Gris Adeline Rouge


Télécharger ppt "1 HTML-CSS-XHTML. 2 HTML: HyperText Markup Language (Markup balisage). Sert à structurer les pages html4.01 XHTML: eXtensible HTML xhtml 1.0 CSS: Cascading."

Présentations similaires


Annonces Google