oujood.com

Créer une page web avec le langage HTML

Apprendre comment créer sa première page web. sans logiciel de création de pages web
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++.

chercher |

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

HTML & CSS

Passons aux choses sérieuses.
L'histoire du HTML Le langage HTML a été créé par Tim Berners-Lee, Robert Cailliau et d'autres en 1989. Il s'agit de l'acronyme Hyper Text Markup Language.
Hypertexte signifie que le document contient des liens qui permettent au lecteur de passer à d'autres endroits du document ou à un autre document.
La dernière version est connue sous le nom de HTML5.
HTML est un langage de balisage.
Un langage de balisage est une façon pour les explorateurs de se parler afin de contrôler la façon dont le code html est traité et présenté. Pour ce faire, le HTML utilise deux éléments : les balises et leurs attributs.
Ne paniquez pas nous allons voir tout ce dans les cours à venir.
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 >
* 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, son contenu ne sera pas visible aux visiteurs, 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 html:

	
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

 

Je suppose que c'est fait.
Ce que nous avons écrit dans ce code pour le moment sont des éléments appellés des balises.
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 >
Elle contient une déclaration qui donne les informations suivantes :
1, Type du document PUBLIC
2, La version du langage est HTLM 5
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



1tpe

Regarder aussi nos cours :

Balise addresse

Définit les coordonnées de l'auteur / propriétaire d'un document

Balise noframes

Non pris en charge HTML5. Définit un autre contenu pour les utilisateurs qui ne supportent pas les cadres

envoyer des mails en php

Envoyer des mails


Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci