Exercice 1:

Première page Web:

  1. Ouvrez un Visual Studio Code.
  2. Ecrivez:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of page</title>
    </head>
    <body>
    Hello World.
    <br> This is my first homepage.
    <hr>
    <b>This text is bold</b>
    List
    <ul>
    <li> Coffee </li>
    <li> Tea </li>
    <li> Milk </li>
    </ul>
    </body>
    </html>

  3. Save as: "hello.html"
  4. Ouvrir "hello.html".

Exercice 2:

Deuxième page web: Images and body

  1. Cherchez deux images.
  2. Appelez ces deux images Image1.jpg und Image2.jpg
  3. Ecrivez:

    <html>
    <head>
    <title>Title of page</title>
    </head>
    <body background="Image1.jpg">
    This is a nice image.
    <img src="Image2.jpg" width=100%>
    This is the same image, but with smaller size.
    <img src="Image2.jpg" width=50%>
    </body>
    </html>

  4. Save as: "images.html"
Attention images.html et enregistrez les deux images au meme endroit!
Attention: Le code HTML distingue les lettres majuscules et minuscules!

Exercice 3:

Links

  1. Ouvrez le fichier "hello.html"
  2. Introduissez dans la section "body" les commandes suivantes

    <br>
    <a href="images.html">Images</a>
    <br>
    <a href=http://www.hafl.ch target=blank>HAFL</a>
    <hr>
    <a href=mailto:my.name@bfh.ch>E-mail</a>

  3. Enregistrez!
Attention: hello.html,images.html et les deux images doivent être dans le même dossier!

Exercice 4:

Menu.html

Créez le fichier "menu.html" pour relier les différents fichiers

Solutions exercices 1-4:

Ici une possible solution:
  1. hello.html
  2. images.html
  3. menu.html

Exercice 5:

Source Code

Analysez le code-source des sites
  1. Allez sur Home
  2. Press CTRL + U
Vous pouvez aussi
  1. Allez sur Home
  2. Press F12