docTHEME : INFORMATIQUE TP : CREATION D`UNE PAGE WEB
download 
Plainte Transcription
THEME : INFORMATIQUE TP : CREATION D`UNE PAGE WEB
THEME : INFORMATIQUE TP : CREATION D’UNE PAGE WEB GRACE AU LANGAGE HTML OBJECTIFS : - Connaître les bases du langage html Créer une page web grâce à ce langage I – Que signifie HTML ? 1) Définition HMTL (HyperTextMarkupLanguage) désigne le format de données utilisé pour représenter les pages web. C’est un langage de balisage permettant également de dynamiser les pages web (insertion des images, mise en forme du texte, insertion vidéo, etc…). 2) Structure L’HTML est un langage essentiellement constitué de balises. Une balise peut être considérée comme une syntaxe permettant de structurer un mot, un texte ou une page web. Pour créer un document html nous avons besoin d’au moins 4 balises. Le texte sera structuré de la manière suivante : 1 <html> <body> (contenu) </body> </html> Compléter le texte avec les mots suivants : avant, après, html, corps. On distingue deux types de balises : - La balise ouvrante qui se place ………. Le contenu Ex : <body> La balise fermante qui se place ………. Le contenu Ex : </body> La balise <html> a pour rôle de définir un fichier ……… Et la balise <body>permet de définir le ………. du fichier. II – Programmation en HTML Etape 1 : Lancer l’application bloc-notes se trouvant sur votre bureau Etape 2 :Saisissez le texte suivant : <html> <body> Bienvenue sur ma première page web. je m'appelle « nom prénom »et je fais mes premiers pas dans la programmation. Au terme de ce TP j'aurai réalisé une page web super sympa qui va t’émerveiller. À bientôt. </body> </html> Etape 3 : Enregistrez le fichier sous le bureau avec le nom pageweb.html - Qu’observez-vous au bureau ? A quoi cela est-il dû ? Etape 4 : Double-cliquez sur le programme que vous avez créé et observez ce qui s’affiche. Nous allons par la suite, rendre la page web plus dynamique et vivante en utilisant d’autres balises. 2 1) Titre de la page web Cela se fait en appliquant la syntaxe suivante : <head> <title> Bienvenue sur ma page web </title> </head> Quel rôle joue chaque balise utilisée ? Modifier votre texte en ajoutant la syntaxe ci-dessus entre la balise <html> et <body>. Enregistrez et exécutez le programme. 2) Mise en forme du texte Pour chaque mise en forme nous avons besoin d’une balise ouvrante et d’une balise fermante qui se trouvent dans le tableau en annexe. - - Séparez chaque phrase du corps du texte en paragraphes. Mettre la première ligne du texte en gras et changer la couleur de police. Mettre la taille à 5 pixels. NB : à partir de 2 balises ouvrantes et fermantes, on procède de la manière suivante : <a><b> ……. </b></a> Mettre en italique vos noms et prénoms et les souligner. Aligner la quatrième phrase du corps du document à droite de la page Barrer le dernier paragraphe. 3) Mise en forme de la page - - Les balises permettant de réaliser les étapes suivantes se trouvent dans le tableau en annexe. Insertion d’une couleur de fond Mettre le fond de page en jaune. Insertion d’une image Insérez l’image imagetp.jpg se trouvant sur le bureau dont les dimensions sont 200 et 200 pixels. Insertion d’un fichier vidéo Insérez la vidéo vidéotp.mp4 se trouvant sur le bureau dont la largeur et la hauteur valent respectivement 800 et 300 pixels. Personnalisez votre page web en utilisant d’autres balises dans le tableau en annexe ou en disposant les balises utilisées d’une autre façon. Vous pouvez personnaliser votre page web en insérant d’autres balises ou en disposant les balises utilisées d’une autre façon. 3 4) Exercice Créer un tableau de 4 lignes (marque, couleur, prix, garantie) qui donne des renseignements sur deux voitures (2 colonnes pour chaque ligne). Annexes : Les balises en HTML Balise <b> …….</b> <p> ……. </p> <u>……</u> <i> ….. </i> <font color=‘’color ‘’ size = ‘’n’’> ………. </font> <div align =‘’position’’> ……. </div> <body bgcolor= ‘’colour’’> <body background=’’nom image.extension’’> <img src=’’nomimage.extension’’ width= ‘’n’’ height=’’n’’> <video controls width=’’n’’ height=’’m’’> <source src= ‘’nomvideo.extension’’/> </video> <s> …….. </s> <table border=’’n’’></table> <tr><th> …….</th></tr> <td>…….</td> <caption>…. </caption> Description Mettre un texte en gras Délimitation d’un paragraphe Souligner un mot ou une phrase Mettre un texte en italique Modifier la couleur et la taille de fond Positionne le texte à un endroit précis de la page Donne une couleur en fond de page Insère l’image saisie dans la balise en fond de page Insère une image avec des dimensions précises exemple <strong> ananas </strong> <p> je m’appelle pierre </p> <u> premier tp </u> <i> bienvenue chez moi </i> <font color=‘’blue ‘’ size = ‘’3’’> salut </font> < div align=‘’right’’> bonjour </div> <body bgcolor= ‘’green’’> <body background =’’tulipe.pnj’’> <img src=’’tulipe.jpg width=’’100’’ height=’’100’’> Insère une vidéo avec des dimensions précises <video controls width=’’800’’ height=’’300’’> <source src=’’movie.mp4’’/> </video> Barrer du texte Insertion d’un tableau Insertion de lignes avec un titre(th) Insertion de colonnes Donne un titre au tableau <s> adieu </s> <table border=’’1’’> <tr><th> meuble</th></tr> <td>chaise</td> <caption> liste des élèves </caption> 4
