(X)HTML, comment créer le contenu de page web

Pour remplir votre site il faut écrire du texte, l'organiser lui donner une forme. Nous allons voir dans ce chapitre :
• Comment rédiger des paragraphes
• La façon dont fonctionnent les titres
• Comment souligner certains mots de son texte
• Etc...

Somaire

Organisation du texte xHTML :

HTML & CSS

Les paragraphes :

Les paragraphe se trouve entre les balises <p> et </p> (qui signifient "paragraphe").
<p> signifie "Début du paragraphe"
• </p> signifie "Fin du paragraphe"
Code html :

<p> ceci est un paragraphe </p>

Retore à la linge :

Si vous appuyez sur la touche entrer ça ne va pas créer une nouvelle ligne comme vous avez l'habitude.
Tapez le code suivant, je dit bien tapez, pour apprendre (n'utilisez pas le copier coller).
Si à l'ouverture de votre page html vous ne trouvez pas ce que vous attendez, alors sachez que vous avez des erreurs dans votre code, révisez le voir vos balises et leurs attributs
car l'oublie d'une petite chose( ; ou > ou < ou / )peut donner un mauvais résultat:
Vous pouvez changer le paragraphe entre <p> et </p> à condition qu'il y est plusieurs lignes.
Code html :

Sélectionner le code

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//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>
	Bonjour et bienvenue sur mon site !
	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 : </p> </body> </html>

En effet nous avons écrit plusieurs linges mais sur notre page il n'y a que 2.
Pour couriger ce probléme il existe une balise "Aller à la ligne" !
C'est une balise seule qui sert juste à indiquer qu'on doit aller à la ligne sa forme est la suivante:
            <br />.

Vous devez obligatoirement la mettre à l'intérieur d'un paragraphe C'es à dire:
entre <p> et </p>. Reprenons notre code mais cette fois avec des balises retour à la linge.
Code html :
Sélectionner le code

	
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//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>	
	<p>	
	
	Bonjour et bienvenue sur mon site ! <br />
	Avant de quitter cette partie du cours, sachez qu'on peut <br /> écrire un commentaire dans un code xhtml. <br /> 
	Le commentaire sert à nous guider dans le code si le code par exemple est long. Le commentaire<br />
	ne sera pas visible aux visiteurs du site, il est écrit pour l'éditeur, vous, la balise du commentaire est<br />
	</p>
	</body>
	</html> 
					
 

Cette fois ça marche.Nos ligne sont là.

Conclusion.

<p> </p> : pour organiser son texte en paragraphes.
<br />: pour aller à la ligne.

Les titres

Votre texte doit avoir un titre .
En (X)HTML on a le droit d'utiliser 6 niveaux de titres différents.
On peut dire "Ceci est un titre très important", "Ceci est un titre un peu moins important", "Ceci est un titre encore moins important" etc...
On a donc 6 balises de titre différentes que l'on peut utiliser :
<h1> </h1>: signifie "titre très important". En général, on s'en sert pour afficher le titre de la page en haut.
<h2> </h2> : signifie "titre important". Utilisez-les par exemple pour organiser vos paragraphes et leur donner un titre.
<h3> </h3> : pareil, c'est un titre un peu moins important (on peut dire un "sous-titre" si vous voulez)
<h4> </h4> : titre encore moins important.
<h5> </h5> : titre pas important.
<h6> </h6> : titre vraiment pas important du tout.
Dans le code suivant nous allons tester les 2 premiers niveaux mai faite des testes avec les autre pour voir le résultat que ça donne.
Code html :

Sélectionner le code
	
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//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>
	<h1>Bonjour et bienvenue sur mon site !</h1>	
	<h2>LE  CRIQUET     </h2>				<p>
	On entend souvent son chant dans les régions herbacées. Ceux que l'on <br />	
	trouve en France ne sont que des cousins des criquets tropicaux<br />
	</p>
	</body>	
	</html> 
	Alors je vous laisse découvrir par vous-même ce que donne les autres niveaux.	
					
 

Mettre en forme le texte

Si, à l'intérieur de vos paragraphes, il y a un ou plusieurs mots que vous aimeriez mettre en valeur, XHTML met à votre disposition 2 balises :
• La première permet de mettre "un peu" en valeur les mots de votre texte.
• La seconde permet de mettre en valeur les mots mai plus fort.
La balise <em> </em> permet de mettre le texte en forme
Il y a aussi la balise <strong></strong> qui fait la même chose mai plus fort.
Entourez le ou les mots à mettre en valeur par cette balise
Code html :

Sélectionner le code

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//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>		
	<h1>LE  CRIQUET!</h1>	
	<p>On entend souvent son chant dans les régions herbacées. Ceux que l'on	
	trouve en France ne sont que des <em>cousins des criquets tropicaux</em>.
	</p>	
	</body>	
	</html> 	
					
 

les mots "cousins des criquets tropicaux" que nous avons mit dans la balise<em> est maintenant en forme.
Dans la suite de ce cours je ne donnerai plus le code en entier de la page car c'est très long, je ne donnerai que la partie du code concerné et c'est à vous de l'incerer dans le code de votre page entre le <body> et </body> .

types de balises

En XHTML, on distingue 2 types de balises :
Les balises de type inline : ce sont des balises que l'on utilise à l'intérieur d'un paragraphe.
C'est le cas notamment des balises <strong></strong> , <em> </em> etc... Ces balises ne générent pas de retoure à la ligne (c'est à dire que si on met une balise de type in line au milieu d'une ligne le contenu de la balise sera placé dans la ligne
Les balises de type block : ces balises servent à structurer la page en plusieurs "blocks".
La première qu'on a appris, c'est la balise <p> , mais il y a aussi les balises de titre <h1>, <h2> ...Vous ne devez PAS mettre de titre à l'intérieur d'un paragraphe. Chacune de ces balises constitue un bloc séparé. Ces balises provoque toujour un retoure à la ligne

Important:

Nous avons apris dans ce chapitre :
• Comment on structure la page en paragraphes, et comment on revien à la ligne.
• Comment se servir des titres (selon leur importance, on utilise <h1>, ou <h2> etc...).
• Comment mettre en valeur une partie de votre texte à l'aide de la balise <em> </em> (insistance faible)
et <strong></strong> (insistance forte).

Par carabde 10 mars 2014

chapitre précédent chapitre suivant