ATELIER : Votre première page HTML
- Objectif :
- Créer et afficher une page HTML
- Outils utilisés :
- Un Ordinateur avec un sytème Windows,
- Un editeur de text style "Bloc-notes" ou autre
- Un navigateur Internet Explorer ou Mozilla.
- Sujet :
- On souhaite créer et afficher une page HTML simple qui affiche un bonjour avec quelques message.
- Ci-dessous, l'image du résultat qu'on souhaite obtenir.
- Réalisation :
-
- HTML c'est quoi?,
- Création de répertoire de travail,
- Saisie du texte de la page html,
- Enregistrer la page sur le disque dur,
- Executer pour tester la page.
- Modifier et re-tester la page.
- 1 - HTML c'est quoi?
- HTML, est un langage adapté à Internet.
- Le langage HTML (= HyperText Markup Language) est un langage de mise en page simple et universel de documents,
qui permet sur le réseau Internet l'intégration de texte,d'images et de liens hypertextes.
- Trois balises permettent de créer la structure de base d'une page quelconque.
Ce sont <HTML> , <HEAD> et <BODY>.
- Rôle des différentes balises
- <HTML> et </HTML>
- Encadrent l'ensemble de la page HTML, commandes de début et de fin du document HTML
- <HEAD> et </HEAD>
- Cette section d'en-tête contient notamment le titre de la page, et souvent des informations non affichées
concernant le document (date, auteurs par exemple)
- <BODY> et </BODY>
- Toutes les informations affichées par le navigateur y sont contenues.
- <TITLE> et </TITLE>
- Encadrent le titre de la page. Ces marqueurs doivent être utilisés dans la section <HEAD>.
Le titre de la page est généralement affiché dans la barre de titre de la fenêtre.
- <!-- ...... -->
- Balise pour insérer des commentaires dans la section <BODY> qui ne sont pas affichés par le navigateur.
-
- 2 - Création de répertoire de travail
- Vous avez un ordinateur qui fonctionne avec un sytème Windows,
 donc vous avez l'Explorateur de windows pour gérer et organiser votre disque dur.
Pour commencer on va créer un répertoire de travail c'est à dire l'endroit ou la page
qu'on créer va être enregistrée.
-
-
- Pour lancer l'Explorateur de windows et créer le répertoire,
- Démarrer,
- Programmes,
- Accessoires,
- Explorateur de windows,
- Cliquer sur le poste de travail ensuite disque local C,
- Cliquer sur le Menu "Fichier" + "Nouveau" + "Dossier",
- tapez sur le clavier le nom qu'on va donner à ce répertoire, exemple "nosfavoris",
- Maintenant on dispose d'un répertoire sur le disque dur C, nommé "nosfavoris"
-
- 3 - Saisie du texte de la page html
- Pour créer votre premier page HTML, vous avez besoins d'un editeur de texte (WordPad ou Bloc-notes,...),
dans notre cas on choisi l'Editeur "Bloc-notes".
- Pour lancer "Bloc-notes"
- Démarrer,
- Programmes,
- Accessoires,
- Bloc-notes,
- Tapez le texte suivant,,
-
<HTML>
<HEAD>
<TITLE>Titre de la page</TITLE>
</HEAD>
<BODY>
<!--ceci est un commentaire du créateur de la page -->
Contenu du document (Texte, images, vidéo, etc ..)<br>
Bonjour, c'est ma première page HTML
</BODY>
</HTML>
- Ceci est un plan général d'un document en HTML qui peut servir de modèle (et être recopié à la création d'une nouvelle page).
-
- 4 - Enregistrer la page sur le disque dur,
- Après avoir taper le texte on va l'enregistrer dans le répertoire qu'on a crée.
Dans la zone Enregistrer dans, séléctionner le répertoire "nosfavoris" sur le disque C.
- Noter sur l'image ci-dessous le nom de fichier et le codage qu'on donne à notre page,
ajouter toujours l'extension ".htm" au nom de fichier,
choisir ensuite "Unicode" pour le codage et enfin Enregistrer la page sous le nom page1.htm.
- Maintenant notre page et créer et enregistrée sur le disque dur.
-
- 5 - Executer pour tester la page,
- Lancer L'Explorateur de windows, séléctionner le répertoire "nosfavoris",
a droite on voit notre page html, Double cliquer sur la page.htm,
votre navigateur s'affiche avec notre page.
-
- 6 - Modifier et re-tester la page.
- Lancer L'Explorateur de windows, séléctionner le répertoire "nosfavoris",
- à droite de l'ecran cliquer la page.htm avec le bouton droit de la souris,
- ensuite "Ouvrir avec" puis séléctionner "Bloc-notes",
- Après avoir modifier le contenu de votre page, n'oublier pas de l'enregistrer,
- Executer pour tester la page.
|
1 |