Créer son site web Chapitre II. Les caractères spéciaux Les navigateurs ne reconnaissent pas les...

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 &nbsp Espace

Copywrite &copy ©

less than &lt <

grater than &gt >

e acute (e accent aigu) &eacute é

e grave (e accent grave) &egrave è

a grave (a accent grave) &agrave à

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>