HTML Crashkurs

Diese Präsentation ist mit HTML+CSS+Javascript geschrieben!

Übersicht

HTML Hyper Text Markup Language
CSS Cascading Style Sheets
Javascript
Serverseitige Programmiersprachen

Checkliste

Text-Editor Verschiedene Browser (Safari, Firefox, Chrome...) evtl. Git evtl. Bitbucket-Zugang

Erste Seite

Öffne eine neue Datei in deinem Texteditor und gebe ein:

<!DOCTYPE html>
<html>
  <head>
    <title>Erste Seite</title>
  </head>

  <body>
    <h1>Hallo Welt!</h1>
  </body>
</html>

Speichere die Datei mit der Endung .html
Öffne die Datei mit einem Doppelklick

Ist die Seite jetzt im Internet?

Die Seite ist nicht automatisch im Internet. Browser können auch lokale Dateien öffnen

Erst wenn man die Datei auf einen Server kopiert ist sie übers Internet erreichbar

Was ist ein Tag?

Öffnende und schließende Tags <p></p>
leere Tags <br />
Doctype (kein echtes Tag) <!DOCTYPE html>

Tags verschachteln

Wie Klammern in der Mathematik: die inneren Tags müssen geschlossen werden bevor die äußeren Tags geschlossen werden

Hierarchie

Es gibt Kinder- und Elterntags

<p><i>kursiver Text</i>in einem Paragrafen</p>

Attribute

Jedes Tag hat einige erlaubte Attribute

<img src="katzenbild.png" />

img ist ein Tag ohne Inhalt!

head & body

head enthält Metadaten wie Titel, Zeichenkodierung, Stylesheets...

body enthält den Inhalt der Seite

Aufgabe

Lege eine neue HTML-Datei an. Kopiere das Grundgerüst von eben (oder noch besser: tippe es ab damit es im Gedächtnis bleibt) und versuche ein Bild anzuzeigen

Tipp:

<img src="katzenbild.png" />

Tags die man kennen sollte

title	Seitentitel, wird auf dem Browsertab und bei Google angezeigt
p	Paragraf
h1 - h6	Große bis kleine Überschriften (wichtig für Seitenstruktur, SEO)
b	fetter Text
i	kursiver Text
small	kleinerer Text

br	Zeilenende (Tag hat keinen Inhalt)
table	Tabelle (das hier)
tr	Zeile in einer Tabelle (table row)
th	Tabellenüberschrift (table heading)
td	Zelle in einer Tabellenzeile (table data)
ul	Unnummerierte Liste (unordered list)
ol	Nummerierte Liste (ordered list)
li	Punkt in einer Liste (list item)

img	Bilder
a	Link. Attribut href um das Link-Ziel anzugeben
div	unsichtbarer Container für andere Tags
span	wie div, nur innerhalb einer Zeile

CSS

In den head eines HTML-Dokuments schreibe:
```
<link rel="stylesheet" href="stil.css" />
```

Öffne eine neue Datei stil.css im gleichen Ordner:

html {
    background-color: black;
    color: white;
}
h1 {
    text-shadow: 0 0 10px yellow, 0 0 40px red;
    font-size: 70px;
}