docProgrammation web : TD 7
download 
Plainte Transcription
Programmation web : TD 7
Programmation web : TD 7 Email : [email protected] Nassim BAHRI Site web : http://nassimbahri.ovh Ecole Supérieure d'Economie Numérique Année universitaire 2014/2015 Objectif • Développer des pages Web HTML5 validées • Mettre en place des listes en HTML Ecole Supérieure d'Economie Numérique Année universitaire 2014/2015 Avant de commencer • Dans le dossier Web1, les dossiers suivants sont déjà crées: web1 html js css images • Consigne : Tout fichier HTML doit contenir le code HTML de base, et doit être validé. Ecole Supérieure d'Economie Numérique Année universitaire 2014/2015 Exercice 1: Création d'un fichier HTML5 structuré • Créer un fichier HTML et l'enregistrer sous structuration.html • Reproduire le résultat suivant, sachant que: 1. Les deux titres sont groupés dans une division titre_principal. 2. Il y a une entête, un bloc de navigation et deux sections. 3. La mise en forme de ce fichier HTML sera faite grâce à un fichier CSS. • • Visualiser le résultat dans un navigateur. Valider le code HTML en utilisant le validateur en ligne de W3C, http://validator.w3.org. Ecole Supérieure d'Economie Numérique Année universitaire 2014/2015 Exercice 1: Création d'un fichier HTML5 structuré Ecole Supérieure d'Economie Numérique Année universitaire 2014/2015 Exercice 1:Correction <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ma page web</title> <link rel="stylesheet" href="../css/style.css" /> </head> <body> <header> <img src="../images/Socrate.jpg" alt="image Socrate" /> <div class="titre_principal"> <h1>Biographie</h1> <h2>Socrate, le grand philosophe</h2> </div> </header> Ecole Supérieure d'Economie Numérique Année universitaire 2014/2015 Exercice 1: Correction <nav> <ul> <li><a href="index.html">Accueil</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="liens.html">Liens intéressants</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <section> <h2>Présentation</h2> <p>Socrate (en grec ancien Σωκράτης / Sōkrátēs) est un ….</p> </section> <hr /> <section> <h2>Ignorance et ironie</h2> <p>Socrate est donc paradoxalement le plus savant, selon l'oracle de ….</p> </section> </body> </html> Ecole Supérieure d'Economie Numérique Année universitaire 2014/2015 Alternative : En utilisation une section et deux articles Ecole Supérieure d'Economie Numérique Année universitaire 2014/2015 Exercice 1:Correction <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ma page web</title> <link rel="stylesheet" href="../css/style.css" /> </head> <body> <header> <img src="../images/Socrate.jpg" alt="image Socrate" /> <div class="titre_principal"> <h1>Biographie</h1> <h2>Socrate, le grand philosophe</h2> </div> </header> Ecole Supérieure d'Economie Numérique Année universitaire 2014/2015 Exercice 1: Correction <nav> <ul> <li><a href="index.html">Accueil</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="liens.html">Liens intéressants</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <section> <article> <h2>Présentation</h2> <p>Socrate (en grec ancien Σωκράτης / Sōkrátēs) est un ….</p> </article><hr /> <article> <h2>Ignorance et ironie</h2><p>Socrate est donc paradoxalement le plus savant, selon l'oracle de ….</p></article> </section> </body> </html> Ecole Supérieure d'Economie Numérique Année universitaire 2014/2015
