HTML, Langage de balisage Web PDF

Ch. I. Hyper Texte Markup Langage La base : Remarque 1 : HTML n'est pas un langage de programmation ! Ce n'est qu'un langage de description de documents. Remarque 2 : La page texte HTML est composée à partir de balises qui peuvent être définies avec des attributs précisant le...

Ch. I. Hyper Texte Markup Langage La base : Remarque 1 : HTML n'est pas un langage de programmation ! Ce n'est qu'un langage de description de documents. Remarque 2 : La page texte HTML est composée à partir de balises qui peuvent être définies avec des attributs précisant les conditions d'utilisation de la balise. Elles sont ouvertes puis fermées et définissent comment le navigateur interprète le texte inclus dans la balise ( texte ). 24 Ch. I. Hyper Texte Markup Langage Balises très utiles : Voici une liste de balises et leurs fonctionnalités : : pour retourner à la ligne. : pour mettre un texte en gras. : pour déclarer un paragraphe. : insérer une ligne horizontale. : pour mettre un texte ou un objet au centre. : Cette balise n’a aucune valeur sémantique (Permet de regrouper d’autres blocs de HTML et de leur donner un style CSS commun). : pour définir la couleur et la taille d'un texte. Et bien sûr il faut insérer le texte ou l'objet en question entre la balise concernée. Par exemple : ce texte est en gras et la même chose pour la balise font : ce texte est vert 25 Ch. I. Hyper Texte Markup Langage Exemple 1 : Deuxième essai Retourner à la ligne. Mettre un texte en gras. Déclarer un paragraphe. Mettre un texte ou un objet au centre. Définir la couleur et la taille d'un texte. 26 Ch. I. Hyper Texte Markup Langage Exemple 2 : Deuxième essai Retourner à la ligne. Mettre un texte en gras. Déclarer un paragraphe. Mettre un texte ou un objet au centre. Définir la couleur et la taille d'un texte. 27 Ch. I. Hyper Texte Markup Langage Tailles de polices : Il existe 7 tailles de polices. La commande est … où n prend les valeurs de 1 à 7. 1, petit caractères, 7, gros caractères. La police par défaut possède la taille 3. La taille de la police peut être fixée dans l’en-tête du document par la commande : où n prend les valeurs de 1 à 7. 28 Ch. I. Hyper Texte Markup Langage Tailles de polices : Exemple 1 : Exemple de la balise basefont MAJUSCULES - minuscules 5 MAJUSCULES - minuscules 5 MAJUSCULES - minuscules 5 MAJUSCULES - minuscules 5 MAJUSCULES - minuscules 5 MAJUSCULES - minuscules 5 MAJUSCULES - minuscules 29 Ch. I. Hyper Texte Markup Langage Exemple 2 : Exemple de la balise font MAJUSCULES - minuscules taille 7 MAJUSCULES - minuscules taille 6 MAJUSCULES - minuscules taille 5 MAJUSCULES - minuscules taille 4 MAJUSCULES - minuscules taille 3 MAJUSCULES - minuscules taille 2 MAJUSCULES - minuscules taille 1 La taille des lettres d'un mot peut VAR I ER 30 Ch. I. Hyper Texte Markup Langage Couleurs : HTML propose deux façons de coder une couleur : 1. Par son nom : Il existe une liste de couleurs reconnues par la plupart des navigateurs. Les seize couleurs simples sont données dans le tableau ci-dessous 31 Ch. I. Hyper Texte Markup Langage Couleurs : 2. Par le triplet RGB : Toute couleur peut être décomposée en trois couleurs : rouge, vert, bleu (Red, Green, Blue d'où RGB) d'intensité convenable. Cette intensité est exprimée en un nombre compris entre 0 et 255. Ce nombre est codé en hexadécimal : il est alors compris entre 0 et FF. Par exemple, #BA1B85 code une intensité de BA (186) pour le rouge, 1B (27) pour le vert, 85 (133) pour le bleu qui donne : 32 Ch. I. Hyper Texte Markup Langage Couleurs exemple 1 : Texte en couleurs Rouge Rouge Vert Vert Bleu Bleu Jaune Jaune 33 Ch. I. Hyper Texte Markup Langage Couleurs exemple 2 : Texte en couleurs 2 MAJUSCULES - minuscules taille 7 MAJUSCULES - minuscules taille 6 MAJUSCULES - minuscules taille 5 MAJUSCULES - minuscules taille 4 MAJUSCULES - minuscules taille 3 MAJUSCULES - minuscules taille 2 MAJUSCULES - minuscules taille 1 La taille des lettres d'un mot peut VARIER 34 Ch. I. Hyper Texte Markup Langage Les Entêtes avec x :1→ 6 : Ces entêtes servent à diviser le texte en section de la même manière qu’un livre. Il existe six niveaux de titre et Un nouveau niveau provoque un passage à la ligne, les éléments de titre étant des éléments de bloc. Le niveau le plus élevé est le 1, le plus petit est le 6. Exemple : TITRE PRINCIPALE. 35 Ch. I. Hyper Texte Markup Langage Les Entêtes exemple : essai n°3 TITRE PRICIPALE TITRE SECONDAIRE paragraphe principale paragraphe secondaire titre paragraphe 1 secondire texte1, texte1, texte1, texte1, texte1 titre paragraphe 2 secondire texte2, texte2, texte2, texte2, texte2 36 Ch. I. Hyper Texte Markup Langage Séparateurs : Contrairement à tous les autres systèmes de traitement de texte, le retour de chariot n’a aucune valeur en HTML. C’est le navigateur Web lui-même qui définira le passage à la ligne en fonction de facteurs comme la taille des polices de caractères, la largeur de la fenêtre de visualisation etc. De même, plusieurs espaces dans un document HTML seront ramenés à un seul. Cette commande (fin de paragraphe) termine un paragraphe et insère une ligne vide après le paragraphe 37 Ch. I. Hyper Texte Markup Langage Séparateurs : Exemple : trace une ligne sur 75% de la largeur de la fenêtre. trace une ligne d’épaisseur 5 pixels. trace une ligne sur 75% de la largeur de la fenêtre avec un alignement à gauche. NOSHADE Lorsqu’il est présent dans le marqueur : l’effet est une ligne pleine sans ombrage. 38 Ch. I. Hyper Texte Markup Langage Séparateurs : pour tracer une ligne horizontale de séparation : WIDTH fait varier la largeur de la ligne en % (valeur par défaut 100%) SIZE fait varier l’épaisseur de la ligne en pixel (valeur par défaut 1) ALIGN fait un alignement de la ligne suivant les 3 possibilités : CENTER par rapport au centre de la fenêtre, LEFT par rapport à la gauche de la fenêtre, RIGHT par rapport à la droit de la fenêtre. Le paramètre ALIGN a un effet que lorsque la longueur de la ligne est inférieure à 100%. 39 Ch. I. Hyper Texte Markup Langage Séparateurs exemple 1: essai n°4 HR : HR WIDTH="75%" : HR WIDTH="25%" : HR WIDTH="50%" & SIZE="5" : HR WIDTH="50%" & SIZE="20" : HR WIDTH="50%" & SIZE="5" ALIGN=LEFT : HR WIDTH="50%" & SIZE="5" ALIGN=LEFT NOSHADE : 40 Ch. I. Hyper Texte Markup Langage Séparateurs exemple 1: 41 Ch. I. Hyper Texte Markup Langage Séparateurs exemple 2: Séparateurs exemple 2 Plaçons quelques séparateurs Séparateur par défaut (largeur 100% et centré) Largeur du séparateur : 300 pixels Largeur du séparateur : 50% de la largeur de l'écran Taille du séparateur : 10 pixels Couleur du séparateur : rouge et la largeur est de 30% Séparateur aligné à droite d'une largeur de 30 pixels Séparateur aligné à gauche d'une largeur de 50 pixels en bleu 42 Ch. I. Hyper Texte Markup Langage Séparateurs exemple 2: 43