- Les deux formats d'image reconnus sur le Web, sont le format GIF et le format JPEG.
Pour le format GIF, on retiendra la caractéristique "entrelacé" qui permet de charger
progressivement l'image lors de l'ouverture de la page. Ces deux formats donnent des résultats assez
équivalents bien que JPG soit plutôt recommandé pour des images avec des tons nuancés ou dégradés.
- Les images de grandes tailles peuvent provoquer certains problemes lors de l'affichage.
Plus l'image sera grande, plus le temps de chargement sera
long... au risque de décourager vos visiteurs. Si cela est possible, une image en 16couleurs peut très bien faire
l'affaire. Présenter une petite image indiquant un lien vers l'image complète est également un bon conseil.
Le code Html pour afficher une image est :
<IMG SRC="Adresse de l'image"> afficher l'image qui se trouve à l'adresse indiquée.
La balise image possède de nombreux attributs.
Remarques:
- En Html, l'image ne fait pas partie de votre document, c'est pas comme dans les fichiers PDF par exemple.C'est le navigateure qui va la chercher à l'adresse indiquée.
Généralement, on place les images dans le même répertoire que les pages Html.
- Prévoir un texte (alt="...") pour les navigateurs n'ayant pas l'option image activée, permet au lecteur de ne pas
perdre le fil de l'exposé et peut-être d'activer cette option pour découvrir votre oeuvre.
- Il est important pour la fluidité de l'affichage de préciser la taille en hauteur et largeur de l'image car
le navigateur peut ainsi connaissant l'emplacement à réserver pour celle-ci, continuer à afficher le texte.
L'attribut align positionne l'image par rapport au texte.
<IMG SRC="logo.gif" align=TOP> apprendre le html
<IMG SRC="logo.gif" align=CENTER> apprendre le html
<IMG SRC="logo.gif" align=BOTTOM> apprendre le html
- Les balises pour attribuer des liens aux images sont :
<A HREF="fichier.htm"><IMG SRC="logo.gif"></A>
Chapitre VII: LES SÉPARATEURS
Les navigateurs intègrent un outil de mise en forme intéressant pour clarifier la présentation de votre texte. C'est la
ligne horizontale.
La syntaxe est simple:
<HR> Insérer une ligne horizontale, Ligne horizontale (Horizontal Rule).
Les valeurs par défaut de la balise <HR> sont : une épaisseur de trait de 2 pixels, un
alignement centré et une largeur de 100% de la fenêtre. Vous pouvez très bien modifier au gré de votre fantaisie
les valeurs de ces différents attributs.
Il est donc tout à fait équivalent d'écrire:
<HR> ou
<HR size=2 align=center width="100%">
Remarque:
On préférera spécifier la largeur en % de la fenêtre plutôt qu'en pixels car l'affichage s'adaptera ainsi
à toutes les tailles et résolutions d'écran.
Chapitre VIII: LES ARRIÈRE PLANS
Le langage Html permet d'agrémenter la présentation du document d'un arrière-plan (background) coloré ou
composé d'une image.
La balise à utiliser est très simple :
Couleur d'arrière-plan: <BODY BGCOLOR="#rrvvbb">
Voici un petit programme à tester:
<BODY BGCOLOR="#000088">
<H1> Apprendre le HTML </H1>
</BODY>
Heureusement, on a des balises prévues pour modifier les couleurs par defaut utiliseées par le navigaeur pour afficher le texte.
Couleur de texte <BODY TEXT="#rrvvbb">
Couleur de lien <BODY LINK="#rrvvbb">
Lien visité <BODY VLINK="#rrvvbb">
Lien actif <BODY ALINK="#rrvvbb">
Reprenons notre exemple:
<BODY BGCOLOR="#CCCCCC" TEXT="#990000">
<H1> Apprendre le HTML </H1>
</BODY>
On peut aussi prévoir un fond en image.
Texture d'arrière-plan:
<BODY BACKGROUND="Adresse">
Ce qui peut nous donner :
<BODY BACKGROUND="PAPER.gif">
<H1>Apprendre le html </H1>
</BODY>
Et voilà!!
waw!! c'est jolie, non?!!
Chapitre IX: LES TABLEAUX
En Html, les tableaux surtout à placer des éléments à l'emplacement que vous souhaitez.
Un tableau est composé de lignes et de colonnes qui forment les cellules du tableau.
Les balises de base sont :
Voici un tableau à deux lignes et deux colonnes, et donc à quatre cellules :
<TABLE>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
Et voilà!! ça ressemble à ça sur votre navigateur
1
2
3
4
Et maintenant avec des bordures :
Bordure de cadre [Border] <TABLE border=?></TABLE>
Voilà un exemple!!
<TABLE border=2>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
ET voilà!!
1
2
3
4
Il y a encore trois éléments qu'on peut les modifier ( vous pouvez les laisser par defaut si vous voulez) :
- L'espace entre les cellules ou l'épaisseur des lignes du quadrillage :
<TABLE cellspacing=?>
- L'enrobage des cellules ou l'espace entre le bord et le contenu :
<TABLE cellpadding=?>
- La largeur de la table
<TABLE width=?>
<TABLE width=%>
Voilà un exemple!!
<TABLE border=2 cellspacing=10>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
Et voilà à quoi ça ressemble!!
1
2
3
4
Un autre exemple!!
<TABLE border=2 cellpadding=10>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
Et voilà à quoi ça ressemble!!
1
2
3
4
Chapitre X: LES CELLULES DES TABLEAUX
Nous n'en avons pas fini avec les tableaux. Allons plus loin dans notre étude en nous penchant sur les cellules de tableaux.
Avant toutes choses, les cellules peuvent contenir tous les éléments
Html déjà passés en revue soit :
· du texte
· des images
· des liens
· des arrière-plans
· des tableaux
Bien que l'allure de votre tableaux soit déjà déterminée, chaque cellule est en quelque sorte un petit univers à part
qui a ses propres spécifications. Découvrons les balises.
Largeur d'une cellule :
<TD width=?> en pixels
<TD width=%> en pourcentage
Fusion de lignes <TD rowspan=?>
Fusion de colonnes <TD colspan=?>
Prénons un petit exemple :
On veut un tableau centré qui occupe 60% de la fenêtre avec trois colonnes égales.
<CENTER><TABLE width=60% border=1> <
<TR>
<TD>cel 1</TD>
<TD>cel 2</TD>
<TD>cel 3</TD>
</TR>
</TABLE></CENTER>
Prenons le même tableau, cette fois avec 2 lignes.
<CENTER><TABLE width=60% border=1>
<TR>
<TD width=33%>cel 1</TD>
<TD width=33%>cel 2</TD>
<TD width=34%>cel 3</TD>
</TR>
<TR>
<TD width=33%>cel 1</TD>
<TD width=33%>cel 2</TD>
<TD width=34%>cel 3</TD>
</TR>
</TABLE></CENTER>
cel 1
cel 2
cel 3
cel 1
cel 2
cel 3
Maintenant, on veut que la première ligne prenne toute la largeur de la ligne. La première cellule doit donc déborder sur 3
cellules horizontales.
<CENTER><TABLE width=60% border=1>
<TR>
<TD colspan=3>cel 1</TD>
</TR>
<TR>
<TD width=33%>cel 1</TD>
<TD width=33%>cel 2</TD>
<TD width=34%>cel 3</TD>
</TR>
</TABLE></CENTER>
cel 1
cel 1
cel 2
cel 3
On veut maintenant que la première colonne prenne toute la hauteur de la colonne. La première
cellule doit donc déborder sur 2 cellules verticales.
<CENTER><TABLE width=60% border=1>
<TR>
<TD width=33% rowspan=2>cel 1</TD>
<TD width=33%>cel 2</TD>
<TD width=34%>cel 3</TD>
</TR>
<TR>
<TD width=33%>cel 2</TD>
<TD width=34%>cel 3</TD>
</TR>
</TABLE></CENTER>
cel 1
cel 2
cel 3
cel 2
cel 3
Maintenant voilà!!
Maintenant prénons ce tableau
cel 1
cel 1
cel 2
cel 3
avec quelques modifications...
<CENTER><TABLE width=60% border=1>
<TR>
<TD colspan=3 align=center>Prix par article</TD>
</TR>
<TR>
<TD width=33% align=center>Article</TD>
<TD width=33% align=center>Ref</TD>
<TD width=34% align=center>Prix TTC</TD>
</TR>
</TABLE></CENTER>
ça devient comme ça!!
Prix par article
Article
Ref
Prix TTC
La couleur est un élement indispensable sur les sites web et donc, il est aussi possible de changer la couleur de la cellule.
- Couleur de la cellule:<TD BGCOLOR="#rrvvbb";
Notre dernier exemple pourrait donc devenir :
<CENTER><TABLE width=60% border=1>
<TR>
<TD colspan=3 align=center bgcolor="#990000">Prix par article</TD>
</TR>
<TR>
<TD width=33% align=center>Article</TD>
<TD width=33% align=center>Ref</TD>
<TD width=34% align=center>Prix TTC</TD>
</TR>
</TABLE></CENTER>
Prix par article
Article
Ref
Prix TTC
C'est attirant ne c'est pas?!!
Chapitre XI: LES FRAMES
Dans ce dernier chapitre on va apprendre comment utiliser les 'FRAMES' (cadres en français).
Rien de plus facile que les frames, mais en même temps rien de plus délicat dangereux (risque de
plantage).
l'autre problème c'est que les FRAMES peuvent ne pas être reconnus par tous les navigateurs!!
Débutons avec ces balises de base!!
- Zone avec des fenêtres
<FRAMESET> Début de zone avec des fenêtres.
</FRAMESET> Fin de zone avec des fenêtres.
- Agencement des fenêtres
<FRAMESET ROWS="..."> Fenêtres horizontales.
<FRAMESET COLS="..."> Fenêtres verticales.
Dans ce chapitre il est nécessaire de travailler sur des exemples, et voilà le premier :
Agencement horizontal.
<HTML>
<HEAD></HEAD>
<FRAMESET ROWS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>
</HTML>
Et voila à quoi ça ressemble.
Important!!
<FRAMESET></FRAMESET> remplace <BODY></BODY>
L'attribut ROWS="hauteur1,hauteur2,...,hauteurN" définit la hauteur des différentes fenêtres en cas de
division horizontale.
La hauteur s'exprime en pixels ou en %.
agencement vertical.
<HTML>
<HEAD></HEAD>
<FRAMESET COLS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>
</HTML>
Et voilà!!
Important!!
L'attribut COLS="largeur1,largeur2,...,largeurN" définit la largeur des différentes fenêtres en cas de division
verticale.
La largeur s'exprime en pixels ou en %.
Essayons de mélanger les deux ensemble
<FRAMESET ROWS="30%,70%">
<FRAME>
<FRAMESET COLS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
vous avez remarquez que nos frames sont vides pour l'instant on va essayer donc de leur charger par les attributs de la balise suivante:
<FRAMESET ROWS="30%,70%">
<FRAME SRC="cours1.htm">
<FRAMESET COLS="30%,70%">
<FRAME SRC="cours2.htm">
<FRAME SRC="cours3.htm">
</FRAMESET>
</FRAMESET>
Les fichiers cours1.htm, cours2.htm et cours3.htm sont des fichiers html à constuire et à mettre dans le même repertoire que le fichier frames.
cours1.htm :
<HTML><BODY>
<H4>Apprendre le HTML</H4>
</BODY></HTML>
cours2.htm :
<HTML><BODY>
<H4>Apprendre le CSS</H4>
</BODY></HTML>
cours3.htm :
<HTML><BODY>
<H4>Apprendre le PHP/MYSQL</H4>
</BODY></HTML>
Et voilà la resultat de notre travail!!
Dans les frames, les ascenseurs apparaissent automatiquement.
Par l'attribut de la balise <FRAME SCROLLING="yes/no/auto"> vous pouvez indiquer si la fenêtre doit posséder une barre de défilement.
Pou cette balise <FRAME NAME="NOM">, Name indique le nom de la fenêtre de telle sorte que cette frame puisse être utilisée comme cible d'un lien hypertexte.
Maintenant, on veut faire un lien sur cours2 pour afficher le contenu de ce lien dans cours3.
voici notre code.
<FRAMESET ROWS="30%,70%">
<FRAME SRC="cours1.htm">
<FRAMESET COLS="30%,70%">
<FRAME SRC="cours2.htm">
<FRAME SRC="cours3.htm" NAME="fenetreC">
</FRAMESET>
</FRAMESET>
Et on met un lien vers cours1.htm dans le fichier cours2.htm en désignant comme cible la frame cours3.
<HTML><BODY>
<A HREF="cours1.htm" TARGET="fenetreC"><H4>Apprendre le Html</H4></A>
</BODY></HTML>
Remarque :
- L'attribut TARGET peut aussi prendre certaines valeurs prédéfinies :
_blank qui indique au browser qu'il doit créer une nouvelle fenêtre ou un nouvel onglet afin d'y afficher le fichier.
_self qui indique que le fichier sera chargé dans la même fenêtre que celle dans laquelle se trouve le lien.
_top qui implique l'affichage du fichier sur toute la surface de la fenêtre du browser.
- pour indiquer le texte que doivent afficher les navigateurs incapables de gérer les frames on utilise les balises suivantes :
