HTML et les CSS Licence Pro. IE 2006-2007 Les bases de HTML et des CSS.

Présentation au sujet: "HTML et les CSS Licence Pro. IE 2006-2007 Les bases de HTML et des CSS."— Transcription de la présentation:

1 HTML et les CSS Licence Pro. IE 2006-2007 Les bases de HTML et des CSS

2 G. Rozsavolgyi2 HTML  Hyper Text Markup Language  Version 4.x  Supporté par les navigateurs récents  Cas particulier de SGML  Evolution vers XML : XHTML

3 G. Rozsavolgyi3 Langage à base de « tags »  Quelques dizaines de marqueurs ,,,,,, etc.  Chaque marqueur peut être modulé à l’aide d’attributs  Ex:

4 G. Rozsavolgyi4 Les attributs de la balise  La balise : sert essentiellement de séparateur logique, mais peut-être utilisée avec profit avec les CSS grâce à l'attribut class Chaque balise HTML possède de nombreux attributs. Ceux de la balise sont par exemple :  ALIGN  CLASS  DIR  LANG  NOWRAP (IE seulement)  ONCLICK  ONDBCLICK  ONKEYDOWN  ONKEYPRESSED  ONKEYUP  ONMOUSEDOWN  ONMOUSEMOVE  ONMOUSEOUT  ONMOUSEOVER  ONMOUSEUP  STYLE  TITLE Exemple

5 G. Rozsavolgyi5 Paragraphes  Paragraphe aligné à droite blablabla....  Paragraphe centré blobloblo  Paragraphe aligné à gauche bliblibli...

6 G. Rozsavolgyi6 Entêtes et séparateurs  Entêtes (headings)  En-tête de niveau 1  En-tête de niveau 2  En-tête de niveau 3  En-tête de niveau 4  En-tête de niveau 5  En-tête de niveau 6

7 G. Rozsavolgyi7 Balises fondées sur un contenu  Dernière modification: 18.11.2002   abbréviation : abrev.  acronyme : HTML (non implémentée, apparemment...)  citations : To be, or not to be,...  code : for(i=0;i&ltn&#059 i++) System.out.println(a[i]); ( voir aussi et )  Définitions: mot nouveau  si on insiste : emphasis ou strong

8 G. Rozsavolgyi8 Balises jouant directement sur l'apparence physique du texte  (bold),,,, (subscript), (superscript)  La balise (Clignotement. Sous Netscape uniquement...) hello  Texte déroulant... Bonjour HTML... (IE seulement…)

9 G. Rozsavolgyi9 Espacement et disposition  (break)  (nobreak)   Ligne de séparation :

10 G. Rozsavolgyi10 Les Hyperliens  Le tag fondamental :  On peut également y associer, comme à beaucoup de balises HTML, l'exécution d'un code Javascript : Lien vers Document, difficile à atteindre...  Ou avec une image: IUT Orléans

11 G. Rozsavolgyi11 Listes  Une liste non numérotée Premier item Second item  Une liste numérotée Premier item Second item  Ou encore : …

12 G. Rozsavolgyi12 Documentation  La recommandation du W3C La recommandation du W3C

13 G. Rozsavolgyi13 Tableaux Table 1 : Les types primitifs de Java Type Stockage Valeur Min. Valeur Max. int 32 bits -2147483648 2147483647 char 16 bits u000 uFFFF Exemple

14 G. Rozsavolgyi14 Frames  Exemple Exemple Vous utilisez un navigateur qui ne supporte pas les frames...Veuillez suivre ce lien

15 G. Rozsavolgyi15 Les CSS  Une feuille de style permet de (re)définir certaines caractéristiques de tags  Par exemple: h1,h2 {font-weight:bold;font- family:helvetica;font-style:normal }exemple  Pour utiliser une feuille de style, on peut ajouter dans les entêtes d’une page :

16 G. Rozsavolgyi16 Encadrés   Résultats : encadre.htmlencadre.html

17 G. Rozsavolgyi17 Classes de style .ecolo {color: #00CC00; font- family: helvetica }  P.encadre{border-width: 5px 5px 5px 5px; border-style: solid;color: red; background : lime}  Résultat : ExClass.html Feuille de style : feuille.cssExClass.htmlfeuille.css

18 G. Rozsavolgyi18 Priorités 1. Paramètres par défault du navigateur 2. Feuille de style externe 3. Feuille de style interne (dans le tag ) 4. Style "inline" ( attributs d'un élément HTML)

19 G. Rozsavolgyi19 CSS  Exemples UNIGE Exemples UNIGE  Recommandation CSS v1.  Recommandation CSS v2. Recommandation CSS v2.  CSS Validator : http://jigsaw.w3.org/css- validator/validator-upload.html http://jigsaw.w3.org/css- validator/validator-upload.html

20 G. Rozsavolgyi20 Références  http:\\w3c.org http:\\w3c.org  http:\\cuisung.unige.ch\TechInternet http:\\cuisung.unige.ch\TechInternet