HTML (1/4) : les bases

Transcription

1 1 HTML (1/4) : les bases introduction...1 les concepts de base...1 structure d un document HTML...1 divisions...3 balises de styles...5 les listes...8 Les liens hypertextes et les images...9 Introduction HTML,signifie HyperText Markup Language. C est un sous-ensemble du langage SGML (Standard Generalized Markup Language) qui sert à définir la structure générale de divers types de documents. HTML est donc un langage de description de documents structurés. Il ne permet cependant pas de définir de façon stricte l apparence d une page. Celle ci peut être dépendante aussi du navigateur utilisé et des options de paramétrage du lecteur. Sa simplicité est telle qu il n est pas nécessaire d utiliser un éditeur particulier. Sa grande permissivité demande de la rigueur et de l attention dans l écriture des documents afin que ceux-ci s affichent correctement quels que soient l environnement et le navigateur utilisés. Les concepts de base Pour décrire la structure d un document il faut encadrer chacune des différentes structures du texte par une paire de balises (une au début, une à la fin). Les balises sont délimitées par les signes «<» ou «>». La balise de fin comporte le caractère «/». <balise> texte </balise> Pour créer un document HTML on utilise un éditeur de texte (Ex : Bloc-notes). Le document est visualisé à l aide d un navigateur (Internet Explorer, Netscape, etc.). Structure d un document HTML Tout document HTML commence par la balise : et se termine par. Entre ces 2 balises, il existe diverses instructions HTML : * ZONE D EN-TETE : Une en-tête est utilisée habituellement (en anglais Header) pour fournir des informations sur le contenu du document. Les informations de cette partie ne sont pas visibles sur la page HTML. Cette partie est encadrée par les balises : et. prologue corps du document La zone Head contient en général une balise TITLE. Celle ci sert à donner un titre au document qui apparaît dans la zone titre du navigateur. Ce titre a en outre un caractère informatif : c est ce texte qui sera stocké dans le fichier des favoris (bookmark). Le texte doit être suffisamment court pour tenir dans l espace que le navigateur lui réserve, sous peine d être tronqué.

2 2 corps du document titre obtenu dans Internet Explorer On utilise dans la zone d en tête la balise <META> pour fournir des informations sur le document Html. Ces informations servent à l indexation du document par les moteurs de recherche. La syntaxe générale est : <Meta Name=mot clé Content=valeur attribuée au mot clé> Nom du tag Attribut Utilité Author "Informations sur l'auteur" Permet de rentrer des informations sur l'auteur de la page Copyright "Informations de copyright" Permet de référencer des informations de droits d'auteur Description "Description de votre site" Permet de donner une information à afficher lors du résultat d'une recherche Keywords "mot clé, mot clé,..." Permet d'entrer les mots clés de votre page Web Subject "Sujet de la page" Permet de préciser le sujet de la page <META NAME="author" CONTENT="H. Tournier"> <META NAME="keywords" CONTENT="cours, HTML"> * CORPS DU DOCUMENT Le reste du document HTML se situe entre les balises et. corps du document Les balises <ADDRESS> et </ADDRESS> permettent de saisir toutes les informations concernant l auteur du document (adresse, téléphone, ). premier chapitre <ADDRESS>Henri Tournier</ADDRESS>

3 3 * <! COMMENTAIRES --> Tout texte commençant par <!-- et se terminant par --> ne sera pas interprété par le navigateur donc pas affiché. Cela sert à l auteur pour documenter le fichier source. Divisions * TITRES : <HN> On se sert d en-tête pour diviser le texte en sections (ou titres de chapitre). Il existe six niveaux d importance décroissante. Le navigateur affecte une taille différente de caractère suivant le numéro affecté (1 à 6), les caractères sont automatiquement en gras. La balise de début et la balise de fin génère automatiquement un espace de type nouveau paragraphe (passage à la ligne avec un espace de type nouveau paragraphe). On peut fixer l alignement d un titre à l aide de l attribut align=type ; le type peut être soit center, left ou right. <TITLE> Cours de HTML</TITLE> <H1 ALIGN=CENTER>premier chapitre</h1> <H2 ALIGN=LEFT>les bases de HTML</H2> HTML, signifie HyperText Markup Language. <ADDRESS> Henri Tournier </ADDRESS> * PASSAGE A LA LIGNE : <BR> Lorsqu ils exécutent du code HTML, les navigateurs traitent le texte au kilomètre dans la largeur de la fenêtre et ignorent le découpage en ligne tel qu il existe dans le fichier source. La longueur des lignes sera fonction de la taille de la fenêtre du navigateur. IL faut donc que l auteur du document force le

4 4 passage à la ligne lorsqu il le désire. Pour cela on utilise la balise <BR> qui est une balise vide : il n existe pas de balise de fin. <H1>premier chapitre</h1> <H2>Les bases de HTML</H2> HTML,signifie HyperText Markup Language.<BR>C'est un sous ensemble du langage SGML <ADDRESS> Henri Tournier </ADDRESS> * PARAGRAPHE <P> La balise <P> provoque le passage au paragraphe suivant : elle provoque un passage à la ligne et décale la ligne suivante d un espace d une ligne. On termine un paragraphe par </P>. <H1>premier chapitre</h1> <H2>Les bases de HTML</H2> <P>HTML,signifie HyperText Markup Language.<BR>C'est un sous ensemble du langage SGML</P> <P>HTML est donc un langage de description de documents structurés. Il ne permet pas de définir de façon stricte l'apparence d'une page. </P> <ADDRESS>Henri Tournier</ADDRESS> * BARRE HORIZONTALE <HR>

5 5 La balise <HR> est une balise de division graphique qui permet de tracer un trait horizontal sur toute la largeur ou une partie de la page. Des attributs de la balise permettent de régler des paramètres : - size : la largeur du trait - width : la longueur du trait (la valeur donnée peut être en pourcentage ou absolue) <HR SIZE=valeur1 WIDTH=valeur2> <H1>premier chapitre</h1> <H2>Les bases de HTML</H2> HTML,signifie HyperText Markup Language.<BR>C'est un sous ensemble du langage SGML <P> HTML est donc un langage de description de documents structurés. il ne permet pas de définir de façon stricte l'apparence d'une page. </P> <HR SIZE=20 WIDTH=50%> <ADDRESS> Henri Tournier </ADDRESS> balises de styles * STYLES PHYSIQUES Balise style <B></B> Texte en caractères gras <I></I> Texte en caractères italiques <U></U> Textes en caractères soulignés <TT></TT> Textes en caractères machine

6 6 <TITLE> Cours de HTML</TITLE> <H1><TT>premier chapitre</tt></h1> <H2>Les bases de HTML</H2> <B>HTML,signifie HyperText Markup Language.<BR>C'est un sous ensemble du langage SGML</B> <P> <I>HTML est donc un langage de description de documents structurés. il ne permet pas de définir de façon stricte l'apparence d'une page. </I> </P> <HR SIZE=20 WIDTH=50%> <ADDRESS> <U> Henri Tournier </U> </ADDRESS> ce qui donne : * POLICES DE CARACTERES On peut changer la police de caractères <FONT FACE>, sa taille <FONT SIZE>, sa couleur <FONT COLOR>, toutes ces opérations peuvent être faites dans une seule balise. On peut aussi donner une couleur à tout un texte en ajoutant la couleur à l intérieur de la balise. <BODY TEXT="red"> <H1><TT><FONT COLOR="blue">premier chapitre</font></tt></h1> <H2>Les bases de HTML</H2> <B >HTML, signifie HyperText Markup Language.<BR>C'est un sous ensemble du langage SGML</B> <P> <I>HTML est donc un langage de description de documents structurés. <FONT FACE= "Comic Sans MS" SIZE=5 COLOR="#33FF20">Il ne permet pas de définir de façon stricte l'apparence d'une page.</font></i> </P> <HR SIZE=20 WIDTH=50%> <ADDRESS> <U> Henri Tournier </U> </ADDRESS>

7 7 Il existe (seulement avec Netscape) la balise <BLINK></BLINK> qui permet de faire clignoter le texte sélectionné. Attention, certains caractères (caractères accentués et spéciaux) doivent être codés différemment. Vous pouvez consulter les listes complètes (Voir fichiers caracteres_speciaux.htm et caracteres_accentues.htm). ménagère => ménagère État => État impôt=> impôt façon => façon => Actuellement, la plupart des navigateurs sont capables d interpréter correctement ces caractères sans avoir à utiliser les codes d échappement. * COULEUR D'ARRIERE-PLAN <BGCOLOR> Dans la balise BODY on peut insérer bgcolor="#rrvvbb" ou le nom de l'une des 16 teintes prédéfinies. Consultez la table des couleurs en hexadécimale (Voir fichier Table_des_couleurs.htm). <BODY BGCOLOR="yellow"> <H1 ALIGN=CENTER>premier chapitre</h1> <H2 ALIGN=LEFT>Les bases de HTML</H2> HTML,signifie HyperText Markup Language. <ADDRESS> <BLINK> Henri Tournier </BLINK> </ADDRESS>

8 8 les listes Un des éléments les plus utilisés dans un document HTML est probablement les listes. Il en existe plusieurs types : - les listes numérotées ou ordonnées - les listes non numérotées ou à puces - les listes de glossaire dans lesquelles chaque article possède un terme et sa définition - les listes de menus, constituées d une suite de paragraphes - les listes de répertoires, composées de très courts articles pouvant être présentés verticalement. * LISTES NUMEROTEES La liste s ouvre et se ferme par les balises <OL> et </OL> On peut ajouter à la balise <OL> deux attributs : - type pour définir la numérotation 1 pour chiffre, A pour alphabétique majuscule, a pour alphabétique minuscule, I pour romain majuscule et i pour romain minuscule - start pour définir la valeur de départ de la liste Chaque article de la liste est précédé par la balise <LI>. * LISTES NON NUMEROTEES La liste s ouvre et se ferme par les balises <UL> et </UL>. Chaque article de la liste est précédé par la balise <LI>. On peut ajouter à chacune des balises l attribut type qui permet de spécifier le type de puces à adopter : - square : rectangle - circle : cercle vide - disc : cercle plein * LISTES DESCRIPTIVES On ouvre et ferme la liste par les balises <DL> et </DL>. L élément <DT> précède chaque item de la liste, la balise <DD> correspond à la zone de définition de l item. <TITLE>Programme INF M01</TITLE> <H1 ALIGN=center> Programme INF M01</H1> <OL TYPE=I> <LI>Introduction sur Internet <UL TYPE=square> <LI>Bref historique <LI>Fonctionnement <LI>Les Services d'internet : Web, Mail, Forum <LI>Les différents formats de fichiers, compression décompression </UL> <LI>HTML <UL TYPE=square> <LI>Structure d'un document <LI>Les balises <LI>Listes </UL> </OL>

9 9 Les liens hypertextes et les images 1. créations de liens liens internes dans le meme document liens vers un autre fichier liens vers une url envoyer un incorporer des images création de liens Pour passer d une page à l autre de votre site Internet ou pour envoyer votre «lecteur» vers une autre adresse ou un fichier on utilise des liens hypertextes. Pour cela on utilise des ancrages qui permettent de naviguer d un endroit à l autre. Ils sont souvent repérables par leur couleur bleue dans le document (la couleur se modifie quand on clique dessus). Ils permettent : - d aller d un endroit à l autre du même document - d aller vers une autre page - d aller vers un autre fichier situé ou non dans le même répertoire - d aller vers un autre site - d envoyer un message électronique Dans tous les cas la balise permettant la saisie d un lien hypertexte est : <A HREF="Adresse ou URL">.. </A> 2. liens internes dans le même document Ils permettent de naviguer plus aisément dans le même document. On utilise la syntaxe suivante : définition de l ancre <A NAME="nom_ancre">[partie pointée par le lien]</a>. partie associant le lien à l ancre <A HREF="#nom_ancre">texte de la balise</a> : qui envoie l utilisateur vers la partie désirée. 3. Liens vers un autre fichier On utilise la même balise que précédemment : <A HREF="Adresse ou URL">... </A> où adresse représente le chemin d accès au fichier. Si les deux fichiers sont dans le même répertoire il suffit de mettre le nom du fichier.

10 10 <TITLE>Programme INF M01</ TITLE> <H1 ALIGN=center>Programme INF M01</H1> <OL TYPE=I> <LI><A HREF="intro.html">Introduction sur Internet</A> <LI><A HREF="a:\html1.html">Les bases du HTML</A> </OL> Pour aller dans un endroit précis du deuxième fichier il suffit de rajouter l ancre après le nom du fichier. <html> <head> <title>programme INF M01</title> </head> <body> <h1 align=center>programme INF M01</h1> <ol type=i> <li><a HREF="cours3_1.html#detail">Introduction sur Internet</A> <li><a HREF="a:\html1.html">Les bases du HTML</A> </ol> </body> </html> 4. liens vers une url On utilise la même balise que précédemment en insérant l adresse de l URL : <A HREF="Adresse ou URL">.. </A> <html> <head> <title>programme INF M01</title> </head> <body> <h1 align=center>programme INF M01</h1> <ol type=i> <li><a HREF="cours3_1.html#detail">Introduction sur Internet</A> <li><a HREF=" de Provence</A> </ol> </body> </html> 5. envoyer un On utilise la même balise que précédemment : <A HREF="Adresse ou URL">.. </A> On remplace adresse par l adresse précédée de «MAILTO :». Le logiciel de courrier (ex : Microsoft Outlook, Eudora) par défaut s ouvrira lors du clic sur le lien avec l adresse du destinataire dans le champ «To :». <body> <h1 align=center>programme INF M01</h1> <ol type=i> <li><a HREF="cours3_1.html#detail">Introduction sur Internet</A> <li><a HREF="a:\html1.html">Les bases du HTML</A> <li><a HREF="mailto:tournier@up.univ-aix.fr">Renseignement</A>

11 11 </ol> Pour ajouter un sujet automatiquement à l on modifie la balise de la manière suivante : <A HREF="mailto:tournier@up.univ-aix.fr?subject=cours">Renseignement</A> 6. incorporer des images Pour incorporer des images on utilise la balise IMG. Sa syntaxe de base est : <IMG SRC = "adresse de l image"> <html> <head> <title>programme INF M01</title> </head> <body> <IMG src="ex.gif"> <h1 align=center>programme INF M01</h1> <ol type=i> <li><a HREF="cours3_1.html#detail">Introduction sur Internet</A> <li><a HREF="mailto:tournier@up.univ-aix.fr">Renseignement</A> </ol> </body> </html> On peut préciser des options pour la balise : OPTION DEFINITION VALEUR COMMENTAIRE SRC Fichier source adresse ALIGN Alignement Left, Right, Center, Middle, Bottom ALT Légende de l'image «commentaire» BORDER Définit la bordure de l image 1, 2 En pixel HEIGHT Définit la hauteur 120, 15% En pixel ou % WIDTH Définit la largeur En pixel ou %

12 12 <TITLE>Programme INF M01</TITLE> <IMG SRC="ex.gif" ALIGN=LEFT BORDER=2 HEIGHT=30 WIDTH=30 HSPACE=10> <H1 ALIGN=CENTER>Programme INF M01</H1> <OL TYPE=I> <LI><A HREF="cours3_1.html#detail">Introduction sur Internet</A> <LI><A On peut faire d une image un lien hypertexte en ajoutant une balise <A> devant la définition de l'image. <html> <head> <title>programme INF M01</title> </head> <body> <A HREF="Pr.html"><IMG src="ex.gif" ALIGN="LEFT" BORDER="2" HEIGHT="30" WIDTH="30" HSPACE="10"></A> <h1 align=center>programme INF M01</h1> <ol type=i> <li><a HREF="cours3_1.html#detail">Introduction sur Internet</A> <li><a HREF="mailto:tournier@up.univ-aix.fr">Renseignement</A> </ol>