La toute première chose que je vais vous expliquer, c'est que certaines balises fonctionnent "en couple",
tandis que d'autres sont "célibataires". Il ne faut pas oublier de fermer toutes les balises lorsque l'on code
en XHTML. Les balises "en couple" ont la forme suivante: <balise>Intérieur de la balise </balise>.
Le "/" sert donc à indiquer la fermeture de la balise. C'est le même principe pour les balises "célibataires", qui ont
cette forme-ci: <balise />.
Ces balises prennent ce qu'on appelle des attributs. Je ne vous détaillerai pas ces attributs, ni même toutes les balises, je vais juste vous donner le minimum du minimum pour remplir votre page. Si vous voulez en apprendre plus, il existe quantité de tutoriels sur le Web, et je peux vous recommander Open Classrooms.
Il existe plusieurs importance de titre, qui vont du plus important, h1, au moins important h6. Ce sont des balises de type "couple", donc on les utilisera de la manière suivante: <hx>Titre</hx>, en mettant bien sur les chiffres 1,2,3,4,5 ou 6 à la place du "x". J'utilise le plus souvent les h1, h2 et h3. Voici ci-dessous un aperçu des titres
Dans les kits offerts dans cette section, vous pouvez, pour centrer un titre (ou d'autres éléments) mettre un attribut class="center". Ce qui donne la balise suivante: <h3 class="center">Titre centré</h3>
Retour haut de la page<h1>Titre</h1>, h1 peut être remplacé par h2, h3, h4, h5, ou h6, classé par ordre d'importance
Pour les kits de CTM, possibilité de centré les titres avec l'attribut class="center": <h1 class="center"> Titre</h1>
Pour structurer le texte dans la page web, on utilise les balises de paragraphe <p>Un beau paragraphe ...</p>
Tout le texte que vous mettrez dans un paragraphe sera "à la suite", sans retour à la ligne, sauf une fois atteint les limites
du paragraphe. Pour aérer un peu votre texte, utiliser plusieurs paragraphes. Pour forcer un retour à la ligne à un endroit précis
du paragraphe, il existe la balise "retour à la ligne" <br />.Mais ... mais ... elle est pas comme la balise de
paragraphe ?
Eh non, il s'agit d'une balise "célibataire" ! Alors n'oubliez pas de la fermer avec le "/" juste avant
le >.
Et pareil que pour les titres, il est posible de centrer le paragraphe et son texte avec l'attribut class="center" (pour les kits de CTM).
Bonjour !
Je suis un petit paragraphe normal, avec plein de jolis mots à l'intérieur !
Hihihihihihihi
Hello !
Moi je suis un petit paragraphe centré, nananère !!
Je suis un original, et fier de l'être, mouahahah !
Retour haut de la page<p>Bonjour !
< br /> Je suis un paragraphe normal</p>Balise <p> ... </p> pour faire un paragraphe, balise < br /> pour un retour à la ligne
<p class="center" >Bonjour !
< br /> Je suis un paragraphe centré</p>
Je vais ici vous donner que deux balises, <em>Texte en italique</em> et <strong> Texte en gras</strong>.
Pour mettre de la couleur, sans toucher aux feuilles CSS si vous n'êtes pas à l'aise avec, utiliser l'attribut style="color:code_couleur".
Pour un fond de couleur, utiliser style="background:code_couleur;"
Et pour donner un fond et une couleur de texte, utiliser style="background:code_couleur;color:code_couleur;"
Vous pouvez appliquer cet attribut à une balise de paragraphe (<p style="">) ou a un mot spécifique en
utilisant la balise-qui-sert-à-rien
<span style="color:red;">le mot</span>
Texte en rouge Texte en bleu Texte en jaune Texte en vert
Fond rouge Fond bleu, texte blanc Fond jaune Fond vert
Le code couleur peut être le nom en anglais (red, white, black, blue, yellow, green, purple, etc), un code hexadecimal ou RGB.
Je ne m'étendrais pas plus là-dessus ici, je vous donne juste un tableau récapitulatif des 16 couleurs de base, les noms en angalis seulement.
Nom | Aperçu | Nom | Aperçu |
---|---|---|---|
black | white | ||
grey | silver | ||
maroon | red | ||
blue | navy | ||
green | lime | ||
olive | yellow | ||
purple | fuchsia | ||
teal | aqua |
Retour haut de la page<p style="color:green;" >Paragraphe écrit en vert</p>
Mot écrit en <span style="color:red;" >rouge</span> dans un paragraphe en vert
<p style="background:green;" >Paragraphe au fond vert</p>
Mot au fond <span style="background:red;" >rouge</span>
<p style="background:navy;color:white;">Paragraphe écrit en blanc sur fond bleu foncé </p>
Les liens ont la forme suivante: <a href="page.html">Lien</a>, il vous suffit de mettre l'adresse de votre page à la place de "page.html" et le nom que vous voulez à la place de "Lien".
Il n'est pas conseillé de forcer l'ouverture des pages dans une autre fenêtre (ou onglet), c'est pourquoi le "target=""" n'est pas valide en (X)HTML strict. Si vous souhaitez vraiment l'ouverture dans une autre fenêtre (ou onglet), il vous faut mettre le lien sous cette forme: <a onkeypress="if (!this.isContentEditable) return !window.open(this.href,'blank');" onclick="if (!this.isContentEditable) return !window.open(this.href,'blank');" href="adresse.html">Lien</a>
Notez qu'il s'agit de Javascript, donc pour les personnes ayant le Javascript desactivé, le lien de s'ouvrira pas dans une nouvelle fenêtre, mais dans la même
Retour haut de la page<a href="adresse_de_votre_page.html"> Nom de votre lien</a>
Forcer l'ouverture dans une autre fenêtre (onglet):
<a onkeypress="if (!this.isContentEditable) return !window.open(this.href,'blank');" onclick="if (!this.isContentEditable) return !window.open(this.href,'blank');" href="adresse_de_votre_page.html">Nom de votre lien</a>
Une page web faite uniquement de texte n'est pas forcément très agréable à lire, alors mettons-y des images pour illustrer et égayer le tout. Pour
insérer une image, c'est une balise "célibataire" qu'il vous faut, soit <img />.
Vous devez indiquer également le lien vers l'image ainsi qu'un texte de remplacement, si l'image ne peut pas s'afficher.
Ce qui vous donne: <img src="adresse_image.jpg/gif/png" alt="Texte de remplacement ..." />
C'est quoi .jpg/gif/png ? Ce sont tout simplement les différents formats d'images existants (les plus courants).
Pour les bases, le jpg est utilisé pour presque toutes les images immobiles, il permet de compresser les images sans trop perdre de résolution.
Le gif est surtout à retenir pour les images animées et les images à fond transparent, il est souvent assez lourd.
Le png est très très bien au niveau de la compression sans perte de résolution, il permet la transparence, mais IE à quelques problèmes à l'afficher
correctement (couleurs, gestion transparence), c'est pourquoi personellement je l'évite encore un peu.
Retour haut de la page<img src="adresse_de_votre_image.jpg/gif/png" alt="Texte de remplacement ..." />
Retour en haut de la page
Design original et contenu by Chez tite Marie
Tubes by Choupette