LES LISTES. 2 types de listes :

Transcription

1 LES LISTES 2 types de listes : Liste non-ordonnée ou liste à puces ex : fraise framboise pomme intégration de la liste à puces : <ul></ul> Délimiteur d un élément de la liste : <li></li> <ul> <li>fraise</li> <li>framboise</li> <li>pomme</li> </ul> Liste ordonnée ou liste numérotée ex : 1. fraise 2. framboise 3. pomme intégration de la liste numérotée : <ol></ol> Délimiteur d un élément de la liste : <li></li> <ol> <li>fraise</li> <li>framboise</li> <li>pomme</li> </ol> On peut imbriquer plusieurs listes 1. fraise compote confiture 2. framboise 3. pomme <ol> <li>fraise <ul> <li>compote</li> <li>confiture</li> </ul> </li> <li>framboise</li> <li>pomme</li> </ol>

2 BALISE DEFINITION - <dl> (Definition list) : élément structurel annonçant et encadrant une liste de définitions. - <dt> (Definition term) : élément contenant le terme à définir. - <dd> (Definition description) : élément contenant la description du terme précédemment écrit. <dl> <dt>html</dt> <dd>» langage utilisé pour affiché du contenu sur le web</dd> <dt>balise</dt> <dd>» élément présentant certaines fonctionnalités</dd> <dt>attribut</dt> <dd>» élément spécifique à une balise pouvant prendre certaines valeurs</dd> </dl> html» langage utilisé pour affiché du contenu sur le web balise» élément présentant certaines fonctionnalités attribut» élément spécifique à une balise pouvant prendre certaines valeurs BALISES CITATION Différentes balises pour différents usages - <blockquote> : Utilisée pour une longue citation venant d'une source externe, l'adresse de la source peut-être indiquée dans l'attribut "cite". Dans le cas d'un forum de discussion ou d'un blog, cette balise peut être utilisée pour citer le commentaire d'un autre utilisateur. Ne pas utiliser cette balise pour un dialogue. A ne pas confondre avec la balise <q>. Suivant les navigateurs différents affichages possibles : - un décalage par rapport à la marge courante du document - un retour à la ligne précédent et suivant le bloc de texte - éventuellement différents autres styles (italique...) victor Hugo nous dit : <blockquote cite=" l'appétit vient en mangeant et l'amour en possédant. </blockquote> - <q> : Utilisée pour une citation courte provenant d'une source externe. L'adresse de la source peut-être également indiquée dans l'attribut "cite". dans la page du rapport trimestriel <cite>augmenter vos ventes</cite>, on nous dit que <q cite=" être efficace, nous devons regrouper nos compétences</q>. - <cite> : Utilisée pour le titre d'une oeuvre (livre / film / chanson/...), d'un document ou d'un évènement. Cette balise peut-être peut-être utilisée conjointement avec la balise <q>. Cette balise ne peut être utilisée pour une personne. mon livre préféré est <cite>les misérables</cite> de Vitor HugoDans tous les autres cas, on utilise les guillemets sans balise spécifique.

3 Les liens <a></a> Anchor : Lien hypertexte Doit toujours être encadrée par une balise «block» (comme ) Lien (relatif) vers une autre page du même site : <a href="contact.html">page contact</a> Lien (relatif) vers une autre page du même site, placée dans un dossier : <a href="maisons/chaumiere.html">page contact</a> Lien (absolu) vers un autre site : <a href=" vers Google</a> est essentiel L'attribut target désigne comment la page va s'ouvrir. Valeurs de l'attribut : _blank = nouvel onglet / _self = même onglet Lien vers une ancre, un autre endroit de la même page par exemple <body id="top"> <a href="#top">remonter en haut de page</a> Lien vers une adresse Le navigateur ouvre le logiciel demessagerie par défaut <a href="mailto:jef@yahoo.com?subject=important"> </a> A éviter car tous les utilisateurs n'ont pas forcément thunderbird ou outlook de configurer. Et c'est aussi un bon moyen de se faire aspirer l' pour être spamer par la suite. Lien sur une image : Il faut encadrer <img> avec <a></a> <a href=" src="google.jpg" alt="logo Google" width="32" height="32" /></a> Lien sur un numéro de téléphone Me contacter au :<a href="tel: "> </a> Appel au clic (smartphone) Lien pour télécharger un fichier (.doc,.pdf,.zip) <a href="cours.zip">télécharger les cours</a> Le navigateur reconnaît automatiquement le type de fichier et vous propose la procédure appropriée pour le télécharger ou l'afficher. Les attributs: "hreflang", "media", "rel" et "target" ne peuvent être utilisé sans l attribut href. hreflang : Indique la langue de la page vers laquelle pointe le lien media : Indique le type de document vers laquelle pointe le lien. La valeur par défaut est : all rel : Indique la relation entre le document actuel et celui vers lequel pointe le lien (exemple de valeur : "author / bookmark / external / next / prev / search /...") Trick pour afficher le lien lors de l'impression, à détailler avec le ciblage CSS print { a[href]::after { content: " (" attr(href) ")"; } a[href^="#"]::after { content: ""; } }

4 Les images <img> 3 formats sont utilisés en HTML :.jpg : Grand nombre de couleurs (format idéale pour les photos) Pas de couleur de transparence.png : 2 versions : PNG 8bits 256 couleurs / PNG 24bits 16 millions de couleurs Couleurs de transparence.svg : SVG (Scalable Vector Graphics) est un format de dessin vectoriel.gif : Vieux format : 256 couleurs maxi Une couleur de transparence, image animée 2 attributs obligatoires : src : source indique où se trouve l'image à insérer. alt : texte alternatif description courte de l'image texte qui sera mis si le navigateur n'arrive pas à télécharger l'image ou sera utiliser pour les navigateurs des personnes mal-voyantes. Attributs optionnels : title : titre de l'image permet l'affichage d'une info-bulle lors du passage de la souris sur l'image. width et height : Vous pouvez déclarer l'un ou l'autre, dans ce cas la proportion de l'img sera conservée. <img src="avion.jpg" alt="avion" title="un bel avion" width="250" /> Illustration légendée Des nouveaux venus avec le HTML5 : Balises <figure> et <figcaption> Le rôle de <figure> est d'illustrer des photos et de légender des graphiques ou schémas. Elle s'intègre à l'extérieur de la balise Les éléments <figure> et <figcaption> fonctionnent ensemble pour associer une légende à une illustration ou tout autre élément média. <figure> <img src="image.jpg" alt="" /> <figcaption>légende associée</figcaption> </figure> <figure> C'est un conteneur dans lequel s'insèrent divers éléments comme des images, des schémas, des vidéos, des tableaux ou encore des blocs de code. L'objectif est de lier ce contenu à une légende, définie par l'élément <figcaption>. <figcaption> Enfant direct de <figure>, son rôle est de légender son parent, sous forme de texte et/ou de liens. Il peut se placer avant ou après le contenu principal de <figure>. Holy shit, that's awsome!! Il est possible de regrouper une liste d'images et de les lier à l'aide d'un unique élément <figcaption> : South Park : Cartman's friends.

5 video & audio Les balise <video> et <audio> offrent en HTML5 une solution simple, native pour les navigateurs dans l'intégration d'une vidéo ou d'une bande son dans une page web. <video width="400" height="222" controls> <source src="videos/mavideo.mp4" type="video/mp4"> <source src="videos/ mavideo.webm" type="video/webm"> <source src="videos/ mavideo.ogg" type="video/ogg"> Ici l'alternative à la vidéo : un lien de téléchargement, un message, etc. </video> Ici l'alternative à la vidéo : un lien de téléchargement, un message, etc. Vidéo Pixar <audio controls preload="none"> <source src="audio/son.mp3" type="audio/mpeg"> <source src="audio/son.ogg" type="audio/ogg"> </audio> La version mp4 est placée en premier afin d'être sûr que les iphone, ipad et autres ipod puissent la lire. Attributs L'attribut controls donne accès aux contrôles de lecture (boutons de navigation, volume, etc, selon les possibilités du navigateur), ou les masque s'il est omis. L'attribut preload="auto" permet de de spécifier au navigateur de débuter le téléchargement de la vidéo dès chargement dfe la page, anticipant le fait que l'utilisateur lise la vidéo. Attention, cette option est à manier avec prudence car elle peut ralentir le chargement global de la page. L'attribut autoplay="true" comme son nom l'indique, permet de lancer la lecture automatiquement. Cela peut également être problématique avec une connexion à faible bande passante ou sur un terminal mobile. De manière générale, évitez d'imposer vos choix à l'utilisateur... et à sa connexion internet. L'attribut poster="image.jpg" permet d'indiquer une image à afficher par défaut dans l'espace réservé par la vidéo, avant que la lecture de celle-ci ne soit lancée. L'attribut loop indique que la lecture doit s'effectuer en boucle. Conversion de fichiers Plusieurs logiciels permettent de générer les fichiers MP4, WebM et OGV. Le plus simple et pratique à mon sens est d'utiliser VLC player. Dans média choisir convertir / enregistrer. Logiciel de conversion en ligne : Miro Video Converter

6 EXOS Créer un dossier html_02 Exercice 1 : Listes 2/ Enregistrer-la de la manière suivante : ex01.html 3/ Faire une liste ordonnée 4/ Faire une liste à puces 5/ Faire une liste ordonnée elle même intégrée dans une liste à puces 6/ placez le fichier via FTP dans le dossier html_02 7/ Testez-la sous Firefox 8/ Quelle est la différence entre les 2 types de liste dans le code? Donnez la réponse sous forme de paragraphe dans votre code Exercice 2 : Images 2/ Enregistrer-la de la manière suivante : ex02.html 3/ Choisir trois images avec différents formats. Les intégrer dans la page web sans oublier leurs attributs 4/ Testez-la sous Firefox 5/ Insérez l'attibut height afin d'harmoniser leur intégration 6/ Intégrez la balise figure pour vos 3 images avec une légende 7/ Quelles sont vos observations ou remarques? Donnez la réponse sous forme de paragraphe dans votre code 8/ placez le fichier via FTP dans le dossier html_02 Exercice 3 : Liens 2/ Enregistrer-la de la manière suivante : ex_03.html 3/ Intégrez un titre, plusieurs longs paragraphes avec l'aide de lorem ipsum 4/ Créer des liens vers des pages web de votre choix 6/ placez le fichier via FTP dans le dossier html_02 7/ Testez-la sous Firefox Exercice 4 : Liens suite 2/ Enregistrer-la de la manière suivante : ex_04.html 3/ Intégrez un menu avec la balise nav et la balise liste Items : A propos / Les services / Nous contacter 4/ Intégrez des liens sur chacun des éléments de la liste 5/ Intégrez 3 balises section chacune contenant : un titre de section(a propos / Les services / Nous contacter), un article et son titre, une définition et une citation liées à l'aricle, contenues dans une balise aside 6/ Ajouter aux liens du menu des ancres pointant vers les différentes sections Exercice 5 : Projet Créer votre site web 1/ Créer un sous-dossier intitulé Projet 2/ Créer une première page accueil index.html 3/ Sur cette page : a/ Mettre le title de votre page web b/ Créer une structure HTML5, une liste dans la balise nav avec le nom de chacune des pages que vous allez créer (Cette liste se trouvera sur chacune des pages créées) c/ Transformer chaque ligne de la liste en lien vers les autres pages de votre site 4/ Créer une deuxième page site 5/ Sur cette page : a/ Mettre le title de votre page web

7 b/ Créer une structure HTML5 c/ Mettre la liste sous forme de liens comme pour la page accueil d/ Faire une liste de lien (4-5 liens) vers des sites qui vous intéressent e/ Décrire ces sites dans de courts articles 6/ Créer une troisième page images 7/ Sur cette page : a/ Répéter les points a à c de la page précédente b/ Choisir 3-4 images c/ Les mettre les unes en dessous des autres d/ Utiliser la balise figure pour décrire ces images 8/ Créer une quatrième page video ou audio 9/ Sur cette page : a/ Répéter les points a à c de la page précédente b/ Choisir 1 video et un son à intégrer, y ajouter la balise figure et figcaption 10/ Commenter votre code