Remerciez-le!

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

Chapitre 3 : Autres éléments de HTML5 1 Chapitre 3 : Autres Eléments HTML5 Part

Chapitre 3 : Autres éléments de HTML5 1 Chapitre 3 : Autres Eléments HTML5 Partie 1 : Les Listes I. Introduction HTML5 permet de créer automatiquement plusieurs types de listes dont principalement les listes non numérotées, les listes numérotées, les listes descriptives... Ces listes peuvent s'imbriquer les unes dans les autres, ce qui permet l'élaboration de listes relativement évoluées (table de matière) et parfois compliquées (comme l’organigramme d’une entreprise). II. La liste non numérotée C'est la liste la plus simple. Elle se compose d'une balise du début de liste (unordered list) <ul>, des balises de chaque élément de la liste (list item) <li> et </li> et à la fin, la balise de la fin de la liste </ul>. <ul> <li> …. </li> <li>… </li> </ul> II.1. Le style « list-style-type » Un attribut de style peut être ajouté à une liste non ordonnée, pour définir le style du marqueur : Style Forme des éléments de la liste list-style-type:disc balles (par défaut) list-style-type:circle cercles list-style-type:square carreaux list-style-type:none Les éléments de la liste sont non marqués Exemple Code CSS ul {list-style-type:circle} Chapitre 3 : Autres éléments de HTML5 2 Extrait du code HTML <body> Exemples de langages : <ul> <li> Turbo Pascal : universel </li> <li> Cobol : Applications de gestion </li> <li> Fortran : Applications scientifiques </li> <li> HTML : Création de pages web</li> </ul> </body> Résultat Exemples de langages : Turbo Pascal : universel Cobol : Applications de gestion Fortran : Applications scientifiques HTML : Création de pages web II.2. Le style « list-style-image » Une image peut être utilisée comme puce. La propriété list-style-image offre la possibilité de remplacer la puce classique par une image dont on doit indiquer le chemin. On lui attribue alors la propriété : list-style-image:url(lefichierpuceimage) Exemple : Extrait du Code HTML : <ul> <li> Google. </li> <li> Bing. </li> <li> Wolfram. </li> <li> Alexa. </li> </ul> Code CSS ul { list-style-image: url(images/cc-ok.png); font-size:16px; } Chapitre 3 : Autres éléments de HTML5 3 Résultat III. La Liste numérotée Au lieu d'utiliser les balises <ul> et </ul> comme dans la liste précédente, nous utiliserons les balises d’ordered list <ol> et </ol>. Les balises <li> et </li> quant à elles servent toujours pour indiquer le numéro de l'item sélectionné. Les propriétés de cette balise sont: <ol> <li> …. </li> <li>… </li> </ol> Les styles CSS possibles avec les listes numérotées : La propriété list-style-type peut avoir les valeurs: • decimal 1, 2, 3... • decimal-leading-zero 01, 02, 03... • lower-alpha a, b, c... • upper-alpha A, B, C... • lower-roman i, ii, iii, iv, v • upper-roman I, II, III, IV, V Exemple : Code CSS ol{ list-style-type: lower-alpha} Code HTML <body> Exemples de langages : <ol> <li> Turbo Pascal, C : universels</li> <li>Cobol : Applications de gestion</li> <li>Fortran : Applications scientifiques</li> <li>HTML : Création de pages web</li> </ol> </body> Chapitre 3 : Autres éléments de HTML5 4 Résultat Remarque On peut commencer la numérotation des éléments d’une liste à partir d’un certain ordre. Il suffit de spécifier cet ordre dans la propriété start de <ol>. Exemple : Numéroter les éléments de la liste précédente à partir de c. <ol start="3"> Et on aura le résultat suivant : IV. La liste descriptive Dans le cas de ces listes, on fait appel aux balises definition list <dl> pour le début de liste, definition term <dt> pour le titre de l'élément, definition description <dd> pour sa description et </dl> pour la fin de liste. <dl> <dt> Titre de la définition1 </dt> <dd> Description1 </dd> <dt> Titre de la définition2 </dt> <dd> Description 2 </dd> … </dl> Exemple : Extrait du code HTML Exemples de langages <dl> <dt> Turbo Pascal </dt> <dd> Langage universel </dd> <dt> Cobol </dt> <dd> Langage de programmation des apps de gestion </dd> <dt> Fortran </dt> <dd> Langage scientifique </dd> </dl> Chapitre 3 : Autres éléments de HTML5 5 Résultat V. Les listes imbriquées La création de listes imbriquées est simple. Il suffit de considérer que la liste que l'on vient d'encoder est un élément d'une liste plus grande. Exemple : Code HTML <body> Exemples de logiciels <ol> <li> Systèmes d’exploitation <ul> <li> Microsoft Windows</li> <li> Linux</li> <li> Mac</li> </ul> </li> <li> Traitements de texte <ul> <li> Microsoft Word</li> <li> WordPad</li> <li> Word Perfect</li> </ul> </li> <li> Systèmes de Gestion de Bases de Données <ul> <li> Microsoft Access</li> <li> Oracle</li> <li> Foxpro. </li> </ul> </li> </ol> </body> Chapitre 3 : Autres éléments de HTML5 6 Résultat VI. La liste Horizontale Les listes en HTML5 peuvent être présentées de différentes façons avec CSS par exemple une liste peut être affichée horizontalement Exemple : Code CSS ul li { display: inline; background-color:blue; color: white; margin-left:10px; padding:10px; border-radius: 4px; } Code HTML <body> <h1>Liste Horizontale</h1> <ul> <li> PHP 5 </li> <li> ASP.Net </li> <li> J2EE </li> </ul> </body> Résultat Chapitre 3 : Autres éléments de HTML5 1 Partie 2 : Les Liens hypertextes I. Introduction La notion d’hypertexte est apparue avec le langage HTML, le principe est de permettre à l’internaute d'aller lire un texte se rapportant au sujet qu’il est entrain de lire et qui se trouve ailleurs dans la page en cours ou encore à un autre endroit sur l'Internet. Un tel texte apparaîtra sous une forme différente du reste de la page il suffit de cliquer dessus pour le rendre actif. II. La balise <a> Pour faire un lien, on utilise la balise : <a>. Il faut cependant lui ajouter un attribut, href, pour indiquer vers quelle page le lien doit conduire. La syntaxe générale des liens est la suivante: <a href ="URL/nomfichier.extfichier"> texte du lien souligné </a> Remarque: Par défaut, le lien s'affiche en bleu souligné. Si la page a déjà été visitée, le lien s'affiche en violet. On peut changer les couleurs par défaut par des styles Css: Exemple Code CSS /*liens jamais cliqués*/ a:link {color:black; background-color:transparent}; /*liens déjà visités */ a:visited {color:black; background-color:transparent}; /*Elément survolé par le pointeur de la souris*/ a:hover {color:red; background-color:transparent}; /* S’applique à l’élément lorsque le bouton de la souris et enfoncé durant un clic */ a:active {color:grey; background-color:transparent}; III. Lien externe C’est un lien hypertexte vers une page située à l’extérieur de la machine en cours. On peut avoir des liens vers des fichiers autres que des pages web (HTML), par exemple des fichiers au format PDF, DOC,… des fichiers son (MP3, WAV,…), des fichiers vidéos (AVI, MPEG,…), des fichiers images (GIF, JPEG, PNG,…) ou vers un fichier script. Chapitre 3 : Autres éléments de HTML5 2 Lors de l’ouverture du lien le logiciel associé, s’il existe, sera lancé pour lire le fichier. Par exemple pour un fichier DOC c’est Microsoft Word qui sera lancé. La forme générale du lien est donc: <a href ="adresseURL/nomfichier.extfichier"> lien souligné </a> Exemple: <a href="http://www.google.fr"> moteur de recherche </a> IV. Lien local (vers une page sur le même ordinateur) Dans ce cas, les adresses URL peuvent être relatives ou absolues: IV.1. Les adresses relatives L'adresse de la page est relative au dossier (répertoire) du document HTML contenant la balise <a> appelante. <a href = "répertoire/.../nomfichier.extfichier"> texte du lien </a> IV.2. Les adresses absolues Dans ce cas, l’adresse URL est le chemin absolu de la page à partir du lecteur contenant le document HTML contenant la balise <a> appelante. L’adresse URL dans le lien aura la forme suivante: <a href = "c:/-----/----/page.html"/page.htm> texte du lien </a> Cette adresse risque de changer en transportant le document HTML d’une machine à une autre car on n’est pas sûr de trouver les mêmes chemins sur les deux machines. IV.3. La balise <base> La balise <base> est utilisée pour déclarer un chemin absolu qui sera utilisé comme référence pour toutes les autres url présentes dans un document HTML. Elle est généralement déclarée dans la partie <head> du document, mais peut être utilisée dans le <body>. Il est possible de redéfinir sa valeur dans le document : c'est la dernière balise <base> rencontrée qui est utilisée comme référence. Elle impacte tous les chemins (urls et images). Propriétés pour la balise base : Propriétés Définition Valeurs href Chemin absolu s'appliquant aux url suivant la balise target Indique dans quelle fenêtre s'ouvre le document _blank _parent _self _top Un slash '/' est automatiquement rajouté entre la valeur spécifiée dans l'élément base et l'url relative écrite. Chapitre 3 : Autres éléments de HTML5 3 Exemple : Code HTML <html> <head> <base href="http://www.startyourdev/html/" target="_blank" /> </head> <body> <a href="tag-html-index">Aller sur l'index des balises html</a> <body> </html> Résultat : Le lien href="tag-html-index" conduira directement dans cet exemple vers : http://www.startyourdev/html/tag-html-index Remarques: • Il vaut mieux utiliser des références relatives qu'absolues, si c’est possible, pour ne pas être obligé de mettre à jour les références lors de déplacement des fichiers. L'organisation, la plus conseillée, d'un site web consiste à regrouper l'ensemble de tous les éléments de son site (pages web, images, ...) dans un même dossier (répertoire). On pourra ainsi "transporter" aisément notre site pour l’héberger dans un serveur d’hébergement sans être obligé de changer les chemins d’accès. • uploads/s3/ chap3-autres-elements-html5.pdf