Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Page 1 sur 10 Atelier N°9 : Les balises structurantes en HTML5 Vous êtes appelé

Page 1 sur 10 Atelier N°9 : Les balises structurantes en HTML5 Vous êtes appelé à créer la page web « index.html » suivante en utilisant les balises structurantes en HTML5 et le langage CSS3 pour la mise en forme de la page. Institut Supérieur des Études Technologiques de Béja Département Technologies de l’informatique Matière : Atelier Développement Web 1 Niveau : 1ière année TI header nav section div footer Atelier 9- Balises structurantes en HTML5 Page 2 sur 10 1- On vous demande de créer la hiérarchie de dossiers suivantes sachant que : - Le dossier « css » contient la feuille de style « style.css » à développer - Le dossier « multimedia » contient les images à utiliser dans le site - Le dossier « source » contient la page HTML « index.html » à développer 2- La première chose à faire maintenant est de distinguer les principaux blocs sur la page « inde.html ». Ces blocs vont constituer le squelette de notre page. Pour créer ce squelette, nous allons utiliser différentes balises HTML : a. Les balises structurantes de HTML5, que nous connaissons : <header>, <section>, <nav>, etc. b. La balise universelle <div> quand aucune balise structurante ne convient. 3- Récupérer le dossier contenant les images et copier les images vers le dossier « multimedia » 4- Créer la page HTML « index.html» en se basant sur les informations données par le tableau suivant : Elément Contenu header Image : « images.jpg » Texte : Cours HTML5 et CSS3 nav Une liste non ordonnées composée des éléments : Contact, CV et Acceuil section « article » : contenant - Titre h1 : Introduction à HTML5 - Le paragraphe suivant : HTML5 est la dernière évolution des standards qui définissent HTML. Le terme HTML5 regroupe deux concepts différents :Il s'agit de la nouvelle version du langage HTML, avec de nouveaux éléments, attributs et comportement mais aussi un ensemble plus large de technologies qui permettent des sites web plus variés et puissants, et des applications web. mon_site css multimedia source Atelier 9- Balises structurantes en HTML5 Page 3 sur 10 HTML5 est la dernière évolution des standards qui définissent HTML. Le terme HTML5 regroupe deux concepts différents :Il s'agit de la nouvelle version du langage HTML, avec de nouveaux éléments, attributs et comportements mais aussi un ensemble plus large de technologies qui permettent des sites web plus variés et puissants, et des applications web. « aside » contenant : - Un titre h3 : Mes connaissances - Le paragraphe : Je suis un étudiant doué de la programmation web. J'ai des connaissances dans les langages suivants : php, Mysql, Js, HTML et CSS. - Les images : php.jpg, css.jpg, js.png, html.jpg - Le paragraphe : Vous êtes invité à bien apprendre ces langages de développement web !!! div - Un titre h3 : Vous pouvez nous contacter par les moyens suivants - Les images : facebook.jpg, twitter.jpg, whatsapp.jpg footer <marquee>Tous Les droits sont réservés à Iset Beja </marquee> La balise <marquee> permet de faire défiler un texte quelconque horizontalement, par défaut de la droite vers la gauche, sur toute la largeur de la fenêtre du navigateur. Lorsque le texte disparait sur le côté gauche de la fenêtre, il réapparait sur le côté droit. Vous devez ainsi obtenir le résultat suivant : Atelier 9- Balises structurantes en HTML5 Page 4 sur 10 5- Créer maintenant le fichier « style.css » et l’ajouter sous le dossier « style ». 6- Lier le fichier « index.html » au fichier « style.css » 7- Ajouter maintenant au fichier « style.css » le code suivant pour la mise en forme du corps « body » du document body{ background-image:url("../multimedia/font.jpg"); /* image d’arrière plan */ background-size:100%; /* l’image occupe la totalité de la page */ background-repeat:no-repeat; /* pas de répétition de l’image */ } 8- Ajouter maintenant les styles pour « header » et « footer ». Voir ensuite comment devient votre page « index.html » header, footer{ margin:auto; /* centrer l'élément par rapport à la page */ width:75%; background-color: #333333; display:table; } footer { padding: 3px ; color: yellow; font-size: 20px; margin-top:10px; } header { box-shadow: 0px 0px 5px 5px; /* définir l'ombre autour de l'entête*/ font-family: verdana, arial; font-style:italic; text-align:center; text-transform: uppercase ;/* rendre tout le texte majuscule*/ border-radius:20px 20px 20px 20px; /* créer des bordures arrondies*/ margin-top:60px; /* espace entre bordure et le haut extérieur*/ color: white; font-size: 30px; } /* style de l’image dans le header */ header img { float:right; width:100px; Atelier 9- Balises structurantes en HTML5 Page 5 sur 10 height:80px; padding-top:10px; padding-right:20%; padding-bottom:10px; } 9- Ajouter maintenant les styles pour « nav » et voir ensuite comment devient votre page « index.html » nav { font-weight:bold; width: 75%; text-align: center; background-color:#FFDEAD; margin:auto; margin-top:8px; word-spacing:40px; /* définir l’espace entre les différents mots */ padding:2px ; border-radius:20px 20px 20px 20px; } nav ul { list-style-type: none; } nav li { display: inline-block; /* faire apparaître les éléments de la liste sous la même ligne */ } 10- Ajouter maintenant les styles pour « section », « article » et « aside » comme suit et revoir comment devient l’affichage de votre page « index.html » section{ padding: 10px; margin:auto; width:75%; margin-top:2px;} article, aside { display: inline-block; vertical-align: top; text-align: justify; background-color: #706b64; box-shadow: 0px 2px 5px #1c1a19; border-radius: 5px; padding: 10px; color: white; font-size: 16px; margin-top:5px; Atelier 9- Balises structurantes en HTML5 Page 6 sur 10 } article { height:280px; width:655px; } aside { height:280px; position: relative; width: 300px; } aside h3 {text-align:center; font-family: broadway;} 11- Ajouter finalement les styles pour « div » et revoir comment devient l’affichage de votre page « index.html » div img {width:50px; height:50px;} div { box-shadow: 0px 0px 5px 5px; font-family: courier; text-align:center; border-radius:20px 20px 20px 20px; margin:auto; width:75%; margin-top:5px; background-color: #333333; color: white; font-size: 10px; } Atelier 9- Balises structurantes en HTML5 Page 7 sur 10 Annexe Le modèle des boîtes en CSS 1- Explication et illustration du modèle des boîtes Voici une première illustration théorique du modèle des boîtes : • La première boite représente le contenu du document • Autour du contenu, la deuxième boite contient la marge intérieure de l’élément qu’on appelle en CSS le « padding » • La troisième boite contient la bordure de l’élément • La dernière boite va contenir la marge extérieure de l’élément Exemple : <!DOCTYPE html> <html> <head> <style> .p1 { /* font: bleu-vert */ background-color:#088; /* largeur de l'élément */ width: 200px; /* marge intérieure */ padding : 30px; /* bordure: vert */ border: 20px solid #0C0; /* marge extérieure */ margin: 50px; } .p2 { /* font: pink */ background-color:pink; /* largeur de l'élément */ width: 400px; /* marge intérieure */ padding : 50px; /* bordure: vert */ border: 30px solid blue; /* marge extérieure */ margin: 50px; } Atelier 9- Balises structurantes en HTML5 Page 8 sur 10 </style> </head> <body > <p class= "p1"> Para 1 spacing </p> <p class= "p2"> Para 2 spacing </p> </body> </html> 2- Les bordures Nous pouvons définir les bordures d’un élément de différentes manières en CSS : soit en utilisant les trois propriétés border-style, border-width et border-color, soit un utilisant directement la notation courte border. Exemple : <!DOCTYPE html> <html> <head> <style> .p1 { background-color:pink; width: 400px; border: 10px solid black; } .p2 { background-color:pink; width: 400px; border-width: 10px ; border-style: solid; border-color : black; } </style> Atelier 9- Balises structurantes en HTML5 Page 9 sur 10 </head> <body > <p class= "p1"> Para 1 spacing </p> <p class= "p2"> Para 2 spacing </p> </body> </html> 3- Les styles de bordures La propriété border-style peut prendre huit valeurs différentes qui vont définir l’allure générale (le style) de notre bordure. Exemple : <html> <head> <style> .p1 { background-color:pink; width: 400px; border: 10px ridge black; } .p2 { background-color:pink; width: 200px; Atelier 9- Balises structurantes en HTML5 Page 10 sur 10 border-width: 8px ; border-style: dashed; border-color :black; } </style> </head> <body > <p class= "p1"> Para 1 spacing </p> <p class= "p2"> Para 2 spacing </p> </body> </html> Position relative La position relative {position: relative} se détermine par rapport à d'autres éléments de la page, par exemple un élément du code Html. Un positionnement relatif sera donc traité dans le flux du document, et fera référence pour son positionnement à l'élément qui lui est immédiatement supérieur. Cette propriété est valable pour tous les types de balises On utilise souvent le positionnement absolu car c’est plus facile et plus sûr. Exemple : Donne en position absolue : et en position relative avec "Toto et Tata": .toto {position:absolute; top:10px; left:10px;} uploads/s3/ atelier-n09-les-balises-structurantes-en-html5.pdf