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

Présentation au sujet: "Créer son site web Chapitre II. Les caractères spéciaux Les navigateurs ne reconnaissent pas les caractères spéciaux. Heureusement chaque caractère possède."— Transcription de la présentation:

1 Créer son site web Chapitre II

2 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 :

3 Images La balise permet de lier une image numérique à un document en spécifiant sa source via l'attribut "src". 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é.

4 Attributs de la balise 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:

5 Exemples sur Exemple 1 : Explication si l’image n’apparaît pas Exemple 2 : image avec bordure Exemple 3 : image provenant de l’Internet http://www.html.net/logo.png Exemple 4 : l’image joue le rôle de lien

6 Exemples de la balise Exemple 6 : image avec largeur précise Exemple 7 : image avec largeur et longueur précises Exemple 8 : image avec largeur proportionnelle à celle de l’image Remarque: pour ne pas déformer l’image, utilisez l’un des deux attributs width ou height

7 Ancre Le lien externe 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: URL: uniform resource locator Représente le lien hypertexte vers une autre ressource. Exemple: vers google http://www.google.com/

8 Attributs de la balise L’ancre (en anglais, Anchor) peut avoir deux types d’attribut: permet de créer un lien (ou pointeur) vers un "objet« (lien externe ou fichier externe) 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 en mettant le nom de l'ancrage précédé d'un # L’ancrage est créé par: Le lien est créé par: lien vers…

9 Exemples de liens hypertextes Lien vers un fichier html: Vers la page d’acceuil Lien vers un URL: Visitez la page Schoolnet http://www.schoolnet.edu.lb/ Lien vers un courrier: Execice résolu sur les liens

10 Les tables La balise nous permet de tracer une table Les étapes de création d’une table sont les suivantes: 1.Ouvrir la table par 2.Ouvrir la ligne par (Table Row). 3.Ouvrir la cellule par et la fermer par (Table Data) 4.fermer la ligne par 5.fermer la table par Remarque: vous devez procéder de méme pour créer une ligne ou une colonne suplémentaire

11 Les tables Commandes de base Les commandes de base pour créer des tableaux en HTML sont les suivantes: Cette commande est la commande principale pour ouvrir une zone de tableaux. Commande pour définir une rangée. Il faut utiliser une séquence pour chacune des rangées requises, à l'intérieur de la zone 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:

12 Exemple (R1,C1) (R1,C2) (R1,C3) (R2,C1) (R2,C2) (R2,C3)

13 Attributs de la balise 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".

14 Exemple de création d’une table Cellule 1 Cellule 2 Cellule 3 Cellule 4

15 Exemple de création d’une table Exemple 3 : Cellule 1 Cellule 2 Cellule 3 Cellule 4

16 Attributs de la balise 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 ".

17 Practice HTML table tag Add and remove rows and cols here and the see the result: Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2