CM FrontPage et HTML - Site professionnel de C. Pierkot

Transcription

Cours Techno Web
C. Pierkot
Afficher une carte sur le web
Objectifs du cours :
Connaître les bases d’HTML et de CSS pour créer un site.
MiniProjet :
Votre site doit contenir :
• Une page d’accueil
• Plusieurs pages différentes (structure et contenu) dans lesquelles :
o Il y a des images,
o Il y a des vidéos, des sons
o Il y a des liens hypertextes, des signets
o Il y a des tableaux
o Il y a la possibilité de vous envoyer un email
o Il y a des documents à télécharger
o Il y a des titres, des couleurs, des paragraphes …
o Il y a des listes déroulantes
o Il y a des formulaires
Rappel :
Etape préliminaire (sur le papier) : définir la structure du site, l’organisation et le contenu des
pages web. Vous devez créer suffisamment de pages pour que votre site contienne toutes les
informations demandées ci-dessus.
Etape 1 : Directement en HTML : quelques pages contenant les informations demandées.
Etape 2 : Utiliser une feuille
Etape Finale : Mini Rapport dans lequel vous expliquez la structure de votre site et son
contenu.
Pré requis et conseils:
Une connaissance basique d’Internet, de Windows et d’un traitement de texte de type Word.
Il vaut mieux faire simple au début afin de comprendre les outils de base.
Lorsque vous planifiez un site Web, il est important de définir tout d'abord son objectif.
Avant de vous lancer tête baissée dans la réalisation du site, il faut d’abord penser à sa
conception.
• Définir la structure du site composée des pages et des liens entre ces pages.
• Définir pour chaque page, le contenu qui y figurera en précisant
o Si des images ou animations seront insérées
o La disposition des éléments dans la page
o …
Master CarthaGéo 2006-2007
1/43
Cours Techno Web
C. Pierkot
Après avoir esquissé le plan de votre site, il est temps de commencer à ébaucher une
disposition pour les pages.
Conception du site :
L’objectif de ce cours est de créer un site permettant d’afficher une carte sur le web.
Exemple de structure de site :
Accueil
Affichage : Monde
Comprendre la
cartographie
Cartes
Coordonnées
Reliefs
Amérique
du nord
Amérique
du sud
MaPage
Europe
Afrique
Océanie
La composition du site est la suivante :
• La page d’accueil permet d’accéder au contenu du site. Trois pages sont accessibles
depuis celle-ci :
o La page « Comprendre la cartographie » est dédiée à l’explication des concepts
de base de la cartographie. Nous nous inspirons du site de l’IGN pour créer ces
pages. (cf. http://www.ign.fr/rubrique.asp?rbr_id=1071&lng_id=FR). Cette
rubrique est compose de 3 sous rubriques :
Lire une carte et s’orienter
Comprendre la géodésie
Comprendre le nivellement
o La rubrique « Affichage » permet l’affichage des cartes. La carte du monde est
disponible sur cette page. Un clic sur une région de cette carte permet d’obtenir
l’affichage d’une carte plus détaillée de la région en question. Des
informations sur les continents sont disponibles sur les pages correspondantes
o Enfin, la rubrique « Ma page » permet de mettre ce que l’on veut. Comme par
exemple un curriculum vitae
2/43
Cours Techno Web
C. Pierkot
Pour votre projet, vous devez créer un site cartographique permettant l’affichage de cartes.
Vous pouvez vous inspirer du site de l’IGN (ou non). En ce qui concerne les cartes à afficher,
essayez d’utiliser celles que vous avez préparées avec L.Bonfliglioli
Disposition des pages
Vous pouvez avoir la même mise en page pour toutes vos rubriques ou décider d’avoir des
mises en page différentes. En tout cas, comme pour la structure du site, il vaut mieux
connaître la disposition avant de coder les pages.
Nous pouvons choisir une mise en page simple comme celle ci-dessous ou vous pouvez
décider d’en créer une autre vous-même.
Liens vers les autres pages (Ex: depuis la page d’accueil,
mettre un lien vers « Comprendre la cartographie, Affichage, MonSite)
Description
de la page
Images
3/43
Cours Techno Web
C. Pierkot
FrontPage
FrontPage est un éditeur de pages web distribué par Microsoft. A première vue, il ressemble
beaucoup au logiciel Word mais sa fonction n’est pas la même. Un éditeur de page HTML a
pour but de vous aider à concevoir vos pages web sans avoir à vous soucier du code HTML.
Cela n’empêche pas de connaître l’HTML, que nous découvrirons dans la deuxième partie du
cours.
Un site Web FrontPage contient des pages Web, des graphiques, des documents, du
multimédia - en fait, presque n'importe quel fichier.
Premiers pas avec FrontPage :
Lancer FrontPage depuis le menu Démarrer.
Une fenêtre semblable à celle ci-dessous apparaît :
On retrouve l’interface typique des logiciels de Microsoft avec la barre des Menus, la barre
des boutons, le volet office, …
Dans le volet office, cliquer sur « Créer un nouveau site ». Vous obtenez ceci dans le volet
office :
4/43
Cours Techno Web
C. Pierkot
Cliquez sur « Autres modèles de sites web », une fenêtre s’ouvre. Choisir « Site web normal »
et nommez votre site avec votre NomPrenom. Vous obtenez ceci (ici le site s’appelle
CoursFrontPage.htm) :
Vous constatez que FrontPage a créé automatiquement une page nommée index.htm (votre
page d'accueil), un dossier _private qui est réservé à l'application, et un dossier images dans
lequel vous stockerez les photos et dessins utilisés sur vos pages.
A partir de maintenant, je vous donne les informations nécessaires pour que vous puissiez
créer votre site grâce à FrontPage. Je ne veux pas vous imposer de style ou de couleur
particuliers, donc laissez libre court à votre imagination.
5/43
Cours Techno Web
C. Pierkot
Comment créer de nouvelles pages ?
Créez une nouvelle page en faisant un clic droit -> nouveau -> Page vierge. Par défaut, le
document porte le nom nouvellepage1.htm. Un clic sur le nom du fichier vous permet de
renommer la page. Un double clic sur une page vous permet d'éditer celle-ci et donc de la
modifier.
Remarque : Prenez l'habitude de n'utiliser ni caractère spécial (sauf le caractère underscore _),
ni espace, ni majuscule dans vos noms de fichiers. En effet ceux-ci peuvent empêcher le bon
fonctionnement de vos liens une fois le site placé sur un serveur.
Exemple de pages :
Pour créer des pages structurées avec une disposition particulière :
Menu Fichier, Nouveau, Autres modèles de pages, onglet Cadres...
6/43
Cours Techno Web
C. Pierkot
Comment définir les propriétés de la page ?
Cette rubrique vous aide dans la mise en forme de vos pages.
Double cliquez sur la page que vous voulez mettre en forme. Un onglet s’ouvre ayant pour
titre le nom de votre page.
Le menu FICHIER / PROPRIETES (ou clic droit dans l’éditeur) vous permet de définir le
titre que vous souhaitez donner à la page. Ce titre apparaîtra dans la fenêtre du navigateur et
sera donc visible par votre visiteur. D'autre part il sera pris en compte par les moteurs de
recherche. Il vous permet aussi de définir la couleur de fond, les marges …
7/43
Cours Techno Web
C. Pierkot
Dans l’onglet « général », vous pouvez mettre le titre de la page. Dans l’onglet « Mise en
forme », vous pouvez choisir la couleur de fond, des liens …
Dans l’onglet Avancé, vous pouvez insérer une image en arrière plan (dans style de
corps/format /bordure/trame de fond)
8/43
Cours Techno Web
C. Pierkot
Comment saisir et mettre en forme le texte ?
Saisie et mise en forme
La saisie du texte, comme les corrections des éventuelles fautes de frappe, se fait comme dans
un traitement de texte. Sélectionnez le texte à mettre en forme, puis utilisez les menus
FORMAT / POLICE pour choisir la police utilisée, le style, la taille du texte. Remarque : Les
tailles des caractères en html sont représentées par des chiffres de 1à 7. La taille 3 représente
la taille par défaut. Un texte en taille 3 sera vu par le visiteur à la taille par défaut paramétré
dans son navigateur. Vous ne savez donc pas de manière absolue à quelle taille sera vu votre
texte, mais vous pouvez hiérarchiser votre information, puisqu'un texte en taille 4 sera
toujours plus "grand" qu'un texte en taille 3.
La mise en forme des paragraphes se fait en utilisant le menu FORMAT / PARAGRAPHE.
Certaines des mises en formes proposées par FrontPage ne seront pas compatibles avec des
versions de navigateurs un peu anciennes (Internet Explorer 4 et antérieur, par exemple). Si
vous souhaitez vous adresser à la plus large cible possible, vous devez tester votre site en
utilisant différents navigateurs et versions pour contrôler l'apparence de vos pages.
Listes
Vous avez la possibilité de créer des listes numérotées ou non : par exemple, pour indiquer le
"sommaire" de votre site. Saisissez chaque élément de la liste, puis sélectionnez l'ensemble et
utilisez le menu FORMAT / PUCES ET NUMEROS. Choisissez le style de puces que vous
souhaitez appliquer (numérotées ou non) et validez par OK.
Bordures et trames
Le menu FORMAT / BORDURES ET TRAME vous permet d'appliquer aux paragraphes
sélectionnés, un cadre ainsi qu'une couleur de fond. Attention, ces éléments qui utilisent les
feuilles de style ne seront pas visibles dans des navigateurs un peu anciens. Vous avez aussi la
possibilité d'insérer des lignes horizontales pour séparer les différentes sections de votre texte
en utilisant le menu INSERTION / LIGNE HORIZONTALE. Celles-ci seront affichées par
tous les navigateurs.
Séparer des paragraphes par une ligne horizontale
Le menu INSERTION/ TRAIT HORIZONTAL permet cela très facilement
Les tableaux
Afin d'organiser votre contenu sur la page, texte et images, il est fortement conseillé d'utiliser
les tableaux. L'insertion d'un tableau se fait via le menu TABLEAU / INSERER UN
TABLEAU. Définissez le nombre de lignes et de colonnes qui composent votre tableau et
validez par OK. Vous pouvez placer n'importe quel élément dans une cellule du tableau.
Les propriétés générales du tableau sont accessibles via le menu TABLEAU / PROPRIETES
DU TABLEAU / TABLEAU, et en particulier l'alignement, la couleur de fond, l'épaisseur et
la couleur de bordure. Il est aussi possible de personnaliser l'apparence d'une cellule du
tableau en plaçant le curseur dans celle-ci et en choisissant TABLEAU / PROPRIETES DU
TABLEAU / CELLULE.
9/43
Cours Techno Web
C. Pierkot
INSERER DES IMAGES
Préparation des images
Avant d'être utilisables sur un site Internet, les images doivent être "préparées". (Cf. cours
Laurent Bonfiglioli)
Soyez attentif au poids d'une image, c'est-à-dire sa taille en kilo-octets. Une image de 20 ko
mettra 3 secondes à s'afficher pour un visiteur disposant d'une connexion par modem 56K. De
manière générale, une page web et tous les éléments médias qui la composent ne doivent pas
dépasser 50ko.
Trois formats seulement sont compris par les navigateurs :
Le format GIF : à réserver aux dessins, logos, constitués d'aplats. Accepte la transparence.
Le format JPG : à réserver aux photographies, dessins contenant des dégradés.
10/43
Cours Techno Web
C. Pierkot
Le format PNG : format qui convient aux photographies comme aux dessins, mais encore
assez peu utilisé.
Insérer des images
Placez votre curseur à l'endroit où vous souhaitez insérer l'image, et utilisez le menu
INSERTION / IMAGES / A PARTIR DU FICHIER. Sélectionnez l'image souhaitée et
cliquez sur le bouton INSERER.
Un double clic sur l'image vous permet de définir ses propriétés, et en particulier la manière
dont le texte va se positionner par rapport à l'image (STYLE D'HABILLAGE) et les marges
autour de l'image (ESPACEMENT HORIZONTAL ET VERTICAL).
.
Evitez de modifier la taille de vos images en utilisant cette boite de dialogue, car cela ne
modifie pas l'image d'origine (et donc son poids). L'onglet Général de cette boite de dialogue
vous permet de régler d'autres paramètres, comme le texte de remplacement. Saisissez
quelques mots qui décrivent l'image, ce texte sera affiché à la place de l'image si un visiteur a
défini les préférences de son navigateur de manière à ne pas charger les images. Il est aussi et
surtout utile pour l'amélioration de l'indexation du site par les moteurs de recherche.
Lorsque vous enregistrez la page (FICHIER / ENREGISTRER), FrontPage vous propose de
faire une copie des images utilisées dans votre dossier de site. Faites-le sinon vous risquez
d'oublier, lors de la mise en ligne du site, de transférer sur le serveur toutes les images
utilisées dans vos pages.
11/43
Cours Techno Web
C. Pierkot
LES LIENS
Les liens relatifs
Vous pouvez maintenant relier vos pages entre elles, en créant des liens hypertextes. Ces liens
peuvent être créés sur une portion de texte ou sur une image.
Sélectionnez une portion de texte ou une image, et utilisez le menu INSERTION / LIEN
HYPERTEXTE ou le raccourci clavier CTRL K. Sélectionnez la page html vers laquelle le
lien doit diriger le visiteur et validez par OK.
Dans le cas d'un texte, vous constatez que celui-ci devient de couleur bleue et est souligné
afin de signaler au visiteur la présence d'un lien cliquable à cet endroit.
Les liens absolus
Il est aussi possible de faire un lien vers une page qui n'appartient pas à votre site. Dans ce
cas, au lieu de sélectionner une des page de votre site dans la boite de dialogue Insérer un lien
hypertexte, tapez l'adresse complète d'une page ou d'un site sous la forme http://www.sncf.fr
par exemple.
Ce type de liens est dit absolu car il ne dépend pas de l'emplacement où est enregistrée votre
page et restera valable dans tous les cas.
Les liens vers un email
Pour permettre à vos visiteurs de vous contacter par email, il suffit de faire un lien hypertexte,
comme précédemment sur un texte ou une image, et de taper dans la zone adresse :
mailto:votreadresseemail.
12/43
Cours Techno Web
C. Pierkot
Les liens vers un signet
Vous pouvez définir des signets (menu INSERTION / SIGNET) dans vos pages pour repérer
un paragraphe donné. Il est alors possible de faire des liens directement vers ses signets, en
utilisant le menu INSERTION / LIEN HYPERTEXTE et en indiquant dans la zone d'adresse
le signe # suivi du nom du signet.
Proposer un document en téléchargement
Il est aussi possible de faire des liens vers des fichiers autres que des pages html, comme par
exemple des images (format jpg, gif, créant), des documents Word ou FrontPage, ou des
fichiers compressés (zip par exemple). Il suffit alors d'indiquer le nom du fichier suivi de son
extension, pour que votre visiteur puisse choisir d'ouvrir le fichier ou de l'enregistrer (le
télécharger) sur son disque dur pour pouvoir le consulter plus tard.
Avoir plusieurs liens sur une seule image :
Utile lorsque l’on veut cliquer sur une zone en particulier. Par exemple, si je veux que la page
dédiée à l’Amérique du sud s’ouvre quand je clique sur la zone dans la carte mondiale.
1. sélectionner la photo;
2. dans la barre d'outils Image, cliquer sur un des boutons "Zone réactive"
3. avec la souris en forme de crayon, encadrer un personnage
4. dans la boite de dialogue "Créer un lien hypertexte" qui apparaît alors, choisissez la page à
référencer
Visualiser le résultat :
Pour visualiser au fur et à mesure des modifications le résultat, il suffit de faire FICHIER/
AFFICHER DANS LE NAVIGATEUR
Voici un aperçu d’une partie du site créé avec FrontPage (très basique) :
13/43
Cours Techno Web
C. Pierkot
Figure 1 : La page d'accueil
Figure 2 : La page Affichage
14/43
Cours Techno Web
C. Pierkot
Figure 3 : La page consacrée à l'Amérique du nord
Voici un lien où vous trouverez les réponses à quelques unes de vos questions :
http://faqfp.free.fr/index.htm
15/43
Cours Techno Web
C. Pierkot
HTML
Ecrire directement du code dans FrontPage
Nous allons maintenant modifier notre site directement grâce au code HTML. Allez sur la
page index.html et activez le mode code comme le montre l’image ci-dessous (pour l’instant
vous étiez en mode création).
Le code
Regardons maintenant comment est structuré notre code HTML de la page index.htm :
Le code HTML est toujours écrit entre des balises ouvrantes et des balises fermantes.
Première explication des balises :
- <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.. 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
16/43
Cours Techno Web
C. Pierkot
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
- <title> et </title> : la première ouvre la partie titre de votre page. Ce titre sera placé dans la
barre tout au-dessus 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
refermé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...
Les différentes parties du codage html.
Une page html (ou htm) est constituée de 2 parties distinctes: l'en-tête (entre <head> et
</head>) et le corps de la page (entre <body> et </body>).
1. L’entête (head) regroupe les informations nécessaires aux moteurs de recherche,
quelques scripts qui doivent démarrer avec la page, ...
2. Le corps (body) de votre page contient le contenu de votre page.
Une page Internet est donc codée comme ceci:
<HTML>
<HEAD>
... <TITLE>Titre du document</TITLE>
...
</HEAD>
<BODY>
Contenu du document
</BODY>
</HTML>
L'entête HTML
L'entête, encadré par <HEAD> ... </HEAD>, inclut les META. D'autres parties sont
parfois intégrées dans cette partie, notamment des scripts. Un script permet de démarrer
certaines fonctions avec la page, notamment des fenêtres pop-up.
Sans rentrer trop à ce stade dans les META, les 3 balises importantes sont:
<Title>Le titre de la page</TITLE>
<meta name="keywords" content="Liste de mots clés">
<meta name="description" content="description de la page">
17/43
Cours Techno Web
C. Pierkot
D'autres peuvent être rajoutées. Vous trouverez la liste des META disponibles à l’adresse
suivante : http://www.commentcamarche.net/html/htmlmeta.php3
Commentaires HTML
Vous pouvez insérer des commentaires en html grâce à une balise spéciale. Cela est
toujours utile pour savoir ce qu’on a voulu faire (lorsque par exemple on reprend le code
longtemps après ou lorsqu’on partage le code avec quelqu’un d’autre)
Le texte figurant à l’intérieur de la balise  ne sera pas pris en
compte lors de la génération du code
A l’intérieur de la balise <Body> : Le contenu de votre page
Mise en forme de la page entière
Le fond d'écran
On a le choix entre une couleur de fond et une image en mosaïque.
Couleur de fond
La couleur de fond est spécifiée en son format en hexadécimal ou par son nom comme valeur
à la propriété BGCOLOR. Par défaut, une page est de fond blanc.
Exemples :
<BODY BGCOLOR="purple">
</BODY>
<BODY BGCOLOR="#800080">
</BODY>
Image de fond
L'image de fond est spécifiée par son adresse relative ou absolue comme valeur à la propriété
BACKGROUND.
Exemples :
<BODY BACKGROUND="../images/fond.gif">
</BODY>
<BODY BACKGROUND="http://www.multimania.com/images/fond.gif">
</BODY>
18/43
Cours Techno Web
C. Pierkot
Le texte
La couleur du texte par défaut est spécifiée par le navigateur (en général, c'est le noir), mais il
est possible d'imposer une couleur pour le texte de la page par l'attribut TEXT dont la valeur est
le nom de la couleur ou sa valeur au format hexadécimal. Lorsque vous spécifiez une couleur
ou une image de fond, il vous sera souvent nécessaire d'imposer une couleur spécifique pour
que votre page soit lisible.
Exemples : Pour un texte de la même couleur pour toute la page
<BODY TEXT="black">
</BODY>
<BODY TEXT="#000000">
</BODY>
Les liens
Les couleurs des liens (texte, soulignement et bordure d'image) sont définies pour toute la
page dans la balise <BODY>. Si cette dernière ne contient pas d'information relative aux liens,
alors les paramètres par défaut du navigateur (qui peuvent êtres modifiés par l'utilisateur)
s'appliqueront. Ainsi il est fortement recommandé de préciser les couleurs des liens dès lors
qu'une couleur ou une image de fond est associée à une page.
Liens
La couleur des liens qui n'ont pas encore été visités et qui ne sont pas activés par la souris ou
le focus est définie par la propriété LINK dont la valeur est le nom de la couleur ou son code
hexadécimal (précédé d'un dièse).
Exemples :
<BODY LINK="navy">
</BODY>
<BODY LINK="#000080">
</BODY>
Liens déjà visités
La couleur des liens qui ont déjà été visités est définie par la propriété VLINK dont la valeur
est le nom de la couleur ou son code hexadécimal (précédé d'un dièse).
Exemples :
<BODY VLINK="gray">
</BODY>
<BODY VLINK="#808080">
</BODY>
Liens activés
19/43
Cours Techno Web
C. Pierkot
La couleur des liens qui sont activés (lors du click de souris ou de la pression de la touche
ENTRÉE) est définie par la propriété ALINK dont la valeur est le nom de la couleur ou son
code hexadécimal (précédé d'un dièse).
Exemples :
<BODY ALINK="red">
</BODY>
<BODY ALINK="#FF0000">
</BODY>
<BODY LINK="navy" VLINK="gray" ALINK="red">
</BODY>
Par défaut, le navigateur affiche (et souligne) en bleu les liens non visités, en pourpre les liens
déjà visités et en rouge les liens activés.
Code des couleurs
Voici le code des 16 couleurs principales du HTML
Nom
Code
Résultat
Nom
Code
Black
#000000
White
#FFFFFF
Maroon
#800000
Red
#FF0000
Green
#008000
Lime
#00FF00
Olive
#808000
Yellow
#FFFF00
Navy
#000080
Blue
#0000FF
Purple
#800080
Fuchsia
#FF00FF
Teal
#008080
Aqua
#00FFFF
Gray
#808080
Silver
#C0C0C0
Résultat
Les marges sous Internet Explorer
On peut spécifier des tailles de marge (haut, bas, gauche, droit).
Pour la marge du haut : TOPMARGIN, pour celle du bas : BOTTOMMARGIN, pour celle de gauche :
LEFTMARGIN, pour celle de droite : RIGHTMARGIN.
Exemple:
<BODY TOPMARGIN="50" BOTTOMMARGIN="50" LEFTMARGIN="40" RIGHTMARGIN="40" >
</BODY>
20/43
Cours Techno Web
C. Pierkot
Les marges sous Netscape
On peux spécifier des tailles de marge (haut et bas en même temps : MARGINWIDTH et
gauche/droite : MARGINHEIGHT).
Pour les marges des côtés gauche et droit : MARGINWIDTH et pour les marges du haut et du bas
: MARGINHEIGHT.
Exemple:
<BODY MARGINWIDTH="40" MARGINHEIGHT="50" >
</BODY>
La mise en forme d’une partie de la page
Créer un titre :
<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>
Pour créer un espace
&nbsp
Modifier l’apparence du texte
<font face="Arial size="6" color ="black"> </font>
Centrer, mettre en gras …
-
<b> et </b> : écrit le texte en gras.
- <i> et </i> : écrit du texte en italique.
- <u> et </u> : 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.
Remarque :
- Vous pouvez tout à fait cumuler les attributs dans une balise (séparés par un espace) !
Dans le code ci-dessus, nous combinons 3 attributs (face, size et color)
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 :
<B><I><CENTER>mon texte</I></B</CENTER>
Il faut les refermer dans l'ordre inverse de l'ouverture :
21/43
Cours Techno Web
C. Pierkot
<B><I><CENTER>mon texte</CENTER></I></B>
C'est le même principe pour toutes les balises !
Les 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é
Créer un nouveau paragraphe
<p> mon paragraphe </p>
Aligner le texte du paragraphe
<P align="right">texte aligné à droite</P>
<P align="center">texte aligné au centre</P>
<P align="left">texte aligné à gauche</P>
<P align="justify">texte justifié : blablablablablablablablabla
blablablablablablablablablablabla blablablablablablablablabla
blablablablablablablablablablabla</P>
Retrait de texte :
<BLOCKQUOTE>votre texte</BLOCKQUOTE>
Pour sauter une ligne :
<br>
Listes d'items
Les listes d'items sont énormément utilisées sur le web au même titre que dans les documents
électroniques ou manuscrits. Ils permettent d'énumérer des items en les numérotant ou non.
Les listes sont pratiques dans le cadre de sommaires.
Liste simple non ordonnée
Une liste doit être encadrée par le conteneur UL et chaque item doit être introduit par la balise
LI. Le conteneur provoque une tabulation.
Syntaxe :
<UL>
<LI>Rouge
<LI>Vert
<LI>Bleu
</UL>
Exemple :
•
•
•
Rouge
Vert
Bleu
22/43
Cours Techno Web
C. Pierkot
Liste ordonnée
Une liste ordonnée doit être encadrée par le conteneur OL et chaque item doit être introduit par
la balise LI.
Syntaxe :
<OL>
<LI>Rouge
<LI>Vert
<LI>Bleu
</OL>
Exemple :
1. Rouge
2. Vert
3. Bleu
Type de numérotation
La numérotation d'une liste ordonnée est par défaut les chiffres arables. On peut en changer
avec l'attribut TYPE qui peut prendre les valeurs suivantes :
Valeur
Description
1 chiffres arables
I
chiffres romains
i
chiffres romains minuscules
A lettres de l'alphabet
a
lettres minuscules de l'alphabet
Syntaxe :
<OL TYPE="I">
<LI>Rouge
<LI>Vert
<LI>Bleu
</OL>
Syntaxe :
<OL TYPE="i">
<LI>Rouge
<LI>Vert
<LI>Bleu
</OL>
Syntaxe :
<OL TYPE="A">
<LI>Rouge
<LI>Vert
<LI>Bleu
</OL>
Exemple :
I.
II.
III.
Rouge
Vert
Bleu
Exemple :
i.
ii.
iii.
Rouge
Vert
Bleu
Exemple :
A. Rouge
B. Vert
C. Bleu
23/43
Cours Techno Web
C. Pierkot
Syntaxe :
Exemple :
<OL TYPE="a">
<LI>Rouge
<LI>Vert
<LI>Bleu
</OL>
a. Rouge
b. Vert
c. Bleu
Titre de liste
On peut ajouter un titre aux listes ordonnées comme aux listes non ordonnées avec la balise
LH
Syntaxe :
Exemple :
<UL>
<LH>titre de la liste
<LI>item n°1
<LI>item n°2
<LI>item n°3
</UL>
Les couleurs primaires
•
•
•
Rouge
Vert
Bleu
Les tableaux : la balise <TABLE>
Le tableau se défini grâce à la balise <TABLE> qui doit absolument être refermée : </TABLE>.
Les navigateurs Internet chargent d'abord entièrement le tableau avant de l'afficher, c'est
pourquoi il ne faut surtout pas oublier de refermer la balise <TABLE> car sinon votre tableau
ne sera pas vu par les internautes. Il est également important de ne pas mettre en ligne des
tableaux trop volumineux, préférez toujours plusieurs petits tableaux plutôt qu'un seul très
gros et long à charger.
Comme dans un tableur, on parle de cellules. Un tableau peut contenir une seule cellule, c'està-dire une seule colonne et une seule ligne ou bien autant de cellules que vous voudrez
sachant que le nombre de colonnes peut être différents du nombre de lignes. On commencera
dès maintenant à mettre une bordure aux tableaux pour les visualiser dans nos exemples grâce
à l'attribut BORDER.
Il faut commencer par ouvrir une balise <TR> pour commencer une ligne et la refermer </TR>
pour terminer la ligne. Mais cela ne suffit toujours pas à la création d'un tableau car il faut
également définir les colonnes. Et là, c'est un peu moins facile puisqu'il faut insérer entre les
balises lignes autant de couple correspondant à la colonne qu'il y a de colonnes. Le couple
<TD> et </TD> correspond à la colonne. A l'intérieur d'une ligne (couple <TR> </TR>), il faut
placer autant de couples <TD> </TD> qu'il y a de colonnes dans le tableau. Attention ! il faut
donc mettre un même nombre de colonnes dans chaque ligne.
Tableau minimal
Exemple de tableau à une seule cellule :
24/43
Cours Techno Web
C. Pierkot
<TABLE BORDER>
<TR><TD>une seule cellule</TD></TR>
</TABLE>
une seule cellule
Lignes du tableau
Exemple de tableau à deux lignes et une colonne (deux cellules) :
<TABLE BORDER>
<TR><TD>première ligne</TD></TR>
<TR><TD>deuxième ligne</TD></TR>
</TABLE>
première ligne
deuxième ligne
Colonnes du tableau
Exemple de tableau à une ligne et deux colonnes (deux cellules) :
<TABLE BORDER>
<TR><TD>première colonne</TD><TD>deuxième
colonne</TD></TR>
</TABLE>
première
colonne
deuxième
colonne
Exemple de tableau à trois lignes et deux colonnes (six cellules) :
<TABLE BORDER>
<TR><TD>ligne 1, colonne1</TD><TD>ligne1,
colonne2</TD></TR>
<TR><TD>ligne 2, colonne1</TD><TD>ligne 2,
colonne2</TD></TR>
<TR><TD>ligne 3, colonne1</TD><TD>ligne 3,
colonne2</TD></TR>
</TABLE>
ligne 1,
colonne1
ligne 1,
colonne2
ligne 2,
colonne1
ligne 2,
colonne2
ligne 3,
colonne1
ligne 3,
colonne2
Légende du tableau
L'envie peut vous prendre, pour un tableau de valeur, de lui donner une légende. Utilisez alors
le couple : <CAPTION> </CAPTION> dont l'attribut ALIGN peut avoir comme valeur TOP :
légende en haut du tableau (par défaut) ou BOTTOM : légende en bas du tableau. La légende
d'un tableau est automatiquement centrée et en style par défaut.
Exemple de tableau avec une légende en haut :
<TABLE BORDER>
<CAPTION>légende en haut</CAPTION>
</TABLE>
légende en haut
première ligne du tableau
deuxième ligne du tableau
Exemple de tableau avec une légende en bas:
25/43
Cours Techno Web
<TABLE BORDER>
<CAPTION ALIGN="bottom">légende en
</TABLE>
C. Pierkot
bas</CAPTION> première ligne du tableau
deuxième ligne du tableau
légende en bas
Nommer les colonnes
Il peut vous être nécessaire d'attribuer un nom à chacune de vos colonnes, procédez avec le
couple <TH> </TH> que vous utiliserez comme remplaçant de la colonne. Mais il vous faudra
rajouter dans votre marquage une ligne virtuelle puisque ce couple simulant la colonne doit
être placé dans une ligne. Ces légendes sont automatiquement centrées verticalement et
horizontalement dans les cellules et en style gras.
Exemple de tableau deux colonnes légendées :
<TABLE BORDER>
<TR><TH>colonne 1</TH><TH>colonne 2</TH></TR>
<TR><TD>ligne1, colonne1</TD><TD>ligne1,
colonne2</TD></TR>
<TR><TD>ligne2, colonne1</TD><TD>ligne2,
colonne2</TD></TR>
</TABLE>
colonne 1
colonne 2
ligne1,
colonne1
ligne1,
colonne2
ligne2,
colonne1
ligne2,
colonne2
Les liens hyper-texte
Qu'est quoi un lien hyper-texte ? C'est un élément graphique ou textuel d'une page web qui
sous l'action d'un clic de souris commande le chargement d'une autre page dans le navigateur.
La balise de base
La balise de base est <A> qui a pour attributs HREF : l'adresse de destination et TARGET. Cette
balise est en fait un conteneur, c'est-à-dire qu'elle doit être refermée par </A>. Les éléments
situés à l'intérieur (texte, images) renverront vers une page sous l'action d'un clic. De plus,
lorsque la souris survole un lien, son apparence change : d'une flèche elle devient une main.
Syntaxe :
<A HREF="adresse_destination">Texte_ou_image_à_cliquer</A>
Exemples :
<A HREF="Cartographie.htm">Comprendre la Cartographie</A>
<A HREF="../../images/photo5.jpg">Une photo
de vacance</A>
Les liens internes ou signets
Lorsqu'on désire créer une page volumineuse, il est préférable d'insérer un menu avec des
liens hyper-texte internes à la page. Pour cela on utilise la même balise mais cette fois
26/43
Cours Techno Web
C. Pierkot
l'adresse de destination est un mots clé précédé du signe musical dièse #. Et il faudra, au sein
de la page insérer une balise marqueur dont l'identifiant sera ce mot clé pour qu'un clic de
souris sur le lien se dirige vers ce marqueur.
Syntaxe :
Départ :
<A HREF="#mot_clé">Texte_ou_image_à_cliquer</A>
Arrivée :
<A NAME="mot_clé">Texte_ou_image</A>
Exemple :
Départ :
<a href="#Fiche_1"> Lire et utiliser une carte</a>
Arrivée :
<a name="Fiche_1">Fiche 1</a>
Les info-bulles
L'attribut TITLE permet de faire afficher un court descriptif du lien lorsque le curseur de la
souris passe sur le lien.
Syntaxe :
<A HREF="page.htm" TITLE="description">
Texte_ou_image_à_cliquer</A>
Les email
Il est intéressant de part un clic de souris de permettre à vos visiteurs de vous laisser un
message. Pour cela, mettez comme adresse destination la syntaxe mailto:+ votre adresse
électronique.
Syntaxe :
<A HREF="mailto:votre_email">
Exemple :
<A HREF="mailto:[email protected]">
Ecrivez-moi</A>
Cette commande vous permet de spécifier un sujet et un message par défaut mais aussi
plusieurs destinataires.
Syntaxes :
<A HREF="mailto:votre_email?subject=
sujet_du_message">
27/43
Cours Techno Web
C. Pierkot
<A HREF="mailto:votre_email?body=
corps_du_message">
<A HREF="mailto:votre_email?subject=
<A HREF="mailto:votre_email?cc=
sujet_du_message&body= corps_du_message">
autre_destinataire"> Texte_ou_image_à_cliquer</A>
Images et zones réactives
La balise <MAP> sert à définit des zones réactives sur une seule image afin d'insérer des liens
sur une même surface. Elle permet à partir d'une seule image de proposer un panel de
différentes destinations internes comme externes. Elle est utile pour les bandeaux publicitaires
mais aussi et surtout pour les menus graphiques. Son utilisation est conditionnée à la présence
d'images avec la balise <IMG>.
Les images
On insert une image dans une page HTML avec la balise <IMG> dont les attributs sont NAME :
le nom de l'image, SRC : l'adresse (relative ou absolue) de l'image, WIDTH : sa largeur en pixels
ou en pourcentage, HEIGHT : sa hauteur en pixels ou en pourcentage, BORDER : son éventuelle
bordure en pixels (=2 par défaut lors d'un lien, sinon 0), ALT : un commentaire placé dans le
cadre en attendant son chargement et constitutif d'une bulle lors du passage de la souris,
ALIGN : alignement, HSPACE : marge horizontale entre l'image et les autres éléments (texte,
image...) en pixels, VSPACE : marge verticale en pixels, USEMAP : spécifie le nom de la carte à
utiliser sur l'image.
Si les dimensions de l'image ne sont pas spécifiées, le navigateur les déterminent
automatiquement une fois l'image chargée, c'est-à-dire que si le chargement d'une page est
très long, comme le navigateur aura affiché le texte avant l'image, il devra refaire la mise en
page une fois qu'il connaîtra ses dimensions.
Les attributs d'alignement sont les suivants : LEFT : aligné à gauche (du texte...), RIGHT :
alignée à droite, TOP : alignée en haut, MIDDLE : alignée au milieu, BOTTOM : alignée en bas,
BASELINE : basée sur la ligne, TEXTTOP : le texte est aligné en haut, ABSMIDDLE : l'image est
centrée au milieu de l'axe du texte, ABSBOTTOM : l'image est centrée sur la base du texte.
Syntaxe :
<IMG SRC="adresse_de_l'image" NAME="nom_de_l'image" WIDTH="largeur"
HEIGHT="hauteur" ALT="commentaire" BORDER="épaisseur_de_la_bordure"
ALIGN="alignement" HSPACE="marge_horizonale" VSPACE="marge_verticale"
USEMAP="#nom_de_la_carte">.
Exemple :
<img border="0" src="AmeriqueSud.JPG" width="551" height="763">
Note :
Le seul attribut obligatoire est SRC, tous les autres sont optionnels.
28/43
Cours Techno Web
C. Pierkot
Les cartes
Après avoir écrit votre balise <IMG> qui fait référence à une carte, il faut créer proprement dit
— grâce au conteneur <MAP> — les différentes zones de la carte à partir de leurs coordonnées
sur l'image. Une même carte peut théoriquement être appelée par plusieurs images différentes,
mais dans la pratique il est fort peu probable que vous utilisez deux images dont les zones
soient identiques. A noter que la carte peut être écrite avant ou après l'image qui l'appelle, le
principal c'est qu'elles soient toutes deux assez proche dans votre code pour qu'un temps de
chargement très long de votre page ne soit pas pénalisant.
Le conteneur <MAP> a pour seul attribut NAME : nom de la carte. Ce conteneur contient autant
de balises <AREA> qu'il y a de zones réactives.
Syntaxe :
<MAP NAME="nom_de_la_carte">
différentes balises <AREA>...
</MAP>
Exemple :
<p><map name="FPMap0"> …
</map><img border="0" src="Monde.JPG" width="799" height="488"
usemap="#FPMap0"></p>
Les zones
A une zone réactive est associée une balise <AREA> dont les attributs sont NAME : le nom de la
zone, SHAPE : le type de zone (cercle, rectangle ou polygone), COORDS : les coordonnées de la
zone (séparées par des virgules), HREF : l'adresse destination, ALT : le commentaire qui
apparaitra lorsque le curseur de la souris passera sur la zone.
Syntaxe :
<AREA NAME="nom_de_la_zone" SHAPE="type_de_zone" COORDS="coordonnées"
HREF="adresse_destination" ALT="commentaire">
Exemple :
<area href="Amérique%20du%20sud.htm" shape="polygon" coords="230, 237, 208, 270,
263, 420, 299, 388, 317, 328, 336, 267, 277, 232, 233, 236">
<area coords="178, 35, 131, 11, 95, 61, 116, 82, 145, 82, 146, 136, 157, 208, 209, 244, 228,
221, 200, 196, 263, 173, 309, 123, 297, 58, 318, 12, 202, 7" shape="polygon"
href="DescAmeriqueNord.htm">
<area href="Afrique.htm" shape="polygon" coords="382, 180, 350, 236, 442, 357, 503, 287,
520, 231, 468, 180">
29/43
Cours Techno Web
C. Pierkot
<area href="Océanie.htm" shape="polygon" coords="692, 256, 607, 347, 701, 420, 762,
295">
<area href="Europe.htm" shape="polygon" coords="397, 75, 362, 180, 414, 168, 464, 173,
536, 225, 578, 131, 521, 56">
Zone circulaire
Une zone circulaire est définie par la balise <AREA SHAPE="circle"> et dont l'attribut COORDS
prend pour valeurs la liste des abscisse, ordonnée à l'origine du centre et le rayon du cercle.
Syntaxe :
<AREA SHAPE="circle" COORDS="x,y,rayon" HREF="destination">
Exemple :
<MAP NAME="bulles">
<AREA SHAPE="circle" COORDS="50,50,40" HREF="#bulles">
</MAP>
<IMG SRC="images/map1.gif" WIDTH=180 HEIGHT=100 BORDER=0 USEMAP="#bulles">
Zone rectangulaire
Une zone rectangulaire est définie par la balise <AREA SHAPE="rect"> et dont l'attribut
COORDS prend pour valeurs les coordonnées des coins supérieur gauche et inférieur droit
séparées par des virgules.
Syntaxe :
<AREA SHAPE="rect" COORDS="x1,y1,x2,y2" HREF="destination">
Exemple :
<MAP NAME="menu">
<AREA SHAPE="rect" COORDS="10,3,60,16" HREF="#home">
<AREA SHAPE="rect" COORDS="10,16,60,30" HREF="#edito">
<AREA SHAPE="rect" COORDS="10,30,60,43" HREF="#links">
<AREA SHAPE="rect" COORDS="10,43,60,57" HREF="#mail">
</MAP>
<IMG SRC="images/map2.gif" WIDTH=70 HEIGHT=60 BORDER=0 USEMAP="#menu">
30/43
Cours Techno Web
C. Pierkot
Zone polygonale
Une zone polygonale est définie par la balise <AREA SHAPE="poly"> et dont l'attribut COORDS
prend pour valeurs la liste des abscisse et ordonnée à l'origine de chacun des points.
Syntaxe :
<AREA SHAPE="poly" COORDS="x1,y1,x2,y2,x3,y3,x4,y4,...x27,y27,x1,y1"
HREF="destination">
Exemple :
<MAP NAME="eux">
<AREA SHAPE="poly" COORDS="0,0,34,0,78,20,
43,33,46,69,19,54,0,78,0,0" HREF="#moi">
<AREA SHAPE="poly" COORDS="34,0,78,20,43,33,
46,69,19,54,0,78,0,93,91,93,123,76,98,49,147,34,131,0,34,0" HREF="#toi">
<AREA SHAPE="poly" COORDS="131,0,200,0,200,
94,91,93,123,76,98,49,147,34,131,0" HREF="#nous">
</MAP>
<IMG SRC="images/map3.gif" WIDTH=200 HEIGHT=94 BORDER=0 USEMAP="#eux">
Les formulaires
Les formulaires permettent de récupérer des informations auprès de vos visiteurs. Vous
pouvez ainsi créer une certaine interactivité avec vos visiteurs. Ils pourront vous envoyer des
messages et vous pourrez mieux les connaître.
Il y a plusieurs moyens pour récupérer ces informations. Soit vous utilisez un script coté
serveur (en CGI ou en PHP par exemple), ce script est interprété sur un serveur chez votre
hébergeur et pourra traiter les informations. Soit vous pouvez recevoir les infos directement
sur votre adresse email au moyen d'un "mailto". Je ne m'étendrai pas plus sur les scripts CGI
dans ce cours (ce n'est pas le but).
<BODY>
Voici un premier formulaire très simple :
<BR><BR>
<FORM action="mailto:[email protected]" method="post" enctype="text/plain">
Entrez votre nom : <INPUT type="text" name="nom">
<BR><BR>
31/43
Cours Techno Web
C. Pierkot
<INPUT type="submit" value="Envoyer" name="submit">
</FORM>
<BR><BR><BR>
Voici une version améliorée de notre premier formulaire :
<BR><BR>
<INPUT type="hidden" name="intro" value="Voici les infos récoltées via la formulaire : ">
Entrez votre prénom : <INPUT type="text" name="prenom">
<BR>
Entrez votre nom : <INPUT type="text" name="nom">
<BR><BR>
<INPUT type="submit" value="Envoyer" name="submit"> <INPUT type="reset"
value="Effacer les données" name="reset">
</FORM>
<BR><BR><BR>
Et pour finir cette première partie sur les formulaires, une troisième version de notre
formulaire :
<BR><BR>
<INPUT type="hidden" name="intro" value="Voici les infos récoltées via la formulaire : ">
Entrez votre prénom : <INPUT type="text" name="prenom">
<BR>
Entrez votre nom : <INPUT type="text" name="nom" size=25>
<BR>
Entrez l'adresse de votre site : <INPUT type="text" name="url" size=40 value="http://">
<BR><BR>
Entrez un mot de passe : <INPUT type="password" name="pass" size=10 maxlenght=10>
<BR><BR>
<INPUT type="submit" value="Envoyer" name="submit"> <INPUT type="reset"
value="Effacer les données" name="reset">
</FORM>
</BODY>
Ce qui donnera une page dont le contenu sera comme ceci :
Voici un premier formulaire très simple :
Entrez votre nom :
Envoyer
Voici une version améliorée de notre premier formulaire :
32/43
Cours Techno Web
C. Pierkot
Entrez votre prénom :
Entrez votre nom :
Envoyer
Effacer les données
Et pour finir cette première partie sur les formulaires, une troisième version de notre
formulaire :
Entrez votre prénom :
Entrez votre nom :
Entrez l'adresse de votre site :
http://
Entrez un mot de passe :
Envoyer
Effacer les données
Vous pouvez maintenant enregistrez votre page et la visualiser dans votre navigateur.
Explications des nouvelles balises utilisées :
- <form> et </form> : elles délimitent un formulaire. La présence de la balise de fin est
primordial !
L'attribut "enctype" permet de spécifier le type de données. Vous n'avez pas besoin d'y
toucher pour le moment.
L'attribut "action" désigne l'adresse du script qui va traiter les données. Par exemple avec un
CGI, nous aurions quelque chose comme ceci : action="cgi-bin/mon_cgi.pl", avec un script en
PHP ceci : action="mon_script.php" et enfin pour un mailto (envoi vers une mail) ceci :
action="mailto:[email protected]".
L'attribut "method" spécifie la manière dont les données remplies dans le formulaire doivent
être transmises. Il peut prendre 2 valeurs : "POST" ou "GET". Avec GET, les données sont
envoyées au serveur via l'URL et sont donc visibles dans celle-ci ! Avec POST, les données
sont directement envoyées au serveur et ne sont pas visibles. On utilisera presque toujours la
méthode POST pour les formulaires.
- <input> : cette balise permet de placer un champ dans lequel les informations peuvent être
recueillies. (pas de balise de fin !)
L'attribut "name" permet de désigner un champ du formulaire par un nom pour le traitement
des données. Chaque nom doit être unique !
33/43
Cours Techno Web
C. Pierkot
L'attribut "type" spécifie le type de champ.
Il peut prendre plusieurs valeurs :
- "text" pour entrer du simple texte
- "hidden" pour un champ caché non visible par le visiteur (on ne peut pas y ajouter du texte
!)
- "password" pour entrer un mot de passe (les caractères sont remplacés par des *)
- "submit" pour créer un bouton pour envoyer les données du formulaire.
- "reset" pour créer un bouton qui vide le formulaire et le remet comme au chargement de la
page.
L'attribut "value" permet de donner une valeur à un champ avant que le visiteur ne commence
à le remplir. Dans la cas d'un bouton (submit ou reset), cette valeur sera le texte affiché sur le
bouton !
L'attribut "size" donne la largeur du champ (20 par défaut).
L'attribut "maxlenght" quant à lui définit le nombre maximal de caractères pouvant être tapés
dans un champ. Si vous essayez de taper un caractère supplémentaire, il ne sera pas pris dans
le champ !
Les formulaires avancés :
Vous avez déjà sûrement vu dans des formulaires, des listes déroulantes, des cases à cocher et
bien voici comment procéder.
<BODY>
<B>Les boutons :</B>
<FORM>
<INPUT type="button" name="mon_bouton" value="Voici un bouton">
</FORM>
<B>Les liste déroulantes :</B>
<FORM>
Comment trouver ce tutorial jusqu'à présent :
<SELECT name="liste">
<OPTION value="excellent">Excellent</option>
<OPTION value="bon" selected>Bon</option>
<OPTION value="moyen">Moyen</option>
<OPTION value="faible">Faible</option>
<OPTION value="nul">Pitoyable</option>
</SELECT>
Ou bien, on peut préciser le nombre de valeur à afficher :
<SELECT name="liste" size="3"></option>
<OPTION value="excellent">Excellent</option>
<OPTION value="bon" selected>Bon</option>
34/43
Cours Techno Web
C. Pierkot
<OPTION value="moyen">Moyen</option>
<OPTION value="faible">Faible</option>
<OPTION value="nul">Pitoyable</option>
</SELECT>
</FORM>
<B>Les zones de textes :</B>
<FORM>
Entrez votre texte :
<TEXTAREA name="texte" cols=40 rows=5>Texte de départ</TEXTAREA>
</FORM>
<B>Les cases à cocher :</B>
<FORM>
Quels sont vos hobbys :
<BR>
Le sport : <INPUT type="checkbox" name="hobby1" value="sport" checked>
<BR>
Internet : <INPUT type="checkbox" name="hobby2" value="internet" checked>
<BR>
Votre site : <INPUT type="checkbox" name="hobby3" value="site">
<BR>
La lecture : <INPUT type="checkbox" name="hobby4" value="lecture">
<BR>
La télévision : <INPUT type="checkbox" name="hobby5" value="tv" checked>
</FORM>
<BR>
<B>Les boutons radio :</B>
<BR><BR>
<FORM>
Quel est votre niveau en HTML :
<BR>
<INPUT type="radio" name="niveau" value=3>Excellent
<BR>
<INPUT type="radio" name="niveau" value=2 checked>Moyen
<BR>
<INPUT type="radio" name="niveau" value=1>Débutant
</FORM>
</BODY>
Ce qui donnera une page dont le contenu sera comme ceci :
Les boutons :
35/43
Cours Techno Web
C. Pierkot
Les listes déroulantes :
Comment trouver ce tutorial jusqu'à présent :
Bon
Ou bien, on peut préciser le nombre de valeur à afficher :
Excellent
Bon
Moyen
Les zones de textes :
Entrez votre texte :
Texte de départ
Les cases à cocher :
Quels sont vos hobbys :
Le sport :
Internet :
Votre site :
La lecture :
La télévision :
Les boutons radio :
Quel est votre niveau en HTML :
Excellent
Moyen
Débutant
Explications des nouvelles balises utilisées :
- <select> et </select> : crée une liste déroulante. On peut lui attribuer une nom avec l'attribut
"name" ainsi que le le nombre d'éléments visibles de la liste avec "size" (1 par défaut).
- <option> et </option> : ajoute un élément à la liste déroulante créée avec un SELECT. On
peut lui donner une valeur grâce à son attribut "value". Par défaut, c'est la première balise
option qui sera celle par défaut. Si vous voulez que ce soit une autre, il faut ajouter le mot
suivant dans la balise en question : 'selected'.
- <textarea> et </textarea> : elles délimitent une zone de texte. Comme toujours on peut la
36/43
Cours Techno Web
C. Pierkot
nommer avec "name". On peut également en spécifier la taille avec "rows" (nombre de
lignes) et "cols" (nombre de colonnes).
Nous avons également vu 3 nouvelles valeurs pour l'attribut type d'un INPUT :
- "button" : crée un bouton cliquable. On lui donne un nom au moyen de "name" et une
valeur (qui sera le texte affiché sur ce bouton) avec "value". Les simples boutons n'ont pas un
grand intérêt à première vue mais ils en auront beaucoup quand on leur affectera des actions
via un JavaScript.
- "checkbox" : crée une case à cocher. On peut bien entendu lui donner un nom et une valeur
mais on peut aussi décider si elle doit être cochée ou non au chargement de la page.
Si la case doit être cochée, il faut rajouter dans la balise le mot suivant : 'checked'. Par défaut
une case n'est pas cochée.
- "radio" : crée un bouton radio. Un bouton radio seul n'a pas un grand intérêt. En général, on
en place plusieurs pour donner un choix aux visiteurs. Contrairement aux cases à cocher avec
lesquelles on peut sélectionner plusiers valeurs, avec les boutons radio, on ne peut en choisir
qu'une ! Quand on choisit une autre valeur, celle qui était sélectionnée ne l'est plus.
ATTENTION : les boutons radios doivent avoir le même nom (via l'attibut "name") !
Pour sélectionner la valeur par défaut, comme pour les cases à cocher, il faut ajouter le mot
'checked' dans la balise du bouton par défaut.
Récapitulatif : Liste de balises
Voici une liste des balises HTML les plus courantes avec leurs attributs les plus utilisés.
Légende pour les balises de fin :
•
•
•
V => Obligatoire
X => Interdite
? => Optionnelle
(Même si certaines balises de fin sont optionnelles, il est quand même conseillé des les
utiliser...)
Nom

Fonction
Permet de placer dans le code source d'une page des
commentaires qui ne seront pas affichés dans le navigateur.
Balise
de fin
V
Attributs : /
Exemple : 
A
Crée un lien hypertexte vers une autre page web ou vers un
ancre.
V
Attributs : href, name, target
Exemple : <a href="http://www.editeurjavascript.com"
target="_blank">L'éditeurJavaScript</a>
37/43
Cours Techno Web
B
C. Pierkot
Pour avoir du texte en gras.
V
Attributs : /
Exemple : <b>Texte en gras...</b>
BIG
Augmente légèrement la taille du texte.
V
Attributs : /
Exemple : <big>Texte un peu plus grand...</big>
BLOCKQUOTE Applique un retrait à un texte.
V
Attributs : /
Exemple : <blockquote>Texte qui sera en retrait...</blockquote>
BODY
Définit le corps (contenu affichable) de votre page web. Il doit
venir juste après l'en-tête de la page HEAD.
V
Attributs : bgcolor, background, alink, link, vlink, text
Exemple : <body>Contenu de votre page...</body>
BR
Ajoute un saut de ligne.
X
Attributs : /
Exemple : Ligne1...<br>Ligne2...
CENTER
Centre le texte.
V
Attributs : /
Exemple : <center>Voici un texte centré</center>
DIV
Regroupe des éléments pour en contrôler la structure avec des
feuilles de styles par exemple.
V
Attributs : id, class
Exemple : <div class="menu">Contenu de votre menu</div>
FONT
Permet de mettre de modifier du texte (couleur, taille, police,...). V
Attributs : color, face, size
Exemple : <font size=2 color="#ff0000" face="Verdana">Texte en taille 2 écrit en rouge
avec la police Verdana</font>
FORM
Permet de créer un formulaire.
V
Attributs : action, method, enctype, name, target
Exemple : <form action="fichier.php" method="POST">vos champs input</form>
H1 -> H6
Définit 6 niveaux pour les titres. Chaque niveau possède son
propre style.
V
Attributs : align
Exemple : <h1>Titre</h1>
HEAD
Définit l'en-tête de votre document. Ces informations ne seront
pas affichées par le navigateur.
V
38/43
Cours Techno Web
C. Pierkot
Attributs : /
Exemple : <head>en-tête de la page(titre, méta, style, script,...)</head>
HR
Place une séparateur horizontal.
X
Attributs : align, size, width, color (seulement IE)
Exemple : <hr size=2 width=250 align="center">
HTML
Indique que le fichier est un document HMTL.
V
Attributs : /
Exemple : <html>tout le code de votre page</html>
I
Met le texte en italique.
V
Attributs : /
Exemple : <i>texte en italique</i>
IMG
Ajoute une image dans votre page.
X
Attributs : src, border, width, height, alt, align, hspace, vspace
Exemple : <img src="image.gif" border=0 width=88 height=31 alt="Alternative">
INPUT
Ajoute un champ de formulaire (plusieurs types sont
disponibles).
X
Attributs : type, name, value, checked, size, maxlength
Exemple : <input type="text" name="nom" value="Votre nom" size=25 maxlength=40>
LI
Crée un nouvel élément pour une liste.
?
Attributs : value
Exemple : <li> Element de la liste(</>)
LINK
Permet de créer un lien vers un fichier externe (une feuille de
style par exemple).
X
Attributs : type, href, rel
Exemple : <link href="style.css" rel="stylesheet" type="text/css">
MARQUEE
Permet de faire défiler un texte (IE uniquement).
?
Attributs : direction, behavior, loop
Exemple : <marquee direction="right" behavior="scroll" loop=2>Texte
défilant(</marquee>)
META
Définit des paramètres supplémentaires dans l'en-tête de votre
page (très utile pour le référencement).
X
Attributs : name, content, http-equiv, url (seulement IE)
Exemple : <meta name="description" content="Description pour les moteurs de
recherches">
OL
Crée une liste numérotée.
V
Attributs : type, start
39/43
Cours Techno Web
C. Pierkot
Exemple : <ol type="a">vos éléments de liste</ol>
OPTION
Crée un nouveau choix dans un SELECT.
?
Attributs : value, selected
Exemple : <option value="choix1" selected>Webmaster (</option>)
P
Constitue un nouveau paragraphe.
?
Attributs : align, class
Exemple : <p align="center">texte du paragraphe (</p>)
SELECT
Crée une liste de sélection dans un formulaire.
V
Attributs : name, multiple, size
Exemple : <select name="choix" size=3>vos balises OPTION</select>
SMALL
Diminue sensiblement la taille du texte (au contraire de BIG).
V
Attributs : /
Exemple : <small>texte plus petit</small>
SPAN
Facilite la mise en forme (similaire à DIV pour des portions de
textes plus courtes).
V
Attributs : id, class
Exemple : <span class="normal">texte écrit en "normal"</span>
STRONG
Affiche le texte en gras (similaire à B).
V
Attributs : /
Exemple : <strong>texte en gras</strong>
STYLE
Permet de définir des règles de style à utiliser sur le document.
V
Attributs : type
Exemple : <style type="text/css">vos éléments de style</style>
TABLE
Crée un tableau.
V
Attributs : align, border, cellpadding, cellspacing, bgcolor, width, bordercolor (IE
uniquement), background (IE uniquement)
Exemple : <table width="98%" border=1 cellpadding=3 cellspacing=0 align="center">vos
celulles</table>
TD
Crée une nouvelle celulle dans un tableau.
?
Attributs : align, valign, bgcolor, colspan, rowspan, width, height
Exemple : <td align="center" valign="top" colspan=2 width="50%">contenu</td>
TEXTAREA
Crée une zone de texte dans un formulaire.
V
Attributs : rows, cols, name
Exemple : <textarea name="commentaire" cols=50 rows=5>votre texte</textarea>
TITLE
Détermine le titre qui sera affiché dans la barre de titre du
V
navigateur. Cette balise doit venir dans l'en-tête (HEAD) de votre
40/43
Cours Techno Web
C. Pierkot
code
Attributs : /
Exemple : <titre>texte dans la barre de titre</titre>
TR
Crée une nouvelle ligne dans un tableau poyr y insérer des
celulles (TD).
?
Attributs : align, bgcolor, valign
Exemple : <tr>vos celulles</tr>
U
Affiche le texte en souligné.
V
Attributs : /
Exemple : <u>texte souligné</u>
UL
Crée une liste à puces.
V
Attributs : type, start
Exemple : <ul type="circle">vos éléments de liste</ul>
Insérer du son ou une video :
Sons et vidéos
Insertion d'un son
En préalable, il faut absolument dire que la possiblité d'afficher des sons dans une page Web
dépendra beaucoup de la configuration de l'ordinateur de l'internaute. Il suffit que les navigateurs
(netscape ou IE, sans compter tous les autres) ne soient pas configurés correctement ou ne
contiennent pas les bons plug-ins pour que certains formats ne soient pas lus. Sans compter que par
exemple Netscape et Internet Explorer ne gèrent pas tous les formats de la même manière.
Plusieurs possibilités existent pour mettre du son sur une page html (son au format AIF, WAV, AU,
MP3, QuickTime, Real Audio, Midi,,...). L'inconvénient des trois premiers formats (Aif sur Macintosh et
Wav sur Windows) est qu'ils ne sont pas compressés. Or, comme pour les images, avant de mettre un
son sur une page, il faut lui faire subir une sérieuse cure d'amaigrissement. Ainsi, un fichier MP3 est à
peu près dix fois moins lourd que son équivalent en WAV, pour une sonorité très semblable.
D'une manière générale, quatre possibilités existent pour insérer une séquence sonore dans une page
web, correspondant chacune à une balise différente:
- <BGSOUND> pour diffuser de la musique en arrière plan. Mais Internet Explorer est le seul à
reconnaître cette balise. Nous n'en parlerons pas ici.
- <A HREF> Balise universelle, mais dont les résultats sont très tributaires de la configuration du
visiteur
- <EMBED> Balise provenant de l'univers de Netscape qui donne la plupart du temps les meilleurs
résultats. Seul inconvénient, certains types de fichiers nécessitent un plug-in.
- <OBJECT>, balise récente que nous ne traiterons pas ici.
<A HREF>
La manière la plus simple : créer un lien (texte ou image) qui ouvrira le lecteur par défaut sur
l'ordinateur de l'internaute. On a ici un simple lien pointant vers un fichier son. Celui-ci sera lu par le
player, parfois dans une nouvelle fenêtre.
41/43
Cours Techno Web
C. Pierkot
<A HREF="medias/pig.aiff"><IMG SRC="images/cochon.gif" WIDTH=40 HEIGHT=40 BORDER=0 ALIGN=middle>
<EMBED>
- La manière la plus élégante : utiliser la balise <embed> et copier cette balise dans le code source
de votre page html (le son se nomme ici bubbles.aif). Le fichier sera alors lu en arrière-plan. Dans la
page, seule la fenêtre du panneau de commande de lecture sera visible. On peut fixer la présence
d'un contrôleur, la lecture ou non en boucle, le démarrage ou non du son dès l'ouverture d'une page.
<EMBED SRC="medias/bubbles.aiff" WIDTH =160 HEIGHT =16 CONTROLLER=true LOOP =false AUTOPLAY
=false>
On peut ainsi insérer un fichier aif, au, wav, midi, mp3
Dans certains cas, le fichier ne pourra pas être lu par le navigateur, il sera alors téléchargé, et c'est
par exemple Winamp sur PC qui jouera les sons mp3.
On peut aussi utiliser QuickTime pour effectuer une compression de la séquence sonore. Cela a
permis par exemple de faire passer ce son de 3,1 Mb ( à l'enregistrement) à 44 k, non sans perte de
qualité il est vrai.
Si l'on insère une séquence QuickTime (qui ne comprendra en fait qu'une bande-son), on le fait très
facilement par le menu Insertion. Différents réglages sont alors possibles, qui correspondent aux
réglages vus plus haut pour la balise <embed>. La fenêtre ci-dessous correspond donc au codesource dans le cadre bleu. Le nom du fichier son est ici musique.mov, se trouvant dans le dossier
medias à côté de la page html.
<EMBED SRC="medias/musique.mov" PLUGINSPAGE="http://www.apple.com/quicktime/download" WIDTH=160
HEIGHT=16 CONTROLLER=true LOOP=false AUTOPLAY=false>
Insertion d'une vidéo QuickTime
Il faut retenir que pour visualiser une séquence QuickTime dans un navigateur, celui-ci doit être muni
des plugs-in adéquats. Ceci est aussi valable pour d'autres données multimédia (plug-in Flash par
exemple).
Comme pour les images, il faut stocker ces différents éléments dans un dossier à l'intérieur du dossier
de site.
42/43
Cours Techno Web
C. Pierkot
D'autres formats de vidéos sur le net existent, mais je me suis restreint à celui-ci car il est directement
géré par Home Page.
L'insertion d'un movie QuickTime se fait simplement en choisissant Séquence QuickTime dans le
menu Insertion ( ce qui correspond à l'utilisation d'une balise embed). Par un double-clic sur la
séquence, on ouvre l'éditeur de Séquence QuickTime ou différents paramètres peuvent être réglés
(démarrage automatique, boucle, présence du contrôleur, ...).
Le problème de la vidéo reste bien évidemment sa taille très importante, difficilement compatible avec
le Net dans sa structure actuelle. Donc le vrai travail est en amont, afin de rendre les vidéos les plus
petites.
Page contenant la 1ère vidéo : video1.html
Page contenant une vidéo qui se déclenche dès le chargement de la page: video2.html
Comme nous l'avons vu pour les sons, il est aussi possible d'utilser simplement un lien vers un fichier
: video2
43/43

CM FrontPage et HTML - Site professionnel de C. Pierkot

Transcription

Documents pareils

La propriété BACKGROUND-COLOR

cours d`initiation a la creation de pages internet en html plan

2000 Introduction au World-Wide Web...

Latvia / Lettonie Riga 64,589 km² Latvian / Letton Andris Berzins

Anibal Cavaco Silva Tower of Belem/Tour de Bélem

SCHWEIZERISCHER BEARDED - COLLIE

Html et html5 1 - pierre

Queen Margrethe II / Reine Margrethe II The Little Mermaid / La

Le langage « HTML »

Name of the country / Nom du pays: The Netherlands / Pays