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é à l’aide d’attributs  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 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 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 d’une 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 Exemples UNIGE  Recommandation CSS v1.  Recommandation CSS v2. Recommandation CSS v2.  CSS Validator : validator/validator-upload.html validator/validator-upload.html

G. Rozsavolgyi20 Références  