Créer une page web avec le langage HTML

Comment construire sa première page web en html
L'objectif est d'apprendre les notions de base du HTML en utilisant Windows et un éditeur de texte sans logiciel de création de pages web.
Nous verrons aussi comment coder ou éditer une page Web avec Notepad++.

Somaire

Généralité forme d'une page Web

HTML & CSS

Passons aux choses sérieuses.
La page Web.
Le code d'une page Web est constitué de quatre parties principales, comme suit :

* Partie déclaration du type de document : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
* Partie représentant la page entiére et qui sera délimitée par les deux éléments : <html> et </html>
* Partie entête de la page , cette partie est destinée surtout à donner des information aux explorateurs et moteurs de recherche elle sera délimitée par les deux éléments : <head> et </head>
* Partie contenu ou corps de la page elle contiendra tout ce que vous voulez présenter à l’utilisateur c'est-à-dire textes images liens vidéo etc. … elle sera placée entre les deux éléments: <body> et </body>

Si vous écrivez ce code dans un éditeur de pages Web vous obtiendrez une page html vide.

Question 1 : mais quelle éditeur de page Web vais je utiliser?
Repense : tout éditeur de texte bloc note, word, word pad etc...

Question 2 : et qu'est ce que c'est que ce code ?
Repense : c'est ce que nous allons apprendre dans ce qui suit.

Si vous êtes tenté de faire un essai alors taper le code suivant dans le bloc note de windows

Code xhtml:

	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
</body>
</html>

 

Je suppose que c'est fait.
Enregistrer le fichier et taper "essai.html" dans la zone du texte « Nom du fichier » pour les utilisateurs du bloc note n'oubliez pas de mettre le nom du fichier entre des guillemets(") .
Pour le word de microsft ofice ne mettez pas de guillemets mais choisissez html dans Type de fichier.
Ouvrez le fichier enregistré, vous constater en effet une page Web vide, remarquez la barre du titre de votre explorateur rien que le nom de celui ci.
Parfait ma première page html.

Avants de continuer je vous conseille de télécharger et d'installer l'éditeur suivant il est très bon est gratuit.
Le lien de téléchargement ici : Téléchargement de Notepad++ Téléchargez la vertion installer.exe .

voici 2 captures d'ecrant pour faire une comparaison entre bloc note et notepad++

Image bloc note ...

image de bloc note…

Image notepad++

image de notepad++…

Revenons à notre code de tout à l'heur.
La 1ére ligne :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"">
Elle contient une déclaration qui donne les informations suivantes :
1, Type du document PUBLIC
2, La version du langage XHTLM 1.0
3, La langue FR pour le français, EN pour l'anglais etc...
Toute page html doit contenir cette ligne à son début.
Les lignes restantes nous allons les voir dans la suite du cours.

Pour plus de précision sur la declaration de type voir notre référence de balises html

Utilisation de Notepad++

Télécharger et installer Notepad++. Après avoir installer Notepad++ lancer le . Avant de commencer à écrire votre code, comme cet éditeur permet d’écrire du code dans plusieurs langages il faut choisir le langage avec quoi on va travailler pour cela : aller dans le menu langage et choisissez HTML , autre chose pour que l’explorateur puisse afficher correctement les caractères de votre texte, il faut lui indiquer le type d’encodage à utilisé nous verrons dans les chapitres à venir comment, mais ce qui nous importe ici c’est que l’éditeur aussi doit encoder dans ce type d’encodage. Alors pour cela allez dans le menu encodage et choisissez le type d’encodage qui vous convient, moi je choisis toujours Encoder en UTF-8 (sans BOM)

Par carabde 10 mars 2014

chapitre précédent chapitre suivant