Aufgabe 1:

Erste Webpage:

  1. Oeffnen Sie Visual Studio Code:
  2. Schreiben Sie:

    <!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. "hello.html" oeffnen.

Aufgabe 2:

Zweite Webpage: Images and body

  1. Suchen Sie zwei Bilder.
  2. Nennen Sie diese zwei Bilder Image1.jpg und Image2.jpg
  3. Schreiben Sie:

    <!DOCTYPE html>
    <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"
Beachten Sie: images.html und die zwei Bilder am selber Ort speichern!
Beachten Sie: HTML-Code unterscheidet Klein- und Grossbuchstaben!

Aufgabe 3:

Links

  1. Oeffnen Sie den File "hello.html"
  2. Fuegen Sie folgende Befehle hinenien

    <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. Speichern!
Beachten Sie: hello.html,images.html und die zwei Bilder am selber Ort speichern!

Aufgabe 4:

Menu.html

Erstellen Sie ein "menu.html"

Musterlösung Aufgaben 1-4:

Hier eine mögliche Lösung:
  1. hello.html
  2. images.html
  3. menu.html

Aufgabe 5:

Source Code

Analysieren Sie den Source Code des Websites
  1. Gehen Sie auf Home
  2. Press CTRL + U
Anderseits können Sie
  1. Gehen Sie auf Home
  2. Press F12