HTML / CSS LEVEL 1

Teil 1

HTML / CSS

Struktur und Aussehen

HTML

Hyper Text Markup Language
Definiert Struktur und Inhalt der Web-Site

HTML4 vs. HTML5 vs. XHTML

Alle modernen Browser unterstützen HTML5 (IE9+, 2011)
Auf HTML5 sollte nur noch in Ausnahmefällen verzichtet werden
XHTML finden nur in älteren Umfeldern Einsatz (z.B. Java JSP o. Microsoft ASP.NET)

HTML Elemente

<div> </div>

Open Tag

Closing Tag

Beispiele

<p>Ich bin ein Paragraph</p>

<h1>Ich bin ein Seitentitel</h1>

<ul>
  <li>Erstes Listenelement</li>
  <li>Zweites Listenelement</li>
</ul>

Self-Closing Tags

<div>
  <hr>
  <img src="bild.jpg">
  <input type="text">
</div>

HTML Attribut

<a href="http://google.ch"></a>

Attribut
Name

Attribut
Wert

Beispiele

<a href="http://google.ch">Link zu Google</a>

<img src="pfad/zu/bild.jpg">

<a href="index.html" titel="Link zur Startseite">

HTML Dokument

<!DOCTYPE html>
<html>
  <head>
    <title>Meine erste Seite</title>
  </head>
  <body>
    <p>Meine erste Seite</p>
  </body>
</html>

http://jsbin.com/madexow/1/edit?html,output

HTML Baumstruktur

DOM (Document Object Model)

<html>

<body>

<head>

<title>

text

<p>

text

http://jsbin.com/madexow/1/edit?html,output

Ressourcen

https://developer.mozilla.org/de/docs/Web/HTML

http://wiki.selfhtml.org/wiki/HTML

http://www.w3schools.com/html
(nicht immer sehr genau aber gut als Einstieg)

Let's code!

Github: http://github.com

JSBIN: http://jsbin.com

Übung 1

title

http://jsbin.com/dofapa/1/edit?html,output

Aufgabe: Ändere den Titel der Seite und öffne das Vorschaufenster auf JSBIN um die Anpassungen am Titel zu sehen.

Übung 2

headings

http://jsbin.com/paleno/1/edit?html,output

Aufgabe: Erstelle eine Seitenstruktur für einen Lebenslauf

Übung 3

paragraphs

http://jsbin.com/ligojo/1/edit?html,output

Aufgabe: Füge einige Texte ein und gliedere diese mit den nötigen Überschriften.

Übung 4

listings

http://jsbin.com/nonubu/1/edit?html,output

Aufgabe: Erstelle eine TODO liste mit sortierten Tasks in denen du wiederum unsortierte Sub-Tasks erstellst.

Übung 5

links

http://jsbin.com/lofoye/2/edit?html,output

Aufgabe: Erstelle eine unsortierte liste mit links zu Seiten die du oft benutzt. Die Links sollen alle in einem neuen Fenster öffnen.

Übung 6

bilder

http://jsbin.com/goquqaf/1/edit?html,output

Aufgabe: Suche auf Google einige Tierbilder und erstelle eine Seite mit einem Übertitel (Tiere) und Untertiteln (z.B. Tiger). Füge Bilder zu den Tieren ein und vergiss den "alt" Text nicht. Schreibe in einem Paragraphen noch einen kleinen Satz zum jeweiligen Tier.