Fiche 6 - Le langage HTML

Transcription

1 Fiche 6 - Le langage HTML I Introduction HTML est un langage universel utilisé pour communiquer sur le Web. C est un langage dit de «marquage» (de «structuration» ou de «balisage») qui permet d écrire un document avec des balises de formatage. Ces balises indiquent la façon dont doit être présenté le document et les liens établis avec d autres documents. Vos informations seront ainsi transportées sur cette gigantesque toile de réseaux interconnectés qu'est Internet, pour aboutir sur n importe quel ordinateur grâce à un programme appelé. ou.. Tout ceci grâce au protocole http qui permet d accéder via le réseau à des documents repérés par une adresse unique (appelée URL). Ce programme vous permet de surfer sur le Net et d'afficher sur votre écran les «pages» qu'il a interceptées. Il y a beaucoup de marques et de types de navigateurs différents. Des plus simples au plus sophistiqués. Les plus connus sont Mozilla Firefox ainsi que Internet Explorer de Microsoft mais il en existe beaucoup d'autres. Citer ici d autres navigateurs que vous connaissez ou utilisez : Chaque navigateur a sa propre façon de travailler. A la différence d un traitement de texte qui restitue exactement votre document sur une feuille de papier avec votre police de caractères et votre mise en page, vous ne saurez jamais exactement ce que le navigateur d un internaute affichera sur son écran. En HTML, vous n'avez pas la maîtrise totale de votre document. Pour transiter le plus rapidement possible sur le réseau (notion de bande passante), un format de texte très compact mais aussi (par conséquence) peu sophistiqué a été adopté. C'est un format de texte réduit à sa plus simple expression. Et de plus ce format ASCII a été amputé d'un bit (7 bits au lieu de 8)! Vous serez donc privés de certains caractères spéciaux comme le «é» pour lesquels il faudra passer par des codes particuliers. C est le prix à payer pour que le langage universel Html s'adapte à toutes les plate-formes (Windows, Macintoch, smartphone ) En plus du texte publié sur vote site, il vous faudra inclure des instructions pour le navigateur chargé de le lire. Ces instructions seront différenciées de votre texte par les signes < et >. Par exemple <html> Ces "instructions s'appellent des tags ou des balises. Quand vous écrirez les balises de votre page HTML, il faudra garder à l'esprit : - qu'une balise marque une action pour le navigateur (ce qu'il doit faire...). - que les attributs précisent les modalités de cette action (comment il doit le faire...). Il existe d autres langages et des codes plus poussés (jsp, php, javascript ) qui permettent d accéder à des fonctions plus évoluées mais dont la complexité ne nous permet pas d envisager leur étude dans le cadre de l horaire réduit d une séance de l option ISN. OPTION ISN Lycée La Trinité - Fiche 6 Langage_HTML_Elèves Page 1

2 II LES OUTILS NECESSAIRES Pour réaliser la programmation d une page en HTML, un simple éditeur de texte (wordpad, bloc-notes) est suffisant. Le ficher, enregistré au format.html pourra alors être lu par n importe quel navigateur. L accès à internet ne sera absolument pas nécessaire pour pouvoir visualiser votre page. Il n est pas nécessaire, pour l instant, de travailler avec des logiciels spécialisés même si, nous le verrons plus loin, leur utilisation nous simplifie grandement la tâche. III Création d une page HTML par programmation 1 Prise en main Voici nos 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, soit <...>, correspond (en toute logique) une balise de fin d'une action </...>. - Vous noterez aussi que les balises ne sont pas sensibles aux majuscules ou minuscules. Il est donc équivalent d'écrire <HTML>, <html>, <Html>, etc. -Pour une meilleure lisibilité et pouvoir reprendre plus facilement un code, il peut être utile d incrémenter l écriture des différents blocs. 2 Première étape Ecriture d un premier document Html: - Ouvrir l'éditeur de texte (bloc-notes) dans le dossier Démarrer/Programmes/Accessoires - Ecrire les codes Html suivants: <HTML> <HEAD> <TITLE>OPTION ISN Lycée La Trinité</TITLE> </HEAD> <BODY> </BODY> </HTML> - Enregistrer le document avec l'extension.html ou.htm. OPTION ISN Lycée La Trinité - Fiche 6 Langage_HTML_Elèves Page 2

3 - Ouvrir le navigateur. - Afficher le document via le menu File/Open file... - Et voilà votre premier (pour certains peut-être) document Html. Celui-ci est vide (et c'est normal) mais tout à fait opérationnel cependant. Il faudra maintenant lui fournir du contenu à l'intérieur des balises <BODY></BODY>. Remarquez que votre "TITLE" est présent dans la fenêtre de l explorateur. Pour vos éventuelles modifications, il n'est pas nécessaire de rouvrir à chaque fois le navigateur. Retourner dans l'éditeur de texte (sans fermer le navigateur). Modifier les codes Html (changer le titre en BIENVENUE à l option ISN Lycée La Trinité) Enregistrer le fichier. Utiliser la commande «rafraichir» du navigateur accessible notamment avec la touche F5 3 Le texte Tout document Html contiendra en majorité du texte. Voyons comment l'agrémenter par quelques balises élémentaires. Gras [Bold] ... ou Début et fin de zone en gras ... Italique [Italic] ... ou Début et fin de zone en italique ... Taille de caractère [Font size] ... taille Couleur de caractère [Font color] Début et fin de zone en couleur A la ligne [Line break] Aller à la ligne Ligne horizontale [Horizontal Line] <HR> Pour séparer 2 paragraphes par une ligne horizontale Commentaires [Comments]  Ne pas afficher Centrage [Center] <CENTER></CENTER> Centrer OPTION ISN Lycée La Trinité - Fiche 6 Langage_HTML_Elèves Page 3

4 Ouvrir l'éditeur de texte puis taper les lignes suivantes : <HTML> <HEAD> <TITLE> BIENVENUE à l option ISN Lycée La Trinité </TITLE> </HEAD> <BODY> exemple de texte simple exemple de texte en gras exemple de texte en gras exemple de texte en italique exemple de texte en italique exemple de texte en gras et en italique texte en bleu <! Et voilà, c'est fini, commentaire visible dans le code mais pas sur l écran du navigateur--> </BODY> </HTML> Observons le résultat : collez ici le résultat obtenu Quelques commentaires s'imposent : - Le texte tout simple s'écrit sans balise. Il sera repris par le navigateur avec la police et taille de caractères choisis dans sa configuration par défaut. - Le navigateur affiche le texte qu'on lui "dicte" 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 comme vous le souhaitez, il faut une instruction particulière. C'est la balise . Celle-ci 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 texte en bleu est équivalent à texteen bleu - Il n'est pas rare d'utiliser plusieurs balises pour un même élément de texte. Il faut veiller à bien les imbriquer. Ainsi ... est correct et ... risque de vous créer des ennuis. - La taille dans peut être indiquée de deux façons : 1. avec un nombre de 1 à 7. La valeur par défaut étant de façon relative par rapport à la valeur par défaut (ici 0). Soit OPTION ISN Lycée La Trinité - Fiche 6 Langage_HTML_Elèves Page 4

5 - Pour les puristes, les balises et , et ne sont pas totalement équivalentes. Vous verrez en poussant plus avant votre étude du langage Html que et appartiennent aux définitions structurales (style logique) dont l'apparence dépend des options reprises dans la configuration du browser. Les balises et appartiennent aux formats de présentation (style physique) dont l'apparence dépend de la volonté de l'auteur. Voici les codes de quelques couleurs basiques. Bleu #0000FF Vert #00FF00 Blanc #FFFFFF Violet #8000FF Rouge #FF0000 Jaune #FFFF00 Gris clair #C0C0C0 Noir # Afin de mieux comprendre les codes couleurs à utiliser, veuillez visiter cette page : Application : Afficher sur votre page : Ce texte est gras, italique non gras et bleu, et rouge. Ecrire ou collez ici le code HTML que vous avez écrit : 4 D autres balises de mise en forme du texte... ou autres utiles -Titres : Les balises <H1>, <H2>,, <H6> permettent de définir la taille des titres du plus grand au plus petit. - Police de caractères : Les balises <big> </big>, , permettent d écrire avec une taille plus grande ou plus petite quand à permet avec les attributs face, color et size de définir la police de caractères utilisée, sa couleur et sa taille. Si l un des trois attributs ou aucun n est précisé, la valeur par défaut est celle du système hôte. Faire un essai de texte avec face= arial color= red size= Retrait : La balise <BLOCKQUOTE>...</BLOCKQUOTE> introduit une citation avec un retrait. Ce qui est bien pratique pour agrémenter la présentation d une page. Ecrire sur votre page html : Voici un texte normal sans blockquote puis 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. P R A T I Q U E! OPTION ISN Lycée La Trinité - Fiche 6 Langage_HTML_Elèves Page 5

6 Avant que les tableaux ne soient reconnus par les browsers, les braves pionniers du Html devaient employer cette balise pour faire des tableaux. - Adresse : La balise <ADDRESS>...</ADDRESS> indique une adresse (généralement en fin de document). - Souligne : La balise ... souligne le texte. Comme, par convention, les éléments servant d'hyperlien sont soulignés (c'est le même que dans les fichiers d'aide), on évitera le souligner des éléments de texte pour lui donner de l'importance. On préfèrera la mettre en gras ou dans un format ou une couleur de police différent. Il ne faut donc pas en abuser. - Clignotement : On peut placer un texte clignotant par la balise <BLINK>...</BLINK>. Cette balise est un peu tournée en dérision car elle est rapidement ennuyeuse. On lui préfèrera une image animée qui peut être débranchée après quelques clignotements. -Barré : La balise <S> </S> barre le texte entre les pointillés. - Alignement : Pour aligner du texte, on a utilisé l'attribut ALIGN ou la balise <CENTER>. Il existe une balise permettant d'aligner différents éléments. C'est : <DIV align=left>...</div> <DIV align=center>...</div> <DIV align=right>...</div> Cette alternative pour l'alignement horizontal du texte est parfois bien utile pour définir l'alignement d'une portion de texte. -Paragraphe : La balise , pour délimiter un paragraphe. Cette balise supporte l attribut ALIGN qui permet de choisir l alignement utilisé pour l affichage du paragraphe. Les valeurs autorisées pour ALIGN sont : left, center, right. 5 Balises d insertion d une image C'est la balise img qui permet d'insérer une image dans une page HTML. Elle n'a pas besoin d'être refermée mais certains de ses attributs sont obligatoires. Attributs obligatoires : src= Nom_du_fichier.jpg : Pour afficher une image, il faut évidemment indiquer au navigateur le fichier image qu'il doit traiter. Classiquement, ce fichier doit être au format png, jpg ou gif. Si le fichier image se trouve dans le même dossier que le fichier HTML, il suffit d'indiquer son nom (en respectant la casse et avec son extension) sinon il faut indiquer le chemin. Par exemple, si l'image est dans un dossier images, il faut écrire src= images/ Nom_du_fichier.jpg. Il est également possible d'utiliser une image Internet mais il faut alors préciser l'url complète de cette image. Par exemple : src= alt= Description : Cet attribut permet d'afficher un texte qui s'affiche si l'image n'est pas disponible pour une raison ou pour une autre. Il est également utile pour les navigateurs qui fonctionnent en mode texte. Bien que cette balise puisse paraître futile au premier abord, elle est indispensable si vous voulez que votre page Internet soit validée par le World Wide Web Consorcium (W3C). Plus d'informations à l'adresse OPTION ISN Lycée La Trinité - Fiche 6 Langage_HTML_Elèves Page 6

7 Attributs optionnels : border= nombre. Cet attribut permet de définir la taille de la bordure de l'image en pixels. La valeur 0 correspond à l'absence de bordure. width= largeur height= hauteur. Ces deux attributs permettent de préciser la taille de l'image. En ne donnant qu'un seul de ces attributs on conserve les proportions. title= texte. Cet attribut permettra d'afficher un texte dans une bulle qui apparaîtra au survol de l'image avec le pointeur de la souris. align= alignement. Cet attribut permet de définir la façon dont la légende de l'image doit s'afficher. Les valeurs possibles pour "alignement" sont top, middle, et bottom. La légende se termine par la balise. Exemple : <img src= align= top >Légende en haut. usemap= #nom. Cet attribut permet de faire référence à une structure définissant des zones de l image jouant un rôle de liens hypertexte et donc sensibles à un clic de souris. On la définie entre les balises <map> et </map> où <map> a comme attribut name= nom. Sur une même page html, insérez une image du lycée de La Trinité et une image du collège Fénelon en mettant faisant afficher une légende une fois centrée dessous l image et une autre fois excentrée au-dessus de l image, et en faisant apparaître le nom de la photo lorsqu on la survole avec la souris. 6 Balises d insertion d un lien hypertexte D'après Wikipédia : «Un hyperlien ou lien hypertexte ou simplement lien, est une.. permettant de passer automatiquement d'un document consulté à un document lié. Les hyperliens sont notamment utilisés dans le. pour permettre le passage d'une page Web à une autre d'un clic». La balise suivante peut donc pointer vers deux types de liens : une URL ou une ancre définie à l'intérieur du fichier HTML lui-même. Vers une URL : Exemple à traiter : <a href= Vers une ancre : Une ancre est un endroit particulier de votre page web où vous voulez que le navigateur aille quand on clique sur le lien. Ce peut être intéressant de placer une ancre au début d'un paragraphe important, par exemple. Il faut donc définir l'ancre au préalable. Exemple à traiter : <a name= paragraphe1 >Début du premier paragraphe</a> Et ensuite, on peut faire le lien avec : <a href= TP1.html#paragraphe1 >Aller au début du premier paragraphe</a. > Remarquez bien qu'il faut préciser avant la dièse dans quel fichier HTML est définie l'ancre. Il existe une ancre un peu particulière, #top, qui permet de remonter tout en haut de la page : <a href= #top >Revenir en haut</a. > OPTION ISN Lycée La Trinité - Fiche 6 Langage_HTML_Elèves Page 7

8 Image réactive : Il également possible de faire en sorte qu'une image dissimule un lien hypertexte (vers une URL ou vers une ancre). Pour cela, il faut utiliser une combinaison de la balise <a> et de la balise <img> : Exemple à traiter : <a href=" src=" alt="image réactive" title="le Lycée!" /></a> 7 Balises d insertion de listes Les listes permettent un affichage structuré d'items. Elles peuvent être ordonnées ou non et peuvent également être imbriquées (une liste peut contenir d'autres listes). Les listes ordonnées : Dans une liste ordonnée, chaque élément de la liste sera numéroté (par un chiffre ou une lettre). Les balises utilisées sont les suivantes : <ol>...</ol> : ouverture et fermeture de la liste ordonnée. <lh>...</lh> : balise optionnelle qui permet de définir le titre d'une liste. <li>...</li> : élément de la liste. Cette balise possède un attribut optionnel type qui permet de définir la façon dont sont numérotés les différents éléments de la liste. Cet attribut peut prendre les valeurs suivantes : 1(chiffres ; valeur par défaut), a (lettres minuscules), A (lettres majuscules), i (chiffres romains minuscules), I(chiffres romains majuscules). Un autre attribut optionnel de la balise <li> est l'attribut value qui permet de définir le numéro de départ de la liste. Exemple à traiter en affichant tous les prénoms du groupe d élèves: <HEAD> <TITLE>Liste des élèves d ISN</TITLE> </HEAD> Les listes non ordonnées : <BODY> <OL> <LH>Liste ordonnée des prénoms des élèves d ISN</HL> <LI TYPE= 1 value= 4 >Louis</LI> <LI>Adrien</LI> <LI>Thomas</LI> <LI>Maya</LI> </OL> </BODY> C'est grossièrement le même fonctionnement sauf que chaque élément n'est plus numéroté mais précédé d'une puce. <ul>...</ul> : Ouverture et fermeture d'une liste non ordonnée. <li>...</li> : élément de la liste non ordonnée. Un attribut type peut également être utilisé mais, cette fois, pour définir la forme de la puce qui précède chaque élément. L'attribut type peut prendre les valeurs suivantes : disc (disque plein,valeur par défaut), circle (disque vide), square (carré plein). OPTION ISN Lycée La Trinité - Fiche 6 Langage_HTML_Elèves Page 8

9 8 Balises d insertion de tableaux HTML offre la possibilité de créer des tableaux. Il s'agit de la principale possibilité de maîtriser la mise en page globale d'un document (disposition en colonnes, respect des alignements, insertion d'images au milieu du texte...) si on ne veut pas utiliser de CSS (Cascading Style Sheets). Les balises à utiliser sont les suivantes : <table>...</table> : Ouverture et fermeture du tableau. Il est très important de penser à fermer un tableau sous peine de voir votre page HTML avec un affichage complètement changé! Cette balise a une balise optionnelle border permettant de définir l'épaisseur en pixels du cadre du tableau. Sa valeur par défaut est de 1. <tr>...</tr> : Ouvre et ferme une ligne dans le tableau. <td>...</td> : Ouvre et ferme une case dans une ligne. Exercice : Recopiez le code suivant dans le Bloc-Notes et, par essais successifs, essayez le comprendre le fonctionnement du codage des tableaux et, en particulier, des balises non décrites précédemment. Vous enregistrerez votre fichier HTML commenté. <table border="1" cellpadding="2"> <caption align="bottom">titre</caption> <tr> <th align="left">script</th> <th align="left" colspan="2">exécution</th> </tr> <tr> <td>cgi</td> <td rowspan="2">par le</td> <td>serveur</td> </tr> <tr> <td>javascript</td> <td>client</td> </tr> </table> Il existe encore bien d autres balises. à vous de les découvrir via internet! IV Création d une page HTML a l aide d un logiciel spécialisé 1 Présentation Afin de faciliter et automatiser la création de pages internet, il existe des logiciels permettant de transformer automatiquement en code l agencement d une page réalisée sur un écran à l aide de la souris. Un peu comme si les images et les lignes tapées avec le traitement de texte Word étaient transformées en lignes de code HTML. OPTION ISN Lycée La Trinité - Fiche 6 Langage_HTML_Elèves Page 9

10 2 Logiciels d aide à la création Dreamweaver : Ce logiciel polyvalent et extrêmement puissant, permet de créer des pages et de les transférer sur un serveur. Mais il est très couteux, et ne sera donc pas utilisé ici 2 - Les lignes de code sont générées 1 - Création d un tableau NVU ( prononcer «N-view»), BlueGriffon : logiciels gratuits assez performants à vous de vous faire une idée et de choisir en cherchant sur le net. V Travail à effectuer Réaliser une page HTML (l ensemble étant le plus esthétique possible du point de vue graphique) qui devra contenir les codes nécessaires à l affichage de : Un titre dans la fenêtre du navigateur Un titre dans le corps de la page Une ligne horizontale de séparation Un lien vers le site du lycée La Trinité Une image du lycée de La Trinité d une hauteur de 50 pixels Un texte de bienvenue Une ligne horizontale Une image «personnelle» qui vous caractérise avec un texte au passage de la souris Le code pour lier cette image à son emplacement sur internet Un texte décrivant vos motivations à choisir la spécialité ISN. Les prénoms sous forme de liste ordonnée des élèves inscrits à cette spécialité Une ligne séparatrice Un texte mis en forme (gras, souligné, italique, couleur, clignotant, ) précisant que la page est inachevée Ce fichier doit contenir un titre Puis créer un deuxième fichier HTML (avec un titre) contenant un lien vers la page précédente et votre emploi du temps sous forme de tableau. Modifiez le premier fichier HTML pour y inclure un lien vers le second. OPTION ISN Lycée La Trinité - Fiche 6 Langage_HTML_Elèves Page 10