Tutoriel N°17
Les balises HTML

Avant propos : L'utilisation des balises HTML vous permettra de réaliser de manière simple vos propres programmations, rendant ainsi votre site plus attrayant.

En effet, l'HTML ( Hyper Text Markup Langage ) est un langage très simple à utiliser pour vos pages Web à partir du module Jimdo : Widget/HTML.

Le code créer est à placer dans la fenêtre " Nouvel élément HTML" à l'emplacement souhaité, il ne vous reste plus quà "enregistrer" et voilà !! . 

 

****

Texte en Gras.

 Balise   Code :                 Résultat                  
<b> </b> <b>votresiteweb</b> votresiteweb


Texte en italique.

Balise Code Résultat
<i> </i> <i> votresiteweb</i> votresiteweb

Texte souligné.

Balise Code HTML Résultat
<u> </u> <u>votresiteweb</u> votresiteweb est souligné

Créer un nouveau paragraphe.

Balise Code HTML  Résultat
<p> votresite<p>web

Votresite


web


Paragraphe centré.

Balise Code HTML Résultat
<P align=center>  </P> <P align=center>Jimdo</P> Jimdo

Paragraphe aligné à Gauche.

Balise Code HTML Résultat
<P align=left>  </P> <P align=left>Jimdo</P> Jimdo


Paragraphe aligné à Droite.

Balise Code HTML Résultat
<P align=right>  </P> <P align=right>Jimdo</P> Jimdo

Aller à la ligne.

Balise Code HTML Résultat
<br> votresite<br>web

Votresite

web


Trait horizontal (centré par défaut).

Balise Code HTML Résultat
<hr> votresite<hr>web

Votresite

-----------

web


Centre les éléments compris dans le code.

Balise Code HTML Résultat
<center>  </center> <center>votresiteweb</center> votresiteweb

Aligne l'élément à Gauche.

 

Balise Code HTML résultat
<DIV align=left> </ Div> <Div align=left>Jimdo</Div> Jimdo

Aligne l'élément à Droite.

Balise Code HTML Résultat
<DIV align=right>  </DIV> <DIV align=right>Jimdo</DIV> Jimdo

Agrandissement de la taille de la Police.

Balise Code HTML Résultat
<big>  </big> <big>votresiteweb</big>

votresiteweb


Réduction de la taille de la Police.

Balise Code HTML Résultat
<small>  </small> <small>votresiteweb</small>
votresiteweb


Titre ou X a une valeur de 1 à 6.

Balise Code HTML Résultat
<Hx>  </Hx> <H2>Jimdo</H2>

Jimdo


Titre centré.

Balise Code HTML Résultat
<Hx align=center>  </Hx> <H2 align=center>Jimdo</X2> Jimdo

Titre aligné à Gauche.

Balise Code HTML Résultat
<Hx align left> </Hx> <H2 align left>Jimdo</H2> Jimdo

Titre aligné à Droite.

Balise Code HTML Résultat
<Hx align right>  </Hx> <H2 align right>Jimdo</H2> Jimdo

Créer des listes numérotées ou tout simplement avec un point :

Votre liste devra commencer par la balise <ol> pour une numérotation et se terminer par la balise </ol>.

Commencer votre liste par <ul> pour obtenir des points et terminer par la balise </ul>.

Nota : Chaque éléments de votre liste devra comporter une balise <li> au début, ainsi qu'une balise </li> à la fin.

Exemples :

Balise Code HTML Résultat
<ul>  </ul>

Mon site est :<ul><li>Beau</li>

<li>superbe</li></ul>

Mon site est :

. Beau

. Superbe

Balise Code HTML Résultat
<ol>  </ol>

Mon site est : <ol><li>Beau</li>

<li>Superbe</li></lo>

Mon site est :

1. Beau

2. Superbe


Mettre vos textes  en COULEURS 

Code couleur à incorporer : 3399CC soit en Exadécimale ou code couleur Anglais.

Code HTML Résultat 
<FONT color="#3399CC">votresiteweb</FONT> votresiteweb

Incorporer une image sur votre page Web.

1- Votre image est placée chez un hébergeur d'images, dans ce cas il vous délivrera son URL (adresse).

2- votre image se trouve sur une page cachée de votre site web. Dans ce cas, sous Windows, faire clic droit sur image, dans la fenêtre qui souvre, clic sur Propriétés

relever l'adresse URL de votre image et la placer dans votre code HTML.

Code HTML
<IMG src="URL adresse de votre image">

Les codes : <IMG...... width=x height=y>permettent la mise à l'échelle de l'image

                   en Pixels ( a pour effet d'accélerer l'affichage de l'image.)

Le code : <IMG...... border=x> permet de définir la bordure de l'image avec lien.

Le code : <IMG...... align=botton> Aligne l'image en bas.

Le code : <IMG...... align=middle> Aligne l'image au milieu.

Le code : <IMG...... align=top> Aligne l'image en haut.

Le code : <IMG...... align=left> aligne l'image à gauche.

Le code : <IMG...... align=right> aligne l'image à droite.

Le code : <IMG...... hspace=x> défini l'espace horizontal entre l'image et le texte.

Le code : <IMG...... vspace=Y> défini l'espace vertical entre l'image et le texte. 

Le code : <center><IMG......"..."></center> permet de centrer l'image.


Réaliser un lien vers une page web, une photo, un fichier..... .

De la même maniére que précédamment, vous devrez indiqué le texte du lien , ainsi que l'URL, adresse du lien.

Code HTML
A href="URL adresse page , fichier..... ">texte du lien ex : Lire</A>

Créer une couleur d'arrière plan 

Code HTML
<BODY bgcolor="XXXXXX">              nota: XXXXXX code couleur d'arrière plan en Hexadécimal

Réalisez une image d'arrière plan.

Code HTML
<BODY background="URL adresse image">


Dans le cadre de la réalisation de vos pages Web, vous serez amené à associer plusieurs balises.

Ainsi, pour obtenir le résultat suivant :

votresiteweb.info

votre code HTML sera le suivant :

<center><font color="#FF0000">votresiteweb</font></b></center