T.P. OUTILS DE L INTERNET

Transcription

1 T.P. OUTILS DE L INTERNET Le HTML (HyperText Markup Language) est un langage informatique utilisé pour la création de pages Web. Une page HTML est un simple fichier texte contenant des balises (parfois appelées marqueurs ou repères ou tags en anglais) permettant de mettre en forme le texte, les images, etc. 1. Les balises Une balise est une commande encadrée par le caractère inférieur (<) et le caractère supérieur (>). Ainsi, une balise s écrit <balise> Les balises HTML ne sont pas sensibles à la casse, c'est-à-dire qu'elles peuvent être saisies indifféremment en minuscules ou en majuscules! Les balises HTML fonctionnent par paire afin d'agir sur les éléments qu'elles encadrent. La première est appelée balise d'ouverture et la seconde balise de fermeture. La balise de fermeture inclut une barre oblique (/). Ainsi à la balise d ouverture <balise> correspond la balise de fermeture </balise>. A titre d'exemple, les balises et permettent de mettre en gras le texte qu'elles encadrent : Ce texte est en gras Les balises HTML peuvent parfois être uniques : la balise représente par exemple un retour à la ligne. 2. Notion d'attribut Un attribut est un élément, présent au sein de la balise ouvrante, permettant de définir des propriétés supplémentaires. Les attributs se présentent la plupart du temps comme une paire attribut = "valeur". Il est recommandé de mettre la valeur entre guillemets. Voici un exemple d'attribut pour la balise (balise définissant un paragraphe), permettant de spécifier que le texte doit être aligné sur la droite : exemple de paragraphe Chaque balise peut comporter un ou plusieurs attributs, séparés par un espace. 3. Structure d un document HTML Un document HTML commence par la balise <html> et finit par la balise </html>. Il contient également un en-tête décrivant le titre de la page, puis un corps dans lequel se trouve le contenu de la page. L'en-tête est délimité par les balises <head> et </head>. Le corps est délimité par les balises <body> et </body>. Voici par exemple une page HTML minimaliste : <html> <head> <title>titre de la page</title> </head> <body> Contenu de la page </body> </html> 1

2 Pour réaliser les exercices proposés dans ces TP sur le langage HTML, vous allez suivre les étapes suivantes : a. création du code Html, b. visualisation dans un navigateur. A. Création du code Html Pour créer du code Html, n importe quel éditeur de texte peut être utilisé. Vous allez utiliser un éditeur de texte élémentaire comme le «Text Editor». Votre première tâche consistera à enregistrer comme un modèle le document Html minimum : 1. Créer un nouveau dossier et nommer le TPHTML 2. Lancez l éditeur de texte Text Editor (menu Accessoires, double clic Text Editor) 3. Ecrivez le code Html suivant : <html> <head> <title> Ma page Html </title> </head> <body> Bravo, vous avez réussi </body> </html> 4. Dans le menu Fichier, activez l option Enregistrer sous 5. Sur la fenêtre qui apparaît, déterminer l emplacement du fichier (Enregistrer dans) dans le dossier TPHTML que vous venez de créer. Ensuite dans la zone Type, choisissez l option Tous ou Tous les fichiers 6. Donnez un nom de fichier avec l extension.htm, à titre d exemple mapage.htm 7. Cliquez sur Enregistrer et réduisez (ou minimisez) la fenêtre de Text Editor B. Visualisation dans un navigateur Pour visualiser le résultat de votre page vous devez ouvrir votre navigateur (menu Application, double clic sur Mozilla ou sur Epiphany) Une fois votre navigateur préféré est lancé, dans le menu Fichier activez l option Ouvrir un fichier. Ensuite indiquez l emplacement du dossier TPHTML où est enregistré votre document. Cliquez sur le bouton Ouvrir pour confirmer l affichage du document. Pour chaque exercice à réaliser, en cas d erreur, vous réduirez la fenêtre du navigateur, puis vous rappellerez l application Text Editor pour y apporter les modifications et les enregistrer. Après l avoir réduit, vous rappellerez le navigateur et vous actualiserez la page afin de visualiser la dernière version du fichier modifié. 2

3 TP 1 : MISE EN FORME DU TEXTE Niveaux de titres Le langage HTML définit 6 niveaux de titre, afin de définir une structuration hiérarchique des paragraphes dans un texte. La balise est notée <hx> où x est un niveau allant de 1 à 6 Exercice 1.1 : Des titres de toutes les tailles Présentez dans un document Html les six tailles de titre <hx> disponibles en partant du plus grand au plus petit Les balises de style Les balises de style modifient la typographie du texte. Voici une liste de balises de style reconnues par la plupart des navigateurs (chacun à sa façon si bien que certains ne font pas la différence entre ces styles). Balise Effet visuel Met le texte en gras Met le texte en italique Commence un nouveau paragraphe Passage à la ligne Souligne un texte 3

4 <s> </s> <blink> Texte barré Texte Clignotant Met le texte en indice Met le texte en exposant Imbrication des balises Les balises HTML ont la particularité de pouvoir être imbriquées de manière hiérarchique afin de permettre le cumul de leurs propriétés. En contrepartie le chevauchement de balises n'est pas toléré par le standard HTML. Voici un exemple de texte formaté avec des balises imbriquées : comment ça Marche, encyclopédie informatique libre L'exemple ci-dessus donne le résultat suivant : Comment ça Marche, encyclopédie informatique libre Exercice 1.2 : Texte en gras, italique et souligné Affichez du texte en gras, en italique et en souligné. Exercice 1.3 : Un peu de mathématiques Affichez la formule suivante : (x 1 -x 2 ) 2 =(x 1 +x 2 ) 2-4x 1 x 2 Les polices de caractère Pour spécifier la police de caractères à utiliser pour l'affichage du texte on utilise la balise ... . Pour changer la taille de la police, on utilise l attribut size : exprimée de façon absolue par un nombre compris entre 1 et 7 ou de façon relative à la taille de la police courante par un incrément signé (allant de -3 à +3). Il faut rester entre 1 et 7. 4

5 Pour changer la couleur d'affichage du texte, on utilise l attribut color : pour la notation hexadécimale (base 16, soit de 00 à FF) ou pour la notation par nom Pour changer la polices de caractères, on utilise l attribut face : où x est la liste de noms de polices de caractères séparés par des virgules. Il est recommandé de spécifier plusieurs polices, dans le cas où la première police serait indisponible sur l'ordinateur du lecteur. A titre d exemple : ... Exercice 1.4 : Les tailles des caractères en revue Présentez dans un document Html, les tailles de caractères disponibles avec la balise en partant de la plus grande à la plus petite. Exercice 1.5 : Dégradé de couleur Présentez en valeur hexadécimale du texte (en gras, taille 6) en bleu clair, en bleu moyen et en bleu foncé. 5

6 Exercice 1.6 : La foire aux polices Affichez quelques lignes de texte dans les polices différentes suivantes : Times New Romain, Arial, Courier et MS Sans Serif. Commentaires Il est possible d'ajouter des éléments d'information dans une page Web sans que ceux-ci soient affichés à l'écran grâce à un jeu de balises spécifique, appelé balises de commentaires.  Les balises de commentaires permettent de mettre en commentaire du texte mais peuvent également servir à commenter du code HTML. Exercice 1.7 : Commentaires Affichez le texte ci-après en ajoutant en commentaire la mention : "Tout ce qui est écrit ici ne sera pas affiché." L alignement Le langage HTML considère les paragraphes comme des blocs de texte. Les navigateurs répartissent au mieux leur contenu dans la fenêtre. A l'intérieur d'un paragraphe, les espaces, tabulations et retours chariot comptent pour un seul espace. La mise en page par blocs de texte est réalisée par l'intermédiaire de la paire de balises et . Cette balise accepte n'importe lequel des attributs vus précédemment. Le retour chariot (retour à la ligne simple) est réalisé grâce à la balise L alignement du texte est réaliser par l attribut align="type" qui prend les valeurs suivantes : 6

7 Attribut Valeur Effet visuel align left Texte aligné à gauche right center justify Texte justifié Texte aligné à droite Texte centré Les balises servant à indenter le texte sont appelées des conteneurs. Conteneur <blockquote>... </blockquote> Texte indenté <address> </address> Pour écrire une adresse <note> </note> <fn> </fn> <banner> </banner> <pre> </pre> Permet de rédiger une note Effet visuel Permet de réaliser une note de fin de page Fixe un bloc de texte par rapport à la page Permet d'écrire un texte préformatté en conservant les espaces, les retours à la ligne et les tabulations. Exercice 1.8 : L alignement Alignez à droite un paragraphe de texte en gras. Listes et énumérations en HTML Une liste est un paragraphe structuré contenant une suite d'articles. Le langage HTML définit trois types de listes : 1. la liste ordonnée, 2. la liste non ordonnée 3. la liste de définition. 7

8 Voici d'abord un tableau résumé des 3 types de listes : Type liste Liste ordonnée de Exemple de code Les premières villes de France <ol> <li>paris </li> <li>lyon </li> <li>marseille </li> </ol> Représentation Les premières villes de France 1. Paris 2. Lyon 3. Marseille Liste non ordonnée Quelques fruits <ul> <li>pommes </li> <li>poires </li> <li>oranges </li> </ul> Quelques fruits Pommes Poires Oranges Liste de définition <dl> Quelques définitions de termes <dt>html <dd>hypertext Markup Language <dt>www <dd>world Wide Web <dt>navigateur <dd>logiciel spécialisé dans l'interprétation du langage HTML </dl> Il existe des attributs spécifiques aux listes: Quelques définitions de termes HTML Hypertext Markup Language WWW World Wide Web Navigateur Logiciel spécialisé dans l'interprétation du langage HTML Attribut Valeur Effet visuel start = "x" (pour les listes ordonnées) x 1 définit le premier numéro numérotation chiffrée (par défaut) type = "valeur" (pour les listes ordonnées) type="valeur" (pour les listes non-ordonnées) A a I i circle square disc numérotation en capitales numérotation en bas de casse numérotation en chiffres romains (I, II, III, IV...) numérotation en chiffres romains en bas de casse o puce circulaire puce carrée puce en disque 8

9 Exercice 1.9. Listes à puces Reproduisez la liste à puces, comme ci-après : Exercice 1.10 : Listes ordonnées Reproduisez la liste numérotée suivante en respectant bien les différents retraits. Vous passerez en revue l attribut "type" de la balise <ol> </ol> Exercice 1.11 : Une liste dite de définition Présentez sous forme de liste de définition, les sortes de listes en Html, comme ci-après : 9

10 Exercice 1.12 : Texte en retrait Trouvez trois balises différentes pour créer un retrait. Les séparateurs horizontaux Le trait horizontal est un outil fort pratique pour structurer le contenu d une page. On peut aussi insérer une ligne horizontale grâce à la balise <hr>. Elle comporte les attributs suivants : size="x" pour déterminer la hauteur du trait en pixels, width="x" ou width="x%" pour déterminer la largeur du trait en pixels ou en pourcentage, algin=" " pour déterminer l alignement du trait, color= " " pour déterminer la couleur du trait, noshade pour créer un trait plein sans effet d ombrage Exercice 1.13 : Des lignes, des lignes Passez en revue la balise de retrait horizontal induit par la balise <hr>, comme ci-après. Le premier trait est celui par défaut (taille 2), le second comporte l attribut noshade, le troisième est de couleur rouge et le dernier a en plus une taille de 5 pixels. 10