Généralité sur la Mise En Forme Chapitre 1 Généralité sur la Mise En Forme BEN MAHMOUD Chaker Chaker707@yahoo.fr Année Universitaire 2007-2008
Structure d’un document HTML - La page Web Balises de structure globale HTML, HEAD, BODY, ADDRESS <HTML> <HEAD> <!-- renseignements utiles sur le document--> <TITLE>Un Titre causant</TITLE> </HEAD> <BODY> Le corps …le document = le contenu, l ’information que l ’on veut afficher dans le navigateur des visiteurs….. <ADDRESS> <!-- renseignements utiles pour l’internaute--> </ADDRESS> </HTML> BEN MAHMOUD C Chapitre 1
L’en-tête On y trouve le titre de la page Web, qui doit être assez explicite : balise TITLE . Ce titre s ’affichera Dans la barre de titre de la fenêtre de navigation Dans la page des signets (marque-pages, bookmarks ou favoris) Par défaut, si aucun titre n’est spécifié , c’est le nom du fichier qui sera utilisé Par exemple : index.html, default.htm … , Ce qui n ’est pas descriptif du contenu de la page, ni mémo-technique. Ce nom doit être spécifié ainsi il est différent du nom du fichier HTML de la pageWeb. N ’oubliez pas que les noms de fichiers ne doivent pas contenir d’accents, de blanc, de caractères spéciaux, le titre de la fenêtre peut en contenir ! On y trouve des renseignements sur le contenu du document qui seront utilisés par les moteurs de recherche, pour répondre aux requêtes posées par un visiteur. Mais, elles sont non-visibles par le visiteur, C’est la balise META BEN MAHMOUD C Chapitre 1
La balise META Les attributs les plus courants à la balise META : L’attribut LANG indique le langage dans lequel est rédigé le contenu de l’attribut CONTENT. Certains moteurs de recherche permettent de faire des sélections en fonction de la langue utilisée. Pour un site en français, mettre lang=«fr» (« en » pour anglais, ...). Ce champ n ’est pas obligatoire. Les valeurs les plus utiles de l’attribut NAME : name=« author » content=« Nom_de_l’auteur » : indique le nom de l’auteur de la page Name =« keywords » content=«Listes_mots_clés_séparés_par_virgule » : donne une liste de mots-clés qui pourront correspondre aux critères de recherche entrés par l ’internaute dans un moteur de recherche. name=“description“ content=“Phrase_décrivant_votre_site“ : petit texte qui s’affiche dans les réponses des moteurs de recherche et qui décrit le site. Évitez les accents, tous les moteurs de recherche ne les traduisent pas. BEN MAHMOUD C Chapitre 1
La balise META: Exemple <HTML> <HEAD> <TITLE>Ecole supérieure de commerce électronique </TITLE> <META name=“author“ lang=“fr“ content=“ESCEM“ > <META name=“keywords“ lang=“fr“ content=“ESCE, Manouba, Web, e-commerce, e-service“ > <META name=“description“ content=“Le Site de notre école.“ > </HEAD> ... </HTML> BEN MAHMOUD C Chapitre 1
Le Corps Les attributs de la balise BODY permettent de modifier La couleur du fond : BGCOLOR La couleur du texte : TEXT La couleur des liens non visités : LINK La couleur des liens déjà visités : VLINK La couleur des liens à l’instant du clic : ALINK La règle est : ATTRIBUT = #rrggbb Où rr, gg et bb indiquent les quantités de couleur Rouge Verte et Bleu en hexadécimal : entre [00..FF]. Par exemple : Noir : 000000 Blanc : FFFFFF Rouge : FF0000 Vert : 00FF00 Bleu : 0000FF Jaune : FFFF00 Magenta : FF00FF Gris moyen : 808080 Etc … BEN MAHMOUD C Chapitre 1
Exemple <HTML> <HEAD> ... </HEAD> <BODY BGCOLOR=#003366 TEXT= #CCCCFF> du texte </BODY> </HTML> BEN MAHMOUD C Chapitre 1
Les commentaires - Pour votre usage personnel : Le pied de page : Le texte encadré par la balise ADDRESS sera affiché en italique; On y trouve, habituellement, les informations suivantes : Nom et coordonnées de l ’auteur Adresse électronique de la personne à contacter au sujet de la page La date de la dernière modification URL de la page : bien pratique lorsqu’on l’imprime de garder une trace de l ’adresse sur le web de la page Les commentaires - Pour votre usage personnel : <!-- no comment --> Aide au développement et à la maintenance Important dans le cas d ’un travail d ’équipe. BEN MAHMOUD C Chapitre 1
Modifier la présentation du texte Le texte sous HTML est écrit “!au kilomètre!”. Les changements de ligne (par la touche “ RETURN ” ou “ ENTREE ”) ne sont pas pris en compte par les navigateurs. Il faut impérativement mettre de façon explicite dans le HTML les changements de ligne que l’on veut imposer. La balise imposant un changement de ligne est <BR> C’est une balise seule, l’abréviation de BREAK. Changer de paragraphe balise <P> (pour PARAGRAPHE). Impose un changement de ligne puis saut de ligne. Notons que ces deux balises s’utilisent seules. Pour centrer du texte dans la page Web : <CENTER> partie de texte que l ’on veut centrer </CENTER> BEN MAHMOUD C Chapitre 1
Styles de caractères Police de caractère Pour faire ressortir certaines informations de votre page Web : <B> … </B> Gras (Bold face) <I> … </I> Italique <U> … </U> Souligné (Underline) <STRIKE>texte</STRIKE> Barré test Ce sont des balises doubles (qui encadrent donc le texte affecté), qui peuvent s’emboîter les unes dans les autres. Texte en exposant ou en indice : <SUP> … </SUP> Xème <SUB> … </SUB> Xn Police de caractère Pour que le navigateur affiche votre texte dans la police de caractère de votre choix : balise FONT Au cas où cette police n ’existerait pas sur l ’ordinateur du visiteur, il est souhaitable d’indiquer une deuxième police courante comme Arial : <FONT FACE=«Arial»> … du texte … </FONT> BEN MAHMOUD C Chapitre 1
Voici le gros titre Taille des caractères pour les titres : La balise <Hn> où n varie de 1 à 7 1 correspondant à la plus grosse taille, 7 à la plus petite Cette balise permet d’écrire le texte encadré en gras, à la taille indiquée, Elle provoque un changement de ligne à la fin, En général, la taille standard du reste du texte correspond à la taille 4. La taille réelle à l’affichage peut être différente selon le navigateur. Ex : <H1>Voici le gros titre</H1> <H2>Voici un plus petit titre</H2> <H5>Et voici un tout petit titre</H5> Vous donnera quelque chose du genre : Voici le gros titre Voici un plus petit titre Et voici un tout petit titre BEN MAHMOUD C Chapitre 1
Pour le texte en général : La balise FONT et son attribut SIZE : <FONT SIZE=n> … </FONT> n représente la taille absolue ou relative des caractères. En absolu, n varie de 1 à 7, En relatif, n varie de -6 à +6, sans pouvoir dépasser les bornes de taille absolue 1 et 7. Attention, tous les navigateurs ne sont pas capables de gérer les 7 tailles de caractères Actuellement pour la gestion des textes, balise DIV et les CSS sont souvent utilisées Les balises CENTER, FONT … sont dans la norme du html transitionnel et ne sont pas dans la norme du htlml4 stricte. BEN MAHMOUD C Chapitre 1
Modifier la couleur d’un texte Une partie du texte <FONT COLOR=«#FF00FF»>texte</FONT > Rappel pour l’ensemble du texte <BODY TEXT=«#FF00FF»> texte </BODY > Définir la fonte à utiliser pour l' affichage : FACE <FONT FACE=«Times New Roman»> texte </FONT > Exemple d'utilisation de la balise FONT <FONT face= "Comic Sans MS" color=#FF0000 size=4> c’est un ex </FONT> Créer une citation Le navigateur applique un retrait du texte des deux côtés de la page <BLOCKQUOTE>texte</BLOCKQUOTE > La balise <PRE> (preformatted) affiche le texte entré tel quel; <PRE> +-------------------------+ + Tableau + +-----------+------------+ + Col 1 + Col 2 + </PRE> BEN MAHMOUD C Chapitre 1
La Balise <P> Permet d'introduire un nouveau paragraphe: retour à la ligne + ligne vierge. P est un élément ouvert; il conseillé de le fermer lorsque des attributs lui sont associés. Attribut Align : Permet d'aligner un paragraphe à gauche, au centre, à droite de l'écran ou de le justifier. Align left, right, center ou justify Exemple : <P ALIGN=left > Notre cours </P> BEN MAHMOUD C Chapitre 1
Les Couleurs La règle est : ATTRIBUT = #rrggbb Où rr, gg et bb indiquent les quantités de couleur Rouge Verte et Bleu en hexadécimal : entre [00..FF]. Ou bien son nom en anglais exemple Bleu #0000FF blue Vert #00FF00 green Blanc #FFFFFF white Rouge #FF0000 red Jaune #FFFF00 yellow Noir #000000 black Utilisation : <FONT color=red > c’est un ex </FONT> BEN MAHMOUD C Chapitre 1
Balise <BODY> - paramètre la page Fond d‘écran <BODY background="nom_image"> répétition d'une image sur l‘écran du navigateur Couleurs <BODY bgcolor="#000000" : couleur de fond text="#000000" : couleur du texte link="#000000" : couleur des liens non encore visités vlink="#000000" : couleur des liens déjà visités alink="#000000" : couleur des liens lors du clic Exemple : <BODY bgcolor=red text=white>……</BODY> BEN MAHMOUD C Chapitre 1