8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
1/30
Eric BRASSART, MCF IUT informatique dAmiens
Institut Universitaire de technologie dAmiensUniversit de Picardie Jules Verne
Support de cours Rseaux & Tlcommunications
Le Langage HTML
Hyper Texte Markup Language
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
2/30
I.U.T. Amiens Dpt Informatique 98/99Page 2/30
Table des matiresAVANT PROPOS........................................................................................................................................... 3
LA PTITE HISTOIRE.................................................................................................................................. 3
LE SGML ....................................................................................................................................................... 3COMMENTAIRES ........................................................................................................................................ 5
DOCTYPE...................................................................................................................................................... 5
HTML............................................................................................................................................................. 5
SPARATEURS............................................................................................................................................. 8
POINTEURS VERS AUTRES DOCUMENTS ............................................................................................. 9
LISTES ......................................................................................................................................................... 12
STYLE.......................................................................................................................................................... 15
LES COULEURS UTILISES DANS BODY............................................................................................. 17
IMAGES DANS LE TEXTE ........................................................................................................................ 18
FORMULAIRES.......................................................................................................................................... 21
LES FRAMES .............................................................................................................................................. 25
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
3/30
I.U.T. Amiens Dpt Informatique 98/99Page 3/30
Avant propos
Premire chose importante savoir surHTMLest la signification de ces quatre initiales :
HyperTextMarkUpLanguageHTML est d'un langage de description (et non pas d'un langage de programmation) qui va nous permettre de
dcrire l'aspect d'un document, d'y inclure des informations varies (textes, images, sons, animations etc.) etd'tablir des relations cohrentes entre ces informations grce aux liens hypertextes.Les avantages du langage HTML sont nombreux :
F peux coteux en effet un simple diteur de texte suffit crire ses premiers documents HTMLF relativement facile aborder,F il reprsente en outre un bon moyen de dpasser les problmes de compatibilit entre des systmes et
des formats informatiques diffrents.
La description d'un document HTML passe par l'utilisation de
BALISES(ou "TAGS" en anglais). Une balise estdlimite par les signes
"" entre lesquels figure le nom de la balise. Par exemple, la
balise de retour laligne est
La plupart du temps, on utilise une balise de dbut et une balise de
fin, qui dfinissent lesproprits de l'intervalle.Exemple :
criture en gras
sera traduit par :
criture en gras
La ptite histoire
Le terme markup se rfre aux marques, aux annotations manuscrites places par l'auteur sur un document pourprciser l'imprimeur comment il doit tre prsent. Avec l'apparition des ordinateurs et des photos-composeuses, ces marques ont t intgres dans le texte mais chaque matriel de photocomposition rclamaitson propre langage "markup" Au dbut des annes 80, le CGA (Graphics Communications Association) a mis aupoint le premier langage markup gnralis baptis GenCode. Au mme moment, un comit de normalisationANSI publiait le standard Generalized Markup Language (GML). En dcembre 1986, les deux comits ont unisleurs efforts pour dfinir le standard SGML (Standard Generalized Markup Language) accept par l'ISO(International Standard Organization) sous le numro 8879.Jusqu 1990 les principales applications Internet taient le courrier lectronique, listserv, telnet et FTP. En1990 luniversit de Mac Gill (Montral) introduisit ARCHIE, un outil de recherche FTP pour lInternet. En1991 luniversit du Minessota proposa GOPHER.En 1992, Tim Berners-Lee un physicien du CERN, dveloppa les protocoles du World Wide Web. Il cra leHTML, issu dun sous ensemble du SGML en sappuyant sur les travaux de Ted Nelson qui furent lorigine du
termehypertexte (1965).Cest en 1993 que lexplosion de lInternet eu lieu avec la sortie du navigateur (en anglais "browser") MOSAICdu NCSA.
Le SGML
Le SGML est un standard ouvert qui n'est li ni une plate-forme, ni un constructeur. Les fichiers SGML sontstocks sous forme de simples textes ASCII et peuvent donc tre utiliss par n'importe quelle machine.Le langage SGML est extrmement pratique pour raliser des publications la demande. Le but est de pouvoir, partir d'un document de base unique, publier diffrentes versions s'adressant des publics diffrents.SGML est un langage de description de donnes qui divise un document en deux parties : le DTD (Data TypeDefinition) et les donnes elles-mmes. Le DTD est une sorte de dictionnaire qui dcrit les diffrents "tags"
Tag Dbut dcritureen BOLD (gras)
Tag Fin dcriture enBOLD (gras)
Rsultat dansle navigateur
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
4/30
I.U.T. Amiens Dpt Informatique 98/99Page 4/30
accepts dans le document et les relations qui les unissent. Le corps du document contient les donnes dlimitespar les "tags" dfinis dans le DTD. Le langage HTML n'est qu'une instance du langage SGML dfinie par unDTD spcifique. Un document HTML est un simple fichier texte ASCII qui contient des "tags" HTML. Sur unserveur Unix, un document HTML porte gnralement l'extension .html tandis que sur les PC, limits des nomsde fichiers de type 8.3, l'extension est .htm. La notion essentielle bien comprendre avant de se lancer dans lacration de pages HTML est que comme tous les langages markup, HTML ne se soucie pas de l'apparenced'un document mais bien de sa structure. Chaque navigateur World Wide Web reprsentera diffremment desobjets HTML comme la ligne horizontale ou le titre. L'HTML n'imposera jamais une police de caractres, unetaille de police ou une largeur d'cran. C'est au navigateur de choisir en fonction de la station d'accueil, de larsolution d'cran, des polices disponibles. Il faudra donc toujours veiller essayer les pages HTMLnouvellement ralises avec plusieurs navigateurs.
Une autre notion garder en tte est que le langage HTML est en constante volution, chaque navigateurs'adaptant plus ou moins rapidement cette volution.Chaque commande du langage HTML dbute par un . Les commandes peuvents'crire en minuscules ou majuscules bien qu'on utilise gnralement les caractres majuscules par souci delisibilit.
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
5/30
I.U.T. Amiens Dpt Informatique 98/99Page 5/30
Allure dun fichier HTML ou squelette dun fichier HTML
@@@
@@@
CommentairesLes commentaires peuvent tre placs n'importe o dans un document HTML condition de ne pas treimbriqus. Ils sont placs entre les chanes de caractre.
Exemple :
DocType
DocType est une directive SGML permettant d'identifier un document comme tant de type HTML Cettecommande est facultative. La plupart des navigateurs n'en ont pas besoin mme s'il est de bon ton pour unditeur HTML de placer en tte de document une commande de type.
Exemple :Avec Netscape 3.0 GOLD
HTML
Cest le premier marqueur ou tag que lon trouve dans un document HTML. Tout le document qui sera crit parla suite (texte ou marqueur) sera compris entre le tag et .
Exemple :
document crire.
En-tte
L'en-tte du document est rserve aux mta-informations (les informations relatives au document) comme sontitre. Ces mta-informations doivent tre places entre les tagsde dbut etde fin. Mme si
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
6/30
I.U.T. Amiens Dpt Informatique 98/99Page 6/30
l'en-tte est optionnelle, il est important de l'inclure dans un document pour viter que le logiciel serveur n'ait balayer tout le document pour y retrouver l'information recherche.
Dans l'en-tte, on trouvera les 6 commandes suivantes :
FF TITLE (la seule vritablement essentielle- voir ci-dessous)FF ISINDEX indique au logiciel client que le document est un cran permettant une saisie pour
interroger un programme externe (Programme CGI),(Servait lorigine du HTML aux browser envoyer de linfo.-Les formulaires ontsimplifis tout),
FF BASE permet d'indiquer une adresse de base qui compltera tous les chemins relatifs,FF LINK (Indique un lien entre le prsent document et un autre) ; trs rarement utilis.FF NEXTID (Indique le document suivant considr actuellement comme obsolte-)F META donne des informations sur le document au serveur. Ces informations sont
gnralement : le nom, le nom de l'auteur,,un identifiant.
F ou n prend les valeurs 1 7.Cette commande fixe la taille de la police decaractres (par dfaut : 3) 1, petits caractres 7, gros caractres.
F PROMPT=texte, permet d'afficher le texte comme message pour.
Titre
Titre
Chaque document HTML, pour tre correct, doit disposer d'un titre. Le titre apparat le plus souventdans la barre de titre du navigateur Web. Son but est de pouvoir identifier le document dans un
ensemble plus large comme un index WAIS par exemple. Le titre d'un document HTML sert aussilorsqu'un navigateur World Wide Web dispose d'une fonction hotlist ou bookmark pour fournirun accs rapide vos documents favoris.
Le titre est limit 64 caractresy compris les espaces et ne doit normalement contenir que les 128premiers caractres ASCII (pas de caractres accentus)
Corps du document
Le corps du document, ce qui sera effectivement affich par le navigateur Web, est balis par les commandes :et
Exemple :
Ceci est le premier essai
Voici donc quoi ressemblera un document minimal ainsi que sa reprsentation dans un navigateur Web :
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
7/30
I.U.T. Amiens Dpt Informatique 98/99Page 7/30
essai n 1
Ceci est le premier essai
Ces commandes ne doivent pas ncessairement tre spares par des retours de chariot et peuvent tre places n'importe comment. Seule la lisibilit du code source nous fait pencher pour cette prsentation.
Tailles de polices:
Il existe 7 tailles de polices. La commande est ou n prend les valeurs de 1 7.1, petits caractres7, gros caractres.
La police par dfaut possde la taille 3.La taille de la police peut tre fixe dans l'en-tte du document par la commande :
ou n prend les valeurs 1 7.
Exemple :
MAJUS. - minus. - taille7
MAJUSCULES - minuscules -taille 6
MAJUSCULES - minuscules -taille 5
MAJUSCULES - minuscules -taille 4
MAJUSCULES - minuscules -taille 3
MAJUSCULES - minuscules -taille 2
MAJUSCULES - minuscules -taille 1
La taille des lettres d'un
mot peutVA R I E R .
Les Enttes avec x : 1 6
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
8/30
I.U.T. Amiens Dpt Informatique 98/99Page 8/30
Ces enttes servent diviser le texte en section de la mme manire quun livre. Le langage HTML reconnat sixniveaux de den-tte numrots de 1 6. Le niveau le plus lev est le 1, le plus petit est le 6.
Exemple :
essai n 2 TITRE PRINCIPALE TITRE SECONDAIRE Paragraphe principale Paragraphe secondaire titre Paragraphe 1 secondaire texte1, texte1, texte1, texte1 titre Paragraphe 2 secondaire texte2, texte2, texte2, texte2
SparateursContrairement tous les autres systmes de traitement de texte, le retour de charriot n'a aucune valeur en HTML.C'est le navigateur Web lui mme qui dfinira le passage la ligne en fonction de facteurs comme la taille despolices de caractres, la largeur de la fentre de visualisation etc.De mme, plusieurs espaces dans un document HTML seront ramens un seul.
Cette commande
(fin de paragraphe) termine un paragraphe et insre une ligne vide aprs leparagraphe.
Exemple :
Exemple de texte
Avec un autre exemple
Fin de l'exemple.
Cette commande impose la coupure d'une ligne de texte en rejetant
ce qui suit la ligne suivante.Cette commande permet de mettre du
texte sans retour la ligne.
Cette commande permet de forcer un retour la ligne dans un texte encadr par
pour une ligne horizontale de sparation :WIDTH fait varier la largeur de la ligne en % soit en pixel (valeur par dfaut 100%)SIZE fait varier l'paisseur de la ligne en pixel (valeur par dfaut 1) ALIGN fait un alignement de la ligne suivant les 3 possibilits :
CENTER par rapport au centre de la fentre,LEFT par rapport la gauche de la fentre,RIGHT par rapport la droite de la fentre.
NOSHADE Lorsqu'il est prsent dans le marqueur l'effet est une ligne pleine sansombrage.
Le paramtre ALIGN a un effet que lorsque la longueur de la ligne est infrieure 100 %.
Exemple :
trace une ligne sur 75% de la largeur de la fentre.trace une ligne d'paisseur 5 pixels.trace une ligne sur 75% de la largeur de la fentre avec un alignement gauche.
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
9/30
I.U.T. Amiens Dpt Informatique 98/99Page 9/30
essai n 3HR
HR WIDTH="75%"HR WIDTH="25%"HR WIDTH="50%" & SIZE=5HR WIDTH="50%" & SIZE=20HR WIDTH="50%" & SIZE=5 ALIGN=LEFTHR WIDTH="50%" & SIZE=5 HR WIDTH="50%" & SIZE=5 ALIGN=LEFT NOSHADEHR WIDTH="50%" & SIZE=5
Pointeurs vers autres documents
Grce au langage HTML, vous pouvez crer un hyperlien vers un document local, un document distant ou unsignet dans ces deux types de documents.
Anchor
L'hyperlien est cr par l'utilisation du tagpour "anchor" ou ancre.
Les attributs possibles sont :
HREFLa syntaxe complte esttexte
OHREFest un raccourci pour "Hypertexte rfrence", documentdsigne le document vers lequel onpointe et textereprsente le texte qui sera affich pour reprsenter le lien hypertexte.
Exemple :
pour charger le fichier2.htm
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
10/30
I.U.T. Amiens Dpt Informatique 98/99Page 10/30
fichier1Ce fichier permet de lancer le suivanttexte d'appel
fichier2Nous sommes dans le fichier2.htm
Ici dans cet exemple les deux fichiers sont forcment dans le mme rpertoire.
Chemin daccs relatif :Dans ce cas, relativement par rapport lendroit ou vous vous situez dans une arborescence, vousexprimez le chemin daccs vers le fichier li.
HREF= "fichier2.htm " Dans le rpertoire courantHREF= "tempo/version1/fichier2.htm " Dans le rpertoire 2 niveaux en dessousHREF= "../../fichier2.htm " Dans le rpertoire 2 niveaux au dessus
Chemin daccs absolu :Dans ce cas, depuis la racine des disques nomms, vous exprimez le chemin daccs vers le fichier li.
HREF= "/rep1/fichier2.htm " Dans le rpertoire rep1 de lunit en coursHREF= "/d:/html/fichier2.htm " Dans le rpertoire html du disque dHREF= "/~brassart/fichier2.htm " Dans le rpertoire daccueil de lutilisateur
brassart sur un systme UNIX
Lien vers un autre site distant
Pour cela il suffit de remplacer dans lexemple prcdent documentpar une U.R.L.
Exemple :
page daccueil de la ville dAmiens
Cration dun lien interne vers un endroit prcis dun document
Un lien interne pointe vers une ancre, c'est dire un endroit l'intrieur d'un document dfini par unnom. Une ancre se dfini dans le marqueuren y ajoutant le paramtreNAME="nom".Vous pouvez dfinir une table des matires au dbut d'un long document en utilisant ce type de lien.
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
11/30
I.U.T. Amiens Dpt Informatique 98/99Page 11/30
Exemple :
voitures allemenadesvoitures allemandesBMW
MERCEDESPORSCHE
MERCEDES C
MERCEDES E
PORSCHE 956
PORSCHE 911
PORSCHE 914
PORSCHE 924
PORSCHE 944
BMW srie 3
BMW srie 5
BMW srie 6
BMW srie 7
BMW srie 8
Cration dun lien externe vers un endroit prcis dun document
Il est galement possible d'utiliser les ancres dans les liens externes. Il faut alors spcifier l'ancre verslaquelle pointe le lien en ajoutant #nom la fin de l'URL.
Dans le fichier1.htm:BMW
et dans le fichier2.htm lendroit ou lon veut pointer :
Voitures Allemandes
BMW
MERCEDES
PORSCHE
oitures AllemandesVoitures Allemandes
BMWMERCEDESPORSCHEPORSCHE 956PORSCHE 911PORSCHE 914PORSCHE 924PORSCHE 944BMW srie 3BMW srie 5BMW srie 6BMW srie 7BMW srie 8MERCEDES C
PORSCHE 956PORSCHE 911PORSCHE 914PORSCHE 924PORSCHE 944EtcBMW srie 3
BMW srie 5BMW srie 6BMW srie 7BMW srie 8EtcMERCEDES CMERCEDES Eetc
srie 3BMW srie 5
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
12/30
I.U.T. Amiens Dpt Informatique 98/99Page 12/30
Liens externes vers d'autres protocoles/services Internet
Liens pour l'envoi d'un message e-mail et la lecture d'un newsgroup
Pour que la personne qui lit votre document puisse vous rpondre sur un simple click de souris vouspouvez insrer un lien qui lance automatiquement l'application de messagerie lectronique en incluant lenom du destinataire. De mme, il est possible d'emmener le lecteur vers un groupe de discussions enmentionnant le nom de celui-ci dans la dfinition du lien.
E xemple de lien pour l'envoi d'un E-mail
Envoyez moi un message
Exemple de lien pour la lecture d'un newsgroup
groupe dediscussion sur l'dition en HTML.
Liens pour le tlchargement d'un fichier
Ce type de lien s'utilise pour donner accs un dialogue de tlchargement de fichier. La syntaxe estsemblable celle du premier type de liens que nous avons vu. Le seul changement est le protocoleindiqu dans l'URL qui, en l'occurrence, est le protocole de transfert de fichiers ftp.
Exemple de lien pour le tlchargement de fichiers
Liste des logicielsdisponibles
Listes
HTML dfinit 5 types de listes :F Les listes numrotes ou ordonnes (ou Ordered (numbered) lists),F Les listes non numrotes dites listes puces dont les entes sont signales par un signetypographique,F Les listes de glossaire,F Les listes de menu,F Les listes de rpertoire.
Listes numrotes ou Ordered (numbered) listsExemple :
Liste non ordonne
Voitures allemandesBMWMERCEDESPORSCHE
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
13/30
I.U.T. Amiens Dpt Informatique 98/99Page 13/30
Les options suivantes sont possibles :
F TYPE=1 : pour une liste numrote 1,2,3...F TYPE=A : pour un reprage type A,B,C...F TYPE=a : pour un reprage type a,b,c...F TYPE=I : pour une liste numrote I,II,III,IV...F TYPE=i : pour une liste numrote i,ii,iii,iv...
START=n fait dbuter le reprage (chiffres ou lettres) au rang numro n.
Remarque : TYPE=1 est utilis par dfaut.
Listes non numrotes ou Unordered lists
Exemple
Liste non ordonne
Voiture allemandesBMWMERCEDESPORSCHE
Listes descriptives ou Definition lists
L'environnement dlimite une zone de liste de dfinition.La commande introduit un nouveau terme de dfinition. C'est en gnral un lment court.La commande "dd" introduit une description du terme de dfinition. Le rsultat l'cran est un dcalagedu texte vers la droite.
Liste descriptive
Voitures allemandesBMW
srie 3 5 7 8MERCEDES
classe C EPORSCHE
956 et 911
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
14/30
I.U.T. Amiens Dpt Informatique 98/99Page 14/30
Menus
Liste menu
Voitures allemandesBMWMERCEDESPORSCHE
Directory List
Liste dir
Voitures allemandesBMWMERCEDESPORSCHE
Deux types de liste peuvent semboter
Exemple d'embotement:
html\nv_html
BMW
srie 3 srie 5
MERCEDES
classe C
180, 200, 220. classe E
250, 300
FIN
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
15/30
I.U.T. Amiens Dpt Informatique 98/99Page 15/30
Style
L'utilisation de diffrents styles de polices de caractres permet de varier la prsentation d'un texte. En HTML,on peut utiliser des styles logiques o le nom du style indique la nature du fragment de texte crire dans cestyle ou des styles physiques o le nom du style indique explicitement le style de police que l'on souhaite voirutiliser.
Styles de caractres :
Styles logiques: utiliser de prfrence car ils sont interprts par les diffrents logiciels clients WWW.
Les commandes de styles logiques sont les suivantes :
texte met le texte gnralement en italique.texte met le texte gnralement en gras.texte pour l'utilisation d'une police chasse fixe (encombrement descaractres constant).caractres squence de caractres littraux.saisie pour mettre en vidence une saisie d'utilisateur.
variable pour indiquer le nom d'une variable.dfinition pour mettre en vidence la 1re utilisation d'un terme.citation pour mettre en vidence une citation (gnralement enitalique).adresse cette commande n'est pas utilise pour une adresse postale.Cette commande est gnralement utilise pour indiquer l'auteur d'un document ainsi que le moyen dele contacter ou bien elle donne l'adresse du document. Elle est souvent place en fin de document.texte cette commande constitue avec le texte un texteavec retrait gauche et droite.texte pour faire clignoter le texte.texte barr cette commande permet de barrer du texte.code informatique cette commande permet d'afficher du code
informatique
texte cette commande permet d'crire un texte en plus groscaractres que les caractres en cours.texte cette commande permet d'crire un texte en plus petitscaractres que les caractres en cours.texte cette commande permet d'crire un texte en exposant.texte cette commande permet d'crire un texte en indice.
Styles physiques :
Les commandes de styles physiques sont les suivantes:
texte met le texte en italique.texte met le texte en gras.texte pour l'utilisation d'une police chasse fixe (encombrement des
caractres constant).texte souligne le texte.texte barre le texte.texte indice.texte exposant.
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
16/30
I.U.T. Amiens Dpt Informatique 98/99Page 16/30
Exemple de commandes de styles physiques :
Les commandes de stylesphysiques met le texte enitalique.
met le texte en gras.
pour l'utilisation d'une police chasse fixe (encombrement
descaractres constant).
souligne le texte.
barre le texte.
normal indice.
normal exposant.
Attention: la correspondance que vous constatez peut-tre entre styles logiques et styles physiques n'est pasgarantie. Cela dpend du navigateur.
CENTRAGE D'UN TEXTE
La commande...permet de centrer toutes les lignes d'un texte.
Exemple :
Centrage de texte
I.U.T. d'Amiens
Promotion 1998/1999
Cours HTML
TEXTE PR-FORMAT ... Les espaces (plusieurs la suite), tabulations, retour chariot n'ont pas de valeur en HTML.La commande ... est utilise pour inclure un texte pr-format dans un document HTML.Les espacements, tabulations et retour chariot gardent alors leur sens initial.Attention : les commandes HTML existant dans le texte pr-format seront interprtes.L'option WIDTH=n peut-tre utilise pour limiter la longueur de la ligne.
Exemple :
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
17/30
I.U.T. Amiens Dpt Informatique 98/99Page 17/30
texte prformatenseignements :
MATIERES PROFESSEUR NB d'heures-------------------------------------
Visual Basic B. Mahric 40Rseaux E. Brassart 32C++ L.Delahoche 32
Les couleurs utilises dans BODY
Par dfaut le fond du document est gris clair, les caractres sont noirs, les prises d'hypertextes sont bleues quandelles n'ont jamais t utilises, violettes dans le cas contraire, rouges l'instant de la slection (dans le cas deNETSCAPE).
Il est possible de modifier ces couleurs en rajoutant la commande les options suivantes :
F BGCOLOR=c pour le fond du documentF TEXT=c pour la couleur des caractresF LINK=c pour la couleur des prises d'hypertextes non utilisesF VLINK=c pour la couleur des prises d'hypertextes utilisesF ALINK=c pour la couleur des prises d'hypertextes l'instant de la slection
La valeur de c est compose de trois nombres hexadcimaux accols (cods de 00 FF) reprsentant le mlangedes trois couleurs primaires RGB (Red, Green, Blue). Le nombre obtenu est prcd dun dise (#). Le blanc pour valeur # FFFFFF ; le noir pour valeur #000000. Toutes les autres couleurs sont obtenues par des dosagesprcis dans chacune des composantes RVB.
Exemple de couleur :avec c = #000000 pour noiravec c = #FFFFFF pour blancavec c = #C0C0C0 pour gris clairavec c = #80FF80 pour vert clairavec c = #FFFFE8 pour jaune clairavec c = #80FFFF pour bleu clairavec c = #FF8080 pour roseavec c = #FF80C0 pour mauveavec c = #800000 pour marronavec c= #000080 pour bleuavec c = #008040 pour vertavec c = #FF0000 pour rouge
avec c= #FF8000 pour jauneavec c = #800080 pour violet
Exemple dutilisation des couleurs :
Essai de couleurs
La couleur du fond est bleu clair, la couleur du texte est bleu. La prise d'hypertexte estrouge.
Retour : cliquer ici
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
18/30
I.U.T. Amiens Dpt Informatique 98/99Page 18/30
F BACKGROUND="nom_image.gif"
L'image peut tre de type GIF ou JPG. Elle est le plus souvent de petite taille (100x100pixels) qui est reproduitepar effet mosaque sur tout lcran. Il faut donc choisir soigneusement le motif pour que les bords droit et gauchedune part et haut et bas dautre part se raccorde sans trop de discontinuit.
Exemple dutilisation des images de fond :
Essai de couleurs
Limage du fond sappelle image.jpg, la couleur du texte est bleu. La prise d'hypertexteest rouge.
IMAGES DANS LE TEXTE
Des images peuvent tre insres dans le texte d'un document HTML, et elles sont au formatGIF ouJPG.
Elles peuvent servir de prises d'hypertextes :
F soit toute l'image ragit un clic.F soit l'image ragit en fonction de la zone o le clic s'est produit (on parle dans ce cas l d'IMAGE
CLIQUABLE OU REACTIVE.)
Les commandes sont les suivantes:
F pour insrer une image locale, o nom_image.gif est le nom complet dufichier avec ventuellement son chemin relatif partir du rpertoire du document HTML.
F pour insrer une image distante. URL tant l'adresse complte du fichier image.
F pour effectuer le lien sur le point debranchement de nom :etiquette, du document courant, en cliquant sur l'image nom_image.gif qui est la prised'hypertexte. (nom_image.gif est le nom complet du fichier image).
F pour une image cliquable (ou ractive). Les images cliquablespermettent des liens selon l'endroit du "clic" de la souris dans l'image. La requte est transmise unprogramme excutable (souvent IMAGEMAP.EXE) qui associe les coordonnes du "clic" l'adressecorrespondante.
Pour ces commandes les options suivantes sont possibles :
ALIGN =left/right/top/texttop/middle/absmiddle/baseline/bottom/absbottomF left : positionne l'image gauche de l'cran.F right : positionne l'image droite de l'cran.F top : positionne le sommet de la ligne de texte au sommet de l'image.F texttop : positionne l'axe horizontal de la ligne de texte au sommet de l'image.F middle : positionne la base de la ligne de texte au milieu de l'image.F absmiddle : positionne l'axe horizontal de la ligne de texte au milieu de l'image.F baseline : positionne la base de la ligne de texte la base de l'image.F bottom : positionne la base de la ligne de texte la base de l'image.F absbottom : positionne la ligne de texte au bas de l'image.
WIDTH=n ou n% HEIGHT=m ou m% redimentionnent l'image : n et m valeurs de la largeur et de lahauteur de l'image en pixels ou n% et m% valeurs relatives par rapport la taille normale de l'image.
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
19/30
I.U.T. Amiens Dpt Informatique 98/99Page 19/30
VSPACE=n HSPACE=mloignent le texte de l'image de n pixels au-dessus et au-dessous de l'image et de mpixels gauche et droite de l'image.
BORDER=n trace un cadre autour de l'image avec un trait de n pixels de large.
ALT="texte" le "texte" est une alternative l'image lorsque le logiciel client WWW utilis ne peut afficherl'image.
Plusieurs options peuvent tre utilises ensemble.
Exemple :
texte prformat
Voici la 255 SBE de 1952.
TABLEAUX ...
Les commandes sont les suivantes :
... pour crer un tableau.
Pour cette commande les options suivantes sont possibles :
BORDER: trace un cadre en trait fin BORDER=n: trace un cadre en trait de n pixels d'paisseurCELLSPACING=n: espacement de n pixels entre les cellules.CELLPADDING=n: espacement autour de l'criture dans les cellules.WIDTH=n ou n%: largeur en pixels ou largeur relative du tableau.
Remarquecellspacing et cellpadding ont priorit sur width.
nomtableaupour indiquer le nom du tableau.
Pour cette commande l'option suivante est possible : ALIGN=top/bottom: place le nom du tableau au-dessus/au-dessous du tableau.
... encadre une ligne du tableau.
Pour cette commande les options suivantes sont possibles :
ALIGN=left/right/center: position horizontale (gauche/droite/centre) du texte dans les cellules dela ligne.
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
20/30
I.U.T. Amiens Dpt Informatique 98/99Page 20/30
VALIGN=top/middle/bottom/baseline: position verticale (haut/milieu/bas/bas) du texte dans lescellules de la ligne.
... encadre une cellule d'en-tte du tableau. (cellule pouvant contenir un texte alphanumrique, uneimage, une liste, un lien, un autre tableau ou rien)(texte en gras).
Pour cette commande les options suivantes sont possibles :
ALIGN=left/right/center: position horizontale (gauche/droite/centre) du texte dans la cellule d'en-tte.COLSPAN=n: fusionne n cellules horizontalement. ROWSPAN=n: fusionne n cellules verticalement. NOWRAP: supprime la csure ventuelle du texte de la cellule d'en-tte.
... encadre une cellule du tableau. (cellule pouvant contenir un texte alphanumrique, une image,une liste, un lien, un autre tableau ou rien)
Pour cette commande les options suivantes sont possibles :
ALIGN=left/right/center: position horizontale (gauche/droite/centre) du texte dans la cellule.COLSPAN=n: fusionne n cellules horizontalement. ROWSPAN=n: fusionne n cellules verticalement. NOWRAP: supprime la csure ventuelle du texte de la cellule.
Exemple n1 :
tableau 1
PREMIER TABLEAU
ligne 1 ; cellule 1ligne 1 ; cellule 2
ligne 2 ; cellule 1ligne 2 ; cellule 2
Exemple n2 :
tableau 2
DEUXIEME TABLEAU
LETTRES
AaBbCcDdEe
FfGgHhIiJj
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
21/30
I.U.T. Amiens Dpt Informatique 98/99Page 21/30
Exemple n3 :
tableau 3
LETTRESAaaBbbCccDddEeeFGHIJTableau 3
Exemple n4 :
tableau 4
rien
Formulaires
La commande FORM
Des formulaires peuvent tre prpars afin de saisir des donnes et les traiter au niveau du serveur.
Pour rdiger un questionnaire, il faut:
F 1.tablir une zone d'dition (appele FORM) en utilisant les commandes .F 2.Dfinir la mthode employer pour transmettre au serveur l'information recueillie dans leschamps du formulaire.F 3.Identifier l'emplacement et le nom du programme qui devra traiter l'information recueillie.F 4.Fournir, s'il y a lieu, les arguments au programme de traitement des donnes.
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
22/30
I.U.T. Amiens Dpt Informatique 98/99Page 22/30
Toute cette information se retrouve dans la commande suivante:
La mthode utilise est POST , le programme de traitement se nomme questionnaire.cmd et se retrouve dans ledossier cgi-bin, un seul argument est fourni au programme soit xxx.
Il est noter que le programme de traitement des donnes (questionnaire.cmd en l'occurrence) doit tre fournipar l'administrateur du serveur et cr en fonction de l'application supporter.
Les commandes INPUT
Syntaxe : INPUT="TEXT"
Parmi les choix disponibles en HTML, un des types d'entre de donnes est le champinput type="text". Dans cecas, il faut inscrire le type de champ, le nom du champ et ses dimensions l'cran.
Ainsi, dans la question ci-dessous, le code utiliser pour entrer le nom de la personne est :
NOM: .
Le type textest un champ ou l'usager entre de l'information sur son clavier, dans une zone dfinie l'cran par lacommande size.
Ainsi, une commande size=30est un champ d'une longueur de 30 espacements de largeur. Pour un champ pluslong, entrez une valeur de 50 ou 70, selon l'espace requis pour couvrir toutes les possibilits.La commande name="name"prcise que l'on dsire enregistrer le contenu du champ dans la rubrique"name".
Exemple :
Essai FormulaireNOM: ADRESSE: VILLEPROVINCE: CODE POSTAL: PAYS:TELEPHONE: COURRIER ELECTRONIQUE:
La commande INPUT="RADIO"
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
23/30
I.U.T. Amiens Dpt Informatique 98/99Page 23/30
Un autre type de champ est le type"input type=radio"qui permet d'afficher une srie de boutons radio commechoix de rponses.
Il suffit d'abord de poser la question puis de positionner la commande suivante:
OUINON
Dans l'exemple ci-dessous, deux choix sont offerts Oui ou Non. Lorsque l'usager rpond, il n'a d'autre choix quel'une ou l'autre rponse. Il ne peut pas choisir les deux.
Comment avez-vous connu lanne spciale Informatique Amiens
?
A. Tout fait par hasard.B. Par un ancien tudiant dAS.
Idem que lexemple prcdent
Comment avez-vous connu l'annespciale Informatique Amiens
?
A. Tout fait par hasard.B. Par un ancien tudiant d'AS.
Remarque:
Dans l'exemple prcdent il faut noter que le nombre de choix de rponses n'est pas limit deux.
La commande INPUT=CHECKBOX
La commandeinput Type=checkboxpermet d'afficher une liste ou plusieurs choix sont possibles en mmetemps.La commande s'crit:
Texte
ou Texte
selon que vous voulez afficher le bouton avant ou aprs la
rponse.Formation dorigine :DUT
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
24/30
I.U.T. Amiens Dpt Informatique 98/99Page 24/30
BTS
DEUG
Rsultat :
La commande SELECT NAME et OPTION
La commande select nameet Optionpermet d'afficher une liste ou un seul choix est possible et qui s'affichentsous la forme d'un menu"pop-up". La commande s'crit:
option1 option2 option3
Exemple :
Formation dorigine :
DUT BTS DEUG
Rsultat :
La commande TEXTAREA.
La commande HTML utilise est:
Dans ce type, on spcifie d'abord le type soit textarea, ensuite le nom de la rubrique soit name=" nom_du_champ" puis les paramtres d'affichage de la zone de dialogue en ranges (n) et en colonnes (m).
Les formulaires doivent tre complts avant fermeture par une commande permettant d'envoyer le contenu deschamps remplis au serveur HTTP.
Cette commande s'crit:
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
25/30
I.U.T. Amiens Dpt Informatique 98/99Page 25/30
On ajoute galement une deuxime commande qui permet l'usager de reprendre le questionnaire s'il s'esttromp.La commande en question s'crit:
Les FRAMES
Cette fonctionnalit est apparue avec NETSCAPE 2.0 ce qui a permit de crer des nannires, des notes de baspage, des fen^tres lattrales etc. Ce partage de la fentre en "cadres" ou "cellules" autonomes, revient diviser lafentre en plusieurs zones appeles frames. Chaque zone est gre indpendamment des autres par un documentHTML diffrent. Chaque zone porte un nom.
Attention le corps du fichier n'est plus inclus dansmais dans :.Ces deux marqueurs sexcluent mutuellement.
Trois commandes permettent de grer cette fonctionnalit.
permet de diviser une zone en cellules horizontales ou verticales.
ROWS="n,n%,*,..."divise la zone en cellules horizontales. n = hauteur en nombre de pixels, n%= hauteur de la cellule en pourcentage de l'cran,* = hauteur restante.
COLS="n,n%,*,..."
divise la zone en cellules verticales. n = largeur en nombre de pixels n%= largeur de la cellule en pourcentage de l'cran
= largeur restante
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
26/30
I.U.T. Amiens Dpt Informatique 98/99Page 26/30
Division de lcran avec 80% de lespace de la largeurdans la premire frame,Et division de la premire frame en deux parties galesdans la hauteur.
Division de lcran en 4 parties gales
caractrise la cellule NAME="nom_de_la_zone"SRC ="URL"SCROLLING="yes" ou "no" MARGINWIDTH = nombre de pixels de la marge verticale MARGINHEIGHT = nombre de pixels de la marge horizontale
NORESIZEvite la modification de la taille par l'utilisateur
partir de cette commande, le texte ne sera affich que par les Browsers ne sachant pas grer les frames.
html\frame1
Frame1.htm:Document dappel avec formatage des FRAMES
Document1Amiens
Doc1.html
c 'est le Document2
Doc2.htm
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
27/30
I.U.T. Amiens Dpt Informatique 98/99Page 27/30
c 'est le document3
Doc3.htm
Pour utiliser les "frames", un nouvel attribut "TARGET" de la commande permet de donner le nom dela cellule ( cf attribut "NAME" de la commande ) dans laquelle le document sera affich
lien
F TARGET="Cellule-1" affichage dans la cellule "Cellule-1"F TARGET="_self" affichage dans la mme celluleF TARGET="_blank" affichage dans une nouvelle fentreF TARGET="_top" suppression de toutes les frames, retour un affichage classique
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
28/30
I.U.T. Amiens Dpt Informatique 98/99Page 28/30
Liste des codes de caractres spciaux en HTMLCode HTML
Les caractres accentus sont remplacs par les squences d'chappement suivantes :
A a
pour pour pour pour pour pour pour pour pour
pour pour pour
E e pour pour pour pour pour pour pour pour
I i pour pour
pour pour pour pour
pour pour
N n
pour pour
O o pour pour
pour pour pour pour pour
pour pour pour
U u
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
29/30
I.U.T. Amiens Dpt Informatique 98/99Page 29/30
pour pour
pour pour pour pour
pour pour
Y yÝ ;pour pour pour
Exemple:
Les caractres accentus sont remplacs
par des squences d'chappement.
Les caractres spciaux sont remplacs par des squences d'chappement :
Les caractres < , > et & sont interprts par le langage HTML, pour apparatre sans interprtation ils doiventtre remplacs par :
<
& &
Autres caractres spciaux
" "Æ æ
Ç ç Ð ð
Ø ø
Þ þ ß ®
©
pour - pour - pour - pour - pour pour - pour - pour - pour - pour pour - pour - pour - pour - pour pour - pour - pour - pour - pour pour - pour - pour - pour - pour pour - pour - pour - pour - pour pour - pour - pour - pour
Exemple :La leon du jour porte sur les tubes de 200 mm
8/14/2019 Institut Universitaire de Technologie dAmiens Universit De
30/30
I.U.T. Amiens Dpt Informatique 98/99Page 30/30
En HTML la commande de fin de paragraphe est
INDEX
CGI : Common Gateway Interface (que lon peut traduire par Script de Passerelle en franais)