HTML5/CSS3/PHP
Année universitaire 2020-2021
1
Plan
Les images
Les tableaux
Les cadres
Les liens
2
HTML les images
la taille des images est parmi les précautions à prendre en
considération dans le développement des sites web. Plus l'image est
grande, plus le temps de chargement est long...
A cette fin, une convention a été adopté :· Les 3 formats d'image
(maximum 256 couleurs) reconnus sur la Toile, sont le format
JPEG,GIF, et le PNG.
Ces 3 formats donnent des résultats équivalents bien que PNG et
JPG sont plus recommandés pour des images avec des tons dégradés
ou nuancés.
3
HTML les images
Des images peuvent être insérées dans un document HTML, et
elles sont au formatJPG, GIFou JPG.
JPG GIF PNG
<IMG SRC="nom_image.jpg"> pour insérer une image locale,
où nom_image.jpg est le nom du fichier avec son chemin relatif à
partir du répertoire du document HTML
4
HTML les images
Une image s’insère grâce à la balise <IMG> qui ne se ferme pas.
Voici une liste des attributs utiles :
Ø SRC="adresse" : l’adresse absolue ou relative de l’image
(obligatoire).
Ø WIDTH="nombre" et HEIGHT="nombre" : la largeur et la
hauteur de l’image, en pixels, si elle est différente de la taille
normale de l’image d’origine.
Ø ALT="texte" : donne le texte de la bulle d’aide de l’image
Ø BORDER="nombre" : la largeur de la bordure autour de l’image.
5
Principaux attributs de la balise IMG
6
Insertion des images
<!DOCTYPE html>
<html>
<body>
<h2>Titre_image</h2>
<img src="[Link]" alt="DescImage" style="width:304px;
height:228px;">
</body>
</html>
Images dans un autre dossier:
<img src="/images/[Link]" alt="nomimage" style="width:128px;
height:128px;">
o Images dans un autre serveur:
<img src="[Link] alt=" descriptionImg">
7
HTML les images
Image comme arrière-plan
Cette image est affichée en mosaïque par le navigateur.
<BODY BACKGROUND="Adresse_img">
Exemple :
<BODY BACKGROUND="[Link]">
<H1>Bonjour</H1>
</BODY>
8
HTML LES TABLEAUX
Un tableau est composé de lignes et de colonnes qui forment les
cellules du tableau.
En Html, les tableaux servent non seulement stoquer des nombres mais
surtout à placer des éléments à l'emplacement souhaité.
Les balises de base sont donc:
9
HTML LES TABLEAUX
Définir une bordure :
Bordure de cadre [Border] <TABLE border=?></TABLE>
<TABLE border=2>
<TR>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>
Définir la couleur de fond : <TABLE bgcolor =?>
Exemple :
<table bgcolor="#E6FFE6" >
10
HTML LES TABLEAUX
Définir la largeur et la hauteur :
Les deux attributs HEIGHT (« hauteur ») et WIDTH (« largeur »).
On peut renseigner la largeur etla hauteur suivant deux unités. Si on donne
une valeur entière, c’est de pixels. Si on fait suivre la valeur d’un signe %, il
s’agit d’un pourcentage par rapport au conteneur.
Exemple : Un tableau centré qui occupe 60% de la fenêtre avec sur une ligne,
trois colonnes.
<CENTER><TABLE width=60% border=1>
<TR>
<TD>cellule1</TD>
<TD>cel. 2</TD>
<TD>3</TD>
</TR>
</TABLE></CENTER>
11
HTML LES TABLEAUX
Les cellules d’un tableau peuvent contenir tous les éléments Html soit
::
Ø du texte
Ø des images
Ø des liens
Ø et même des tableaux
Les opérations de fusion:
Ø Fusion de lignes <TD rowspan=?>
Ø Fusion de colonnes <TD colspan=?>
12
