ZWISCHEN TAGS.

<Aufbau einer Webseite>

Minilektion von Valérie, 23. Oktober 2021

Ablauf

Begrüssung

Lernziele

Erfahrung und Interesse

Aufbau Webseite, Tags, HTML und CSS

Übung

Lernzielkontrolle

Lernziele

Erfahrung und Interesse

1   Habe schon Websites erstellt und weiss was dahinter steckt (oder möchte es wissen).
2   Habe schon Websites erstellt (z.B. mit Joomla) - Hauptsache es funktioniert.
3   Habe keine Erfahrung, würde mich aber wunder nehmen.
4   Habe noch nie darüber nachgedacht (Internet ist eh eine Modesache, die wieder vergeht).

Woher kommt die Website?

Was ist ein Tag?

<name>Text oder weitere Tags</name>

Aufbau HTML-Dokument

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Titel in der Browserleiste</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
...
</body>
</html>

Wichtige HTML-Tags

<h1>Überschrift</h1>
<p>Text</p>
<img src="bild.jpg" alt="beschreibung">
<a href="https://website.ch">Link</a>

<div>Behälter ohne Eigenschaften</div>

tags mit CSS gestalten

bezeichnung {
eigenschaft: wert;
}




h1 {
font-family: 'Rock Salt';
color: lightpink;
background: ivory;
font-size: 22px;
...
}

Beispiel

Zum selber Ausprobieren

Folge dem Link zur Seite von Codepen.io

Übungen

  1. Ändere den Text im zweiten Absatz
  2. Wechsle die Schriftfarbe der Überschrift auf green
  3. Wechsle die Schriftgrösse des Textes auf 20px
  4. Ergänze einen Untertitel

Weiterführende Links



Mini-Spickzettel (ausgeteilt)

Ausführlicher Spickzettel (wenn du mehr wissen willst)

W3schools (Tutorials, viele Beispiele, Möglichkeit zum Ausprobieren)

CSS-Eigenschaften (ausführlich erklärt mit Beispielen)

Empfehlenswerter Editor brackets (wenn du Lust hast, selber ein Projekt zu starten)

Danke für eure Aufmerksamkeit!

... und dass ihr so toll mitgemacht habt