Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

TECFA HTML MANUEL Daniel Schneider et Patrick Jermann TECFA - FPSE Université d

TECFA HTML MANUEL Daniel Schneider et Patrick Jermann TECFA - FPSE Université de Genève Mars 1997 VERSION 0.4 Version WWW: http://tecfa.unige.ch/guides/htmlman/html-1.html N.b. Toute reproduction sans l’autorisation des auteurs est interdite. 1. Introduction à HTML 3 1-1 Documentation sur Internet ..................................................... 3 1-2 Principe du langage HTML ...................................................... 3 1-3 La structure d’un document de base ....................................... 4 2. Titres séparateurs et paragraphes 7 2-1 Titres ........................................................................................... 7 2-2 Séparateurs ................................................................................ 7 2-3 Paragraphes ............................................................................... 8 3. Mots et caractères 9 3-1 Mise en forme de mots .............................................................. 9 3-2 Les caractères spéciaux ............................................................. 9 4. Les Liens 13 4-1 Liens externes vers un autre document HTML .................... 13 4-2 Liens internes ........................................................................... 14 4-3 Liens externes vers d’autres protocoles/services Internet ... 14 5. Les Listes 15 6. Images 17 6-1 Insertion d’images ................................................................... 17 6-2 Formats et résolution d’image ................................................ 18 6-3 Images cliquables ..................................................................... 18 7. Les Tables 20 7-1 Les tables à la façon empirique .............................................. 20 7-2 La spécification d’une table .................................................... 21 8. Les Formulaires 24 8-1 Les formulaires à la manière empirique ............................... 24 8-2 Spécification d’un formulaire ................................................. 25 9. Les frames 29 9-1 Les frames à la manière empirique ........................................ 29 9-2 Spécification de frames ........................................................... 31 10. Index 32 1. Introduction à HTML - 1-1. Documentation sur Internet 3 1. Introduction à HTML 1-1 Documentation sur Internet Voici quelques pointeurs relatifs au langage HTML: En anglais: • Le “Beginner’s Guide de NSCA”: http://www.ncsa.uiuc.edu/General/Internet/WWW/HTML- Primer.html • le “HTML Quick Guide de Michael Grobe est un document très utile! • Copie au Tecfa (10/95): http://tecfa.unige.ch/guides/html-quick-guide.html • L’original: http://kuhttp.cc.ukans.edu/lynx_help/HTML_quick.html • Dans le même genre, le Bare Bones Guide de Kevin Werbach donne sans commentaire la syntaxe de tous les marqueurs HTML : http://tecfa.unige.ch/guides/bare_bone.html. • La meilleure source pour le standard HTML officiel sont les pages du consortium W3C: http:// www.w3.org/pub/WWW/MarkUp/MarkUp.html. Le contenu de cette documentation est très technique et n’est pas destiné aux débutants ! En français: • La section "http://tecfa.unige.ch/info-www.html#Write" concernant html dans la page “http:// tecfa.unige.ch/info-www.html” du Tecfa contient plusieurs pointeurs vers des guides et des tu- toriels. Consultez-là! • Pour vérifier votre code vous pouvez l’envoyer à l’adresse http://www.unipress.com/cgi-bin/ WWWeblint.qui vous donnera une liste des inconsistances et des erreurs. Indispensable ... 1-2 Principe du langage HTML HyperText Markup Language (HTML) est un langage de “mark up” qui définit la structure logique d’un document WWW diffusé sur le Web. Il s'agit d'un ensemble de commandes de formatage. “For- matage” veut dire qu’on insère des commandes dans le texte qui indiquent comment le mettre en pa- ge. Notez toutefois qu’il s’agit essentiellement de définitions logiques. En règle générale, un mar- quage indique de quel type de texte il s’agit (titre, sous-titre, liste, ...) et non pas comment exactement il faut l’afficher. C’est votre client WWW qui décide cela (Courier 14 gras, ...). Le langage HTML est basé sur la notion d’environnement possédant un début et une fin. Autrement dit, un environnement est délimité par un marqueur (Angl. “tag”) inséré au début et à la fin. Chaque marqueur est délimitée par les signes < et >. Voici le principe: <marqueur> ....... le contenu de l’environnement </marqueur> Notez qu’un environnement se ferme avec </marqueur>, c’est à dire le nom de l’environnement pré- cédé par un “/”. Voici deux exemples d’environnement: <title>Titre du document</title> <H1>Titre principal></H1> Les commandes HTML ne sont pas sensibles aux caractères minuscules ou majuscules. 1. Introduction à HTML - 1-3. La structure d’un document de base 4 La plupart des environnements HTML peuvent être imbriqués selon des règles bien définies. Notam- ment, il n’est pas permis de se faire chevaucher des environnements: JUSTE: <h1><a href=”./test.html”>Votre titre</a></h1> FAUX !! <h1><a href=”./test.html”>Votre titre</h1></a> A l’intérieur de chaque environnement vous pouvez avoir des commandes. Une commande n’a pas de début et de fin, mais effectue une simple opération valable dans l’environnement. Voici l’exemple d’une liste à puces marquée par <ul> ... </ul>. Les marqueurs <li> indiquent le début d’un nouvel élément de liste <ul> <li>Nouveau élément <li>Nouveau élément </ul> Certains environnements ou commandes peuvent être paramétrés à l’intérieur du marqueur de début. Voici un exemple pour une commande qui insère une image dans le document: <img align=left src="/gif/tecfacow-small.gif" hspace=10 width=50 height=38 alt="[COW Picture] - "> Voici un exemple de paramétrage pour un environnement: <BODY BACKGROUND="/gif/backgrnd.jpg" text="FFFFFF" link="FFFF00" vlink="FFAA00"> ........ ........ ........ </body> 1-3 La structure d’un document de base Voici le minimum qui doit se trouver dans un document HTML: <HTML> <HEAD> <TITLE>document test (11-Oct-1995)</TITLE>  </HEAD> <BODY> <H1>document test</H1> Voici un test! <ADDRESS> <A HREF="http://tecfa.unige.ch/tecfa/general/tecfa-people /schneider.html">D.K.S.</A></ADDRESS> </BODY> </HTML> Examinons plus en détail cette structure de base: (1) Le document doit être entouré de marqueurs (Angl. “tags”) “html” <html> ..... </html> (2) Le “head” est utilisé pour stocker de l’information à propos du document, dans la plupart des cas il s’agit uniquement du titre. (3) Le titre (“title”) du document est utilisé à deux fins: • Dans la plupart des “browsers”, le titre est affiché quelque part en dehors de la fenêtre où est af- fiché le reste (par exemple sous Netscape il s’affiche dans la barre supérieure de la fenêtre). h1 a h1 a 1. Introduction à HTML - 1-3. La structure d’un document de base 5 • Le titre est souvent utilisé par les “search robots” pour indexer votre page. Choisissez donc quel- que chose de significatif. Notez que le “title” correspond souvent au titre principal “H1” de votre document (comme dans l’exemple) (4) Toute la page HTML proprement dite est incluse dans le “body”. • Notez qu’il est important de signer votre page, pour que l’on puisse identifier l’auteur et éven- tuellement lui envoyer un message. Soit vous mettez un pointeur vers votre home page person- nelle, soit votre adresse email. (5) Il est également utile de dater votre document. Certains auteurs mettent la date dans le titre. (6) Notez que vous pouvez insérer des commentaires dans votre document qui ne seront pas affichés par les clients WWW (sauf si la personne regarde la “source”, par exemple dans Netscape il suffit de cliquer sur “View Source” (ou équivalent) dans le menu “View”. Un commentaire commence avec “”.Voici un commentaire typique:  1. Introduction à HTML - 1-3. La structure d’un document de base 6 2. Titres séparateurs et paragraphes - 2-1. Titres 7 2. Titres séparateurs et paragraphes Exercice 1: http://tecfa.unige.ch/guides/htmlman/exo1.html 2-1 Titres <Hn></Hn> Il existe 6 niveaux de titre dans HTML. La syntaxe d’un environnement de titre consiste en la lettre “h” suivie d’un nombre compris entre 1 et 6 (“h“ fait référence à heading en anglais). Un retour à la ligne est automatiquement inséré après un titre. <Hn>Contenu du titre</Hn> où n est compris entre 1 et 6 Exemples: <H1>Titre de niveau 1</H1> <h4>Titre de niveau 4</h4> Paramètres: • ALIGN est un paramètre optionnel défini par la version HTML 3.0 et sert à spécifier l’aligne- ment horizontal d’un titre. Les trois valeurs possibles de ce paramètre sont : LEFT, CENTER et RIGHT. Exemple: <h1 align=center>Texte du titre</h1> 2-2 Séparateurs <P> Le marqueur “p” correspond à un double retour de ligne. Dans la version HTML 2.0 cet environne- ment ne nécessitait pas de fermeture (c’était une commande). La version HTML 3.0 introduit le mar- queur de fin de paragraphe et son paramétrage. Exemple HTML 2.0: ... Je ne pense pas qu’il faille ... c’est ainsi qu’il vint. <p> Pour en revenir à d’autres .... <p> Exemple HTML 3.0: ... <p align=left>Je ne pense pas qu’il faille ... c’est ainsi qu’il vint. </p> <p align=right>Pour en revenir à d’autres .... </p> Paramètre: • ALIGN est un paramètre optionnel défini par la version HTML 3.0 et sert à spécifier l’aligne- ment horizontal d’un titre. Les trois valeurs possibles de ce paramètre sont : LEFT, CENTER et RIGHT. <BR> Le marqueur “br” quant à lui effectue un simple retour de ligne. Il n’est pas nécessaire de le fermer par </br>. Netscape a introduit le paramètre optionnel CLEAR qui permet de forcer l’alignement du texte. Ce paramètre est particulièrement utile lorsqu’on l’utilise conjointement avec des images. Exemple: <br clear=left> Paramètre: 2. Titres séparateurs et paragraphes - 2-3. Paragraphes 8 • CLEAR peut prendre les valeurs LEFT, RIGHT et ALL. Il introduit des retours de lignes jusqu’à ce que la marge droite, gauche ou les deux soient libres. <HR> Le marqueur “hr” insère une barre horizontale. Netscape a introduit plusieurs paramètres optionnels qui permettent d’influer sur l’apparence de la barre. Pour un aperçu de l’effet des différents paramètres, reportez vous à l’URL : http://tecfa.unige.ch/guides/htmlman/hr-test.html. Exemples: <hr> <hr size=4 align=CENTER width=50% NOSHADE> <hr align=LEFT width=300> Paramètres: • SIZE permet de spécifier l’épaisseur de la barre horizontale en pixels. La valeur par défaut est 1. • WIDTH permet de spécifier la longueur de la ligne, soit en pixels, soit en pourcentage de la lar- geur de la fenêtre. • ALIGN permet de forcer l’alignement de la barre. Les valeurs possibles sont LEFT RIGHT et CENTER. Ce paramètre a un effet que pour autant que uploads/s1/ html-2.pdf