Visites

   visiteurs

   visiteurs en ligne

TOUS LES ARTICLES

Fermer GUITARE DEBUTANT

Fermer HARMONIE

Fermer INFORMATIQUE

Fermer SON

DES VIDEOS PERSO

Fermer La Caina (lounge music)

Fermer Rock en Stock

Fermer Star d'un Jour (concours de chant)

Fermer les armures ont des oreilles

PHOTOS

Fermer  diaporamas

Webmaster - Infos
Préférences

Se reconnecter
---

Votre nom (ou pseudo) :

Votre code secret


 Nombre de membres 24 membres


Connectés :

( personne )
icone informatique.pngINFORMATIQUE - créer une page web

Nous utilisons tous, afin de surfer sur internet, un programme appelé navigateur. Si on utilise windows, on pourra utiliser le programme "Internet Explorer" qui est livré en standard avec le système de Microsoft.
Mais il faut savoir qu’il existe d’autres navigateurs :
- MOZILLA FIREFOX (tournant sous windows et linux ; gratuit).
- SAFARI (tournant sous Mac OS X ; gratuit).
Il en existe bien d’autres.

Pour faire votre première page internet, il va falloir dans un premier temps concevoir un fichier texte. C’est ce fichier texte qui va donner toutes les informations et toutes les commandes nécessaires, pour que notre navigateur affiche ce que l’on désire.
Nous allons pouvoir avec l’éditeur de texte Notepad++ concevoir ce fichier texte. Nous pourrions également utiliser sans problème le bloc-notes de windows, mais Notepad++ est vraiment plus performant, de plus c’est un freeware et il est gratuit.

Afin de concevoir une page web il va falloir maitriser au minimum deux langages de programmation :
- Le XHTML (eXtensible HyperText Markup Language) qui va nous permettre de mettre le contenu de notre site ; c’est à dire en plus d’écrire une simple phrase, pouvoir indiqué un titre, sauter une ligne, mettre en gras, insérer une image, etc...
- Le CSS (Cascading Style Sheets) quant à lui va habiller notre contenu ; c’est à dire choisir un fond de page, choisir une police de caractère, choisir la couleur d’un texte, positionner les éléments de la page, etc...

Nous allons maintenant aborder la rédaction d’une page web en commençant par le langage XHTML.

PRÉPARATION DE NOTRE PREMIÈRE PAGE WEB

Afin de préparer la réalisation de notre première page web, on va créer grâce à l’explorateur de windows un dossier que l’on nommera "Mon Site Web". C’est dans ce dossier que l’on enregistrera tous les éléments nécessaires à la conception de notre page.
Tous les fichiers de notre ordinateur possèdent ce que l’on appelle une extension ; par exemple le fichier "logo.jpg" se compose du nom du fichier "logo" et de son extension ".jpg". Le rôle de l’extension est d’indiquer la nature du fichier. Elle commence toujours par un point. L’extension ".jpg" indique que le fichier est une image ; l’extension ".doc" indique que le fichier est un document word ; l’extension ".mp3" indique que le fichier est du son, etc.. Il existe beaucoup d’extensions. Les fichiers XHTML que l’on va créer avec notre éditeur de texte Notepad++, devront avoir l’extension".html". Cette extension indique que le fichier est utilisable par un navigateur internet.
Il sera donc important de vérifier si les extensions des fichiers apparaissent bien dans l’explorateur de windows. Pour cela on lance l’explorateur de windows et on ouvre le menu "outils" puis on click sur "options des dossiers". On click sur l’onglet "affichage" et on vérifie si la case "Masquer les extensions des fichiers dont le type est connu" est décochée ; si elle est cochée, on la décoche. Ensuite on click sur "Appliquer". Attention, pour ceux qui utilisent Windows Vista, la procédure diffère légèrement ; la vidéo qui suit aborde le sujet.
On installera ensuite notre programme Notepad++. Une fois installé on le configure comme suit : menu "Paramètrage", "Préférences", onglet "Nouveau document" et on coche "Windows", "UTF-8" et langage par défaut "HTML".


SQUELETTE DE NOTRE PREMIÈRE PAGE

Une page web rédigée en XHTML avec notre éditeur de texte Notepad++, doit comporter au minimum le code suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  <head>
      <title>Mon Site Web</title>
      <meta http-equiv="Content-Type"
           content="text/html; charset=utf-8" />
  </head>
  <body>
<p>Bienvenue sur le site de TOUTOU</p>
  </body>
</html>

Pour un débutant, toutes ces lignes de code ne sont, pour l’instant, pas compréhensibles ; ce n’est pas grave. C’est en fin de compte le squelette de notre page XHTML. Tout ce qui est important, c’est de savoir dans un premier temps que nous allons rédiger notre propre code XHTML entre <body> et </body>. On s’aperçoit dans l’exemple ci-dessus que j’ai inséré une première ligne de code <p>Bienvenue sur le site de TOUTOU</p>.
Pour la rédaction de notre page web, tout va se passer entre <body> et </body>.

Afin de rédiger une page web, nous allons étudier dans un premier temps le XHTML, qui est un langage de programmation. Ce langage se résume ainsi :
- Nous utilisons toujours l’éditeur de texte Notepad++.
- En plus des phrases que l’on veut que notre navigateur affiche, nous ajoutons des ordres dans la langue XHTML, sous forme de balises.

LES BALISES

Une balise est un nom qui va être inséré entre un chevron ouvrant "<" et un chevron fermant ">" <balise>. Elle a pour but de donner des ordres à notre navigateur. Lorsque qu’un internaute visite une page web, ces balises n’apparaissent pas, en revanche le navigateur les comprend et les interprète.
Une balise va nous permettre de faire une action.
Les balises par paires sont les plus courantes. En général on utilisera deux balises pour une action : la balise entrante (début d’action) et la balise fermante (fin d’action).

- la balise entrante aura la forme <balise>
- la balise fermante aura la forme </balise> (notez le signe / qui a été rajouté)

Il existe plusieurs balises pour le langage XHTML. Celles-ci vont nous servir à mettre du contenu dans notre page web.
IMPORTANT ! Toutes les balises en XHTML doivent s’écrire en minuscule.

NOTRE PREMIÈRE PAGE WEB

Prenons un exemple pour la découverte de notre première balise.
Je veux afficher la phrase "Bienvenue sur le site de TOUTOU". J’ai donc inséré entre <body> et </body> une première ligne de code <p>Bienvenue sur le site de TOUTOU</p>.
Remarque : la phrase que je désire afficher est encadrée par la balise entrante <p> et la balise fermante </p>. Cette balise est la balise de paragraphe. Nous avons créé notre premier paragraphe. Il suffira maintenant de sauvegarder avec Notepad++ la totalité de notre code, c’est à dire le squelette de base XHTML avec la ligne que l’on vient de rajouter.
On ouvre le menu "fichier" puis "Enregistrer sous". Une nouvelle fenêtre apparait nous demandant le nom du fichier à sauvegarder sur notre disque dur. Avant de taper le nom du fichier, il faudra bien se positionner dans le dossier "Mon Site Web" que l’on a créé antérieurement. Il nous reste plus qu’à taper le nom du fichier avec son extension. Dans notre exemple je vais prendre le nom "essai" suivit de son extension ".html". N’oubliez pas l’extension ; c’est elle qui indique à Windows que le fichier "essai" doit être ouvert par un navigateur internet (Internet Explorer, Firefox ou autre). Un fichier sans extension et Windows en perd son Latin. On tape donc "essai.html". Une fois tapé on click sur "Enregistrer" et on quitte Notepad++.
Voilà nous avons créé notre première page web. Pour voir le résultat de notre travail, il suffira de retrouver le fichier "essai.html" sur votre disque dur avec l’Explorateur de Windows, et de clicker dessus. Automatiquement, Windows détectera qu’il faut ouvrir ce fichier avec votre navigateur internet, grâce à l’extension ".html". Un double click sur le fichier "essai.html" lancera votre navigateur internet et par magie notre phrase apparaitra à l’écran.

Afin d’éviter de taper le code squelette XHTML, vous pouvez faire ce que l’on appelle un copier-coller. Vous sélectionnez avec la souris la totalité du code qui se trouve dans cet article et ensuite avec un click droit de souris vous sélectionnez dans le petit menu qui apparait "copier". A partir de ce moment tout le texte (le code) est gardé en mémoire par Windows (mémoire tampon). Il suffira d’ouvrir Notepad++, de faire un click droit sur la page vierge et de sélectionner dans le petit menu qui apparait "coller". Vous verrez alors votre code apparaitre dans Notepad++.

Il existe une astuce très pratique dans Windows, qui permet de mettre sur le bureau une icône du fichier que l’on veut ouvrir ; cela s’appelle un "raccourci". Vous trouverez une explication dans la vidéo qui suit.



Date de création : 23/11/2010 @ 19:17
Dernière modification : 23/11/2010 @ 19:17
Catégorie : INFORMATIQUE
Page lue 4141 fois


Imprimer l'article Imprimer l'article


react.gifRéactions à cet article

Personne n'a encore laissé de commentaire.
Soyez donc le premier !


cadeau.gifSpécial !

 

me motiver pour continuer
Recherche




Annonces
^ Haut ^