Embed Size (px)
Citation preview
Créer son site webChapitre II
Les caractères spéciaux
Les navigateurs ne reconnaissent pas les caractères spéciaux. Heureusement chaque caractère possède une abréviation (ENTITY) permettant de le coder.
Exemple : Signification HTML Caractères
numbre space   Espace
Copywrite © ©
less than < <
grater than > >
e acute (e accent aigu) é é
e grave (e accent grave) è è
a grave (a accent grave) à à
Images <IMG>
La balise <IMG> permet de lier une image numérique à un document en spécifiant sa source via l'attribut "src" .
<img src= " images/ico_html5.png " > Trois formats d'image qui peuvent être mis sur l'internet sont les formats compressés (petite taille):- le format GIF, utilisé pour des images contenant peu de couleur.- le format JPG, utilisé pour les images contenant beaucoup de couleur, une photo par exemple.- le format PNG, concurrent du gif, il peut contenir plus de couleurs que le gif, cependant, il reste encore peu utilisé.
Attributs de la balise <img>
<img> peut avoir plusieurs attributs tels que: align, border, alt , width, height, hspace, vspace …etc.
ALIGN: prend les valeurs: top, middle, bottom, pour l'alignement vertical et left, right pour l'alignement horizontal
ALT: permet d'afficher un texte lorsque le souris passe au-dessus.
Width: prend des valeurs en pixels (px) et pourcentage (%)
Hspace: l’espace horizontal qui entoure l’image
Vspace : l’espace vertical qui entoure l’image
Exemple:
<img src= " logo.jpg" align= " center " alt= " crdp logo" width= " 100px " vspace = " 10px " >
<img src= " draplib.gif" align= " center " border= " 1 " >
Exemples sur <img>
Exemple 1 : Explication si l’image n’apparaît pas<img src= " logo.png" alt= " crdp_logo " >
Exemple 2 : image avec bordure<img src="images/logo.png " border= " 1 " >
Exemple 3 : image provenant de l’Internet<img src= " http://www.html.net/logo.png " >
Exemple 4 : l’image joue le rôle de lien<a href="http://www.html.net"> <img src="logo.png " > </a>
Exemples de la balise <img>
Exemple 6 : image avec largeur précise
<img src="logo.png" width="141" >
Exemple 7 : image avec largeur et longueur précises
<img src="logo.png" width= " 32" height="32" >
Exemple 8 : image avec largeur proportionnelle à celle de l’image
<img src="logo.png" width= " 40%" >
Remarque: pour ne pas déformer l’image, utilisez l’un des deux attributs width ou height
Ancre <A>
Le lien externe <A> ou ancre permet de créer un lien hypertexte d’un fichier html vers un autre endroit du même fichier, ou vers un fichier situé le même répertoire ou dans un autre répertoire, ou bien, vers une adresse Internet…etc
Syntaxe:
<a href= " URL " >URL: uniform resource locator Représente le lien hypertexte vers une autre ressource .
Exemple:
<A href= " http://www.google.com/ " > vers google </A>
Attributs de la balise <A>
L’ancre (en anglais, Anchor) <a> peut avoir deux types d’attribut:• <A href="objet " > permet de créer un lien (ou pointeur) vers un
"objet« (lien externe ou fichier externe)• <A name="ancrage " > permet de créer un ancrage ayant pour
nom "ancrage« (lien vers un ancre dans le fichier même)
Pour créer un lien vers un ancrage, on utilise un <A href="..."> en mettant le nom de l'ancrage précédé d'un #
L’ancrage est créé par: <A name="ancrage " ></A>
Le lien est créé par:<A href="#ancrage " >lien vers…</A>
Exemples de liens hypertextes
Lien vers un fichier html:
<a href= " index.htm " > Vers la page d’acceuil </a>
Lien vers un URL:
<a href= " http://www.schoolnet.edu.lb/ " > Visitez la page Schoolnet </a>
Lien vers un courrier:
<a href = " mailto:ayammine.mehe.gov.lb?subject=Schoolnet Project " > <a>
Execice résolu sur les liens
Microsoft Office PowerPoint Slide Show
Les tables <table>
La balise <Table> nous permet de tracer une table
Les étapes de création d’une table sont les suivantes:
1. Ouvrir la table par <table>
2. Ouvrir la ligne par <tr> (Table Row).
3. Ouvrir la cellule par <td> et la fermer par </td> (Table Data)
4. fermer la ligne par </tr>
5. fermer la table par </table>
Remarque: vous devez procéder de méme pour créer une ligne ou une colonne suplémentaire
Les tables <table>
Commandes de baseLes commandes de base pour créer des tableaux en HTML sont les suivantes:<TABLE></TABLE> Cette commande est la commande principale pour ouvrir une zone de tableaux.<TR></TR> Commande pour définir une rangée. Il faut utiliser une séquence <TR></TR> pour chacune des rangées requises, à l'intérieur de la zone <TABLE></TABLE> <TD></TD> Commande pour spécifier les données pour chaque rangée comme dans l'exemple ci-dessus. Le code pour produire ce tableau s'écrira donc:
Exemple
<table >
<tr>
<td> (R1,C1) </td>
<td> (R1,C2) </td>
<td> (R1,C3) </td> </tr>
<tr>
<td> (R2,C1) </td>
<td> (R2,C2) </td>
<td> (R2,C3) </td> </tr>
</table>
Attributs de la balise <table>
align : indique l'alignement horizontal de la table, ses valeurs sont "left", "center" ou "right".
bgcolor: spécifie la couleur de l’arrière plan du tableau
border: indique l'épaisseur de la bordure, il prend des valeurs 1, 2 3,…etc. l'épaisseur de la bordure s’exprime en pixels
Cellpadding: spécifie l’espace entre les bordures de la cellule et son contenu
cellspacing : spécifie l’espace entre les cellules
width: indique la largeur d'une table (en anglais, width), il s’exprime en pixels, ou en pourcentage
valign : indique l'alignement vertical du contenu dans une cellule. ses valeurs sont "top", "middle" ou "bottom".
Exemple de création d’une table
<table border="1" width="50%" align="center" bgcolor="magenta" dir="ltr " >
<tr valign= " middle " bordercolor= " #FF0000 " >
<td align="center" valign="middle" > Cellule 1 </td>
<td align=“left" valign=“button" > Cellule 2 </td>
</tr>
<tr align= " center " bgcolor= " #00FF00 " >
<td> Cellule 3 </td>
<td> Cellule 4 </td>
</tr>
</table>
Exemple de création d’une table
Exemple 3 :
<table border= "1" >
<tr>
<td align="right" valign="top" > Cellule 1 </td>
<td align= " left" valign=“button" > Cellule 2 </td>
</tr>
<tr>
<td> Cellule 3 </td>
<td> Cellule 4 </td>
</tr>
</table>
Attributs de la balise <tr>
align : indique l'alignement horizontal de la table, ses valeurs sont "left", "center" ou "right".
bgcolor: spécifie la couleur de l’arrière plan de la cellule
valign : indique l'alignement vertical du contenu dans une ligne. ses valeurs sont "top", "middle" ou "bottom " et " baseline ".
<html><head>
<title>Practice HTML table tag</title></head>
<body>
<p>Add and remove rows and cols here and the see the result:</p>
<table border="1" bgcolor="#00ccff" cellspacing="10" cellpadding="10">
<tr>
<td bgcolor="magenta">Row 1, Column 1</td>
<td bgcolor="magenta">Row 1, Column 2</td>
</tr>
<tr>
<td bgcolor="yellow">Row 2, Column 1</td>
<td bgcolor="yellow">Row 2, Column 2</td>
</tr>
</table>
</body></html>
