Technologies Web - HTML Pages - 4 PDF

Summary

This document provides a comprehensive overview of HTML elements and their use cases. It includes examples of how to use elements such as links, pointers, lists, and various styles to format web content. It is intended for use in introductory web development courses or as a general reference.

Full Transcript

Ch. I. Hyper Texte Markup Langage Les lien dans les documents HTML : Le lien est un élément cliquable qui renvoie l’utilisateur sur une nouvelle page (ou lui permet de télécharger un fichier). Il est souvent stylé différemment (bleu souligné par défaut) Il peut renvoyer: Vers un autre...

Ch. I. Hyper Texte Markup Langage Les lien dans les documents HTML : Le lien est un élément cliquable qui renvoie l’utilisateur sur une nouvelle page (ou lui permet de télécharger un fichier). Il est souvent stylé différemment (bleu souligné par défaut) Il peut renvoyer: Vers un autre site(lien externe) Vers une autre page du site (lien interne) Vers des fichiers( image, pdf,etc.) 44 Ch. I. Hyper Texte Markup Langage Pointeur vers un autre document : L’hyperlien est créé par la balise Les attributs possibles sont : HREF La syntaxe complète est texte Où HREF est un raccourci pour " Hypertexte référence“, document désigne le document vers lequel on pointe et texte représente le texte qui sera affiché pour représenter le lien hypertexte. Exemple : pour charger le fichier2.html 45 Ch. I. Hyper Texte Markup Langage Pointeur vers un autre document : fichier 1 Ce fichier permet de lancer le suivant texte d'appel fichier 2 Nous somme dans le fichier2.html 46 Ch. I. Hyper Texte Markup Langage Pointeur : Chemin d’accès relatif : Dans ce cas, relativement par rapport à l’endroit où vous vous situez dans une arborescence, vous exprimez le chemin d’accès vers le fichier lié. HREF= "fichier2.html" Dans le répertoire courant. HREF= "tempo/version1/fichier2.html" Dans le rép. 2 niveaux au dessous. HREF= "../../fichier2.html" Dans le rép. 2 niveaux au dessus. fichier 3 Ce fichier permet de lancer le suivant texte d'appel 47 Ch. I. Hyper Texte Markup Langage Pointeur : lien vers un autre site distant : Pour cela il suffit de remplacer dans l’exemple précédent document par une URL. Exemple : fichier 4 Ce fichier permet de lancer le site suivant : www.google.fr 48 Ch. I. Hyper Texte Markup Langage Liens externes vers d’autres protocoles : Lien pour l’envoie d’un E-mail : Envoyez moi un message 49 Ch. I. Hyper Texte Markup Langage Liens page1 vers page2 : Page d'accueil Lancer l’exemple Lancer l’exemple 50 Ch. I. Hyper Texte Markup Langage Listes : HTML définit 5 types de listes : 1. Les listes non ordonnées, ou à puces, 2. Les listes ordonnées. 3. Les listes de définitions. 4. Les listes de répertoires. 5. Les listes de menus 51 Ch. I. Hyper Texte Markup Langage Les listes ordonnées : La balise permet de créer une liste ordonnée et numérotée. Il faut l’ouvrir en début de liste et la fermer après le dernier élément de la liste. La balise permet de créer un élément de la liste. 52 Ch. I. Hyper Texte Markup Langage Liste ordonnée (numérotée) : Listes numérotées Voitures allemandes BMW MERCEDES PORSCHE 53 Ch. I. Hyper Texte Markup Langage Les liste non ordonées : La balise permet de créer une liste non ordonnée. Il faut l’ouvrir en début de liste et la fermer après le dernier élément de la liste La balise permet de créer un élément de la liste 54 Ch. I. Hyper Texte Markup Langage Liste non ordonnée : Listes non numérotées Voitures allemandes BMW MERCEDES PORSCHE 55 Ch. I. Hyper Texte Markup Langage Contenu d’une liste : Les éléments et ne peuvent contenir que des éléments Chaque élément peut contenir des éléments de bloc ou des éléments incorporés Les listes peuvent s’imbriquer On peut mélanger et à condition de les fermer correctement 56 Ch. I. Hyper Texte Markup Langage Exemple de listes : Exercice 1 : Exercice 2 : 57 Ch. I. Hyper Texte Markup Langage Style : L’utilisation de différents styles de polices de caractères permet de varier la présentation d’un texte. Les commandes de styles physiques sont les suivantes : texte met le texte en italique. Exemple à faire : texte met le texte en gras. texte souligne le texte. texte barre le texte. texte indice. texte exposant 58 Ch. I. Hyper Texte Markup Langage Style : Texte en gras, italique, centré texte en gras texte en italique texte souligné texte centre texte centré en gras texte en rouge, gras, centré de taille 2 59 Ch. I. Hyper Texte Markup Langage Style : Paragraphes et retraits Paragraphes : Vous pouvez former des paragraphes si vous le souhaitez ce qui vous permettra d'aligner du texte soit à gauche (alignement par défaut) soit à droite, au centre ou encore en justifié texte aligné à droite texte aligné au centre texte aligné à gauche texte justifié : blablablablablablablablabla blablablablablablablablablablabla blablablablablablablablabla blablablablablablablablablablabla blablablablablablablablabla blablablablablablablablablablabla Titres : Titre en 1 Titre en 2 Titre en 3 Titre en 4 Titre en 5 Titre en 6 60 Ch. I. Hyper Texte Markup Langage TEXTE pré-formaté : Les espaces (plusieurs à la suite), tabulations, retour chariot n’ont pas de valeur en HTML. La commande … est utilisée pour inclure un texte pré-formaté dans un document HTML. Les espacements, tabulations et retour chariot gardent alors leur sens initial. Attention : les commandes HTML existantes dans le texte pré-formaté seront interprétées. 61 Ch. I. Hyper Texte Markup Langage TEXTE pré-formaté (exemple ) : Texte préformaté Apprendre le langage HTML : - - - - - -- ---- - --- - - - --- - - - - Un mot d'encouragement ou un compliment fait toujours un palisir. 62 Ch. I. Hyper Texte Markup Langage Les couleurs utilisées dans BODY : Par défaut le fond du document est grais clair, les caractères sont noirs, les prises d’hypertextes sont bleus… Il est possible de modifier ces couleurs en rajoutant à la commande les options suivantes: BGCOLOR=c pour le font du document TEXT=c pour la couleur des caractères LINK=c Hypertextes non utilisées VLINK=c Hypertextes utilisées ALINK=c Hypertextes en sélection c de #000000 à # FFFFFF (hexadécimal). 63

Use Quizgecko on...
Browser
Browser