HTML

Aus Brainstorm Wiki

Das Grundprinzip von HTML

HTML-Datei erzeugen

Möchtest du eine Webseite erstellen, so musst du zuerst eine HTML-Datei erzeugen. Eine HTML-Datei hat die Datei-Endung .html oder .htm. Sie besteht einfach aus Text und lässt sich daher mit einem normalen Text-Editor, wie z.B. Windows Editor oder gedit bearbeiten. Öffnest du diese Datei mit einem Browser, so wird dieser Text angezeigt.

Aufgabe: Erstelle eine Datei mit der Endung .html und schreibe mithilfe eines Text-Editors "Hallo Welt!" in die Datei. Öffne die Datei anschließend in einem Browser.

Standalone-Tags

Es gibt bestimmte Tags, die keinen Inhalt haben (Standalone-Tags). Sie bestehen nur aus einem einzigen Tag.

Beispiel:

Zeile 1<br />Zeile 2

Im Beispiel erzeugt das br-Tag einen Zeilenumbruch. Auch Standalone-Tags stehen in spitzen Klammern, wobei vor der schließenden Klammer ein Slash stehen muss.

Aufgabe: Schreibe einen beliebigen Text in die HTML-Datei und versehe ihn mit mehreren Zeilenumbrüchen.

Attribute

Man kann HTML-Tags mit zusätzlichen Angaben versehen. Dies geschieht durch die Verwendung von Attributen.

Beispiel 1:

<h1 align="center">zentrierte Überschrift</h1>

Beispiel 2:

<img src="bild.jpg" alt="Das bin ich!" />

Im ersten Beispiel wird das h1-Tag für Überschriften ergänzt, indem dem Attribut align der Wert center zugewiesen wird. Das bewirkt, dass die Überschrift zentriert dargestellt wird. Im öffnenden Tag können also beliebig viele Attribute nach dem Schema attribut="wert" stehen, wenn sie durch ein Leerzeichen vom Tag-Namen getrennt sind. Auch Standalone-Tags können Attribute enthalten.

Aufgabe: Lege eine Bild-Datei in das gleiche Verzeichnis, in dem auch deine HTML-Datei liegt. Füge dann wie im zweiten Beispiel beschrieben das img-Standalone-Tag mit den Attributen src und alt ein. Das src-Attribut soll dabei den Dateinamen des Bildes und das alt-Attribut eine alternative Beschreibung des Bildes enthalten.

Zusammenfassung

<tag>Inhalt</tag>
<tag />
<tag attribut1="wert" attribut2="wert">Inhalt</tag>
<tag attribut1="wert" />

Aufbau einer HTML-Datei

Alle HTML-Seiten sollten aus drei Teilen bestehen:

Dokumenttyp-Deklaration
Header
Body

Die Dokumenttyp-Deklaration (DTD) beschreibt die genutzte HTML-Version. Sie sieht zunächst ein wenig verwirrend aus. Es ist empfehlenswert, sich ein HTML-Grundgerüst mit der DTD zu speichern, so dass man diese nicht jedes Mal neu eingeben muss.

Im Header stehen dateiweite Einstellungen, wie z.B. der Titel einer Seite.

Der Body enthält schließlich den eigentlichen Inhalt der Seite.

Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Titel der Seite</title>
	</head>
	<body>
		Hier steht <strong>Text</strong>!
	</body>
</html>

Man sieht, dass nach der Dokumenttyp-Definition das html-Tag folgt. Es ist das Wurzelement der HTML-Datei und umschließt alle weiteren Tags.

Im html-Tag stehen die beiden Tags head und body. Das head-Tag umschließt die dateiweiten Einstellungen, wie z.B. das title-Tag. Das title-Tag gibt den Titel einer Seite an, der auch in der Dokumentleiste des Browserfensters angezeigt wird. Typischerweise stehen im head-Bereich einer HTML-Seite noch Informationen für Suchmaschinen.

Im body wird der eigentliche Inhalt der HTML-Seite definiert, also alles, was später im Browserfenster angezeigt werden soll.

Aufgabe: Erstelle dir einen eigenen HTML-Rohling mit DTD, Header und Body, in den du später Daten einfügen kannst.

Textstrukturierung

Du kennst jetzt das Grundprinzip von HTML und weißt, wie eine HTML-Datei aufgebaut ist. Herzlichen Glückwunsch, das war schon das Wichtigste! Als nächstes wirst du verschiedene HTML-Tags zur Strukturierung von Texten lernen.

Überschriften

HTML kennt sechs verschiedene Arten von Überschriften. Durch die einzelnen Überschriften-Typen lassen sich Hierarchien im Dokument wiedergeben. Eine Überschrift ersten Grades wird durch das h1-Tag angegeben, während eine Überschrift sechsten Grades durch das h6-Tag angegeben wird.

Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Überschrift-Demo</title>
    </head>
    <body>
        <h1>Überschrift ersten Grades</h1>
        <h3>Überschrift dritten Grades</h3>
        <h4>Überschrift vierten Grades</h4>
    </body>
</html>

Weist man einem Überschriften-Tag das Attribut align zu, so kann man die Ausrichtung ändern. Mögliche Werte sind justify für Blocksatz, right für rechtsbündigen, left für linksbündigen und center für zentrierten Text.

Textabsätze und Zeilenumbrüche

Ein Text lässt sich prima strukturieren, wenn man ihn in Absätze einteilt. Ein Absatz innerhalb des HTML-Quelltextes wird ignoriert. Du musst explizit das p-Tag benutzen, das ähnlich wie die Überschriften-Tags das Attribut align enthalten kann. Der Inhalt eines p-Tags entspricht dann dem Absatz.

Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Überschrift-Demo</title>
    </head>
    <body>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis massa sed libero egestas laoreet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque id nisi at orci pellentesque eleifend eget eu nisi. Proin nisi massa, auctor in bibendum vel, faucibus vitae sem.</p>
            <p>Curabitur a turpis turpis. Etiam ac lacus ante. Donec accumsan ipsum non felis ullamcorper placerat. Maecenas ultricies aliquam erat, non adipiscing mi hendrerit nec. Fusce a justo metus, sit amet commodo neque. Fusce viverra urna vel nisi tempor luctus. Phasellus pellentesque consectetur elit, id rutrum lorem venenatis et.</p>
    </body>
</html>

Aufgabe: Übertrage den Text der Seite http://wiki.brainstorm-werbung.de/index.php?title=Sympathie in eine eigene HTML-Seite. Benutze dazu die folgenden Tags: h1, p und strong.

Ein einfacher Zeilenumbruch lässt sich mit dem Standalone-Tag br umsetzen. Der Gebrauch wurde schon zu Beginn erläutert.

Listen

Man unterscheidet in HTML zwischen zwei Arten von Listen: nummerierte und ungeordnete.

Beispiel:

...
<ol>
    <li>Erstes Element</li>
    <li>Zweites Element</li>
    <li>Drittes Element</li>
</ol>

<h2>Einkaufszettel</h2>
<ul>
    <li>Zimt</li>
    <li>Reis</li>
    <li>Knoblauch</li>
    <li>Nelken</li>
</ul>
...

Im Beispiel sieht man, dass eine nummerierte Liste mit dem ol-Tag eingeleitet wird, während eine ungeordnete Liste mit dem ul-Tag eingeleitet wird. Innerhalb dieser Tags dürfen nur li-Tags stehen. Diese li-Tags enthalten dann den Inhalt des Aufzählungselements.

Listen können auch verschachtelt werden. Ein li-Tag enthält dann einfach ein weiteres ul- oder ol-Tag, welches nach dem bekannten Schema aufgebaut ist.

Beispiel:

...
<h2>Einkaufszettel</h2>
<ul>
    <li>Obst
        <ul>
            <li>Banane</li>
            <li>Apfel</li>
            <li>Kirschen</li>
        </ul>
    </li>
    <li>Klopapier</li>
</ul>
...

Aufgabe: Stelle die auf http://wiki.brainstorm-werbung.de/index.php?title=Mind_Mapping dargestellte Mind-Map als mehrstufige Liste dar.

Kommentare

Kommentare sind HTML-Tags, die nur dazu dienen, den Quelltext übersichtlicher zu machen. Sie haben keinerlei Einfluss auf die Anzeige im Browser. Sie sind nach folgendem Schema aufgebaut:

<!-- Kommentartext; Alles was hier steht hat keinen Einfluss auf die Anzeige im Browser und dient nur zur Verbesserung der Übersichtlichkeit -->

Kommentare helfen dir, später deine HTML-Seite zu verstehen und sollten daher großzügig eingesetzt werden.

Trennlinien

Das letzte Mittel, das du zur Textstrukturierung kennenlernen sollst, sind Trennlinien. Du kannst eine Trennlinie einfach durch das Standalone-Tag hr einfügen. Wie man Trennlinien formatiert, lernst du später im Abschnitt zu CSS.

Beispiel:

<hr />

Zusammenfassung

...
<!-- Überschriften -->
<h1>Überschrift ersten Grades</h1>
<h2>Überschrift zweiten Grades</h2>
<h3>Überschrift dritten Grades</h3>
<h4>Überschrift vierten Grades</h4>
<h5>Überschrift fünften Grades</h5>
<h6>Überschrift sechsten Grades</h6>

<hr />

<!-- Absätze und Zeilenumbrüche -->
<p>Absatz-Text<br />mit Zeilenumbruch</p>

<hr />

<!-- Listen -->
<ol>
    <li>Katze</li>
    <li>Zwergschimpanse</li>
    <li>Kaninchen
        <ul>
            <li>Widderkaninchen</li>
            <li>braunes Kaninchen</li>
        </ul>
    </li>
</ol>
...

Links

Links sind ein entscheidender Bestandteil von HTML. Sie werden mithilfe des a-Tags eingebaut, wobei das Attribut href auf das Link-Ziel verweist. Der Inhalt des Tags entspricht dem Text, der für den Link angezeigt wird.

Beispiele:

...
<a href="home.html">Startseite</a>
<a href="andere-sachen/tabelle.xls">andere Tabelle</a>
<a href="http://www.google.de/">Google Web</a>
<a href="/tierbilder/hund2.jpg">lustiger Hund</a>
...

Es gibt zwei Möglichkeiten, ein Link-Ziel anzugeben:

absolute Pfadangabe der URI (Uniform Resource Identifier): Es kann eine vollständige Internet-Adresse mit http:// oder https:// am Anfang angegeben werden. Beispiel: http://de.selfhtml.org/html/allgemein/referenzieren.htm
relative Pfadangabe: Wird nur der Name einer Datei angegeben, so wird angenommen, dass sich die Datei im selben Verzeichnis wie die HTML-Datei befindet. Durch das Voranstellen von einem oder mehreren ../ kann angegeben werden, dass sich die Datei im übergeordneten Verzeichnis befindet. Beispiel: ../../texte/text1.odt Beginnt die Pfadangabe mit einem normalen Slash (/), so wird das Wurzelverzeichnis angesteuert. Beispiel: /hausaufgaben/mathe.odt

Aufgabe: Erstelle eine HTML-Seite, die auf mindestens vier Angebote von Google verlinkt. (z.B. Google Websuche, Google Kalender, YouTube)

Grafiken

Grafiken werden in HTML mit dem Standalone-Tag img eingebaut, wobei das src-Attribut die Adresse zu einer Bild-Datei angibt. Die Adressierung der Bild-Datei funktioniert wie bei Links, allerdings muss die Bild-Datei die Dateiendung .JPG, .JPEG, .PNG oder .GIF haben. Das JPG-Format ist für Fotos sinnvoll, während das .PNG-Format für Grafiken empfehlenswert ist. Der Einsatz von GIF-Grafiken ist nicht mehr empfehlenswert.

Weiterhin ist das alt-Tag bei Bildern sehr wichtig. Falls auf einem Bild Text dargestellt ist, muss es den Text enthalten, der auf dem Bild dargestellt ist. Der Inhalt des alt-Attributes wird angezeigt, falls das Bild unter der angegebenen Adresse nicht erreichbar ist. Außerdem ist der Text für Suchmaschinen, wie Google und sehbehinderte Menschen wichtig.

Beispiele:

<img src="brainstorm.jpg" alt="Brainstorm SGmbH" />
<a href="http://www.brainstorm-werbung.de"><img src="http://www.brainstorm-werbung.de/wp-content/themes/brainstorm/images/logo.png" alt="Zur Startseite der Brainstorm SGmbH" /></a>

Aufgabe: Versehe die Link-Liste der Google-Angebote aus der vorherigen Aufgabe mit Logos der jeweiligen Angebote. Du kannst die Adresse der Grafiken ermitteln, indem du unter Firefox mit der rechten Maustaste auf eine Grafik klickst und dann den Punkt "Grafik-Adresse kopieren" auswählst.

Zusammenfassung

...
<a href="http://www.example.com">Beispiel-Link</a>
<a href="datei.odt">Beispiel-Link</a>
<img src="/hund.jpg" alt="süßer Hund" />
<img src="../header.png" alt="" />
...

CSS

Herzlichen Glückwunsch, du kannst jetzt wie ein Profi eine Webseite strukturieren! Du kennst jetzt alle HTML-Tags, die man in der Praxis braucht. Es gibt natürlich noch viele weitere Tags, diese muss man jedoch nicht auswendig lernen. Nun lernst du, wie du eine Webseite grafisch gestaltest. Das geschieht mithilfe der Technik CSS.

Cascading Stylesheets (CSS) sind eine Ergänzung zu HTML. Sie dienen dazu, HTML-Elemente grafisch zu gestalten. Bei einer professionellen Webseite ist das HTML für die Struktur einer Webseite zuständig und CSS ist für die Optik einer Webseite verantwortlich. CSS arbeitet nach folgendem Schema:

selektor {
    eigenschaft1: wert;
    eigenschaft2: wert;
    eigenschaft3: wert;
}

Der Selektor gibt an, welche HTML-Elemente formatiert werden sollen. Die Eigenschaften und Werte geben schließlich genau an, wie die Formatierungen aussehen sollen.

Einbindung in HTML

Es gibt zwei Möglichkeiten, CSS in eine HTML-Datei einzubinden.

Zunächst gibt es die Möglichkeit, den gesamten CSS-Code in einem style-Tag im Header unterzubringen. Das style-Tag muss dabei immer das Attribut type="text/css" haben, da es sonst nicht als richtiger CSS-Code identifiziert wird.

In folgendem Beispiel erhalten alle Überschriften ersten Grades (h1) eine dunkelgelbe Farbe und eine cyanfarbene Unterstreichung.

Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>CSS-Einbindung - Erste Möglichkeit</title>
        <style type="text/css">

            h1 {
                border-bottom: 10px solid #00FFFF;
                color: #999900;
            }

        </style>
    </head>
    <body>
        <h1>Kaugummi</h1>
        <p>Lorem ipsum dolor sit amet.</p>
        <h1>Hasenködel</h1>
        <h1>Eule</h1>
    </body>
</html>

Alternativ kann man den gesamten CSS-Code in eine separate Datei mit der Datei-Endung .CSS schreiben. Zum Importieren benutzt man den folgenden CSS-Code:

@import url('dateiname.css');

Dieser CSS-Code muss auch innerhalb des style-Blockes benutzt werden.

Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>CSS-Einbindung - Zweite Möglichkeit</title>
        <style type="text/css">

            @import url('style.css');

        </style>
    </head>
    <body>
        <h1>Kaugummi</h1>
        <p>Lorem ipsum dolor sit amet.</p>
        <h1>Hasenködel</h1>
        <h1>Eule</h1>
    </body>
</html>

Diese Variante empfiehlt sich, da eine CSS-Datei so für mehrere HTML-Seiten genutzt werden kann.

Selektoren

Der Selektor ist das, was vor den geschwungenen Klammern steht. Der Selektor gibt an, welche HTML-Elemente formatiert werden sollen. Hier gibt es mehrere Möglichkeiten.

Klassen

Jedes Tag kann in HTML das Attribut class enthalten. Alle Tags, bei denen die class-Eigenschaft den gleichen Wert enthält, bilden eine "Klasse" mit diesem Wert als Namen.

Beispiel:

...
<p>Normaler Absatz.</p>
<p class="wichtig">Brainstorm ist toll.</p>
<p>Noch ein normaler Absatz.</p>
<p class="wichtig">Boxkampf-Joe isst gerne Schokolade.</p>
...

In CSS kann man dann alle Tags, die einer speziellen Klasse angehören, formatieren. Möchtest du das tun, so musst du einfach als Selektor einen Punkt und direkt danach den Namen der Klasse als Selektor angeben.

Ein entsprechender CSS-Code sähe beispielsweise so aus:

.wichtig {
    color: red;
}

Ein Tag kann auch mehreren Klassen angehören. Die verschiedenen Klassennamen werden einfach durch ein Leerzeichen getrennt angegeben.

Beispiel:

Aufgabe:

Schreibe eine HTML-Datei mit mehreren strong-Tags, wobei einige der Klasse "hervorgehoben" angehören. Bei allen Tags, die dieser Klasse "hervorgehoben" angehören, soll mittels CSS die Eigenschaft "color" auf den Wert "red" gesetzt werden.

IDs

Jedes HTML-Tag kann eine ID haben, durch die das Element eindeutig identifiziert wird. Dies geschieht durch das Attribut id, welches in jedem Element vorkommen kann. Man kann ein Element mit einer speziellen ID dann in CSS formatieren, indem man das Rautenzeichen (#) mit darauf folgender ID als Selektor benutzt.

Beispiel-HTML:

...
<h1>Einkaufszettel</h1>
<ol>
    <li>Dope</li>
    <li>Cornflakes</li>
    <li>stilles Mineralwasser</li>
    <li id="corny">Corny-Riegel</li>
</ol>
...

Beispiel-CSS:

#corny {
    color: #006;
}

Es ist wichtig, dass jede ID nur einmal vorkommt.

Aufgabe:

Schreibe eine HTML-Datei mit mehreren strong-Tags, wobei genau eines die ID "hervorgehoben" hat. Bei genau diesem Tag soll mittels CSS die Eigenschaft "color" auf den Wert "red" gesetzt werden.

Verschachtelungen

In CSS du kannst auch bestimmen, dass ein Element nur formatiert werden soll, wenn es innerhalb eines anderen Elements vorkommt.

Beispiel:

a img {
    border: 4px solid darkred;
}

Dieser Beispiel-Selektor formatiert alle img-Tags, die von einem a-Tag umschlossen werden. Man schreibt also im Selektor die verschiedenen Verschachtelungsebenen durch ein Leerzeichen getrennt nebeneinander.

Der Selektor #wichtig p a würde also alle Links, die in Absätzen innerhalb eines Elements mit der ID "wichtig" formatieren.

Aufgabe: Schreibe eine HTML-Datei mit mehreren strong-Tags, wobei einige der Klasse "hervorgehoben" angehören. Bei allen strong-Tags, die innerhalb von einem Link vorkommen, soll mittels CSS die Eigenschaft "color" auf den Wert "red" gesetzt werden.

Universalselektor

Möchtest du alle Elemente auswählen, so kannst du kannst den Universalselektor * benutzen.

Zusammenfassung

tag {...}
.klasse {...}
#id {...}
tag .klasse #id {...}
* {...}

Eigenschaften

Nun weißt du, wie man Elemente zur Formatierung in CSS mithilfe des Selektors auswählt. Als nächstes lernst du, wie du Eigenschaften in CSS benutzt. Eigenschaften sind das, was in den geschwungenen Klammern steht.

Schriftgröße

Mithilfe der Eigenschaft font-size kannst die Schriftgröße eines Textes beeinflussen.

Beispiel:

body {
    font-size: 12px;
}

In diesem Beispiel wird die Schriftgröße für das body-Tag auf 12 Pixel gestellt. Die Schriftgröße kann in verschiedenen Einheiten, wie z.B. Punkten (pt) oder Pixeln (px) angegeben werden.

Schriftart

Oft möchte man nicht nur die Schriftgröße, sondern auch die Schriftart verändern. Hierzu existiert die Eigenschaft font-family.

Bei der Angabe der Schriftart solltest du darauf achten, dass du nur Schriftarten nehmen kannst, die auch beim Betrachter der Webseite installiert sind. Man gibt daher immer mehrere Schriftart-Alternativen durch Komma getrennt hintereinander an. Bei mehreren angegebenen Schriftarten ist die Reihenfolge der Angabe entscheidend: Ist die erste angegebene Schriftart verfügbar, so wird diese verwendet. Ist sie nicht verfügbar, so wird die zweite Schriftart verwendet, falls diese verfügbar ist usw. Schriftarten, die Leerzeichen enthalten, sollten in doppelten Anführungszeichen notiert werden.

Beispiel:

.sans-serif {
     font-family: Helvetica, Arial, Sans-Serif;
}

.serif {
     font-family: "Times New Roman", Times, Serif;
}

.monospace {
     font-family: "Courier New", Monospace;
}

Schriftgewicht

Du kannst auch bestimmen, dass etwas fett gedruckt wird, obwohl es nicht innerhalb des strong-Tags vorkommt. Dazu gibt es die CSS-Eigenschaft font-weight, die entweder die Werte "bold" für Fettdruck oder "normal" für normale Schrift enthalten kann.

Beispiel:

.wichtig {
    font-size: 35px;
    font-family: Georgia, Serif;
    font-weight: bold;
}

Aufgabe: Schreibe eine HTML-Datei mit zwei Text-Absätzen. Ein Absatz soll in einer schlichten 10pt-Schrift geschrieben sein, während der andere Absatz eine auffällige fettgedruckte 40pt-Schrift enthält.

Textfarbe

Oft muss man die Farbe eines Textes ändern. Dies geschieht in HTML durch die Eigenschaft color.

Beispiel:

h1 {color: darkred;}
h2 {color: #0055FF;}
h3 {color: grey;}
h4 {color: #FFA800;}

"color" kann verschiedene Werte annehmen. Zunächst gibt es verschiedene fest definierte Schlüsselwörter für bestimmte Farben, wie z.B. "red" für rot oder "blue" für blau. Eine vollständige Liste mit Farbangaben findest du unter http://tomheller.de/theholycymbal/html-farben.html.

Alternativ kann der Hex-Code einer Farbe verwendet werden. Das ist eine sechsstellige Hexadezimalzahl, mit der sich 16.777.216 verschiedene Farben darstellen lassen. Die genaue Funktionsweise ist irrelevant. Der Hex-Code lässt sich einfach aus Photoshop kopieren oder aber auch durch einen Generator wie auf dieser Webseite http://www.colorschemer.com/online.html erzeugen lassen.

Aufgabe: Erstelle eine HTML-Seite mit drei Absätzen, deren Schrift jeweils eine andere Farbe hat.

Rahmen

Alle Elemente können durch die CSS-Eigenschaft border einen Rahmen bekommen.

Beispiel:

p {
    border: 2px dotted black;
}

Dieses Beispiel versieht alle Absätze mit einem 2px-breiten gepunkteten schwarzen Rand. Die border-Eigenschaft erwartet zu Beginn also die Breite des Rahmens, dann die Art des Rahmens und schließlich die Rahmenfarbe. Diese drei Angaben werden durch ein Leerzeichen getrennt. Ein Rahmen kann entweder durchgezogen (solid), gepunktet (dottet) oder gestrichelt (dashed) sein. Die Rahmenfarbe wird genau wie die Eigenschaft "color" angegeben.

Es ist auch möglich, einen Rand nur für eine Seite eines Elements festzulegen. Dazu gibt es die Eigenschaften border-top, border-right, border-bottom und border-left die aber nach dem gleichen Prinzip wie "border" funktionieren.

Beispiel:

#chillen {
    border-top: 10px dashed red;
    border-bottom: 1px solid yellow;
}

Aufgabe: Schreibe auf, wie die border-Eigenschaft für a) einen 10px-breiten gestrichelten roten Rand und für b) einen 1px-breiten durchgezogenen blauen Rand aussehen würde.

Unterstreichungen

Wenn du möchtest, dass ein bestimmter Text-Abschnitt unterstrichen werden soll, musst du die Eigenschaft text-decoration benutzen. Mögliche Werte für diese Eigenschaft sind "underline" für eine Unterstreichung und "none" für keine.

Beispiel:

a {
    text-decoration: underline;
}

Dieses Beispiel versieht alle Links mit Unterstreichungen.

Es ist sinnvoll in diesem Zusammenhang auf die Möglichkeit hinzuweisen, Links differenzierter zu formatieren. Mit dem Selektor "a:hover" spricht man alle Links an, über denen sich gerade der Mauszeiger befindet (Hover-Links). Mit "a:visited" werden Links formatiert, die auf bereits besuchte Seiten verweisen.

Beispiel:

a {
    font-size: 12pt;
    text-decoration: none;
}

a:visited {
    font-size: 20pt;
    text-decoration: underline;
}

Aufgabe: Schreibe eine HTML-Seite, bei der normale Links mit Untersteichung in Grün und Hover-Links ohne Unterstreichung in Violett formatiert werden.

Text-Ausrichtung

Mithilfe der Eigenschaft text-align kannst du die Ausrichtung eines Textes ändern. Du kannst einen Text linksbündig (left), rechtsbündig (right), zentriert (center) oder im Blocksatz (justify) ausrichten lassen. Die Ausrichtung bezieht sich auf alle untergeordneten Elemente des selektierten HTML-Elements, also z.B. auch Bilder.

Beispiel:

p { text-align: justify; }

CSS-Kommentare

Auch CSS-Code kann Kommentare enthalten. Kommentare haben keinerlei Auswirkungen auf die Anzeige im Browser. Der Kommentartext wird einfach zwischen die Zeichen "/*" und "*/" geschrieben.

Beispiel:

/* Formatierungen für die ganze Seite */

body {
    font-size: 12pt;
}
Zusammenfassung

/* Kommentar */

body {
    font-size: 20px;
    font-family: Helvatica, Sans-Serif;
    font-weight: bold;
    color: darkred;
    border-top: 3px solid black;
}

p .klasse li {
    font-weight: normal;
    font-family: Georgia, Serif;
}

#id {
    color: #56A06F;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

Layout

Gratulation, du kannst jetzt Texte mit CSS formatieren! Jetzt folgt die Königsdisziplin: Webseiten layouten. Hierzu ist es oft auch hilfreich, sich von einem Programm, wie z.B. Adobe Dreamweaver helfen zu lassen.

Block- und Inline-Elemente

Um Layout zu begreifen, ist zunächst die Unterscheidung zwischen Block- und Inline-Elementen wichtig. Block-Elemente sind alle HTML-Elemente, die einen neuen Absatz erzeugen. Beispielsweise h1, p oder hr lassen sich in diese Kategorie einordnen. Inline-Elemente sind alle Elemente, die keinen neuen Absatz erzeugen, wie z.B. strong oder a.

Block- und Inline-Elemente haben verschiedene Eigenschaften. Inline-Elemente dürfen keine Block-Elemente enthalten. Der folgende Code wäre also ungültig, da das Block-Element h1 nicht innerhalb eines Inline-Elementes wie a stehen darf: <a href="http://www.google.de"><h1>Test!</h1></a>

Oft werden Layout-Komponenten im neutralen Block-Element div untergebracht. Block-Elemente können absolut positioniert werden,sie können Hintergrundgrafiken enthalten, von anderen Elementen umflossen werden und ihre Größe, Außen- und Innenabstände können flexibel angepasst werden.

Im folgenden wirst du lernen, wie man div-Elemente mithilfe von CSS zu einem professionellen Seitenlayout verwandeln kann.

Höhe und Breite

Mithilfe der CSS-Eigenschaften height und width lassen sich die Höhe und Breite eines Block-Elements anpassen. Als Wert für die Eigenschaften können auch hier verschiedene Einheiten angegeben werden.

Beispiel-HTML:

...
<body>
    <h2>Navigation</h2>

    <div id="navigation">
        <ul>
            <li><a href="startseite.html">Startseite</a></li>
            <li><a href="kontakt.html">Kontakt</a></li>
            <li><a href="impressum.html">Impressum</a></li>
        </ul>
    </div>
</body>
...

Beispiel-CSS:

#navigation {
    width: 100%;
    height: 50px;
    border: 1px solid magenta;
}

Möchtest du, dass ein Block-Element genauso breit wird, wie das ihm übergeordnete Element, so solltest du wie im Beispiel für "width" den Wert "100%" angeben. Im Beispiel füllt das div-Tag mit der ID "navigation" die Breite des übergeordneten Elements "body" vollständig aus. Außerdem hat das div-Element eine Höhe von 25 Pixeln zugewiesen bekommen.

Aufgabe: Schreibe eine HTML-Datei mit drei div-Elementen, denen allen mithilfe von CSS eine unterschiedliche Höhe und Breite zugewiesen wurde.

Hintergrund

Oft möchte man, dass ein Element eine bestimmte Hintergrundfarbe oder -grafik hat. Dazu gibt es in CSS die Eigenschaften background-color, background-image, background-repeat und background-position.

Die Eigenschaft background-color funktioniert ähnlich wie die Eigenschaft color. Auch hier kann ein Hex-Farbcode oder ein Farb-Schlüsselwort angegeben werden. Möchte man, dass ein Element keinen farbigen Hintergrund hat, so gibt man als Wert für background-color einfach "transparent" an.

Beispiel:

#navigation {
    background-color: #F0FFA8;
    color: #FFFFFF;
}

Mit background-image kann man einem Block-Element eine Grafik als Hintergrund zuweisen. Die Funktionsweise dieser Eigenschaft wird im folgenden Beispiel deutlich:

Beispiel:

body {
    background-color: lightgrey;
    background-image: url('http://www.theblackparade.de/files/gray-background.jpg');
}

Der Wert muss also nach dem Schema url('bild.jpg') angegeben werden. Es gelten die vom Abschnitt über Links bekannten Regeln für die Adressierung von Dateien.

Per Standardeinstellung wird der Hintergrund unendlich oft wiederholt. Um dieses Verhalten zu ändern, gibt es die Eigenschaft background-repeat. Sie kann vier mögliche Werte enthalten:

repeat: Dies ist die Voreinstellung. Das Hintergrundbild wird unendlich oft wiederholt.
repeat-x: Das Hintergrundbild wird in X-Richtung unendlich oft wiederholt. (von links nach rechts)
repeat-y: Das Hintergrundbild wird in Y-Richtung unendlich oft wiederholt. (von oben nach unten)
no-repeat: Das Hintergrundbild wird nicht wiederholt. Es wird lediglich ein Mal angezeigt.

Wie man im vorherigen Beispiel sieht, kann man sowohl Hintergrundfarbe als auch Hintergrundgrafik angeben. Der von der Hintergrundgrafik nicht ausgefüllte Bereich wird automatisch in der Hintergrundfarbe gefüllt.

Beispiel:

body {
    background-color: lightgrey;
    background-image: url('http://www.gmund.com/media/catalog/product/cache/1/thumbnail/30x30/8a02aedcaf38ad3a98187ab0a1dede95/t/_/t_white_texture.jpg');
    background-repeat: repeat-x;
}

Falls du die Eigenschaft background-repeat benutzt, solltest du auch mithilfe der Eigenschaft background-position die Position des Hintergrundbildes bestimmen. Sie kann Kombinationen der folgenden Werte annehmen:

top (vertikal obenbündig)
bottom (vertikal untenbündig)
center (horizontal oder vertikal zentriert)
left (horizontal linksbündig)
right (horizontal rechtsbündig)

Beispiel:

#wrapper {
    background-color: white;
    background-image: url('http://breakup.frischluft-webdesign.com/images/body.gif');
    background-repeat: repeat-y;
    background-position: top center;
}

Außerdem kann festgelegt werden, dass sich ein Hintergrundbild beim Scrollen nicht mitbewegt, sondern stehenbleibt. Dies geschieht, indem der Eigenschaft background-attachment der Wert fixed zugewiesen wird. Der Standardwert für diese Eigenschaft ist scroll.

Aufgaben:

Erzeuge eine Webseite, die auf der gesamten Seite die Grafik http://www.klangundkleid.ch/img/tapeten/7117-17.jpg als Hintergrund enthalten soll. Beim Scrollen soll sich der Hintergrund nicht mitbewegen.
Erzeuge eine Webseite, die die Grafik http://www.homesolute.com/typo3temp/pics/a711b96060.jpg rechts oben auf der Seite anzeigt und dann in von oben nach unten wiederholt. Die nicht-ausgefüllte Fläche soll hellgrau sein.

Außen- und Innenabstand

Man kann jedem Element einen Außen- und einen Innenabstand zuweisen. Dies geschieht mithilfe von margin und padding.

Beispiel:

#navigation {
    width: 100%;
    background-color: orange;
    padding: 10px;
}

Im Beispiel sieht man, dass man mithilfe von padding den Innenabstand angeben kann. margin ist für den Außenabstand zuständig. Beide Eigenschaften erwarten eine Längenangabe als Wert. Möchte man, dass der Außen- oder Innenabstand an einer Seite größer oder kleiner ist, kann man ähnlich wie bei "border" die Eigenschaften margin-top, margin-bottom, margin-left, margin-right, padding-top, padding-bottom, padding-right und padding-left benutzen.

Beispiel:

#navigation a {
    margin: 0;
    margin-right: 20px;
}

Im Beispiel wird der Außenabstand von allen Links im Element mit der ID "navigation" auf 0 gesetzt. Anschließend wird ein 20-Pixel breiter Außenabstand für die rechte Seite der Links gesetzt.

Tipp: Wenn du margin-left und margin-right auf den Wert "auto" setzt, so wird das Element zentriert.

Aufgabe: Erstelle eine HTML-Seite mit zwei div-Elementen. Eines soll die ID "navigation" haben, eine Breite von 200px besitzen, überall einen Innenabstand von 10px haben und an allen Seiten einen Außenabstand von 10px besitzen. Lediglich an der rechten Seite soll der Außenabstand 25px breit sein. Weiterhin soll das Element eine hellgrüne Hintergrundfarbe haben. Das andere div-Element soll die ID "content" und überall einen Innenabstand von 10px haben.

Position

Man kann mithilfe der Eigenschaften position, top, bottom, left und right die Position eines Block-Elements bestimmen.

Beispiel:

#navigation {
    position: absolute;
    width: 100%;
    bottom: 10px;
}

In diesem Beispiel wird das Element mit der ID "navigation" 10px unter der oberen Kante des übergeordneten Elements positioniert. Die Eigenschaft position gibt Auskunft über die gewünschte Art der Positionierung eines Elements. Sie kann die Werte static, absolute, relative oder fixed annehmen.

static ist der Standardwert. Er beeinflusst das Verhalten nicht.
Bei absolute wird ein Element gemessen an dem ihm übergeordneten Element ausgerichtet.
Mithilfe von relative wird ein Element relativ zu seiner normalen Position ausgerichtet.
Bei fixed wird das Element ausgehend vom Browserfenster positioniert. Beim Scrollen bewegt es sich nicht mit.

Die genaue Position wird schließlich durch die Eigenschaften top, bottom, left und right bestimmt. top bestimmt, wo ein Element von oben beginnt. bottom bestimmt, wo ein Element von unten beginnt. right bestimmt, wo ein Element von rechts beginnt. left bestimmt, wo es von links beginnt.

Aufgabe: Erstelle eine HTML-Datei, die drei verschiedene div-Elemente mit einem unterschiedlichen Hintergrundbild und Rahmen enthält. Die drei Elemente sollen unterschiedliche Positionen einnehmen. Textumfluss

Du kannst bestimmen, dass ein bestimmtes Element von allen anderen umflossen werden soll. Dazu dient die Eigenschaft float. Sie kann die Werte right, left oder none annehmen. left bedeutet, dass das Element links steht und von allen nachfolgenden Elementen umflossen wird. right bedeutet, dass das Element rechts steht und von allen nachfolgenden Elementen umflossen wird. none ist die Standardeinstellung und bewirkt, dass das Element nicht umflossen wird.

Beispiel-CSS:

#navigation {
    background-color: orange;
    width: 200px;
    padding: 10px;
    margin: 0;
    margin-right: 10px;
    float: left;
}

Beispiel-HTML:

<div id="navigation">
    <a href="startseite.html">Startseite</a><br />
    <a href="kontakt.html">Kontakt</a><br />
    <a href="impressum.html">Impressum</a>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et sem tortor, eu condimentum magna. Cras in aliquet ipsum. Cras id purus id turpis bibendum tristique vitae id metus. Nam luctus fringilla lectus, et gravida purus cursus et. Vivamus ultrices pellentesque massa. Aliquam posuere ultricies vulputate. Nullam imperdiet aliquet enim, in mollis nunc pulvinar fringilla. Morbi nec dolor risus, eget mattis lorem. Donec consequat congue odio, in feugiat lacus commodo a. Quisque massa ligula, rutrum vel posuere eu, auctor in erat. Nam sit amet sodales libero. Aenean non elementum augue. Donec quis elit sapien. Aenean purus lectus, semper hendrerit pellentesque vel, varius scelerisque dui. Proin porta, risus vitae ornare tincidunt, felis tellus elementum ligula, eu hendrerit massa tortor elementum odio.</p>
<p>Duis rutrum rhoncus nunc sit amet rutrum. Etiam id ligula ut enim congue pulvinar in eget neque. Morbi eu neque adipiscing ante viverra tincidunt sed eget quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget ligula nec lacus accumsan posuere. Maecenas ligula enim, mollis quis pretium a, dictum vel ipsum. In neque ante, congue at porttitor aliquet, malesuada sed diam. Nullam eleifend tincidunt ornare. Vivamus rutrum, turpis ut accumsan dapibus, lectus odio varius erat, aliquam molestie lorem libero eget purus. Fusce tincidunt elit vel elit mollis malesuada. Integer et neque tellus, at pellentesque ante. Vestibulum congue urna a tortor semper vel tincidunt nunc tempor. In in lectus ut libero malesuada congue in sed lorem. Vivamus elementum, justo ut accumsan ornare, justo mauris luctus leo, volutpat pulvinar augue tellus vel nulla.</p>
</div>

Die Eigenschaft float braucht man bei einem professionellen Seitenlayout recht häufig.

Möchte man, dass ein Element unterhalb eines Umflusses fortgesetzt wird, so weist man der Eigenschaft clear den Wert both zu.

Aufgabe: Hole das Beispiel vom Abschnitt über Außen- und Innenabstände hervor. Ordne die beiden Elemente mit der ID "navigation" und "content" mithilfe der Eigenschaft float nebeneinander an.

Wenn du das geschafft hast, hast du soeben dein erstes vollständiges Webseiten-Layout entworfen. Gratuliere! Du hast dir erfolgreich das ganze Fachwissen erarbeitet. Jetzt benötigst du lediglich noch ein bisschen Erfahrung.

Zusammenfassung

#navigation {
    width: 100%;
    height: 25px;
}

#logo {
    background-color: white;
    background-image: url('logo.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: scroll;
}

#left {
    width: 190px;
    margin: 0;
    padding: 10px;
    float: left;
}

#right {
    margin: 0;
    margin-left: 200px;
    padding: 10px;
}

#footer {
    clear: both;
    width: 100%;
}

HTML

Aus Brainstorm Wiki

Inhaltsverzeichnis

Das Grundprinzip von HTML

HTML-Datei erzeugen

Tags

Standalone-Tags

Attribute

Zusammenfassung

Aufbau einer HTML-Datei

Textstrukturierung

Überschriften

Textabsätze und Zeilenumbrüche

Listen

Kommentare

Trennlinien

Zusammenfassung

Links

Grafiken

Zusammenfassung

CSS

Einbindung in HTML

Selektoren

Tags

Klassen

IDs

Verschachtelungen

Universalselektor

Zusammenfassung

Eigenschaften

Schriftgröße

Schriftart

Schriftgewicht

Textfarbe

Rahmen

Unterstreichungen

Text-Ausrichtung

CSS-Kommentare

Layout

Block- und Inline-Elemente

Höhe und Breite

Hintergrund

Außen- und Innenabstand

Position

Zusammenfassung

Ansichten

Persönliche Werkzeuge

Navigation

Suche

Werkzeuge