CONCEPTION D’UNE PAGE WEB 
A L’AIDE DU CODE HTML 
Objectifs Pédagogiques 
 Définir HTML, Balise, Page Web 
 Identifier l...
NOTION DE HTML 
En 1991, un certain Tim Berners-Lee invente le World Wide Web (WWW). Pour 
créer les premières pages web, ...
NOTION DE BALISE 
Une Balise (tag en anglais ) est une instruction HTML interprétée par le navigateur 
qui réalise une tâc...
NOTION DE PAGE WEB 
Une Page Web est un document électronique écrit en HTML pouvant contenir des 
images, des vidéos, du t...
STRUCTURE HTML D’UNE PAGE WEB 
<html> 
<head> 
<title> titre de la page </title> 
</head> 
<body> 
Les balises du contenu ...
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 ...
TP : Créer une Page Web à l’aide du Code HTML 
Etape 1 : Ouvrir son éditeur de texte (NotePad ++ dans le cas de notre exem...
TP : Créer une Page Web à l’aide du Code HTML 
Etape 2 : Saisir le code HTML ci-dessous dans votre éditeur, ensuite clique...
TP : Créer une Page Web à l’aide du Code HTML 
Etape 3 : Enregistrer le document précédent dans un répertoire de votre cho...
TP : Créer une Page Web à l’aide du Code HTML 
Etape 4 : Visualise le contenu de sa page web. 
Aller dans le répertoire da...
Fin de la Leçon 
Merci 
Auteur: M. LIHAN LI NDJOM Hans 
Ingénieur pédagogique / Enseignant d’informatique 
Site web: lihan...
Prochain SlideShare
Chargement dans…5
×

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

838 vues

Publié le

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.

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
838
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
13
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 1. 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
  2. 2. 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 ?
  3. 3. 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 ?
  4. 4. 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 ?
  5. 5. 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
  6. 6. 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.
  7. 7. 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++ » 2 1 3
  8. 8. 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 :
  9. 9. TP : Créer une Page Web à l’aide du Code HTML 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 :
  10. 10. TP : Créer une Page Web à l’aide du Code HTML 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 :
  11. 11. 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

×