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.

HTML / CSS I - Teil 1

By Gion Kunz

Made with Slides.com

HTML / CSS I - Teil 1

  • 2,607

More from Gion Kunz