Créer son premier site web

Par Neuromancer

Mise en forme

Décorer son texte

Comme dans tous les éditeurs de texte, on peut mettre en valeur son texte, le souligner, le mettre en gras, en italique, en couleur, changer la police, la taille, ect…
Pour cela, on a beaucoup de balises. Voici les principales :

Exemple :

<u>Bonjour tout le monde !</u>
<b>Bonjour tout le monde !</b>
<i>Bonjour tout le monde !</i>
<font color=”#0000FF”>Bonjour tout le monde !</font>
<font face=”Verdana”>Bonjour tout le monde !</font>
<font size=”5″>Bonjour tout le monde !</font>

donne :

Bonjour tout le monde !
Bonjour tout le monde !
Bonjour tout le monde !
Bonjour tout le monde !
Bonjour tout le monde !
Bonjour tout le monde !

On peut bien sûr cumuler les décorations :

Exemple :

<u><b><i><font face=”Verdana” color=”#0000ff” size=”5″>Bonjour tout le monde !</font></i></b></u>

donne :

Bonjour tout le monde !

Note : Comme vous pouvez le voir la balise <font> utilise les paramètres comme la balise <body>.

Mise en page

Après avoir décoré son texte il faut le mettre en page.

Pour aller à la ligne ou sauter des lignes, on utilise la balise <br>. C’est une des rares balises que l’on ne ferme pas.

Exemple :

Bonjour tout le monde !<br>Comment allez vous ?
Bonjour tout le monde !<br><br>Comment allez vous ?

donne :

Bonjour tout le monde !
Comment allez vous ?
Bonjour tout le monde !

Comment allez vous ?

Comme vous le voyez, les <br> sont cumulatifs.

– On peut sauter une ligne en laissant une barre horizontale. Pour cela, on remplace la balise <br> par la balise <hr>.

– On peut aussi faire des paragraphes avec la balise <p>. On est pas obligé de la fermer non plus mais c’est recommandé pour faire un code plus “propre”.

– Ensuite, on peut avoir envie d’aligner son texte. On peut l’aligner à gauche, à droite, le centrer ou le justifier.

Exemple :

<div align=”left”>Bonjour tout le monde !</div>
<div align=”right”>Bonjour tout le monde !</div>
<div align=”center”>Bonjour tout le monde !</div>
<div style=”text-align:justify;”>Bonjour tout le monde !</div>

donne :

Bonjour tout le monde !

Bonjour tout le monde !

Bonjour tout le monde !

Bonjour tout le monde !

– Il y a aussi les styles de titres à mi-chemin entre la mise en page et la décoration. Il y en a 6 types :

Exemple :

<h1>Bonjour tout le monde !</h1>
<h2>Bonjour tout le monde !</h2>
<h3>Bonjour tout le monde !</h3>
<h4>Bonjour tout le monde !</h4>
<h5>Bonjour tout le monde !</h5>
<h6>Bonjour tout le monde !</h6>

donne :

Bonjour tout le monde !

Bonjour tout le monde !

Bonjour tout le monde !

Bonjour tout le monde !

Bonjour tout le monde !
Bonjour tout le monde !

– Enfin, on a les tableaux. Comme le nom l’indique, on fait des tables avec. Ils ont beaucoup de paramètres.

Prenons un exemple de table :

1+1

2

2+2

4

3+3

6

4+4

8

Son code :
<table width=”90%” height=”150″ border=”2″ bgcolor=”#C0C0C0″ bordercolor=”#000000″>
<tr>
<td><div align=”center”>1+1</div></td>
<td><div align=”center”>2</div></td>
</tr>
<tr>
<td><div align=”center”>2+2</div></td>
<td><div align=”center”>4</div></td>
</tr>
<tr>
<td><div align=”center”>3+3</div></td>
<td><div align=”center”>6</div></td>
</tr>
<tr>
<td><div align=”center”>4+4</div></td>
<td><div align=”center”>8</div></td>
</tr>
</table>

D’abord, voyons les paramètres :

  • width et height : la largeur et la hauteur. Elles peuvent s’exprimer en pixels ou en %. Si l’on ne met pas ces paramètres, la table colle au texte.
  • border : la taille du bord. En pixels. (facultatif)
  • bgcolor : couleur de fond de la table. (facultatif)
  • bordercolor : couleur du bord. (facultatif)

Voyons maintenant la construction de la table. Après la balise <table>, on ouvre une “ligne” avec la balise <tr>. Ensuite, on crée une case sur cette ligne avec la balise <td>,on remplie la case (<div align=”center”>1+1</div>), on referme la case avec </td> puis on crée une nouvelle case, on la remplie, on la referme et enfin on ferme la ligne avec </tr>. Et on recommence pour chaque ligne de la table.
On peut faire autant de lignes et de cases que l’on veut. Ici, j’ai pris une table de 4 lignes x 2 colonnes.

Vous aimerez aussi

S’abonner
Notifier de
guest
14 Commentaires
plus ancien
plus récent Le plus populaire
Commentaires en ligne
Voir tous les commentaires
TheClem

Un guide impecable 🙂
Bravo !

quadvosges

tres bien ce petit cour ;o)
merci

Neuromancer

Merci, j’espère avoir été clair malgré les petites fautes de frappe :op

Imrahil

Guide tres sympathique dont j espere faire une bonne utilisation 🙂

grobb

Merci! Tout compris, c’est quand que démarre les cours de javascript, de php et de flash? 🙂
@+

Neuromancer

Ben le PHP, je débute chuis pas vraiment un pro, le Javascript j’aime pas ça et le Flash chuis une bouse.
M’enfin, y a surement quelqu’un qui va se dévouer.

Ou alors ça sera moi quand j’aurais fini la formation que je vais faire.

ethaniel

wouhaa !!! vachement clair comme expliquation , je planais un peu maintenant j’y vois plus clair grace a toi (lol) merci ….

005

je vois qu’on en est au même point niveau “langages” Web: le PHP je commence, le JS j’aime pas ça et le Flash chuis une daube 😛 Faut voir aussi que l’interface de Flash est pas là pour aider…

† B3R7R4NÐ †

Alors là ça tombe HYPER BIEN parce que je commence en ce moment même à m’intéresser au sujet ! HTML, PHP, FLASH… les tutos HTML répondent exactement aux questions que je me posais, notamment les FRAMES. Bien joué, continuez !!!

khaman

trés bonne explication merci je vais crée mon site grace a toi cooll longue vie a toi tchao

Bruno costard

Bonjour,

Du clair, du précis, de l'essentiel… pour quelqu'un comme moi qui, pas doué en micro, à des tas d'idée pour des sites internet (monde fabuleux allant de l'extraordinaire au plus détestable) j'ai touvré, via cet article, des bases pour la compréhension global du fonctionnement de sites… Pouvez-vous me conseiller quelques lectures "claires" et suffisament "synthétiques" pour parfaire mon approche ?

D'avance merci.

higher

t’es vraiment génial, ce tutoriel reste parmi les meilleurs que j’ai rencontré sur le net. Félicitation, continue comme ça :bigglasses:

pedrolito49

Trés bonne explication, par contre je galére au niveau de l’affichage des images ou de la musique que je veux mettre sur mon site, chez ifrance comme multimania, il ne veux pas m’afficher ou lire les deux, pourriez vous m’aider? Est ce une histoire de .xhtml ou .html ? J’utilise web expert pour crée mes sites .

Wullfk

Super explicatif :), par contre pas bien compris l’histoire de l’espace illimité sur MultiMania (si on en fait la demande) car de base c’est que 1Go.
Mais bon c’est qu’un détail, par rapport aux explications fournis 😉

😉 😉 😉

14
0
Nous serions ravis d'avoir votre avis, laissez un commentaire !x