Das Dokument behandelt die Grundlagen von HTML und CSS, erklärt deren Funktionen und wie sie zusammenarbeiten, um Webseiten zu strukturieren und zu gestalten. Es erläutert die Bedeutung von Browsern, die Herausforderungen für Webdesigner und die wesentlichen Elemente der HTML-Dokumentstruktur, einschließlich der Nutzung von Tags, Attributen und Links. Zusätzlich wird auf die Wichtigkeit der Website-Konzeption und eine grundlegende Einführung in die Erstellung eines HTML-Dokuments eingegangen.

1. HTML+CSS
GINO CREMER 2013
HTML+CSS www.
ginocremer .net

2. Was ist HTML?

3. HTML
...ist der Unterbau
HTML steht für Hypertext Markup Language und ist die “Auszeichnungssprache” für Websites.
HTML steckt hinter jeder Website und definiert deren “Aufbau” bzw. “Chassis” (Fahrgestell)
HTML definiert NICHT das Aussehen einer Website, sondern lediglich die Struktur.
HTML besteht aus so genannten “HTML-Tags” in eckigen Klammern z.B. <p>Text</p>
HTML+CSS www.
ginocremer .net

4. Und CSS?

5. CSS definiert das Aussehen einer Website
CSS bedeutet Cascading StyleSheets
CSS ist wie eine Formatvorlage/Stilvorlage
CSS erlaubt konsequente Trennung zwischen
Struktur und Layout
CSS
HTML+CSS
...ist der Lack!ginocremer www. .net

6. Web Basics
Etwas Technik...

7. Webdesigner
“Clients”
(die Rechner der Besucher)
Datenbank FTP
(bei komplexeren Websites)
HTTP
H TML
HTTP
Dateisystem HTTP
Ablageort der HTML-Dateien
Ruft ein Besucher eine Website auf, wird bei statischen Websites direkt das HTML-Dokument aus dem Dateisys-
tem (Festplatte des Servers) ausgeliefert (über HTTP). Bei komplexeren Websites wird die Anfrage erst an eine
Datenbank durchgereicht, die das HTML-Dokument “dynamisch” zusammenstellt und dem Besucher ausliefert.
Die Daten selber kann der Webdesigner z.B. über FTP in das Dateisystem überspielen.
HTML+CSS www.
ginocremer .net

8. Die populärsten Browser im Überblick
Neben diesen Browsern gibt es noch zahlreiche andere (Prozentwerte = Verteilung weltweit)
Google Mozilla Opera Softw. Apple Microsoft
Chrome Firefox Opera Safari Internet Explorer
18,04% 19.82% 1,71% 5,24% 54,77%
Chrome ist der populärste Browser in Asien, Europa und Südamerika.
Internet Explorer in Nordamerika, in Teilgebieten Chinas, sowie in Japan und Südkorea.
Firefox ist der beliebteste Browser in Deutschland und Afrika.
Opera in Weissrussland.
Safari spielt eine sehr wichtige Rolle auf mobilen Endgeräten (iPad, iPhone,...)
Quelle für alle Daten: Statcounter
HTML+CSS www.
ginocremer .net

9. Die Browser-Weltkarte
Quelle: http://en.wikipedia.org/wiki/File:Countries_by_most_used_web_browser.svg
Chrome Firefox
Internet Explorer Opera
HTML+CSS www.
ginocremer .net

10. Große Herausforderungen für Webdesigner
Nach dem Browserkrieg der 90er, stellt die ungeheure Gerätevielfalt Webdesigner täglich auf die
Probe:
• Viele unterschiedliche Geräte (Smartphones, Tablets, Notebooks, Desktops,...)
• Viele unterschiedliche Systeme (Windows, Mac, Linux, Android, iOS, Windows Phone,...)
• Viele unterschiedliche Bildschirm-Auflösungen (Retina)
• Man nutzt das Internet mobil und fix gleichermaßen (immer stärker mobil)
• Websites müssen entsprechend für mobile Endgeräte aufbereitet sein (Eile, kurze La-
dezeiten, schlechte Lichtverhältnisse,...)
HTML+CSS www.
ginocremer .net

11. Konzept!
Vor dem Start: Köpfchen!

12. Die 4 “W” der Website-Konzeption
• AS will man mit der Website erreichen? (Konkrete Zielsetzungen!)
W
• EN will man mit der Website erreichen? (Zielgruppe!)
W
• IE will man die Zielgruppe erreichen (Fotos, Video, Text, Offline, Online?)
W
• OMIT will man die Zielgruppe erreichen? (Website, Facebook, Newsletter)
W
Die Seitenstruktur (Beispiel)
Erstellung eines Baumdiagrammes mit den Inhalten (geordnet im Sinne der Nutzer!!)
Faustregel: 7 +- 2 (Maximal 9)
Startseite (Sprachauswahl)
Über Uns Produkte Kontakt
Team Kategorie A Anfahrt
Filialen Kategorie B Öffungszeiten
Geschichte Impressum
HTML+CSS www.
ginocremer .net

13. Das Layout skizzieren
Flotte Skizzierung der wichtigsten Inhaltsbereiche vor dem Start
Kopfleiste
Menüleiste
Inhalt
Fussleiste
HTML+CSS www.
ginocremer .net

14. Los geht’s!
Unser erstes HTML Dokument

15. Ein erstes einfaches HTML(5)-Dokument
Siehe Beispiel 1
<!DOCTYPE html>
<html lang=”de”>
<head>
<meta charset=”utf-8”>
Gut zu wissen
<title>Titel der Seite</title>
Eine HTML-Datei ist eine ganz normale Text-
<link rel=”stylesheet” href=”style.css”> Datei und kann mit jedem Text-Editor geöffnet
<script src=”script.js”></script> und geändert werden. Einzig die Dateiendung
„.html“ unterscheidet sie von einer Textdatei.
</head>
<body>
<!-- page content -->
</body>
</html>
HTML+CSS www.
ginocremer .net

16. Ein erstes einfaches HTML(5)-Dokument
Siehe Beispiel 1
Jedes HTML Dokument startet mit einem “Doctype”
Dieser ist dank des abwärtskompatiblen HTML5 sehr
<!DOCTYPE html>
einfach gestrickt. Der Doctype teilt dem Browser mit,
<html lang=”de”> dass es sich um ein HTML-Dokument handelt. Der Da-
teiname (Dateiendung) wäre nicht ausreichend.
<head>
<meta charset=”utf-8”>
<title>Titel der Seite</title>
<link rel=”stylesheet” href=”style.css”>
<script src=”script.js”></script>
</head> Gut zu wissen
<body>
Die wichtigste Datei trägt in einem Ordner im-
<!-- page content --> Hallo Welt mer den Namen „index.html“. Diese bildet
die Hauptseite und wird als erstes aufgerufen
</body> noch vor allen anderen.
</html>
HTML+CSS www.
ginocremer .net

17. Ein erstes einfaches HTML(5)-Dokument
Siehe Beispiel 1
<!DOCTYPE html>
Anschließend folgt ein HTML-Element. Da HTML per
<html lang=”de”>
se “sprachunabhängig” ist, sollte eine Sprache defi-
<head> niert werden. In diesem HTML-Element (html) stoßen
<meta charset=”utf-8”> wir das erste mal auf ein so genanntes “Attribut”
(lang) mit einem “Wert” (de).
<title>Titel der Seite</title> Das „html“-Element besteht aus einem „Start-Tag“
<link rel=”stylesheet” href=”style.css”> und einem „End-Tag“.
<script src=”script.js”></script>
</head>
<body>
<!-- page content --> Hallo Welt
</body> Gut zu wissen
</html> „Tag“ ist Englisch und bedeutet „Markierung“
HTML+CSS www.
ginocremer .net

18. Ein erstes einfaches HTML(5)-Dokument
Siehe Beispiel 1
<!DOCTYPE html> Das „head“-Element besteht auch aus einem „Start-
Tag“ (öffnet den Kopf) und einem „End-Tag“
<html lang=”de”>
(schließt den Kopf). Hier werden Informationen in
<head> den „Header“ des Dokuments eingetragen. Dieser
Bereich wird nicht dem Besucher angezeigt.
<meta charset=”utf-8”>
<title>Titel der Seite</title>
<link rel=”stylesheet” href=”style.css”>
<script src=”script.js”></script>
</head>
<body>
<!-- page content --> Hallo Welt
</body>
</html>
HTML+CSS www.
ginocremer .net

19. Ein erstes einfaches HTML(5)-Dokument
Siehe Beispiel 1
<!DOCTYPE html> Ein „Meta-Tag“ bietet weiterreichende Informationen.
In unserem Fall definieren wir UTF-8 als Standard-Ko-
<html lang=”de”>
dierung (Charset-Attribut) der Website (gilt als Stan-
<head> dard im Internet). Mit dem „Description-Attribut“ lässt
sich für jede einzelne Seite eine Beschreibung defi-
<meta charset=”utf-8”>
nieren. Es gibt aber auch andere:
<title>Titel der Seite</title> <meta name=“description“ content=“Beschreibung“>
<meta name=“keywords“ content=“Wort,Begriff,...“>
<link rel=”stylesheet” href=”style.css”> <meta name=“author“ content=“Name Autor“>
<meta name=“generator“ content=“Dreamweaver“>
<script src=”script.js”></script>
<meta name=“robots“ content=“index,follow“>
</head> ...
<body>
<!-- page content --> Hallo Welt
</body>
</html>
HTML+CSS www.
ginocremer .net

20. Ein erstes einfaches HTML(5)-Dokument
Siehe Beispiel 1
<!DOCTYPE html> Ein „Title-Element“ definiert den Seitentitel einer Ein-
zelseite. Er ist von großer Bedeutung, sowohl für
<html lang=”de”>
Suchmaschinen als auch für den Besucher. Der Titel
<head> sollte passend für jede Unterseite definiert werden.
Auch der „Title“ hat ein „Start-Tag“ und ein „End-Tag“.
<meta charset=”utf-8”>
<title>Titel der Seite</title>
<link rel=”stylesheet” href=”style.css”>
<script src=”script.js”></script>
</head>
Gut zu wissen
<body>
<!-- page content --> Hallo Welt N.B. Da sich das „Title-Element“ innerhalb des
„Head“ befindet, kann man es auch als „Kind-Ele-
</body> ment“ des „Eltern-Elementes“ Head bezeichnen.
</html>
HTML+CSS www.
ginocremer .net

21. Ein erstes einfaches HTML(5)-Dokument
Siehe Beispiel 1
<!DOCTYPE html>
<html lang=”de”> Mittels eines „Link-Elementes“ können
z.B. externe CSS-Dateien eingebunden
<head>
werden. Was CSS genau ist und wie
<meta charset=”utf-8”> man es nutzt, erfahren wir später.
<title>Titel der Seite</title>
<link rel=”stylesheet” href=”style.css”>
<script src=”script.js”></script>
</head>
<body>
<!-- page content --> Hallo Welt
</body>
</html>
HTML+CSS www.
ginocremer .net

22. Ein erstes einfaches HTML(5)-Dokument
Siehe Beispiel 1
Mittels eines „Script-Elementes“ können
<!DOCTYPE html> z.B. Javascript-Dateien eingebunden wer-
<html lang=”de”> den. Diese reichern die Website um er-
weiterte Funktionalitäten an. Javascript
<head>
wird direkt im Browser des Besuchers
<meta charset=”utf-8”> ausgeführt. Die Anwendungsgebiete sind
vielfältig. Oftmals stößt man in diesem Zu-
<title>Titel der Seite</title>
sammenhang heutzutage auf JQUERY
<link rel=”stylesheet” href=”style.css”>
<script src=”script.js”></script>
</head>
<body>
<!-- page content --> Hallo Welt
</body>
</html>
HTML+CSS www.
ginocremer .net

23. Ein erstes einfaches HTML(5)-Dokument
Siehe Beispiel 1
<!DOCTYPE html>
<html lang=”de”>
<head>
<meta charset=”utf-8”>
<title>Titel der Seite</title>
<link rel=”stylesheet” href=”style.css”> Im so genannten „Body-Bereich“ befindet
<script src=”script.js”></script> sich alles, was direkt an den Browser/
Besucher ausgegeben wird. Es ist der
</head> sichtbare Bereich (Körper). Hier wird der
<body> Seitenaufbau betrieben, die Texte und Fo-
tos integriert und alle Links aufgeführt. Mit
<!-- page content --> Hallo Welt
diesem Bereich beschäftigen wir uns am
</body> meisten.
</html>
HTML+CSS www.
ginocremer .net

24. Ein erstes einfaches HTML(5)-Dokument
Siehe Beispiel 1
<!DOCTYPE html>
<html lang=”de”>
Interessant: Mittels so genannter „HTML-
<head> Kommentare“ lassen sich Informationen
<meta charset=”utf-8”> im Quellcode platzieren, die nicht direkt
auf der Seite ausgegeben werden. Inte-
<title>Titel der Seite</title> ressant für den Entwickler, um Bereiche
<link rel=”stylesheet” href=”style.css”> im Code auszuzeichnen. Nicht geeignet
für sensible Daten. Mit Einsicht des Quell-
<script src=”script.js”></script>
codes ist ja doch alles lesbar und sicht-
</head> bar. Mit <!-- startet man einen Kommen-
<body> tar. Man beendet ihn mit -->
<!-- Ein HTML-Kommentar --> Hallo Welt
</body>
</html>
HTML+CSS www.
ginocremer .net

25. Ein erstes einfaches HTML(5)-Dokument
Siehe Beispiel 1
<!DOCTYPE html>
<html lang=”de”>
<head>
<meta charset=”utf-8”>
<title>Titel der Seite</title>
<link rel=”stylesheet” href=”style.css”>
<script src=”script.js”></script>
Nur „Hallo Welt“ wird dem Besucher ausgeben.
</head>
<body>
<!-- Ein HTML-Kommentar --> Hallo Welt
</body>
</html>
HTML+CSS www.
ginocremer .net

26. Weitere
HTML-Tags
im Body-Bereich
(TN: Pick-A-Tag / 3 Minuten - Recherche)

27. Titel im Body-Bereich definieren (Headings)
Siehe Beispiel 2
H1-H6
Titel werden als “Headings” bezeichnet und von 1 bis 6 absteigend (Wichtigkeit) defi-
niert. Rein von der “Semantik” ist es wichtig die Reihenfolge einzuhalten von 1 bis 6.
Niemals ein Element nur aufgrund der optischen Werte auswählen. Dazu gibt es CSS!
<body>
<h1>Übertitel (am Wichtigsten)</h1>
<h2>Untertitel</h2>
<h3>Untertitel</h3>
<h4>Untertitel</h4>
<h5>Untertitel</h5>
<h6>Untertitel (am Unwichtigsten)</h6>
</body>
HTML+CSS www.
ginocremer .net

28. Geordnete und ungeordnete Listen
Siehe Beispiel 2
UL / OL
UL = Unordered List (mit Aufzählungszeichen und ungeordnet)
OL = Ordered List (Nummeriert und geordnet)
UL- und OL-Elemente sind immer umschließende Elemente, die “Listenelemente” beinhal-
ten. Diese „Listenelemente“ werden mit <li> (List Item) </li> umschlossen.
<body> <body>
<ul> <ol>
<li>Listenpunkt etwas</li> <li>Listenpunkt Eins</li>
<li>Listenpunkt anderes</li> <li>Listenpunkt Zwei</li>
</ul> </ol>
</body> </body>
• Listenpunkt etwas 1. Listenpunkt Eins
• Listenpunkt anderes 2. Listenpunkt Zwei
HTML+CSS www.
ginocremer .net

29. Links und Querverweise
Siehe Beispiel 2
A (Wie Anchor, Anker)
Links sind das Salz in der HTML-Suppe. Doch alleine steht ein <a>-Tag nie. Es bedarf der
notwendigen Attribute, um dem Link Leben einzuhauchen!
href (Definiert das Link-Ziel)
• „Absolute“ Links führen oftmals zu externen Websites:
<a href=“http://www.google.com“> Link zur Google Website </a>
• „Relative“ Links funktionieren nur intern (relativ zum Ablageort der HTML-Datei):
<a href=“kontakt.html“> Kontaktieren Sie uns </a>
„Mailto“ Links öffnen bei Klick direkt das Mailprogramm des Besuchers um eine E-Mail zu senden:
• <a href=“mailto:mail@mail.com“> Schreiben Sie uns </a>
title (Beschreibt den Link)
<a href=“http://www.google.com“ title=“Linkbeschreibung“> Link zur Google Website </a>
target (Erlaubt u.a. das Öffnen in neuem Fenster)
<a href=“http://www.google.com“ target=“_blank“> In neuem Fenster öffnen (Google) </a>
HTML+CSS www.
ginocremer .net

30. Arbeiten mit relativen Links
Siehe Beispiel 2
Relative Links haben gegenüber absoluten Links den Vorteil der Unabhängigkeit gegen-
über „festgelegten“ Webadressen (absolute Verlinkungen).
Relativ verknüpfte HTML-Seiten funktionieren immer untereinander (insofern nicht die Hi-
erarchie) ändert, auch wenn der Ablageort ändert (oder keine Verbindung zum Internet
besteht).
3 Möglichkeiten für einen korrekten relativen Link-Pfad
1. Liegt das Ziel im gleichen Verzeichnis wie das HTML-Dokument:
<a href=“zieldatei.html“>Ziel</a>
2. Liegt das Ziel in einem Unterverzeichnis:
<a href=“verzeichnis/zieldatei.html“>Ziel</a>
3. Liegt das Ziel in einem Verzeichnis oberhalb des Verzeichnisses des HTML-Dokuments:
<a href=“../zieldatei.html“>Ziel</a>
N.B. Liegt die Zieldatei noch ein Verzeichnis drüber, lässt sich das beliebig wiederho-
len: ../../zieldatei.html
HTML+CSS www.
ginocremer .net

31. Paragraphen und Zeilenumbrüche
Siehe Beispiel 2
P
Text kann und sollte in Paragraphen unterteilt sein. Der entsprechende
Text muss mit einem <p>-Element umschlossen sein:
<p> Paragraph 1 </p>
<p> Paragraph 2 </p>
BR
Mittels eines „Breaks“ generiert man einen erzwungenen Zeilenumbruch.
Dieser Text <br>
bricht um!
HTML+CSS www.
ginocremer .net

32. Grafiken und Fotos
Siehe Beispiel 2
IMG
Auch das <img>-Tag ist ohne die richtigen Attribute nutzlos. Wir benö-
tigen sowohl die Quelle des Bildes („src“) als auch einen aufschlussrei-
chen Alternativtext („alt“), welcher angezeigt wird, wenn das Bild nicht
geladen werden kann. Zudem ist dieser Text wichtig damit Suchma-
schinen und „Screenreadern“ (für Blinde) das Bild umschrieben werden
kann (können nur den Quelltext lesen).
<img src=“bild.jpg“ alt=“Unsere freundlichen Mitarbeiter“>
Gut zu wissen
Bilder können sowohl relativ als auch absolut ein-
gebunden sein. So ist es möglich über src=“http://
www.link.com/bild.jpg“ ein externes Foto einzu-
binden (technisch machbar, rechtlich oft bedenklich)
HTML+CSS www.
ginocremer .net

33. Den Inhaltsbereich “einteilen” (DIV)
Siehe Beispiel 3
DIV
Um eine Website zu strukturieren, können DIV-Elemente genutzt werden.
Diese „Container“ können dann im CSS angesteuert und formatiert wer-
den.
<div>
Kopfleiste
</div>
<div>
Menüleiste Gut zu wissen
</div>
Zu Beginn einer jeden Website-Konzeption sollte
<div> man mit Stift und Papier die groben Bereiche skiz-
Hauptinhalt zieren. So erhält man einen guten Überblick, wie
</div> die DIV-Container aufgebaut werden könnten.
<div>
Fußleiste
</div>
HTML+CSS www.
ginocremer .net

34. DIV ist DIV. Und wie machen wir den Unterschied?
Siehe Beispiel 3
ID
Jedem DIV-Element kann eine so genannte „ID“ vergeben wer-
den. Diese darf pro Seite nur EINMAL verteilt werden und ist somit
einzigartig. Mit einer ID kann ein DIV gezielt im CSS angesteuert
werden.
Beispiel: <div id=“kopfleiste“>Kopfleiste</div>
CLASS
Jedem DIV kann auch eine Klasse „CLASS“ zugewiesen werden.
Diese können mehrfach genutzt werden und sollten einer einmali-
gen ID vorgezogen werden. So kann man mit einer einzigen CSS-
Anweisung alle Elemente gleichzeitig steuern, die im HTML die
gleiche Klasse zugewiesen bekommen haben. Praktisch!
Beispiel: <div class=“info“>Infobereich</div>
HTML+CSS www.
ginocremer .net

35. Jetzt wird’s
hübscher!
CSS haucht der Seite Leben ein
Demo: CSS Zen Garden

36. Die bereits eingebundene CSS Datei erstellen
Siehe Beispiel 3
Wie man im HTML erkennen kann, wurde die CSS Datei zwar im
HTML-Code vorgesehen.
<link rel=”stylesheet” href=”style.css”>
Nun müssen wir diese erstellen. Wir erstellen eine einfache neue Datei
auf gleicher Ebene wie die HTML-Datei und nennen sie nicht “style.html”
sondern “style.css”. Fertig.
Gut zu wissen
Der Einfachheit halber legen wir hier Bilder, CSS
und HTML in den gleichen Ordner ab. Besser wäre
es aber getrennte Ordner zu erstellen (Ordnung).
index.html
L CSS/style.css
L IMG/foto.jpg
HTML+CSS www.
ginocremer .net

37. Generelle Schreibweise von CSS
Siehe Datei “style.css”
div { background-color: red; }
Selektor { Eigenschaft : Wert ; }
Wie spreche ich im CSS welche Elemente an?
Eine ID: #kopfleiste { ... }
Eine KLASSE: .info { ... }
Einen HTML-TAG alleine: div { ... }
HTML+CSS www.
ginocremer .net

38. Die geläufigsten CSS-Eigenschaften
ACTION: Teilnehmer suchen Erklärung raus (jeder 2). Anschließend wird jede Eigen-
schaft visuell veranschaulicht.
Schrift
font-family, font-size, color, font-weight, font-style
Textgestaltung
text-align, line-height, text-decoration, letter-spacing, text-transform
Bilder
background-image, background-repeat
Rahmen
border, border-radius
Abstände
padding, margin
Abmessungen
width, height
Positionierung
float, position
HTML+CSS www.
ginocremer .net

39. Außen- und Innenabstände begreifen
Das BOX-MODELL
MARGIN
BORDER MARGIN
PADDING Beschreibt den Außenabstand
(Rand) rund um das gesamte
Andere Elemente
Andere Elemente
Element
Inhalt (z.B. Text) BORDER
Beschreibt den Rahmen
PADDING
Andere Elemente Beschreibt den Innenabstand
HTML+CSS www.
ginocremer .net