Comment créer une page Web HTML. A. IDY Langage HTML 1

(1)

Comment créer une page Web

HTML

(2)

Objectifs de la formation

Se familiariser avec le codage HTML

Acquérir une pratique minimale

Être capable de mener à bien la construction d'un site ou d'une page

Acquérir les capacités d'auto-formation

nécessaires pour suivre les évolutions à venir

Connaître le lexique Internet

(3)

A. IDY Langage HTML 3

Contenu

Lexique Internet (Proxy, Firewall, FA…)

La sécurité sur Internet (Antivirus, authentification…)

Les étapes de la création d’un site Web

Introduction au langage HTML La structure du langage

Notion de balise

Les principales balises L’intégration d’hyperliens

Possibilités avancées du langage

Création d’une page Web

Aperçu des possibilités offertes par les assistants Saisie et mise en forme du texte

Créer un lien hypertexte Insertion d’une image

Les formats d’image gif, jpeg

(4)

Déroulement de la formation

Partie 1

Les étapes de la création d’un site web

Partie 2

Le langage html

Création de documents

Balises essentielles

Création de liens

Images

Formulaires

Tableaux

Frames

(5)

Rappels

Serveur

programme sur ordinateur "X" dont le but est de répondre à des requêtes de logiciels clients tournant sur d'autres ordinateurs.

propriété qui consiste à faire exécuter un programme au serveur est essentielle car va permettre l'interfaçage avec pratiquement n'importe quel logiciel.

Proxy

S’intercale entre des clients W3 et des serveurs d’information utilisant divers protocoles, il sert de relais.

Client

programme permettant de soumettre des requêtes à un serveur

1 client peut dialoguer avec plusieurs types de serveurs (ftp ...)

nombre de services accessibles (messagerie, forums ...) dépend du logiciel client

logiciels les plus utilisés : Netscape, Explorer, Amaya

HTTP (Hypertext Transfert Protocol)

protocole de transmission des données utilisé entre un serveur et un client

(6)

Étapes de création d’un site

La création et la gestion d’un site professionnel fait appel à des compétences et des prestataires multiples. Organisation, gestion de projet, ergonomie, concepts, contenu, identité, lisibilité, marketing, commerce en ligne, traduction, graphisme, interactivité, programmation, base de données, nom de domaine, stockage, sécurisation, référencement, promotion, statistiques, mise à jour, etc..

Notre présence sur le réseau ne saurait être efficace sans l’intervention de professionnels pointus et exigeants, rodés à la pratique, aux différents outils, et capables de se remettre sans cesse en question face aux nouvelles technologies et aux nouveaux besoins qui naissent.

(7)

Partie 1

Étapes de création d’un

site web

(8)

Étapes de création d’un site

Le projet Internet prend en charge la conception totale du site web :

Définition du cahier des charges

Conception de l’ergonomie du site

Définition de la charte graphique

Création graphique et optimisation

Développement HTML, ASP, Vb Script

Enregistrement de nom de domaine

Mise en place d’e-mail, de compte FTP

Installation et configuration du site sur le serveur

Ou mise en place d’un serveur intra entreprise

Référencement auprès des moteurs de recherches

Promotions, publicité et achat d’espaces

Formation du personnel à l’Internet

Maintenance du site, mise à jour des données

Fourniture de statistiques d’accès

Création et gestion de forum en ligne

Création et gestion de base de données

(9)

Construire son site web

Les étapes de construction d’un site web :

Choix du nom de domaine

Définition du contenu

Ergonomie (désign, arborescence)

Développement

Hébergement

Promotion

Mesure d’audience du site

(10)

Concevoir son site

Définition et organisation du contenu

Répondre aux questions suivantes :

Intérêt du site ?

Cible visée ?

Type d’information délivrée ?

Axes de communication ?

Type de retour souhaité ?

(11)

Concevoir son site

Ergonomie

Définir un principe de mise en page en tenant compte des contraintes inhérentes au langage HTML et aux particularités de lecture différentes selon les navigateurs.

Construire le cheminement entre les pages en privilégiant l’équilibre entre exhaustivité et simplicité.

Élaborer un design qui saura appuyer la qualité de l’information offerte au «visiteur ».

(12)

Concevoir son site

Programmation

Programmer un site, c’est respecter chacune des étapes suivantes :

Écriture de chaque «page » au format HTML.

Mise au format des images en respectant les contraintes de rapidité de chargement.

Mise en place et validation des liens entre pages, des liens e-mail et formulaires gérés par le site.

Adaptation des mises en page programmées pour obtenir une lecture «standard » pour tout type de navigateur.

Tests chronométrés de la lecture du site, optimisation et

(13)

Étapes finales

Hébergement : un choix stratégique

La qualité de l’hébergement est un

élément capital pour le succès d’un site.

Référencement

(14)

Le langage HTML

Partie 2

(15)

HTML : définition et principes généraux

HTML (Hypertext Markup Language)

langage de balisage hypertexte

inventé par Tim Berners Lee au CERN

principe : tous les documents ont des éléments en commun DONC il est possible de les étiqueter, de les baliser.

permet de

publier des documents on-line

retrouver de l'information on-line via liens

opérer des transactions entre services

inclure du multimedia et d'autres applications dans les documents

se compose d'une collection de styles (indiqués par des balises) qui définissent les divers composants d'un doc. W3

utilisé par W3 pour créer et reconnaître des documents hypermedia

décrit la structure et le contenu d'un document ET NON le format et l'apparence d'une page

html 4.01

(16)

Créer des documents

depuis un éditeur de texte ou un logiciel spécialisé.

HTML utilise jeu de caractères

norme ISO 10646

2 octets par caractère

UCS (Universal Character Set)

(17)

Éditeurs HTML et navigateurs

Éditeur de texte, qui permet de voir le code HTML créer

WYSIWYG (What You See Is What You Get), qui montre le résultat tel qu’il

apparaît sur un navigateur.

Navigateurs Web: pour visualiser les documents HTML comme Nestcape

Navigator et Microsoft Internet Explorer

(18)

La standardisation HTML

W3C : World Wide Web Consortium qui développe les standards HTML. Il a été créé en 1994 au Massachusetts

Institute of Technology (MIT) pour

suivre le développement des standards tel que le standard HTML

http://www.w3.org

(19)

Syntaxe du langage

Balises (ou "tag")

conteneur de texte => attribuent une fonction spécifique au segment encadré.

fonctionnent habituellement par paire (balise d'ouverture et de fermeture)

Attributs

précisent la fonction ou le mode d'application des balises.

sont séparés par un espace

sont mentionés uniquement dans la balise d'ouverture

leur ordre n'a pas d'importance

peuvent avoir une valeur (nom, unité de mesure ...) inscrite entre guillemets

Syntaxe

<Nom de la balise de début Attribut1 = "valeur1"

Attribut2 = "valeur2" ... Attribut n = "valeur n"> texte mis en forme </Nom de la balise de fin>

(20)

Le document minimal

<HTML>

<HEAD>

informations générales sur le document

</HEAD>

<BODY>

texte du document + commandes de formatage

</BODY>

</HTML>

Remarque

balises ne sont pas sensibles à la casse:

(21)

La structure d’un document HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML> identifie le document comme un document HTML. Il est nécessaire pour les vieux navigateurs

<HEAD> Contient les informations du document comme le titre, les scripts utilisés, description du document. Il n’est pas nécessaire pour tous les navigateurs.

<TITLE> Titre du document qui est visible sur la barre du titre du navigateur </TITLE>

</HEAD>

<BODY > les informations qui vont s’afficher sur l’écran.

</BODY>

</HTML>

(22)

Les balises fondamentales

Titres

utilisé comme bookmark

placé dans l'en-tête <HEAD> du document

Intertitres

<H1> .... </H1> , <H2> ... </H2> , ...

Paragraphes

<P>

Remarques

penser à indenter le code source pour préserver la lisibilité

ne pas croiser les balises:

<H1> cours sur les <B> plantes </H1></B>

(23)

Les attributs

Certaines balises utilisent des attributs qui fournissent des informations additionnelles sur un élément comme aligner une image, la couleur d’un élément.

L’ordre de ces attributs dans la balise n’est pas important.

Exemples :

<H1 ALIGN=‘‘Center’’> titre centré </H1>

<H1 ALIGN=‘‘Center’’ SIZE=‘‘+2’’

COLOR=‘‘ #FF0000’’>Titre </H1>

(24)

Exemple

Code HTML saisi :

<HTML>

<HEAD>

<TITLE> exemple de page html </TITLE>

</HEAD>

<BODY>

<H1> première partie </H1>

Ce document présente les fondamentaux <BR> d'une création de page html

<H2> le document de base </H2>

</BODY>

</HTML>

Code HTML affiché par le navigateur:

première partie

Ce document présente les fondamentaux d'une création de page html

(25)

L’en-tête

Elle est repérée par la paire de

marqueurs <HEAD>….</HEAD>

Les informations écrites dans l’en- tête décrivent certaines propriétés du document, comme son titre

(obligatoire), et des informations

spéciales supplémentaires.

(26)

L’élément d’en-tête META

Il s’emploie pour intégrer des informations supplémentaires au document.

Il dispose de trois attributs:

NAME : Utilisé pour nommer une propriété (auteur, date de publication,…). Si NAME est absent, on peut considérer qu’il est égal à la valeur de l’attribut HTTP-EQUIV.

CONTENT : Donne la valeur d’une propriété dont le nom est définit au préalable par NAME

HTTP_EQUIV : Lie l’élément à un en-tête de réponse HTTP

(27)

Exemple

<META HTTP-EQUIV=‘‘Keywords’’

CONTENT=’’Web, html’’>

<META HTTP-EQUIV=‘‘Pour répondre’’

CONTENT=’’idy_azziddine@yahoo.fr’’>

Le serveur inclut ces en-têtes de réponse :

Expiration : 1 avril 2004

Keywords : Web, html

Pour répondre :idy_azziddine@yahoo.fr

(28)

L’élément d’en-tête TITLE

Pour indiquer le titre d’un document HTML, tapez-le entre <TITLE> et

</TITLE>

Le titre apparaît dans la barre du titre du navigateur

Il est aussi exploité lorsque l’utilisateur enregistre dans son navigateur un

signet (bookmark) pour ce document.

(29)

Le corps du document

Il vient après l’en-tête. Il est défini par la paire de balises <BODY> et </BODY>

Pour insérer des commentaires dans le texte source du document HTML, on utilise les

marqueurs <COMMENT> au début et

</COMMENT> à la fin.

On peut aussi utiliser <! Pour le début des commentaires et --> pour la fin des

commentaires

Exemple : <!Mes commentaires ne sont pas affichés par le navigateur-->

(30)

Titre

Il existe six niveaux de titres

La syntaxe : <Hn>Texte du titre </Hn> n allant de 1 à 6

Alignement des titres:

<H1 ALIGN=CENTER> titre au centre</H1>

<H1 ALIGN=LEFT> titre à gauche</H1> (par défaut)

<H1 ALIGN=RIGHT> titre à droite</H1>

(31)

Création de paragraphes

Le navigateur agence le texte en fonction de la largeur de la fenêtre d’affichage. Le retour à la

ligne que nous forçons avec la touche ENTREE n’a aucune influence sur les coupures des lignes

réalisées dans le navigateur Web.

Seul le marqueur <P> marque le début d’un paragraphe. Le marqueur </P> est facultatif.

Exemple :

<P>

Nouveau paragraphe

</P>

(32)

Espace insécable

Pour empêcher la séparation de deux mots séparés par un espace, il faut employer un espace sécable   (No Break Space) à la place de l’espace ordinaire.

Pour forcer le démarrage d’une nouvelle ligne sans pour autant créer un nouveau

paragraphe, on utilise le marqueur <BR>

(Break)

(33)

Alignement de paragraphe

Les attributs d’alignements sont aussi utilisés dans le formatage d’un paragraphe

Exemple:

<P ALIGN=CENTER> Alignement centré

<P ALIGN=LEFT> Alignement gauche (par défaut)

<P ALIGN=RIGHT> Alignement droite

Tout texte, tableau, image, etc., se trouvant

entre les marqueurs <CENTER> et </CENTER>

est centré dans la largeur du document

(34)

Formatage des caractères 1

<EM> Mise en valeur, donne l’italique </EM>

<STRONG> Mise en valeur renforcé, donne du gras </STRONG>

<CITE>…</CITE>, utilisé pour faire des citations ou des références : titre de livre, titre de film,

donne de l’italique

<CODE>…</CODE>, pour afficher du code informatique

(35)

Formatage des caractères 2

<VAR>…</VAR>, pour afficher des variables.

<BLOCKQUOTE>…</BLOCKQUOTE>, paragraphe décalé vers la droite pour le détacher du reste du texte. (citations)

<ADRESS>…</ADRESS>, pour afficher une adresse, donne de l’italique.

<B>…</B>, Gras

<I>…</I>, Italique

(36)

Formatage de caractères 3

<U>…</U>, souligné (éviter de l’utiliser)

<TT>…</TT>, télétype (machine à écrire)

<S>…</S>, barré

<SMALL>…</SMALL>, petite police

<BIG>…</BIG>, grande police

<SUB>…</SUB>, indice

<SUP>…</SUP>, exposant

<BLINK>…</BLINK>, clignotant

<PRE>…</PRE>, texte préformaté exactement de la façon souhaitée, sans avoir à taper <BR>

(37)

Polices et caractères spéciaux

(38)

Taille des caractères

La taille du texte est définie avec la balise

<FONT>

<FONT SIZE=n> Texte de taille n </FONT>, la valeur de n est comprise entre 1 (petit) et 7 (très gros). La valeur 3 est la taille par

défaut.

La valeur <FONT SIZE> permet d’obtenir les mêmes résultats que les balises <BIG> et

<SMALL> mais avec plus de précision.

(39)

Couleur des caractères

L’attribut COLOR définit la couleur de la police

<FONT SIZE=5 COLOR=‘’yellow’’> La taille de ce texte est 5 et sa couleur est jaune</FONT>

L’attribut COLOR peut être défini avec les noms de couleur standards: black, white, red, green, blue, yellow, aqua, fuchsia, gray, lime, marron, purple, navy, silver, teal, ou avec les attributs de couleur hexadécimaux (RRGGBB).

(40)

La police de caractères

L’attribut <FACE> permet de contrôler l’apparence d’une police.

<FONT FACE=‘’Arial’’ SIZE=4

COLOR=‘’blue’’>Ce texte est écrit avec une police Arial d’une taille de 4 et avec une

couleur bleue.</FONT>

Attention, une machine ne peut lire une

police que si elle la possède. Sinon, elle utilise sa police par défaut.

Exemples de police : Arial, Times New

(41)

Caractères spéciaux

< <

> >

& $amp;

‘’ "

À, à À à

Â, â Â â

È, è È è

É, é É é

Ê, ê Ê ê

(42)

Les listes

(43)

Les balises de liste

Listes

non ordonnées (avec des puces)

<UL>

<LI> premier item

<LI>second item

</UL>

ordonnées (avec des numéros ou des lettres)

de définition

<DL>

<DT> terme à définir

<DD> définition

<DT>

<DD>

</DL>

(44)

Petit exercice ...

Donner le code html du plan suivant:

villes françaises

1. toulouse

a. toulouse centre b. toulouse sud c. toulouse nord 2. paris

.centre ville .arrondissements .périphérie 3. bordeaux

villes marocaines

1. casablanca

(45)

Corrigé

<UL>

<LI> Villes françaises

<OL>

<LI> Toulouse

<LI> toulouse centre

<LI> toulouse sud

<LI> toulouse nord

</OL>

<LI> Paris

. centre ville .arrondissements .périphérie

</UL>

<LI> Bordeaux

</OL>

<LI> Villes marocaines

<OL>

<LI> casablanca

<LI> rabat

<LI> tanger

</OL>

</UL>

(46)

Autres balises

texte préformatté

citations

adresse

cassure forcée de ligne

<BR>

ligne horizontale

<HR>

SIZE = "px"

WIDTH = "px" ou "%"

ALIGN = "feft/right/center"

(47)

Filets horizontaux

Le marqueur <HR> commande l’affichage d’un filet horizontal qui occupe toute la largeur de la fenêtre du navigateur.

Les options pour les filets :

<HR NOSHADE>, filet sans ombre

<HR SIZE=5>, filet de 5 pixels d’épaisseur

<HR WIDTH=50%>, le filet fera la moitié de la largeur de la fenêtre du navigateur (largeur relative).

<HR WIDTH=240>, le filet aura une largeur de 240 pixels quelles que soient les variations de la largeur de la fenêtre.

<HR WIDTH=75% ALIGN=RIGHT ou LEFT>, pour caler le filet sur la droite ou à gauche de la fenêtre d’affichage. L’alignement par défaut est le centrage.

<HR COLOR=‘’green’’>, le filet aura une couleur verte (uniquement sur IE).

(48)

Les liens

(49)

Un lien permet de définir :

une région sensible au clic souris dans un document

l'endroit ou l'on va se retrouver après ce clic.

Trois étapes :

lien

</A>

Exemples :

Consultez mon <A HREF = "cvidy.html"> curriculum vitae

</A>

Visitez le site de <A HREF =

"http://www.menara.ma">MENARA </A>

doc. A doc. B

lien

Créer un lien ... vers un autre document

(50)

Créer un lien ... vers une section spécifique d'un autre document

Définir la cible

dans le document "cible"

<A NAME = "nom de la section"> section </A>

Créer son lien

dans le document "source"

lien

(51)

Créer un lien ... vers une section spécifique du doc. courant

même procédé en supprimant le nom de fichier.

document A lien

partie cible

(52)

Autres liens

lien vers un serveur de news

pour que le lien soit valide, le visiteur doit être abonné au serveur de news

lien vers un fichier à télécharger

<A HREF="fichier.exe"> cliquez ici pour télécharger </A>

lien e-mail

<A HREF="">adresse_e_mail</A>

avec sujet

<A HREF="mailto:

idy_azziddine@yahoo.fr?subject=renseignement">adresse</A>

avec sujet et texte dans le corps du message

<A HREF="mailto:

idy_azziddine@yahoo.fr?subject=renseignement&BODY=votre message">adresse_e_mail</A>

avec sujet, envoyé à 2 personnes

(53)

Types de liens

liens absolus

permet de localiser un fichier à partir du répertoire courant du nœud le plus élevé de l'arborescence du disque dur.

commence toujours par une barre de fractionnement

ne sont pas "portables"

liens relatifs

pointe vers un fichier spécifique

ne prend en compte que le nom du fichier

ne devra pas être modifié si on déplace le fichier dans l'arborescence du disque

(54)

en bref ...

types de liens

internes (doc. renvoie à une de ses sections)

externes (doc. renvoie à un autre doc. ou à une section d'un autre doc.)

exécutables (fichiers en téléchargement,

déclenchement d'animations ou de programmes -plug-in)

IMPORTANT

on peut imbriquer une ancre dans une balise

<H1> <A HREF=« idy.htm"> Cours </A> </H1>

(55)

Les URL

utilisés pour

créer un lien vers une autre ressource

associer un programme externe à une page html (feuille de style, script, applet ...)

inclure une image ou un objet

créer une image réactive

envoyer un formulaire

créer des frames

spécifier des métadonnées

Définition

Uniform Ressource Locator

adresse physique d'un ensemble de données sur Internet

RFC 1738 et 1808

(56)

Les URL

regroupe diverses informations

type de ressource accessible (protocole d'accès)

adresse du serveur

localisation du fichier (détail de l'arborescence)

syntaxe

protocole :// nom de machine [: port] / nom de fichier [#ancre]/ ? liste de paramètres

exemple

wais://quake.think.com:210/directory-of-

(57)

Les URL

URL absolus et relatifs

même principe que pour les liens

commande <BASE>

indique l'URL de référence qui sera utilisé pour compléter tous les URL relatifs dans un document

si on a un lien du type

le browser ira chercher le doc. situé à l'adresse

http://www.ofppt.ma/docs/www.html

(58)

Attributs du marqueur BODY

BACKGROUND: pour utiliser une image qui servira de fond de document

BGCOLOR: indique la couleur de fond du document

TEXT: indique la couleur du texte du document

LINK: indique la couleur du texte des hyperliens

VLINK: indique la couleur du texte des hyperliens déjà visités

ALINK:indique la couleur du texte de l’hyperlien actif

<BODY BGCOLOR=‘’RRVVBB’’ TEXT=‘’RRVVBB’’

LINK=‘’RRVVBB’’ VLINK=‘’RRVVBB’’ ALINK=‘’RRVVBB’’>

Les valeurs de RR, VV et BB vont de 00 à FF

(59)

Les images

(60)

Insertion d’une image

Le marqueur <IMG> permet d’insérer une image dans un document

L’attribut ALT (alternate text) sert à afficher une légende pour l’image dans le cas ou le navigateur travaille en mode texte, ou

l’utilisateur a inhibé l’affichage.

(61)

Cadrage des images

Si du texte suit la déclaration de l,image, celui-ci commence au bas de l’image sur sa droite par défaut.

On peut modifier l’alignement de l’image en utilisant l’attribut ALIGN

Alignement peut être BOTTOM (défaut), TOP, MIDDLE, LEFT, RIGHT

(62)

Dimensions des images

Les attributs WIDTH (largeur) et HEIGHT (hauteur) modifient les dimensions de l’image.

<IMG SRC=‘’image’’ WIDTH=xx

HEIGHT=yy> ou xx et yy sont les

nombres de pixels.

(63)

Espace autour de l’image

Les attributs VSPACE et HSPACE

ménagent une marge au-dessus et au- dessous de l’image (VSPACE) où à

gauche et à droite de l’image (HSPACE).

Ici on ménage xx pixels au dessus et dessous et yy pixels à gauche et à droite de l’image.

(64)

Hyperlien sur une image

Une image peut servir pour mettre en place un

hyperlien. On clique sur l’image, pour activer le lien.

On peut définir une bordure autour de l’image avec l’attribut BORDER du marqueur <IMG>.

La bordure n’apparaît que si l’image est un hyperlien

<A HREF=‘’adresse’’><IMG SRC=‘’image’’

BORDER=n></A> où n est le nombre de pixels.

(65)

Les types de fichier image

Les deux formats d’image les plus courants sur le Web sont les formats GIF (.gif) et JPG (.jpg ou .jpeg)

Le format GIF (CompuServe Graphic Interchange Format) : les fichiers créés ou scannés ont en général une meilleure allure et un chargement plus rapide avec un format GIF. La taille des fichiers GIF est réduite au minimum avec

l’utilisation de 256 couleurs.

Le format JPEG (Joint Photographic Experts Group): utilise des couleurs de 24 bits (millions de couleurs), il est idéale pour afficher les photographies de façon très réaliste

.

(66)

Traitement des images

Recommandations :

penser au temps de chargement et d'affichage

ne jamais afficher d'images situées sur serveur extérieur

astuce : préciser attributs WIDTH et HEIGHT

possibilité de récupérer doc. sans images

demandez vous si une image est indispensable

offrez une alternative <IMG ALT ... >, <IMG LONGDESC ... >

pensez à leur destination

résolution écran

résolution impression courante

(67)

Tableaux

(68)

Tableaux

Intérêt :

pratique et ergonomique / palliatif des insuffisances de html

avant : <PRE>

Balises principales

attribut BORDER = "px"

astuce <TABLE BORDER="0">

<CAPTION> titre du tableau </CAPTION>

attribut ALIGN = "top" (valeur par défaut) ou "bottom"

<TABLE SUMMARY="description"> sera interprété par synthétiseurs vocaux

ligne <TR> </TR>

en-tête <TH> </TH>

cellule <TD> </TD>

La description d'un tableau en HTML se fait ligne par ligne et pour chaque ligne, cellule par cellule

colonnes calculées automatiquement en fonction du nombre de cellules par ligne

Chaque cellule peut contenir n'importe quel élément HTML (image, texte, lien, applet,

(69)

TABLEAUX

Cellules vides

Affichage

ALIGN = "LEFT" "RIGHT" "CENTER" "JUSTIFY"

Alignement dans les cellules

mêmes attributs dans <TR> vaudront pour toute la ligne

par défaut

en-têtes centrées horiz. et vert.

données centrées et alignées à gauche

left center right

top

middle

bottom

align

valign

(70)

TABLEAUX

cellules fusionnées

une cellule sur plusieurs lignes ou colonnes

ROWSPAN

1 cellule sur hauteur de plusieurs lignes

valeur de l'attribut définit hauteur en ligne de la cellule

COLSPAN

1 cellule sur largeur de plusieurs colonnes

valeur de l'attribut définit largeur en colonne de la cellule

cellule fusionnée

<TD COLSPAN="2">cellule fusionnée</TD>

(71)

TABLEAUX

épaisseur de quadrillage

CELLSPACING="px" (2 par défaut)

espacement des données

CELLPADDING="px" (1 par défaut)

(72)

TABLEAUX

groupement de lignes

THEAD, TFOOT, TBODY

groupement de colonnes

COLGROUP

ces groupements permettent :

d'appliquer des feuilles de style sans les répéter

d'éviter de ressaisir des données si le tableau est sur plusieurs pages

d'interroger et de faire des tris à la manière d'un tableur

(73)

TABLEAUX

bords et enrobages

bordures extérieures

frame =

"void/above/below/hsides/vsides/lhs/rhs/box"

bordures intérieures (séparations entre lignes et colonnes)

rules = "none/groups/rows/cols/all"

(74)

Les formulaires

(75)

Définition

Les formulaires WEB permettent de collecter les données des visiteurs.

Le langage HTML comporte des marqueurs pour construire des formulaires.

Lorsque l’utilisateur rempli son formulaire, il

clique sur un bouton approprié et le navigateur Web transmet les données du formulaire au

serveur Web qui va les traiter.

(76)

Structure d’un formulaire

Le formulaire se compose d’un ou plusieurs éléments (contrôles):

Case de saisie simple

Case mot de passe

Case de saisie multiple

Case à cocher

Boutons radio

Liste déroulante

Liste à choix multiple

Bouton de commande submit

Bouton de commande reset Caché

(77)

Squelette d’un formulaire

Un formulaire est délimitée par une paire de marqueurs <FORM>…</FORM>.

…

</FORM>

METHOD indique la méthode (GET, POST) utilisée pour transmettre les données au serveur Web.

ACTION :chemin où sont acheminées les données.

(78)

Saisie du texte

La case de saisie sert à taper du texte (1 ligne)

<INPUT TYPE=‘’TEXT’’ NAME.’’nom de variable’’ VALUE=‘’texte par défaut’’

SIZE=‘’20’’ MAXLENGTH=‘’45’’>

VALUE (facultatif) indique l‘éventuel texte affiché.

SIZE indique la longueur de la case de saisie.

MAXLENGTH nombre maximum de caractères que l’utilisateur peut taper dans la case de saisie.

(79)

Liste déroulante

La liste déroulante permet à l’utilisateur de choisir un élément dans un nombre d’éléments assez

important.

<OPTION> Élément 1

<OPTION SELECTED> Élément 3

</SELECT>

SIZE est le nombre de lignes de la liste visibles en même temps.

(80)

Liste à choix multiple

La liste à choix multiple est une liste dans laquelle l’utilisateur a le droit de sélectionner plusieurs

éléments au lieu d’un seul dans la liste déroulante.

<OPTION SELECTED> Élément 3

</SELECT>

(81)

Boutons de commande

1. Le bouton submit déclenche la transmission des données du formulaire vers le serveur web

• <INPUT TYPE =‘’submit’’ VALUE=‘’légende du bouton’’>

2. Le bouton reset est un bouton de remise à zéro. Il restaure les valeurs d’origine du

formulaire

• <INPUT TYPE =‘’reset’’ VALUE=‘’légende du bouton’’>

(82)

Champ caché

C’est un élément invisible à l’utilisateur.

Son nom et sa valeur (obligatoires) sont transmis avec les autres informations

du formulaire au serveur web.

<INPUT TYPE=HIDDEN NAME=‘’nom’’

VALUE=‘’valeur’’>

(83)

Formulaires (1/4)

1 balise <FORM> ... </FORM>

2 attributs

METHOD

GET ou POST

indique le mode de transfert des données

choisir POST

ACTION

définit la locamisation du script permettant d'exploiter le formulaire

(84)

Formulaires (2/4)

3 classes d'éléments

Classe 1 : INPUT

TYPE="submit" =>création d'un bouton d'envoi

TYPE="reset" => création de bouton pour effacer la saisie

TYPE="checkbox" =>création menu avec plusieurs choix

TYPE="radio" => création menu avec un seul choix

<INPUT TYPE="radio" NAME="media" VALUE="dk">disquette<BR>

(85)

Formulaires (3/4)

3 classes d'éléments

classe 2 : SELECT => utilisé pour création de listes

menus déroulants

<OPTION> lundi

<OPTION> mardi

<OPTION SELECTED> mercredi

</SELECT>

listes à ascenceur

<OPTION> cict ....

</SELECT>

classe 3 : TEXTAREA

<TEXTAREA NAME = "commentaires" ROWS="10"

COLS="5">

Entrez vos commentaires </TEXTAREA>

(86)

Formulaires (4/4)

2 attributs communs

NAME

VALUE

pour un champ texte : prédéfinit le contenu

pour un bouton

submit ou reset : indique texte du bouton

checkbox ou radio : indique valeur du bouton enfoncé

(87)

Les Cadres (ou frames)

(88)

Définition d’un cadre

Les cadres sont essentiellement une méthode de placement et de présentation de plusieurs pages Web dans une seule.

Un cadre est une zone rectangulaire dans la fenêtre du navigateur qui affiche une page web, en compagnie d’autres pages, situées dans d’autres cadres.

(89)

Cadres

Définition

l'écran est divisé en plusieurs zones

chaque zone est un document propre

intérêt : ergonomie accrue

Balises

<FRAMESET> remplace <BODY> pour le corps du document.

ROWS pour diviser en sous-zones horizontales

COLS pour diviser en sous-zones verticales

4 manières de spécifier valeur de ces zones

% hauteur/longueur de la sous zone en % de la zone "mère"

n hauteur/longueur de la sous zone en pixels

* indique au browser d'attribuer à la sous zone toute la place restante

x entier

(90)

Cadres

<FRAME>

SRC indique URL du doc. à afficher dans la zone

NAME permet de nommer la zone afin qu'elle puisse devenir la cible d'un lien

MARGINWIDTH

MARGINHEIGHT

SCROLLING = "yes/no/auto" indique si la zone doit posséder une barre de défilement

NORESIZE empêche toute modification par l'utilisateur de la taille d'une zone

BORDER / BORDERCOLOR="#FFFFFF"

FRAMEBORDER = "0 ou 1"

indique texte de remplacement si le browser ne gère pas les

(91)

Un document frameset

La balise <FRAMESET> est la

commande HTML centrale pour les

cadres. Elle contient les informations

concernant les pages à charger, et

indique dans quel cadre.

(92)

Cadres

Création de liens utilisant ces frames

attribut TARGET

<A HREF="dossier.html" TARGET="zonedossier">voir le dossier</A>

3 valeurs possibles

nom d'une frame existante

valeur ne correspondant à aucune frame

paramétrage

TARGET="_top" supprimera toutes les frames existantes et

affichera le document sur toute la surface du browser / permet en pratique de quitter un système de frames

TARGET="_blank" le navigateur ouvre une nouvelle fenêtre / cette fenêtre ne portera pas de nom et ne pourra pas être la cible d'un lien.

TARGET="_self" le document sera chargé dans la même zone que celle comprenant le lien hypertexte

(93)

Exemple

<HTML>

<HEAD> <TITLE> Exemple </TITLE></HEAD>

<FRAME SRC=‘’main.html’’ NAME=‘’main’’

FRAMEBORDER=0>

</FRAMESET>

</HTML>

(94)

Exemple (suite)

L’attribut ROWS signifie que les cadres sont placés les uns au- dessus des autres.

Pour les avoir sous forme de colonnes, il faut utiliser l’attribut COLS à la place de ROWS.

Les dimensions de COLS et ROWS sont pixels ou pourcentage de la dimension totale de la fenêtre.

La balise <FRAME> indique le fichier HTML à afficher dans chaque cadre.

L’attribut NAME sert à donner un nom au cadre.

MARGINWIDTH : marges de gauche et de droite du cadre (en pixels)

MARGINHEIGHT: marges du haut et du bas du cadre

SCROLLING : affichage de la barre de défilement (yes/no)

(95)

Relier les cadres

Dans le cadre du bas

cliquer</A>

Lorsque l’utilisateur clique sur ce lien, le fichier s’affiche dans le cadre nommé

main.

(96)

Exercice : créez le code source de cette frame

idy.html

docD docE.html

docB.html docA.html

docC .html

(97)

Correction

</FRAMESET>

</FRAMESET>

(98)

Autres balises

(99)

Autres balises

Centrer du texte

ALIGN = "CENTER"

Taille de polices et couleurs de polices

<FONT FACE=" arial " SIZE = " 1 ... 7 " > texte </FONT>

<FONT COLOR = " #666666 "> texte </FONT>

Tabulations

Couleur du texte et des liens

TEXT

LINK

VLINK (visited link)

ALINK (active link)

Remarques :

une seule couleur de texte et de lien par page écran

attention au contraste des couleurs

éviter de modifier la couleur des liens

(100)

Code hexadécimal des couleurs

Permet de retrouver nuances

1 couleur = mélange RVB (rouge, vert, bleu)

signe # + 3 sections de 2 lettres ou 2 chiffres

chaque section indique la saturation (FF) ou l ’absence (00) d ’une couleur

Comment trouver La bonne couleur ?

Éditeurs HTML donnent l ’équivalence RVB à partir d ’une palette graphique

logiciels de retouche photo (Photoshop par ex.)

sites web :

www.allhtml.com

(101)

Autres balises

Fond d'écran

avec une couleur <BODY BGCOLOR = "#666666">

attention au contraste pour la lisibilité

avec une image <BODY BACKGROUND = "image.gif">

attention aux "jointures" et au temps de transmission

Bases de fond de pages Medialink www.erinet.com/cunning1/tiles.html

Black = "#000000" Green = "#008000"

Silver = "#C0C0C0" Lime = "#00FF00"

Gray = "#808080" Olive = "#808000"

White = "#FFFFFF" Yellow = "#FFFF00"

Maroon = "#800000" Navy = "#000080"

Red = "#FF0000" Blue = "#0000FF"

Purple = "#800080" Teal = "#008080"

Fuchsia = "#FF00FF" Aqua = "#00FFFF"

(102)

N'oubliez jamais ...

view source

copier / coller

(103)

Parc logiciel

éditeurs html

avantages

intègrent balises sous forme de boutons

traitement des caractères accentués

Hot Metal Pro (version française, feuilles de style), HotDog

éditeurs wysiwyg

avantages

interface de traitement de texte

inconvénients

balises html ne sont plus visibles

wysimolwyg (what you see is more or less what you get

!!! )

Visual Page, Page Mill, Symposia Pro ...

systèmes intégrés de création de site

Front Page, Hot Metal Pro Intranet Publisher (HIP), Dreamweaver

AMAYA : navigateur/éditeur développé par W3C

liste complète des éditeurs

faire une recherche avec "html editor" sur Yahoo ou AltaVista

(104)

Réseaugraphie

concernant HTML

http://www.w3c.org/

http://info.med.yale.edu/caim/manual

http://www.urec.fr/docs/www/www.html

http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html

http://lcweb.loc.gov/global/html.html

http://www.utbm.fr/ipse/cours.html

http://www.loria.fr/~charoy/htmlfrench/html.html

liste d'éléments et de balises

http://www.sandia.gov/sci_compute/html_ref.html

Polices gratuites

www.microsoft.com/typogrzphy (polices True Type et Open Type)

www.adobe.com/type (polices True Type et Open Type)

www.agfahome.com/agfatype (polices True Type et Open Type)

langage java

http://www.java.sun.com/

http://www-timc.imag.fr/doc/tutorial/

sites institutionnels

http://www.w3c.org/

http://www.isoc.org/ ou www.isoc.asso.fr/