CHAPITRE 2 NOTION DE BALISES,ATTRIBUTS & STRUCTURE D'UNE PAGE

Introduction

Alors Les différentes parties d’une page web (la structure) sont représentées dans le code HTML sous forme d’éléments constitués de balises. On parle alors de langage de balisage.Dans un langage de balisage, tout contenu, tels que les blocs detexte, les images, les tableaux,paragraphes et autres,doivent être renfermé dans un élément . La liste des éléments utilisables est clairement définie dans la DTD(Document Type Definition) qui dépend de la version du langage.La DTD contient les spécifications du langage qui sont établies par le W3C (World Wide Web Consortium), organisme de normalisation dans le domaine du web.

Ça sert a Quoi une Balise ?

Alors les balises HTML structurent le contenu du document, en délimitant les blocs qui seront amenés à contenir des paragraphes, des titres, différents types de médias(images, sons, vidéos), des contrôles de formulaires ou encore des liens hypertextes. Une balise débute par le signe « inférieur à », et finit par le signe « supérieur à » ; onparle aussi de chevrons.Sauf exception, elles fonctionnent par paires. Et à chaque balise ouvrante correspond sa balise fermante, débutant par les caractères </. Ces paires délimitent la portion de texte à laquelle elles s’appliquent.

Syntaxe: <nom_de_la_balise> texte , balise , etc </nom_de_la_balise>

Exemple de balises : <br>, <p>, <h4>, </h4>, </br> 

Il peut arriver qu’une balise soit refermée immédiatement. On parle alors de «balise vide» ou de «balise simple ou encore orpheline». Dans ce cas, pour marquer la fermeture de la balise, on utilise les caractères «/>». Voici quelques balises dans ce cas sont: area, base, br,col,command, embed, hr, img, input, keygen, link, meta, param, source .

Syntaxe: < nom_de_la_balise/> Exemple de balise simple: <img src="Panda_Codeur_Photo.jpg"/>

Un élément c'est l’ensemble composé d’une balise ouvrante, d’un contenu (du texte et/ou d’autres balises), et de la balise fermante correspondante. Exemple d’élément : <strong> Joel Voici un texte Tout en gras , Oui tout en gras  . </strong>

Eh bien Toute cette ligne représente un élément qui selon le type de balise ( Strong ) vas effectivement mettre notre texte en gras.

Les Attributs

Les attributs ou propriétés sont des caractéristiques qui permettent de personnaliser les balises. Ils définissent des options supplémentaires pour la balise.Les attributs sont toujours placés à l’intérieur de la balise ouvrante.Leur valeur est toujours entourée d’apostrophes simples ( ' ) ou doubles ( " ).

Dans l’exemple ci-dessus, La deuxième ligne représente un titre de premier niveau <h1> possédant un attribut id de valeur monTitre. Tandis que dans le troisième on représente une image dont l’attribut src indique qu’il s’agit du fichier Panda_Codeur_Photo.jpg dans le dossier images.

Comment Bien Imbriquer nos Elements  ?

En programmation On parlera souvent d’indentation du code c'est ce qui fait la qualité d'un bon programmeur du moins je crois bien et bien Cette notion est aussi relevez en Html ou l'on vas rédigez de tonne de lignes. Alors les éléments peuvent être imbriqués, à condition de respecter une certaine hiérarchie, et d’éviter de faire se chevaucher des balises ouvrantes et fermantes qui ne se correspondent pas.

Dans cet exemple, nous avons un titre de niveau 2 ( Pas de panique nous en parlerons dans le chapitre suivant )  dans lequel la portion de texte « Et la » est renforcé (en gras).Dans le bon exemple, la balise ouvrante <strong>se ferme à l’intérieur de l’élément défini par la balise <h2>.Les possibilités d’imbrications doivent répondre à des critères stricts qui définissent quels éléments peuvent en contenir d’autres, et quelles sont les conséquences en termes d’affichage ou de sémantique en quelques sortes . Bref Globalement, un élément de type bloc (bloc-level) peut contenir soit d’autres blocs et du contenu texte, soit uniquement des éléments de type en ligne (inline) et du contenu texte.Un élément de type en ligne ne peut pas contenir d’éléments de type bloc, mais uniquement des éléments en ligne ou du contenu texte.Il faut dénoter qu’un document HTML est une structure composée d’un ensemble d’éléments à plusieurs niveaux d’imbrication. Le premier niveau de cette hiérarchie est constitué par la balise <html> Eh Oui.

Structure d'un Document HTML5

Présentons ainsi la structure d'un document HTML5. Illustration :

 FIGURE 1

Décomposons balise par balise !

Le Doctype <!DOCTYPE html>

La balise de déclaration <!DOCTYPE> est utilisée par le navigateur web pour comprendre la version du HTML utilisée dans le document. La version actuelle du HTML est 5 et elle utilise la déclaration suivante : <!DOCTYPE html>

La Balise <HTML>

Tout document HTML doit commencer par la balise <html> qui se ferme en fin de document : </html> La balise <html> contient nécessairement deux balises définissant l'entête (<head>) et le corps (<body>) du document.

La Balise <HEAD>

Avant l'élément <body>, vous verrez souvent un élément <head>. Celui-ci contient des informations sur la page. Vous trouverez généralement un élément <title> à l'intérieur de l'élément <head>et des méta-informations.

La Balise <META>

A la ligne 4 de notre figure on a le <meta charset="UTF-8"/> ou <meta charset="UTF-8"> (c'est la meme chose ) : Cette balise permet de définir l’encodage de caractère de la page (à mettre directement sous le <head>).

La Balise <TITLE>

Cette balise correspond au titre de votre page. Elle doit être placé dans le <head> de votre page.Mais en réalité ne s'affiche pas dans la page mais dans l'onglet de votre navigateur web.A partir de notre figure 1 (code HTML) découvrons le résultat de l'affichage de ce code dans notre navigateur.IL Sert au référencement (repris dans les résultats de recherche). Illustration :

FIGURE 2

La Balise <BODY>

Elle va délimite le contenu de la page , contenu qui est constitué de texte, images et autres éléments qui seront affichés.Elle est très importante car c'est dans cette balise que nous allons écrire la majeure partie de notre code. Eh oui contrairement à la balise <title> c'est ici que vous allez pouvoir observer tout le travail que vous allez éffectuer sur votre page HTML.

QUELQUES REGLES D’ECRITURE DU HTML !

Eh oui on fait pas du n’importe quoi avec le HTML Les Règles pour les noms des fichiers :

Chaque page web est un fichier dont le nom peut comprendre des lettres, des chiffres et des tirets. Il fautéviter : les espaces, les caractères accentués et le « ç ». Son extension est généralement «.html ».La première page d’un site web doit être nommé index.html (ou index.htm).

Les Règles d’écriture à adoptez pour les balises HTML , La norme HTML impose les règles suivantes :

1. Pour respecter les règles du XHTML, il faut toujours écrire les noms de balises en minuscules
2. Toute balise ouverte doit être refermée ;y compris les balises simples ou orphelines. Dans ce dernier cas, la barre de fermeture est alors intégrée dans la balise elle-même. Exemples:

   Le Saut de ligne :  <br /> au lieu de <br> Le Tracé d’une ligne horizontale : <hr /> au lieu de <hr> L'Image: <img src="Panda_Codeur_Photo.jpg"/> au lieu de <img src="Panda_Codeur_Photo.jpg">

3. En cas d’imbrication de balises, l’ordre de fermeture est l’inverse de celui de l’ouverture.
4. Les valeurs des attributs des balises sont à écrire entre guillemets simples ou doubles:<img src="Panda_Codeur_Photo.jpg.gif" />.
5. Tous les attributs utilisés doivent avoir une valeur, y compris ceux dont la valeur est unique. Par exemple, il ne faut plus écrire : <input type= "checkbox" checked /> mais le code suivant : <input type= "checkbox" checked="checked"/>
6. L’attribut name qui servait à identifier certains éléments (<a>, <form>, <input>) doit être remplacé par l’attribut id.

CONCLUSION

Le HTML signifie HyperText Markup Language. La partie HyperText fait référence au fait que le HTML permet de créer des liens qui permettent aux visiteurs de passer d'une page à l'autre rapidement et facilement. Un langage de balisage vous permet d'annoter du texte, et ces annotations donnent une signification supplémentaire au contenu d'un document. Si nous pensons à une page web, nous ajoutons du code autour du texte original que nous voulons afficher et le navigateur utilise ensuite ce code pour afficher la page correctement. Les balises que nous ajoutons sont donc les annotations.