2: Premiers pas en HTML

Commençons par un exemple simple.

1. Création d'un fichier html

Dans votre répertoire "public_html" créez un repertoire appelé "tp1".

⚠🖧 Sur les machines virtuelles, il faut créer le répertoire public_html vous-même. Vous pouvez créer le répertoire par l'interface graphique, ou dans un terminal taper simplement la ligne de commande suivante : cd ; mkdir public_html; mkdir tp1; cd public_html/tp1

Dans "tp1" créez un fichier "essai.html" avec le contenu suivant:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Premiers pas</title>    
  </head>
  <body>
    <h1>Bonjour!</h1>
    <p>
      Ma première page en html.<br/>
      <img src="https://moodlelms.univ-paris13.fr/pluginfile.php/338276/mod_lesson/page_contents/1054/computer-head-bang.gif" alt="informatique"/>
    </p>
  </body>
</html>

Vous utiliserez un éditeur texte de votre choix, qui ne peut donc pas être Microsoft Word. Voici quelques noms d'éditeurs texte :

  • Linux
    • Gedit (installé par défaut à l'IUT et dans Mariotel)
    • nano (dans le terminal)
    • Sublime Text
  • Windows
    • Notepad (Bloc-notes en français)
    • Notepad++
  • MacOS
    • Emacs ou Aquamacs
    • Dreamweaver
    • Textedit
  • Multi-systèmes
    • Atom
    • Emacs (ou Aquamacs pour MacOS)
    • Vim (dans le terminal)
    • Visual Studio Code
Si la question de l'encodage du texte se pose, choisissez UTF-8 (c'est précisé dans le document comme tel, dans les premières lignes).

2. Visualisation dans le navigateur

Maintenant, tapez l'adresse suivante dans votre navigateur, en remplaçant "12345" par votre numéro d'utilisateur: file:///home/student/905/12345/public_html/tp1/essai.html

⚠🖧 Si vous êtes chez vous, utilisez votre interface graphique pour ouvrir le fichier avec le navigateur. Si vous êtes sur les machines virtuelles MarioTel, utilisez file:///home/student/public_html/tp1/essai.html ou file:///home/student/tp1/essai.html

3. En cas de problème:

Si vous avez un message « Permission non accordée », tapez les commandes suivantes dans votre terminal:

chmod o+x ~
chmod o+rx ~/public_html

N'hésitez pas à demander de l'aide à votre enseignant.

L'image est stockée sur notre serveur : Personne se cognant la tête contre un ordinateur