Moteur de recherche : 0%
Un ami : 100%
Magazine : 0%
Bouche à oreille : 0%
Lien depuis un autre site : 0%
Pour un total de 2 vote(s)

Partie 1 : Le HTML c'est génial!

[ Tous les tutoriaux sont la propriété de leur auteur respectif ]

Table des matière (TDM)
Chapitre	Titre
1	Introduction
2	Le (x)HTML c'est quoi?
3	Notepad ++
4	La composition d'une page web en général
5	Du texte dans ma page !
6	Les titres
7	Les liens
8	Les images
9	Les commentaires
10	Les balises génériques
11	La suite...
12	Fiche de ce tutorial

Chapitre 1 : Introduction

Tout d'abord, bienvenue dans ce tutorial pour apprendre à créer des pages web en HTML. Ce tutorial a pour but de vous donner une idée générale sur le HTML et de vous permettre de créer votre site web. Je ne rentrerai donc jamais dans les détails. Mais je pense que j'ai oublié de me présenter (je suis souvent tête en l'air Image Utilisateur ). Je suis Raz, créateur de ce site internet et de ce tutorial. C'est moi qui vais vous guider dans votre apprentissage du HTML. Ma philosophie est de vous proposez d'examiner un certain nombres de scripts puis d'en tirer des conclusions et des explications

Je vous conseille vivement de faire en même temps que moi des essais de scripts. Faites-vous même vos pages HTML en étant sûr de bien les comprendre.

N'oubliez pas que si vous avez un problème par rapport à ce tutorial, le forum de Music And PHP est là pour vous aider Image Utilisateur

Mais commençons sans plus tarder notre cours. Enjoy !

[ Fin du chapitre : remonter ]

Chapitre 2: Le (x)HTML c'est quoi?

Image Utilisateur Tout d'abors le HTML n'est pas une marque de pc, le nom de la super tarte de ma grand mère ou encore un machin bidule truc chouette machin chose qui sert a faire des trucs

Image Utilisateur Vous ne savez pas ce que veut dire HTML ou encore le (x)HTML, vous tombez bien on est la pour apprendre

Le (x)HTML = eXtensible HyperText Markup Language (vous n'êtes évidemment pas obligés de retenir cette traduction). Avec le (x)HTML vous allez créer vos pages web en brut (par ex: je vais mettre à cette ligne un lien vers une autre page, je vais mettre ici une image, un titre, du texte,...)

Image Utilisateur Et le (x)HTML dans tout ça? c'est la même chose?

Tout d'abors il y a peu de différencre entre le HTML et le (x)HTM. Le (x)HTML est le language qui a remplacé le HTMl, il est donc le plus récent et comme vous l'avez surement deveniné, on va pas ce casser la tête a apprendre deux languages semblabes, ce serait primièrement: pas intérressant pour vous, et en plus: fatigant pour vous et pour moi (sachant que je suis comme tout bon webmaster fainéant^^)

[ Fin du chapitre : remonter ]

Chapitre 3 : Notepad ++

Quel programme utiliser pour réaliser vos pages web?

Comme vous débutez dans la création de site web, le mieux est que vous commenciez avec le traditionnel Bloc-Note de windows, il est parfaitement adapté à la création de pages html.
Cependant, il est préférable de continuer par la suite avec un notepad car il colorera votre code html (et aussi d'autres languages).

Télécharger Note Pad ++ (dernière version)

[ Fin du chapitre : remonter ]

Chapitre 4: La composition d'une page web en général

--> Voici les instructions obligatoires que doivent contenir toutes vos pages web:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Votre première page web!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
 
 
</body>
</html>

N'oubliez pas d'enregistrer votre page avec l'extension .html (exemple: page1.html) Image Utilisateur

Essayez votre script!

=> Le script que vous venez d'essayer affiche une page blanche, ce qui est totalement normal. Ceci n'a qu'un but: vous montrer que même si une page web semble vide (blanche), elle contient déjà beaucoup d'informations.

Explications du script:

Je ne vais actuellement pas beaucoup détailler les lignes 1 à 3 car il n'y a pas grand chose à retenir.

-HTML 1.1 = La version HTML du script (la dernière version actuelle du HTML est justement la version 1.1, c'est donc la plus récente).

-lang="fr" = La langue que vous utiliser pour écrire votre script. Par exemple si vous écrivez votre script en Anglais vous devriez mettre: lang="en". (cette balise est utilisée par les moteurs de recherche pour la définition de la langue du site).

-La balise <head></head> = Vous mettrez, dans cette balise, toutes les informations externes à votre page web (titre de la page, type de langue).

-La balise <title></title> = Le nom qui apparaîtra en haut de votre navigateur. Elle est très importante car un bon nombres de moteurs de recherche donnent beaucoup d'importance aux titres des pages (choisissez donc bien votre titre !)

-La balise <body></body> = le corps de la page, tous ce qui apparaîtra sur votre page se trouvera entre <body> corps de la page </body>.

[ Fin du chapitre : remonter ]

Chapitre 5 : Du texte dans ma page !

Tous d'abord, examinons de plus près un script simple Image Utilisateur

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Votre première page web!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<p>
L'éternelle jeunesse : Mythe poursuivi par bien des hommes mais seul Dorian Gray
 le trouvera et en fera un mauvais usage (mythe de Narcisse).Comme pour Faust
 (livre de Goethe), Dorian Gray échange son salut contre le bonheur matériel 
 mais malheureusement, lui, ne sera pas sauvé.
</p>
<p>
Le bien et le mal :Dans ce livre, l'auteur nous laisse trancher entre ce qui 
est bien et ce qui est mal, ne précisant jamais les vices commis par D.G, mais 
en décrivant les effets de ces vices sur le tableau.
</p>
</body>
</html>

N'oubliez pas d'enregistrer votre page avec l'extension .html (exemple: page1.html) Image Utilisateur

Essayez votre script!

Explication du script:

- La balise <p></p> = Paragraphe, elle permet de passer une ligne entre chaque paragraphe et donc d'y insérer du texte

- Il faut aussi que vous fassier la différence entre une balise inline et une balise block. Pour le moment vous n'avez besion de savoir que deux choses, un balise block crée un block, et une balise inline se place dans un block La balise <p></p> est donc de type block!
Je noterai à chaque fois le type de balise que nous verrons tout au long de ce tutorial. Merci qui?

Notez, que la création d'un block, créera automatiquement un retours à la ligne, tandis que le texte continuera sans retour à la ligne avec une balise inline. C'est la meilleur façon pour différentier block et inline

Help! Si je veux passer une ou plusieurs lignes dans un paragraphe?

Caaalme Image Utilisateur

Il suffit d'utiliser la balise <br/> qui est de type inline

Ajoutons donc cette fameuse balise à notre script Image Utilisateur

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Votre première page web!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<p>
L'éternelle jeunesse :<br/> 
<br/>
Mythe poursuivi par bien des hommes mais seul Dorian Gray le trouvera et en
 fera un mauvais usage (mythe de Narcisse).Comme pour Faust (livre de Goethe),
 Dorian Gray échange son salut contre le bonheur matériel mais malheureusement, 
 lui, ne sera pas sauvé.
</p>
<p>
Le bien et le mal :<br/>
<br/>
Dans ce livre, l'auteur nous laisse trancher entre ce qui est bien et ce qui 
est mal, ne précisant jamais les vices commis par D.G, mais en décrivant les 
effets de ces vices sur le tableau.
</p>
</body>
</html>

N'oubliez pas d'enregistrer votre page avec l'extension .html (exemple: page1.html) Image Utilisateur

Essayez votre script!

Explication du script:

- La balise <br/> = Retour à la ligne. Attention les balises <br/> ne se ferment jamais (retenez le bien)

- Une balise assez proche mais de type block est <hr/> elle sert a placer une ligne horizontale de séparation. Essayez, je ne vous donne pas de script d'exemple ( comme ca vous pourrez réfléchir tout seul ^^ ).

[ Fin du chapitre : remonter ]

Chapitre 6 : Les titres

Définition: les titres sont externes à un paragraphe, ils en donnent l'idée générale.

Voici un script de base Image Utilisateur

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Votre première page web!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>Présentation par deux d'un grand roman de la littérature mondiale</h1>
<h2>Présentation par deux d'un grand roman de la littérature mondiale</h2>
<h3>Présentation par deux d'un grand roman de la littérature mondiale</h3>
<h4>Présentation par deux d'un grand roman de la littérature mondiale</h4>
<h5>Présentation par deux d'un grand roman de la littérature mondiale</h5>
<h6>Présentation par deux d'un grand roman de la littérature mondiale</h6>
<p>
L'éternelle jeunesse :<br/> 
<br/>
Mythe poursuivi par bien des hommes mais seul Dorian Gray le trouvera et en fera 
un mauvais usage (mythe de Narcisse).Comme pour Faust (livre de Goethe), 
Dorian Gray échange son salut contre le bonheur matériel mais malheureusement, 
lui, ne sera pas sauvé.
</p>
<p>
Le bien et le mal :<br/>
<br/>
Dans ce livre, l'auteur nous laisse trancher entre ce qui est bien et ce 
qui est mal, ne précisant jamais les vices commis par D.G, mais en décrivant 
les effets de ces vices sur le tableau.
</p>
</body>
</html>

Essayez votre script!

-La balise <h1,2,3,4,5,6></h1,2,3,4,5,6> = un titre, le plus grand étant <h1></h1> et le plus petit<h6></h6>. Cette balise doit toujours être fermée et ne s'utilise pas dans un paragraphe (elle lui sera donc externe).
Elle est de type block.

[ Fin du chapitre : remonter ]

Chapitre 7 : Les liens

Définition: un lien permet d'unir une page à une autre, il permet aussi de lier un lien cliquable vers un autre site.

Voici un script avec les deux types de liens

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Votre première page web!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h2>Lien vers une page de mon site:</h2>
<p>
<a href="script2.html"title="HTML">Lien</a>
</p>
<h2>Lien vers un autre site :</h2>
<p>
<a href="http://www.google.be"title="google">Lien</a>
</p>
</body>
</html>

Essayez votre script!

Explication du script:

- La balise <a> = Lien hypertexte qui permet à l'aide de l'attribut href de définir si le lien doit pointer vers une page interne ( lien relatif ) au site ou vers un autre site ( lien absolus ). Cette balise est de type inline

- La balise title= permet de définir une infobulle au passage de la souris sur le lien.

- <a href="script2.html"title="HTML">Lien</a> est un lien relatif

- <a href="http://www.google.be"title="google">Lien</a> est un lien absolus

Rappel : Si vous avez un problème, le forum de Music And PHP est là pour vous aider ;-)

[ Fin du chapitre : remonter ]

Chapitre 8 : Les images

Comment insérer une image? c'est ce que nous allons voir de suite Image Utilisateur

GO!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Votre première page web!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<p>
<img src="PENS.WMF" alt="Un beau stylo"/><br/>
</p>
</p>
</body>
</html>

Essayez votre script!

Explications du script:

- La balise <img> = permet de délimiter l'emplacement de l'image. C'est une balise qui ne se ferme pas et qui est inline.

- L'attribut src = donne l'emplacement de l'image par rapport à l'emplacement du script (par exemple si l'image se trouve dans un sous-dossier nommé images, vous devez mettre: src="images/PENS.WMF". Comme pour les lien, l'adresse peu se donner sous sa forme absolue ou sa forme relative.

- L'attribut alt = joue un double rôle, le rôle d'infobulle et le rôle de remplacement de l'image si le lien est erroné. Il faut toujours mettre un alt à chaque image.

- Quel format d'image utiliser? Tous les formats sont bons, j'ai utilisé le format .wmf mais vous pouvez très bien utiliser un autre format tel que le gif, jpg,...le png est très prisé.

[ Fin du chapitre : remonter ]

Chapitre 9 : Les commentaires

Définition: un commentaire est une information qui s'insère dans vos scripts html comme aide mémoire. Ils ne sont jamais visibles par vos visiteurs.

Vous voulez voir un script? Image Utilisateur GO!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<!--Titre de la page-->
<title>Votre première page web!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<!--Titre en h1-->
<h1>Présentation par deux d'un grand roman de la littérature mondiale</h1>
<!--Premier paragraphe-->
<p>
L'éternelle jeunesse :<br/> 
<br/>
Mythe poursuivi par bien des hommes mais seul Dorian Gray le trouvera 
et en fera un mauvais usage (mythe de Narcisse).Comme pour Faust
 (livre de Goethe), Dorian Gray échange son salut contre le 
 bonheur matériel mais malheureusement, lui, ne sera pas sauvé.
</p>
<!--Deuxième paragraphe-->
<p>
Le bien et le mal :<br/>
<br/>
Dans ce livre, l'auteur nous laisse trancher entre ce qui est bien
 et ce qui est mal, ne précisant jamais les vices commis par D.G, 
 mais en décrivant les effets de ces vices sur le tableau.
</p>
<p>
OoO Incroyable, on ne voit pas les commentaires !
</p>
</body>
</html>

Essayez votre script!

Explications du script:

-Structure: 

-Votre utilité = actuellement vous n'en avez pas grandement besoin, mais le jour où vous jouerez avec des scripts de 600 lignes il vous sera pratique d'y insérer un petit aide mémoire ;-)

[ Fin du chapitre : remonter ]

Chapitre 10 : Les balises génériques

Une dernière chose que j'aimerais vous apprendre sont les balises générique. Elles seront très importante lorsque vous mettrez en forme votre site.
En plus il n'y en a que deux, c'est pas la mer à boire!

Toutes les balises que vous venez de voir sont des balises sémentiques ( elle ont un sens ) . En effet, h1 veut dire titre, p veut dire paragraphe,... Mais moi maintenant je vais vous en apprendre deux qu'on apelle générique ( elles ne sont pas sémentiques ) Image Utilisateur
.

Ces balises sont <div></div> ( de type block ) et <span></span> ( de type inline ).
Ces deux balises n'ont pas de sens elle ne veulent rien dire. Elles ne sont utile que si vous leur donnez un attribut.
Il y a trois attributs possibles, => class, id et style. cette dernière ne sert pour imbriquer directement un style à la page ( un CSS quoi! ), c'est pour ca que je n'en parle pas.
L'attribut class sert pour différentier un lien d'un autre lien ( cela est intéressant au niveua du CSS ).
Le plus intéressant reste l'attribut id qui servira à nommer quelquechose dans la page ( toujours utile seulement avec le CSS ).

L'attribut class s'utilise comme ca: <div class="un identifiant"> le texte </div>

l'attribut id ne peu s'utiliser qu'une seule fois par block : <div id="un identifiant"> le texte </div>

Allez je vous fait un petit script qui ne sert a rien Image Utilisateur vu qu'il ne possède pas de CSS mais ca, ca viendra!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Votre première page web!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="center"> 
<!--Cela apellera une proriété CSS que vous nomerez "center" dans le CSS-->
    <h1>Présentation par deux d'un grand roman de la littérature mondiale</h1>
	
	<div class="entoure1"> 
	<!--Cela apellera une proriété CSS que vous nomerez "entoure1" dans le CSS-->
    <p>
        L'éternelle jeunesse :<br/> 
        <br/>
        Mythe poursuivi par bien des hommes mais seul Dorian Gray 
		le trouvera et en fera un mauvais usage (mythe de Narcisse).
		Comme pour Faust (livre de Goethe), Dorian Gray échange son salut 
		contre le bonheur matériel mais malheureusement, lui, ne sera pas sauvé.
    </p>
	</div>
	
	<div class="entoure2"> 
	<!--Cela apellera une proriété CSS que vous nomerez "entoure2" dans le CSS-->
    <p>
        Le bien et le mal :<br/>
        <br/>
        Dans ce livre, l'auteur nous laisse trancher entre ce qui est bien et 
		ce qui est mal, ne précisant jamais les vices commis par D.G, mais en 
		décrivant les effets de ces vices sur le tableau.
    </p>
	</div>
</div>
</body>
</html>

Essayez votre script!

Explications du script:
Bon pour le moment vous ne pouvez pas voir ce qui pourrai arriver grace au CSS, c'est pour cela que je vais vous le révéler!
On pourrait très bien imaginer un cadre centré au milieu de la pade web avec al'intérieur: deux cadres différent contenant chacun un texte.

[ Fin du chapitre : remonter ]

deuxiemme partie

La suite...

Vous connaissez maintenant un certain nombres de balises HTML pour faire vos propres pages web :-) cependant elles seront laides (bein oui, ya pas de mise en page^^). je vous donne donc rendez-vous dans le tutorial CSS de axelorque qui vous permettra de définir une véritable mise en page du site.

Le mot de la fin

Ce dernier chapitre nous fait terminer ce tutorial, je n'ai pas grand chose à dire car je suis surtout fatigué (il est très exactement 4h20 du matin à l'heure où je vous parle) mais je suis aussi très content d'avoir pu partager un peu de votre temps. A très bientôt sur Music And PHP !

Fiche de ce tutorial

Nom : Tutorial sur le (x)HTML

Auteur : Raz

Date de création : 21/12/2005

Dernière mise à jour : 15/03/2007

[ Remonter ]