tite fractale

Introduction Web

1. Environnement de travail

1.1. Dossiers, fichiers et extensions

1.1.1. Organisation des fichiers

Les fichiers (files en anglais) sont organisés dans des dossiers (folders en anglais), aussi appelés répertoires (directories), ce qui leur donne une structure arborescente (sauf que l’arbre est à l’envers, la racine (root) étant en haut).

Voici ce que peut afficher un explorateur de fichiers (file explorer) :

arborescence

1.1.1.1. Exercices

  1. À quoi servent les petits triangles sur l’image précédente ?
  2. Faire apparaître une arborescence de fichiers à l’écran.
  3. En faire une copie d’écran et la sauvegarder sous le nom arbo.png.

1.1.2. Extensions de fichiers

L’extension d’un fichier est la partie qui suit le dernier point dans le nom du fichier. Son but est d’indiquer au système d’exploitation (operating system ou OS) de l’ordinateur (computer) avec quel programme ou application nous voulons ouvrir ce fichier.

1.1.2.1. Exercices

  1. Si elle n’apparaît pas à l’écran, faire apparaître l’extension des fichiers.
  2. Chercher sur l’ordinateur des fichiers contenant des images, des sons ou des vidéos.
  3. Avec le menu Nouveau, créer plusieurs fichiers vides (fichier texte, document pour traitement de texte, document de type tableur, tout ce que vous pourrez…).
  4. Noter l’adresse (parfois appelé emplacement) et la taille de chacun de ces fichiers (les fichiers trouvés sur l’ordinateur et les fichiers créés) sur votre cahier.
  5. Changer l’extension de chaque fichier en .txt et observer le contenu de ces fichiers en les ouvrant. Notez vos remarques sur votre cahier.
  6. Sans changer l’extension d’un fichier, peut-on l’ouvrir avec le programme que l’on veut ?

2. Travail sur les fichiers HTML

2.1. À l’origine

HTML est l’acronyme de Hyper Text Markup Language, voir l’article Wikipedia, ce qui signifie : langage de balisage pour texte augmenté.

2.2. Outils de base pour le web

Pour travailler, il suffit d’avoir :

 


    +-----------+   +------------+
    |  éditeur  |   | navigateur |
    +----+------+   +---+--------+
         |              |
         |  +-----------+
         |  |
         |  |
     +---+--+------+
     | cv_nom.html |
     +-------------+

Nous allons même mettre en place la configuration suivante :


    +------------+   +-----------+   +-----------+   +--------+   +----+
    | Bloc-Notes |   | Notepad++ |   |  Firefox  |   | Chrome |   | IE |
    +----+-------+   +-----+-----+   +-----+-----+   +----+---+   +-+--+
         ?                 |               |              |         |
         |  +-------?------+               |              |         |
         |  |  +-------------------?-------+              |         |
         |  |  |  +--------------------------------?------+         |
         |  |  |  |  +-----------------------------------------?----+
         |  |  |  |  |
     +---+--+--+--+--+-+
     |   cv_nom.html   |
     +-----------------+

2.2.1. Exercices

  1. Recopier le schéma ci-dessus sur le cahier en remplaçant les ? par :
    1. r pour lecture (read) ;
    2. w pour écriture (write) ;
    3. rw pour lecture et écriture.
  2. Mettre en place cette configuration sur votre ordinateur :
    1. créer un fichier texte vide ;
    2. le renommer en cv_nom.html où « nom » est votre nom de famille ;
    3. l’ouvrir avec les cinq logiciels en même temps ;
    4. taper « bonjour » dans Bloc-Notes, sauvegarder le fichier et rafraîchir la page dans l’un des navigateurs pour voir apparaître « bonjour ».
  3. Il est bien pratique de disposer l’éditeur sur la partie gauche de l’écran et un (ou plusieurs) navigateurs sur la partie droite de l’écran. Essayez pour voir.
  4. Chercher les noms d’autres éditeurs de code et d’autres navigateurs. Les reporter sur le cahier.

2.3. Premières balises

Pour délimiter certains mots, groupes de mots, phrases ou paragraphes, on utilise des balises html (html tags). La forme générale est :

<balise>contenu</balise>

ou <balise> est parfois appelé la balise ouvrante et </balise> la balise fermante.

Exemples :

<h1>Mon titre</h1>
<p>Voici une liste :</p>
<ul>
  <li>premièrement ;</li>
  <li>et c’est tout.</li>
</ul>

2.3.1. Exercices

  1. Commencer un petit CV (nom, prénom, classe, matière préférée, pourquoi j’ai choisi ICN ou ISN…). Si l’affichage est bizarre, passer à la question suivante.
  2. Utiliser les balises suivantes (et seulement celles-ci) :
    h1, h2, h3, p, strong, img, ul, ol, li, a, pre.
  3. Utiliser Examiner l’élément (avec un clic-droit sur la page) sur les différents éléments de votre page.
  4. Utiliser Examiner l’élément sur les différents éléments d’une page sur l’Internet. Utiliser aussi Afficher le code source.

3. Hébergement

3.1. Client FTP

3.2. Connexion

En haut à gauche, on trouve des champs pour une connexion rapide (sans entrer dans les menus).

3.3. Téléchargement montant

La partie gauche représente l’arborescence locale (votre ordinateur), et la partie droite représente l’arborescence distante (le serveur, quelque part).

Sur le serveur, il faut: 1. explorer le dossier www, 1. supprimer le fichier index.html, 1. mettre vos fichiers .html dans le dossier www.

3.4. Adresse des fichiers sur l’Internet

Le dossier www est exposé à l’adresse icnXX.alwaysdata.net ou isnXX.alwaysdata.net.

Si vous voyez une liste de fichiers et non une belle page d’accueil, c’est qu’il vous faut une page nommée index.html (en minuscules).




Christophe Gragnic, le 04/10/2016, 18h36'12".






Page générée le 04/12/2016, 10h08'07" (source).
historique de la page
historique global

 TogetherJS