En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour assurer le bon fonctionnement de nos services.
En savoir plus

Initiation à la création de pages WEB

Par VALERIE MORDASINI-CARIVEN, publié le mardi 7 novembre 2017 10:54 - Mis à jour le jeudi 9 novembre 2017 14:52

Comprendre la structure d’un site WEB et le faire évoluer

 

 

 

Etude d’un site WE

Exemple d’un travail réalisé par les élèves d’ICN l’année précédente : https://pbellevue.libreedu.ovh/dev/bellevue/webmaster/index.html

 

  1. Ouvrir Firebug (F12 ou clic sur l’icône puis activer tous les panneaux) et choisir inspecteur,  le code HTML de la page lu par le navigateur s’affiche

  • Des infos complémentaires sur Firebug : http://www.alsacreations.com/article/lire/1215-firebug-debug-debogage-web-extension.html
  • Vous avez aussi accès au code de la page avec un clic droit : code source de la page.

 

Etude du langage HTML.

Le langage HTML est construit autour de balise qui structure la page. Une balise est identifiée par <>. Elle se termine par </>

  • Etudions une première balise <head>

  1. Dans cette balise, vous avez une balise <title>. A quoi correspond-elle sur la page WEB ?

  2. Modifiez là pour vérifier dans firebug.

  3. Qu’est ce qui ne va pas d’après-vous dans cette information : <html lang="en"> ?

  4. Les autres informations contenues dans la balise <head> s’affichent-elles sur la page ? A quoi peuvent-elles servir ?

 

  • Maintenant la balise <body> : Le corps de la page donc.

6. Cliquer sur l'icône de gauche de firebug qui permet de sélectionner un élément de la page et choisir dans la page le menu. Le code HTML correspondant s'affiche

7. Identifier la balise qui permet d’insérer un menu. Y modifier l’adresse du lycée.

De même, identifier :

8. Quelle est la syntaxe pour insérer une image ?

9. Quelle est la syntaxe pour insérer un lien ? Modifier le titre de la dernière interview.

10. Recharger la page : vos modifications ont-elles été enregistrées ?

11. Firebug est un outil de débogage mais quel est le risque de maîtriser ce type d’outil ?

 

Etude du CSS

  • Le CSS = Cascade Style Sheet s’occupe de toute la mise en forme, c’est-à-dire les couleurs, la police : taille, style, etc ….

11. Identifier dans le <head> une des lignes qui identifie le css

 

12. Dans firebug, cliquer à nouveau sur l'icône de gauche, choisir un élément de la page et  modifier les propriétés de cet élément comme la couleur de fond, cliquer ensuite sur cet élément et modifier ses caractéristiques dans le feuille de style à droite

13. Visiter le site : quelles améliorations, modifications, compléments proposeriez-vous  pour un travail ultérieur

 

Créer votre première page. Maintenant, si vous avez tout compris, créez votre première page.

Les pages sont prêtes (enfin presque !)

Elles sont là : Accès en consultation sur le navigateur de votre page  https://pbellevue.libreedu.ovh/dev/icn2017/votreloginreseau/

Pour les modifier à votre convenance et y accéder via le navigateur de fichier, cliquer sur connexion à un serveur :

  • davs://pbellevue.libreedu.ovh/devpub/icn2017/votreloginreseau
  • Entrer nom d'utilisateur et mot de passe du réseau
  • Ensuite ouvrir Bluefish (éditeur de pages) et aller chercher la page index.html dans votre espace sur le serveur ouvert précédemment

14. Enfin, à votre convenance .... Posez-vous la question, "Qui peut accéder à ma page ?" "Quelles règles dois-je respecter ?" 

 

 

Catégories
  • detecteur_distance