Base du language HTML

Cephiroce · Messages: 20 Date d'inscription: 07/03/2008

Voici mon premier tutorial sur se forum vous présentant les "Base des codes HTML".

Tout dabord, sachez qu'il est inutile de creer un site sur un ordinateur de bureau, seulement si vous avez un serveur !!! ceci est important.

HTML qu'est-ce que c'est ?
Le HTML est un language (pas facile) servant à la création d'un site internet,l'html n'est pas le languages le plus simple, mais bon de toutes façons je ne suis pas la pour vous apprendre du lourd.

Vos premier codes :
Cette partie va nous montré les quelques codes de base a savoir :
I : Les balises :
Les balise détermine toutes votre page web, les plus importantes sont :
<html> ; <head> ; <body>
il y en a d'autre mais nous allons voir celà par la suite.

II : Présentation de votre code :
Vos codes html doivent avoir une certaine présentation que voici :

Code:

J'ai oublier de préciser que vos balises (<html> etc...) doivent être fermer de cette manière "</html>" avec le petit slach.

III : Voici d'autre balises :
<ul> est une balise que ne fonctionne pas seul, il lui faut ensuite la balises : <li>
<ul>+<li> permettent de faire une liste de plusier chose
Exemple :

Citation:

Ce genre
de liste
là!

Disposition : se code doit se placer entre les balise <body></body> :

Code:

<html>
<head>
<body>
<ul>
<li>Voici
<li>la
<li>Disposition du code !
</ul>
</body>
</head>
</html>

se qui vous donne :

Citation:

Voici
la
Disposition du code !

Mince !!! j'ai encore oublier un truc. Vous pouvez donner un titre à votre page, vous devez écrir un code entre les balise <head></head> :

Code:

<html>
<head><title>Votre titre</title>
<body>
</body>
</head>
</html>

Ces balise sont <title></title>

Les balise <body> :
Les balises <body> sont en quelques sort le corps de votre page, elle contient tous les textes et autres.
Exemple :

Code:

<html>
<head>
<body>
Entre ces balise vous pouvez mettre tous votre texte, image et autres
</body>
</head>
</html>

Résultat :

Citation:

Entre ces balise vous pouvez mettre tous votre texte, image et autres

Inséré un lien :
Voici une partie plus compliquer !
insérer un code et facile, mais comprendre le code, peut pas vous expliquer moi !
mais vois se qu'il faut inséré :

Code:

<html>
<head>
<body>
<a href="http://www.cteam.freediscussion.net">http://www.cteam.freediscussion.net</a>
</body>
</head>
</html>

Résultat :

Citation:

http://www.cteam.freediscussion.net

Inséré un image :
Hum Hum, DSL je ne sais pas faire !
mais sinon le code est :

Code:

Pas de résultat puis-que j'y suis jamais arriver ^^ dsl.

Autre balise, semblable au BBcode :
Elle se mette entre les balise <body>
Les voici :
<center> pour centrer les texte.
<size=XX> Pour la taille du texte.
il y en a d'autre mais je les ait pas sous la main .

Bon voilà le tuto est fini, j'espère que sa vous aideras !

Cephiroce.

Admin · Admin Messages: 17 Date d'inscription: 06/03/2008

Merci pour ce joli Tuto !!! Saurai tu nous faire une liste des Balises avec leurs effets ?

Cephiroce · Messages: 20 Date d'inscription: 07/03/2008

Tout compte fait je ne pense pas pouvoir toutes les mettres, je ne suis pas un webcreator ! ^^

olbaïd · Messages: 4 Date d'inscription: 06/03/2008

pourait tu nous mettres les plus importantees ?
et leurs sintaxe ??
cela completrait ce super tuto

Eclyps · Messages: 2 Date d'inscription: 09/03/2008

Comme langage y a plus moderne : XHTML mais bon y a une nouvelle version du HTML qui va sortir avec les balises video.

Cephiroce · Messages: 20 Date d'inscription: 07/03/2008

XHTML et HTML heu ... ba c'est la même chose !!!!

Tout dabord : votre page doit se présenter comme ceci :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
</head>
<body>
</body>
</html>

Définition :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

Permet de montrer la version de votre language !

Code:

<head>

: En-tête de la page.

Code:

<body>

: Corps de la page.

Entre les balise "<head>" :

Code:

<title>

: Détermine le titre de votre page.

Code:

<style>

: Pour insérer du CSS.

Code:

: Pour insérer du javascript.

Entre les balises "<body>" :

Code:

<p>

: ceci seras un paragraphe.

Code:

<br />

: Retour à la ligne.

Code:

<em>

: Italique.

Code:

: Gras.

Voilà, il y a d'autre code dans le tuto du haut ! celle si sont juste pour les débutant en html. je métrer d'autre code pour les plus doué !

Cephiroce · Messages: 20 Date d'inscription: 07/03/2008

Petit + :

Dans votre code HTML vous pouvez insérer plusieur autres languages :
-Le Javascript : pour animer votre site !
-Le CSS : pour modifier votre texte !
-Le PHP : Pour rendre votre site plus dynamique et autonome !

Il doit y en avoir d'autre, c'est pour celà que je méttrer à jour se tuto !

PS : Je prépare un tuto sur les bases du PHP !

Stevelefou · Messages: 2 Date d'inscription: 19/03/2008

Je me permets de copier ce code à nouveau pour que vous l'ayez bien sous les yeux (c'est le même que tout à l'heure, il n'y a pas de différence) :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>

Voici les explications ligne par ligne :

1. Sur la toute première ligne se trouve la déclaration "Doctype". C'est une balise un peu particulière.
Concrètement, cette balise sert à dire au navigateur que ce que vous faites est une page XHTML, et que vous utilisez la version 1.0 du langage XHTML (eh oui, comme dans les programmes il y a des versions !).
Pourquoi je vous apprends à utiliser le XHTML 1.0 ? Parce que c'est une des version les plus récentes, et que votre site sera ainsi à jour Smile

2. Vient ensuite la balise <html>. C'est la balise principale qui englobera toute votre page (x)HTML. Comme vous pouvez le voir, on ne la ferme qu'en dernier avec </html>, qui indique que votre page (x)HTML s'arrête là. Il n'y a donc rien après le </html>.
La balise <html> contient 2 attributs :

* xmlns : cet attribut, obligatoire, indique une adresse traitant du xHTML. Ne vous en préoccupez pas et laissez comme ça, ça ne nous intéresse pas particulièrement.
* xml:lang : cet attribut sert à indiquer dans quelle langue est rédigée votre page web. Si vous écrivez une page web en français, mettez "fr" comme je l'ai fait. Si la page est en anglais, mettez "en", en italien "it", espagnol "es" etc etc...

3. La balise <head> contient quelques informations d'en-tête pour votre page web. Elle est refermée un peu plus loin.

1. A l'intérieur de la balise <head>, vous trouvez notamment la balise <title>. Elle est très importante : c'est elle qui contient le titre de votre page web. Ici, le titre est "Bienvenue sur mon site !", mais c'est à vous de mettre le bon titre de votre page Wink

2. Ensuite, vous pouvez voir une balise <meta>. Il existe beaucoup de balises de ce type, mais je ne vous en parlerai que plus tard parce qu'elles ne sont pas indispensables. Seule celle que je vous ai donnée est indispensable : elle sert à indiquer que vous allez taper des caractères spécifiques au français (éèàê etc...).

4. Enfin (ouf!), après la fermeture de la balise <head> commence une nouvelle balise : <body>
C'est entre <body> et </body> que vous taperez le contenu de votre page web. En clair, c'est entre ces 2 balises que Vous allez passer 99% de notre temps Wink

Pour le moment, il n'y a rien entre ces 2 balises, donc la page n'affiche rien.

Voilà, je vous ai donné le sens de tout ce bazar ^^
Encore une fois, retenir ce que ça signifie exactement n'est pas indispensable. Ce qui est indispensable, c'est de se servir de ce modèle à chaque fois que vous créerez une nouvelle page web.

Cephiroce · Messages: 20 Date d'inscription: 07/03/2008

IMPORTANT !!!

Il est très conseiller d'avoir un serveur votre ordinateur n'est pas capable de traduit se language !!!

Ou un système d'exploitation style windows serveur avec un DD raptor (10000 tour/min)