HTML - Canalblog
publicité
1 B_Gengou\HTML\Bases_html_261107 2 HTML body <html> <head> = Tête du document <title> = Titre de la page Web : apparaît en haut à gauche dans la barre de titre de votre navigateur Web Ma première page Web </title> Signifie que vous en avez fini avec le titre </head> Signifie que vous en avez fini avec l’en-tête de votre document <body> Ceci est le texte qui apparaîtra dans la fenêtre de votre écran. Oui cela paraît « simple », cela le deviendra également pour vous, si vous êtes attentive et attentif à ce qui suit ☺ </body> </html> B_Gengou\HTML\Bases_html_261107 3 HTML C'est un langage de description (HTML = HyperText Markup Langage) qui utilise des marqueurs et qui permet de faire de la navigation. Celui-ci n'est pas un langage de programmation, c'est un fichier texte qui contient des balises permettant de mettre en forme le texte, les images, … Ce langage permet de présenter des documents, ce qui actuellement est banal, mais ces documents seront lisibles sur tout navigateur (enfin presque), quel que soit le système ou l'ordinateur, c'est fondamental. Les pages HTML que vous aurez écrites pourront être lues par de nombreux systèmes. Après la parole, l'écriture, l'imprimerie, l'informatique permet un pas de plus : permettre à chacun de publier dans le monde entier ! Ce sont les pages « écrites » en HTML qui permettent de « surfer » sur le Web. Remarque : Il existe de plus en plus de méthodes pour éditer des codes sources automatiquement. Les avantages sont le confort et la rapidité, les inconvénients sont la dépendance et la difficulté d'exploiter toutes les possibilités du HTML. Vous allez apprendre à faire quelques pages à la main afin de comprendre les codes sources que fournissent les nombreux éditeurs HTML modernes (NVU, FrontPage, Dreamweaver, etc.) Ainsi vous pourrez prendre le relais quand ils ne seront plus capables d'atteindre vos ambitions. Pour créer des pages Web « artisanales » vous aurez besoin de deux choses : ☼ ☼ Un éditeur de texte (Bloc-notes, Notepad, EditPad,…) pour créer le code de la page Web. Un navigateur pour visualiser la page Web à l’écran. Compétences nécessaires : ☼ Savoir archiver c'est à dire organiser des dossiers et ranger des fichiers. Sur le bureau de votre ordinateur, créez un dossier qui se nommera « pages_web ». Dans celui-ci vous sauvegarderez dès à présent tous ce que vous ferez en HTML ☺ Dans le dossier « pages_web », créez quatre sous-dossiers que vous nommerez : « premier_dossier », « second_dossier », « troisieme_dossier », « images ». ☼ Accepter d'apprendre quelques « règles ». Entrons dans le vif du sujet : Un document HTML pour être lu sur (presque) tous les ordinateurs connectés à la toile (le Web) doit toujours commencer par ceci : <html> et s’achever par ceci </html> Chaque balise (ou tag), c’est ainsi que l’on nomme les commandes HTML, devra être ouverte et fermée de la sorte : <html> <head><title> Ceci est un « commentaire » qui sera affiché : il s’agit du titre qui apparaîtra dans la barre de titre du navigateur. </title></head> <body> !!!! Ouverture d’une balise = la fermer lorsque l’on en a fini avec elle !!!! </body> </html> * Une balise est une commande (un nom) encadrée par le caractère inférieur (<) et le caractère supérieur (>). B_Gengou\HTML\Bases_html_261107 4 Le document HTML minimum Voici vos premières balises ou tags : <html> Ceci est le début d'un document de type HTML. </html> Ceci est la fin d'un document de type HTML. <head> Ceci est le début de la zone d'en-tête. (Prologue au document proprement dit contenant des informations destinées au navigateur) </head> Ceci est la fin de la zone d'en-tête. <title> Ceci est le début du titre de la page. </title> Ceci est la fin du titre de la page. <body> Ceci est le début du document proprement dit. </body> Ceci est la fin du document proprement dit. ☼ Vous aurez remarqué qu'à chaque balise de début d'une action : <...>, correspond une balise de fin d’action : </...>. Votre premier document HTML Ouvrez l'éditeur de texte. Transposez les codes HTML suivants: B_Gengou\HTML\Bases_html_261107 5 Enregistrez le document avec l'extension « .htm » ou <.html> Ouvrez le navigateur. Affichez le document via le menu « Fichier/ Ouvrir » (File/Open file...) Admirez votre premier document HTML. Celui-ci est vide (pour le moment) mais tout à fait opérationnel ! Il faut maintenant lui fournir votre information à l'intérieur des balises <body>…</body> Remarquez que votre « title » est présent dans la fenêtre du navigateur (browser). ☼ Pour vos éventuelles modifications, il n'est pas nécessaire de rouvrir à chaque fois le navigateur. Retournez dans l'éditeur de texte (sans fermer le navigateur). • Modifiez les codes HTML. • Enregistrez le fichier. • Utilisez la commande « Actualiser la page courante », Reload », « Refresh », « Actualiser » de votre navigateur ou la touche « F5 » de votre clavier. B_Gengou\HTML\Bases_html_261107 6 ☼ Vous aurez remarqué (oui ?) que pour ouvrir une commande, il n’y a pas de barre oblique droite (slash), celle-ci est spécifique à la fin d’un ordre. Pour ouvrir ce sera toujours <…> la commande d’ouverture Pour fermer ce sera toujours </…> la commande de fermeture. Récapitulatif Vos documents HTML doivent comporter : Les marqueurs généraux L' en-tête Le corps du document <html>...</html> <head>....</head> <body>...</body> Voici le document de base qui montre comment sont imbriqués les contenants : <html> <head> <title> C'est le contenant de l'en-tête : le titre. </title> </head> <body> C'est le contenant du corps. C'est ici que vous écrirez. </body> </html> Remarque ☼ Apprenez dès à présent à user sans vergogne du « copier-coller » sinon, vous ferez sans doute des erreurs d’inattention et avec HTML le résultat ne se fait pas attendre C’est à dire ? C’est à dire que dans un fichier texte vous allez noter les balises standards d’un document HTML. Cela vous permettra par la suite de ne plus vous soucier de savoir si vous avez ou non, oublié de fermer un tag. Notez les balises incontournables dans un fichier texte que vous nommerez « balises.txt » <html> <head> <title> </title> </head> <body> </body> </html> B_Gengou\HTML\Bases_html_261107 7 Passons à l’action : première page HTML Ouvrez le programme « Bloc-notes » ou « Notepad ». Retranscrivez ce qui est dans l’encadré. <html> <head> <title>Tarentule, fait gaffe à tes poils, j’arrive !!! </title> </head> <body> La première page de : “votre prénom”. <b>Notez la date du jour, celle-ci sera en gras</b> </body> </html> Une fois la retranscription accomplie, enregistrez votre document sous ce nom : « premiere_page.htm » et rangez-le dans le dossier « pages_web\premier_dossier ». ☼ Vous venez de faire votre première page Web : qui à la base était du texte brut ☺ En le sauvegardant sous l’extension « .htm », vous avez changé votre texte brut (.txt) en texte mis en forme pour le Web. Explication La première balise (ou tag) de votre document HTML est <html> : cette balise dit à votre navigateur Web que c'est le début d'un document HTML. La dernière balise de votre document est </html> : cette balise dit à votre navigateur que c'est la fin de votre document HTML. Le texte entre le tag (ou balise) <head> et le tag </head> est l'information d'en-tête. Cette information d'en-tête ne sera pas visible dans la fenêtre de votre navigateur. Par contre le texte entre le tag <title> et le tag </title> est le titre de votre document. Le titre quant à lui est une information qui apparaîtra bien dans la barre de titre de votre navigateur. Le texte entre la balise <body> et la balise </body> est le texte qui sera visible dans votre navigateur, en fait 95 % de votre écran. Le texte entre la balise <b> et </b> sera visible dans une police grasse (le B venant de Bold en anglais, qui veut dire gras). ☼ Remarque : Les balises HTML peuvent indifféremment être écrites en majuscules ou minuscules. Dans la mesure du possible, prenez dès à présent la bonne habitude : éditez votre code en minuscules. Lorsque dans certains tutoriaux vous voyez les exemples de codes HTML en majuscules c'est uniquement pour vous en faciliter la lecture. B_Gengou\HTML\Bases_html_261107 8 Les « attributs » de vos balises. Les balises peuvent avoir des « attributs ». Ces derniers ont pour objectif de donner des informations complémentaires au sujet des éléments HTML qui composent votre page Web. Cette balise <body> définit l'élément qui compose le corps de votre page HTML. Si vous lui ajoutez un attribut « bgcolor », vous pourrez dire de la sorte à votre navigateur que vous désirez que votre page soit affichée avec une couleur de fond (rouge par exemple, qui en anglais sera « red »). Dans votre éditeur de texte retranscrivez le contenu de l’encadré que vous sauvegarderez dans « pages_web\premier_dossier », sous le nom : « test_fond_rouge.htm ». <html> <head> <title> Test fond de couleur rouge </title> </head> <body bgcolor="red"> C'est flashy non ??? </body> </html> Exercice A présent, changez la couleur du fond de cette page et mettez-la en bleu. Sauvegardez cette page dans « pages_web\premier_dossier » sous le nom « test_fond_bleu.htm ». ☼ Il y a deux méthodes pour signifier au navigateur Web les couleurs que l’on désire affecter au fond de page, aux polices, etc. La première (hasardeuse) est de l’écrire en toutes lettres et en anglais : blue pour bleu green pour vert black pour noir white pour blanc red pour rouge pink pour rose purple pour mauve yellow pour jaune orange ☺ orange La seconde sera de l’écrire en code hexadécimal. Vous n’aurez pas à apprendre ces codes, je vous les donne pour information car nous allons passer assez rapidement dans un éditeur de pages HTML qui fera cela pour vous. Code hexadécimal 00 33 66 99 CC FF B_Gengou\HTML\Bases_html_261107 9 Les couleurs sont formées à partir du mélange de trois couleurs : Rouge, Vert, Bleu (RVB en français et RGB en anglais). Chacune de ces 3 composantes est codée de plus en plus, sur 8 bits, ce qui donne 28 =256 valeurs possibles. Le nombre de mélanges, c'est à dire de couleurs, est donc de 256³ ce qui donne plus de 16 millions de couleurs. Dans la pratique, on trouve encore beaucoup de systèmes en mode 256 couleurs. Colorer Le fond Du texte Un tableau Une cellule <body bgcolor="#999999"> <font color="#FF0000">texte</font> <table bgcolor="#CCFFFF"> <td bgcolor="#CCFFCC"> Voici les codes de quelques couleurs basiques. Bleu Rouge Vert Jaune #0000FF #FF0000 #00FF00 #FFFF00 Blanc Gris clair Violet Noir #FFFFFF #C0C0C0 #8000FF #000000 Le texte Tout document HTML contiendra en majorité du texte. Voici comment l'agrémenter par quelques balises élémentaires. Gras [Bold] <b>...</b> <strong>...</strong> Début et fin de zone en gras Italique [Italic] <i>...</i> <em>...</em> Début et fin de zone en italique Taille de caractère [Font size] <font size="?">...</font> Début et fin de zone avec cette taille Couleur de caractère [Font color] <font color="#******">…</font> Début et fin d’une zone en couleur A la ligne [Line break] <br> Aller à la ligne Commentaires [Comments] <!-- *** --> Ne pas afficher Centrage Centrer [Center] <center>…</center> Ouvrez votre éditeur de texte. Retranscrivez ce qui suit et sauvegardez-le sous le nom « texte_mis_en_forme.htm ». B_Gengou\HTML\Bases_html_261107 1 0 Rangez ce document dans « premier_dossier ». <html> <head><title></title></head> <body>texte simple<br> <b>texte en gras</b><br> <strong>texte en gras</strong><br> <i>texte en italique</i><br> <em>texte en italique</em><br> <b><i>texte en gras et en italique</i></b><br> <font size=5>texte</font> <font color="#0000FF"> en bleu</font> <!--C'est fini--> </body> </html> ☼ Ouvrez votre page dans le navigateur. ☼ Quelques commentaires s'imposent : • Le texte affiché est sans balises. Il sera repris par le navigateur avec la police et la taille de caractère dans sa configuration par défaut. • Le navigateur affiche le texte que vous lui « dictez » en passant à la ligne lorsque celui-ci atteint le bord de la fenêtre. Pour le forcer à passer outre à cette règle de conduite et à faire un saut à la ligne quand vous le souhaitez, il faut une instruction particulière, il s’agit de : <br>. Cette balise représente une action ponctuelle et n'a donc pas besoin de balise de fin. • Le même navigateur ne tient compte que d'un seul espace entre les mots. Ainsi pour lui : <font size="5">texte</font> <font color="#0000FF">en bleu</font> est équivalent à : <font size="5">texte</font><font color="#0000FF">en bleu</font> B_Gengou\HTML\Bases_html_261107 1 1 • Il n'est pas rare d'utiliser plusieurs balises pour un même élément de texte. Il faut veiller à bien les imbriquer. Ainsi <b><i>...</i></b> est correct et <b><i>...</b></i> risque de vous créer des ennuis. • La taille dans <font size="?"> peut être indiquée de deux façons : 1. 2. • avec un nombre de 1 à 7. La valeur par défaut étant 3. de façon relative par rapport à la valeur par défaut (ici 0). Soit -3 -2 -1 et 0 +1 +2 +3. Pour les puristes, les balises <i>, <em>, <b> et <strong> ne sont pas totalement équivalentes. Vous verrez en poussant plus avant votre étude du langage HTML que <em> et <strong> appartiennent aux définitions structurales (style logique) dont l'apparence dépend des options reprises dans la configuration du navigateur. Les balises <b> et <i> appartiennent aux formats de présentation (style physique) dont l'apparence dépend de la volonté de l'auteur-e. Du texte encore… ☼ Des balises de texte, il y en a une volée ☺ Selon les versions du HTML et l'apparition des éditeurs HTML évolués, certains tags tombent peu à peu en désuétude. Voici quelques balises qui compléteront votre panoplie actuelle. ☼ Le tag <blockquote>...</blockquote> introduit une citation. Son utilité serait douteuse si le texte de cette citation n'était introduit avec un léger retrait à gauche et à droite. Ce qui est bien pratique pour agrémenter la présentation. Voici un texte normal sans blockquote. Voici un texte avec blockquote. Remarquez le retrait. ☼ Vous savez déjà que les navigateurs ne reconnaissent qu'un espace entre les mots. Ce qui peut se révéler gênant dans certaines situations. La balise <pre>...</pre> affiche un texte dit préformaté. Le navigateur prend ainsi en compte tous les espaces et sauts de ligne définis à l'écran. Avant que les tableaux ne soient reconnus par les navigateurs, les pionnières et pionniers du HTML devaient employer ce tag pour faire des tableaux Pratique B_Gengou\HTML\Bases_html_261107 1 2 ☼ Le tag <address>...</address> pour indiquer une adresse (généralement en fin de document). Voici mon adresse avec cette balise : Béatrice R.G. 46, rue de la Camisole 0000 Bruxelles ☼ La balise <u>...</u> souligne le texte. Comme, par convention, les éléments servant d'hyperliens sont soulignés, on évitera de souligner des éléments de texte pour leur donner de l'importance. Il est préférable de les mettre : en gras, dans un autre format de police ou une couleur différente. Il ne faut donc pas en abuser. ☼ Netscape 3.0 et plus (Particularité Netscape uniquement, pas Microsoft Explorer) permet d'afficher un texte clignotant via la balise <blink>...</blink>. Ce tag est rapidement agaçant. On lui préfèrera une image animée qui peut être « débranchée » après quelques animations. ☼ Les tags <sub>...</sub> et <sup>...</sup> placent le texte respectivement en indice et en exposant. Ainsi, <sub>escalier</sub>escalier<sup>escalier</sup> aura comme résultat : escalierescalier escalier ☼ Pour aligner du texte, on a utilisé l'attribut align ou le tag <center>. Il existe une balise permettant d'aligner différents éléments, c'est le tag : <div align="left">...</div> <div align="center">...</div> <div align="right">...</div> B_Gengou\HTML\Bases_html_261107 1 3 Les titres et les listes Tout document d'une certaine consistance se doit de présenter, par exemple dans la table des matières, les différents niveaux de son exposé. HTML a disposé dès son origine d'outils spécialement conçus à cet effet. En-tête [Heading] <hn>…</hn> Affiche un en-tête de niveau n et avec n=1 à 6 saute une ligne <ul>…</ul> Affiche le texte sous forme d'une liste non ordonnée. Liste ordonnée [Ordered list] <ol>…</ol> Affiche le texte sous forme d'une liste ordonnée. Elément de liste [List items] <li> Voici un élément de la liste Paragraphe [Paragraph] <p>…</p> Saut de ligne, insère une ligne vierge et commence un paragraphe Liste non ordonnée [Bullet list] Ouvrez votre éditeur de texte, retranscrivez ce qui suit. <h1>Les mois du printemps</h1> <ul><li>avril <li>mai <li>juin</ul> <p> <h3>Les mois d'automne</h3> <ol><li>octobre <li>novembre <li>d&eacute;cembre</ol> Ouvrez votre browser, voici le résultat attendu. ☼ Quelques B_Gengou\HTML\Bases_html_261107 commentaires 1 4 s'imposent : 1. &eacute; est l'un de ces caractères spéciaux utilisés pour représenter le é. Les éditeurs HTML vous déchargeront de cette corvée. 2. Les paragraphes et les en-têtes peuvent s'aligner à gauche, au centre ou à droite. <h1 align="left">…</h1> <p align="left">…</p> <h1 align="center">…</h1> <p align="center">…</p> <h1 align="right">…</h1> <p align="right">…</p> 3. Les listes peuvent s'imbriquer: <h4>Les 12 mois</h4> <ul><li>Les mois du printemps <ol><li>avril </ol></ul> Les liens HTML (HyperText Markup Language) est un langage hypertexte (et hypergraphique) qui vous permet en cliquant sur un mot, généralement souligné (ou une image) de vous « transporter » : o o o vers un autre site stocké sur le Web. vers un autre fichier HTML situé sur votre ordinateur. vers un autre endroit du document. Ce système d'hypertexte vous est peut-être familier car il est également utilisé par les fichiers d'aide de Windows. Ce sont ces liens qui vous permettent de surfer de page en page et qui constituent l'essence des documents HTML. La syntaxe de ces liens entre plusieurs pages, est simple mais entraînera de nombreux commentaires : <a href="URL ou Adresse">...</a> ☼ Lien externe - Lien absolu Tout ordinateur situé sur le réseau Internet possède une adresse ou une URL (Universal Ressource Locator). HTML permet d'accéder à toutes les machines et toutes les ressources du Net (pour autant que sa ou son propriétaire ait mis le contenu en partage). Pour peu qu'Internet vous soit un peu familier, ce sont des adresses de type : - http://serveur/chemin.../fichier - ftp://serveur/chemin.../fichier - mailto:utilisateur@hôte B_Gengou\HTML\Bases_html_261107 1 5 Si vous désirez faire un lien sur votre page qui envoie votre visiteur vers un autre site, il faut que vous indiquiez l’adresse URL et le nom de ce site dans le code de votre page. 1. Il faut connaître tous les éléments : Le type de protocole « http://.. » ou « ftp://.. » et pour des références locales : « file://.. » - Le nom de l'ordinateur pour des liens locaux sur le serveur. - Le chemin complet ainsi que le nom de fichier. 2. On confie le tout a l'attribut « href » du tag <a> : Syntaxe : <a href="Protocole Serveur Chemin Fichier"> Texte du lien</a> Exemple : <a href="http://www.lesoir.be"> Site Web du journal « Le Soir »</a> Dans « premier_dossier », créez cette page et nommez-la : « liens_globaux.htm ». Pointez votre souris sur les liens sans cliquer dessus et regardez la barre d'état. Une fois l’étape précédente réalisée, cliquez sur les liens pour vérifier s’ils sont bien opérationnels. <html><head><title>Site Web du journal « Le Soir » et d'ATTAC</title></head> <body>Voici un site pour des nouvelles fraîches.<br> Il s'agit du <a href="http://www.lesoir.be"> Site Web du journal « Le Soir »</a> <br><br>Si vous préférez des nouvelles internationales voici une organisation citoyenne <br>allez plutôt voir du côté du <a href="http://www.attac.org/indexfla.htm"> site Web d'ATTAC</a> </body></html> ☼ Lien local L'organisation classique d'un site Web consiste à regrouper l'ensemble des éléments de celui-ci (fichiers .htm, images, ...) dans un même répertoire. Vous pourrez ainsi « transporter » aisément votre site pour le visionner sur un autre ordinateur et, but final, le charger sur un serveur distant qui fait office d’hébergeur de sites. Cette façon de procéder est la plus aisée et vous évitera pas mal de problèmes. L'adresse du lien sera alors tout simplement : fichier.htm ☼ Lien mixte C’est un lien vers un fichier situé à un autre endroit de votre ordinateur (et donc non situé dans le répertoire de votre site). Attention ! Il est peu probable que le serveur Web qui hébergera votre site, possède la même arborescence que votre disque local. L'adresse prendra la forme : - file:///lecteur:/répertoire/fichier.htm (en adressage absolu). - ../../../fichier.htm (en adressage relatif). B_Gengou\HTML\Bases_html_261107 1 6 ☼ Adressage relatif C'est atteindre un fichier situé dans un autre dossier, sur la même machine. 1. On réalise l'arborescence. Au risque de « radoter » je tiens à redire qu'il est très important d'archiver vos documents de façon structurée. 2. On indique le chemin par rapport au document utilisé. Exemple : vous avez créé (oui ?) au début de cette session cinq dossiers. Un dossier principal nommé : « pages_web », dans celui-ci vous devriez avoir les quatre sousdossiers suivants : « premier_dossier », « second_dossier », « troisieme_dossier », « images ». Voici ce que cela donne : Arborescence de votre site B_Gengou\HTML\Bases_html_261107 1 7 Expérimentez ceci : Dans l'éditeur de texte, créez deux fichiers « .htm » Fichier 1 : « doc1_les_liens.htm » <a href=“doc2_les_liens.htm”>Aller vers le document 2</a> Fichier 2 : « doc2_les_liens.htm » <a href=“doc1_les_liens.htm”>Retour au document 1</a> Sauvez ces deux fichiers dans le même répertoire : « second_dossier ». Le browser affichera: Suivant l’explication donnée plus haut de quel type de lien s’agit-il ? B_Gengou\HTML\Bases_html_261107 1 8 ☼ Des liens peuvent aussi pointer vers un endroit précis du même document ou d'un autre fichier. C'est ce qu'on appelle les « ancres », « ancrages » ou « pointeurs » [Anchor]. Point d'ancrage <a name="***">...</a> Ceci est une cible Lien vers une ancre dans la même page <a href="#***">...</a> Lien vers la cible *** dans la même page Lien vers une ancre dans une autre page <a href="url#***">...</a> Lien vers la cible *** dans une autre page A titre d'illustration, ci-dessous une page HTML contenant quelques ancres. Le mot « Sommaire : » du début de page a été défini comme point d'ancrage. <a name="sommaire">Sommaire</a> Le code du lien dans la page sera : <a href="#sommaire">Retour au sommaire</a> <html><head><title>Internet dans l'entreprise</title></head><body bgcolor="#FFFFFF" text="#000000"><p align="center"><a name="sommaire">Sommaire :</a><br> <a href="#entreprises">1- Quels avantages offre Internet</a> </p><p align="center"><a href="#internet">2- Internet - Un r&eacute;seau pour les entreprises ?</a></p><p align="center"><a href="#pourquoi">3- Pourquoi les entreprises utilisent-elles Internet ?</a></p><p align="center"><a href="#tendances">4- Tendances du commerce sur Internet</a></p><p align="center"><a href="#perspectives">5Perspectives</a></p><p><b>Internet dans l'entreprise. <br> Donn&eacute;es - Faits Tendances </b><br> <br><a name="entreprises">1. Quels avantages offre Internet ?</a></p><p>Les entreprises sont accessibles 24h sur 24. C'est &eacute;galement le cas des concurrents, des fournisseurs et surtout des clients potentiels.<br> On y trouve les informations dont on a besoin.<br> <br> Les courriers et les t&eacute;l&eacute;copies font gagner du temps et de l'argent parce que les informations sont accessibles &agrave; tout moment.<br> Les petites entreprises sont &eacute;galement en ligne. Ainsi la pr&eacute;sence sur le r&eacute;seau est-elle une r&eacute;alit&eacute; pour un nombre toujours croissant de soci&eacute;t&eacute;s, et ce dans presque tous les secteurs.<br> <br> Les transactions &eacute;lectroniques seront bient&ocirc;t directes et enti&egrave;rement s&eacute;curis&eacute;es.<br> <b>Conclusion :</b> Internet peut nous permettre de d&eacute;velopper notre chiffre d'affaires et de renforcer notre r&eacute;seau de clients et de partenaires.</p><a href="#sommaire"><font size="-6" face="Verdana">Retour au sommaire</font></a> <p> <a name="internet">2. Internet - Un r&eacute;seau pour les entreprises ?</a> </p><p>&Agrave; l'origine, Internet &eacute;tait un r&eacute;seau de sp&eacute;cialistes, absolument pas destin&eacute; &agrave; un usage priv&eacute; ni commercial.<br> Aujourd'hui, Internet est un r&eacute;seau ouvert, o&ugrave; chacun peut trouver des informations, mais aussi diffuser ses propres donn&eacute;es.<br> Internet se d&eacute;veloppe de jour en jour et sa croissance semble illimit&eacute;e.<br> <br> Aussi observe-t-on de temps en temps des goulets d'&eacute;tranglement. Les capacit&eacute;s du r&eacute;seau sont co&ucirc;teuses, mais sont sans cesse &eacute;largies pour r&eacute;duire au minimum les temps d'acc&egrave;s.<br> <br> <b>Conclusion :</b> Internet est devenu un moyen de communication &agrave; la fois au sein de l'entreprise et avec les autres entreprises.</p><a href="#sommaire"><font size="-6" face="Verdana">Retour au sommaire</font></a></body></html> B_Gengou\HTML\Bases_html_261107 1 9 ☼ Vous remarquerez par ailleurs que des ancres ont également été posées sur les différents points du sommaire, jetez un œil attentif aux codes correspondants. ☼ Plusieurs liens à l'intérieur d'un même document supposent que ce document présente une certaine longueur sinon une longueur certaine (temps de chargement assez long). Préférez à cette technique le découpage d'un longue page en un ensemble de plusieurs pages de dimension plus réduite. B_Gengou\HTML\Bases_html_261107 2 0 Les images GIF ? PNG ? JPEG ? Avant de passer aux balises, il faut savoir ce qui suit. ☼ Les trois formats d'image reconnus sur le Web, sont les formats « GIF », « PNG » et « JPEG ». Pour le format GIF (maximum 256 couleurs), soyez attentive et attentif à la caractéristique « entrelacé » qui permet de charger progressivement l'image lors de l'ouverture de la page. Ces trois formats donnent des résultats assez équivalents bien que « JPG ou JPEG» soit plutôt indiqué pour le rendu des images avec des tons nuancés ou dégradés (les photos). ☼ L'ennemi sur le Web : le poids des images. Plus l'image sera lourde, plus le temps de chargement sera long... au risque de décourager votre public. Si cela est possible (sans en altérer le rendu perceptible) optez pour une image en définition moyenne ou basse cela pourrait faire l'affaire dans certains cas. La seconde solution serait de présenter une petite image (vignette) indiquant un lien vers l'image complète. ☼ Il n'est pas inutile de prévoir dans votre panoplie de créatrice et créateur de sites Web, un logiciel de retouche d'images. ☼ N’hésitez pas à vous servir dans les banques d’images en ligne : ces images sauf mention contraire sur le site sont gratuites et libres de droits. L’intérêt ? Faire dans vos pages des liens qui pointent vers le site en question plutôt que vers l’un de vos dossiers. Point + : gain d’espace disque (dur), vous ne devez pas copier ces images dans vos dossiers. Points - : 1 - le chargement de vos pages peut en être ralenti. 2 - les liens peuvent être brisés si les responsables du site renomment les images ou les changent d’adresse (URL) : ce qui vous occasionnera un travail supplémentaire. Il faudra vérifier régulièrement que les liens vers ces images externes (à votre site) ne soient pas « brisés ». ☼ Le code HTML est : <img src="Adresse de l'image"> B_Gengou\HTML\Bases_html_261107 Affiche l'image qui se trouve à l'adresse... 2 1 La balise image possède de nombreux attributs. Texte alternatif alt="****" Pour les navigateurs n'ayant pas l'option « image » activée Dimensions width="x" height="x" Hauteur et largeur (en pixels) Bordure border="?" en pixels Alignement align="top" align="middle" align="bottom" align="left" align="right" Aligne Aligne Aligne Aligne Aligne l’image l’image l’image l’image l’image en haut au milieu en bas à gauche à droite Commentaires : En HTML, l'image ne fait pas partie de votre document. Le navigateur va la chercher à l'adresse indiquée. Généralement, on place les images dans le même répertoire que les pages HTML. En conséquence logique de ceci, le fait d'utiliser la même image à plusieurs reprises dans un fichier HTML ne modifie en rien sa taille. Prévoir un texte « alt » (texte de remplacement) pour les navigateurs n'ayant pas l'option image activée. Cela permet de faire découvrir votre œuvre malgré l’absence d’images. L'attribut « align » Cet attribut positionne l'image par rapport au texte. <img src="zzzz.gif" align="top"> <img src="zzzz.gif" align="center"> <img src="zzzz.gif" align="bottom"> Positionne votre texte au dessus de votre image. Positionne votre texte autour de votre image. Positionne votre texte en dessous de votre image. Lien sur image Dans ce type de lien, en cliquant sur l'image d’un fichier Web vous ouvrirez un second fichier. Les balises sont de type : <a href="modele.htm"><img src="../images/papillon.gif"></a> B_Gengou\HTML\Bases_html_261107 2 2 Les séparateurs Les navigateurs intègrent un outil de mise en forme intéressant pour clarifier la présentation de votre texte : la ligne horizontale. En voici la syntaxe : Ligne horizontale [Horizontal Rule] <hr> Insère une ligne horizontale Ce tag fort simple, nous permettra de comprendre un peu mieux le fonctionnement du navigateur. D'abord, vous avez déjà découvert au fil de vos erreurs qu'il est plutôt gentil car il s'efforce toujours d'afficher quelque chose. Ensuite, il vous ménage le travail en prenant à sa charge des valeurs par défaut d'un certain nombre d'attributs. Dans le cas présent, les valeurs par défaut de la balise <HR> sont : une épaisseur de trait de 2 pixels, un alignement centré et une largeur de 100% de la fenêtre. Vous pouvez très bien modifier au gré de votre fantaisie les valeurs de ces différents attributs. Epaisseur Largeur <hr size="?"> < hr width="?"> < hr width="%"> Alignement < hr align="left"> < hr align="right"> < hr align="center"> Il est donc tout à fait équivalent d'écrire: • < hr> ou • < hr size="2" align="center" width="100%"> B_Gengou\HTML\Bases_html_261107 en pixels en pixels en % de la fenêtre gauche droite centré 2 3 Exercice Avec l'éditeur de texte créez le fichier ci- dessous, placez-le dans « troisieme_dossier » sous le nom : « separateurs.htm » <html> <head><title> Les séparateurs </title><head> <body><h3 align="center">Malvira</h3> <hr color="#0000FF" align="center" size="12" width="65%"> </body> </html Commentaires o On préférera spécifier la largeur en « % » de la fenêtre plutôt qu'en pixels car l'affichage s'adaptera ainsi à toutes les tailles et résolutions d'écran. o Vous pourriez préférer l'usage d'images comme séparateur pour personnaliser votre site. B_Gengou\HTML\Bases_html_261107 2 4 Les arrière-plans Le langage HTML permet d'agrémenter la présentation du document d'un arrière-plan [background] coloré ou composé d'une image. La balise pour cet effet : Couleur d'arrière-plan <body bgcolor="#******"> un essai... <html> <head> <title>Les arrière-plans </title></head> <body bgcolor="#8E236B"><font color="#FFFFFF"> <b>Bonjour !!!</b><br> <h3>BONJOUR !!!!</h3></font> </body> </html> ☼ Des balises sont également prévues pour modifier les couleurs utilisées par défaut par le navigateur pour le texte et les liens. Couleur de texte Couleur de lien Lien visité Lien actif B_Gengou\HTML\Bases_html_261107 <body text="#******"> <body link="#******"> <body vlink="#******"> <body alink="#******"> 2 5 Vous pourriez aussi prévoir un fond en image. Cette image (petite de préférence) est affichée en mosaïque par le browser. Attention aux raccords, comme lorsque l’on pose du papier peint. Texture d'arrière-plan <body background="Adresse de l’image"> Les tableaux En HTML, les tableaux servent non seulement à aligner des chiffres mais surtout à placer des éléments à l'emplacement exact que vous souhaitez. L'usage des tableaux est donc TRÈS fréquent (voire incontournable). Un tableau est composé de lignes et de colonnes qui forment les cellules du tableau. Les balises de base sont donc Définition du tableau Définition d'une ligne Définition d'une cellule <table>…</table> [Table] [Table Row] <tr>…</tr> [Table Data] <td>…</td> Début et fin de tableau Début et fin de ligne Début et fin de cellule Un tableau à deux lignes et deux colonnes, et donc à quatre cellules se représente comme suit : <html> <head> <title>Les tableaux</title></head> <body> <table> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </table> </body> </html> B_Gengou\HTML\Bases_html_261107 2 6 Si vous souhaitez y adjoindre des bordures : Bordure de cadre [Border] <table border="5">…</tableau> <html> <head> <title>Les tableaux : bordures </title></head> <body> <table border="5"> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </table> </body> </html> ☼ Il y a encore trois éléments définis par défaut (mais modifiables). L'espace entre les cellules ou l'épaisseur des lignes du quadrillage <table cellspacing="?"> L'enrobage des cellules ou l'espace entre le bord et le contenu <table cellpadding="?"> La largeur de la table B_Gengou\HTML\Bases_html_261107 <table width="?"> <table width="%"> 2 7 Construisez ce qui suit : <html><head><title> Les tableaux : espacement des cellules </title></head> <body> <table border="5" cellspacing="10"> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </table> </body> </html> <html><head><title> Les tableaux : cellpadding </title></head> <body> <table border="5" cellpadding="10"> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </table> </body> </html> Les cellules des tableaux B_Gengou\HTML\Bases_html_261107 2 8 Nous n’en avons pas fini avec les tableaux. Penchons-nous à présent sur les cellules de ces tableaux. ☼ Les cellules peuvent contenir tous les éléments HTML déjà passés en revue soit : ● ● ● ● ● du texte des images des liens des arrière-plans et même des tableaux (que l’on appelle tables ou tableaux imbriqués) ☼ Bien que l'allure de votre tableau soit déjà déterminée, chaque cellule est en quelque sorte un petit univers à part qui a ses propres spécifications. Découvrez les balises. Largeur d'une cellule <td width="?"> en pixels <td width="%"> en pourcentage Fusion de lignes <td rowspan="?"> Fusion de colonnes <td colspan="?"> ☼ Découvrez ceci par la pratique : retranscrivez et testez chaque exemple présenté. Pour avoir un tableau centré qui occupe 60% de la fenêtre avec sur une ligne, trois colonnes égales. <html><head><title> Les cellules - 1 </title></head> <body> <center><table width="60%" border="5"> <tr> <td>cellule1</td> <td>cel. 2</td> <td>3</td> </tr> </table></center> </body> </html> Le résultat n’est pas brillant B_Gengou\HTML\Bases_html_261107 2 9 Essayez avec la balise de largeur de la cellule « td width » <html><head><title> Les cellules - 2 </title></head> <body> <center><table width="60%" border="5"> <tr> <td width="33%">cellule1</td> <td width="33%">cel. 2</td> <td width="34%">3</td> </tr> </table></center> </body></html> Le résultat est nettement plus probant ☺ Voici le même tableau mais avec trois lignes. <html><head><title> Les cellules - 3 </head></title> <body><center><table width="60%" border="5"> <tr><td width="33%">cellule1</td><td width="33%">cel. 2</td> <td width="34%">3</td></TR> <tr><td width="33%">cellule1</td><td width="33%">cel. 2</td> <td width="34%">3</td></tr> <tr><td width="33%">cellule1</td><td width="33%">cel. 2</td> <td width="34%">3</td></tr> </table></center> </body></html> B_Gengou\HTML\Bases_html_261107 3 0 Dans cet exercice, je souhaite que la première colonne prenne toute la hauteur de la colonne. La première cellule doit donc déborder sur 2 cellules verticales <html><head><title> Les cellules - 4 </title></head> <body><center> <table width="60%" border="5"> <tr><td width="33%" rowspan=2>cellule 1</td> <td width="33%">cel 2</td> <td width="34%">3</td></tr> <tr> <td width="33%">cel 2</td> <td width="34%">3</td> </tr> </table></center> </body></html> Mettons de l’ordre dans les cellules. Ligne de tableau <tr align="left" "center" "right"> <tr valign="top" "middle" "bottom"> Cellule de tableau <td align="left" "center" "right"> <td valign="top" "middle" "bottom"> horizontalement verticalement horizontalement verticalement Créez le tableau suivant : <html><head><title> Les cellules - 5 </title></head> <body> <center><table width="60%" border="5"> <tr><td colspan="3">cellule1</td></tr> <tr> <td width="33%">cellule1</td> <td width="33%">cel. 2</td> <td width="34%">3</td> </tr> </table></center> </body> </html> B_Gengou\HTML\Bases_html_261107 3 1 quelques aménagements plus tard... <html><head><title> Les cellules - 6 </title></head> <body> <center><table width="60%" border="5"> <tr><td colspan="3" align="center">Tarif au ../../..</td></tr> <tr> <td width="33%">Article 669</td> <td width="33%">Ref 007</td> <td width="34%" align="right">30 Є </td> </tr> </table></center> </body> </html> ☼ Pour terminer sur ce sujet, il est aussi possible de changer la couleur de la cellule. Couleur de la cellule <td bgcolor="#******"> Le dernier exemple pourrait devenir : <tr><td colspan="3" align="center" bgcolor="#8000FF"> <font color="#FFFFFF">Tarif au ../../..</font></td></tr> B_Gengou\HTML\Bases_html_261107 3 2 Les frames Quoi de plus simple qu’un site avec cadres ? Un site sans cadres ☺ car tous les navigateurs n'ont pas la possibilité de les afficher. Pour diviser l'écran en plusieurs fenêtres, les balises sont peu nombreuses : Zone avec des fenêtres <frameset> </frameset> Agencement des fenêtres <frameset rows="..."> <frameset cols="..."> Début de zone avec des fenêtres Fin de zone avec des fenêtres Fenêtres horizontales ☼ Il est impératif de travailler avec des exemples ainsi, pour obtenir cet agencement : Il faut employer les balises suivantes : <html> <head></head> <frameset rows="30%,70%"> <frame> <frame> </frameset> </html> B_Gengou\HTML\Bases_html_261107 Attention! <frameset></frameset> remplace <body></body> 3 3 L'attribut rows="hauteur1,hauteur2,...,hauteurN" définit la hauteur des différentes fenêtres en cas de division horizontale. La hauteur s'exprime en pixels ou en %. Dans le cas d’utilisation des pourcentages, on veillera à ce que le total soit égal à 100%. ☼ Le même pour un agencement vertical <html> <head></head> <frameset cols="30%,70%"> <frame> <frame> </frameset> </html> L'attribut cols="largeur1,largeur2,...,largeurN" définit la largeur des différentes fenêtres en cas de division verticale. La hauteur s'exprime en pixels ou en %. Dans ce cas, on veillera également à ce que le total soit égal à 100%. B_Gengou\HTML\Bases_html_261107 3 4 ☼ On peut mélanger les deux : <html> <head></head> <frameset rows="30%,70%"> <frame> <frameset cols="30%,70%"> <frame> <frame> </frameset> </frameset> </html> Pour l'instant, les cadres sont vides. Vous allez donc leur donner du contenu via les attributs de la balise <frame>. src="URL" B_Gengou\HTML\Bases_html_261107 adresse du document à afficher dans la fenêtre 3 5 Construisez 3 fichiers HTML élémentaires que vous placerez dans le même répertoire que le fichier des cadres. a.htm b.htm c.htm <html><head> <title>Cadre A</title> </head><body> <h4>A</h4> </body></html> <html><head> <title>Cadre B</title> </head><body> <h1>B</h1> </body></html> <html><head> <title>Cadre C</title> </head><body> <h1>C</h1> </body></html> Reprenez le code de l’exercice de cadres de la page précédente et complétez-le. <html> <head></head> <frameset rows="30%,70%"> <frame src="a.htm"> <frameset cols="30%,70%"> <frame src="b.htm"> <frame src="c.htm"> </frameset> </frameset> </html> B_Gengou\HTML\Bases_html_261107 3 6 Les ascenseurs (barres de défilement), apparaissent automatiquement via l'attribut de la balise <frame>. Vous pouvez indiquer si la fenêtre doit ou non posséder une barre de défilement. scrolling="yes/no/auto" Un autre attribut de cette balise <frame> est name ="nom". "name" indique le nom de la fenêtre de telle sorte que ce cadre puisse être utilisé comme cible d'un lien hypertexte. Ainsi, pour faire un lien sur « B » pour afficher le contenu de ce lien dans « C ». Le fichier de cadres devient : <html> <head></head> <frameset rows="30%,70%"> <frame src="a.htm"> <frameset cols="30%,70%"> <frame src="b.htm"> <frame src="c.htm" name="fenetre_c"> </frameset> </frameset> </html> Mettez un lien vers « a.htm » dans le fichier « b.htm » en désignant comme cible le cadre C. <html> <body><a href="a.htm" target="fenetre_c"> <h1>B</h1></a></body></<html> B_Gengou\HTML\Bases_html_261107 3 7 L'attribut "target" peut aussi prendre certaines valeurs prédéfinies : « _blank » qui indique au navigateur qu'il doit créer une nouvelle fenêtre afin d'y afficher le fichier. Dans ce cas, ouvrez une nouvelle fenêtre dans votre navigateur. «_self » qui indique que le fichier sera chargé dans la même fenêtre que celle dans laquelle se trouve le lien. «_top » qui implique l'affichage du fichier sur toute la surface de la fenêtre du navigateur. Vérifiez toujours vos différents liens avec des cadres, vous éviterez ainsi que votre site ne devienne rapidement une "soupe". ☼ Par défaut, les cadres sont séparés par des bordures. Il est possible de supprimer ces bordures mais les attributs à utiliser diffèrent selon Netscape ou Internet Explorer. Netscape utilise l'attribut border="0" et Explorer, les attributs frameborder="no" et “framespacing=0” (pour enlever l'espace entre les cadres). Le tout cohabite sans problème. La balise devient alors par exemple : <frameset cols="30%,70%" border="0" frameborder="no" framespacing="0"> ☼ Pour terminer, la balise « noframes » : <noframes>...</noframes> qui est utilisée pour indiquer le texte que doivent afficher les navigateurs qui ne gèrent pas les cadres. Il est même indiqué de prévoir une page sans fenêtres pour que ces visiteuses et visiteurs puissent tout de même profiter de votre site. B_Gengou\HTML\Bases_html_261107
