| 
1) HTML, DEFINITION: HTML signifie HYPER TEXT MARKUP LANGUAGE. C'est le langage normalisé utilisé pour écrire des pages de WEB qui seront interprétées par les BROWSERS (en francais les logiciels de navigations) Principaux BROWSERS : A l'origine, Mosaic. Netscape de la société NETSCAPE Internet Exploreur de la société MICROSOFT HOTJAVA de la société SUN SYSTEMS Les plus répandus sont NETSCAPE et IE (Internet Exploreur). Il peut exister des petites différences d'interprétation d'un browser à un autre et il est toujours préférable de tester plusieurs navigateurs. |
|
le langage HTML est actuellement en version 4.0. Une page WEB écrite avec HTML se compose de texte apparaissant à l'écran et de tags (balises HTML) permettant de mettre en forme le document et de le lier avec d'autres documents pouvant se situer sur d'autres serveurs. Exemple : ................ .............. : Tag de début : : Tag de fin : :..............: :............: | | V V Appuyer sur la touche <B>Enter</B> pour sortir les caractères de présentation purement texte (tabulation, retour chariot) ainsi que les espaces supplémentaires (au dela de 1 espace) sont ignorés par les navigateurs. |
|
2) COMPOSANTS ET CONSTITUANTS Si la syntaxe d'un document n'est pas correcte ou n'est pas comprise par le BROWSER il n'y aura pas à proprement dit de "plantage" mais une présentation "BIZARRE" peut apparaitre Nous allons étudier la liste des principaux TAGS A) Les balises (ou TAGS) de structure <HTML> Tout le reste du document </HTML> Ce TAG indique le début et la fin d'un document HTML. Tout document HTML sera obligatoirement balisé ainsi. |
|
<HEAD> Entête du document </HEAD> Cette balise indique le début et la fin d'un entête <TITLE> Le titre de document </TITLE> Cette balise indique le début et la fin d'un titre, il sera placé à l'intérieur du TAG <HEAD>, le texte sera repris par le browser et placé dans l'entête de la fenêtre. |
|
Il existe d'autres TAGS dans l'entête, voici les principaux : <LINK> Couleur des liens <VLINK> Couleur des liens visités <ALINK> Couleur des liens actifs Etc. <BODY> Le corps du document </BODY> Ce TAG indique le début et la fin du corps du document, en fait toute la partie du document qui doit être affichée |
|
Il existe des paramètres à la balise BODY : <BODY BACKGROUND = "URL ou chemin d'accés.GIF ou .BMP"> Sert à indiquer un dessin de fond au format GIF ou BMP ( Attention à ne pas mettre un dessin trop long à charger : il est conseillé d'utiliser le format GIF qui est le seul reconnu par JAVA , et qui est plus rapide à charger.) Il existe de nombreux programmes de conversion qui permettent de convertir d'un format vers GIF BGCOLOR = " rrggbb"> rr pour la couleur rouge gg pour la couleur verte bb pour le bleu |
|
Ce tableau représente les principales couleurs utilisées : Couleur Sombre Moyen Brillant ------------- ----------- ----------- ------------- Rouge #400000 #7F0000 #FF0000 Jaune #404000 #5F7F00 #FFFF00 Vert #004000 #007F00 #00FF00 Cyan #004040 #007F7F #00FFFF Bleu #000040 #00007F #0000FF Magenta #400040 #7F007F #FF00FF Vous composez votre couleur de fond à l'aide des trois couleurs primaires. <BODY TEXT = "#rrggbb"> Idem que pour la couleur, mais concerne le texte, attention à ne pas mettre la même couleurs que le fond. |
|
Commentaires dans un source (non pris en compte par le navigateur) <!-- mon commentaire ... --> La structure général d'un document HTML sera donc: <HTML> <! entête du document> <HEAD> <TITLE> // </TITLE> </HEAD> <! corps du document> <BODY> // // </BODY> </HTML> |
|
Par exemple : <HTML> <HEAD> <! ceci est mon premier essai HTML> <TITLE> MON PREMIER HTML </TITLE> </HEAD> <BODY> Le texte de mon premier document. </BODY> </HTML> ( Attention aux accents dans le texte saisie) Une fois saisi, vous pouvez afficher ce texte avec votre navigateur. |
|
B) Les TAGS d'ancrage <A HREF = "nom-de-ressource"> permet de créer un lien HYPERTEXTE servant à "surfer" sur Internet. En effet il va permettre d'accéder à toutes les autres ressources du réseau et à des parties spécifiques d'un document. Exemple : .................. .................... : Nom du serveur : : texte à afficher : :................: :..................: | / V V <A HREF = «HTTP://WWW.IBM.COM/»> Informations IBM </A> Cette instruction donnera accès à la page web du serveur IBM.COM |
|
1) Branchement local a) On peut brancher à un tag dans un même document <A HREF="#NOM"> NOM représente le nom du tag <A NAME="NOM"> Définition du tag de renvoi Exemple : <DD><A HREF="#ENTETE">Aller a Entete</A> ... plus loin dans le document ... <A NAME="ENTETE">Entête est ici</A> ... |
|
b) On peut brancher à un fichier HTML sur le même serveur Attention : Si le fichier ne se trouve pas dans le même répertoire, indiquez le chemin complet ou utilisez "../" pour remonter d'un niveau (etc...) 2) Branchement à un serveur distant <A HREF = "HTTP://..."> Connexion vers un document d'un serveur WWW <A HREF = "FTP://.."> Connexion vers un site FTP <A HREF = "MAILTO:.."> Connexion vers une boite au lettre (e-mail) <A HREF = "NEWS:.."> Connexion vers un service de nouvelles (News) <A HREF = "TELNET://.."> Connexion vers un serveur TELNET (session émulée) |
|
C) Les TAGS de style de texte et de formatage <Hx> ici le texte </Hx> x représente une valeur de 1 à 6 qui indique une taille standard de caractères. admet 1 paramètre : ALIGN=LEFT RIGHT CENTER <HR> Trait de séparation horizontal admet 3 paramètres : SIZE = (pixels) WIDTH = pourcentage ALIGN= <P>... </P> Définit un paragraphe admet 1 paramètre : ALIGN = LEFT | RIGHT | CENTER <BR> Fin de ligne (retour chariot) |
|
<PRE>...</PRE> Texte préformaté, garde la présentation (police non proportionnelle) <B>...</B> Gras <U>...</U> Souligné <I>...</I> Italique <SUP>...<SUP> Exposant Haut <SUB>...<SUB> Exposant Bas |
|
<BLINK>...</BLINK> Clignotant <S>...</S> Texte barré (anciennement STRIKE) <Q>...</Q> Citation, généralement entre quotes <CENTER>...</CENTER> Centre un texte 3) CREATION D'UNE LISTE A) Liste ordonnée <OL> <LI> élément 1 <LI> élément 2 <LI> élément 3 </OL> |
|
B) Liste Désordonnée <UL> <LI> élément 1 <LI> élément 2 <LI> élément 3 </UL> C) Liste avec glossaire (utilisée aussi pour indenter) ................. ............. :Terme à définir: /----:Définition : /:...............: / :...........: V V <DL> <DT>A</DT> <DD> Description de A</DD> <DT>B</DT> <DD> Description de B</DD> <DT>C</DT> <DD> Description de C</DD> </DL> |
|
On peut imbriquer des listes, exemple : <OL> <LI> élément 1 <OL> <LI> élément 1 <LI> élément 2 <UL> <LI> élément 1 <LI> élément 2 <LI> élément 3 </UL> <LI> élément 3 </OL> <LI> élément 2 <LI> élément 3 </OL> |
|
4) INSERTION D'UNE IMAGE <IMG > admet les paramètres : SRC="Chemin d'accès/fichier.gif" ALT = texte par défaut ALIGN = LEFT °°°°°°°°°°°° texte avec TOP RIGHT ° ° CENTER °°°°°°°°°°°° TOP MIDDLE °°°°°°°°°°°° BOTTOM ° ° texte avec CENTER, ... BORDER = pixels °°°°°°°°°°°° HEIGHT = pixels WIDTH = pixels VSPACE = taille de la marge verticale avec le texte HSPACE = taille de la marge horizontale avec le texte |
|
Exemple: .......................... ................... : Coordonnées de l'image : : Référence à une : :........................: : page HTML : / :.................: / | | V V <A HREF="SOMMAIRE.html"><IMG SRC="SOMMAIRE.GIF" ALT="[Retours au sommaire]"></A> ^ | ......................... : Texte de remplacement : :.......................: Dans cet exemple l'image (sommaire.gif) sera réactive : si on clique dessus on retourne au sommaire (page sommaire.html) |
|
5) CREATION D'UN TABLEAU : <TABLE> ... </TABLE> Définition du tableau admet 4 paramètres BORDER = pixels WIDTH = pixels CELLSPACING = pixels d'espacement CELLPADDING = pixels taille de la bordure <CAPTION>...</CAPTION> Titre du tableau admet 1 paramètre ALIGN = TOP BOTTOM <TR>... </TR> Ligne d'un tableau admet 3 paramètres ALIGN = LEFT | RIGHT | CENTER VALIGN = TOP | MIDDLE | BOTTOM BGCOLOR="#rrvvbb" |
|
<TH>... </TH> Entête de cellule d'un tableau admet les paramètres ROWSPAN = Nombre de lignes occupées COLSPAN = Nombre de colonnes occupées ALIGN = LEFT RIGHT CENTER VALIGN = TOP MIDDLE BOTTOM BGCOLOR="#rrvvbb" <TD>... </TD> Cellule d'un tableau admet même paramètres que TH |
|
EXEMPLE : |M/A | LUNDI | MARDI |MERCREDI| JEUDI |VENDREDI| SAMEDI | |Matin | 4 | 4 | 0 | 4 | 5 | 0 | |Aprés midi | 4 | 4 | 2 | 2 | 2 | 0 | <TABLE BORDER = 2 > <CAPTION ALIGN= TOP> Nombre d'heures travaillées </CAPTION> <TR> <TH>M/A</TH> <TH>LUNDI</TH> <TH>MARDI</TH> <TH>MERCREDI</TH> <TH>JEUDI</TH> <TH>VENDREDI</TH> <TH>SAMEDI</TH> </TR> |
|
<TR> <TH>Matin</TH> <TD>4</TD> <TD>4</TD> <TD>0</TD> <TD>4</TD> <TD>5</TD> <TD>0</TD> </TR> <TR> <TH>Aprés midi</TH> <TD>4</TD> <TD>4</TD> <TD>2</TD> <TD>2</TD> <TD>2</TD> <TD>0</TD> </TR> </TABLE> |
|
6) CREATION DE CADRES (FRAMES) le but est d'afficher plusieurs pages sur un seul écran, par exemple : +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°° + + ° un bandeau fixe sur toutes les pages ° + + °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°° + + °°°°°°°°°° °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°° + + ° un ° ° une page html qui s'affiche suivant le choix ° + + ° menu ° ° effectué par l'utilisateur sur le menu de ° + + ° à ° ° gauche. ° + + ° sur ° ° ° + + ° la ° ° ° + + ° gauche ° ° ° + + ° ° ° nous avons donc ici trois cadres ° + + ° ° ° ° + + ° ° ° ° + + °°°°°°°°°° °°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°° + +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
|
Pour réaliser cela vous devez coder une page HTML qui va en fait créér les cadres et indiquer les pages HTML devant les remplir. <frameset > indique un ensemble de cadre ainsi que le découpage logique <frameset cols="x,y,*"> indique un découpage en colonnes -la première colonne occupe x pixels ou x% (il faut ajouter "%") -la deuxième colonne occupe y pixels ou % -la troisième colonne le reste. <frameset rows ...> indique un découpage en lignes les ordres <frameset ..> doivent être terminés par </frameset> et remplacent <body>,</body> qui sont invalides. il peuvent être imbriqés |
|
pour l'exemple qui nous intéresse : <html> <head> <title>titre de la page </title> </head> <frameset rows="15%,*"> <frame src="bandeau.html"> <frameset cols="20%,*"> <frame src="menu.html"> <frame src="page1.html"> </frameset> </frameset> <noframe> votre navigateur ne supporte pas les cadres, cliquez <a href="page1.html"> ici </a> pour voir la page principale </noframe> </html> |
|
Pour référencer un cadre particulier lors d'un lien : 1/ nommer le lien lors de sa création <frame src="page1.html" name="principal"> 2/ indiquez le nom du cadre avec HREF <a href="page1.html" target="principal"> ou bien utilisez l'un des mots réservés suivants: target="_blank" -> nouvelle fenêtre sans nom "_self" -> le cadre en cours contenant l'ordre HREF "_parent" -> le cadre parent (père) "_top" -> la fenêtre principale (annule tous les cadres) |
|
7) CREATION D'UN FORMULAIRE Un formulaire est une demande d'informations sous forme de saisie: zones de texte, cases à cocher, boutons radio, etc ... (enquête de satisfaction, commande par correspondance etc.) Le but étant de pouvoir les traiter de manière automatique à la réception A) Définition de l'action C'est ce que va faire le Browsers des informations qu'il a récupéré par la saisie utilisateur. <FORM METHOD = "post" ACTION="Adresse URL" L'adresse URL peut être deux choses : Un script CGI (sur AS/400 , un pgm GAP ou C) Une adresse de courrier électronique |
|
Exemple : <FORM METHOD = "post" ACTION="mailto:infos@volubis.fr" Enverra le résultat de la saisie à la boite au lettre infos (site Volubis) B) Définition du masque de saisie > Zone de saisie simple <INPUT TYPE="text" NAME="zone" SIZE=n MAXSIZE=xx value="valeur initiale"> ^ ^ / \ taille affichée nbr de caractères maxi Exemple : Saisissez votre nom <INPUT TYPE="text" NAME="nom" SIZE=30> |
|
> Zone de saisie cachée <INPUT TYPE="hidden" NAME="zone" VALUE="xxxx"> > Zone de saisie à plusieurs lignes <TEXTAREA NAME = "zone" ROWS=n COLS=n> [ texte initial (facultatif) ] </TEXTAREA> Exemple : Saisissez ici vos remarques : <TEXTAREA NAME = "remarque" ROWS=6 COLS=50> </TEXTAREA> Cela créera une zone de 300 caractères de remarques avec 50 caractères par ligne |
|
> Zone de choix (cases à cocher) <INPUT TYPE="checkbox" NAME="zone" VALUE="valeur 1" CHECKED> <INPUT TYPE="checkbox" NAME="zone" VALUE="valeur 2"> Exemple : Region <UL> <LI> France <INPUT TYPE="checkbox" NAME="pays" VALUE="FRA CHECKED> <LI> Ile de France<INPUT TYPE="checkbox" NAME="pays" VALUE="ILE"> <LI> Paris<INPUT TYPE="checkbox" NAME="pays" VALUE="PAR"> </UL> si l'utilisateur coche les trois, le serveur recoit: pays=FRA,ILE,PAR |
|
> Boutons radio <INPUT TYPE="radio" NAME="zone" VALUE="valeur 1"> <INPUT TYPE="radio" NAME="zone" VALUE="valeur 2" CHECKED> Exemple : Donnez moi une note : <P> <INPUT TYPE="radio" NAME="note" VALUE=20" CHECKED > Merveilleux <BR> <INPUT TYPE="radio" NAME="note" VALUE=15 > Bon <BR> <INPUT TYPE="radio" NAME="note" VALUE=10> Moyen <BR> <INPUT TYPE="radio" NAME="note" VALUE=05 > Peu mieux faire <BR> <INPUT TYPE="radio" NAME="note" VALUE=00> Incurable <BR> </P> le serveur recoit note=20 (ou 15, 10, etc...) |
|
> Liste déroulante : <SELECT NAME="ZONE" [MULTIPLE] > <OPTION VALUE="texte1">texte1</OPTION> <OPTION SELECTED VALUE="texte2">texte 2</OPTION> <OPTION VALUE="texte3">texte 3</OPTION> </SELECT> Exemple : <SELECT NAME="ECRAN"> <OPTION VALUE="V"> VGA </OPTION> <OPTION SELECTED VALUE="S"> SVGA </OPTION> <OPTION VALUE="A"> AUTRE </OPTION> </SELECT> |
|
> Boutons d'action : Ils sont deux - Envoyer <INPUT TYPE="submit" VALUE="Envoi"> - refresh (réaffichage) <INPUT TYPE="reset" VALUE="Annuler"> Exemple : Cliquez sur un des boutons <INPUT TYPE="submit" VALUE="Envoi"> <INPUT TYPE="reset" VALUE="Annuler"> le bouton envoyer peut-être remplacé par une image : <INPUT TYPE="image" SRC="../images/ok.gif"> |
|
8) TAG POUR INSERTION JAVA JAVA est le langage concu par SUN qui permet par l'intermédiaire d'applets (programmes "compilés" qui sont chargés sur votre ordinateur) de produire de mouvements d'images et autres traitements. Ce langage ayant été reconnu par tous les grands acteurs. le langage JAVA est assez proche du C++ avec certaines simplifications qui rendront l' apprentissage simple pour un programmeur connaissant les bases de la programmation orientée objet. Un applet exécutable dans un document HTML s'appelle une classe (class en anglais) Pour intégrer des applets dans un document HTML il faut les déclarer de la manière suivante: |
|
<BODY> <APPLET code=nomapplet.class width = 150 height = 150> <PARAM name = nomvariable value="valeur"> </APPLET> </BODY> |
|
Voici le source d'un exemple de classe :
import java.applet.*;
import java.awt.*;
import java.awt.peer.*;
import java.awt.image.*;
import java.io.*;
import java.net.*;
import java.util.*;
public class nomapplet extends applet
{
public void paint (Graphics g)
{
g.drawRect(10, 10, 120, 120);
g.drawString("Formation sur HTML"), 20, 30);
}
}
|
|
9) QUELQUES CONSEILS A) Eviter les chargements longs Abondance de dessins, page HTML trop grandes, etc. B) Bien choisir la présentation La présentation doit être à la fois sobre et personnalisée et doit tourner de manière correcte sur les différents navigateurs. Il faut voir beaucoup de sites WEB ayant la même activité que vous et faire une synthèse, et n'oublier pas que si une page HTLM vous intéresse vous pouvez la charger sur votre disque pour analyser le source. C) Prévoir un accès rapide par rubrique Pratiquement toutes les pages WEB ont un sommaire qui vous aiguille vers les différentes partie du document, ce qui vous évite de lire tous le document. |
|
D) Utilisez les frames pour simplifier l'accès On doit trouver une information en trois click de souris maxi ! E) Laisser une e-mail pour vous écrire (voir un livre d'or) On peut vous aider à corriger des BUGS ou vous donner des conseils judicieux et vous pouvez même obtenir ainsi des informations de type trucs et astuces. F) Penser à la maintenance Avant de vous lancer, prenez des conseils auprès de personnes ayant déja réalisé des serveurs. Une des régles essentielles est de faire des petits documents HTML liés par HYPERTEXTE plutôt qu'un gros document qui deviendra rapidement ingérable. Si votre serveur est réussi les documents seront en perpétuelle évolution |
|
Chaque document peut être maintenu indépendamment et éventuellement par des personnes différentes. A terme vos pages pourront même être sur des machines différentes. Utilisez au maximum des liens relatifs '../../monfichier.htm' G) Utiliser des outils évolués (et évolutifs) Les techniques évoluent vite, la norme HTML aussi. ......................................................................... : Des informations en lignes peuvent être trouvées sur le site : : : www.ncsa.uiuc.edu : : particulièrement le Guide du Débutant en HTML à : : http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html : :.......................................................................: |
|
9) Liste des principaux TAGS HTML TAGS DE STRUCTURE Définition d'un document HTML <HTML>...</HTML> Définition d'un entête <HEAD>...</HEAD> Définition d'un titre <TITLE>...</TITLE> Corps du document <BODY>...</BODY> TAGS DE SEPARATION Fin de Paragraphe <P> Nouvelle Ligne <BR> Trait Horizontal <HR> Spécifications d'entête Plus grand <H1>.. </H1> <Hx> </Hx> Plus petit <H6>... </H6> |
|
LES ATTRIBUTS DE TEXTE Gras <B>...</B> Italique <I>...</I> Style machine à écrire <TT>...</TT> Souligné <U>...</U> Préformaté <PRE>...</PRE> Addresse <ADDRESS>...</ADDRESS> Entre quotes <BLOCKQUOTE>...</BLOCKQUOTE Citation <CITE>...</CITE> D'aprés une source <CODE>...</CODE> Definition <DFN>...</DFN> Emphase <EM>...</EM> Entrée clavier <KBD>...</KBD> Listing <LISTING>...</LISTING> Exemple <SAMP>...</SAMP> Forte emphase <STRONG>...</STRONG> Variable <VAR>...</VAR> |
|
Liste ordonnée d'éléments <OL> <LI> 1er élément <LI> 2éme élément </OL> Liste désordonnée d'éléments <UL> <LI>1er élément <LI>2éme élément </UL> Liste descriptive <DL> <DT>Titre de la description <DD>Définition <DT>Un autre titre <DD>Une autre définition </DL> |
|
Indentation Pour une liste indentée mettre le tag <DT> par exemple <DL> <DT> <DD>Ce texte apparaitra indenté </DL> Références Sert à définir un nom <A NAME="MarkName"> Aller à un point d'ancrage nommé <A HREF="#MarkName">texte associé</A> Lier à un autre document <A HREF="chemin d'accès URL">texte</A> Envoyer un MAIL <A HREF="mailto:xxxxx@ZZZZZ.COM">Envoyer un mail</A> Image <IMG SRC="Chemin d'accès/fichier.gif""> |
|
Caractères Spéciaux générer un é , è é , è générer un â â générer un à à générer un & & générer un > > générer un < < générer un " " générer un blanc non séparé genérer un caractère ASCII &#asciicode; # @ | Caractères étendus : À À ï ï Þ Þ Ñ Ñ Commentaires dans un source <! -- ... --> |
