Créer une page web à l'aide du Code HTML

CONCEPTION D’UNE PAGE WEB
A L’AIDE DU CODE HTML
Objectifs Pédagogiques
 Définir HTML, Balise, Page Web
 Identifier les types de balises
 Interpréter la structure générale du code HTML d’une
page web
 Identifier les outils nécessaires pour créer une page
web
 Concevoir une Page web
Préparé par
LIHAN LI NDJOM Hans
Ingénieur Pédagogique / Enseignant d’informatique et TIC

NOTION DE HTML
En 1991, un certain Tim Berners-Lee invente le World Wide Web (WWW). Pour
créer les premières pages web, il crée le langage HTML qui s'inspire un peu du
langage SGML (Standard Generalized Markup Language).
Les pages Web visualisées dans un navigateur Internet sont écrites avec un
langage
nommé HTML.
HTML signifie Hyper Text Markup Language
Le langage HTML est un langage de balisage qui décrit la structure logique d'un
document hypertexte.
Le langage HTML est composé d’un ensemble de balises (tags).
Qu’est ce qu’une Balise ?

NOTION DE BALISE
Une Balise (tag en anglais ) est une instruction HTML interprétée par le navigateur
qui réalise une tâche (mettre un texte en forme, insérer un texte, une image ou une
vidéo dans une page web, etc.).
Les balises sont des « mots » prédéfinis inclus entre les signes « < » et « > ».La
première appelée ouvrante indique le début de la commande tandis que la
dernière appelée fermante indique la fin de la commande.
Les balises sont invisibles pour le visiteur, elles servent de marqueurs pour indiquer quelque chose
au navigateur. Par exemple, une balise permet d'indiquer que tel texte est le titre de votre page, que
tel autre texte est une citation …
On distingue deux types de balises :
 Les balises existantes par paire ou balises doubles : Exemple : <titre> </titre>
La première balise <titre> indique le début du titre, et elle est refermée plus loin avec </titre>.
 Les balises individuelles : Exemple : <br>, <img>
Les attributs sont un moyen de donner des précisions sur une balise.
Exemple : <image nom="soleil.jpg" />. Ici, l'attribut est "nom", et il a pour valeur "soleil.jpg". Cela
indique que l'image que l'on veut insérer s'appelle "soleil.jpg" tout simplement.
Qu’est ce qu’une Page Web ?

NOTION DE PAGE WEB
Une Page Web est un document électronique écrit en HTML pouvant contenir des
images, des vidéos, du texte, du son… et que l’on peut visiter à travers un
navigateur.
Exemple : Page web d’accueil du site web de GOOGLE
Derrière le contenue de cette page web, se cache un code HTML.
Quelle est la structure générale du code HTML d’une page web ?

STRUCTURE HTML D’UNE PAGE WEB
<html>
<head>
<title> titre de la page </title>
</head>
<body>
Les balises du contenu de la page web
</body>
</html>
Début du
document
Entête du
document
Corps du
document
Fin du
document
<html> Début du document html
<head> Début de l’entête du document html
<title> Début du titre de la page web
</title> Fin du titre de la page
</head> Fin de l’entête du document html
<body> Début du corps du document
</body> Fin du corps du document
</html> Fin du document html

TP : Créer une Page Web à l’aide du Code HTML
Le processus de création d’une page web à l’aide du code HTML se résume en trois étapes
:
Editeur de texte
(pour écrire le code HTML)
Navigateur
(pour visualiser la page web)
Enregistrer le fichier
du code HTML
D’après le schéma ci-dessus, on a besoin des logiciels :
Un éditeur de texte : c’est à l’aide de ce logiciel qu’on écrit le code source de notre pagre
web. Il en existe plusieurs gratuits tels que bloc note, Notepad++, Simple Text, Bbedit,Emacs
,WordPad …
Un navigateur (browser en anglais) : C’est un logiciel d’application qui permet de visualiser
le contenu des pages web et de passer d’une page à une autre. Exemple : Opera mini; Mozilla
firefox.

Etape 1 : Ouvrir son éditeur de texte (NotePad ++ dans le cas de notre exemple) et saisir son
code HTML.
(1) Cliquer sur « Démarrer » ou « start »
(2) Cliquer sur « Tous les programmes »
(3) Cliquer sur « Notepad++ »
2
1
3

Etape 2 : Saisir le code HTML ci-dessous dans votre éditeur, ensuite cliquer sur le menu
« langage » et choisir HTML. Tu obtiendras ceci :

Etape 3 : Enregistrer le document précédent dans un répertoire de votre choix en donnant un
nom à votre document suivi de l’extension .html ou .htm
Pour enregistrer, allez dans le menu "Fichier / Enregistrer", dans la boite de dialogue qui
s’affiche, choisir le dossier dans lequel sera enregistrée la page et saisir "essai.html" comme
sur la capture d'écran
Nom du dossier dans lequel sera
enregistré votre page web
Saisir le nom de la page avec
l'extension .html (ou .htm ça
marche aussi), ensuite cliquer
sur le bouton « enregistrer »
Nous avons appelé notre page "essai.html", mais vous pouvez lui donner le nom que vous
voulez. Rendez-vous ensuite dans le dossier où vous avez enregistré la page. Vous devriez
voir votre fichier HTML comme ceci :

Etape 4 : Visualise le contenu de sa page web.
Aller dans le répertoire dans lequel tu as enregistrer votre document HTML et Double-clique
sur l'icône suivante pour l'ouvrir dans ton navigateur. Tu obtiendras
ceci :
Une fois que ta Page Web sera créé, tu pourras toujours ouvrir et modifier son code HTML en
faisant un clic droit sur l'icône et en cliquant sur "Notepad++" dans le menu déroulant :

Fin de la Leçon
Merci
Auteur: M. LIHAN LI NDJOM Hans
Ingénieur pédagogique / Enseignant d’informatique
Site web: lihan.blog4ever.com
Email: lihan_hans@yahoo.fr
lihanhans@gmail.com

Créer une page web à l'aide du Code HTML

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (19)

Mais de ATPENSC-Group

Mais de ATPENSC-Group (20)

Créer une page web à l'aide du Code HTML