Cours Html - WikiEducator

Transcription

BOUBA Fanta HTML / PHP CHP 0 Généralités
CHP 1
HTML (Hypertext Markup Language)
I Premiers pas Qu'est ce que l'HTML ? Le langage HTML n'est pas un langage de programmation proprement dit ! Ce sont "simplement" des balises pour mettre en forme (avec des liens, en tableau, ...) du texte et des images.
Qu'est ce qu'une balise ? Une balise est une "instruction" comprise entre crochets < > qui possède un nom et parfois des attributs. Presque toutes les balises doivent être ouvertes puis refermées. On retrouvera donc souvent une balise de début et une balise de fin. La balise de fin porte le même nom que la balise de début à l'exception du nom du la balise qui est précédé du signe /. Nous aurons donc par exemple : (ouverture) <XYZ> et (fermeture) </XYZ>. Le nom de la balise (contenu entre les crochets) n'est pas sensible à la casse, il peut être écrit indifféremment en majuscule, en minuscule ou un mélange des 2. De quoi avezvous besoin ? un navigateur (Internet Explorer, Netscape, Mozilla, Opera...) un éditeur HTML (Notepad, Blocnotes, DreamWeaver, …) Commencez par ouvrir le Blocnotes (ou un autre éditeur HTML) pour pouvoir taper le code. Voici le code à taper : <HTML> <HEAD> <TITLE>Ma première page en HTML</TITLE> </HEAD> <BODY> Bonjour, les DUT de l’ESP ! </BODY> </HTML> Enregistrez le document au format HTML (*.html ou *.htm). 2008/2009
1/27
Pour cela, dans la case "Nom", tapez : index.html Et dans la case "Type", choisissez Tous(*.*) dans la liste déroulante. Voila votre page est enregistrée. Vous pouvez ouvrir votre navigateur et visualiser votre première page. Explications des nouvelles balises utilisées : <html> et </html> : la première informe votre navigateur qu'il va afficher une page HTML. Cette balise doit être la première de votre code. La seconde est la balise de fin. Elle referme la première. (Remarquez le / devant le mot contenu entre crochets). Elle doit être la dernière de votre code HTML et signifie la fin de votre code HTML.
<head> et </head> : la première ouvre l'entête de votre page. Cet entête comprend pour l'instant le titre de votre page. Cette balise est toujours placée juste après la balise <html>. La seconde, referme l'entête de votre page (remarquez encore une fois le / devant le mot entre crochets).
<title> et </title> : la première ouvre la partie titre de votre page. Ce titre sera placé dans la barre tout audessus de votre navigateur. La seconde referme la première encore une fois en plaçant un / devant le mot entre crochets. La balise "title" doit être ouverte puis refermée à l'intérieur de la balise "head". C'est à dire qu'il faut que la balise "title" doit être ouverte puis refemée avant que le balise "head" ne soit refermée. <body> et </body> : la première ouvre le début du corps de votre document. C'est là que vous allez placer textes, images et tout ce que contiendra votre page. Cette balise doit se situer après la balise de fermeture de l'entête (=> </head>). La seconde referme la première et maintenant je suppose que vous avez compris le principe pour fermer une balise... Première constatation : Le code d'une page web est composé de 2 parties, l'entête de la page (HEAD) et le corps (BODY). Seul le corps de la page est affiché à l'écran (dans votre première page, il n'y a que la phrase "Bonjour,..." qui s'est affichée).
II Mise en forme du texte
1. Les couleurs
Maintenant que nous savons comment créer une page très simple, nous allons pourvoir mettre le texte en forme. Commençons par mettre le texte en couleur. <HTML> <HEAD> 2008/2009
2/27
<TITLE>Texte en couleurs</TITLE> </HEAD> <BODY> Rouge Rouge Vert Vert Bleu Bleu Jaune Jaune </BODY> </HTML> Vous pouvez également mettre le fond de l'écran en couleur comme sur ce site (plutôt qu'en blanc par défaut). <HTML> <HEAD> <TITLE>Fond d'écran en couleur</TITLE> </HEAD> <BODY bgcolor="#000000"> texte blanc sur fond noir </BODY> </HTML> Vous avez pouvez maintenant enregistrer votre page dans la Blocnotes sous le même nom. Pas besoin de fermer votre navigateur puis de ré ouvrir votre page. Il suffit de réactualiser la page en cliquant sur soit Refresh, soit Rafraîchir ou encore Actualiser selon le navigateur... (ou simplement la touche F5)
Explications des nouvelles balises utilisées : : cette balise permet de faire un saut de ligne. Lorsque vous écrivez du texte dans une page web, il y a un retour automatique à la ligne lorsque le texte atteint le bord droit de l'écran. Avec la balise , vous pourrez faire des sauts de ligne à votre guise. Un "BR" correspond à un saut de ligne, pour laisser une ligne blanche entre 2 paragraphes par exemple il faut placer 2 "BR" (==> ). Il n'y a pas de balise de fin.
 et : elles permettent de modifier l'apparence du texte. Elle doit recevoir des informations provenant d'attribut(s) pour connaître la mise en forme à appliquer. Pour l'instant, nous avons juste vu l'attribut "color" qui permet de mettre 2008/2009
3/27
le texte en couleur. Les couleurs les plus fréquentes peuvent être nommées explicitement en anglais (red, green, blue,...) sinon il faut placer le code Hexadécimal de la couleur voulue. La couleur du texte est par défaut noir (#000000 ou black). nous avons également vu l'attribut "bgcolor" dans <BODY> : "bgcolor" (==>background color : couleur de fond) permet de mettre le fond de l'écran en couleur tout comme le fait "color" pour le texte. C'est le même principe pour le code des couleurs. La couleur du fond est par défaut blanc (#FFFFFF). Petites "définitions" : Un attribut est un paramètre qui fournit des indications à une balise. Il possède un nom et très souvent une valeur à préciser (nom = "valeur"). Il se rajoute dans la balise de début, c'est à dire toujours entre les < > après le nom de la balise (par exemple : .
Le code Hexadécimal qui permet de définir une couleur est composé de 6 caractères précédés de #. Ces 6 caractères définissent la "teneur" en rouge, vert et bleu (les couleurs de bases) de la couleur a former. Il n'y a que 16 caractères possibles : 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
2. Police et taille
Nous allons maintenant faire varier la taille et la police de caractère du texte. <HTML> <HEAD> <TITLE>Taille et police du textes</TITLE> </HEAD> <BODY> Taille 7 Taille 6 Taille 5 Taille 4 Taille 3 (par défaut) Taille 2 Taille 1 Taille +4 Taille +3 Taille +2 Taille +1 Taille par défaut ( => 3 ) Taille 1 2008/2009
4/27
Taille 2 Taille 4 en Verdana Taille 3 en Comic sans MS Taille normal en Arial si la police
existe sinon en Times New Roman en couleur #336699 </BODY> </HTML> Ce qui donnera une page dont le contenu sera comme ceci : Taille 7 Taille 6 Taille 5 Taille 4 Taille 3 (par défaut) Taille 2 Taille 1 Taille +4 Taille +3 Taille +2 Taille +1 Taille par défaut ( => 3 ) Taille 1 Taille 2 Taille 4 en Verdana Taille 2 en Comic sans MS Taille normal en Arial si il existe sinon en Times New Roman en couleur #336699 Vous avez pouvez maintenant enregistrer votre page sous le même nom (ou un autre) et visualiser le résultat dans votre navigateur. Explications des nouveaux attributs utilisés : l'attribut "size" : "size" (==> taille) permet de modifier la taille du texte compris entre et . Vous avez le choix entre donner un nombre entre 1 et 7 (par défaut => 3) ou bien donner une valeur de "décalage" par rapport à la taille par défaut du navigateur ("2", "1", "+1", "+2", "+3", "+4"). l'attribut "face" : "face" (==> apparence) permet de choisir la police dans laquelle le texte sera affiché. 2008/2009
5/27
Vous pouvez préciser plusieurs noms de police séparés par des ','. Si la navigateur ne reconnaît pas le premier nom, il essayera avec le suivant...Si il ne reconnaît aucun nom, il utilisera la police par défaut du navigateur utilisé. Petites remarques : Vous pouvez tout à fait cumuler les attributs dans une balise (séparés par un espace). Dans le code cidessous nous combinons 3 attributs : Taille 4 en rouge en Verdana Inutile d'utiliser des polices très spéciales car si les visiteurs ne l'ont pas sur leur ordi, le navigateur ne la reconnaîtra pas et donc ne l'utilisera pas.
3. Centré, gras, ...
Nous allons à présent voir comment mettre du texte en gras, italique,.... <HTML> <HEAD> <TITLE>Texte en gras, italique, centré</TITLE> </HEAD> <BODY> texte en gras texte en italique texte souligné <CENTER>texte centre</CENTER> <! On peut également imbriquer les balises > <CENTER>texte centré en gras</CENTER> <! Mais il faut faire attention à refermer les balises dans le bon ordre comme cidessus ! <CENTER>......</CENTER> est incorrect > <! Nous pouvons également réutilisé la balise FONT > <CENTER>texte en rouge, gras, centré de taille 2</CENTER> </BODY> </HTML> Ce qui donnera une page dont le contenu sera comme ceci : texte en gras texte en italique texte souligné texte centre
texte centré en gras
texte en rouge, gras, centré de taille 2
2008/2009
6/27
Vous avez pouvez maintenant enregistrer votre page et la visualiser dans votre navigateur. Explications des nouvelles balises utilisées : et : écrit le texte en gras. et : écrit du texte en italique. en gras. et : souligne du texte. Evitez d'utiliser trop cette balise car un texte souligné peut être confondu avec un lien et ça peut être gênant pour le visiteur. <center> et </center> : centre le texte par rapport à l'écran. <! et > : Ces balises permettent de commenter votre code. Le texte compris entre ces balises ne sera pas pris en compte par le navigateur ( ==> pas affiché !). Le commentaire peut s'étendre sur plusieurs lignes. Faites attention à bien fermer le commentaire (==> ">") sinon la fin de votre code ne sera pas affichée !. Remarques importantes : Attention à bien refermer vos balises (avec la balise de fin) sinon la suite du texte aura également les propriétés de la balise non refermée. Par exemple si vous oubliez de refermer la balise pour placer des commentaires (<! ... >), la fin de votre code ne s'affichera pas ! Si vous voulez cumulez des balises, pour par exemple mettre un texte en gras, en italique et centré, il faut bien faire attention à l'ordre des balises pour les refermer
Voici ce qu'il ne faut pas faire : <CENTER>mon texte</B</CENTER> Il faut les refermer dans l'ordre inverse de l'ouverture : <CENTER>mon texte</CENTER> C'est le même principe pour toutes les balises !
4. Les paragraphes
Voici maintenant quelques traitements particuliers pour les textes. <HTML> <HEAD> <TITLE>Paragraphes et retraits</TITLE> </HEAD> 2008/2009
7/27
<BODY> Paragraphes : Vous pouvez former des paragraphes si vous le souhaitez ce qui vous permettra d'aligner du texte soit à gauche (alignement par défaut) soit à droite, au centre ou encore en justifié texte aligné à droite texte aligné au centre texte aligné à gauche texte justifié : blablablablablablablablabla blablablablablablablablablablabla blablablablablablablablabla blablablablablablablablablablabla blablablablablablablablabla blablablablablablablablablablabla blablablablablablablablabla blablablablablablablablablablabla retrait de texte : <BLOCKQUOTE>votre texte</BLOCKQUOTE> Titres : <H1>Titre en 1</H1> <H2>Titre en 2</H2> <H3>Titre en 3</H3> <H4>Titre en 4</H4> <H5>Titre en 5</H5> <H6>Titre en 6</H6> <! il n'existe que 6 types de titres de H1 à H6 > </BODY> </HTML> Ce qui donnera une page dont le contenu sera comme ceci : Paragraphes : Vous pouvez former des paragraphes si vous le souhaitez ce qui vous permetra d'aligner du texte soit à gauche (alignement par défaut soit à droite, au centre ou encore en justifié) texte aligné à droite
texte aligné au centre
texte aligné à gauche
texte justifié : blablablablablablablablabla blablablablablablablablablablabla blablablablablablablablabla blablablablablablablablablablabla blablablablablablablablabla blablablablablablablablablablabla
blablablablablablablablabla blablablablablablablablablablabla
2008/2009
8/27
retrait de texte : votre texte
Titres : Titre en 1
Titre en 2
Titre en 3
Titre en 4
Titre en 5
Titre en 6
Vous pouvez maintenant enregistrer votre page et visualiser le résultat dans votre navigateur. Explications des nouvelles balises utilisées : et avec l'attribut "align" : permet de créer un paragraphe avec du texte aligné soit à gauche ("left"), à droite ("right"), au centre ("center") ou en justifié ("justify"). <blockquote> et </blockquote> : permet de décaler un bloc de texte par rapport au bord gauche.
<h1> et </h1> : permet de définir des titres. Il existe 6 types de titres numérotés de 1 à 6. Vous pouvez utiliser le même attribut "align" que celui de . 5. Les listes
Pour présenter une certaine arborescence dans un sommaire par exemple, il est souvent pratique d'utiliser une liste. Ces listes seront numérotées automatiquement... <HTML> <HEAD> <TITLE>Listes</TITLE> </HEAD> <BODY> Chapitre 1 : type disque plein (par défaut) <UL type="disc"> <LI>Page 1</LI> 2008/2009
9/27
<LI>Page 2</LI> <LI>Page 3</LI> </UL> Chapitre 2 : type disque vide <UL type="circle"> <LI>Page 4</LI> <LI>Page 5</LI> <LI>Page 6</LI> </UL> Chapitre 3 : type carré <UL type="square"> <LI>Page 7</LI> <LI>Page 8</LI> <LI>Page 9</LI> </UL> Chapitre 4 : liste numérotée <OL> <LI>Page 10</LI> <LI>Page 11</LI> <LI>Page 12</LI> </OL> Chapitre 5 : liste numérotée avec les lettres de l'alphabet <OL type="a"> <LI>Page 13</LI> <LI>Page 14</LI> <LI>Page 15</LI> </OL> </BODY> </HTML> Ce qui donnera une page dont le contenu sera comme ceci : Chapitre 1 : type disque plein (par défaut) •
•
•
Page 1
Page 2
Page 3
Chapitre 2 : type disque vide o
Page 4
2008/2009
10/27
o
o
Page 5
Page 6
Chapitre 3 : type carré 


Page 7
Page 8
Page 9
Chapitre 4 : liste numérotée 1. Page 10
2. Page 11
3. Page 12
Chapitre 5 : liste numérotée avec les lettres de l'alphabet a. Page 13
b. Page 14
c. Page 15
Vous pouvez maintenant enregistrer votre page et la visualiser dans votre navigateur. Explications des nouvelles balises utilisées : <ul> et </ul> avec l'attribut "type" : indique le début et la fin d'une liste de puces (carrées, circulaires, en disque pleins). <ol> et </ol> avec l'attribut "type" : indique le début et la fin d'une liste numérotées (avec des lettres ou des chiffres). <li> : désigne un nouvel élément d'une liste.
Les listes de définition : DL : Definition List
DD : Definition Description
DT : Definition Term
L'élément DL encadre la liste des définitions. il inclu les deux autres balises, DT et DD qui
décrivent respectivement le terme à définir (DT) et sa définition (DD).
La balise DL contient tous les éléments de la liste de définition.
2008/2009
11/27
Le mot que l'on veut définir est précédé de <DT> ; La définition du mot à définir est précédé de <DD>.
Quelques définitions :
<dl>
<dt>html
<dd>langage utilisé pour affiché du contenu sur le web
<dt>balise
<dd>élément présentant certaines fonctionnalités
<dt>attribut
<dd>élément spécifique à une balise pouvant prendre certaines valeurs
</dl> Résultats :
Quelques définitions : html langage utilisé pour affiché du contenu sur le web balise élément présentant certaines fonctionnalités attribut élément spécifique à une balise pouvant prendre certaines valeurs 7. Les séparateurs
Voici comment placer des séparateurs, ce sont des petits traits de séparation pour par exemple placer entre deux paragraphes d'un texte. <HTML> <HEAD> <TITLE>Séparateurs</TITLE> </HEAD> <BODY> Placons quelques séparateurs Séparateur par défaut (largeur 100% et centré) <HR> Largeur du séparateur : 300 pixels <HR width=300> Largeur du séparateur : 50% de la largeur de l'écran <HR width="50%"> Taille du séparateur : 10 pixels <HR size=10> Couleur du séparateur : rouge et la largeur est de 30% <HR color="#FF0000" width="30%"> Séparateur aligné à droite d'une largeur de 30 pixels 2008/2009
12/27
<HR align="right" width=30> Séparateur aligné à gauche d'une largeur de 50 pixels en bleu <HR align="left" width=50 color="#0000FF"> </BODY> </HTML> Ce qui donnera une page dont le contenu sera comme ceci : Plaçons quelques séparateurs Séparateur par défaut (largeur 100% et centré) Largeur du séparateur : 300 pixels Largeur du séparateur : 50% de la largeur de l'écran Taille du séparateur : 10 pixels Couleur du séparateur : rouge et la largeur est de 30% Séparateur aligné à droite d'une largeur de 30 pixels Séparateur aligné à gauche d'une largeur de 50 pixels en bleu Vous pouvez maintenant enregistrer votre page et la visualiser dans votre navigateur. Explications des nouvelles balises utilisées : <hr> : permet de placer un trait séparateur. Nous avons vu plusieurs attributs possibles : "width" pour en préciser la largeur soit en pixels soit en pourcentage, "color" pour lui donner de la couleur (ATTENTION : cet attribut ne fonctionne que sous IE), "align" pour l'aligner soit à gauche ou à droite. Pas de balise de fin
Il y a également moyen de placer des séparateurs "images" et non plus une simple barre (éventuellement en couleur). Mais les images c'est pour plus tard.... III Les chemins d'accès
Avant de continuer, un peu de "théorie" qui nous sera bien utile. Nous allons à dans les prochains chapitres avoir besoin d'autres fichiers, par exemple des fichiers images (*.gif, *.jpg), d'autres pages web (pour les liens hypertextes),...
Pour accéder à ces fichiers, il y a 2 questions à se poser : dans quel répertoire se trouve le fichier et quel chemin emprunter pour accéder à ce répertoire. Pour cela, il faut utiliser les 2008/2009
13/27
chemins
d'accès.
Mais qu'est ce qu'un chemin d'accès ?
C'est le "chemin" à parcourir à travers les différents répertoires pour accéder au(x) fichier(s) voulu(s).
Il y a deux types de chemins d'accès : les chemins absolus et les chemins relatifs •
Les chemins relatifs permettent d'accéder à des fichiers qui se trouvent sur la même machine (ordinateur ou serveur) que le fichier (la page web) qui les appelle. Pour utiliser un fichier image qui se trouve dans le même répertoire que votre page web, il suffira simplement de préciser le nom de ce fichier : nom_du_fichier.ext (le .ext remplace l'extension du fichier dans cet exemple théorique, dans la pratique, nous aurons .gif, .html, .js,...) Si le fichier se trouve dans un sousrépertoire du répertoire qui contient notre page web, il faudra accéder au fichier comme ceci : nom_du_sous_rep/fichier.ext (si c'est un soussousrépertoire => sous_rep/sous_sous_rep/fichier.ext) Si le fichier se trouve dans un autre répertoire, voici comment procéder ../nom_autre_rep/fichier.ext
Le "../" permet de remonter d'un "étage" dans l'arborescence des répertoires.
Si vous devez remonter de 2 "étages" => ../../nom_du_rep/fichier.ext
Si le fichier se situe dans un sousrépertoire d'un autre répertoire ../autre_rep/sous_rep/fichier.ext •
: : les chemins absolus utilisent l'URL du fichier, donc pour accéder à des fichiers qui se situent sur une autre machine (pour les liens hypertextes vers des sites extérieures par exemple), il faut utiliser des chemins absolus et donc des URLs (par exemple : http://www.unsite.com/un_rep/sous_rep/fichier.ext) IV Insérer des images
Maintenant que vous savez comment placer du texte et le mettre en forme dans un page web, voici le moment d'ajouter des images. <HTML> <HEAD> <TITLE>Images</TITLE> </HEAD> <BODY> Voici une première image sans attribut particulier : <CENTER><IMG src="image1.gif"></CENTER> une image avec un bord de taille 3 : <CENTER><IMG src="image2.gif" border=3></CENTER> 2008/2009
14/27
 Il est souvent utile de préciser la taille de l'image pour que le navigateur connaîsse la taille de
l'emplacement à réserver : <CENTER><IMG src="image3.gif" border=0 width=88 height=31></CENTER> Si l'image n'est pas trouvée par le navigateur (99% du temps à cause d'un chemin d'accès incorrect), on affichera un petit message à coté de la croix rouge qui signale que l'image est manquante. Ce texte sera également affiché si on laisse la souris sur l'image pendant quelques
secondes. <CENTER><IMG src="image4.gif" border=0 width=88 height=31 alt="Logo CDS"></CENTER> </BODY> </HTML> Ce qui donnera une page dont le contenu sera comme ceci : Voici une première image sans attribut particulier : une image avec un bord de taille 3 : Il est souvent utile de préciser la taille de l'image pour que le navigateur connaisse la taille de l'emplacement à réserver : Si l'image n'est pas trouvée par le navigateur (99% du temps à cause d'un chemin d'accès incorrect), on affichera un petit message à coté de la croix rouge qui signale que l'image est manquante. Ce texte sera également affiché si on laisse la souris sur l'image pendant quelques secondes. Vous pouvez maintenant enregistrer la page et visualiser le résultat dans votre navigateur. Explications des nouvelles balises utilisées : <img> : insère une image dans votre page. Il faut préciser le chemin (ou adresse) de l'image à ajouter au moyen de l'attribut "src" (obligatoire !). Il n'y a pas de balise de fin ! Les attributs "width" et "height" permettent respectivement de spécifier la largeur et la hauteur de l'image en nombre de pixels. L'attribut "border" désigne la taille du bord à afficher autour de l'image (par défaut : 0). Et enfin "alt" (comme alternative) permet de préciser un texte qui sera affiche si l'image n'est pas trouvée (=> croix rouge) ou bien si vous laissez votre souris dessus. Quelques remarques : Ce dernier attribut "alt" est très important pour le référencement de votre site ! (mais nous en reparlerons plus tard...). Il vaut donc mieux ne pas le négliger et l'utiliser dans chacune de vos balises <IMG>. 2008/2009
15/27
Si vos images ne s'affichent pas (une croix rouge les remplace), c'est certainement une erreur dans le chemin d'accès vers le fichier image. Vérifier bien le nom du fichier, le nom du répertoire,... Il arrive également que les certains éditeurs HTML vous insèrent des chemins du style c:/mes documents/..., les images s'afficheront donc en local (chez vous) mais par sur le web. C'est normal vu que ce chemin n'existe pas sur la machine où se trouvent vos pages web. Il faudra donc modifier ces chemins par des chemins relatifs. Pour mettre une image comme fond d'écran, il faut utiliser l'attribut "background" de la balise <BODY>. Il veut toujours mieux utiliser un fond d'écran fixe (pas une image animée). V Les liens hypertextes
Les liens portent bien leur nom. Ils permettent de faire la liaison entre les pages web. Pour changer de page, il faut cliquer sur un lien, le navigateur chargera alors la nouvelle page. Il y a 3 types de liens :
Les liens internes à un site (=> utilisation très fréquente des chemins relatifs car plus court à taper). Les liens internes à une page (ou ancre) (=> utilisation de chemins absolus ou relatifs). Les liens externes (=> uniquement des chemins absolus !) Passons à présent à la fabrication de ces liens. <HTML> <HEAD> <TITLE>Les liens hypertextes</TITLE> </HEAD> <BODY> <! commentaires : Commencons d'abord par les liens internes au site (avec des chemins relatifs). > On suppose que la page vers laquelle est faite le lien se trouve dans le même répertoire que la page en cours : <A href="page2.html">Lien vers la page 2</A> Si la page de destination est dans un sousrépertoire de celui de la page courante : <A href="sous_repertoire/page2.html">Lien vers une page dans le sousrépertoire nommé "sous_repertoire"</A> 2008/2009
16/27
 Si la page de destination se trouve dans autre répertoire de même niveau que celui de la page courante : <A href="../repertoire/page2.html">Lien vers une page dans un autre répertoire nommé "repertoire"</A> <! commentaires : Passons maintenant aux liens externes. > <A href="http://www.unsiteexterne.com">Lien vers un site externe</A> <! commentaires : Pour ce qui est des liens internes à une page, ils utilisent ce que l'on appele des "ancres". Il faut définir non seulement un lien vers l'ancre mais aussi l'ancre ! > <A href="#ancre1">Lien vers l'ancre 1</A> <! lien vers l'ancre nommé ancre1 > <A name="ancre1">Texte</A> <! définission de ancre1 > Pour finir, on peut très bien accéder à un ancre d'une page située sur un autre site en utilisant donc une URL suivie d'un ancre. <A href="http://www.unautresite.com/repertoire/fichier.html#nom_ancre">lien vers un ancre sur une page d'un site extérieure</A> </BODY> </HTML> Ce qui donnera une page dont le contenu sera comme ceci : Si la page vers laquelle est faite le lien se trouve dans le même répertoire que la page en cours :
Lien vers la page 2 Si la page de destination est dans un sousrépertoire de celui de la page courante : Lien vers une page dans le sousrépertoire nommé "repertoire" Si la page de destination se trouve dans autre répertoire de même niveau que celui de la page courante
:
Lien vers une page dans un autre répertoire nommé "repertoire" Lien vers un site externe 2008/2009
17/27
Lien vers l'ancre 1 Texte du début de l'ancre 1 Pour finir, on peut très bien accéder à un ancre d'une page située sur un autre site en utilisant donc une URL suivie d'un ancre. lien vers un ancre sur une page d'un site extérieure Vous pouvez maintenant enregistrer votre page et la visualiser dans votre navigateur. Il faudra en plus créer une autre page nommée page2.html, pour pouvoir tester vos liens. Il suffit de faire une page avec un simple texte dedans. Explications des nouvelles balises utilisées : <a> et </a> : permettent de créer un lien hypertexte. Son attribut indispensable est "href". En effet, il permet de préciser l'adresse de la page de destination du lien qui sera créé. Cette adresse peut être soit absolue soit relative.
Si vous souhaitez faire un lien interne à une page, il faut créer un ancre. On crée le lien vers cet ancre comme ceci : <A href="#nom_ancre">Texte1</A> et on crée l'ancre comme ceci : <A name="nom_ancre">Texte2</A> link="couleur" : Couleur des liens.
alink="couleur" : Couleur des liens déjà exploités.
vlink="couleur" : Couleur des liens lors du clic.
Quelques remarques : Si le contenu d'une page est assez long, un lien interne à la page avec un ancre pourrait être très pratique pour revenir dans le haut de la page (sans utiliser les barres de scroll). Au début de votre texte, vous créez un ancre sur le premier mot du texte (par exemple) avec <a name="ancre_debut">XYZ</a> et à la fin du texte, vous rajoutez un lien vers cet ancre avec <a href="#ancre_debut">Retour en haut</a>. Vous pouvez même placer ce lien à plusieurs endroits de votre page. Dans nos exemples, nous avons uniquement utilisé du texte entre les balises <a> et </a>. Mais rien ne vous empêche d'utiliser une image plutôt que du texte.
=> <a href="une_page.html"><img src="repertoire/image.gif" border=0 width=88 height=31 alt="Image pour le lien"></a> Si vous utilisez des images, faites attention dans votre code, si il y a un retour à la ligne (retour chariot) entre le crochet de fin de la balise img et le crochet de début de la balise de fin du lien, il se peut qu'un petit trait apparaisse dans le coin inférieur droit de l'image... (Comme cidessous)
Donc au lien d'avoir ce code : <a href="page.html"> 2008/2009
18/27
<img width=30 height=30 alt="test" border=0> </a> Faites comme ceci : <a href="liens.php"><img width=30 height=30 alt="X" border=0></a> (=> tout sur une même ligne...) Il existe également un attribut "target" qui vous permet par exemple d'ouvrir un lien dans une nouvelle fenêtre comme ceci : <a href="URL" target="_blank">lien</a> (comme le lien "Forum" dans le menu de gauche). Par défaut, un lien s'ouvre dans la même page que la page ou se trouve le lien, hors si vous avez des liens vers des sites extérieures, si un visiteur clique sur un de ces liens, le site va s'ouvrir dans la fenêtre où se trouve votre site (il ne sera donc plus visible puisque remplacé par la nouvelle page). Il peut donc être utile d'utiliser l'attribut target pour les liens vers des sites externes pour que votre site reste visible également. Pour des liens internes à votre site, il est souvent déconseillé d'ouvrir 36 fenêtres différentes avec les pages de votre site pour ne pas troubler les visiteurs. VI Créer des tableaux 1. Tableau simple
Les tableaux sont très pratiques pour faire de la mise en page. En effet, ils permettent d'aligner des éléments (textes, images,...). Mais ce n'est pas leur unique fonction... <HTML> <HEAD> <TITLE>Les tableaux</TITLE> </HEAD> <BODY> Voici notre premier tableau avec un bord de 1 : <TABLE border=1> <TR> <TD>Cellule 1</TD> <TD>Cellule 2</TD> </TR> <TR> <TD>Cellule 3</TD> <TD>Cellule 4</TD> </TR> </TABLE> Taille des cellules en pixel : 2008/2009
19/27
<TABLE width=300 border=1> <TR> <TD width=100>100</TD> <TD width=100>100</TD> <TD width=100>100</TD> </TR> </TABLE> Taille des cellules en pourcentage : <TABLE width="60%" border=1> <TR> <TD width="33%">33%</TD> <TD width=34%>34%</TD> <TD width=33%>33%</TD> </TR> </TABLE> </BODY> </HTML> Ce qui donnera une page dont le contenu sera comme ceci : Voici notre premier tableau avec un bord de 1 : Cellule 1 Cellule 2
Cellule 3 Cellule 4
Taille des cellules en pixel : 100
100
100
Taille des cellules en pourcentage : 33%
34%
33%
Vous pouvez maintenant enregistrer votre page et la visualiser dans votre navigateur. Explications des nouvelles balises utilisées : <table> et </table> : création d'un tableau. Nous avons dans notre exemple précisé, au moyen de l'attribut "border" (0 par défaut), la taille de la bordure autour des cellules de notre tableau. (la balise de fin est obligatoire) 2008/2009
20/27
<tr> : débute une nouvelle ligne dans la tableau. La balise de fin (</TR>) n'est pas obligatoire. Chaque fois que le navigateur tombera sur une balise <TR>, il considérera que la ligne précédente est terminée et commencera une nouvelle. Toutes les lignes d'un même tableau doivent contenir le même nombre de cellules. <td> : crée une nouvelle cellule dans un tableau. Cette cellule doit être contenue dans une ligne et donc une balise "TR" doit être déjà ouverte... Vous pouvez ensuite créer autant de cellules que vous voulez dans un même ligne. Une cellule peut contenir un peu tout et n'importe quoi. On peut y mettre du texte, des images,... La cellule va s'adapter automatiquement aussi bien en largeur qu'en hauteur au contenu le plus haut et le plus large. Et pour finir, toutes les cellules d'une même colonne ont la même largeur (celle de la cellule la plus large), idem pour la hauteur des cellules d'une même ligne. Comme pour "TR", la balise de fin (</TD>) est optionnelle. Remarques : Même si les balises de fin </td> et </tr> sont optionnelles, il veut quand même mieux les utiliser pour éviter des problèmes de compatibilité ou de mise en page avec certains vieux navigateurs. 2. Principaux attributs
Maintenant que nous savons comment créer un simple tableau, nous allons découvrir les principaux attributs que nous pouvons utiliser. <HTML> <HEAD> <TITLE>Les tableaux</TITLE> </HEAD> <BODY> Tableaux avec des fonds de couleurs et alignements du contenu : <TABLE border=2 bgcolor="#000000" cellpadding=5 cellspacing=3 align="center"> <TR> <TD width=100 height=100 bgcolor="#CCCCCC" valign="top" align="left">#CCCCCC</TD> <TD width=100 height=100 bgcolor="#FFFFFF" align="right" valign="top">#FFFFFF</TD> </TR> <TR> <TD width=100 height=100 bgcolor="#FF0000" align="left" valign="middle">#FF0000</TD> <TD width=100 height=100 bgcolor="#0099FF" align="right" valign="middle">#0000FF</TD> </TR> <TR> <TD width=100 height=100 bgcolor="#FFFFCC" valign="bottom" align="right">#FFFFCC</TD> 2008/2009
21/27
<TD width=100 height=100 bgcolor="#008000" valign="bottom" align="left">#008000</TD> </TR> </TABLE> Fusion de cellules (colonnes) : <TABLE border=1 width=400 align="center" cellspacing=0 cellpadding=2> <TR> <TD width="25%">Cellule 1</TD> <TD width="25%">Cellule 2</TD> <TD width="25%">Cellule 3</TD> <TD width="25%">Cellule 4</TD> </TR> <TR> <TD colspan=4 align="center">Cellule fusionnée sur 4 colonnes</TD> </TR> </TABLE> Fusion de cellules (lignes) : <TABLE width=400 align="center" cellspacing=0 cellpadding=2> <TR> <TD width="50%" bgcolor="#FFFF00">Cellule 1</TD> <TD width="50%" bgcolor="#CCFFFF">Cellule 2</TD> <TD rowspan=2 bgcolor="#333333"><CENTER>Fusion de 2 lignes</CENTER></TD> </TR> <TR> <TD width="50%" bgcolor="#CCCCCC">Cellule 3</TD> <TD width="50%" bgcolor="#999999">Cellule 4</TD> </TR> </TABLE> </BODY> </HTML> Ce qui donnera une page dont le contenu sera comme ceci : Tableaux avec des fonds de couleurs et alignements du contenu : #CCCCCC
2008/2009
#FFFFFF
22/27
#FF0000
#0000FF
#FFFFCC
#008000
Cellule 2
Cellule 3
Fusion de cellules (colonnes) : Cellule 1
Cellule 4
Cellule fusionnée sur 4 colonnes
Fusion de cellules (lignes) : Cellule 1
Cellule 3
Cellule 2
Cellule 4
Fusion de 2 lignes
Vous pouvez maintenant enregistrer votre page et visualiser le résultat dans votre navigateur. Explications des nouveaux attributs utilisées : "bgcolor" permet de donner un fond de couleur à un tableau ou à une cellule. Comme toujours la couleur peut être précisée soit par son nom (en anglais) soit par son code Hexa (le blanc soit #FFFFFF est la couleur par défaut). "width" permet de préciser la largeur d'un tableau ou d'une cellule. La largeur peut être donnée en pixel ou en pourcentage. "height" permet de donner la hauteur d'une cellule. Il n'est pas possible de préciser la hauteur d'un tableau. Attention, si vous donnez une certaine hauteur X à une cellule et que vous placez par exemple une image dont la hauteur est plus grande, la cellule s'adaptera à la taille de l'image en "oubliant" son attribut hauteur ! (idem en largeur). "cellpadding" définit l'espace en pixel entre le bord d'une cellule et son contenu. (1 par défaut). "cellspacing" définit l'espace entre les cellules du tableau. (1 par défaut).
"colspan" permet de faire fusionner des cellules d'une même ligne. Il faut y préciser le nombre de cellules à fusionner. 2008/2009
23/27
"rowspan" permet de faire fusionner des cellules d'une même colonne. Il faut y préciser le nombre de cellules. "align" précise l'alignement sur un axe horizontal du tableau ou du contenu de la cellule. (valeur possible : "left" par défaut, "right", "center"). "valign" précise l'alignement du contenu des cellules sur un axe vertical. (Valeur possible : "middle", "bottom", "top"). 3. Aligner les éléments du tableau
L'alignement des données s'obtient en jonglant avec les attributs align pour l'alignement horizontal et valign pour l'alignement vertical. Ces attributs ont plusieurs valeurs :
align=left : (par défaut) Les données sont alignées à gauche de la cellule (pour td) ou de toutes les cellules (pour th ou tr)
align=right : Les données sont alignées à droite de la cellule (pour td) ou de toutes les cellules (pour th ou tr)
align=center : Les données sont centrées à l'intérieur de la cellule (pour td) ou de toutes les cellules (pour th ou tr)
valign=middle : (défaut) Les données sont centrées verticalement à l'intérieur de la cellule (pour td) ou de toutes les cellules (pour th ou tr)
valign=top : Les données sont en haut de la cellule (pour td) ou de toutes les cellules (pour th ou tr)
valign=bottom : Les données sont en bas de la cellule (pour td) ou de toutes les cellules (pour th ou tr)
valign=baseline : Toutes les données des cellules sont alignées sur une ligne commune (uniquement pour th ou tr)
Exemple
<table border=1 width=400> <caption>Légende
<tr> du
tableau</caption>
<th align=right>Colonne 1 alignée à droite</th> <th align=center>Colonne 2 centrée</th> </tr> 2008/2009
24/27
<tr> <td align=left valign=top>Cellule 1 alignée à gauche et en haut</td> <td align=center valign=bottom>Cellule 2 centrée et en bas</td> </tr> <tr valign=baseline> <td>Cellule 3 basée sur la ligne</td> <td>Cellule 4 basée sur la ligne</td> </tr> </table>
4. Arrière plan, mise en page, espacement
En principe, la hauteur et la largeur d'une cellule s'adaptent automatiquement aux données (texte ou image). Néanmoins, vous pouvez définir une hauteur et une largeur pour un tableau ou une cellule ; l'espacement des cellules et la taille de la bordure peuvent être aussi paramétrés.
Attributs de mise en page et d'espacement (valable pour <table>, <td> ou <th>) :
width : Spécifie la largeur du tableau ou d'une cellule, en pixels ou en pourcentage de la fenêtre du navigateur
height : Spécifie la hauteur du tableau ou d'une cellule, en pixels ou en pourcentage de la fenêtre du navigateur
border : Spécifie la taille en pixels (par défaut 1) de la bordure du tableau
cellpadding : Spécifie l'espace en pixels entre la bordure et le contenu de la cellule du tableau
cellspacing : Spécifie l'espace en pixels entre les cellules du tableau
bgcolor : Spécifie la couleur d'une cellule
bordercolor : Spécifie la couleur de la bordure du tableau
bordercolorlight : Spécifie la couleur aux points culminants de la bordure du tableau (effet 3d)
bordercolordark : Spécifie la couleur de l'ombre de la bordure du tableau (effet 3d)
background : Spécifie l'URL de l'image à afficher comme image d'arrière plan du tableau (I.Explorer seulement)
A noter que pour la balise <td> l'attribut nowrap permet d'éviter les retours à la ligne (inutile si vous avez défini votre tableau en pixels).
2008/2009
25/27
Exemple d'un tableau avec certains de ces attributs : <table border=2 bordercolor="blue" bordercolordark="aqua" width=300 height=150> <tr> <td bgcolor="pink">Cellule 1</td> <td>Cellule 2</td> <td>Cellule 3</td> </tr> <tr> <td>Cellule 4</td> <td bgcolor="yellow">Cellule 5</td> <td>Cellule 6</td> </tr> <tr> <td>Cellule 7</td> <td>Cellule 8</td> <td bgcolor="maroon">Cellule 9</td> </tr> </table>
5. Les attributs rules et frame (HTML 4.0)
Ces attributs sont valables uniquement pour la balise <table> et sont reconnus par les navigateurs de dernière génération qui savent exploiter le HTML 4.0 .
L'attribut frame fonctionne seulement si border est présent dans la balise <table> et signale les côtés d'un cadre à afficher. Voici la liste des valeurs qu'il peut supporter :
above : Affiche les bordures externes du haut du tableau seulement
below : Affiche les bordures externes du bas du tableau seulement
border : Affiche les bordures sur tous les côtés du tableau
box : Affiche une boîte autour du tableau
insides : Affiche les bordures sur le dessus et le dessous du tableau seulement
hsides : Affiche les bordures externes du côté horizontal du tableau (haut et bas)
lhs : Affiche les bordures externes du côté gauche du tableau seulement
rhs : Affiche les bordures externes du côté droit du tableau seulement
void : Permet de retirer toutes les bordures externes du tableau
vsides : Affiche les bordures externes des côtés droit et gauche du tableau
L'attribut rules fonctionne seulement si l'attribut border est présent dans la balise <table>. Il permet de spécifier des règles supplémentaires à l'intérieur du tableau. Les valeurs acceptées sont les suivantes :
none : Pour retirer toutes les bordures internes du tableau
groups : Affiche une bordure horizontale entre les sections
rows : Affiche une bordure horizontale entre toutes les lignes du tableau
cols : Affiche une bordure horizontale entre toutes les colonnes du tableau
2008/2009
26/27
all : Affiche des bordures dans le tableau
<table border=2 width=200 frame=hsides rules=cols> <thead> <colgroup span=3 align=left valign=top> </thead> <tbody> <tr> <td>Ligne 1 </td> <td>Cellule 1</td> <td>Cellule 2</td> </tr> <tr> <td>Ligne 2 </td> <td>Cellule 3</td> <td>Cellule 4</td> </tr> </tbody> </table>
Petits plus :
A noter que la balise <caption> qui affiche le titre du tableau possède 2 attributs :
top : Titre placé audessus du tableau (par défaut)
bottom : Titre placé en dessous du tableau
Vous pouvez mettre une image comme fond d'un tableau à la place d'une simple couleur (comme pour la balise BODY) avec l'attribut background. Mais cet attribut ne sera pas accepté par tous les navigateurs.
Il est également possible ce changer la couleur de la bordure autour du tableau avec l'attribut "bordercolor" (par exemple bordercolor="#000000"). Mais encore une fois, cet attribut n'est pas compatible avec tous les navigateurs. 2008/2009
27/27

Cours Html - WikiEducator

Transcription

Documents pareils

Le module EPG de Progdvb

Logiciels AgrÃ©Ã©s par la Commission de pilotage de la

VENDS RAQUETTES HEAD

Ravin de NOUGEAÏRASSE

Mode d`emploi balises 406

venetian 70fs34 - Slik Portfolio

Les formats audio et vidéo

Chanson (Graine de mots)[Culture et sorties]

Tour Mont Agaisen 2008 - Randonnées dans le Mercantour

Rapport Robot IUT Haguenau