Remerciez-le!

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

Introduction Un fichier HTML est simplement un simple fichier texte, contenant

Introduction Un fichier HTML est simplement un simple fichier texte, contenant des lments spciaux qui permettent de dfinir la structure du document. Voici tout de suite un exemple de document HTML : 1 2 3 4 5 6 <HTML> <HEAD> <TITLE>Ma page HTML</TITLE> <BODY> Voici mon premier document avec le langage HTML Listing 1.1 Un document HTML. Ouvrez donc votre bloc-notes, copiez-y le code ci-dessus, enregistrez le fichier avec comme extension .htm ou .html (page1.htm par exemple) et ouvrez le fichier avec votre navigateur favori Firefox ou un autre comme Opra, Safari, Konqueror, Netscape, Internet Explorer, ... Vous devriez normalement voir quelque chose qui ressemble plus ou moins ce qui est prsent sur la figure 1.1. Il peut y avoir quelques diffrences selon votre plateforme et de la police par dfaut de votre systme. Figure 1.1 Mon premier document HTML. On distingue donc premire vue des mots en lettres capitales dlimits par < et > ainsi que du texte en minuscules. Ce chapitre va s'attarder sur les diffrentes partie d'un fichier HTML : il y a tout d'abord le texte puis des balises qui structurent le document. Il y a galement des attributs qui permettent de spcifier des proprits sur des morceaux de texte. On verra galement qu'il y a deux parties dans un document HTML : une entte qui contient des informations sur le document et le corps qui contient le texte proprement parler. Plan du chapitre 1. l ment et attribut 2. Ent te et corps du document lment et attribut Dans un document HTML, on retrouve donc du texte mais galement des informations complmentaires propos du texte, que ce soit propos de sa structure ou du style qu'il faut lui appliquer. Cette information complmentaire est fournie grce aux lments et attributs. lment On utilise des types d'lment pour reprsenter un lment voulu ou un certain comportement, par exemple un paragraphe, un lien, une image, un tableau, ... Une dclaration de type d'lment comporte gnralement trois parties : une balise ouvrante, un contenu et une balise fermante. La balise ouvrante prend la forme suivante : le caractre < suivi du nom du type d'lment, suivi par le caractre >. La balise fermante a la mme forme que la balise ouvrante sauf qu'elle commence par les caractres </ la place du caractre <. Certain types d'lment ne doivent pas obligatoirement avoir de balise fermante. C'est par exemple le cas de l'lment P qui reprsente un paragraphe. Par convention, on notera assez souvent le nom du type d'lment en lettres majuscules mais sachez que ce nom insensible la casse (par contre, XHTML impose des lettres minuscules). Dans un document HTML, on a donc du texte (le contenu) et des balises qui permettent de dlimiter des zones ayant une signification particulire. Il ne faut donc pas confondre type d'lment et balise. Le type d' l ment P dfini un paragraphe et on utilise les balises et pour dlimiter un paragraphe dans le document. 1 2 3 4 5 6 <HTML> <HEAD> <TITLE>Ma page HTML</TITLE> <BODY> Voici mon premier document avec le langage HTML Listing 1.2 Un document HTML. On peut voir, dans l'exemple du listing 1.2, l' l ment TITLE qui reprsente le titre du document et galement l' l ment P qui, comme on commence le savoir, dlimite un paragraphe. On observe galement que certains lments ne ncessitent pas de balise fermante (HTML, HEAD, BODY et P), tandis que pour d'autres, elle est obligatoire (TITLE). Il existe aussi des lments pour lesquels la balise fermante et le contenu sont interdits. En effet, de tels lments n'agissent pas sur un contenu, mais leur seule prsence vont provoquer un comportement particulier. Ces lments sont appels lments orphelins. Voici par exemple comment provoquer un saut de ligne dans un document en utilisant l' l ment BR. 1 Listing 1.3 lment BR pour provoquer un saut de ligne. On utilise donc simplement la balise ouvrante. Une liste de tous les lments se trouve dans les ressources et vous pouvez y voir, pour chaque lment, si la balise fermante est obligatoire ou optionnelle. Attribut Les lments dfinissent donc une information de structure sur un contenu ou par leur seule prsence. De plus, on peut prciser des proprits un lment en utilisant les attributs. On va par exemple pouvoir dcider que le texte d'un paragraphe doit tre align gauche, droite, ou centr ou mme justifi par rapport la largeur de la page. Il faut deux choses pour spcifier une proprit : il faut tout d'abord un nom d'attribut (par exemple l'alignement) et une valeur (par exemple centrer). On dit qu'une proprit se dfinit par une paire nom/valeur. Cette paire se place dans la balise ouvrante. Voyons tout de suite un exemple : 1 2 3 4 5 6 <HTML> <HEAD> <TITLE>Ma page HTML</TITLE> <BODY> Je sais utiliser les attributs ;-) Listing 1.4 Attribut d'alignement du texte d'un paragraphe. Vous voyez ici la balise qui dfinit un paragraphe de texte. La paire nom/valeur se place entre le nom de l'lment et le >. On a utilis l'attribut align et on lui a donn comme valeur center. Cet attribut permet de spcifier l'alignement du texte. La figure 1.2 montre le rsultat que l'on obtient en affichant ce document avec un navigateur Web. Figure 1.2 Attribut d'alignement du texte d'un paragraphe. Les couples nom/valeur se placent donc toujours dans la balise ouvrante. On crit le nom de l'attribut suivi du caractre gal (=) et vient ensuite la valeur de l'attribut. Cette valeur est crite entre guillemets doubles (") ou entre guillemets simples ('). 1 2 nom_attribut="valeur_attribut" nom_attribut='valeur_attribut' Listing 1.5 Forme gnrale des paires attribut/valeur. Pourquoi deux manires de noter la valeur d'un attribut ? Et bien imaginez un attribut dont la valeur serait salut "toi". Si on utilise les guillemets doubles, on devrait crire ceci : 1 nom_attribut="salut "toi"" Listing 1.6 Valeur d'attribut contenant des guillemets doubles. Et a ne fonctionnera pas, en effet, on voit que la valeur de l'attribut est simplement salut puisque celle-ci s'tend du guillemet ouvrant jusqu'au premier guillemet fermant. Donc, lorsqu'on a une valeur d'attribut qui contient des guillemets doubles, on va utiliser des guillemets simples pour la dlimiter. Les noms d'attributs sont galement insensible la casse mais par convention, on utilise des lettres minuscules (cette convention tant une obligation en XHTML). De plus, on n'est pas oblig de mettre toutes les valeurs de tous les attributs entre guillemets, en HTML, tant que ces valeurs ne contiennent que des lettres et des chiffres. Enfin, il existe galement des attributs qui ne prennent pas valeur, leur seule prsence est suffisante : il s'agit de proprits.  s'identifier |  s'inscrire  Accueil >  Programmation >  HTML >  Tutoriel >  Chapitre 1 : Document HTML de base Entte et corps du document Le document est reprsent par l' l ment HTML . On distingue ensuite deux parties l'intrieur du document, savoir l'entte qui est reprsente par l' l ment HEAD et le corps qui reprsent par l' l ment BODY . Le listing suivant vous montre la structure classique d'un document HTML. 1 2 3 4 5 6 7 8 9 10 <HTML> <HEAD> <TITLE>Mon premier document HTML</TITLE> <BODY> Ceci fait partie du corps de mon premier document HTML !  Listing 1.7 Entte et corps du document. Entte L'entte du document permet d'ajouter des informations sur le document. Cette information n'aura aucune reprsentation visuelle, on ne verra donc rien dans le navigateur. Elle permet de transmettre des informations celui-ci, comme par exemple le titre du document, sa langue, des liens vers diverses ressources, le nom de l'auteur, ... Elle est reprsente par l' l ment HEAD . L' l ment TITLE , qui permet de reprsenter le titre, sera par exemple utilis pour afficher un titre dans l'onglet et/ou la barre de titre du navigateur et galement sur les pages que vous imprimez. Le contenu de cet lment est galement utilis par les moteurs de recherche comme Google. Figure 1.3 Titre du document HTML. Corps La partie corps contient tout ce qui sera affich l'cran, c'est--dire le contenu visible du document. C'est donc dans cette partie que l'on place l'essentiel du texte. Il est reprsent par l'lment BODY et s'tend depuis la balise ouvrante jusqu' la fin du fichier (ou jusque la balise fermante si on l'a spcifie). Commentaire Qu'est-ce-qu'un commentaire ? Il s'agit de texte qui n'apparait pas dans le navigateur mais qui permet de s'y retrouver plus facilement dans le fichier source du document HTML. Un commentaire est du texte entour des balises spciales . Il est peut recommand de placer une suite de guillemets, par exemple --- entre commentaires, cela peut en effet conduire des erreurs. Rfrence de caractre Terminons uploads/s1/ introduction-programmation-html 1 .pdf