Programmation Web TP1 HTML

Dimension: px

Commencer à balayer dès la page:

Download "Programmation Web TP1 HTML"

Norbert Roberge
il y a 7 ans
Total affichages :

1 Programmation Web TP1 HTML Vous allez réaliser votre premier site Web dans lequel vous présenterez un contenu d un cours de votre choix 1 - Une première page en HTML Le document html de base se présente ainsi :

2 Exercice 1 : création de votre première page html Préparez votre espace de travail en créant un dossier "public_html_local" dans lequel vous allez créer un sous-dossier "exercice1". En vous aidant de l'exemple cidessus, prenez un éditeur de texte (textedit, bloc note, notepad...) et créez votre propre document html. Ajoutez le texte de votre choix. Méthode : Enregistrez votre document sous le nom de "mapage.html". Attention à bien renseigner l'extension en.html et non en.txt Tapez le code html en respectant bien l'écriture des balises. Visualisez le résultat dans votre navigateur Web (Internet Explorer, Firefox, Safari...) 2 - Le texte Tout le texte contenu sur votre page se trouvera entre les balises <body> et </body> Le texte tient une place importante dans un site Web. Il est primordial de pouvoir l'utiliser et l'adapter de façon optimale. Les balises titres Elles permettent de bien structurer votre page mais aussi d'optimiser le futur référencement de votre site Internet. Les différentes balises se présentent de cette manière :

3 Exercice 2 : les titres Dans le dossier "public_html_local", vous allez créer un nouveau sous-dossier que vous nommerez "exercice2". En vous basant sur l'exercice 1, vous créerez une page html que vous nommerez : cours.html Pour chacune des pages, vous organiserez le contenu de la manière suivante en Exploitant les balises h1, h2, h3 jusqu à h7 pour les titres et les sous-titres. Exercice 3 : Formatage de 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 (testez les mises en forme proposées ci dessous). Pensez à enregistrer régulièrement votre travail. Visualisez le résultat dans votre navigateur. La mise en forme Il est très simple de modifier la forme du texte en encadrant des mots ou phrases par des balises. En voici quelques-unes : Italique Gras Souligner Indice Exposant <div></div> <blockquote></blockquote>

4 3 -Les images Vous allez ajouter aux pages du contenu visuel. Exercice 4 : Ajout d'images Vous allez reprendre les pages précédentes afin d'y intégrer une image Méthode : Créez un dossier "images" dans votre sous-dossier "exercice2". Enregistrez les images ci-dessous dans le dossier "images" Insérez la balise <img src = images/html5.jpg /> en pointant la source vers l'image correspondante. Enregistrez et visionnez le résultat dans votre navigateur Internet Remarque : vous êtes libres de choisir les images qui vous semblent adéquates. Si vous trouvez une difficulté dans le choix utilisez l image cidessous

5 4 - Les liens Vous allez maintenant lier vos pages afin de pouvoir naviguer entre elles. Il existe 3 types de lien hypertexte : local, interne et externe. Le lien local permet d allez dans une partie indexées de la page. Le lien interne permet d accéder à une page dans le même site. Le lien externe permet d allez vers un autre site. Exercice 5 : les liens 5.1 : lien local Vous allez maintenant ajouter un plan de cours pour votre page cours et vous allez ajouter des liens qui permettent d acceder directement à la partie correspondante de votre cours. 5.2 : lien interne Vous allez maintenant ajouter à la fin du plan un lien vers la page td.html, NB : n oublier pas de créer la page td.html Sur la page td.html, ajoutez un lien de retour, redirigeant vers la page cour.html 5.3 : lien externe Vous allez maintenant ajouter à la fin de la page un lien vers des références : Exemple : NB : ce lien doit ouvrir une nouvelle page Méthode : Ouvrez vos pages html. Insérez les balises de liens sur les mots concernés. Enregistrez et visionnez le résultat dans votre navigateur Web La structure de la balise lien <a href="le_lien_destination" target="_blank _self _parent _top">zone cliquable</a> La structure de la balise ancre <a name="la_référence_de_ancre">zone ancre</a> 5 - Les listes Afin de mieux organiser notre menu de la page cours, vous allez organiser en liste le plan. Exercice 6 : Ajouter une liste au menu Vous allez reprendre votre page cours.html dans laquelle se trouve votre plan du cours, et lui appliquer une liste afin d'obtenir le résultat suivant : 1. Chapitre 1 Sous chapitre 1 Sous chapitre 2 2. Chapitre 2 3. Chapitre 3

6 6 - Les Tableaux Vous allez créer une page contact.html et dessiner dedans un tableau Exercice 7 : Les tableaux Adapter votre page de contact afin d'y insérer le tableau suivant : NB : Vous trouvez un exemple détaillé pour le tableau dans 7- Les formulaires Exercice 8 : formulaire Afin de faciliter la communication entre les visiteurs et le site, vous allez ajouter un formulaire qui récupère les informations des visiteurs. Nb : n oublier pad de mettre le formulaire dans un tableau pour avoir cette mise en page

Documents pareils

Programmation Web TP1 - HTML

Programmation Web TP1 - HTML Vous allez réaliser votre premier site Web dans lequel vous présenterez la société SC, agence spécialisée dans la conception des sites internet. 1 - Une première page en HTML