D autres balises HTML Exercice récapitulatif

Dimension: px

Commencer à balayer dès la page:

Download "D autres balises HTML Exercice récapitulatif"

Amélie Ledoux
il y a 7 ans
Total affichages :

1 D autres balises HTML Exercice récapitulatif

2 Le titre de la page Apparait dans la partie <head> Est affiché dans la barre de titre du navigateur Décrit ou résume le contenu de la page (10 mots maximum) <title> Université Lyon 2 - Accueil</title>

3 La balise <meta> Permet d ajouter des méta données (des informations sur les données de la page) Attributs : name et content à utiliser ensemble Quelques valeurs pour name : author, copyright, description, keywords, etc. (voir par exemple Exemple : <head> <meta name="description" content="cours HTML" /> <meta name="keywords" content="html, XHTML, Dreamweaver" /> </head> (

4 Jeu de caractères UTF-8 permet, théoriquement, d encoder les caractères de toutes les langues En HTML5 : <meta charset="utf-8"> En XHTML 1.1 : <meta http-equiv="content-type" content="text/html; charset=utf-8" />

5 Définition de la langue En HTML 4.0 : <html lang="fr"> En XHTML 1.0 : <html xmlns=" xml:lang="fr" lang="fr"> L utilisation simultanée de 2 attributs (xml:lang et lang) est préconisée par W3C pour des raisons de compatibilité avec les anciens navigateurs

6 Définition de la langue Utilisez l attribut «lang» pour signaler tout changement de langue dans le texte de la page Exemple : Text in English Avantage : permet aussi le référencement des pages selon les préférences linguistiques de l utilisateur Pour des langues lues de droite à gauche spécifiez le sens de la lecture en utilisant l attribut «dir» de la balise «bdo» <bdo dir="rtl">texte de droite à gauche </bdo>

7 Envoyer un Pour appeler un logiciel de messagerie depuis une page Web, créez un lien (<a href="...">) puis utilisez l'instruction mailto: Exemple : pour écrire à l'adresse test@domaine.fr : <a href="mailto:test@domaine.fr"> Envoyer un message </a> Attention : votre adresse apparaît dans la page HTML!

8 Envoyer un Vous pouvez : spécifier plusieurs destinataires, en les séparant par des virgules préciser l objet du message Exemple : <a href="mailto:test@domaine.fr, toto@orange.fr?subject=objet du mail"> </a> définir les destinataires des copies Exemple : <a href="mailto:test@domaine.fr?subject=objet &cc=test1@domaine.fr &bcc=test2@domaine.fr"> </a>

9 D autres balises HTML <abbr> - abréviation Exemple : L'<abbr title="organisation des Nations Unies" >ONU</abbr> est une organisation internationale fondée en Résultat :

10 D autres balises HTML <address> - pour spécifier une adresse Exemple : <address> ICOM - Université Lumière Lyon2 5 Avenue Pierre Mendès France BRON </address> Résultat :

11 D autres balises HTML texte mis en valeur (emphasized) texte en gras (strong) <dfn>définition</dfn> <code>code (programme)</code> <samp>exemple code (programme)</samp> <kbd>texte (Keyboard text)</kbd> <var>variable</var> <cite>citation</cite> <blockquote> Citation longue Citation longue Citation longue Citation longue Citation longue Citation longue </blockquote>

12 D autres balises HTML

13 D autres balises HTML <dl> - liste de définitions <dt>café</dt> - terme de définition <dd> Graines de caféier, ou poudre formée de ces grains torréfiés et moulus. </dd> - description de définition <dt>thé</dt> <dd> Plante qui produit des feuilles qui séchées, sont utilisées comme boisson </dd> </dl> Résultat :

14 Balisage sémantique Privilégiez le balisage sémantique notamment pour les listes (ol, ul, dl), les titres de hiérarchie (hx), les citations (q, blockquote), les tableaux de données (th, caption, attribut summary, scope, id/headers), les étiquettes de formulaires (label, attribut title) et les groupes de champs de formulaires ou d'options (fieldset, legend, optgroup)

15 Balise <video> - HTML 5 Pour spécifier une vidéo Attributs : audio="muted" la seule valeur possible actuellement autoplay="autoplay" controls="controls" height="nombre pixels" width=" nombre pixels " loop="loop" poster="url" (url d'une image qui représente la vidéo) preload="auto" ou "metadata" ou "none" src="url"

16 Balise <video> - HTML 5 Exemple : <video width="320" height="240" controls="controls"> <source src="film.mp4" type="video/mp4" /> <source src="film.ogg" type="video/ogg" /> Votre navigateur ne supporte pas la balise video. </video>

17 Formats vidéo Ogg = fichiers.ogg - Theora video codec et Vorbis audio codec MPEG4 = fichiers.mp4 - H.264 video codec et AAC audio codec WebM = fichiers WebM - VP8 video codec et Vorbis audio codec

18 Compatibilité des formats avec les navigateurs Navigateur MP4 WebM Ogg Internet Explorer Oui Non Non Firefox Oui Oui Oui Google Chrome Oui Oui Oui Apple Safari Oui Non Non Opera 25 Oui Oui Oui

19 D autres balises HTML La liste n est pas finie <style> </style> etc. Attention à la compatibilité avec les navigateurs!!!

20 Exercice Réalisez une page HTML sur les Jeux Olympiques (pour récupérer des informations sur les sports/epreuves voir Utilisez un maximum de balises HTML apprises Ajoutez une balise "title"et le nom de l auteur, ainsi qu'une description et des mots clés dans des balises "meta". Mettez en haut de la page le titre JEUX OLYMPIQUES, en style "h1" Créez un tableau de 2 colonnes qui contient: Sur la première ligne, fusionnez les 2 cellules et mettez EDITIONS Dans la première colonne : les jeux d été; Dans la deuxième colonne : les jeux d hiver. Les jeux de la même année doivent apparaître sur la même ligne (ex: Paris 1924 à gauche et Chamonix 1924 à droite sur la même ligne). Les cellules vides adjacentes doivent être fusionnées.

21 Exercice Page 2 : Récupérez des informations sur 2 sports. Mettez en "h1" les noms des sports que vous avez choisis. Pour chaque sport ajoutez : un texte qui le décrit une image une vidéo une liste non ordonnée contenant au moins 3 épreuves Ajoutez à la fin de la page : Auteur (en italique) : (votre) Nom et Prénom et lien hypertexte indiquant votre adresse de messagerie Date (en gras) : la date et l'heure En bas de page mettez un lien hypertexte «Haut de page» qui permet de se déplacer au début de la page.

22 Exercice Page 3 : Créez un formulaire qui contient : Athlète (champ de texte de maximum 60 caractères) Type de classement : individuel, par équipe (boutons radio) Médaille : Or, Argent, Bronze (cases à cocher) Sport : liste d options Epreuve : liste d options Commentaires : une zone de texte de 5 lignes et 25 colonnes Un bouton pour l'envoi de données Un bouton pour la réinitialisation du formulaire Ajouter des commentaires dans votre code Validez toutes les pages du site ( ) Vérifier si la liste des critères Accessiweb est respectée ( Publiez votre site sur le serveur Infographie et essayez de re-valider le site

Documents pareils

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos. KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html