Exercices HTML Attributs de Page Couleurs Texte Et Liens Fo

Transféré par

fouad abdelhamid
145 vues6 pages

Copyright

© Attribution Non-Commercial (BY-NC)

Formats disponibles

PDF, TXT ou lisez en ligne sur Scribd

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Signaler ce document

Droits d'auteur :

Attribution Non-Commercial (BY-NC)
Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
Signaler comme contenu inapproprié
145 vues6 pages

Exercices HTML Attributs de Page Couleurs Texte Et Liens Fo

Transféré par

fouad abdelhamid

Droits d'auteur :

Attribution Non-Commercial (BY-NC)
Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
Signaler comme contenu inapproprié
sur 6

Exercices HTML

www.rahmouni.ma

Attributs de page
Thme
Dfinition des couleurs en HTML. Attributs de base d'une page HTML : couleurs du texte et des liens, couleur du fond, image de fond, balises META...

Balises
Spcification des couleurs en HTML (au niveau des attributs COLOR ou BGCOLOR des tags <BODY>, <FONT>, <TABLE>, <TR>, <TH>, <TD>...)

soit par ses composantes RGB (0 255) exprimes sous forme hexadc. (00 FF) par triplet : "#RRGGBB" exemples : "#000000" = black, "#FF0000" = red, "#FFFF00" = yellow, "#FFFFFF" = white ... soit par son nom : 16 noms standards dfinis dans la spcification HTML 4.0 :
aqua black blue fuschia gray green lime maroon navy olive purple red silver teal white yellow

red = #FF0000 yellow = #FFFF00 black = #000000

lime = #00FF00 fuchsia (magenta) = #FF00FF white = #FFFFFF

blue = #0000FF aqua (cyan) = #00FFFF

green = maroon = #008000 #800000 navy = #000080 olive = #808000 purple = #800080 silver = #C0C0C0 teal = #008080 gray = #808080

ou encore d'autres noms de couleur standards utiliss moins couramment

Attributs de base d'une page HTML (balise BODY)

Spcification de la couleur du texte, des liens non visits et des liens visits :

Exercices HTML

www.rahmouni.ma

<BODY TEXT="couleur" LINK="couleur" VLINK="couleur">

corps de la

page... </BODY> Spcification de la couleur du fond de page : <BODY BGCOLOR="couleur"> corps de la page... </BODY> Dfinition d'une image en fond de page (rplique en tuile horizontalement et verticalement) : <BODY BACKGROUND="URL de l'image"> corps de la page... </BODY> Couleur de fond de page et image de fond peuvent tre combins, pour autant que l'image possde une transparence (en format GIF89a) Dfinition des marges : <BODY MARGINWIDTH="taille" LEFTMARGIN="taille"> corps de la page... </BODY> dfini la marge gauche et droite ; <BODY MARGINHEIGHT="taille" TOPMARGIN="taille"> corps de la page... </BODY> dfini la marge suprieure ; comme Netscape ne reconnat que les attributs MARGINWIDTH et MARGINHEIGHT, et que Internet Explorer ne reconnat que les attributs LEFTMARGIN et TOPMARGIN, il est ncessaire d'utiliser ces 2 attributs pour tre certain de l'effet sur les 2 navigateurs !

Rappel : voir aussi la balise <BASEFONT...> et les feuilles de style CSS1 pour changer la couleur du texte globalement pour toute une page. Balises META ( placer dans le bloc
<HEAD>...</HEAD>)

Spcification du type de document (ici HTML) et du jeu de caractres utilis (ici iso-latin-1) :
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso8859-1">

Spcification de mot-cls pour la page, l'usage des moteurs de recherche : <META NAME="KEYWORDS" CONTENT="mot-cl, mot-cl, mot-cl..."> Spcification d'un rsum de la page, l'usage des moteurs de recherche : <META NAME="DESCRIPTION" CONTENT="petit rsum...">

Exercices HTML

www.rahmouni.ma

Demande d'exclusion d'indexation de la page {et des pages pointes} par les moteurs de recherche : <META NAME="ROBOTS" CONTENT="noindex {,nofollow}"> Demande aux moteurs de recherche de revisiter la page aprs x jours (pour pages changeant souvent, utiliser conjointement avec balise <META HTTP-EQUIV="EXPIRES" ...> dcrite plus bas) :
<META NAME="REVISIT-AFTER" CONTENT="x Days">

Page Web chargeant automatiquement une autre page aprs un laps de temps donn (technique typiquement utilise par les sites de WebCam, ou pour indiquer le changement d'adresse d'un site) :
<META HTTP-EQUIV="REFRESH" CONTENT="secondes; URL=URL">

Indication de la dure de validit (expiration) d'une page dans le cache d'un navigateur ou dans l'index d'un moteur de recherche :
<META HTTP-EQUIV="EXPIRES" CONTENT="Tue, 01 Jun 1999 19:58:02 GMT">

Cette balise indique qu'au-del de la date/heure spcifie : o le browser, lorsque l'on se rend cette URL, doit tlcharger une nouvelle fois la page (et ne pas afficher celle qu'il possde dans son cache) o le moteur de recherche doit dtruire la rfrence cette page dans son index Pour spcifier qu'une page "expire toujours" (c'est--dire qu'elle doit systmatiquement tre renvoye par le serveur au navigateur chaque fois que l'utilisateur se rend cette URL) utiliser simplement la valeur d'attributCONTENT="0" Balises LINK ( placer dans le bloc
<HEAD>...</HEAD>)

Spcification d'un fichier "favicon" (icne miniature 16x16 pixels, au format des icnes Windows, utilise dans l'affichage des URLs et des bookmarks partir des versions de navigateurs IE 5 et Mozilla 1) :
<LINK REL="SHORTCUT ICON" HREF="URL_fichier.ico">

En l'absence de cette balise, avec IE 5.0 et Mozilla 0.9.6 c'est le fichier favicon.ico se trouvant la racine de l'arborescence du site qui sera automatiquement utilis. Donc avec Mozilla 1.0 il faut que la page contienne

Exercices HTML

www.rahmouni.ma

explicitement la balise ci-dessus, mais celle-ci peut prendre aussi d'autres formes (non supportes par IE) telles que : <LINK REL="ICON" HREF="URL_fichier.ico" TYPE="image/x-icon">, ou <LINK REL="ICON" HREF="URL_fichier.png" TYPE="image/png">, ou
<LINK REL="ICON" HREF="URL_logo_anim.gif" TYPE="image/gif">

On pourrait cependant obtenir un comportement similaire IE avec Mozilla 1.0 (chargement automatique du fichier favicon.ico se trouvant la racine de l'arborescence) en introduisant manuellement la dfinition suivante dans le fichier de prfrences Mozilla :
user_pref("browser.chrome.favison",true);

Exercices HTML

www.rahmouni.ma

Exercice
Ralisez la page Web reprsente par l'image ci-dessous. Vous trouvez l'image "fond_spirale.gif" placer en arrire-plan dans le fichier compress html6.zip Essayez aussi de placer l'image "dgr_gris.gif" en arrire-plan.

Exercices HTML

www.rahmouni.ma

Solution
<HTML> <HEAD> <TITLE>Corrig Exercice Attributs de page</TITLE> </HEAD> <BODY BACKGROUND="fond_spirale.gif" TEXT="navy" LINK="red" VLINK="maroon"> <BLOCKQUOTE> <H1>Exercice Attributs de page</H1> <UL> <LI>Cette page contient l'image "fond_spirale.gif"... <LI>Pour mnager de la place gauche pour la spirale... <LI>La couleur par dfaut du texte est le "navy"... <LI>Les liens... </UL> <TABLE ALIGN="center" WIDTH="60%" BGCOLOR="silver" BORDER="1"> <TR> <TH COLSPAN="2">Couleur de fond "silver"</TH> </TR> <TR> <TH BGCOLOR="yellow">Fond "yellow"</TH> <TH BGCOLOR="lime">Fond "lime"</TH> </TR> </TABLE> </BLOCKQUOTE> </BODY> </HTML>

Centres d'intérêt liés

Vous aimerez peut-être aussi