Sie sind auf Seite 1von 28

HTML-CSS – Cascading Style Sheet

Grundlagen und Einführung

V2.2.2

D. Maas, 06.12.11

Q uellen HTML 1. http://de.html .ne t/tu torials/html/ : 2. http://www.wi sse nsc haft-technik-ethi k.de

Quellen

HTML

1. http://de.html.net/tutorials/html/:

2. http://www.wissenschaft-technik-ethik.de/internetseiten-in-html-1.html

3. http://www.html-seminar.de/design_per_css_-_float.htm

4. http://www.bboxbbs.ch/home/html_kurs/grafik/uebersi.htm

5. Prof. Hirte, FH-Wildau (nicht mehr im Web)

CSS:

1.

http://de.html.net/tutorials/css/:

2.

www.webmaster-resource.de/tutorials/css/css-tutorial.php

3.

it/Programmierung/css/Andreas-kalt.css-layout-erstellen.pdf

Editoren (freeware 1.10.2010):

1. NVU

2. Crimson-Editor

3. Pspad-Editor

Dateizugriff in vernetzten Anlagen

World Wide Web Router Tokio 1 Berlin
World Wide Web
Router
Tokio
1
Berlin

3

PC

File-Server

World Wide Web Router Tokio 1 Berlin 3 PC File-Server Web-Server Router Switch Befindet sich keine
World Wide Web Router Tokio 1 Berlin 3 PC File-Server Web-Server Router Switch Befindet sich keine
World Wide Web Router Tokio 1 Berlin 3 PC File-Server Web-Server Router Switch Befindet sich keine
World Wide Web Router Tokio 1 Berlin 3 PC File-Server Web-Server Router Switch Befindet sich keine

Web-Server

Web Router Tokio 1 Berlin 3 PC File-Server Web-Server Router Switch Befindet sich keine Datei index.html
Web Router Tokio 1 Berlin 3 PC File-Server Web-Server Router Switch Befindet sich keine Datei index.html
Web Router Tokio 1 Berlin 3 PC File-Server Web-Server Router Switch Befindet sich keine Datei index.html

Router

Router Tokio 1 Berlin 3 PC File-Server Web-Server Router Switch Befindet sich keine Datei index.html in
Router Tokio 1 Berlin 3 PC File-Server Web-Server Router Switch Befindet sich keine Datei index.html in
Router Tokio 1 Berlin 3 PC File-Server Web-Server Router Switch Befindet sich keine Datei index.html in

Switch

Tokio 1 Berlin 3 PC File-Server Web-Server Router Switch Befindet sich keine Datei index.html in dem

Befindet sich keine Datei index.html in dem o.a. Ordner, so wird der Inhalt des Ordners angezeigt. Testen Sie den Zugriff!

Detlev Maas: HTML-CSS TG11i

HTML-Dateien anzeigen

PC File-Server PC Switch
PC
File-Server
PC
Switch

Webbrowser

Auf allen PCs und Servern können sich HTML-Dokumente befinden. Sind diese freigegeben, kann ihr Inhalt mittels Webbrowser angezeigt werden.

freigegeben, kann ihr Inhalt mittels Webbrowser angezeigt werden. Router Server im Web Detlev Maas: HTML-CSS TG11i
Router
Router

Server im Web

Was sind HTML-Dokumente?

1. Bei HTML-Dokumenten handelt es sich um Dateien, die möglichst einfach, schnell, ohne aufwendige Hilfsmittel, ohne Zusatzkosten und möglichst unabhängig vom Betriebssystem zu erstellen und zu lesen sind.

2. Zum Erstellen der Datei genügt ein einfacher Texteditor und ein wenig Knowhow. Zum Lesen der HTML-Datei gibt es eine Reihe (meist kostenloser) Browser.

3. HTML-Dateien können auf dem eigenen PC oder auf fremden Servern im Intra- oder Internet abgelegt sein. Sie sind an der Dateierweiterung „htm“ oder „html“ zu erkennen.

4. In den Anfangstagen des Internet genügten einfache unformatierte Textdateien. Im Zeitalter der grafischen Benutzeroberfläche sind aber zumindest einfache Textformatierungen und der Einbau grafischer Elemente erforderlich.

Aufbau eines HTML-Dokuments

<HTML> <HEAD> Hier stehen (üblicherweise in speziellen Tags eingebunden) verschiedene Informationen für die Suchmaschinen und verwendete Ergänzungssprachen. Dieser Bereich wird nicht angezeigt. <TITLE> Hier steht der Titel der Homepage </TITLE> </HEAD>

<BODY> Hier steht alles, was auf dem Bildschirm sichtbar dargestellt werden soll: Text, Hintergrund, Grafiken, Tabellen, Links usw. Zum Ausprobieren einfach einen kurzen Text (z.B. Das ist <B>Spitze</B>!) an dieser Stelle einfügen. Der Text selbst ist kein Tag! Er wird deshalb nicht eingeklammert! </BODY> </HTML>

Übung: erstes HTML-Dokument

1. Erstellen Sie nebenstehende Ordnerstruktur in Ihrem Homeverzeichnis h:\.

2. Prüfen Sie den Zugriff auf folgende Editoren:

• Windows Editor (Programmgruppe Zubehör)

• NVU, Crimson-Editor (Cedit) und Pspad-Editor (alle über den NAL).

• Internet-Explorer und FireFox (NAL)

3. Geben Sie den Text der Folie „Aufbau eines HTML- Dokuments“ mit dem Windows Editor ein und speichern Sie es unter dok1.html in Ihrem html-Ordner.

4. Betrachten Sie das Dokument mit den beiden Web- Browsern Internet-Explorer (IE) und FireFox (FF).

Sie das Dokument mit den beiden Web- Browsern Internet-Explorer (IE) und FireFox (FF). Detlev Maas: HTML-CSS
HTML-Element e Die Formati erung der HTML-Seiten geschieht durch so ge nannte HTML- Elemente .

HTML-Elemente

Die Formatierung der HTML-Seiten geschieht durch sogenannte HTML- Elemente. Ein HTML-Element besteht meistens aus einem Anfangs- und einem End-Tag. So besteht z.B. das Element body aus einem Anfangs-Tag <body> und einem End-Tag </body>.

Der Bereich zwischen Anfangs- und End-Tag nimmt den Inhalt des Elements auf, z.B den Text. Ein HTML-Element kann weitere HTML-Elemente enthalten.

Die HTML-Elemente werden unterschieden in Block-Elemente und Inline- Elemente.

Block-Elemente Block-Elemente erzeugen eine neue Zeile im Textfluss. Der Abstand zum vorhergehenden Text ist vom

Block-Elemente

Block-Elemente erzeugen eine neue Zeile im Textfluss. Der Abstand zum vorhergehenden Text ist vom Elementtyp und verwendeten Browser abhängig. So erzeugen die Browser beispielsweise beim p-Element einen größeren Abstand, als beim einfachen Zeilenumbruch. Beim div-Element dagegen wird beispielsweise einfach eine neue Zeile begonnen.

Block-Elemente können in der Regel normalen Text und Inline-Elemente enthalten. Einige Block-Elemente können auch andere Block-Elemente enthalten.

Einige wichtige Block-Elementen sind:

Blockquote, center, dl, dir, div, fieldset, form, h1-6, hr, isindex, menu,

noframes, noscript, ol, p, pre,

table, ul

Inline-Elemente

Inline-Elemente erzeugen keine neue Zeile im Textfluss. Inline-Elemente sind als untergeordnete, "innere" Elemente innerhalb von Block-Elementen gedacht. Sie können i.d.R. normalen Text und weitere Inline-Elemente enthalten, jedoch keine Block-Elemente.

Wichtige Inline-Elementen sind:

a, applet, b, basefont,

i,

small, span, strong, sub, sup, textarea, tt, var

bdo,

big, br, button,

cite, code, dfn,

em, font,

img, input,

iframe, kbd, label, map, object, q, samp, script, select,

HTML-Attribute

Die meisten Attribute in HTML sind optional, nur einige wenige sind (im einleitenden HTML-Tag) zwingend erforderlich wie z.B. das src-Attribut innerhalb der img-Elemente.

Die meisten HTML-Attribute haben die Aufgabe, Elemente zu formatieren, z.B. align für die Ausrichtung oder bgcolor für die Hintergrundfarbe. Allerdings sind solche Attribute als missbilligt eingestuft und nur noch in der HTML-Variante "transitional" erlaubt. Sie sollen allmählich aus dem HTML- Standard verschwinden, da ihre Aufgaben durch CSS Stylesheets besser zu lösen sind.

HTML-Dokumente: Übungen

Hinweis: Zum Erstellen der Dateien verwenden Sie bitte immer den Freeware-Editor „pspad“.

1. Arbeiten Sie die ersten vier Kapitel der Webseite http://de.html.net/tutorials/html durch.

2. Erstellen Sie eine neue HTML-Datei mit dem pspad-Editor. Wie Sie sehen, wird das Grundgerüst einer HTML-Seite automatisch erstellt. Geben Sie als Titel ue1_tags.htmlspeichern Sie das Dokument unter dem gleichen Namen.

3. Geben Sie den Text „Dies ist eine Testzeile“ ein, kopieren Sie ihn mehrfach und wenden Sie

• mindestens 8 verschiedene Überschriften- und Ausrichtungs-Tags darauf an! Beispiel: http://www.uni-

giessen.de/partosch/html/aufgabe1/hinweise.html#Struktur,

• mindestens 5 verschiedene Tags zur Textgestaltung (kursiv, fett,

) an.

4. Sonderzeichen: Zur Erstellung einer Formelsammlung muss man u.a. die beiden Zeichen „<„ (&lt) und „>“ (&gt)verwenden. Dies kann z.B. so aussehen:

<h1>&lt h1 &gt bewirkt die Schriftgröße Überschrift 1 </h1>. Testen Sie diese Zeile und erstellen Sie eine Formelsammlung für die in Aufgabe 3 verwendeten Tags.

Detlev Maas: HTML-CSS TG11i

12

Übung „Ue1 html“

Die Datei „Ue1 html“ gibt es in mehreren Versionen.

Der fast unformatierte Text. Diesen Text sollen die SchülerInnen so bearbeiten, dass eine einfach formatierte HTML-Seite entsteht.

In späteren Übungen sollen die weiteren Formatierungen mittels css erstellt werden.

HT ML-Referenz -1 Im Internet existieren jed e M enge Tu torials und Anweisungen zur

HTML-Referenz -1

Im Internet existieren jede Menge Tutorials und Anweisungen zur Erstellung von Webseiten. Für den Anfänger sind diese i.d.R. auch geeignet. Aber das Suchen nach Lösungen für die speziellen, eigenen Probleme ist zu zeitintensiv und fördert nur bedingt das eigene Wissen. Empfehlenswert ist die beispielsweise die bereits angeführte Übersicht von Herrn Kropp.

http://www.pik-potsdam.de/~kropp/service/html/html/referenz/elemente.htm

Hier sind die HTML-Elemente direkt mit mit den Attributen und Beispielen verknüpft und liefern so eine übersichtliche Hilfe.

Detlev Maas: HTML-CSS TG11i 14
Detlev Maas: HTML-CSS TG11i
14
HTML-Referenz -2 table Testen Sie die Hinweise zu Beschreibung und Attribute selbst aus! Detlev Maas:

HTML-Referenz -2

table

HTML-Referenz -2 table Testen Sie die Hinweise zu Beschreibung und Attribute selbst aus! Detlev Maas: HTML-CSS
HTML-Referenz -2 table Testen Sie die Hinweise zu Beschreibung und Attribute selbst aus! Detlev Maas: HTML-CSS

Sortierte und unsortierte Listen

Wie das nachfolgende Fragment zeigt, werden:

• sortierte Listen werden in die Tags <ol> </ol> eingebettet,

• unsortierte Listen werden in die Tags <ul> </ul> eingebettet,

• anschließend können die Aufzählungszeichen mit den Tag<li> </li>erzeugt werden.

<ol> <li>TG <ul> <li>Informationstechnik </li> <li>Elektro- und Metalltechnik </li> </ul> <li>BK <ul> <li>Einjähriges BK Technik-I </li> <li>Einjähriges BK Technik-II (Gestaltungstechnik) </ul> <li>BFS </li> </ol>

k-II (Gestaltungstechnik) </ul> <li>BFS </li> </ol> Detlev Maas: HTML-CSS TG11i 16
Listen: Übungen 1. Erstellen Sie ein HTML-Dokument „ue1_listen.html“ mit dem Inhalt der vorhergehenden Folie. 2.

Listen: Übungen

1. Erstellen Sie ein HTML-Dokument „ue1_listen.html“ mit dem Inhalt der vorhergehenden Folie.

2. Testen Sie Ihr Ergebnis.

3. Erstellen Sie ein neues HTML-Dokument „listen_tg-faecher.html“, in dem die TG-Fächer in einer sortierten Liste dargestellt werden. Sicher können Sie die Fächer Informationstechnik und Computertechnik mit einer unsortierten Liste noch weiter gliedern.

4. Wenden Sie erforderlichen Attribute an, damit die Liste wie nebenstehend formatiert wird.

 

5. Die Fachbezeichnung „CT“ soll grün erscheinen. Ändern Sie das Element entsprechend ab, aber verwenden Sie unbedingt die css-konforme Darstellung mit dem span-tag (vgl. nächste Folie).

Das font-Element Die folgenden HTML-Elemente zu Schrif tgröße, Schriftfarbe und Schriftart sollen in Zukunft aus

Das font-Element

Die folgenden HTML-Elemente zu Schriftgröße, Schriftfarbe und Schriftart sollen in Zukunft aus dem HTML-Standard entfernt werden:

<font size="7">Ziemlich riesiger Text</font> <font color="#FF0000">Knallrotes Gummiboot</font> <font face="Avalon,Wide Latin">Das ist Text in Schriftart Avalon. </font>

Bevor man aber ganz auf sie verzichtet sollte man lieber die css- Entsprechungen benutzen:

<span style="font-size:250%">Ziemlich riesiger Text</span> <span style="color:#FF0000">Knallroter Text</span> <span style="font-family:Avalon,Wide Latin">Das ist Text in Schriftart Avalon </span>

Beachten Sie dazu die Aufgabe auf vorhergehenden Folie.

Tabellen Tabelle werden durch das Tag <table> eröffnet. Das Tags <th> (head) eröffnet einen

Tabellen

Tabelle werden durch das Tag <table> eröffnet. Das Tags <th> (head) eröffnet einen Spaltenkopf. Die Tags <tr> (row, Reihe) eröffnen eine neue Spalte. Die Tags <td> (table data) eröffnen eine neue Zeile.

<table> <tr> <td>Feld 11</td> <td>Feld 12</td> <td>Feld 13</td> </tr> <tr> <td>Feld 21</td> <td>Feld 22</td> <td>Feld 23</td> </tr> </table>

22</td> <td>Feld 23</td> </tr> </table> Detlev Maas: HTML-CSS TG11i 19
Tabellen: Übunge n 1 1. Erstellen Sie die Tabelle der Fo lie Tabellen-1. Speic her

Tabellen: Übungen 1

1. Erstellen Sie die Tabelle der Folie Tabellen-1. Speichern Sie das Dokument unter „tabellen1.html“.

2. Nehmen Sie folgende Veränderungen an der Tabelle „tabellen1.html“ vor. Speichern Sie das Ergebnis jeder Teilaufgabe unter „tabellen1x.html“, wobei das „x“ für die jeweilige Teilaufgabe steht.

a) Die Tabelle soll die Überschrift „Übungstabelle“ erhalten.

b) Die Überschrift soll in der Farbe rot und fett in der Schriftgröße 110% geschrieben werden.

c) Die Spalten sollen die Spaltenköpfe mit den Inhalten Spalte 1, Spalte 2 und Spalte 3 erhalten.

d) Bauen Sie Gitternetzlinien in die Tabelle ein.

e) Der Abstand Feldinhalt zur Gitternetzlinie soll 5px betragen!

f) Der Feldinhalt der Spalte 2 soll hellrot (#ff8080) unterlegt sein.

g) Der Abstand zwischen den Zellen untereinander soll 3px betragen.

Tabellen: Übungen 2 Analysieren Sie die unbekannten style- Attribute. Speichern Sie die Tabelle unter

Tabellen: Übungen 2

Analysieren Sie die unbekannten style-Attribute. Speichern Sie die Tabelle unter „tabellen2.html“ und testen Sie die Tabelle.

<table style="text-align: left; height: 80px; width: 182px;" border="1" cellpadding="2" cellspacing="2"> <tr> <td style="width: 50px;">Feld 11</td> <td style="width: 50px;">Feld 12</td> <td style="width: 50px;">Feld 13</td> </tr> <tr> <td style="width: 50px;">Feld 21</td> <td style="width: 50px;">Feld 22</td> <td style="width: 50px;">Feld 23</td> </tr> </table>

style="width: 50px;">Feld 23</td> </tr> </table> Detlev Maas: HTML-CSS TG11i 21
Tabellen: Übungen 3 Häufig sollen gerade in Tabellenköpfen Zeilen oder Spalten miteinander verbunden werden (zu

Tabellen: Übungen 3

Häufig sollen gerade in Tabellenköpfen Zeilen oder Spalten miteinander verbunden werden (zu einem Feld zusammengefasst werden).

1. Erstellen Sie mit NVU eine Tabelle (2 Zeilen, 3 Spalten) und verbinden jeweils zwei nebeneinander und zwei übereinander liegende Tabellen.

2. Analysieren Sie den HTML-Code und erklären Sie, welche Attribute für das Zusammenfassen jeweils verwendet werden müssen.

3. Fügen Sie an die Tabelle „tabellen2.html“ eine weitere Zeile an, verbinden Sie die drei Spalten und fügen Sie den Text „Ende der Tabelle“ ein. Speichern Sie das Ergebnis unter „tabellen2a.html“.

4. Zentrieren Sie den Text der letzten Zeile.

Grafiken einbinden Das Einbinden von Grafiken und Bildern erfolgt über das img-Tag. Sollte die Grafik

Grafiken einbinden

Das Einbinden von Grafiken und Bildern erfolgt über das img-Tag. Sollte die Grafik nicht im gleichen Verzeichnis wie die HTML-Datei gefunden werden, wird der Text gemäß dem alt-Attribut angezeigt.

<img src=„Festplatte.jpg" alt=„Festplatte" />

Es gibt drei verschiedene Arten von Bildtypen, die man in eine Internetseite einbinden kann:

• GIF (Graphics Interchange Format)

• JPG ( JPEG (Joint Photographic Experts Group)

• PNG (Portable Network Graphics)

Aufgabe: Beschreiben Sie knapp die drei Grafik-Formate und geben Sie ihre Vor-und Nachteile an (Farben, Dateigröße, Downloadgeschwindigkeit, zu

bearbeiten mit welchen Programmen,

)

Grafiken: Übungen 1. Öffnen Sie das Dokument tabellen1g.html und speichern Sie es unter grafiken1.html .

Grafiken: Übungen

1. Öffnen Sie das Dokument tabellen1g.html und speichern Sie es unter

grafiken1.html.

2. Vergrößern Sie die Felder 12 und 22 auf eine Breite von 200px und eine Höhe von 150px.

3. Der Feldinhalt soll horizontal und vertikal zentriert werden.

4. Kopieren Sie in Ihren images-Ordner die Bilder flower.jpg und

festplatte.jpg.

5. Fügen Sie die beiden Grafiken in das Dokument grafiken1.html in die Felder 12 und 22 ein.

6. Positionieren Sie den Text Feld 12 bzw. Feld 22 horizontal zentriert unter die jeweilige Grafik.

7. Die Grafik festplatte.jpg ist zu groß für ihr Feld. Bearbeiten Sie die Grafik mit dem Programm IrfanView unter Beibehaltung der Proportionen auf eine Breite von 200px.

Verweise (Links) Links ermöglichen Sprünge durch Klicken auf hervorgehobene (normalerweise farbig und unte rstrichen)

Verweise (Links)

Links ermöglichen Sprünge durch Klicken auf hervorgehobene (normalerweise farbig und unterstrichen) Textabschnitte zu:

1. einer bestimmten anderen HTML-Seite im Internet,

2. einer bestimmten anderen HTML-Seite im selben Verzeichnis,

3. einer bestimmten anderen HTML-Seite in einem anderen Verzeichnis,

4. einem bestimmten Abschnitt (Kapitel, etc.) auf derselben (oder einer anderen) HTML-Seite.

Alle Links sind im Prinzip gleich aufgebaut:

• <A HREF="Zieladresse">Verweistext</A>

• <A HREF="http://www.metager.de">Suchmaschine der Hochschulen</A>

• <A HREF="file:///H:/html/Eigene Webseiten/uebungen.html">Hier geht's zu meinen Übungen</A>

• <A HREF=„./uebungen.html">Meine Übungen im gleichen Ordner</A>

Verweise: Anker erstellen

Um in einem HTML-Dokument an eine bestimme Textstelle springen zu können, müssen im Zieldokument so genannte Anker eingefügt werden.

Beispiel: Sie möchten von einem HTML-Dokument direkt an das Ende des Dokuments „tabellen1.html“ verlinken.

1. Sie müssen also zuerst im Zieldokument (hier tabellen1.html) an der gewünschten Stelle einen Anker erstellen, z.B.:

<p><a name=„Ende“></a> Ende des Dokuments </p>

2. Den Link zu dieser Ankerstelle erstellen erstellen Sie im Quelldokument dann wie folgt:

<a href=„file:///h:/html/tabellen1.html#Ende“>Zum Ende der Tabellen</a> Je nach Browser gelingt auch: <a href=„h:/html/tabellen1.html#Ende“>

3. Was bewirkt <a href=„tabellen1.html#Fächer“>

Verweise: Übungen 1. Öffnen Sie das Dokument tabelle1g.html zum Bearbeiten und speichern Sie es unter

Verweise: Übungen

1. Öffnen Sie das Dokument tabelle1g.html zum Bearbeiten und speichern Sie es unter links.html.

2. Verändern Sie das Dokument so, dass es die nachfolgende Tabelle abbildet und die Verlinkung funktioniert. Beginnen Sie mit den ersten beiden Zeilen, dann testen usw.

Verlinkung funkti oniert. Beginnen Sie mit den ersten beiden Zeilen, dann testen usw. Detlev Maas: HTML-CSS

Web-Sites: Strukturieren !

Information aufteilen in einzelne Blöcke und diese miteinander verknüpfen:

in einzelne Blöcke und diese miteinander verknüpfen : kurze Liste: für kleine Sites geeignet Hierarchie: der

kurze Liste: für kleine Sites geeignet

verknüpfen : kurze Liste: für kleine Sites geeignet Hierarchie: der Normalfall für größere Sites Quelle:

Hierarchie: der Normalfall für größere Sites

Quelle: http://www.educeth.ch/informatik/grundkurs/homepage.html