Tutoriels simples
Le html
Le HTML n'est pas un logiciel, comme le reste des tutos disponibles sur tutoriels Mais j'ai trouvé important de consacrer un tutos assez long sur ce langage qui permet d'agrandir le vaste de monde de l'Internet tous les jours. En effet, de nos jours, de plus en plus de personnes ont envie de créer un site, mais voyant que peu de tuts vraiment complet et facile a comprendre sur le HTML existe, elles se découragent. Je ne veux pas essayer ni revendiquer que ce tutos sera le meilleur qu'il n'est jamais existé sur le HTML, je veux juste aider les novices qui ne connaissent pas grand choses a créer leur premier site perso !
I - Présentation du HTML
Le HTML, ou plutôt l'HyperText Markup Language, est LE langage le plus utilisé sur le net, surtout pour les pages perso. Pour de simples raisons : il est simple a apprendre et rapide a s'executer. C'est un document dont l'extension se termine par .html ou .htm . Il est possible de créer une page web avec des logiciels, chere mais pratiques, comme WebExpert 5 ou Dreamweaver MX, ou alors avec le bloc note, gratuit mais sobre. Je ne m'attarderais pas sur l'utilisation de ces logiciels.... Sachez que avant de faire un site web il faut penser a des choses primordial :
- Le thème du site
- Les differents sous themes
- Le design (les couleurs et la forme) souhaité.
Une fois que vous avez compris et penser a tout cela, voyons voir les bases du HTML...
II - Les bases du HTML
Le HTML est un langages qui repose sur des balises, tout document .html doit être composé au minimum de :
<html>
<head>
<title> .... </title>
</head>
<body>
</body>
</html>
A quoi tout ceci peut donc bien correspondre ....
<html> ... </html> = Balises de début et de fin d'un document HTML
<head> ... </head> = Balises de début et de fin de la zone d'en tête (la ou se mettent les infos pour le browser)
<title> ... </title> = Balises determinant le titre de votre page web, comprise entre les balises HEAD
<body> ... </body> = Balises de début de de fin de la zone comportant les codes apparaissant a vos visiteurs.
Allez donc tester cela dans le votre editeur. Enregistrer le travail dans : test.html par exemple puis ouvrer votre document Une page vide devrait s'ouvir mais avec un titre. Vous connaissez desormais ce qu'il faut toujours mettre dans une page html
III - Les balises les plus utilisées
Toutes les balises sont de cette forme : < ... > Pour la plupart après les avoir ouverte il faut les fermer (comme pour head, body, title ou html) Je vais donc vous énumerez toutes les balises les plus utilisés :
Les propriétés du Body (corp) :
<body> ... </body> :Balise de début du corps de la page web, on peut lui ajouter des atributs :
bgcolor (avec le nom de la couleur ou son code hexadecimal) permet par exemple le choix d'une couleur de fond.
Ex : <body bgcolor="#FFFFFF> ... </body>
D'autres choses utiles :
- link="codehexadecimal" pour que tous les liens aient la meme couleur prdéfinis
- text="codehexa" pour que le texte ait une couleur par défault
Balises pour le texte :
<font> ... </font> : elle permet de configurer les propriétés d'une ecriture, mais pour cela il faut lui définir des propriétés, comme color, size, ... (cela marche de cette facon : color="nom" size="taille") Ex : <font color="red" size="5"> texte </font> Rem : lorsque l'on ferme la balise FONT pas besoin de remettre color et size.
<b> ... </b> : Permet de mettre en gras le texte qui se trouve entre les balises. Ex : <b> En gras </b>
<u> ... </u> : Permet de souligner gras le texte qui se trouve entre les balises. Ex : <u> Souligner </u>
<i> ... </i> : Permet de mettre en italic le texte qui se trouve entre les balises. Ex : <i> Italic </i>
<br /> :Balise qui permet le saut d'une ligne, car si vous sauter des lignes dans votre editeur cela ne le fera pas dans votre page si vous mettez pas cette balise ! Ex : talatatabababicuau <br />
<pre> ... </pre> : Indique à l'editeur qu'il faut prendre en compte tous les espaces et saut de ligne contenue entre ces deux balises Ex : <pre> Texte ... </pre>
Balises pour les tableaux : La plupart des pages HTML sont faîtes sous forme de grand tableau, mais pour cela il faut savoir comment les faire :
<table> ... </table> :Marque le début et la fin d'un tableau, on peut lui ajoute beaucoup de caractéristique :
- bgcolor : permet d'afficher la couleur que l'on veut. Ex : bgcolor="#FFFFFF"
- border : permet de définir si on veut qu'une bordure soit affiché sur le tableau. Ex : border="1"
- bordercolor : pour le couleur de la bordure. Ex : bordercolor="#000000"
- cellpadding : espace entre le bord du tableau et le contenu.
- cellspacing : espace entre les cellules
- width : largeur des cellules, en % ou en pixel. Ex : width="33% ou width="250"
- height : hauteur des cellules, en % ou en pixel.
- colspan : fusion des colonnes. Ex : pour 2colonnes : colspan="2"
- rwospan : fusion des lignes. ex si vous voulez fusionner 3 lignes : rowspan="3"
En gros voila ce que ca peut donner si on cumule le tout :
<table border="1" bordercolor="#000000" cellpadding="0" cellspacing="0" width="750" height="9" bgcolor="#556950"> ... </table>
<tr> ... </tr> :Pour ajouter une ligne, on peut y mettre les mêmes atributs que la balise table. Ex : <tr alt="illustration" class="img" cellpadding="0" cellspacing="0" width="750"> ... </tr>
<td> ... </td> :Pour ajouter une cellule, on peut y mettre les mêmes atributs que la balise table. Ex : <td alt="illustration" class="img" cellpadding="0" cellspacing="0" width="750"> ... </td> Après a vous de construire de jolie tableau :)
Pour inserer une image : Pour cela rien de plus simple, il faut utiliser la balise <img>. Ex : <img src="url_de_limage">
Pour inserer un lien :
C'est la balise <a href> qu'il faut utiliser.
Il y a plusieurs sorte de liens.
- lien vers une autre page web. Ex : <a href="http://www.pageaafficher.com"> titre du lien</a>
- lien pour email. Ex : <a href="mailto:votre@email.com"> titre du lien</a>
- lien pour FTP. Ex : <a href="ftp://urlftp"> titre du lien</a>
D'autres balises : Pour faire une liste il y a plusieur balises :
<ol> ... </ol> :Liste ordonnée (avec des chiffres).
<ul> ... </ul> :Liste non ordonnée (sans chiffres).
<li> ... </li> :Elements de la liste.
Ex : <ol> <li> 1er element </li> <li> 2eme element </li> </ol>IV - Conseils
D'abord vous ne savez pas ce que c'est le code hexadécimal ? C'est tout simplement un code qui est donné a chaque couleur Voici un site qui répertorie pas mal de couleur http://www.ccim.be/ccim328/html/colors.htm Ensuite .. bah c'est fini :p J'éspere vous avoir aider a débuter avec le HTML ! Si il y a une erreur quelque part.. dites le moi..
