jQuery AJAX
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...
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.
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>
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 :
Exemple : Copier 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 :
Exemple : Copier 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à.
Nous utilisons:
• <p> </p> : pour organiser le texte en paragraphes.
• <br>: pour créer une nouvelle ligne ligne.
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 :
Exemple : Copier 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.
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 :
Exemple : Copier 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
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
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).
chapitre précédent chapitre suivant