Créer un site web - B) Le début de notre site

2 visiteurs connectés sur le site !

InfoProGraphie Simple > Cours > Créer un site web > Découvrez le xHTML et créer votre première page web > Le début de notre site

B) Le début de notre site

Bonjour , Voilà un chapitre bien complet, très différent du dernier (premier ). Dans ce chapitre nous allons créer notre première page web, très vide mais qui aura le mérite d'être une vraie page web. Vous allez voir, vous allez être très fier de vous à la fin de ce chapitre.

1)A quoi ressemble le code xHTML ?

Comme vous le savez le xHTML est un langage de programmation qui est TRES TRES SIMPLE..Le code est composé de trois choses essentielles que vous devez connaître:

Les balises

Comme on le dit, le xHTML est un code de balisage. En fait une balise ressemble à ça:<img>. Elle commence par "<" et se finit par ">". Elles sont invisibles dans la page html, mais elles permettent d'indiquer à quoi correspond chaque élément, exemple:ceci est une image, ça un texte, ça le titre etc... Il existe deux sortes de balises:
-Les balises ouvrantes/fermantes qui s'utilisent toujours par deux, elles s'ouvrent avec une balise comme cela: (qui commence avec "<" et se termine avec ">") et se ferme avec une autre balise comme ceci: (qui commence avec "</" et se termine avec ">"). Une balise ouvrante/fermante contient presque tout le temps quelque chose entre la balise ouvrante et fermante:
Code:

Voici un paragraphe, écrivez ce que vous voulez.

-Les balises qui se suffivent à elles-mêmes, elles s'utilisent seules. La balise commence par "<" et se termine par "/>", comme ceci
Code:

<img/>

Les attributs

Les attributs se situent dans les balises, qu'elles soient ouvrantes/fermantes(dans ce cas ils ne se situent que dans la balise ouvrante) ou les balises seules. Les attributs complètent les balises en leur renseignant des éléments, comme c'est le cas pour la balise lien par exemple:
Code:

href est un attribut qui complète la balise <a></a> en lui renseignant l'adresse du lien qui se situe entre les guillemets.

Les commentaires

Les commentaires sont des notes pour soi qui n'influent en aucun cas sur la page web. Ses commentaires sont très utiles, imaginez qu'au bout d'un certain temps le code de votre site fasse des pages. Vous partez en vacances pendant 1 mois sans toucher au site, lorsque vous revenez de vacances vous aurez beaucoup ( vraiment beaucoup ) de mal à vous retrouvez dans le code du site. Et c'est là qu'interviennent les commentaires que vous aurez auparavant mis. Je veux vraiment souligner le fait que les commentaires ne sont pas inutiles. C'est ce qui fait la différence entre un programmeur bien organisé et un bordélique . Bon je vous ai dis tout ça mais je ne vous ai pas encore dit comment mettre ces commentaires . Un commentaire s'écrit entre des balises assez spéciales qui s'ouvrent par "". Exemple:
Code:

2)Le code minimum pour une page web

Comme vous vous en doutez il ne suffit pas simplement d'ouvrir Notepad++ ou un autre éditeur et d'enregistrer avec l'extension .html pour obtenir une page web. En fait on a besoin d'un code minimum qui indique que la page est une page web et qui structure celle-ci. Voilà ce code:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon super site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>

Tester

Ça en fait beaucoup tout d'un coup. Je vais donc vous demander d'attendre encore un peu et de ne pas encore ouvrir Notepad++ avant l'explication de ce gros morceau de code. Décortiquons le ensemble:

1. La première ligne possède une balise assez spéciale, elle indique au navigateur que la page est une page web et que la version du xHTML utilisé est le 1.0.

2. La deuxième ligne contient une balise ouvrante <html> qui se referme tout à la fin du code </html>. C'est la balise principale qui enveloppe toute la page xHTML. Cette balise contient deux attributs:
-xmlns: indique l'adresse du W3 traitant le xHTML le fameux World Wide Web.
-xml: indique la langue de notre page, notre page est en français d'où le fr.

3. On a ensuite une autre balise ouvrante/fermante <head> qui se referme un peu plus loin </head>. Cette balise contient l'en-tête du site (head mot anglais qui veut dire tête). On retrouve dans cette balise:
-la balise ouvrante/fermante <title></title> entre laquelle on met le titre de la page web. C'est le titre qui sera affiché en haut de la fenêtre dans la barre où l'on retrouve les boutons fermer, agrandir, réduire.
-une balise seule <meta/>. On peut trouver d'autre balise <meta/> que l'on verra plus loin dans le cours, ce qui les différencie ce sont leurs attributs . Celui que l'on a indique que l'on va utiliser des caractères spéciaux é,è,à etc...

4. La dernière balise ouvrante/fermante <body></body> va contenir le corps du site. C'est là que l'on aura tout le contenu du site (texte, image, lien...).

Voilà j'espère que vous y voyez un peu plus clair, je ne vous oblige pas à l'apprendre par coeur mais il est quand même conseillé de le connaitre. Maintenant c'est bon, vous pouvez enfin ouvrir Notepad++. Ensuite copier/coller le code dans une nouvelle page et enregistrer la page avec l'extension .html(choisissez HTML file(*.html) dans le champs type).

Allez je sais que vous mourrez d'envie d'aller vite tester votre site, en ouvrant le fichier .html que vous venez de créer, avec le navigateur web que vous avez l'habitude d'utiliser(Mozilla Firefox, Internet Explorer...). Vous devrez obtenir quelque chose du genre:

Une belle page blanche mais qui à le mérite d'être une page WEB et qui possède un titre ( regardez en haut dans la barre).

Note: Si le code xhtml n'est pas colorié dans Notepad++, allez dans Affichage et sélectionnez HTML.

3)Notre premier texte?

Allez, ça serait triste de finir notre cours sur une page toute blanche . On va donc apprendre à afficher du texte dans notre page. Je pense que vous l'aviez deviné, il ne s'agit pas de bêtement taper notre texte entre les balises body. Il faut créer une autre balise ouvrante/fermante entre laquelle on écrit notre texte. Cette balise crée un paragraphe, donc si vous voulez faire plusieurs paragraphes il vous suffit de faire comme ceci (le code que je mets et mettrai par la suite se trouve entre les balises body, à moins que je ne le précise):
Code:

Voilà le premier paragraphe, ce paragraphe va me permettre de me présenter, je suis DrNaBl, avec un L à la fin et non un i comme la plupart des gens le pensent.
Ce deuxième paragraphe sert à rien, j'essaie juste de le remplir pour l'exemple de mon cours, ne pensez pas que j'ai rien à faire, je fais ça pour vous, oups j'ai fait une petite faute, bon c'est pas grave.

Tester

Je vous conseille d'essayer en même temps, non je ne vous conseille pas je vous y oblige . Vous voyez à chaque fois que j'utilise la balise ça créer un nouveau paragraphe.

Voilà on sait afficher du texte. Maintenant on va apprendre à faire un retour à la ligne. Comme vous l'avez peut-être constaté pendant votre essai, lorsque que l'on appuie sur la touche Entrée du clavier ça ne crée pas de retour à la ligne dans la page html. En fait pour faire un retour à la ligne il faut utiliser une balise seule . Lorsque que vous mettez cette balise, ça crée un retour à la ligne. Voici un essai:
Code:

Voilà le premier paragraphe, ce paragraphe va me permettre de me présenter, je suis DrNaBl, avec un L à la fin et non un i comme la plupart des gens le pense.
Ce deuxième paragraphe sert à rien, j'essaie juste de le remplir pour l'exemple de mon cours, ne pensait pas que j'ai rien à faire, je fais ca pour vous, oups j'ai fait une petite faute, bon c'est pas grave.
On va maintenant faire plein de retour à la ligne: 
1-pour le fun 
2-pour vous montrer 
3-pour rien

Tester

Voilà, le cours s'achève ici enfin pour moi pas pour vous, il vous reste un QCM et une petite rubrique A retenir , l'air de rien on avance assez vite, je suis assez fier .

QCM

3)A retenir

Voici un petit récapitulatif des choses à retenir:
Un site web est composé:
- de balise ouvrante/fermante noté par exemple: ou seule noté:
-d'attributs situés dans une balise ouvrante/fermante noté :

ou dans une balise seule noté:

-de commentaires écrit entre les balises: 

Le code minimum d'un site est le suivant:
Code:

On met entre les balises <title></title> le nom de la page web, et entre les balises <body></body> le contenu du site.

Pour afficher du texte on doit l'écrire entre les balises texte qui créer un paragraphe. Pour un retour à la ligne on utilise la balise seule .

SOMMAIRE

Les cours sont la propriété de leurs auteurs respectifs.
Toute reproduction totale ou partielle sans l'accord des auteurs est interdite.