Embed Size (px)
DESCRIPTION
Ressources pédagogiques qui un travail pratique sur la conception d'une page web simple à l'aide du code HTML. Avant d'abordé le TP, ce cours présente d'abord le concept de HTMl et Page web aux apprenants.
Citation preview
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
CONCEPTION D’UNE PAGE WEB
A L’AIDE DU CODE HTML
NOTION DE HTML
Le langage HTML est un langage de balisage qui décrit la structure logique d'un
document hypertexte.
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 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 WEBUne 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
Editeur de texte (pour écrire le code HTML)
Navigateur(pour visualiser la page web)
Enregistrer le fichier
du code HTML
Le processus de création d’une page web à l’aide du code HTML se résume en trois étapes
:
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.
Pour la réalisation de notre TP on travaillera sous l’environnement WINDOWS et utilisera
TP : Créer une Page Web à l’aide du Code HTML
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++ »
1
2
3
TP : Créer une Page Web à l’aide du Code HTML
Etape 2 : Saisir le code HTML ci-dessous dans votre éditeur, ensuite cliquer sur le menu
« langage » et choisir HTML. Tu obtiendras ceci :
TP : Créer une Page Web à l’aide du Code HTMLEtape 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 seraenregistré votre page web
Saisir le nom de la page avecl'extension .html (ou .htm çamarche aussi), ensuite cliquersur 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 :
TP : Créer une Page Web à l’aide du Code HTMLEtape 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: [email protected]
