0- Créer le fichier en .html
Une page html peut se faire avec un traitement de texte simple et le navigateur internet :
Comme traitement de texte on peut utiliser bloc-notes (fourni avec windows)
ou textpad disponible en téléchargement ici
ou encore notepad++ qui permet de mettre en évidence les fonctions et codes par un code couleur.
Ce logiciel est gratuit et disponible sur son site officiel : ici
Le navigateur sert à visualiser le travail qu’on est entrain de faire, vous pouvez utiliser celui dont vous en avez l’habitude
Pour créer une page html, vous ouvrez le traitement de texte, vous faite « enregistrer sous… »
et vous séléctionnez le format « .html » ou vous le nomez : « nomdepage.html »
/!\ Astuce, pour que le server ouvre directement cette page, nomez la « index.html » /!\
0- Inscrire les métadonnées
Métadonnées : Une métadonnée (mot composé du préfixe grec meta, indiquant l´auto-référence ;
le mot signifie donc proprement » donnée de/à propos de donnée « ) est une donnée servant à définir ou décrire une autre donnée quel que soit son support (papier ou électronique).
Les métadonnées sont à la base des techniques du Web sémantique. Elles sont définies dans le cadre du modèle Resource Description Framework (RDF).
Voici un exemple de page html vide :
<!DOCTYPE HTML PUBLIC « -//W3C//DTD HTML 3.2 Final//EN »> <HTML> <HEAD> <TITLE></TITLE> <META NAME= »Generator » CONTENT= »TextPad 4.6″> <META NAME= »Author » CONTENT= »? »> <META NAME= »Keywords » CONTENT= »? »> <META NAME= »Description » CONTENT= »? »> </HEAD> <BODY BGCOLOR= »#FFFFFF » TEXT= »#000000″ LINK= »#FF0000″ VLINK= »#800000″ ALINK= »#FF00FF » BACKGROUND= »? »> </BODY> </HTML> |
|---|
Décomposons cette page vide :
| <!DOCTYPE HTML PUBLIC « -//W3C//DTD HTML 3.2 Final//EN »> |
|---|
C´est la balise doctype, elle annonce au navigateur que cette page est au format html
| <HTML> </HTML> |
|---|
Les balises html doivent être positionnées de la même manière sur toutes les pages : la balise d´ouverture sous la balise doctype et la balise de fermeture à la fin du document
| <HEAD> </HEAD> |
|---|
Les balises « head » sont des balises d´entêtes, elles définissent la zone de données sur la page.
/!\ attention, les données rentrées ici sont pour le navigateur, ça change rien au contenu visible de la page /!\
| <TITLE></TITLE> |
|---|
défini le titre visible dans le navigateur, pas sur la page
doit être placé entre les balises « HEAD »
| <META NAME= »Generator » CONTENT= »TextPad 4.6″> <META NAME= »Author » CONTENT= »? »> <META NAME= »Keywords » CONTENT= »? »> <META NAME= »Description » CONTENT= »? »> |
|---|
Les balises META sont des balises de metadonnée :
« generator »=logiciel utilisé pour écrire cette page
« author »= auteur de cette page (votre nom ou pseudo)
« keywords »= mots clés de descriptions (séparés par une virgule)
« description »= phrase pour décrire le contenue de votre page
Doit être placé entre les balises « HEAD »
| <BODY BGCOLOR= »#FFFFFF » TEXT= »#000000″ LINK= »#FF0000″ VLINK= »#800000″ ALINK= »#FF00FF » BACKGROUND= »? »> </BODY> |
|---|
La balise « BODY » délimite le corp de la page et donne les paramètres par défaut de la page :
« BGCOLOR »=couleur du fond
« TEXT »= couleur par défaut du texte
« LINK »=couleur des liens non visité
« ALINK »=couleur des liens actif (quand on clique dessus)
« VLINK »=couleur des liens déjà visité
« BACKGROUND »=image de fond (attention au nom et à l´adresse)
La balise « body » d´ouverture doit être placée après la balise de fermeture « head »
La balise « body » de fermeture doit être placée à la fin du document avant la balise de fermeture « html »