Les bases du HTML afin de rédiger un article sans éditeur Wysiwyg
Un article de Wiki Maximus CMS.
Voilà vous avez installé Maximus et vous êtes content car vous allez pouvoir monter votre site très facilement sans aucune connaissance HTML. Détrompez vous même si Maximus vous simplifie la tache un jour ou l'autre vous allez être obligé de vous imprégner des bases du HTML, que ce soit pour créer un bloc avec par exemple des liens, ou tout simplement pour écrire un article sans WYSIWYG. Vous allez donc ici apprendre quelques bases du HTML, non pas pour créer une page complète mais simplement les différentes balises pour pouvoir écrire et mettre en forme un article.
Sommaire |
Les paragraphes :
Comment faire un paragraphe :
la balise pour définir des paragraphes :
<p>Mon paragraphe</p>
Simple à retenir c'est P comme Paragraphe.
Vous pouvez également lui donner des attributs :
<p align="left">Mon paragraphe</p>
ici le paragraphe est aligné à gauche, pour aligner à droite c'est "right" et pour centrer "center"
Les titres de paragraphe :
Les paragraphes comportent parfois des titres pour cela vous avez les balises "h1" à "h4" ce qui donne :
<p><h1>TITRE 1</h1> <h2> sous titre</h2> mon paragraphe </p>
Le retour à la ligne :
Pour faire un retour à la ligne il suffit de mettre à la fin de votre ligne la balise
<br/>
Les polices de caractères :
Définir la police et ses attributs :
<font></font>
Ici aussi vous pouvez ajouter des attributs à la police :
<font size="3" face="Arial" color="#FF6633"> mon texte </font>
Ici nous avons déterminé la taille de la police "size", la police utilisée "face" et nous avons déterminé également la couleur "color"
Mettre le texte en gras:
<strong>mon texte</strong>
Mettre le texte en italique :
<em>mon texte</em>
Les listes :
La liste à puce :
Une liste à puce est marquée par les balises
<ul>liste</ul>
à l'intérieur de ces balises chaque ligne sera marquée par
<li>ligne</li>
ce qui donnera :
<ul> <li>première ligne</li> <li>deuxième ligne</li> </ul>
La liste chiffrée :
Pour une liste chiffrée on remplacera les balises
<ul> </ul>
par
<ol> </ol>
ce qui donnera :
<ol> <li>ligne 1</li> <li>ligne 2</li> </ol>
Les images :
Insérer une image :
Pour insérer une image on le fera de la façon suivante :
<img src="mon_image.jpeg" alt="" />
Les attributs de l'image :
On peut pour une image également ajouter des attributs.
<img src="mon_image.jpeg" width="100" height="100" alt="image" align="bottom" alt="" />
Pour cette image j'ai défini sa largeur "width", sa hauteur "height", le texte qui s'affiche au passage de la souris ""alt" et l'alignement du texte par rapport à l'image "align". Dans le cas de Bottom le texte se place en bas de l'image, on peut mettre "middle" qui place le texte au milieu ou "top" qui place le texte en haut de l'image.
Les liens hypertexte :
Comment faire un lien :
On fait un lien de la façon suivante :
<a href="autrepage.html">mon autre page</a>
Rien n'empêche d'utiliser une image pour le lien :
<a href="autrepage.html"><img src="mon_image.jpeg" width="100" height="100" alt="image" align="bottom"></a>
Dans ce cas il faudra cliquer sur l'image pour ouvrir le lien.
Les attributs du lien :
Si on veut ouvrir le lien dans une nouvelle fenêtre on utilisera le lien Target
<a href="autrepage.html" target="_blank">mon autre page</a>
Le lien mail :
Vous pouvez également mettre en lien une adresse mail, dans ce cas vous le ferez de la façon suivante
<a href="mailto:moi@moi.fr">moi@moi.fr</a>
Les mouvements de text :
Texte clignotant :
Pour faire clignoter un texte
<blink>votre texte </blink> (ne fonctionne pas avec IE)
Les textes qui défilent
<marquee> mon texte defile de droite à gauche </marquee>
On peut amméliorer le défilement
<marquee direction="up" width="200" height="300" scrollamount="1" onmouseover="this.stop()" onmouseout="this.start()"> mon texte defile de bas en haut sur une largeur de 200px et une hauteur de 300px</marquee>
Expliquation:
direction="left (mon text va de droite à gauche") - "right (de gauche à droite)" - "up (de bas en haut)" - "down (de haut en bas)" width =" la longueur en pixel de la distance de défilement": height =" la hauteur en pixel de la distance de défilement": scrollamount = "la vitesse de défilement" la valeur 1 étant la plus faible: onmouseover="this.stop()" = quand on passe la souris sur le texte, il s arrete: onmouseout="this.start()" = quand on retire la souris du texte, il re-défile (ideale pour des liens):
NB: on peut très bien remplacer le texte par des images.
--Mc62 18 mar 2007 à 13:08 (CET) --Thierry 22 mar 2007 à 12:40 (CET)
