Sciences Numériques et Technologiques

Thème 2 : Le Web

2.1 : Comment créer un petit site web ?

I - Les langages HTML

1) Prendre connaissance

Site : Conception de pages pour un navigateur

Lire les parties suivantes :

  • Pour bien commencer
    • Les informations que peut lire un navigateur
    • Les logiciels de base
  • La structure du contenu d'une page (le HTML)
    • Généralités sur les balises
    • Les balises obligatoires
    • Les balises de structure
    • Les balises pour le texte

2) Une première page

Ouvrir le navigateur, l'éditeur de texte et l'explorateur de fichier.

A l'aide de l'éditeur de texte, créer une page html avec les balises de structure de base et un peu de texte.

Visionner cette page dans le navigateur.

 

En utilisant les balises h1, h2, h3, ainsi que la balise p, construire la page ci-dessous :

 

En utilisant les balises, em, strong, sup et sub, mettre en valeur quelques lettre et/ou mot du texte de la page.

II - La mise en forme

1) Prendre connaissance

Site : Conception de pages pour un navigateur

Lire les parties suivantes :

  • La mise en forme du contenu d'une page (le CSS)
    • Généralités sur la mise en forme
    • Les styles pour le texte
    • Les styles pour les blocs

2) Mettre en pratique

Mettre la page précédente en forme selon vos goûts.

III - L'organisation des fichiers ?

1) S'informer

L'arborescence des fichiers

Dans la mémoire d'un ordinateur ou d'un téléphone portable, les données sont organisées sous la forme d'une arborescence.

Une arborescence est constituée d'un dossier racine qui lui-même contient des dossiers, et ainsi de suite.

Chaque dossier, en plus de dossiers, peut également contenir des fichiers.

Chaque dossier et chaque fichier porte un nom.

Repérer un fichier ou un dossier dans l'arborescence

Le chemin permet de repérer un fichier ou un dossier dans l'arborescence.

On distingue :

  • - les chemins absolus : ils partent toujours du dossier racine de la mémoire.
  • - les chemins relatifs : ils partent du fichier ou du dossier actif.

 

Le chemin se construit de proche en proche avec les règles suivantes :

  • - pour rentrer dans un dossier, on écrit le nom du dossier suivi d'un "/".
  • - pour sortir d'un dossier (remonter au niveau du dossier parent), on écrit "../"

 

Exemple de chemin absolu : "c:/perso/anniv/h.odt".

Exemple de chemin relatif depuis le fichier e.odt : "../perso/c.odt".

2) Application (pour bien comprendre)

On considère les deux extraits d'arborescence ci-dessous :

1.a) Écrire le chemin absolu qui permet d'aller jusqu'au fichier nommé "img1_A.png.

1.b) Écrire le chemin absolu qui permet d'aller jusqu'au fichier nommé "nsi.doc.

2.a) Écrire le chemin relatif qui permet d'aller du fichier "rub1.htm" jusqu'au fichier "index.htm".

2.b) Écrire le chemin relatif qui permet d'aller du fichier "rub1.htm" jusqu'au fichier "rub2.htm".

2.c) Écrire le chemin relatif qui permet d'aller du fichier "rub1.htm" jusqu'au fichier "index.htm".

3) Est-il possible d'aller du fichier "rub1.htm" jusqu'au fichier "nsi.doc" ?

3) Pour un site web

Lorsqu'on crée un site web, il est important de bien organiser les fichiers.

  • - Tous les fichiers du site doivent être regroupés dans un seul dossier.
  • - Lorsqu'il y a beaucoup de fichiers, il doivent être regroupés en sous-dossiers.

IV - Un petit site de quelques pages ?

Créer un petit site avec une page d'index et au moins deux rubriques.

Tous les fichiers du site seront placés dans un dossier nommé site de façon bien organisée (c'est-à-dire avec des sous-dossiers).

Le site devra contenir des liens pour naviguer entre les pages.

Chaque rubrique devra contenir au moins une image.