Les balises et attributs en (x)HTML.

Pour créer une page web, on utilise un langage qui doit donner des informations au navigateur ou browser.
Il ne suffit pas simplement de taper le texte qu'il y aura dans sa page, il faut aussi savoir placer ce texte lui donner un format, insérer des images, faire des liens etc... Organiser tout ça joliment.

Somaire

Les balises et attributs:

Les blises

C'est les langages XHTML et CSS, qui vont servir précisément pour créer des sites web, et ils ont été créés de manière à être simples à utiliser.
Le rôle de ce cours sera de vous apprendre à vous en servir.
Ces deux langages se complètent pour donner un site web :

Le langage HTML, contient des informations logiques : vous direz par exemple:
<<Ceci est le titre, ceci est le menu, ça c'est le texte principal de la page, là il y a une image ici etc...>>.
Le langage CSS sert pour présenter ce contenu et lui donner une belle apparence vous direz par exemple:
<<les titres sont en rouge, le texte de taille 12 pixel etc...>>.

le langage HTML est constitué de balises. Une balise a cette forme : < balise>
Exemple : <head></head>

/!\ Important !!!

Tout ce qui est écrit dans une balise doit être écrit en minuscule, pour quoi ? Eh bien parce que c'est recommandé par le W3C pour HTML 4.0 et c'est obligatoire dans les versions ultérieurs

Il existe 2 types de balises : certaines balises apparaissent toujours par paire, d'autres au contraire sont toutes seules.
Toute balise doit être ouverte (sans quoi elle n'existe pas, évidemment) ; et toutes les balises doivent également être fermées.
L'obligation de fermer chaque balise est l'une des principales différences entre le HTML et le XHTML ; c'est une caractéristique que le XHTML hérite du XML.

1• Les balises existant par paire : On écrit la première balise <balise>, on tape du texte, puis on "ferme" la balise en la réécrivant avec un slash devant "/" </balise>.
Par exemple : <balise>quelque chose </balise>

2• Les balises seules : Elle sert en général pour insérer un élément dans une page (image ou autre...)
Ce type de balise se termine toujours par un slash "/", mais cette fois le slash se trouve à la fin de la balise elle même.
Exemple : <chose/ > cet balise indique juste qu'il y a une chose à cet endroit image par exemple Il est donc facile de reconnaœtre à quel type de balise on a affaire :
• Si vous voyez <paragraphe>, c'est qu'il s'agit d'une balise existant par paire, et donc que vous allez trouver un </paragraphe> un peu plus loin, pour indiquer la fermeture de la balise.
• Si vous voyez <truc />, c'est une balise seule.

Toutes les balises doivent être refermées. Donc n'oubliez surtout pas de le faire Si non la balise n'aura aucun sens voir aucune existence.
Les balises doivent être ouvertes et refermées dans l'ordre. Il ne faut donc pas écrire :
<balie1> Attention ça, c'est <balise2>non.</balie1></balie2>
Mais écrire:
<balise1> Alors que ça, c'est <balise2> oui.</balise2> </balise1>

Les balises du xhtml

1. Balise principale de toute page web.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN.">
On lui donne généralement 2 attributs :
1• xmlns : la liste des balises xhtml existantes (appelée espace de noms).
2• xml:lang : la langue utilisée sur votre page web. Utilisez "EN" pour anglais.
Normalement la balise principale d'une page Web doit ressembler à ce ci :

1 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN">
2 </html>

Tout le code xhtml de la page Web doit être écrit entre les deux lignes ci-dessus
c'est-à-dire entre <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
et entre </html>

2. Balise d'entête

<head></head>
Dans cette balise c'est-à-dire entre <head> et </head> on met le titre de la page et d'autres informations que nous verrons par la suite dans ce cours
<head>
<title>Titre du site</title>
</head>

Toutes les informations que vous allez mettre dans cette balise ne serons pas vues dans la page que va afficher le navigateur du visiteur sauf le titre qui lui sera afficher dans la bare du titre du navigateur.

3. Balise du corps


<body></body>
Dans cette balise c'est-à-dire entre <body> et </body> on met le corps de la page : le texte, les images, les liens, les tableaux etc…

Les attributs

Les balises acceptent parfois des caractéristiques supplémentaires permettant de les distinguer ou de les personnaliser. Ces options s'inscrivent dans leur nom et sont appelées « attributs » (ou « propriétés »). Leur valeur est toujours entourée d'apostrophes simples (') ou doubles (")

Ce sont les des précisions qu'on donne sur une balise par exemple si on insère une image il faut donner son nom son emplacement Exemple
:<image nom= "Image1" emplacement="bla bla" taille="bla bla" position sur la page="bla bla" /> nom c'est l'attribut "Image1" est la valeur de l'attribut.

Pour les balises par paire les attributs ne sont mets que dans la balise ouvrante <balise> et pas dans la balise fermante </body>

Conclusion

Nous avons fait un peu de théorie pour ne pas être déboussolé par la suite.
Les noms de balises que j'ai utilisé <balise>, <truc> ,<image /> n'existe pas nous aurons tout le temps de voir les vrais noms par la suite.

• Les balises existent soit par paires (<balise> </balise> ) ; soit toutes seules,(ex. : <balise /> )
• Les noms des balises et attributs s'écrivent toujours en minuscules
• Les valeurs des attributs peuvent contenir des majuscules
• S'il y a des attributs dans une balise par paire, on ne les met que dans la balise ouvrante Vous allez me dire mais nous ne savons pas encor faire de page Web
Eh bien nous y mettons tout de suite ouvrez votre éditeur

Tapez le code suivant dans votre éditeur :
Sélectionner le code

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title> Mon site !</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> C'est mon site </body> </html>

Enregistrez le sous un nom, exemple : essai.html
Gardez ce fichier nous en aurons besoin pour d'autres exercices.
Si vous travaillez avec notepad++ avant d'enregistrer allez dans le menu LANGAGE et choisir l'option HTML
Ouvrez le fichier enregistré vous devez avoir une page web avec comme texte: C'est mon site
La barre du titre porte maintenant le titre que vous lui avez donné tout en haut à gauche de la fenêtre : " mon site ! ".
Sur la page apparu le texte que vous avez indiqué dans la balise <body></body>

Explication du code ligne par ligne :

La première ligne est une ligne obligatoire pour toute page html. C'est une déclaration "Doctype". C'est une balise particulière, et c'est la seule qui n'obéit pas aux règles que je vous ai données. Cette balise sert à dire aux navigateurs que votre page est une page XHTML, et qu'elle utilise la version 1.0 du langage XHTML.

La seconde ligne c'est la balise <html> . C'est la balise principale qui englobera toute votre page (x)HTML. On ne la ferme qu'en dernier avec </html> , qui indique que votre page (x)HTML s'arrête là. Il n'y a donc rien après le </html> .
La balise <html> contient 2 attributs :
o xmlns : cet attribut, obligatoire, indique une adresse traitant du xHTML. Ne vous en occupez pas et laissez comme elle est, ça ne nous intéresse pas particulièrement.
o xml:lang : cet attribut indique la langue dans laquelle est rédigée votre page web. Si vous écrivez une page web en français, mettez "fr" comme je l'ai fait. Si la page est en anglais, mettez "en", en arabe"ar", espagnol "es" etc.

La troisième ligne. La balise <head> elle contient les informations d'en-tête pour votre page web. Elle est refermée un peu plus loin </head>.
o A l'intérieur de la balise <head> , vous trouvez notamment la balise <title>: c'est elle qui contient le titre de votre page web. Ici, le titre est " mon site !"
o D'autre balises peuvent être dans la balise <head> . Il existe beaucoup de balises de ce type, mais je ne vous en parlerai que plus tard elles ne sont pas indispensables.
Seule celle que nous avons utilisé dans notre code est indispensable <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> : elle indique que vous allez taper des caractères spécifiques au français (é è à ê etc...).
Enfin,à la 6ème ligne et après la fermeture de la balise <head> une nouvelle balise : <body>
C'est entre <body> et </body> que vous taperez le contenu de votre page web.
En clair, c'est entre ces 2 balises que nous allons passer 99% de notre temps
Pour le moment, il y a entre ces 2 balises un très court texte " C'est mon site ", la page a un fond blanc, nous allons voire comment on peut le changer.

Remarque :
Pour la réouverture de votre page avec notepad++ click droit sur son icône et choisir l'option Edit with notepad++.

image de notepad…

Avant de quitter cette partie du cours, sachez qu'on peut écrire un commentaire dans un code xhtml.
Le commentaire sert à nous guider dans le code si le code par exemple est long.
Le commentaire ne sera pas visible aux visiteurs du site, il est écrit pour l'éditeur, vous.
La balise du commentaire est la suivante :
<!-- commentaire -->.

Ajoutez cette ligne à votre code de tout à l'heur, remplacez le mot commentaire par : un commentaire que vous voulez exemple :
<!-- ce ci est un commentaire -->.
Enregistrez et constatez ce qui ce passe.

Alors si vous avez bien compris cette partie du cours on passe à la suivante si non relisez la encor une ou deux fois jusqu'à ce que vous n'aurez plus de probléme avec. Car c'est là toute la base du code d'une page
Et surtout faites des exercices.


chapitre précédent chapitre suivant