Tutoriel HTML

Vous pouvez parler ici de ce que VOUS voulez... De tout et de rien, votre joie, votre bonheur, les vacances... sujet libre :-)

Modérateurs : Naveed, GregLand

Avatar du membre
Mac_os_men
Messages : 122
Enregistré le : 01 juin 2005 17:22
Localisation : Devant mon ordinateur
Contact :

Tutoriel HTML

Messagepar Mac_os_men » 01 juin 2005 20:06

Voilà j'ai fai un tutoriel en 2 parti :
La premiere:


L'html est constitué uniquement de balises et de textes.
Exemples de balises :

<html></html>
<b></b>
<i></i>

Elles peuvent par exemple mettre du texte en gras, italique, souligné, centré, d'une certaine couleur... et organiser une page avec des tableaux et des calques

Les balises doivent être emboitées (ne pas se croiser).
Elles souvrent (<balise>) et elles se ferment (</balise>) obligatoirement (sauf la balise <br> qui sert à sauter une ligne).

Le texte doit être placé entre les balises.

Exemples
<b>Texte</b> affichera Texte
<i>Texte</i> affichera Texte
<u>Texte</u> affichera Texte
Remarque : on peut utiliser plusieurs balises en même temps mais bien emboitées.
<u><i>Texte</i></u>
affichera Texte

On peut aussi changer la couleur, la taille, la police de caractère, l'alignement du texte.
<font color="red">Texte</font> affichera Texte
<font size="4">Texte</font> affichera Texte (taille de 1 à 7)
<font face="Comic sans MS">Texte</font> affichera Texte
<font face="Comic sans MS" color="red">Texte</font> affichera Texte
<div align="center">Texte</div> affichera :
Texte

/!\ Pour faire un saut à la ligne une seul balise <br> suffit !

Une page html doit être commencée par une balise <html> et terminée par une balise </html>.
La partie non visible de la page (titre, informations sur l'auteur...) doivent se trouver entre les balises <head> et </head>
La partie visible de la page doit se trouver entre les balises <body> et </body> qui doivent être placées aprè les balise <head> et </head>.
/!\ Les balises <head> et <body> doivent être placées entre les balises <html> et </html>.
<html>
<head>
<title>Ma page !!!</title>
</head>

<body bgcolor="black">
<font color="yellow">Bienvenue sur ma page !</font>
</body>
</html>

Ceci afficheras le texte "Bienvenue sur ma page" en jaune sur une page noire avec comme titre (dans la barre de titre en haut de l'explorateur) "Ma page !!!".

Avatar du membre
Mac_os_men
Messages : 122
Enregistré le : 01 juin 2005 17:22
Localisation : Devant mon ordinateur
Contact :

Messagepar Mac_os_men » 01 juin 2005 20:11

LE TEXTE

Paragraphe :

Pour créer un paragraphe, entre celui-ci entre des balises <p>...</p>
Pour insérer un saut de ligne : <br> ou <br />
Pour insérer une barre horizontale : <hr> ou <hr />
On peut gérer certains attributs du paragraphe comme align (alignement) qui peux rendre la valeur "center", "left", "right" ou "justify"

<p align="center">TITRE AU CENTRE</p>
<p align="justify">Paragraphe prenant toute la place possible</p>


Les Accents :

Les caractères spéciaux ne s'écrivent pas "tel-quelle" dans le code mais sont
exprimer par une combinaison leur étant bien spécifique :

<html><head><title>Index</title></head><body>
<p>C'est ma premi&egrave;re page web !<p>
<!-- affiche "C'est ma première page web ! -
</body></html>


Comme tu l'auras remarquer, il est aussi possible de faire des commentaires
à l'intérieure du code, sans qu'il ne soit pris en compte comme ceci <!-- ton commentaire -- > :

<!--======================================================
= Ceci est ma page =
= toute reproduction interdite =
= ©Copyright 2004 =
=======================================================-


Lettres Code html
à &agrave;
á &aacute;
â &acirc;
ç &ccedil;
è &egrave;
é &eacute;
ê &acirc;
ù &ugrave;
û &ucirc;
î &icirc;
& &amp;
< &lt;
> &gt;
" &quot;


Coupures de mot :

Pour obliger un mot à ne pas entre couper par un retour a la ligne :

<nobr>anticonsitutionnellement</nobr>


Cela peut être très pratique pour garder intacte ne une seule ligne une
référence ou autre chose.
à l'inverse :

<wbr>...</wbr>


vous permet la coupure éventuelle d'un mot, très pratique pour éviter qu'un
design se casse la gueule !

Police:

Pour toute une page (police par défaut) :

<body>
<basefont face="Arial, Time new roman">
...
</basefont>
</body>
<!-- <basefont> se place immédiatement après <body>
ainsi que </basefont> et </body> -


Pour un des groupes de mots ciblées :

<font face="Courrier">...</font>


Taille :

De même que la police :

<basefont size="4">
<font size="3">
<!-- de 1 à 7 en html -


Attributs :

Il existe différents attributs et voici les plus courrants :

Attributs Balise

iatique <i>...</i>
gras <b>...</b>
barré <s>...</s>
souligné <u>...</u>

Défilement :

On peut faire défiler du texte et c'est un excellent moyen de le mettre en avant.

<marquee>...</marquee>


Par défaut, le texte défile de droite à gauche

<marquee direction="right">


La vitesse de défilement en milliseconde

<marquee scrolldelay="10">


en pixel

<marquee scrollamount="5">


Titre

Il est possible de créé des titres avec les balises "<hx>"
x étant un nombre compris en être 1 et 6 :

<h1>Titre en gras-gros</h1>
<h2>...</h2>
...
<h5>..</h5>
et ainsi de suite...

Barre horizontales

Comme expliqué plus haut <hr> représente une barre
horizontale et il est possible de changer sont style :
avec
height="" (hauteur)
width="" (longueur)
size="" (épaisseur)
noshade (ombrage retiré)

<hr noshade width="600">


Retraits

Par ces balises :

<blockquote> met en retrait toute la zone </blockquote>

<spacer type=horizontal size="10">
<!-- produit un alinéa seulement lu par netscape -


Beaucoup de balises spécifiques ne sont reconnus que par netscape (autant dire qu'elles ne servent à rien !).
Pour parer le soucis , ayez recours aux feuilles de style (voir plus loin).


Listes

Liste à puce :

<ul>Liste :
<li>1er point</li>
<li>2eme point</li>
<li>3eme ... </li>
<!-- ... etc -
</ul>


thèmes des puces :

circle ; disc ; square :

<ul type="square">


Liste numéroté :

<ol>Liste :
<li>1...</li>
<li>2...</li>
</ol>


Thèmes des chiffres :

l ; i ; I :

<ol type="I" start="5">


start indique le chiffre de départ.

Voilà je l'avais préparé mais bon voilà j'éspère qu'il vous aura plus!!!! :D

EDIT:Dites moi si il est bien sa va faire 1 mois et demi que je suis dessus!!!

Avatar du membre
chris
Messages : 958
Enregistré le : 21 janv. 2004 22:30
Contact :

Messagepar chris » 01 juin 2005 21:59

il est pa mal mai il necessite detre completer comme par exemple expliquer commen faire un tablo et les cellule
La vie est une maladie mortelle sexuellement transmissible.


Image

Avatar du membre
Naveed
Messages : 2005
Enregistré le : 13 sept. 2003 13:03
Localisation : 91 (Essonne)
Contact :

Messagepar Naveed » 01 juin 2005 23:04

j'ai pas tout lu ni corrigé si c bon ou pas mais à 1ère vue ça a l'air bien, je le met en post-it, d'autre pourront rajouter ou corriger si besoin est.
:: Naveed ::
Site : http://naveed.free.fr
Livre d'or : http://www.swisstools.net/guestbook.asp?id=27217
"Loin de moi toute prétention de génie, mais si je puis vous aider..."
Image

Avatar du membre
chris
Messages : 958
Enregistré le : 21 janv. 2004 22:30
Contact :

Messagepar chris » 02 juin 2005 08:23

il fodrai oci rajouter commen faire des liens hypertexte, dimage etc
La vie est une maladie mortelle sexuellement transmissible.





Image