docProgrammation Web TD4- HTML- Liens hypertexte Présentation du
download 
Plainte Transcription
Programmation Web TD4- HTML- Liens hypertexte Présentation du
Université de la Manouba Ecole Supérieure d'Economie Numérique Programmation Web TD4- HTML- Liens hypertexte Objectifs - Développer des pages Web HTML5 validées - Mettre en place des liens hypertexte en HTML Consignes: Tout fichier HTML doit contenir le code HTML de base, et doit être validé. Les liens hypertexte et les images ont des titres et les liens externes s'ouvrent dans une nouvelle fenêtre. Les images figurent dans l'espace de cours sous la plateforme Moodle. Exercice: Création de liens hypertexte 1. Créer un fichier HTML en utilisant le logiciel Notepad++. 2. Enregistrer le fichier sous le nom index.html dans le dossier HTML de votre site web. 3. Reproduire le résultat suivant: Présentation du cours Web 1 L’objectif de ce cours est de se familiariser avec certaines notions, technologies et langages de création de sites Web : I. II. III. HTML CSS JavaScript HTML (HyperText Markup Language) Il a fait son apparition dès 1991 lors du lancement du Web. Son rôle est de gérer et organiser le contenu. C'est donc en HTML que vous écrirez ce qui doit être Page 1 affiché sur la page : du texte, des liens, des images… Liste des TD HTML Support du TD1 en pdf Fichier TD1.html Fichier TD2.html Haut CSS (Cascading Style Sheets, aussi appelées Feuilles de style) Le rôle du CSS est de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…). Ce langage est venu compléter le HTML en 1996. Haut Page 2 JavaScript Langage de script, suivant Java sur le plan SYNTAXIQUE. Il s'insère dans le code (x)HTML d'une page web, et permet de la rendre plus interactive. Ce langage de POO [Programmation Orientée Objet], faiblement typé, est exécuté côté client. Haut Liens intéressants W3C.org Validateur du W3C Contactez-moi Haut 4. Visualiser le résultat dans un navigateur. 5. Valider le code HTML en utilisant http://validator.w3.org. Page 3 le validateur en ligne de W3C, Correction Exercice: Création de liens hypertexte <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Liens hypertexte</title> </head> <body> <h1 id="haut">Présentation du cours Web 1</h1> <p> L’objectif de ce cours est de se familiariser avec certaines notions, technologies et langages de création de sites Web : </p> <ol type="I"> <li><a href="#HTML" title="HTML">HTML</a></li> <li><a href="#CSS" title="CSS">CSS</a></li> <li><a href="#JavaScript" title="JavaScript">JavaScript</a></li> </ol> <img src="../images/HTML5_sticker.png" alt="The future of the web" title="The future of the web" /> <hr /> <h2 id="HTML">HTML (HyperText Markup Language) </h2> <p> Il a fait son apparition dès 1991 lors du lancement du Web. Son rôle est de gérer et organiser le contenu. C'est donc en HTML que vous écrirez ce qui doit être affiché sur la page : du texte, des liens, des images… </p> <h3 id="TD">Liste des TD HTML </h3> <ul> <li><a href="TD1.pdf" target="_blank" title="Support du TD1 en pdf">Support du TD1 en pdf</a></li> <li><a href="TD1.html" target="_blank" title="Fichier TD1.html">Fichier TD1.html</a></li> <li><a href="TD2.html" target="_blank" title="Fichier TD2.html">Fichier TD2.html</a></li> </ul> <img src="../images/logoHTML5.jpg" alt="Logo HTML5" title="Logo HTML5" /> <p><a href="#haut">Haut</a></p> <hr /> Page 4 <h2 id="CSS">CSS (Cascading Style Sheets, aussi appelées Feuilles de style)</h2> <p> Le rôle du CSS est de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…). Ce langage est venu compléter le HTML en 1996. </p> <img src="../images/logoCSS3.jpg" alt="Logo CSS3" title="Logo CSS3" /> <p><a href="#haut">Haut</a></p> <hr /> <h2 id="JavaScript">JavaScript</h2> <p> Langage de script, suivant Java sur le plan SYNTAXIQUE. Il s'insère dans le code (x)HTML d'une page web, et permet de la rendre plus interactive. Ce langage de POO [Programmation Orientée Objet], faiblement typé, est exécuté côté client. </p> <img src="../images/logoJS.jpg" alt="Logo Javascript" title="Logo Javascript" /> <p><a href="#haut">Haut</a></p> <hr /> <h2>Liens intéressants</h2> <ul> <li><a href="http://www.w3.org/" target="_blank" title="W3C">W3C.org</a></li> <li><a href="http://validator.w3.org/" target="_blank" title="Validateur">Validateur du W3C</a></li> <li><a href="mailto:[email protected]">Contactez-moi</a></li> </ul> <p><a href="#haut">Haut</a></p> <hr /> </html> Page 5
