HTML - kstbb
Werbung
HTML
Seite 1 / 22
1 HTML-Grundlagen
Das World Wide Web (WWW) besteht aus einer gewaltigen Menge von Dokumenten, die
durch Querverweise (Hyperlink bzw. Link) miteinander verknüpft sind. Stößt ein Leser in
einem Dokument auf einen Link, kann er wie in einem Buch einfach weiter lesen oder bei
Interesse dem Link zu einem weiteren Dokument folgen, das weitergehende Informationen
bereitstellt.
Damit Computerprogramme verstehen, wie sie den Inhalt eines Dokuments, wie zum Beispiel Texte, Bilder oder Tabellen, darstellen sollen, muss der Inhalt vom Autor nach einem
bestimmten Regelwerk formatiert werden. HTML5 (Hypertext Markup Language) ist eine
solche Auszeichnungssprache.
1.1 Grundstruktur eines HTML-Dokuments
Ein HTML-Dokument ist eine gewöhnliche Textdatei, deren Aufbau sich in drei Bereiche
gliedert:
1) Dokumenttyp-Deklaration:
Angabe der verwendeten HTML-Version (Dokumenttyp-Deklaration)
2) Header (Dokumentkopf):
Informationen für Browser bzw. Suchmaschinen,
zum Beispiel: verwendeter Zeichensatz oder Titel des Dokuments
3) Body (Dokumentkörper):
Inhalt der Webseite
1.2 Dokumenttyp-Deklaration
Eine Dokumenttyp-Deklaration (DTD) gibt bekannt, nach welchem Regelwerk sich der
strukturelle Aufbau eines Dokuments richtet. Auf diese Weise können Computerprogramme verstehen, wie der Inhalt eines Dokuments dargestellt werden soll.
Für Dokumente, die auf HTML5 oder neueren HTML-Versionen basieren, wird der Dokumenttyp wie folgt bekannt gegeben:
HTML
<!DOCTYPE html>
1.3 HTML-Elemente
Die meisten HTML-Elemente werden durch ein Tag-Paar markiert, das heißt durch einen
Starttag und einen dazugehörigen Schlusstag.
Jeder Starttag beginnt mit dem Kleiner-als-Zeichen (<). Anschließend folgt die eigentliche
Bezeichnung des Tags sowie optional eine Liste seiner Attribute. Der Tag endet mit dem
Größer-als-Zeichen (>)
HTML
Seite 2 / 22
Der Schlusstag entspricht prinzipiell dem Starttag, jedoch wird nach dem Kleiner-alsZeichen ein Schrägstrich eingefügt (</). Außerdem kann ein Schlusstag keine Attribute
beinhalten.
HTML-Element
Starttag
Inhalt
Schlusstag
<Tagname>Inhalt</Tagname>
1.4 Grundstruktur eines HTML-Dokuments
Nach der Dokumenttyp-Deklaration folgt das html-Element. Dieses enthält den Dokumentkopf (head-Element) und Dokumentkörper (body-Element).
HTML
<!DOCTYPE html>
<!-- Dokumenttyp-Deklaration -->
<html>
<head>
<!-- Informationen für Browser bzw. Suchmaschinen -->
</head>
<body>
<!-- Inhalt der Webseite -->
</body>
</html>
Kommentare (<!-- Kommentar -->) werden vom Browser ignoriert und dienen der Erläuterung des HTML-Quellcodes.
1.5 Zeichensatz
Beim Speichern einer html-Datei wird jedes Zeichen (Buchstabe, Ziffer, Sonderzeichen, …) zunächst mit Hilfe einer Übersetzungstabelle (Zeichensatz) in einen Zahlencode
übersetzt. Dieser wird anschließend in eine Kombination aus Nullen und Einsen übersetzt
und gespeichert.
Beim Lesen der html-Datei kehrt der Browser diese Vorgehensweise um.
Da es verschiedene Zeichensätze gibt, ist es sinnvoll dem Browser mitzuteilen, welchen
Zeichensatz das HTML-Dokument verwendet. Andernfalls versucht der Browser dies
selbst zu erkennen, was zu Problemen führen kann.
Wir verwenden den Zeichensatz utf-8, der uns auch die unmittelbare Verwendung von
Umlauten erlaubt. Zeichen, die nicht auf der Tastatur vorhanden sind, können mit Hilfe des
Kürzels &# gefolgt von der im Unicode-Zeichensatz zugeordneten Nummer eingefügt werden. Zum Beispiel zeigt der Code &#8595 einen Pfeil nach rechts (→).
HTML
Seite 3 / 22
Beim Erstellen einer HTML-Datei muss dazu in dem jeweils verwendeten Texteditor utf8
als Kodierung ausgewählt werden (notepad++: Menü Kodierung Menüpunkt UTF-8).
Unicode-Zeichensatz
Nr.
0
9
10
13
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
Zeichen
NUL
(Tabulator)
(Zeilenumbruch)
(Return)
(Leerzeichen)
!
"
#
$
%
&
'
(
)
*
+
,
.
/
0
1
2
Nr. Zeichen
51
3
52
4
53
5
54
6
55
7
56
8
57
9
58
:
59
;
60
<
61
=
62
>
63
?
64
@
65
A
66
B
67
C
68
D
69
E
70
F
71
G
72
H
73
I
Nr. Zeichen
74
J
75
K
76
L
77
M
78
N
79
O
80
P
81
Q
82
R
83
S
84
T
85
U
86
V
87
W
88
X
89
Y
90
Z
91
[
92
\
93
]
94
^
95
_
96
`
Nr. Zeichen
97
a
98
b
99
c
100
d
101
e
102
f
103
g
104
h
105
i
106
j
107
k
108
l
109
m
110
n
111
o
112
p
113
q
114
r
115
s
116
t
117
u
118
v
119
w
Nr. Zeichen
120
x
121
y
122
z
123
{
124
|
125
}
126
~
122
z
123
{
124
|
125
}
126
~
137
‰
149
•
163
£
165
¥
166
|
177
±
8364
€
8592
←
8593
↑
8594
→
8595
↓
Dem Browser teilen wir den verwendeten Zeichensatz mit Hilfe eines meta-Tags im headElement mit. Dieser Standalone-Tag besitzt lediglich das Attribut charset, jedoch keinen
Inhalt und keinen Schlusstag.
HTML
...
<head>
<meta charset="utf-8">
</head>
...
HTML
Seite 4 / 22
1.6 Titel
Mit Hilfe des table-Elements wird einem HTML-Dokument ein Titel zugewiesen. Dieser
Titel wird unter anderem
in der Titelzeile des Browserfensters angezeigt,
beim Setzen eines Lesezeichens als Name vorgeschlagen,
in der Liste der bereits besuchten Seiten angezeigt und
von Suchmaschinen ausgewertet und in der Trefferliste angezeigt.
HTML
...
<head>
<meta charset="utf-8">
<title>
Kaufmännische Schule Tauberbischofsheim
</title>
</head>
...
1.7 Überschriften
Um einen bestimmen Text als Überschrift zu kennzeichnen, können die HTML-Elemente
h1 bis h6 (headline) verwendet werden. Das h1-Element steht dabei für eine Überschrift
der 1. Ebene (vergleichbar dem Titel eines Buches), das h2-Element für eine Überschrift
der 2. Ebene (vergleichbar einer Kapitelüberschrift), das h3-Element eine Überschrift der
3. Ebene (vergleichbar einer Unterkapitelüberschrift) usw.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Kaufmännische Schule Tauberbischofsheim
</title>
</head>
<body>
<h1>
Kaufmännische Schule Tauberbischofsheim
</h1>
<h2>
Herzlich Willkommen
</h2>
</body>
</html>
HTML
Seite 5 / 22
1.8 Textabsatz (<p>) und Zeilenumbruch (<br>)
Mit Hilfe eines Absatzes lassen sich Texte strukturieren. Dazu wird der entsprechende
Text in ein p-Element (paragraph) eingeschlossen.
HTML
...
<body>
<h1>
Kaufmännische Schule Tauberbischofsheim
</h1>
<h2>
Herzlich Willkommen
</h2>
<p>
Wir freuen uns über Ihr Interesse und hoffen Ihnen auf den folgenden
Seiten einen kleinen Einblick in unsere Schule geben zu können.
</p>
</body>
...
Soll innerhalb eines Absatzes ein Zeilenumbruch erfolgen, muss dies durch den
Standalone-Tag <br> deutlich gemacht werden. Im Texteditor selbst muss an dieser Stelle keine neue Zeile begonnen werden, es erleichtert jedoch das Erkennen des Zeilenumbruchs im Quelltext.
HTML
...
<p>
Wir freuen uns über Ihr Interesse und<br>
hoffen Ihnen auf den folgenden Seiten einen kleinen Einblick in unsere
Schule geben zu können.
</p>
...
HTML
Seite 6 / 22
1.9 Grafik (<img>)
Um eine Grafik in eine HTML-Datei einzubinden, muss die Grafikdatei an der gewünschten Stelle im HTML-Quelltext referenziert, d. h. eine Beziehung zur Grafik herstellen werden.
Für Grafikreferenzen gibt es in HTML den img-Tag (img = image = Bild). Es handelt sich
um einen Standalone-Tag ohne Elementinhalt und ohne End-Tag. Mit Hilfe der Attributen src (src = source = Quelle) und alt (alt = alternative = alternativ) bestimmen Sie nähere
Einzelheiten der Grafikreferenz. Die zwei Attribute sind Pflicht und müssen immer angegeben werden:
Mit dem Attribut src bestimmen Sie die gewünschte Grafikdatei. Wenn sich die Grafikdatei
im gleichen Verzeichnis wie die HTML-Datei befindet, in der die Grafikreferenz steht, genügt einfach die Angabe des Dateinamens der Grafik (src="eingang_sport_beck.jpg").
Das Referenzieren mit relativen oder absoluten Pfadangaben ist dann zwingend erforderlich, wenn die Grafikreferenz nicht in demselben Ordner wie die HTML-Seite steht.
Beispiel:
<img src="img/logo.gif" alt="logo">
Die Datei steht im Ordner img, der sich im gleichen
Ordner wie die aktuelle HTML-Datei befindet.
<img src="../img/logo.gif" alt="logo">
Die Datei steht im Ordner img, der sich auf der gleichen Ebene befindet, wie der Ordner, in dem die aktuelle HTML-Datei gespeichert ist.
HTML
...
<img src="img/eingang.jpg" alt="Haupteingang Schule">
...
HTML
Seite 7 / 22
1.10 Liste
1.10.1 Aufzählungsliste - unordered list (<ul>)
Listen dienen im Allgemeinen dazu, Schlagwörter übersichtlich darzustellen. Bei einer
Aufzählungsliste werden alle Listeneinträge mit einem Aufzählungszeichen (Bullet) versehen.
Der Tag <ul> (ul = unordered list = unsortierte Liste) leitet eine Aufzählungsliste ein. Innerhalb dieses Elements werden dann die einzelnen Aufzählungselemente jeweils in die Tags
<li> und </li> (li = list item = Listeneintrag) eingeschlossen. Der Schlusstag </ul> beendet
die Liste.
HTML
...
<h3>Menü</h3>
<ul>
<li>Startseite</li>
<li>Bildungswege</li>
<li>Termine</li>
<li>Impressum</li>
</ul>
...
HTML
Seite 8 / 22
1.10.2 Nummerierte Liste - ordered list (<ol>)
Bei einer nummerierten Liste werden alle Listeneinträge automatisch durchnummeriert.
Der Tag <ol> (ol = ordered list = geordnete Liste) leitet eine nummerierte Liste ein, der Tag
</ol> beendet sie.
HTML
...
<h3>Menü</h3>
<ol>
<li>Startseite</li>
<li>Bildungswege</li>
<li>Termine</li>
<li>Impressum</li>
</ol>
...
HTML
Seite 9 / 22
1.11 Hyperlinks
Eine der wichtigsten Eigenschaften von HTML ist die Möglichkeit, Verweise zu definieren.
Diese so genannten Hyperlinks können zu anderen Stellen im eigenen Projekt führen,
aber auch zu beliebigen anderen Adressen im World Wide Web.
HTML
...
<a href="index.html">
Startseite
</a>
...
Hyperlinks werden mit Hilfe des a-Elements realisiert. Dem Attribut href (hyper reference)
wird dabei das gewünschte Verweisziel zugewiesen. Zwischen den Tags <a> und </a> ist
der Text zu notieren, mit dem der Anwender auf den Link verwiesen wird.
HTML
...
<h3>Menü</h3>
<ul>
<li> <a href="index.html">Startseite</a> </li>
<li> <a href="bildungswege.html">Bildungswege</a> </li>
<li> <a href="termine.html">Termine</a> </li>
<li> <a href="impressum.html">Impressum</a> </li>
</ul>
...
HTML
Seite 10 / 22
2 Cascading Style Sheets (CSS)
Bis jetzt enthält unsere HTML-Datei ausschließlich Informationen zu Gliederung und Inhalt
der Webseite. Nun muss der Inhalt noch formatiert werden, damit die Webseite optisch
ansprechender aussieht.
Prinzipiell können Formatierungen mittels HTML-Anweisungen direkt in der HTML-Datei
vorgenommen werden. Alternativ kann die Formatierung jedoch auch mit Hilfe von Cascading Style Sheets in eine eigene Datei ausgelagert werden. Dies hat den Vorteil, dass
Formatierungen einheitlich für mehrere HTML-Dokumente definiert werden können. Außerdem wird die HTML-Datei nicht mit zusätzlichen Informationen überfrachtet und bleibt
so übersichtlicher und pflegeleichter.
2.1 Verweis auf das Stylesheet
Soll ein HTML-Dokument mit Hilfe eines Stylesheet formatiert werden, muss im headElement ein link-Tag eingefügt werden, der auf die entsprechende css-Datei verweist.
HTML
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
...
</head>
2.2 HTML-Elemente formatieren
Im Stylesheet können nun für die verschiedenen HTML-Elemente Formatierungen festgelegt werden.
CSS
body {
background-color: #FFFFB2;
font-family: Arial, Sans-Serif;
}
/* helles gelb */
Im Beispiel wird für das body-Element Schriftart, Textfarbe und Hintergrundfarbe festgelegt.
Diese Werte vererbt das Eltern-Elements (hier: body-Element) automatisch an alle seine KindElemente (z. B. h1-Element). Sie können jedoch durch eine spezialisierte Regel für das jeweilige Element überschrieben werden.
CSS
body {
background-color: #FFFFB2;
font-family: Arial, Sans-Serif;
}
/* helles gelb */
h1 {
background-color: #E50000;
/* rot */
}
Im Beispiel überschreibt das h1-Element die von seinem Eltern-Element body geerbte Hintergrundfarbe durch einen eigenen Wert.
HTML
Seite 11 / 22
2.3 CSS-Eigenschaften
CSS-Eigenschaft
font-family
font-size
font-style
font-weight
text-decoration
font-weight
text-align
vertical-align
Beschreibung
Schriftart. Es können mehrere Alternativen angegeben werden, die dann verwendet werden, falls die jeweils vorangegangene nicht verfügbar ist.
Schriftgröße (z. B. Schriftgröße 12 = 12pt)
Schriftstil:
italic
normal
= kursiver Schriftstil
= normaler Schriftstil
normal = normal
bold = fett.
bolder = extrafett.
lighter = dünner.
100,200,300,400,500,600,700,800,900 = extra-dünn (100) bis extrafett (900).
Erlaubt folgende Formatierungen:
underline
= unterstrichen
overline
= überstrichen.
line-through = durchgestrichen.
none
= normal (keine Text-Dekoration).
Legt fest, wie fett eine Schrift dargestellt wird.
lighter = dünner als normal
normal = normaler Schriftstil
bold
= fett
bolder
= extra fett
Horizontale Ausrichtung eines Textabsatzes:
left
= linksbündig ausrichten (Voreinstellung)
center = zentriert ausrichten
right
= rechtsbündig ausrichten
justify = als Blocksatz ausrichten
Bei Tabellenzellen oder anderen Elementen, die eine berechnete oder definierte Höhe haben können, wird häufig vertikale Ausrichtung oben, mittig oder
unten bündig erforderlich.
top = oben bündig ausrichten.
middle = mittig ausrichten.
bottom = unten bündig ausrichten.
Textfarbe. Die Farbwerte können hexadezimal nach dem Schema #RRGGBB
angegeben werden.
Hintergrundfarbe. Die Farbwerte können hexadezimal nach dem Schema
background-color
#RRGGBB angegeben werden.
color
line-height
Zeilenhöhe (z. B. einfache Schriftgröße = 1, anderthalbfache Schriftgröße =
1.5, zweifache Schriftgröße = 2)
Rahmentyp:
none
dotted
dashed
border-style (*)
solid
double
inset
outset
=
=
=
=
=
=
=
kein Rahmen (bzw. unsichtbarer Rahmen).
gepunktet
gestrichelt
durchgezogen
doppelt durchgezogen
3D-Effekt
3D-Effekt
border-width (*) Rahmendicke (z. B. 1 Pixel = 1px)
border-color (*)
margin (*)
Rahmenfarbe. Die Farbwerte können hexadezimal nach dem Schema #RRGGBB angegeben werden.
Abstand zum benachbarten Element bzw. Außenrand (z. B. 20 Pixel = 20px
oder 1,5-fache Schriftgröße = 1.5em)
HTML
Seite 12 / 22
CSS-Eigenschaft
Beschreibung
float
Textumfluss. Nachfolgender Text kann das jeweilige Element umfließen:
left
= Element steht links und wird rechts davon von nachfolgenden
Elementen umflossen.
right
= Element steht rechts und wird links davon von nachfolgenden
Elementen umflossen.
none
= Kein Umfluss (Normaleinstellung).
clear
Beendet das Umfließen andere Elemente. Ein mit clear formatiertes Element
ist das Erste, das nicht mehr neben anderen Elementen steht. Es kann aber
trotzdem mit der float-Eigenschaft formatiert werden, damit nachfolgende Elemente um dieses Element wieder herum fließen.
left
= Beendet ein vorangehendes float: left.
rigth = Beendet ein vorangehendes float: right.
both
= Beendet ein vorangehendes float: left bzw. right.
border-spacing
padding (*)
border-collapse
list-style-type
width
Legt den Abstand der Rahmen zwischen benachbarten Tabellenzellen fest.
Legt den Abstand zwischen dem Inhalt und den Rändern (border) fest. Dieser
Bereich wird mit der Hintergrundfarbe gefüllt, die für den Inhalt festgelegt ist.
Legt fest, ob zwischen den Rahmen benachbarter Tabellenzellen ein Abstand
zusehen ist oder nicht.
collapse = kein Abstand
separate = Abstand (wird durch border-spacing bestimmt)
decimal
lower-roman
upper-roman
lower-latin
upper-latin
disc
circle
square
none
=
=
=
=
=
=
=
=
=
Nummerierung 1.,2.,3.,4. usw.
Nummerierung i.,ii.,iii.,iv. usw.
Nummerierung I.,II.,III.,IV. usw.
Nummerierung a.,b.,c.,d. usw. (≙ lower-alpha)
Nummerierung A.,B.,C.,D. usw. (≙ upper-alpha)
Aufzählungszeichen: gefüllter Kreis
Aufzählungszeichen: leerer Kreis
Aufzählungszeichen: Rechteck
keine Nummerierung
Bestimmt die Breite eines Elements. Unter anderem sind folgende Wertangaben zulässig:
Prozentuale relativ zur Fensterbreite, z. B. 50%;
absolute in Pixeln, z. B. 30px oder
absolute in Punkten, z. B. 12pt.
(*) Soll sich die Eigenschaft nur auf bestimmte Seiten beziehen, kann dies durch die Angabe der entsprechenden
Einschränkung [-top, -right, -bottom, -left] erreicht werden.
Beispiel: border-top-width, border-left-color, margin-top, margin-bottom
Farbcodes
Zum Beispiel: http://www.html-php-mysql.de/generatoren/colors.php
Bilder horizontal zentrieren
CSS
img {
display: block;
margin-left: auto;
margin-right: auto;
}
HTML
Seite 13 / 22
Aufgabe:
Formatieren Sie die folgenden HTML-Elemente wie folgt:
HTML-Element
body
Formatierung
Hintergrundfarbe: helles gelb (#FFFFB2)
Schriftart: Arial (falls diese auf dem Client nicht verfügbar ist, soll
statt dessen die Schriftart ‚Sans Serif‘ verwendet werden)
h1
h2
Textausrichtung: zentriert
Text: kursiv und unterstrichen
h3
Abstand zum vorherigen Element: 1,25-fache Schriftgröße
Abstand zum folgenden Element: 0,5-fache Schriftgröße
p
img
Schriftgröße: 28 Punkte
Textausrichtung: zentriert
Zeilenhöhe: 1,5-fache Schriftgröße
Hintergrundfarbe: rot (#E50000)
Textfarbe: weiß (#FFFFFF)
Rahmenbreite: 1 Pixel
Rahmentyp: durchgezogen
Abstand zum folgenden Element: 5 Pixel
Textausrichtung: zentriert
Zeilenhöhe: 1,5-fache Schriftgröße
Abstand zum vorherigen Element: 0,5-fache Schriftgröße
Abstand zum folgenden Element: 0,5-fache Schriftgröße
Die Grafik soll horizontal zentriert werden.
HTML
Seite 14 / 22
2.4 Differenzierte CSS-Eigenschaften
Neben der Startseite index.html besteht unser Webauftritt aus weiteren, miteinander verlinkten Webseiten. All diese Webseiten sollen einheitlich formatiert sein. Hierfür verwenden wir eine zentrale css-Datei.
Bisher haben wir dort festgelegt, dass Bilder horizontal zentriert werden. Die html-Seite
bildungswege.html enthält jedoch ein Bild, das rechts von dem es umfließenden Text angezeigt werden soll.
HTML
Seite 15 / 22
Daher müssen wir in der css-Datei nun für beide Fälle jeweils eine Variante anlegen.
CSS
...
img.zentriert {
/* Bilder können zentriert werden, indem das Bild selbst als Blockelement
behandelt wird und ihm entsprechenden margin- Eigenschaften zugewiesen
werden. */
display: block;
margin-left: auto;
margin-right: auto;
}
img.rechts {
float: right;
margin-left: 30px;
margin-bottom: 30px;
}
Im html-Dokument wird dann mit Hilfe des Attributs class auf die jeweilige Variante verwiesen.
HTML
...
<img class="zentriert" src="img/eingang.jpg" alt="Haupteingang Schule">
...
index.html
HTML
...
<img class="rechts" src="img/bildungswege.gif" alt="img/bildungswege.gif">
...
bildungswege.html
HTML
Seite 16 / 22
Bisher haben wir in unserer css-Datei festgelegt, dass alle p-Elemente zentriert und mit
anderthalbfachem Zeilenabstand dargestellt werden.
CSS
...
p {
text-align: center;
line-height: 1.5;
}
...
Die Erläuterungen zu den verschiedenen Schularten sollen jedoch – so wie es der Standard vorsieht – linksbündig und mit einfachem Zeilenabstand formatiert werden. Daher
müssen wir den Eintrag in unserer css-Datei so ändern, dass er nicht mehr für alle pElemente gilt. Dazu vergeben wir einen entsprechenden Klassennamen.
CSS
...
p.zentriert{
text-align: center;
line-height: 1.5;
}
...
Soll ein p-Element zentriert werden, gibt man in der HTML-Datei nun diese Klasse an.
HTML
...
<p class="zentriert">
Wir freuen uns über Ihr Interesse und <br> hoffen Ihnen auf den folgenden
Seiten einen kleinen Einblick in unsere Schule geben zu können.
</p>
...
index.html
Andernfalls verzichtet man auf die Angabe einer Klasse und sorgt so dafür, dass das pElement dem Standard entsprechend formatiert wird.
HTML
...
<p>
In der Kaufmännischen Berufsschule bilden wir im dualen Verbund mit den
Ausbildungsbetrieben Bank-, Industrie-, Großhandels-, Büro-,
Bürokommunikations- und Werbekaufleute sowie Verwaltungsfachangestellte
(ÖV) aus.
</p>
...
bildungswege.html
HTML
Seite 17 / 22
2.5 Formatierungen im HTML-Dokument
Sollen einzelne Worte bzw. Teile eines Absatzes durch Unterstreichen, Fett- oder Kursivdruck hervorgehoben werden, kann die Formatierung auch direkt im HTMLDokument vorgenommen werden.
HTMLElement
Bedeutung
b
zeichnet einen Text
als fett aus
i
zeichnet einen Text
als kursiv aus
u
zeichnet einen Text
als unterstrichen
aus
Beispiel
Darstellung
Folgendes ist <b>wichtig</b>:
</p>
Folgendes ist wichtig:
<p>
<p>
Folgendes ist <i>wichtig</i>:
</p>
Folgendes ist wichtig:
<p>
Folgendes ist <u>wichtig</u>:
</p>
Folgendes ist wichtig:
Durch Verschachtelung der HTML-Elemente lassen sich die Effekte auch kombinieren.
Beispiel
Darstellung
<p>
Folgendes ist <u> <i>wichtig</i> </u>:
Folgendes ist wichtig:
Folgendes ist <b> <u> <i>wichtig<\i> </u> </b>:
Folgendes ist wichtig:
</p>
<p>
</p>
HTML
Seite 18 / 22
3 Tabellen definieren
3.1 Tabellen definieren
Die Webseite termine.html soll eine Tabelle mit allen anstehenden Terminen beinhalten.
Zelle (table headline)
Datum
Zeile (table row)
Beginn
Art der Veranstaltung
12.09.12
7:30
Wandertag
14.10.12
19:00
Klassen-Pflegschaftssitzungen
21.10.12
19:00
Elternbeiratssitzung und Schulkonferenz
Zelle (table data)
Eine html-Tabelle (table) kann mehrere Zeilen (table row) enthalten. Jede Zeile besteht
wiederum aus verschiedenen Zellen die entweder eine Spaltenüberschrift (table headline)
oder normale Daten (table data) enthalten.
HTML-Element
Bedeutung
Beispiel
Tabelle
<table> ...
tr
Zeile
<tr> ...
th
Zelle mit einer Spaltenüberschrift
<th>Datum</th>
td
Zelle mit normalen Daten
<td>12.09.12</td>
table
</table>
</tr>
HTML
...
<table>
<tr>
<!-- 1. Zeile -->
<th>Datum</th>
<th>Beginn</th>
<th>Art der Veranstaltung</th>
</tr>
<tr>
<!-- 2. Zeile -->
<td>12.09.12</td>
<td>7:30</td>
<td>Wandertag</td>
</tr>
<tr>
<!-- 3. Zeile -->
<td>14.10.12</td>
<td>19:00</td>
<td>Klassen-Pflegschaftssitzungen</td>
</tr>
<tr>
<!-- 4. Zeile -->
<td>21.10.12</td>
<td>19:00</td>
<td>Elternbeiratssitzung und Schulkonferenz</td>
</tr>
</table>
...
<!-- 1. Überschrift-Zelle -->
<!-- 2. Überschrift-Zelle -->
<!-- 3. Überschrift-Zelle -->
<!-- 1. Zelle -->
<!-- 2. Zelle -->
<!-- 3. Zelle -->
<!-- 1. Zelle -->
<!-- 2. Zelle -->
<!-- 3. Zelle -->
<!-- 1. Zelle -->
<!-- 3. Zelle -->
<!-- 3. Zelle -->
HTML
Seite 19 / 22
3.2 Tabellen formatieren
Anforderungen
HTML-Element
table
Formatierung
Kein Abstand zwischen den Rahmen benachbarter Tabellenzellen.
td
Rahmen anzeigen
Rahmenbreite: 1 Pixel
th
Rahmen anzeigen
Rahmenbreite: 1 Pixel
Hintergrundfarbe: rot (#E50000)
Schriftfarbe: weiß (#FFFFFF)
Rahmenfarbe: schwarz (#000000)
Stylesheet
In unserer css-Datei styles.css werden folgende Einträge ergänzt:
CSS
table {
border-collapse: collapse;
}
td {
border-style: solid;
border-width: 1px;
}
th {
border-style: solid;
border-width: 1px;
background-color: #E50000;
color: #FFFFFF;
border-color : #000000;
}
styles.css
Ansicht
HTML
Seite 20 / 22
4 Layout
Beim Entwurf einer neuen Webseite besteht der erste Schritt darin, sich über die grundsätzliche Struktur des Internetauftritts klar zu werden. Als Strukturierungselemente kommen dabei Container zum Einsatz, die ihrerseits die darzustellenden Elemente (Überschriften, Textabschnitte, Bilder, …) aufnehmen.
Container-Elemente
HTML-Element
Zweck
header
Kopfzeile
footer
Fußzeile
nav
Navigationsbereich
article
Eigenständiger Teil der Webseite (z. B.: ein Artikel auf einer Zeitungsseite).
aside
Ergänzende Informationen zum eigentlichen Inhalt der Seite (z. B. Kommentare).
section
div
Ein Bereich der Webseite, der inhaltlich zusammengehört, zu dem jedoch keiner
der anderen Container passt (z. B. Unterabschnitte mit einer eigenen Überschrift).
Ein Bereich der Webseite, der keine inhaltliche Bedeutung besitzt und nur der
Layoutgestaltung dient.
Beispiel 1: Layout vertikal
Sollen die verschiedenen Bereiche vertikal untereinander angeordnet werden, sind hierfür
keine besonderen Formatierungen mit css notwendig.
HTML
<body>
<header>Kopfzeile</header>
<nav>
<a href="link1.html">Link 1</a>
<a href="link2.html">Link 2</a>
<a href="link3.html">Link 3</a>
</nav>
<article>
<h2>Layout: vertikal</h2>
<p>Nach der Kopfzeile folgt ...</p>
</article>
<footer>Fußzeile</footer>
</body>
Beispiel 2: Layout horizontal (zwei Spalten)
In diesem Beispiel sollen der Navigationsbereich und der eigentliche Artikel nebeneinander angeordnet werden.
HTML
<body>
<header>Kopfzeile</header>
<div>
<nav> ... </nav>
<article> ... </article>
</div>
<footer>Fußzeile</footer>
</body>
HTML
Seite 21 / 22
css
Eine Möglichkeit dies umzusetzen besteht
div {
display: table;
darin, mit Hilfe der css-Eigenschaft diswidth: 100%;
play festzulegen, dass sich beide Berei}
che wie zwei nebeneinanderliegende Zelnav {
len einer Tabelle verhalten sollen (display:
display: table-cell;
width: 60px;
table-cell).
}
Damit sich die zweite „Zelle“ (hier: article)
article {
über die gesamte verbleibende Breite der
display: table-cell;
}
Webseite erstreckt, müssen beide Bereiche (hier: nav und article) in einen übernav a {
display: block;
geordneten Bereich eingebettet werden,
}
der sich wie eine Tabelle verhalten soll,
die die beiden Zellen enthält (display:
table). Für diesen Bereich kann dann die Breite auf 100% gesetzt werden (width: 100%).
Da dieser übergeordnete Bereich lediglich der Formatierung dient und selbst keinen darzustellenden Inhalt enthält, verwenden wir hierfür das div-Element.
Beispiel 3: Layout horizontal (drei Spalten)
In diesem Beispiel soll neben dem eigentlichen Artikel noch eine Spalte mit ergänzenden
Anmerkungen erscheinen. Daher greifen wir hierbei zum aside-Element.
HTML
<body>
<header>Kopfzeile</header>
<div>
<nav> ... </nav>
<article> ... </article>
<aside> ... </aside>
</div>
<footer>Fußzeile</footer>
</body>
css
Das aside-Element soll sich ebenfalls wie
aside {
display: table-cell;
eine Tabellenzelle verhalten und wird mit
width: 100px;
css entsprechend formatiert (display:
}
table-cell). Im Html-Dokument fügen wie
das aside-Element dem div-Container hinzu, der für Formatierungszwecke als übergeordnete Tabelle fungiert (hier: div).
HTML
Seite 22 / 22
Aufgabe
Überarbeiten Sie das HTML-Dokument bildungswege.html. Verwenden Sie dabei geeignete Container um das Layout der Seite festzulegen.
a) Menü unterhalb der Kopfzeile
b) Menü und Artikel unterhalb der Kopfzeile nebeneinander
