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>

HTML Baumstruktur

DOM (Document Object Model)

<html>

<body>

<head>

<title>

text

<p>

text

Ressourcen

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

Let's code!

Übung 1

title

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

Übung 2

headings

Aufgabe: Erstelle eine Seitenstruktur für einen Lebenslauf

Übung 3

paragraphs

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

Übung 4

listings

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

Übung 5

links

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

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.

Made with Slides.com