Embed Size (px)
Citation preview
HTML et les CSSLicence Pro. IE 2006-2007
Les bases de HTML et des CSS
G. Rozsavolgyi 2
HTML
Hyper Text Markup Language Version 4.x Supporté par les navigateurs
récents Cas particulier de SGML Evolution vers XML : XHTML
G. Rozsavolgyi 3
Langage à base de « tags »
Quelques dizaines de marqueurs <BODY>, <DIV>, <P>,
<H1>,<H2>, <BR>, etc. Chaque marqueur peut être modulé
à l’aide d’attributs Ex:<BODY bgcolor="#FFCC99"
text="#663300" link="#CC6600" alink="#FF3300" vlink="#666666">
G. Rozsavolgyi 4
Les attributs de la balise <DIV>
La balise <DIV> : 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 <DIV> sont par exemple :
ALIGN CLASS DIR LANG NOWRAP (IE seulement) ONCLICK ONDBCLICK ONKEYDOWN ONKEYPRESSED ONKEYUP ONMOUSEDOWN ONMOUSEMOVE ONMOUSEOUT ONMOUSEOVER ONMOUSEUP STYLE TITLE
Exemple
G. Rozsavolgyi 5
Paragraphes
<P align=right> Paragraphe aligné à droite <br> blablabla....</P>
<P align=center> Paragraphe centré <br> blobloblo </P>
<P align=left> Paragraphe aligné à gauche <br>bliblibli... </P>
G. Rozsavolgyi 6
Entêtes et séparateurs
Entêtes (headings) <H1> En-tête de niveau 1 </H1> <H2> En-tête de niveau 2 </H2> <H3> En-tête de niveau 3 </H3> <H4> En-tête de niveau 4 </H4> <H5> En-tête de niveau 5 </H5> <H6> En-tête de niveau 6 </H6>
G. Rozsavolgyi 7
Balises fondées sur un contenu
<ADDRESS><P>Dernière modification: 18.11.2002
</ADDRESS> abbréviation : <abbr> abrev. </abbr> acronyme : <acronym> HTML </acronym> (non
implémentée, apparemment...) citations :<cite>To be, or not to be,... </cite> code :<code> for(i=0;i<n; i++)
System.out.println(a[i]);</code> ( voir aussi <PRE> et
<VAR>) Définitions: <dfn> mot nouveau </dfn> si on insiste : <em> emphasis </em> ou
<strong> strong </strong>
G. Rozsavolgyi 8
Balises jouant directement sur l'apparence physique du texte
<B> (bold), <BIG>, <I>, <SMALL>, <SUB> (subscript), <SUP> (superscript)
La balise <BLINK> (Clignotement. Sous Netscape uniquement...)
<blink> hello </blink> <MARQUEE> Texte déroulant...
<marquee behavior=scroll bgcolor=yellow loop=infinite>Bonjour HTML...</marquee> (IE seulement…)
G. Rozsavolgyi 9
Espacement et disposition
<BR>(break) <NOBRK> (nobreak) <PRE> Ligne de séparation :
<HR width=66%>
G. Rozsavolgyi 10
Les Hyperliens
Le tag fondamental : <A> On peut également y associer, comme à
beaucoup de balises HTML, l'exécution d'un code Javascript :<a href=document.html onClick="window.confirm('Etes-vous sur que vous voulez cliquer ?');">Lien vers Document, difficile à atteindre...
</a> Ou avec une image:<A
href="http://www.univ_orleans.fr/IUT_ORLEANS/INFORMATIQUE/LicencePro.html"><IMG src="iut_transp.gif" align=top>IUT Orléans</A>
G. Rozsavolgyi 11
Listes
<UL> Une liste non numérotée<LI> Premier item<LI> Second item
</UL> <OL> Une liste numérotée
<LI> Premier item<LI> Second item
</OL> Ou encore : <DT> <DD> …
G. Rozsavolgyi 12
Documentation
La recommandation du W3C
G. Rozsavolgyi 13
Tableaux<DIV ALIGN=center>Table 1 : <A NAME="primitifs"></A> <I>Les types primitifs de Java</I><BR><TABLE BORDER=1 CELLSPACING=0 CELLPADDING=5><TR><TD ALIGN=center>Type</TD><TD ALIGN=center>Stockage</TD><TD ALIGN=center>Valeur Min.</TD><TD ALIGN=center>Valeur Max.</TD></TR><TR><TD ALIGN=center NOWRAP>int</TD><TD ALIGN=center NOWRAP>32 bits</TD><TD ALIGN=center NOWRAP>-2147483648</TD><TD ALIGN=center NOWRAP>2147483647</TD></TR><TR><TD ALIGN=center NOWRAP>char</TD><TD ALIGN=center NOWRAP>16 bits</TD><TD ALIGN=center NOWRAP>u000</TD><TD ALIGN=center NOWRAP>uFFFF</TD></TR></TABLE></DIV>Exemple
G. Rozsavolgyi 14
Frames
Exemple<frameset rows="60%,*" cols="65%,20%,*"><frame src="cadre1.html" name="cadre1"><frame src="cadre2.html"><frame src="cadre3.html"><frame framescrolling=yes src="cadre4.html"><frame src="cadre5.html"><frame src="cadre6.html"><noframes>Vous utilisez un navigateur qui ne
supporte pas les frames...Veuillez suivre <a href="noframe.html"> ce lien </a>
</noframes></frameset>
G. Rozsavolgyi 15
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 }
Pour utiliser une feuille de style, on peut ajouter dans les entêtes d’unepage :<link rel="StyleSheet" type="text/css" href="UrlDeLaFeuilleDeStyle">
G. Rozsavolgyi 16
Encadrés
<p style="border-width: 5px 5px 5px 5px; border-style: solid; padding:4px 5px 2px 10px">
<p background=yellow style="border-width: 5px 5px 5px 5px; border-style: solid; ">
Résultats : encadre.html
G. Rozsavolgyi 17
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.css
G. Rozsavolgyi 18
Priorités
1. Paramètres par défault du navigateur
2. Feuille de style externe3. Feuille de style interne (dans le tag
<head>)4. Style "inline" ( attributs d'un
élément HTML)
G. Rozsavolgyi 19
CSS
Exemples UNIGE Recommandation CSS v1. Recommandation CSS v2. CSS Validator :
http://jigsaw.w3.org/css-validator/validator-upload.html
G. Rozsavolgyi 20
Références
http:\\w3c.org http:\\cuisung.unige.ch\TechInternet
