docHTML-Introduction
download 
Plainte Transcription
HTML-Introduction
Feuille d’exercices HTML-Introduction Exercice 1 : Code HTML de base En utilisant un éditeur de texte (ex: NotePad), créer un fichier HTML contenant le code de base d’un document. Comme tous les documents HTML commence de la même façon, vous pourrez utiliser ce fichier pour commencer tous les autres documents HTML que vous réaliserez. Cela vous évitera de réécrire les mêmes étiquettes de base à chaque fois. Le code de base d’un document HTML est : <!-- Nom nom HTML-Introduction / Exercice1 IST 4A la date - -> <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> </BODY> </HTML> Le texte entre les symboles <!-- et - > sont des commentaires. Il ne sont pas considéré par le navigateur Internet et ne servent qu’à faciliter la lecture ou la compréhension du code. Dans ce cas-ci, les commentaires indique de quel exercice il s’agit et qui l’a fait Enregistrez ce travail dans le dossier Personnel\HTML\ sous le nom Exercice1.htm Exercice 2 : Caractères gras et italiques ' Ouvrez le fichier Exercice1.htm ' Ajoutez dans la section BODY ... <B>Gras</B> <I>Italique</I> ' Enregistrez le travail sous le nom Exercice2.htm ' Ouvrez le fichier Exercice2.htm avec Netscape. Résultat de l’exercice 2 Exercice 3 : En-tête Utilisez les étiquettes H1 jusqu’à H6 afin de reproduire le contenu de l’encadré ci-contre. Pour ce faire vous pouvez utiliser le code de l’exercice 1 et ajoutez dans la section BODY les étiquettes H1..H6 avec le contenu approprié. Remarquez, le titre du document est Exercice - 3. ( N’oubliez pas de sauver le document sous le nom Exercice3.htm. Exerice 4 : Différence entre <P> et <PRE> / Barre horizontale et saut de lignes a) Vous devez reproduire le contenu de la boîte ci-dessous en utilisant l’étiquette <PRE>. Enregistrez le travail sous le nom Exercice4a.htm. b) Vous devez reproduire le contenu de la boîte ci-dessous en utilisant l’étiquette <P> et <BR>. Puisqu’il n’y a qu’un seul <P> il est préférable d’utiliser </P>. Enregistrez le travail sous le nom Exercice4b.htm. c) Vous devez reproduire le contenu de la boîte ci-dessous sans utiliser les étiquettes <P> ou <PRE>. Enregistrez le travail sous le nom Exercice4c.htm. Nom : Bernard Pincince Équipe de hockey préférée : Canadiens de Montréal Est-ce que ton équipe va faire les séries : non Équipe préférée qui VONT FAIRE LES SÉRIES : Sénateurs d’Ottawa (même sans Yashine) Note : Il y a une ligne vide entre les barres horizontales et le texte. La ligne a une épaisseur de 4 et la longueur est 100% de la fenêtre. Ne tenez pas compte du type de police. Exercice 5 : Les polices et les couleurs Créer un fichier HTML dont la couleur de l’arrière-plan est FF99FF et la couleur du texte est FFCCCC. Le texte apparaissant sur le document est : Un très mauvais choix de couleurs!! Enregistrez le travail sous le nom Exercice5.htm. Exercice 6 : Les listes Faite une liste numérotée de vos cinq chanteurs ou groupes de musique préférés. Enregistrez le travail sous le nom Exercice6.htm. Exercice 7 : Les tableaux Reproduisez les tableaux suivant. La bordure des tableaux est 1. Enregistrez les travaux sous les noms Exercice7a.htm et Exercice7b.htm a) Cellule 1 Cellule 2 Cellule 3 b) Indice : Vous faites dans un premier temps un tableau de une ligne et deux colonnes. Ensuite dans la cellule de la première ligne et de la deuxième colonne, vous faites un deuxième tableau de 2 lignes et deux colonnes. Cellule 1 Cellule 2a Cellule 2c Cellule 2b Cellule 2d Exercice 8 : Les liens / Images Faites un lien vers la page http://www.geocities.com/Colosseum/Arena/5821/index.html en utilisant l’image entrer.gif. Ajouter l’attribut BORDER=0 dans l’étiquette de l’image. L’image entrer.gif se trouve dans le répertoire Commun/IST3/Html/. Vous devez le copier dans le même répertoire que votre fichier htm et utiliser une adresse relative. Enregistrez le travail sous le nom Exercice8.htm. Indice : Dans les exemples données en classe le lien était toujours du texte, au lieu du texte, le lien est une image. Vous devez donc placer l’image... Exercice 9 : Les cadres 1 Faites 3 document HTML nommé bleu.htm, vert.htm et rouge.htm dont l’arrière plan est de couleur bleu, vert et rouge respectivement. Note à propos des couleur : Bleu ! #0000FF Vert ! #00FF00 Rouge !#FF0000 Écrivez le code qui suit dans le fichier Exercice9.htm <HTML> <HEAD> <TITLE>Cadre1</TITLE> </HEAD> <FRAMESET COLS=”33%,33%,34%”> <FRAME SRC=”bleu.html”> <FRAME SRC=”vert.html”> <FRAME SRC=”rouge.html”> </FRAMESET> </HTML> Exercice 10 : Les cadres 2 Bleu Vert Rouge Dans le cadre de gauche ! Trois liens dirigés vers les pages bleu.html, vert.html et rouge.html Lorsqu’un lien est activé, la page doit s’ouvrir dans le cadre de droit Page Web bleu.html, vert.html et rouge.html ! Page dont l’arrière plan est de couleur bleu, vert et rouge respectivement. Exercice 11 : Les cadres 3 Modifiez l’exercice 10 afin d’ajouter un cadre horizontal pour afficher un titre Titre Couleurs Pages
