TP n° 1 : Initiation au langage HTML Exercice 1
publicité
Atelier informatique-langage HTML TP n° 1 : Initiation au langage HTML 1. Rappels de quelques généralités - Un fichier HTML est un fichier texte simple, parfaitement lisible, respectant un ensemble de convention d'écriture - Un fichier HTML peut être écrit à l'aide de n'importe quel éditeur de texte simple (des éditeurs plus évolués existent également) - Lorsque vous consultez un site web, les fichiers HTML (extension .htm ou .html) sont envoyés à votre navigateur et le code html est interprété sur votre machine par votre navigateur 2. Premières notions et première page Le texte qu’on écrit dans un fichier HTML est le code html qui sera interprété par un navigateur pour visualiser le résultat. Ce code est constitué de texte et d'indications de mise en page. Ces indications sont appelées balises. Une balise html (ou tag en anglais) respecte la syntaxe suivante : <balise> Une balise peut être seule, et son effet s'applique à l'endroit où elle se trouve, comme par exemple <BR> qui sert à sauter une ligne, ou en couple balise ouvrante <balise> balise fermante </balise> pour indiquer sur quelle partie de votre code elle s'applique : son effet touche tout ce qui se trouve entre la balise ouvrante et la balise fermante. Exercice 1 1) Préparez votre espace de travail en créant un dossier « tp_html » dans lequel vous allez créer un sous dossier "tp1" qui contient à son tour un sous dossier « excercice1 ». 2) Créez en utilisant un éditeur de texte (bloc note, notePad...) votre propre document html nommé index.html. Attention à bien renseigner l'extension en .html et non en .txt 3) Pour se faire, recopiez les lignes suivantes dans votre fichier index.html : <html> Page 1 sur 5 M.BOUABID-2012 Atelier informatique-langage C <head> <title>Ma premiere page web !!</title> </head> <body> </body> </html> Puis, n’oubliez pas de sauvegarder le contenu que vous venez d’ajouter. 4) Visionnez le résultat dans votre navigateur Internet (Internet Explorer, Firefox, ...) Pour visualiser le résultat, faites un clic droit sur votre fichier index.html, choisissez ouvrir avec puis sélectionner le navigateur choisi afin d’afficher la page créée. Ajoutez du texte maintenant dans la section body et rechargez votre page dans le navigateur. Page 2 sur 5 M.BOUABID-2012 Atelier informatique-langage C Exercice 2 Dans le dossier "tp1", vous créez un nouveau sous-dossier que vous nommerez "exercice2". En vous basant sur l'exercice 1, vous créerez 4 pages html que vous nommerez : • • • • index.html presentation.html services.html contact.html Pour chacune des pages, vous organiserez le contenu de cette manière : Page 3 sur 5 M.BOUABID-2012 Atelier informatique-langage C Les exercices qui suivent portent sur la construction d'un site web (celui de ComM01), dont une copie d’écran (nommée site1.jpg) est fournie avec le présent document. Exercice 3 : Formatage du texte Reprenez les pages html de l'exercice 2 et modifiez les titres et les textes en y insérant des balises des mises en forme correspondantes. Pensez à enregistrer régulièrement votre travail. Visualisez le résultat dans votre navigateur. Exercice 4 : les listes Afin de mieux organiser les services, nous allons organiser les services présents dans la page services.html en liste comme c’est indiqué dans la figure « site1.jpg ». Exercice 5 : Ajout d'images Vous allez reprendre les pages précédentes afin d'y intégrer des images comme c’est indiqué dans figure site. Pour se faire : • Créez un dossier "images" dans votre sous-dossier "exercice 3". • Enregistrez les images ci-dessous dans le dossier "images". Page 4 sur 5 M.BOUABID-2012 Atelier informatique-langage C • Dans chaque page, insérez la balise <img /> en pointant la source vers l'image correspondante. • Enregistrez et visionnez le résultat dans votre navigateur Internet Exercice 6 : les liens Vous allez maintenant lier vos pages afin de pouvoir naviguer entre elles. 1) Ajouter dans la page index.html (page de regroupement) un menu pointant vers chacune des pages du site. Vous nommerez les titres du menu comme suit : (Accueil, Présentation, Services, Contact) 2) Sur la page "presentation.html", vous insérerez un lien sur le mot ComMO1 vers le page "contact.html". 3) Sur chaque page, vous ajouterez un lien « retour à la page d’accueil », redirigeant le visiteur vers la page d'index du site. Exercice 7 : les tableaux Modifiez la page de contact afin qu’elle soit identique à celle définie dans la figure « site1.jpg » Page 5 sur 5 M.BOUABID-2012
