1 of 18

Webprojekt

Lektion 02: HTML - Inhalte strukturieren

2 of 18

Agenda

  • Hausaufgabe Lektion 01
  • VS Code
  • Weekly 🔥 tips
  • HTML - Hypertext Markup Language
  • Live Coding
  • Hausaufgabe

3 of 18

Hausaufgabe Lektion 01

Feedback

4 of 18

VS Code

Vorstellung und Einrichtung

5 of 18

Weekly 🔥 tips

6 of 18

Weekly 🔥 tips

Strg + r oder F5

Strg + s

Alt + Tab

Neuladen einer Website

Speichern einer Datei

Zwei aktive Fenster wechseln

7 of 18

Theorie

8 of 18

Das

bunte - Adjektive - CSS

Einhorn - Nomen - HTML

tanzt - Verben - JS

https://giphy.com/gifs/dance-crazy-rainbow-ZJlesIV8TnabS

9 of 18

HTML

Hypertext Markup Language

10 of 18

Hypertext Markup Language

Hypertext

Markup Language

Text, der über HTTP verschickt wurde

Auszeichnungssprache

Sprache, um Inhalte zu strukturieren

“Auszeichnungssprache für Inhalte, die über HTTP(S) verschickt wurden” → HTML

11 of 18

Auszeichnung mit HTML

Standardsatz an HTML-Elementen

Browser kennt deren Bedeutung

HTML-Elemente bestehen aus Tags

12 of 18

<p>Ich bin ein Absatz</p>

Öffnendes Tag Schließendes Tag

13 of 18

Umfrage

14 of 18

Live Coding

Genug Theorie

15 of 18

HTML-Skelett

HTML-Dokument benötigt “Skelett”

Kopf <head> und Körper <body>

Head beinhaltet Zusatzinformationen

Body beinhaltet sichtbare Inhalte

<!DOCTYPE html>

<html lang="de">

<head>

<title>Mein Dokument</title>

</head>

<body>

<h1>Hallo Welt</h1>

<p>Hier steht ein Absatz</p>

</body>

</html>

16 of 18

HTML steuert nicht die Darstellung

Der Browser enthält Basis-Set an CSS, das die heute gesehene Darstellung erzeugt

17 of 18

Hausaufgabe

18 of 18

Fragen?