oujood.com

HTML, comment créer le contenu de page web:
insérer et formater un texte HTML

Le contenu de votre site est la chose la plus importante pour le visiteur de votre site. Pour remplir votre site il faut écrire du texte, l'organiser lui donner une forme et c'est ce que nous allons voir dans ce chapitre
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...

search |

Ajouter ou insérer du contenu dans une page web

Le <body> HTML est l'endroit où nous ajoutons le contenu qui est conçu pour être vu par des humains (c'est-à-dire les visiteurs de votre site).
Il s'agit de texte, d'images, de tableaux, de formulaires et de tout ce que nous voyons sur Internet chaque jour.

Organisation du texte HTML :

Les paragraphes :Comment ajouter du texte en HTML

Pour ajouter du texte à notre page HTML, il suffit d'utiliser un élément ouvert par la balise <p> qui crée un nouveau paragraphe. Nous plaçons notre texte après cet élément <p> et nous fermons le paragraphe par </p>.

Le plus important du contenu de votre page web est le texte, il sera donc formé par des paragraphes

Les paragraphe de la page web se trouve entre les deux éléments de la balise paragraphe <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">
	<html>
	<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 !</p>
	<p>Avant de quitter cette partie du cours, sachez qu'on peut écrire un commentaire dans 
un code HTML. 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 "retoure à 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 la mettre à l'intérieur d'un paragraphe C'es à dire:
entre <p> et </p> si on désire avoir une nouvelle ligne.
Reprenons notre code mais cette fois avec des balises retour à la linge.

Code html :
Sélectionner le code

	
	<!DOCTYPE html">	
	<html>	
	<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 HTML. <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.

Nous utilisons:

<p> </p> : pour organiser le texte en paragraphes.
<br>: pour créer une nouvelle ligne ligne.

Les titres et sous titres

Tout texte doit avoir un titre et peut à un moment ou un autre avoir des sous titres.
En 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" >	
	<html >	
	<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, HTML met à votre disposition 2 balises très importantes :
• 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">	
	<html>	
	<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> .

Voici ci après la liste de toutes les balise pour formater votre texte.
Sachez que toute les balise de cette liste peuvent etre remplacées par du CSS sauf les deux ci dessus et la balise <ins>.

Elément Signification Rôle ou fonction
<b> Gras Mettez en évidence les informations importantes
<strong> Gras Fort De la même manière que le gras, pour mettre en surbrillance le texte clé
<i> Italique Pour désigner du texte
<em> Texte important mis en évidence Habituellement utilisé comme légendes d’image
<mark> Texte marqué Mettez en surbrillance l’arrière-plan du texte
<small> Petit texte Pour texte de taille réduite
<strike> Texte barré ou biffé Pour placer une ligne horizontale sur le texte
<u> Texte souligné Utilisé pour les liens ou les surlignages de texte
<ins> Texte inséré Affiché avec un soulignement pour afficher un texte inséré
<sub> Texte en indice Choix stylistique typographique
<sup> Texte en exposant Un autre style de présentation typographique

Vous pouvez aussi consulter la liste de toutes les balises HTML pour plus de détail ici

types de balises

En HTML, 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 / mis à jour le: 04 /01/2022

chapitre précédent      chapitre suivant



Trafic Booster
hebergement web

SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

html5 Audio

insérer des audio

fonction quotemeta, quotemeta

Protége les méta caractères

background-image

Définit l'image de fond d'un élément



Rentabilisez efficacement votre site

Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci