HTML Teil1

Verfügbare Informationen zu "HTML Teil1"

Qualität des Beitrags:
Beteiligte Poster: prasu2926
Forum: UbuntuZone
Forenbeschreibung: Always Free
aus dem Unterforum: Workshops
Antworten: 1
Forum gestartet am: Donnerstag 23.11.2006
Sprache: deutsch
Link zum Originaltopic: HTML Teil1
Letzte Antwort: vor 17 Jahren, 4 Monaten, 30 Tagen, 2 Stunden, 6 Minuten

Alle Beiträge und Antworten zu "HTML Teil1"

Re: HTML Teil1

prasu2926 - 23.11.2006, 23:21

HTML Teil1

-----------------------------------
Inhaltsverzeichnis
-----------------------------------
1.1 Hallo
1.2 Wieso dieser Kurs?
1.3 Das Motto des Kurses
1.4 Das Ziel dieses Kurses
1.5 Was brauchst du?

2.1 Es geht los!
2.2 Tags als Steuerbefehle
2.3 Eine Grafik einfügen
2.4 Übungen...
2.5 Deine erste Aufgabe: Ein Selbstportrait
2.6 Mach ne Pause!

3.1 Hyperlinks
3.2 Dein erster Link
3.3 Externe Links
3.4 Externe Links auf einer neuen Seite aufrufen
3.5 Das Attribut <title>
3.6 Eine kleine Übung
3.7 Der E-Mail - Link
3.8 Ein E-Mail - Link mit Betreff
3.9 Was kommt jetzt wohl ...

4.1 Gestaltung mit CSS
4.2 Es gilt das Kaskadenprinzip
4.3 Anschnallen!
4.4 Die fünf Sammelbezeichnungen
4.5 Schriftgewicht - , stil, und Unterstreichung
4.6 Zusammenfassung der ersten Befehle
4.7 Die nächsten Kapitel

5.1 Weiter geht's
5.2 Textausrichtung, Zeilenabstand und Erstzeileneinzug
5.3 Farben...
5.4 Farben zuweisen
5.5 Style Sheets im HEAD notieren
5.6 Das reicht!

6.1 Einfache Rahmen
6.2 Lösung mit Inline-CSS
6.3 Seperate Stilklassen notieren
6.4 Notation für ungebundene Klassen
6.5 Weitere Rahmen - Attribute
6.6 Vier Pseudo - Klassen für Links
6.7 <span>
6.8 Externe CSS-Datei erstellen
6.9 Externe CSS-Datei einbinden

7.1 Unser letztes Kapitel: Tabellen und Frames
7.2 Tabellen
7.3 Kopfzeile
7.4 Breite und Höhe der Tabelle
7.5 Übung zu Tabellen
7.6 Frames - Vorbetrachtung
7.7 Frames - Erstellung
7.8 Das target - Attribut
7.9 Übung: Erstellen eines Framesets mit Zeilen
7.10 Frameset verschachteln
7.11 Zum Schluss noch eine Abschluss...
7.12 Der Kurs ist zu Ende...
-----------------------------------

1.1 Hallo

Dies ist ein LERN - Workshop zu HTML und CSS. Er enthält viele Beispiele, Übungen und Aufgaben, die ich alle online gestellt habe. Zu vielen Beispielen (Übungen sowieso) gibt es auch noch Screenshots.

1.2 Wieso dieser Kurs?

Das werden sich einige fragen. "Es gibt doch schon zig HTML - und CSS - Einsteigerkurse!" - Stimmt, aber die meisten sind für Anfänger viel zu schwierig, besitzen Fehler, sind viel zu kurz (so dass man nicht in der Lage ist ansatzweise eine einfache Seite zu erstellen!), andere sind zwar umfangreich, aber eher eine Referenzsammlung als ein Workshop. Und nur mit der SelfHTML kommt man auch auf keinen grünen Zweig...

Deshalb habe ich mich entschlossen diesen KURS zu schreiben und hoffe, dass allen Interessierten ein Einstieg in die Erstellung von Webseiten ermöglicht wird! Deshalb fangen wir erst mal ganz klein an...

1.3 Das Motto des Kurses

Weniger ist mehr! Ich verzichte größtenteils auf Worterklärungen wie HTML, CSS, Homepage, Website usw. , da dies den Rahmen des Kurses sprengen würde und zum Verständnis des Inhalts nicht nötig ist...

1.4 Das Ziel dieses Kurses

Du wirst in der Lage sein einfache, halbwegs attraktive Webseiten zu erstellen. Außerdem solltest du nach Absolvieren dieses Kurses keine Schwierigkeiten mit speziellen, weiterführenden Workshops und Artikeln zu HTML und CSS mehr haben!

1.5 Was brauchst du?

- Einen Browser (Anzeigeprogramm), wie den Internet Explorer, Netscape Navigator oder Opera Browser
- Einen Editor wie Notepad, Homesite, Super HTML, Weaversleave usw. Ich verwende bei den Beispielen Notepad, weil es in Windows enthalten ist.

Du solltest außerdem mit Windows (bzw. deinem Betriebssystem - ich werde aber mit Win arbeiten) umgehen können und wissen, wie man Ordner erstellt und deinen Browser aufruft (wenn nicht schreib mir ne PN, ich werde es nachliefern!).

Bitte blende außerdem die - von Windows standardmäßig ausgeblendeten - Dateiendungen ein. Du weißt nicht wie das geht? Hier eine Beschreibung:

- Unter Windows 98 wählst du START --> EINSTELLUNGEN --> ORDNEROPTIONEN
- In Win XP geht das über START --> (ALLE) PROGRAMME --> SYSTEMSTEUERUNG --> ORDNEROPTIONEN

Hat es geklappt? Gut, dann gehe ins Register ANSICHT ! Suche nach einer Option, die "Dateinamenerweiterungen" bzw. "Erweiterung bei bekannten Dateitypen ausblenden" heißt. Nimm das Häkchen weg und klicke auf OK.

2.1 Es geht los!

Auf los geht's los! Erstelle einen Ordner namens "homepage" (du kannst natürlich auch einen anderen Namen verwenden). Klicke im noch leeren Ordner mit der rechten Maustaste und Wähle NEU --> TEXTDATEI und gebe den Namen "kurs1.html" ein (schreibe am besten immer klein). Die Warnmeldung einfach mit [ JA ] bestätigen! Dann öffne Notepad mit START --> AUSFÜHREN --> NOTEPAD (eintippen) und öffne die Datei.

[ Alternativ kannst du auch die Datei anklicken, SHIFT gedrückt halten, mit der rechten Maustaste "Öffen mit" anklicken und den Editor (Notepad) auswählen. ]

Hoffentlich hat es geklappt und dein noch leeres Dokument liegt vor dir!? Schreibe bitte folgende Codezeilen ab (ich werde sie danach erläutern):

[ Beispiel ] [ Screenshot ]

<html>
<head>
<title>Schau mal in die Titelzeile des Browsers!</title>
</head>
<body>
Hier steht der Text. Du kannst ihn nicht übersehen...
</body>
</html>

Speichern nicht vergessen! :-) Und jetzt schaue dir das Dokument einmal im Browser an!

Mit <html></html> wird das gesamte Dokument umschlossen. Danach folgt der HEAD - Bereich, in ihm befindet sich der Seitentitel TITLE . Schau einmal in die Titelzeile - dort erscheint das, was zwischen <title> und </title> steht. Innerhalb von <body></body> (Körper) steht der Inhalt, dein Text.

Das war deine erste Seite. Verinnerliche das Gelernte, dann machen wir weiter!

2.2 Tags als Steuerbefehle

Zum "Gestalten" brauchst du die Tags, die Steuerbefehle, welche in spitzen Klammern (wie HTML, BODY usw.) stehen. Machen wir gleich ein Beispiel. Speichere es unter "lern2.html":

[ Beispiel ] [ Screenshot ]

<html>
<head>
<title>Überschriften, Absätze, Zeilenumbrüche, Aufzählungen ...</title>
</head>
<body>
<h1> Eine SEHR große Überschrift</h1>
<p>Ich bin ein <b>Absatz</b>. <i>Text</i> sollte immer in <u>Absätzen</u> stehen.<br>
Ich bin eine Zeile tiefer.</p>
<h2>Ich bin nicht ganz so wichtig</h2>
<ul>
<li>Ein Aufzählungspunkt</li>
<li>Noch einer!!</li>
</ul>
</body>
</html>

Das musst du nicht auf Anhieb verstanden haben, ich versuche es verständlich zu erklären:

Das HTML - Gerüst aus HTML, HEAD, TITLE und BODY dürfte klar sein, oder? (Wenn nicht, schau dir das letzte Beispiel nochmal an!)

H1 ist eine Hauptüberschrift und H2 eine Unterüberschrift, die eine kleinere Schriftgröße als H1 hat. Es gibt 6 (von H1 - H6) von der Größe her abgestufte Überschriften (mehr gibt es nicht, H7 zum Beispiel ist ein ungültiger Tag!). H6 ist ziemlich klein...

Der Inhalt, welcher in dem Tag <p></p> (denke auch an das Ausschalttag) steht spricht für sich. Es ist ein Absatz. Denke daran, jeglicher Text sollte innerhalb von Absätzen notiert werden!

<br> (break) ist - wie du bestimmt gemerkt hast - ein Zeilenumbruch. Nicht der Zeilenumbruch im Quelltext ist dafür verantwortlich, er dient nur der Übersichtlichkeit! Du kannst auch 3 oder keinen Absatz machen - probiere es aus, du wirst sehen, dass das Resultat dasselbe ist. Mehr als ein Leerzeichen im Quelltext wird ignoriert. Du hast mein Geschwafel nicht verstanden? OK, war auch umständlich beschrieben...merke dir einfach, dass Umbrüche im Quellext dem Browser scheiß egal sind, nur die Tags zählen!

Was zwischen <b> und </b> (für bold) steht wird fett ausgegeben, zwischen <i></i> (für italic) kursiv und zwischen <u> und </u> (für underline) unterstrichen - ich denke du kannst es gut nachvollziehen! Denke an die Ausschalttags!

UL (unordered list) ist eine Aufzählung. Jeder Eintrag steht innerhalb von <li></li>. Kapiert? Gut, jetzt ändere doch einmal <ul> (und natürlich auch den Ausschalttag) in <ol> bzw. </ol>. Was passiert? Es entsteht eine Numerierung (1, 2, 3 ... )!

2.3 Eine Grafik einfügen

Jetzt kennst du die wichtigsten Tags! Ein sehr wichtiger fehlt aber noch: <img> - damit fügst du eine Grafik ein.

Kurz zu den Formaten: Deine Bilder sollten BITMAP - Dateien sein, die Formate lauten GIF (Endung .gif), JPEG (Endung meistens .jpg) und PNG (Endung .png).

PNG solltest du aber nach Möglichkeit nicht benutzen, da es recht neu ist und nicht von allen Browsern unterstützt wird. Verwende für Buttons und einfache Logos (wenige Farben) das GIF - Format, für Bilder JPEG.

Hast du eine schöne Grafik? Wenn nicht kannst du gerne [ diese ] benutzen (ich bin Schlagzeuger :) ! Kopiere sie in den HOMEPAGE - Ordner.

Grafiken werden in HTML - Seiten per Verknüpfung eingebunden (nicht wie z.B. in Word gespeichert). Tippe folgenden Quelltext in deinen Editor und speichere die Datei mit "lern3.html":

[ Beispiel ] [ Screenshot ]

<html>
<head>
<title>Eine Grafik</title>
</head>
<body>
<p>Schau mal, ein schönes Bild!</p>
<p><img src="drums.jpg"></p>
</body>
</html>

Wir benutzen zum Verknüpfen das Kürzel img (für image), in den Anführungsstrichen von src (für source) steht der Bildname - wenn deine Grafik einen andern Namen hat musst du src (bzw. was in seinen Klammern steht) entsprechend ändern - ist logisch, oder?

Das wars eigentlich schon (alles Folgende sind Schönheitssachen).

Füge einmal align="right" in <img> ein, also so <img src="drums.jpg" align="right">

Die Abbildung marschiert nach rechts! Du kannst sie auch links ausrichten, ersetze right hierzu doch einmal durch left (links)!

Hat alles geklappt? Wenn nicht, untersuche deinen Quelltext auf Fehler und prüfe, ob die Grafik sich wirklich im gleichen Ordner befindet!

Weiter im Takt (oh nein...das sagt mein schrecklicher Mathelehrer immer... *g* )! Füge noch die Attribut - Werte WIDTH (Breite) und HEIGHT (Höhe) hinzu! Nimm dafür die Maße deines Bildes (die findest du raus, indem du die Grafik im Browser rechtsklickst und auf Eigenschaften gehst. - Bei mir sind es 280 x 174 px (Pixel).

<img ... width="280" heigth="174">

Es hat sich (wenn alles geklappt hat) nichts verändert, wozu brauchen wir denn diese Attribute?? - Damit sicherst du, dass die Breite und Höhe des Bildes von Anfang an feststeht. Man bleibt vom hässlichen (und unprofessionellen) "Springen" der Bilder beim Laden verschont!

Das letzte Attribut, welches du einfügen sollst, ist ALT (bitte nicht temporär verstehen... :)

<img ... alt="Ein schönes Schlagzeug">

Es ist ein Alternativtext, welcher das Bild beschreibt. Benutzer mit abgeschalteter Bildanzeige sehen wenigstens diesen Alternativtext (und können erahnen was sie verpasst haben :P). Auch wenn du den Mauszeiger eine Weile über der Grafik parkst sollte dieser Text erscheinen.

Puh, jetzt haben wir alles! :-) Vergleiche, ob du nichts vergessen hast:

<img src="drums.jpg" align="right" width="280" height="174" alt="Ein schönes Schlagzeug!">

2.4 Übungen...

Höchste Zeit, dass du selber eine Übung machst! Übungen festigen das Gelernte und du kannst überprüfen, ob du alles verstanden hast - mache sie also bitte! Orientiere dich an meinen Screenshots. Wenn du einmal gar nicht mehr weiterweißt vergleiche mit der Lösung! Erstelle am besten in HOMEPAGE einen Ordner namens "uebungen".

2.5 Deine erste Aufgabe: Ein Selbstportrait [ Lösung ] [ Screenshot ]

Anleitung: Erstelle ein HTML - Dokument, welches du unter dem Namen "u1.html" speicherst. Der Seitentitel soll "Ich stelle mich vor!" lauten!

Oben soll eine riesige Überschrift (H1) mit dem Text "Willkommen bei [dein Name]" stehen, dann ein Absatz, in welchen du ein, zwei Sätze über dich hineinschreibst. Er sollte nach Möglichkeit einen Zeilenumbruch (<br>) enthalten. Dann machst du eine weitere Überschrift, diesmal etwas kleiner (H2) mit dem Titel "Meine Hobbys". Unter dieser erstellst du eine Aufzählung (geordnet oder ungeordnet ist egal) mit - der Titel der Überschrift sagt es schon - deinen Hobbys.

Zum Schluss machst du noch eine kleinere Überschrift (H3 oder H4), welche "Ein Bild" lauten soll. Binde ein Bild ein, denke auch an die Attribute HEIGHT, WIDTH und ALT. Richte außerdem die Grafik links aus (auch wenn sie das schon sein sollte)!

2.6 Mach ne Pause!

Sieht es ungefähr (wir wollen ja nicht pingelig sein) so aus wie auf meinem Screenshot?

Na dann herzlichen Glückwunsch! Und: Gönn dir ne Pause! :)

3.1 Hyperlinks

So, ich hoffe du hast dich erholt und Lust weiterzulesen! Im dritten Kapitel dreht sich alles um Links, die Kreuz- und Querverweise, durch die das Web erst so richtig lebendig wird. [ Oder würde es dir gefallen, wenn große Websteiten wie Piranho nur aus einer Seite bestünden? Und diese dann in gedruckter Forum mehrere hundert Din A4 Seiten umfassen würde? - Bestimmt nicht! ]

3.2 Dein erster Link

Erstelle ein Dokument mit dem mit dem Namen "lern4.html" und schreibe das hinein:

[ Beispiel ]

<html>
<head>
<title>Unser erster Link</title>
</head>
<body>
<p>Klicke <a href="lern3.html">hier</a>!</p>
</body>
</html>

Die Grundsyntax für Hyperlinks sieht so aus:

<a href="Dateiname.endung">Link</a>, bei uns also z.B. <a href="lern3.html">Link</a>.

Benutze das <a> - Tag ( A steht für Anchor --> Anker) und verwende das Attribut href (hyper reference --> Querverweis). Gar nicht so schwierig, oder?

Wenn wir den Link im Browser anklicken, kommen wir zu einer früheren Übung unseres Kurses! Ist natürlich nicht sonderlich nützlich, da wir auf dieser keinen Link zu unserem LERN 4 - Dokument haben. Benutze den [ Zurück ] - Button des Browsers wenn du zurrückkehren willst.

Hm, du hast es immer noch nicht verstanden? Macht nichts, wir setzen gemeinsam einen Link, okay? :-)

[ Die Leser, welche es schon verstanden haben können versuchen dieses Beispiel alleine zu erstellen: Einen Link zur Datei "lern4.html" ! ]

Tippe folgendes in die Datei "lern5.html":

[ Beispiel ]

<html>
<head>
<title>Du schaffst das schon!</title>
</head>
<body>
<p>

Ein toller Link

</p>
</body>
</html>

Schauen wir uns einmal nur den Inhalt des Absatzes an (die Absätze im Quelltext dienen nur der Übersichtlichkeit).

Ein toller Link

Daraus soll ein Link werden, wir stricken deshalb den <a> - Tag drumherum

<a>Ein toller Link</a>

Das ist doch verständlich, oder? Allerdings kommen wir so nicht sehr weit, klicke den Link doch einmal im Browser an! Wir setzen noch den Verweis auf die Datei "lern4.html" in das <a> - Tag, es sieht also jetzt insgesamt so aus:

<a href="lern4.html">Ein toller Link</a>

Das ist war alles! Jetzt hast du es wenigstens einigermaßen verstanden? Und die etwas (oder viel) schnelleren Leser haben den Link auch alleine hinbekommen? Ist ja super!!! :)

3.3 Externe Links

Natürlich kannst du auch externe Links setzen, die dann auf andere Webseiten verweisen, erstellen. Machen wir gleich ein Beispiel, einverstanden? Nenne die Datei "lern6.html":

[ Beispiel ] [ Screenshot ]

<html>
<head>
<title>Ein externer Link</title>
</head>
<body>
<p>
<a href="http://www.michaelborsum.de">www.michaelborsum.de</a> - meine Page<br>
<a href="http://www.odc-band.de">Die Seite meiner Band</a>
</p>
</body>
</html>

Alles ist genau gleich aufgebaut wie beim "normalen" Link. Du schreibst einfach die Adresse, auf die du verweisen möchtest, zwischen die Anführungszeichen. Denke an das http:// im eigentlichen Link - in der Bezeichnung (das was zwichen <a> und </a> steht) kannst du auch hier angeben was du willst - wie der zweite Link zeigt...

3.4 Externe Links auf einer neuen Seite aufrufen

Klicke einen der Links im Browser an. Klar, du wirst zu der gewünschten Website weitergeleitet, das war ja auch der Sinn. Aber wo ist deine Seite, unser Beispiel?! Die Antwort lässt nicht lange auf sich warten, sie ist nicht mehr da. Es wäre doch gut, wenn unsere Seite im Hintergrund geöffnet bliebe, nicht wahr?

Setze dazu das Attribut - Werte - Paar target="_blank" (Unterstrich nicht vergessen) in das <a> - Tag, also so:

<a href="http://www.michaelborsum.de" target="_blank">www.michaelborsum.de</a> - meine Page<br>
<a href="http://www.odc-band.de" target="_blank">Die Page meiner Band</a>

Und schon werden die Seiten in einem neuen Fenster geöffnet! :-)

3.5 Das Attribut <title>

Soll dein Link mit einer Kurz - Info beim Darüberfahren versehen werden? Verwende hierfür das Attribut TITLE! Was zwischen den Anführungsstrichen steht steht wird später beim Berühren des Links als Info angezeigt (wir bearbeiten immer noch das gleiche Beispiel).

<a ... title="Meine Page - *Schleichwerbungmach* ;) ">www.mi ...

<a ... title="Super Bandpage">Die P ...

3.6 Eine kleine Übung [ Lösung ] [ Screenshot ]

So, jetzt ist es wieder mal Zeit für eine Aufgabe!

Erstelle eine Seite namens "u2.html", den Seitentitel kannst du dir frei aussuchen. Ganz oben sollen eine Überschrift erster Ordnung (also H1) mit dem Titel "Tolle Links" stehen, darunter eine ungeordnete Aufzählung mit mindestens 3 Webseiten deiner Wahl. Sie sollen in einem neuen Fenster geöffnet werden (target="_blank")! Außerdem soll beim Darüberfahren die eine kleine Textfolge, die die Seite beschreibt, zu sehen sein (heißer Tipp: Attribut TITLE).

3.7 Der E-Mail - Link

Du willst eine Feedbackmöglichkeit einbauen? Klar, schließlich sollen deine Besucher mit dir Kontakt aufnehmen können (oder etwa nicht?) ! Schreibe Folgendes in die Datei "lern7.html":

[ Beispiel ]

<html>
<head>
<title>E-mail Feedback</title>
</head>
<body>
<p>
<a href="mailto:contact@michaelborsum.de">Schreib mir ne Mail!</a>
</p>
</body>
</html>

Für contact@michaelborsum.de setzt du am besten deine E-Mailadresse ein - das Beispiel funktioniert aber natürlich auch so. Achte darauf, dass zwischen mailto und der Adresse kein Leerzeichen stehen sollte.

Nach einem Klick auf den Link wird dein E-Mailprogramm gestartet (vorausgesetzt es ist richtig eingerichtet!). Die Empfängeradresse (bei mir contact@michaelborsum.de) wird sofort eingetragen! Praktisch, nicht? Allerdings können einige Besucher mit diesen E-Mail - Links nicht anfangen, weil sie ihre Mails über eine Webseite (wie GMX, Yahoo, Freenet) managen oder Surfer in Internet-Cafés - hier fehlt das E-Mail - Programm.

[ Die professionellere Feedback - Methode erfolgt über Formulare - ich werde in diesem Kurs aber nicht darauf eingehen... ]

3.8 Ein E-Mail - Link mit Betreff

Du willst deinen E-Mail - Link mit einem Betreff (Subject) versehen? Den Wunsch können wir auch erfüllen!

<a href="mailto:contact@michaelborsum.de?subject=Der Betreff">Schreib mir ne Mail!</a>

Setzte Setze ein Fragezeichen und die Anweisung subject= und schreibe deinen Betreff dahinter!

Man kann noch viel mehr machen, beispielsweise CC - Empfänger (Durchschlag), BBC - Empfänger (Blindkopie) bestimmen oder die Angabe eines Textkörpers...

Auch das TARGET - Attribut besitzt noch viele weitere Werte, wir gehen in diesem Kurs aber nicht weiter darauf ein - das würde zu weit führen! Wenn du mehr wissen willst, schreibe mir doch einfach eine Mail, ich würde mich freuen... :)

3.9 Was kommt jetzt wohl ... [ Lösung ]

... 3 Mal darfst du raten: Klar wieder eine kurze Übung. Nenne sie "u3.html" und fertige einen E-Mail - Link mit Betreff und Beschreibung an. Beschreibung? Ja, Das Attribut TITLE lässt sich auch hier einsetzen! Wenn du nicht mehr weiterweißt vergleiche mit meiner Musterlösung.

4.1 Gestaltung mit CSS

Bevor wir uns weiteren HTML - Befehlen wie dem Erstellen von Tabellen oder Frames widmen, zeige ich dir die Grundlagen von CSS, den Cascading Style Sheets.

4.2 Es gilt das Kaskadenprinzip

Dies bedeutet einfach, dass die festgelegten Eigenschaften vom übergeordneten auf alle Untergeordneten Elemente vererbt werden. Die Elementeigenschaften haben aber Vorrang.

Das hast du bestimmt nicht verstanden, oder? Ich mache mal ein Beispiel: Du legst im BODY die Schriftart Verdana fest, diese Eigenschaft vererbt sich auf beinahe alle untergeordneten Tags: Will heißen alles was du in BODY reinschreibst bekommt die Schriftart Verdana zugewiesen [ Verwende bei Homepages serifenlose Schriftarten wie Arial oder Verdana, nicht z.B. Times New Roman. Serifen sind kleine Füßchen an den Enden der Zeichen. ] , beispielsweise Absätze (<p>), Links (<a>) und Aufzählungen (<ul> / <ol>). Weist du im gleichen Dokument einem Absatz die Schriftart Arial zu wird aber auch diese verwendet (was für ein Zufall) - nicht Verdana. Die BODY-Eigenschaft wird hier überschrieben.

4.3 Anschnallen!

Es geht wieder los. Nun weißt du, dass Befehle vererbt werden - aber was nützt dir das, wenn du nicht weißt wie man diese festlegt?

Also gleich ran an ein Beispiel, erstelle bitte die Datei "lern8.html":

[ Beispiel ] [ Screenshot ]

<html>
<head>
<title>Schriftart - und Größe</title>
</head>
<body style="font-family: Verdana, sans-serif; font-size: 10pt;">
<p>Endlich serifenlose Schrift...</p>

<ul>
<li>...auch</li>
<li>bei</li>
<li>Aufzählungen!</li>
</ul>

</body>
</html>

Wir legen die Eigenschaften im BODY fest, so werden sie fast uneingeschränkt vererbt:

Zum Zuweisen von Stil - Eigenschaften benutzt man das style - Attribut! In seinen Anführungszeichen stehen die Eigenschaften. Zum Festlegen der Schriftart verwendest du das Attribut font-family, nach einem Doppelpunkt (kein =) gibst du als Wert den Namen der Schriftart (bei uns Verdana) an. Es empfiehlt sich nach dem Attribut (hier: font-family) ein Leerzeichen zu setzen.

4.4 Die fünf Sammelbezeichnungen

Bisher hast du alles verstanden? Aber was ist denn bitte sans-serif?!?

Du solltest immer eine übergeordnete Alternativschrift angeben! Es kann nämlich sein, dass auf dem Besucher - Rechner die angegebene Schriftart nicht installiert ist (weil er z.B. ein anderes Betriebsystem hat) - deshalb die Sammelbezeichnung sans-serif.

Und diese gibt es:

|| Wert >> Beschreibung ||

|| sans-serif >> serifenlose, sachliche Schrift wie Arial, Verdana ||
|| serif >> Serifenschrift wie Times New Roman ||
|| cursive >> kursiv geschwungene Schrift ||
|| monospace >> Schriftart mit fester Schrittweite (Courir) ||
|| fantasy >> "Fantasyschrift" ||

Am Ende eines Attributes steht ein Semikolon (Strichpunkt).

Anmerkung: Wenn die Namen der Schriftarten lang wie Times New Roman oder Comic Sans MS solltest du diese in einfache Anührungszeichen setzen.

< ... style="font-family: 'Times New Roman';">

Mit font-size legst du die Schriftgröße fest, wir haben 10 Punkt (pt) gewählt. Du kannst sie auch in Pixel, Zentimeter, Millimeter, Zoll und noch weiteren Maßeinheiten angeben - ich empfehle dir allerdings nur die Verwendung von Punkt (pt) und Pixeln (px). Die anderen Einheiten sind für ein exaktes Layout ungeeignet...

Du willst halbe Punktwerte vergeben? Für 11.5 Punkt tippst du 11.5pt (Punkt, kein Komma).

4.5 Schriftgewicht - , stil, und Unterstreichung

Ich hoffe du hast den Einstieg in CSS verstanden (wenn nicht - wie schon tausendmal gesagt - kannst du mich gerne kontaktieren).

Machen wir gleich weiter! Du willst einen Text fett formatieren? Verwende dafür das Attribut font-weight und gibt als Wert bold an, also so

font-weight: bold;

Das sieht dann beispielsweise in einem Absatz so aus:

<p style="font-weight: bold;">Man bin ich fett!</p>

[ Anmerkung: Du kannst das fette Format auch abschalten, benutze dazu font-weight: normal; - dies ist z.B. nützlich wenn du einen ganze Seite fett formatiert hast und du beispielsweise einen Absatz normal aussehen lassen willst. ]

Du kannst eine Schrift auch kursiv formatieren, benutze das Attribut font-style! Und als Wert italic:

font-style: italic;

[ Auch hier kannst du mit dem Attribut normal (font-style: normal; ) einen kursiven Stil abschalten. ]

Das alles ging bisher auch mit HTML, aber kann man mit HTML auch die (hier: Link) - Unterstreichung abschalten? Nein! Verwende dafür das Attribut Werte - Paar text-decoration: none;

Und so setzt du es in das <a> - Tag, den Link:

<a ... style="text-decoration: none;">

[ Auch hier kannst du die Eigenschaft auch aktivieren, mit text-decoration: underline; ]

4.6 Zusammenfassung der ersten Befehle

Nun fassen wir das Gelernte in einem Beispiel zusammen, ich hoffe so werden auch die letzten Unklarheiten beseitigt. Nenne die Datei "lern9.html":

[ Beispiel ]

<html>
<head>
<title>Schriftart und Unterstreichung</title>
</head>
<body style="font-family: Arial, sans-serif; font-size: 12pt;">
<p><a href="http://www.jojoeh-online.de" target="_blank" style="text-decoration:none;">Ein nicht unterstrichener Link!</a>...</p>
<p style="font-family: 'Comic Sans MS', fantasy; font-weight: bold; font-style: italic;">Dies Absatz erscheint kursiv, fett und in einer Comic - Schrift...</p>
</body>
</html>

Alles klar? Wenn nicht schaue dir nochmal die Erklärungen oben an!

4.7 Die nächsten Kapitel

Herzlichen Glückwunsch, du beherrscht die Grundlagen von CSS! :-) In den nächsten 2 Kapiteln lernst du weitere Eigenschaften und Befehle von CSS kennen. Weiterlesen lohnt sich!

5.1 Weiter geht's

Der Titel sagt alles - wir lernen viele weitere CSS-Attribute und Eigenschaften kennen: Textausrichtung, Zeilenabstand, Erstzeileneinzug, Farben, Hintergründe...

Das ganze kann man am besten anhand von Beispielen kennenlernen:

5.2 Textausrichtung, Zeilenabstand und Erstzeileneinzug

Tippe bitte folgenden Quelltext in die Datei lern10.html:

[ Beispiel ]

<html>
<head>
<title>Ausrichtung und Abstand</title>
</head>
<body style="font-family: Verdana, sans-serif; font-size: 9pt;">
<p style="text-align: center;">Das steht in der Mitte...</p>
<p style="text-align: right; line-height: 2.5">...und das rechts! <br>Hier brauchen wir etwas mehr Text, so dass du den <br>aufgelockerten Zeilenabstand<br>wahrnehmen kannst...</p>
</body>
</html>

Nun die Erklärung:
Mit text-align kann man Text (bei uns jeweils ein Absatz) vertikal ausrichten. Es gibt folgende Werte:

|| Wert >> Beschreibung ||

|| left >> links ||
|| right >> rechts ||
|| center >> zentriert ||
|| justify >> Blocksatz ||

Kommt dir das irgendwo her bekannt vor? Gut aufgepasst, wir hatten diese Werte (bis auf center und justify - letzteres geht bei einem Bild schlecht ;) alle schon beim <img> - Tag kennengelernt! Lässt du text-align weg, wird die voreingestellte Ausrichtung left verwendet - probiere es aus!

Mit line-height kannst du den Zeilenabstand einstellen. Als Wert kommen eine Angabe in Punkt (z.B. line-height: 20pt; ), eine Prozentangabe (z.B. line-height: 150%; ) oder ein relativer Wert (z.B. line-height: 2.5; ) - wie in unserem Beispiel - in Frage. Ich verwende das Attribut oft bei einem Menu, wenn die Links nicht so dicht aufeinander "gepresst" sein sollen!

Und der Zeileneinzug? Stimmt, er kam im Beispiel nicht vor, ich zeige es dir jetzt. Schreibe um einen Erstzeileneinzug von 15px zu erhalten:

<p style="text-indent: 15px;"> Hier gehört ein mehrzeiliger Text hinein...</p>

Wie du siehst geht dies mit dem Attribut text-indent. Danach kommt der Wert, auch hier empfehle ich dir nur Pixel (px) und Punkt (pt) zu verwenden! Die erste Zeile wird eingezogen...

5.3 Farben...

...machen deine Website erst so richtig schön. In HTML und CSS stehen dir bis zu 16,7 Millionen Farben zur Verfügung - wie auf deinem PC.

|| Jede Farbe wird durch einen hexadezimalen Farbcode bestimmt. Dieser beschreibt die Zusammensetzung aus den 3 Grundfarben rot, grün und blau. Die Syntax sieht so aus: #rrggbb (= rot rot grün grün blau blau). Die einzelnen Farbwerte werden von 0 bis 9, dann von a bis f (also so: 0 < 1 < 2 < 3 < 4 < 5 < 6 < 7 < 8 < 9 < a < b < c < d < e < f ) gekennzeichnet. Ein reines rot (bitte nicht verwenden) ist #ff0000, ein grün #00ff00 und blau dann natürlich #0000ff. Weiß ist #ffffff und schwarz #000000.

Du kannst auch Farbnamen wie "black", "red" und "green" angeben - ich habe aber vor allem beim Opera Browser schlechte Erfahrungen damit gemacht, benutze deshalb lieber den hexadezimalen Code!

Das beste ist, wenn du die so genannte Farb - Palette benutzt. Das sind 216 Farben, die auf allen Browsern und Betriebssystemen (fast) gleich dargestellt werden. Du findest diese >> hier << !

5.4 Farben zuweisen

Toll, jetzt weißt du wie Farben bestimmt werden. Aber wie weist du Elementen die gewünschte Farbe zu? Darum kümmern wir uns jetzt, mache am besten mit!

Zum Einfärben von Text benutzt man das Attribut color. Als Wert gibst du am besten einen hexadezimalen Wert an. Wenn du beispielsweise dein gesamtes Dokument mit blauer (#0000ff) Schrift versehen willst, schreibst du einfach:

... <body style="color: #0000ff;"> ...

Bei einem Absatz sieht das dann so aus:

... <p style="color: #0000ff;"> Das sieht schön aus... : - ) </p>

Ist doch nicht so schwer, oder? Machen wir gleich weiter, du kannst natürlich auch eine Hintergrundfarbe einstellen. Dies geht mit dem Attribut background-color. So färbst du dein gesamtes Dokument mit der Farbe #333333 (einem grau) ein:

... <body style="background-color: #333333;"> ...

5.5 Style Sheets im HEAD notieren

Das Festlegen der CSS - Eigenschaften im BODY oder Tags (genannt Inline - CSS) ist ja schön und gut, dem entsprechenden Element wird die entsprechende Eigenschaft (z.B. Schriftart) zugewiesen. Aber was ist, wenn du z.B. alle Überschriften deines Dokuments besonders gestalten möchtest? Ist ja sehr umständlich dies bei jeder Überschrift neu zu notieren! Bei 2 oder 3 wäre es ja noch OK, aber bei 50 oder 100? Hierfür gibt es eine bessere Methode, du notierst die Eigenschaften im HEAD, so werden bei Änderung zum Beispiel alle Absätze oder bestimmte Überschriften gleich anders gestaltet.

Ich zeige das dir wieder an einem Beispiel namens "lern11.html". Kopiere bitte den Inhalt von "lern2.html" (siehe oben) in dieses Dokument. Es müsste dann so aussehen:

[ Beispiel ] [ Screenshot ]

<html>
<head>
<title>Überschriften, Absätze, Zeilenumbrüche, Aufzählungen ...</title>
</head>
<body>
<h1> Eine SEHR große Überschrift</h1>
<p>Ich bin ein <b>Absatz</b>. <i>Text</i> sollte immer in <u>Absätzen</u> stehen.<br>
Ich bin eine Zeile tiefer.</p>
<h2>Ich bin nicht ganz so wichtig</h2>
<ul>
<li>Ein Aufzählungspunkt</li>
<li>Noch einer!!</li>
</ul>
</body>
</html>

Dieses Dokument eignet sich gut zum Gestalten, da viele verschiedene Tags vorkommen...

OK, wo kommen die Anweisungen hin? Wie schon gesagt in den HEAD, am besten nach dem abgeschalteten </title> und vor </head>, also so:

... Aufzählungen ...</title>
<style type="text/css">

</style>
</head>
<body>
<h1> Eine SEHR große ...

Notiere den <style> - Tag (neu) dorthin und gib als Attribut type="text/css" an. Natürlich das Ausschalttag nicht vergessen!

Jetzt sind wir so weit:

... <style type="text/css"> ...

Setzte noch ein paar HTML - Kommentare (). Sie dienen dazu, dass ältere Browser, die Style Sheets noch nicht kennen, die folgenden Anweisungen ignorieren:

... <style type="text/css">

</style>

OK, das war jetzt recht viel Neues, aber zu kapieren gibt's da nicht viel - merke dir einfach diese Förmlichkeit!

Nun können wir fröhlich mit unseren Anweisungen loslegen. Du kannst alle schon besprochenen Werte benutzen. Jetzt ändern wir einmal die Überschrift H1! Sie soll die Schriftgröße 20 Punkt bekommen. Schreibe dazu erstmal den Tag, h1:

...  ...

Dahinter notierst du ein geschweiftes Klammerpaar {} , lasse am besten ein Leerzeichen hinter H1 Platz:

H1 { }

In die Klammern kommen die Attribute und Werte von CSS rein - du kennst ja schon einige. Wir legen wie versprochen die Schriftgröße 20 Punkt fest:

H1 {
Font-size: 20pt;
}

Außerdem machen wir die Schriftfarbe dunkelblau (#000080)

H1 {
Font-size: 20pt;
Color: #000080;
}

Es klappt, die H1 - Überschrift wird blau gefärbt und ist 20 Punkt groß. Ich mache zwischen den Klammern je einen Absatz, so ist der Quelltext übersichtlicher - du könntest aber genauso gut alles auf eine Zeile schreiben, das Resultat wäre dasselbe.

Jetzt gestalten wir einmal die H2, notiere also eine Zeile tiefer den Selektor H2 und wieder 2 geschweifte Klammern:



Wir machen diese 16 Punkt groß und auch dunkelblau:

h2 {
font-size: 16pt;
color: #000080;
}

Verstanden? Gut, jetzt gruppieren wir einmal 2 Selektoren! Wir wollen, dass die <b> und <i> - Tags in der Schriftart Comic Sans MS dargestellt werden. Aber statt die ganzen Befehle 2 Mal zu tippen, gruppieren wir die Selektoren einfach per Komma:

b, i {
font-family: 'Comic Sans MS';
}

So kannst du natürlich auch alle anderen Tags gruppieren, klar oder? Und natürlich kann man auch mehr als 2 Selektoren per Komma voneinander trennen...

Was wir jetzt noch ganz vergessen haben ist die Gestaltung unseres gesamten Dokuments, schließlich soll der normale Text wieder eine serifenlose Schrift mit der Größe 11 Punkt. bekommen. Halt!! Bevor du jetzt fröhlich im BODY - Tag das Style - Attribut notierst, zeige ich dir lieber wie du das im Style Sheet machst. Also Body ist doch ein ganz normaler Tag, wieso können wir das dann nicht auch so machen wie z.B. bei den Überschriften? Probieren wir es doch einfach einmal aus...

body {
font-family: Arial, sans-serif;
font-size: 11pt;
}

...und es klappt! Geht doch gar nicht schwer! :-)

5.6 Das reicht!

Man kann auch noch Selektoren ineinander verschachteln, so dass z.B. fetter Text in Überschriften eine andere Farbe bekommt als einer in Absätzen - aber ich denke das ist schon ziemlich speziell, ich werde deshalb nicht darauf eingehen...

6.1 Einfache Rahmen

Willkommen im letzten (und längsten) CSS-Kapitel! Jetzt zeige ich dir, wie du einfache Rahmen erzeugst: Dies geht mit dem Attribut border-style, mit ihm legst du den Umrandungsstil fest. Umrandungsstil? Ja, es gibt z.B. einfache und doppelte Rahmen. Welche Werte border-style annehmen kannst du hier nachschauen:

[ Screenshot ]

|| solid >> einfache Rahmenlinie ||
|| double >> doppelte Rahmenlinie ||
|| groove >> 3-D-Effekt, wie eine Rille ||
|| ridge >> 3-D-Effekt mit erhöhtem Rand ||
|| outset >> 3-D-Effekt mit erhöhtem Inhalt, oder: die berühmte Schaltfläche ||
|| inset >> 3-D-Effekt mit vertieftem Inhalt ||
|| dotted >> punktierter Rand ||
|| dashed >> gestrichelter Rand ||

Super, jetzt kennst du die Rahmenstile - das nützt dir aber wenig, wenn du keinen solchen erstellen kannst! [ Übrigens können nur die neusten Browser alle Rahmenstile interpretieren! ] Ich zeige dir das an einem Beispiel, wir wollen einen Absatz umranden. Erstelle hierzu bitte die Datei lern12.html:

[ Beispiel ] [ Screenshot ]

<html>
<head>
<title>Einfacher Rahmen</title>
<style type="text/css">

</style>
</head>
<body>
<p>Ein ganz normaler Absatz.</p>
<p>Diesen Absatz soll ein fetter Rahmen zieren... </p>
<p>Und noch ein völlig normaler.</p>
</body>
</html>

Das ist ein ganz normales HTML - Dokument, das keine neuen Elemente und CSS Eigenschaften erhält. Wie schon erwähnt verwendest du zum Umranden das Attribut border-style. Mit border-width legst du die Breite fest. Notiere folgenden Selektor unter body im Style - Bereich:

p {
border-style: solid;
border-width: 3px;
}

So, wenn alles geklappt hat sollte jetzt der mittlere Absatz fett umrahmt sein!? Stimmt, aber die beiden anderen sind es auch! Verflucht, Verdammt und Halleluja, was kann man da machen? Überlege doch einmal, das ist doch logisch, da sich der Selektor <p> auf alle Absätze bezieht, nicht nur auf den zu umrandenen...

6.2 Lösung mit Inline-CSS

Klar, hier könntest du mit Inline CSS zu einer Lösung kommen, indem du dem Absatz mit dem style - Attribut die Eigenschaften direkt zuweist, also so:

<p style="boder-style: solid; border-width: 3px;">Diesen Absatz soll ein ...

Aber wirklich flexibel ist das nicht (mache das deshalb schnell wieder weg!), stell dir vor du hast eine große Website mit hunderten von Rahmen und musst jeden einzelnen neu definieren - und wenn du beispielsweise den Rahmen von 3 auf 2 Pixel verschmälern willst musst du diese Änderung bei jedem Rahmen vornehmen.! Deshalb zeige ich dir jetzt eine Lösung des Problems, indem wir die Elemente benennen. Wir geben dem Absatz, der umrandet werden soll einen Namen und verweisen im Style Sheet darauf.

6.3 Seperate Stilklassen notieren

Um HTML-Elemente zu benennen, brauchst du das Attribut class, wir verpassen unserem Abstz einen Namen und zwar "rahmen":

<p class="rahmen">Diesen Absatz soll ein ...

Bisher hat sich im Dokument nichts geändert, weiterhin sind alle Absätze umrandet! Du musst im Style Sheet auf die Klasse rahmen verweisen, sonst bringt die Benennung nichts...

Notiere hinter p (im HEAD / Style Sheet) einen Punkt (.) und dann rahmen

p.rahmen {
border-style: solid;
border-width: 3px;
}

Wenn alles geklappt hat, sollte jetzt nur noch ein Absatz - unser benannter - umrahmt sein. Nein? Zum Vergleich hier nochmal den ganzen Quelltext des Dokuments:

<html>
<head>
<title>Einfacher Rahmen</title>
<style type="text/css">

</style>
</head>
<body>
<p>Ein ganz normaler Absatz.</p>
<p class="rahmen">Diesen Absatz soll ein fetter Rahmen zieren... </p>
<p>Und noch ein völlig normaler.</p>
</body>
</html>

Du kannst dir die Klassenamen frei aussuchen, achte aber darauf, dass du keine Leerzeichen und Umlaute verwendest!

6.4 Notation für ungebundene Klassen

Unsere Rahmenanweisung ist momentan an einen Absatz gebunden. Was ist, wenn wir z.B. einem Link einen Rahmen zuweisen wollen? Probiere es aus, erstelle einen Link und weise ihm die Klasse rahmen zu

... noch ein völlig normaler.</p>

<a href="http://www.doem.tk" target="_blank" class="rahmen">Ein Link</a>

</body> ...

Und was passiert? Nichts, wie schon vermutet hat der Link keinen Rahmen erhalten, da die Klasse an das Element <p> gebunden ist. Wir brauchen dazu eine freie Klasse. Hierfür lässt du einfach den Selektor P weg

.rahmen { ...

Ist doch ganz einfach, nicht?!

6.5 Weitere Rahmen - Attribute

Mit border-color weist du dem Rahmen eine Farbe zu [für die Schriftfarbe des Textes verwendest du einfach das Attribut color, z.B. color="#000000"]. Notiere folgendes im Style Sheet, in unserer Klasse Rahmen:

border-color: #009999;

Auch eine Hintergrundfarbe ist kein Problem

background-color: #aabbcc;

Die Breite kannst du auch hier mit width bestimmen, ich empehle als Wert nur eine Angabe in Pixeln und Punkt für ein absolutes Layout - du kannst natürlich aber auch eine relative Breite wie 70 % angeben. Wir wollen unsere Rahmen 300 Pixel breit machen

width: 300px;

Zum Schluss lernst du noch, wie du Innen- und Außenränder einstellst! Einen Außenrand bekommst du mit dem Attribut margin, die Anweisung kommt wieder in unsere rahmen - Klasse

margin: 50px;

Jetzt ist zwar der Link im Opera - Browser nicht mehr im Rahmen, aber ich denke du weißt was margin bewirkt - und das ist die Hauptsache! Ich habe mit Absicht etwas übertrieben, damit das Ergebnis deutlicher wird. Die Anweisung ist z.B. praktisch, wenn der Kasten nicht so dicht an einer Überschrift "kleben" soll.

Du willst nur auf einer oder zwei Seiten einen Rand? Auch kein Problem, das geht mit den folgenden Wörtern:

|| top >> oben ||
|| bottom >> unten ||
|| right >> rechts ||
|| left >> links ||

Für einen linken Rand mit 15 Pixeln notierst du [lasse margin: 50px; stehen - du kannst die Eigenschaften wunderbar kombinieren. So ist links ein Rand von 15 Pixeln, oben, unten und rechts einer mit 50.):

margin-left: 15px;

Ein Rand an der rechten Seite erzeugst du mit margin-right, einen nach unten mit margin-bottom usw...

Eigentlich wollte ich diesen Aspekt in dem Workshop nicht behandeln. Eigentlich auch keine Rahmen. Aber jetzt habe ich doch eine Rahmeneinführung gemacht - also sollte ich auch hier nicht nein sagen...

...es ist jetzt auch nicht mehr schwierig, wir haben genug border - Grundwissen. Und vor allem diese CSS - Eigenschaften haben mich sehr beeindruckt! Ich rede von individuellen Breiten von Rahmen. Das Prinzip ist genau das gleiche wie beim individuellen Abstand mit margin. Bisher sieht unser Rahmen so aus:

.rahmen {
border-style: solid;
border-width: 3px;
border-color: #009999;
background-color: #aabbcc;
width: 300px;
margin: 50px;
margin-left: 15px;
}

Wir wollen jetzt auf der linken Seite einen dickeren, 15 Pixel breiten Rahmen machen. Füge folgendes in die Klasse dazu:

border-left-width: 15px;

Sieht doch klasse aus, oder? :-) Auch hier kannst du statt left right, bottom, und top verwenden. Experimentiere ruhig ein wenig, du kannst beispielsweise auch nur an 2 Seiten einen Rahmen verwenden...

So. Jetzt fehlt noch der Innenabstand. Dazu verwendet man das Attribut padding

padding: 10px;

Jetzt haben die Rahmen an jeder Seite 10 Pixel Abstand zum Text. Auch hier kannst du padding-left. padding-right usw. verwenden... *gähn*

6.6 Vier Pseudo - Klassen für Links

Jetzt zeige ich dir, wie du Links gestaltest! Erstelle die Datei "lern13.html" und tippe folgendes hinein:

[ Beispiel ]

<html>
<head>
<title>Links</title>
<style type="text/css">

</style>
</head>
<body>
<p><a href="http://www.yarin.de/" target="_blank">Ein ganz normaler Link</a></p>
</body>
</html>

Mit HTML, kann man nur (was wir in dem Kurs nicht gelernt haben) die Farben der Links bestimmen. Mit CSS, ist - wie du siehst - noch mehr möglich! Aber zuerst erläutere ich dir die 4 sogennaten Pseude - Klassen:

|| A:link >> Der normale, unbesuchte Link, Voreinstellung ist Farbe blau ||
|| A:active >> Der aktive Link ||
|| A:visited >> Der besuchte Link, Voreinstellung ist Farbe violett ||
|| A:hover >> Der gehoverte Link, während des Darüberfahrens mit der Maus ||

A:active kommt in unserem Beispiel nicht vor, ich finde auch, dass man es nicht braucht (oft hat es bei mir auch nicht funktioniert...).

Die Farbveränderungen solltest du jetzt leicht nachvollziehen können, der normale Link hat als Farbe ein dunkles grau, beim Darüberfahren wird er dunkelrot und der besuchte Link ist ein wenig heller. Dir wird sicherlich auch aufgefallen sein, dass beim Hovern (= Darüberfahren) die Linkunterstreichung abgeschaltet ist! Das geht mit dem Attribut text-decoration, die wichtigsten Werte sind underline (unterstrichen) und none (keine Unterstreichung), beide kommen in unserem Beispiel vor (und wir hatten sie auch schonmal angesprochen) - ich denke es ist nicht schwierig das nachzuvollziehen. Andere Werte (es gibt z.B. noch überstrichene und durchgestrichene Links) empfehle ich dir nicht zu verwenden...

6.7 <span>

<span> ist ein Inline - Element wie <i> oder <b>. Es eignet z.B. dazu in einer Navigationsleiste die aktuelle Seite hervorzuheben. Das könnte man auch mit B oder I machen, allerdings müsste man dann vielleicht erst ihre Eigenschaften (fett oder kursiv) abschalten. Hier ist <span> klar im Vorteil, es besitzt keine eigenen Eigenschaften! Wenn du z.B. das Wort Kontakt in der Navigationsleiste per Hintergrundfarbe hervorheben möchtest, schreibst du:

<span style="background-color: #444444;">Kontakt</span>

Ich werde dies dir nacher an einem Beispiel veranschaulichen...

6.8 Externe CSS-Datei erstellen

So, im letzten CSS - Kapitel lernen wir wie man eine externe CSS - Datei erstellt, also den Style Sheet extern auslagert. Kein Wort verstanden? Keine Ahnung zu was das nützlich ist? Kein Problem, also: Mal angenommen du erstellst eine Website, die aus 10 HTML - Dokumenten besteht. Für jede legst du die gleichen Stil - Eigenschaften im HEAD (Style Sheet-Bereich) fest. Am Ende findest du, dass grüne Links doch besser zum Design passen als blaue - und jetzt musst du auf allen 10 Seiten den Style Sheet ändern - spätestens bei der dritten Änderung hast du die Nase voll! Und wenn deine Seite nicht nur 10, sondern 100 Seiten hat.....

Mit einer externen CSS - Datei bist du viel flexibler: Du legst einmal die Eigenschaften für die gesamte Website (umfasst alle Dokumente) fest und wenn du dann die Linkfarbe von blau auf grün ändern willst, machst du das einmal und auf allen deiner 10 / 100 / 1000 / ... Seiten werden die Links dann grün dargestellt. Ist doch super, oder? Und Diese Datei erstellen wir jetzt!

Erstelle eine Datei namens "lern.css" (nicht .html!). Öffne die Datei, wenn die "Öffnen mit" - Box erscheint, wähle bitte den Editor (Notepad) aus und lege fest, dass dieser Dateityp immer mit diesem Programm geöffnet werden soll!

Hat alles geklappt, öffnet sich jetzt die Datei im Editor und du kannst beginnen. Es sollte alles so wie bei einer leeren HTML - Datei aussehen. Schreibe folgenden Code in die Datei:

[ Datei ]

body {
font-family: Verdana, sans-serif;
font-size: 11pt;
color: #000000;
background-color: #996633;
}

h1 {
color: #ffffff;
font-size: 20pt;
background-color: #666666;
padding: 2px;
border-style: solid;
border-color: #222222;
border-width: 2px;
border-left-width: 15px;
width: 600px;
}

h2 {
color: #eeeeee;
font-size: 16pt;
padding: 2px;
border-left-style: solid;
border-left-width: 10px;
border-bottom-style: solid;
border-bottom-width: 2px;
border-color: #990000;
width: 300px;
}

a:link {
color: #000000;
text-decoration: underline;
}

a:visited {
color: #222222;
text-decoration: underline;
}

a:hover {
color: #bbbbbb;
text-decoration: none;
}

span.aktiv {
color: #dddddd;
background-color: #600000;
}

Wie du siehst sind in einer externen Style - Datei keine <style> - Tags und Kommentarzeichen nötig. ich hoffe, dir sind alle Befehle klar - einzig Neues ist die SPAN-Klasse mit, aber auch die sollte keine Probleme bereiten. Wenn du etwas nicht verstehst gehe Eigenschaft für Eigenschaft durch und schaue, was diese bedeuten - wenn du sie dann immer noch nicht verstehst, wende dich an mich!

6.9 Externe CSS-Datei einbinden

So, wie binden wir nun die Datei in unsere Dokumente ein? Das passiert durch folgende Zeile, sie kommt in den HEAD:

<head> ...
<link rel="stylesheet" type="text/css" href="lern.css">
</head>

Kommt die Syntax dir bekannt vor? Neu ist eigentlich nur link rel="stylesheet", die Befehle type und href kennen wir schon vom Style Sheet bzw. Link. Bei href kommt der Name der Datei, bei uns "lern.css" hin. Binde sie doch einmal selbständig in ein Dokument ein, z.B. in "lern2.html"! Wenn alles geklappt hat, sollte die Datei jetzt viel schöner aussehen! ;) Du kannst in beliebig vielen Seiten einen Link zur CSS-Datei (mit <link rel="stylesheet" type="text/css" href="lern.css">) machen. Probiere es aus! Wenn du eine Eigenschaft (z.B. die Hintergrundfarbe) änderst, geschieht dies in allen Dokumenten - überzeuge dich selbst davon!

7.1 Unser letztes Kapitel: Tabellen und Frames

Willkommen im letzten Kapitel unseres Kurses. Zum Schluss widmen wir uns nochmal einigen HTML - Befehlen: Wir lernen die Grundlagen von Tabellen und Frames. Letztere wollte ich ursprünglich weglassen, da aber in Boards immer wieder Fragen zu Framesets kommen habe ich mich entschlossen doch einen kleinen Einstieg zu schreiben.

7.2 Tabellen

So einfach wie in Word StarWriter und co. ist die Tabellenerstellung in HTML nicht. Aber das Prinzip ist einfach und leicht zu verstehen. Ich zeige dir das ganze an einem Beispiel. Nenne es "lern14.html", erstelle das Grundgerüst aus HTML, BODY und TITLE. Als Seitentitel nimmst du "Tabellen". Im Style Sheet notierst du bitte die Schriftart Arial! Mache mit, notiere folgendes im BODY:

[ Beispiel ] [ Screenshot ]

<table>
</table>

Das ist das Grundgerüst jeder Tablelle! Jetzt definieren wir eine Zeile, das geht mit <tr></tr> (für table row = Tabellenzeile)

<table>
<tr></tr>
</table>

Jetzt soll unsere Tabelle nicht nur Zeilen, sondern auch Zellen haben. Eine Zelle wird mit <td><td> (für table data = Zelleninhalt) erzeugt. Wir erstellen 3 Zellen in unserer TR - Reihe

<table>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Und noch eine Zelle...</td>
</tr>
</table>

Jetzt haben wir eine Tabelle mit einer Zeile und 3 Zellen. Erstelle zur Übung eine zweite Zeile, die ebenfalls 3 Zellen besitzt. Jetzt sollte unsere Tabelle so aussehen:

<table>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Und noch eine Zelle...</td>
</tr>

<tr>
<td>Apfel</td>
<td>Birne</td>
<td>Kirsche</td>
</tr>
</table>

Naja. Die Tabelle sieht ja nicht sehr besonders aus. Auch hat sie keinen Rahmen. Das werden wir nun ändern, schreibe bitte folgendes in den Style Sheet:

td {
font-size: 10pt;
border-style: solid;
border-width: 1px;
border-color: #c0c0c0
}

Schon besser, oder? Die Befehle sollten klar sein, es sind genau die gleichen wie bei unseren Rahmen im vorigen Kapitel, nur dass wir sie diesmal bei Zellen verwenden. Auch padding und margin können wir benutzen - letzteres aber nur bei Tabellen, nicht bei Zellen.

7.3 Kopfzeile

Das Tag <th> kann man für die Kopfzeile der Tabelle verwenden, alles was zwischen des TH - Paars steht wird fett formatiert und mittig ausgerichtet. Wir fügen eine Kopfzeile ein:

<table>
<tr>
<th>Punkt 1</th>
<th>Punkt 2</th>
<th>Noch einer</th>
</tr>

<tr>
<td>Zelle 1</td>
<td>Zelle 2</td> ...

Wie du siehst schreibt man <th> einfach in eine gewöhnliche <tr> - Zeile! Damit auch diese einen Rahmen erhält ergänzen wir kurz den Style Sheet, wir müssen nur TH mit Komma von TD trennen, dann gelten die gleichen Eigenschaften, erinnerst du dich?

td, th {
font-size: 10pt;
border-style: solid;
border-width: 1px;
border-color: #c0c0c0
}

Jetzt färben wir noch die Zellen mit Hintergrundfarben ein! Dazu müssen wir ungebundene Klassen im Style Sheet notieren:

.hinterlegt1 {
background-color: ffff33;
}

Dann weise ein paar Zellen (TD) die Klasse mit class="hinterlegt1" zu! Sie erhalten einen gelben Hintergrund! Du kannst natürlich auch noch weitere Eigenschaften definieren, wir lassen es aber hierbei. Zum Abschluss nochmal der ganze Quelltext der Datei "lern14.html":

<html>
<head>
<title>Tabellen</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
td, th {
font-size: 10pt;
border-style: solid;
border-width: 1px;
border-color: #c0c0c0
}
.hinterlegt1 {
background-color: ffff33;
}
</style>
</head>
<body>
<table>
<tr>
<th class="hinterlegt1">Punkt 1</th>
<th>Punkt 2</th>
<th>Noch einer</th>
</tr>

<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Und noch eine Zelle...</td>
</tr>

<tr>
<td class="hinterlegt1">Apfel</td>
<td>Birne</td>
<td>Kirsche</td>
</tr>
</table>
</body>
</html>

Mit text-align kannst du auch hier den Inhalt ausrichten. Außerdem gibt es bei Tabellen vertical-align, damit kannst du den Text vertikal (oben, unten, oder mittig) ausrichten. Die ist nützlich wenn du z.B. Tabellen für ein pixelgenaues Layout verwendest und der gesamten Inhalt in den Zellen steht, dann willst du bestimmt einen nach oben ausgerichteten Text. Die Attribut - Werte lauten:

||baseline >> Normaleinstellung ||
|| super >> Hochstellung ||
|| top >> an Oberkante der Zeile ||
|| text-top >> an Oberkante des Textes ||
|| middle >> mittig ||
|| text-bottom >> Unterkante des Textes||
|| bottom >> Unterkante der Zeile ||
|| sub >> Tiefstellung ||

7.4 Breite und Höhe der Tabelle

Du kannst auch die Breite und Höhe der Tabellen, Zellen und Reihen angeben. Wenn du z.B. eine Tabelle, die 700 Pixel breit und 500 Pixel hoch ist haben willst, schreibst du:

<table style="width: 700px; height: 500px;">

oder du machst das ganze im Style Bereich

table {
width: 700px;
height: 500px;
}

Du kannst natürlich auch einer ganzen Tabelle einen Rahmen verpassen, es geht genau gleich wie bei Zellen (siehe oben). Wenn du mehrere Tabellen hast, empfiehlt es sich Tabellen, Zeilen und Zellen Klassen zuzuweisen.

Nun zeige ich dir noch, wie du den Lustspalt zwischen den Zellen unterdrückst. Das machen wir mit HTML und zwar mit den Attributen cellpadding und cellspacing. Cellpadding gibt den Abstand zwischen Zellrand und Zellinhalt an. Cellspacing ist der Abstand zwischen den Zellen, die "Wand-Dicke". Um den Rand zu unterdrücken, notierst du:

<table cellpadding="0" cellspacing="0">

Natürlich kannst du so den Rand auch größer machen...

7.5 Übung zu Tabellen [ Lösung ] [ Screenshot ]

Lange gab es keine mehr, aber jetzt sind sie zurückgekehrt - die Übungen. ;) Erstelle ein HTML-Dokument namens "u4.html", lege im Style Sheet die Schriftart Arial in 9 Punkt Schriftgröße fest und wähle als übergeordnete Schrift sans-serif. Der Seitentitel soll "Wir erstellen eine Tabelle" lauten. Das machst du dann auch, sie soll 3 Zeilen und 3 Spalten besitzen. Hinterlege mindestens 3 Felder mit einer roten (z.B. #990000) Hintergrundfarbe und mindestens 3 andere mit einer blauen (z.B. #000099), die Schrift soll in diesen Zellen eine helle Farbe (am besten weiß) bekommen, damit man sie besser lesen kann. Verwende zum Zuweisen die Klasse "rot" und "blau". Die Zellen sollen einen Rahmen haben!

Das waren ziemlich viele Anweisungen, aber ich hoffe du packst es trotzdem! Wenn nicht vergleiche mit meiner Lösung.

7.6 Frames - Vorbetrachtung

Bestimmt kennst du Frames, die Rahmen für Webseiten. Auch wenn sie heute nicht mehr so oft benutzt werden (weil sie halt ein paar Nachteile haben) und von manchen Besuchern auch nicht gern gesehen werden, können sie dennoch auch einige Vorteile aufweisen:

- Man kann eine feststehende Navigationsleiste, die nicht wegrollt, erstellen
- Im Hauttextbereich kannst du soviel Inhalt, wie du willst, einfügen. Er lässt sich individuell rollen
- Ein Layout aus 4, 5 oder noch mehr Rahmen sind kein Problem
- Du kannst Frames für absolutes (pixelgenaues), oder relatives Layout bestens einsetzen...

Ich habe für meine ersten (katastrophalen) Websites auch Frames benutzt - habe es z.B. sehr praktisch gefunden, wenn man einen neuen Punkt in der Navigation erstellen wollte, das musste man nur einmal machen, bei Tabellen hätte ich es auf jedem meiner (ca.15-20) Seiten machen müssen...

Wir wollen ein Frameset mit 3 Inhaltsseiten erstellen. Links soll sich eine Navigation befinden, rechts sollen im Textbereich die 3 Inhaltsseiten geöffnet werden. Keine Ahnung was ich damit meine? [ Hier ] kannst du dir schon mal das fertige Beispiel ansehen.

Wir brauchen insgesamt 5 Seiten: Drei Inhaltsseiten, eine Navigationsseite (mit Links auf die Inhaltsseiten) und schließlich noch das Frameset.

7.7 Frames - Erstellung

Als erstes erstellen wir die 3 Inhaltsdokumente. Die werden nach dem Motto supersimpel gestrickt. Die erste erstellen wir gemeinsam:

[ Seite 1 ] [ Seite 2 ] [ Seite 3 ]

<html>
<head>
<title>Seite 1</title>
</head>
<body>
<h1>Die erste Seite</h1>
</body>
</html>

Nicht sehr kompliziert, oder? Speichere sie unter "frames1.html". Die beiden anderen erstellst du selber, nach dem gleichen Prinzip und benennst sie mit "frames2.html" und "frames3.html".

Jetzt erstellen wir die Linkseite, sie wird - wie schon gesagt - später im linken Frame angezeigt. Speichere sie unter "navigation.html":

[ Navigation ]

<html>
<head>
<title>Navigation</title>
</head>
<body>
<p>
<br>
<a href="frames1.html">Seite 1</a>
<br>
<a href="frames2.html">Seite 2</a>
<br>
<a href="frames3.html">Seite 3</a>
</p>
</body>
</html>

So, jetzt muss noch das Frameset her - und das ist neu. Erstelle die Datei "frameset.html" und schreibe folgendes hinein, ich werde es danach erläutern:

[ Frameset ]

<html>
<head>
<title>Das Frameset</title>
</head>
<frameset cols="100,*" border="0">
<frame src="navigation.html" name="links">
<frame src="frames1.html" name="rechts">
</frameset>
</html>

Hast du dich über den Aufbau gewundert? Ich habe ja gar keinen BODY benutzt! Aber das ist schon in Ordnung so: Ein Framset ist (normalerweise) ein Dokument ohne BODY, es besitzt keinen Inhalt, sondern befördert nur andere Dokumente in seine Rahmen - bei uns die Dateien "navigation.html" und "frames1.html".

Das Frameset wird durch <frameset> eingeleitet. Wir bestimmen hier, dass das Dokument in Spalten (cols) aufgeteilt wird (rechts / links). Wenn du Zeilen (oben / unten) willst, benutze das Attribut rows (= Zeilen). Aber was steht dort in den Anführungszeichen von cols: 100 mit einem Komma getrennt von *. Das bedeutet, das die erste Spalte (die Navigation) 100 Pixel breit und die zweite (der Textbereich) variabel (*) sein soll - sie passt sich an die Breite des Browserfensters an...

Mit border="0" schaltest du den hässlichen Frame - Rahmen ab. Die 2 Zeilen darunter erstellen die beiden Frames, mit src (jetzt frischen wir mal wieder deine Grafik - Kenntnisse auf! *g*) bestimmst du welche Seite anfangs in den Frame geladen werden soll - bei uns die Navigationsdatei und die erste Textseite. Mit dem Attribut name werden die Frames benannt, wozu das gut ist sehen wir gleich...

So, jetzt probieren wir doch einmal unser Frameset aus! Wenn du keinen Tippfehler gemacht hast sollte alles so aussehen wie bei meinem Beispiel. Aber nun klicke mal auf einen Link in der Navigation - die zweite Seite wird im Navigatiosframe angezeigt, was soll denn das?!? Und jetzt kommt das name - Attribut vom erstellten Frame ins Spiel: Wir wollen, dass die 2.Seite im rechten, dem Inhaltsframe, geöffnet wird. Den haben wir mit "rechts" (ohne Anführungsstriche) benannt. Das müssen wir den Link auch, aber wie?

7.8 Das target - Attribut

Wie der Titel schon verrät geht dies mit dem Attribut target, wir haben es schon kennen gelernt (target="_blank" öffnet ein neues Fenster). Wir weisen den Links mit target="rechts das Öffnen im rechten Frame zu. Öffne die Navigationsdatei (navigation.html) und ergänze die target - Attribute! Und so sieht die Datei dann aus:

<html>
<head>
<title>Navigation</title>
</head>
<body>
<p>
<br>
<a href="frames1.html" target="rechts">Seite 1</a>
<br>
<a href="frames2.html" target="rechts">Seite 2</a>
<br>
<a href="frames3.html" target="rechts">Seite 3</a>
</p>
</body>
</html>

Erneutes Speichern nicht vergessen! Jetzt sollte es klappen... :-)

Einen target - Trick habe ich noch für dich: Wenn du <base target="rechts"> in den HEAD schreibst werden alle Links der Seite im rechten Frame geöffnet! Du brauchst nicht mehr in jedem Link target angeben. Das gleiche Spiel kannst du natürlich auch mit target="_blank" machen...

7.9 Übung: Erstellen eines Framesets mit Zeilen [ Lösung ]

Der Titel sagt alles - erstelle ein Frameset auf Zeilenbasis, du kannst die gleichen Inhaltsseiten benutzen und musst die Navigation nur leicht ändern, nämlich die Links auf eine Zeile setzen. Speichere sie unter "uebungsnavi.html". Ob du die Navigation ins obere oder untere Frame setzt ist egal, beides geht mit rows="" (natürlich Werte einsetzen). Sinnvoll wäre auch die "name" - Attribute in "oben" und "unten" umzubenennen (und das dann auch bei der Navigation zu ändern). Das Frameste benennst du mit "zeilenframes.html".

Mit folgendem Code, können Sie den Beitrag ganz bequem auf ihrer Homepage verlinken

Weitere Beiträge aus dem Forum UbuntuZone

Ähnliche Beiträge wie "HTML Teil1"

Html - Freak (Montag 18.06.2007)
Zehn Sefirot Teil1 - Thomas (Dienstag 07.12.2004)
Prot-Pala "auf Abwegen" - Anonymous (Montag 13.12.2010)
Neue Homepage in html - Alexander (Sonntag 27.05.2007)
HTML Tabelle - wilde gilde (Montag 17.07.2006)
http://www.koreus.com/files/200406/umbilical_brothers.html - valdrin (Montag 06.02.2006)
Umzug zu HTML?? - Susi (Mittwoch 23.01.2008)
-HTML Hilfe- - Roter Knuddely (Freitag 15.07.2005)
HTML - Anonymous (Sonntag 05.06.2005)
Kompilierte Html-Hilfedatei - WorldTra.de (Mittwoch 03.11.2004)

Alle Beiträge und Antworten zu "HTML Teil1"

Re: HTML Teil1

Menü

iphpbb Statistik

weitere Themen