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

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

G. Rozsavolgyi3 Langage à base de « tags » Quelques dizaines de marqueurs,,,,,, etc. Chaque marqueur peut être modulé à laide dattributs Ex:

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

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

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

G. Rozsavolgyi7 Balises fondées sur un contenu Dernière modification: 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

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…)

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

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

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

G. Rozsavolgyi12 Documentation La recommandation du W3C

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

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

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 dune page :

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

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

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)

G. Rozsavolgyi19 CSS Exemples UNIGE Recommandation CSS v1. Recommandation CSS v2. CSS Validator : validator/validator-upload.html validator/validator-upload.html

G. Rozsavolgyi20 Références