HTML Einführungskurs

Artikel, Anleitungen, Minikurse und Leitfaden für alle möglichen PC-Themen und PHP/phpBB.
Antworten
Benutzeravatar
oxpus
Administrator
Beiträge: 28737
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

HTML Einführungskurs

Beitrag von oxpus »

Willkommen zu unserem kleinen Workshop:

HTML für Anfänger

Dieser Workshop beschreibt nur die wichtigsten Regeln und Grundbegriffe in HTML. Weiterführend sind einschlägige Lektüre oder für den schnellen Blick die Seite selfHTML zu empfehlen.

Fangen wir mal mit dem Wichtigsten an: Die Voraussetzungen, um HTML erstellen, bearbeiten und verwalten zu können.
Aber halt! Nicht so voreilig ;) Einen kleinen Schritt zurück!

Was ist eigentlich HTML?

HTML steht für Hypertext Markup Language und ist eine stark vereinfachte Sprache, die lediglich Formatanweisungen und Textinhalte beinhaltet, um eine Webseite zu erstellen. Am Anfang bestanden die Internetseiten noch nicht aus HTML. Damals was noch alles unschön und einfach gehalten. HTML brachte dann den Durchbruch, denn hier eröffneten sich viele Möglichkeiten. Doch dazu später mehr.

Die Syntax ist recht einfach und man erreicht hier auch gerade als Anfänger schon recht schnell die ersten Ergebnisse. Ein wenig "Vokallernen" und man kann sich schon in die Fluten stürzen.
Glaubt Ihr nicht? Wartets ab :cool:

Erster Hinweis an dieser Stelle: HTML wird auf dem PC des Anwenders ausgeführt. Dazu wird der HTML-Code (die HTML-Page) vom Benutzer durch Eingabe eines Links geladen und das benutzte Programm (in der Regel ein Web-Browser wie z.B. der Internet-Explorer von Microsoft) erstellt anhand der enthaltenen Befehle die Inhalte dar.

Zu schwer bis hier her?

Verdeutlichen wir es auf eine andere Weise:
Ein Benutzer gibt eine Web-Adresse im Browser ein. Diese wird (mit Umweg über einige Server) heruntergeladen (wie man das z.B. mit Programmen macht) und, da sie als HTML-Seite definiert ist, führt der Browser beim/nach dem Download alle enthaltenen Befehle aus.
Nachteil dieser Methode: Die Sprache ist recht starr, Inhalte der angezeigten Seite können nur durch ein erneutes Laden aktuallisiert/verändert werden und der Seitenaufbau passiert grundsätzlich auf dem PC des Anwenders, nie auf einem Server. Bei umfangreichen Seiten sind also der schwache PC des Anwenders und dessen Verbindungsgeschwindigkeit in das Internet verantwortlich, daß eine Seite lange zum Laden benötigt.

Jetzt klarer? Gut, dann weiter.

Was braucht man nun, um HTML-Dateien zu erstellen?
Neben den später noch aufgezeigten Befehlen, zunächst mal eine Idee und ein einfacher Texteditor.

Richtig gelesen: Einen Editor, nichts anderes, kann als Werkzeug dienen, um HTML-Seiten zu erstellen. Notepad tut es z.B. auch schon, wenn dieser Editor auch recht spartanisch in der HTML-Unterstützung ist. Besser geht es dann schon mit Editoren wie Textpad oder Ultraedit, um nur die bekanntesten zu nennen. Diese Editoren heben die HTML-Befehle farbig hervor, so daß der Befehlstext (wir sagen dazu Sourcecode oder Quelltext), besser zu lesen ist.

Okay, einen Texteditor für HTML-Anfänger? Ich gebe mich geschlagen und biete andere HTML-Generatoren: Dreamweaver MX oder Microsoft Frontpage 2003 (Profis jetzt mich bitte nicht erschlagen wegen FP, Erklärung folgt!).
Diese zwei (kostenpflichtigen und teuren) Programme können mehr, als nur Text darstellen. Sie besitzen einen sogenannten WYSIWYG-Editor, mit dem man nach Herzenslust seine Seite in einer editierbaren Vorschau gestalten kann und die Software erzeugt im Hintergrund den entsprechenden HTML-Code dazu. Ähnlich arbeitet z.B. auch Microsoft WinWord: Hier erstellt man den Text auch in den Formaten, wie er später gedruckt wird. Allerdings ohne HTML, sondern in einem MS-eigenen Format: Die sogenannten DOC-Dokumente. Es sei aber nicht unerwähnt, daß auch Winword HTML-Seiten auf die gleiche Weise wie Dreamweaver oder Frontpage erstellen kann, von dieser Möglichkeit ist aber dringend abzuraten!

Diese Programme helfen dem Anfänger schon eher, selber in die Webseiten-Erstellung einzusteigen, stellen aber auch die teuerste Variante dar. Und fragt jetzt Profis: Nicht immer ist der mit diesen Programmen erzeugte Quelltext auch optimiert und schnell. Den besten Quelltext erzeugt hierbei noch Dreamweaver, das Programm ist aber mit über 600 Euro sehr teuer. Andere Programme pumpen den Quelltext dermassen mit überflüssigen Code zu, daß in der Nacharbeit Handarbeit wieder angesagt ist. Und gerade Frontpage und WinWord packen viel Code zu den eigentlichen Befehlen dazu.
Allerdings: Dieser scheinbar überflüssige Code ist nicht immer sinnlos. Je nach Einsatzgebiet der HTML-Seite wird so gewährleistet, daß der gewünschte Inhalt auch 100%ig der Vorgabe erstellt wird. Erstellt man eine solche Seite per Hand, so kann es auf dem ein oder anderen Browser schonmal Darstellungsfehler geben.
Entscheidet daher selber, womit Ihr anfangen wollt. Alle Editoren haben einen Text-Modus, mit dem man nur den reinen Quelltext bearbeitet.
Aus diesem Grunde verzichte ich hier auch auf die Benutzung/Erklärung von WYSISYG-Editoren/Modi, denn wir wollen ja HTML lernen und nicht bunte Texte und Bilder plazieren, oder?

Also, dann wollen wir mal anfangen mit einer simplen Seite:
<DOCTYPE>
<html>
<head>
<meta>
<link>
<title>Unsere erste Übungsseite</title>
</head>

<body>
<p>Hallo Welt.</p>
</body>
</html>
Kompliziert? Nur auf den ersten Blick, versprochen!
Dieser kleine Quelltext macht zunächst nichts anderes, als eine weisse Seite mit schwarzer Schrift zu erzeugen, auf der lediglich der Text "Hallo Welt." erscheint. Mehr nicht. Probiert es aus: Kopiert diesen Quelltext, fügt ihn in eine leere Textdatei ein, speichert diese Datei als index.htm und führt diese per Doppelklick aus.

Ui, so viel Quelltext für das bisschen Text? Klar viel und es geht auch mit weniger, aber bleiben wir bei unserem Beispiel und gehen diesen Quelltext Punkt für Punkt durch, dann wird es klarer.

Aber dazu im nächsten Post ein kleiner Exkurs: Wie ist eine HTML-Seite aufgebaut und wie sehen die Befehle aus?
Zuletzt geändert von oxpus am So 23.Jul, 2006 10:34, insgesamt 3-mal geändert.
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Benutzeravatar
oxpus
Administrator
Beiträge: 28737
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Zunächst die HTML-Syntax:

Bei einem HTML-Befehlen spricht man von einem Tag (nicht der Tag im Kalender!). Jeder Tag wird innerhalb von "<" und ">" umschlossen und alles in der Regel kleingeschrieben. Großschreibung ist aber auch nicht falsch, man sollte sich aber für eins entscheiden. Wer die BBCodes hier beim Posting für Formatierungen verwendet, wird dieses in ähnlicher Form wiederfinden. Hier werden die Tags allerdings in eckigen Klammern gesetzt "[ ]", um diese von HTML-Tags unterscheiden zu können.

Um auf unser genanntes Beispiel zurückzukommen: Findet mal alle Tags. Also alles, was zwischen "<>" steht, ist ein Tag, mit allen Parametern, Formatanweisungen, etc.

Das war es auch schon zur Syntax. "Wie?" werden jetzt einige Fragen, mehr nicht? Richtig. Die Syntax ist damit komplett beschrieben. Alles andere ist "Vokabeln lernen", also welche Tags gibt es, wie werden diese geschrieben und welche Parameter beinhalten diese.

Aber nicht so schnell. Zunächst den wichtigsten Teil: Der Aufbau einer HTML-Seite.

Ohne vorzugreifen, hier die einfachste Struktur einer Webseite unter HTML:
<html>

<head>
</head>

<body>
</body>

</html>
Mehr nicht. Damit hat man schon eine Webseite erstellt, wenn auch ohne Inhalt ;) .
Und ist etwas aufgefallen? Ja? Nein?

Ich will es aufdecken: Jeder Tag wird mit "<" begonnen und mit ">" geschlossen. Aber ein Tag erstellt einen Befehl oder leitet eine Formatierung ein. Und wann ist dieser Befehl oder diese Formatierung zu Ende? Mit einem neuen gleichen Tag incl. anderer Anweisungen? Eine Möglichkeit, aber nicht die Richtige, also vergesst es, denn wir wollen stukturiert und sauber arbeiten.
In der o.g. Struktur erscheint jeder Tag zweimal. Einmal mit und einmal ohne "/". Der Tag-Aufruf erfolgt ohne "/", beendet wird dieser Tag mit "/".

Verstanden?

Zur Verdeutlichung: <body> markiert den folgenden Block als HTML-Rumpf, </body> gibt dem darstellenden Programm die Anweisung: Hier ist der Rumpf zu Ende.

Jetzt klarer? Yepp, weiter.

Doch was bedeuten <html>, <head> und <body> denn nun wirklich?
Kurz gesagt: Dieses sind die "obersten Tags" einer HTML-Seite. Alles andere wird innerhalb dieser Tags beschrieben. <html> beschreibt Anfang und Ende des HTML-Blocks, <head> ist der Kopf der Datei, in dem z.B. andere Programmcodes wie z.B. Java oder Javascript, aber auch Formatvorlagen, sogenannte Styles, und ähnliches abgelegt werden, die im Rumpf, also <body> verwendet werden.
Und damit sollte schon klar sein, wo der später sichtbare Teil der HTML-Datei vorhanden ist: Richtig, im Rumpf zwischen <body> und </body>.

So weiter geht es im nächsten Beitrag nun mit der kompletten Erklärung unseres ersten Beispieles, damit Ihr endlich erfahrt, was sich hinter den einzelnen Tags verbirgt.
Zuletzt geändert von oxpus am Di 08.Nov, 2005 20:43, insgesamt 2-mal geändert.
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Benutzeravatar
oxpus
Administrator
Beiträge: 28737
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Hier nochmal der Quelltext (erspart das Scrollen):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="expires" content="0">
<link REL="SHORTCUT ICON" href="favicon.ico">
<title>Unsere erste Übungsseite</title>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<p>Hallo Welt.</p>
</body>
</html>
Und die Erklärungen Zeile für Zeile:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Diese Zeile ist nicht zwingend notwendig, deklariert aber den folgenden HTML-Text nach den internatonal festgelegten Regeln.

<html>
Einleitung des HTML-Quelltextes

<head>
Einleitung des Kopfteils

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Beschreibungen oder direkte Anweisungen an den Browser werden durch META-Tags gesetzt. Hier wird der folgende Quellcode als Test/HTML mit dem europäischen Standardzeichensatz iso-8859-1 deklariert.

<link REL="SHORTCUT ICON" href="favicon.ico">
Link gibt eine externe Datei an. Das kann eine CSS-Datei für alle Formatierungen sein oder hier ein Icon, welches im Browser neben dem Seitennamen und neben der Adresse angezeigt wird. In diesem Fall die favicon.ico (Default-Name hierfür).

<title>Unsere erste Übungsseite</title>
Damit unsere Seite auch einen schöneren Namen für das Browserfenster bekommt, kann man dieses so benennen.

</head>
Beendet den Kopfteil

<body bgcolor="#FFFFFF" text="#000000">
Leitet den Rumpf ein. Hier werden noch gleich Formatierungen mitgegeben:
bgcolor="#FFFFFF" bedeutet Backgroundcolor (Hintergrundfarbe) in weiss (zu den Farbcodes kommen wir im Laufe des Kurses noch)
text="#000000" färbt den darzustellenden Text in diesem Falle schwarz ein.
Die Anweisungen, die mit <body> mitgegeben werden sind nur Vorgaben. Diese können immer im Rumpfteil überschrieben werden.
Dazu kann man auch noch die Farben der Links (default, besucht, aktiv, etc.), Schriftart und -Grösse, und andere Formatierungen angeben, auch ein Javascript oder ein Java-File kann hier ausgeführt werden (Auch dazu erst später mehr).
Erfolgt im Rumpfteil keine anderslautende Formatierung, so wird eben immer diese Vorgabe verwendet.
Natürlich kann man die Vorgabe auch weglassen, sollte dann aber nicht vergessen, den Text "vor Ort" zu formatieren, um die Seite ansprechender zu gestalten.

<p>Hallo Welt.</p>
Der Tag "p" markiert einen Absatz. Und hier auch schon der darzustellende Text: "Hallo Welt.".
Diese Zeile ist der Kern unserer Ausgabe, der Rest vor und danach im Quelltext dient nur zur Beschreibung, bzw. Standardformatierung der Ausgabe.

</body>
Beendet den Rumpfteil

</html>
Deklariert das Ende des HTML-Teils. Es kann jetzt z.B. noch Java(script) folgen.

Und damit dürfte schon man klar geworden sein, wie man Text darstellt: Einfach in den Rumpfteil schreiben. Mehr ist nicht nötig. Grundsätzlich gilt: Alles, was nicht als Tag markiert wird, ist darzustellen. Tags, die ein Browser nicht erkennt, werden ignoriert, so könnte ein Tag <oxpus> enthalten sein, der Browser würde dieses einfach nicht ausführen (wie auch, es steht ja keine Definition dahinter!).

Soweit mitgekommen? Dann wollen wir jetzt mal Vokabeln lernen!
Im nächsten Beitrag dazu die wichtigsten Tags, um schon einmal die ersten eigenen Gehversuchte unternehmen zu können. Dazu will ich die Farbcodes auch gleich erklären, denn die können auf den ersten Blick ebenfalls verwirren.
Zuletzt geändert von oxpus am Di 08.Nov, 2005 20:44, insgesamt 2-mal geändert.
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Benutzeravatar
oxpus
Administrator
Beiträge: 28737
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Und weiter gehts.
Hier die gebräuchlisten Tags, die man für HTML-Seiten benötigt.
Die Tags sind alphabetisch sortiert und bei weitem nicht vollständig. Es soll ja für den Anfang nicht zu schwierig werden.

Genannt sind immer der Tag, dessen Bedeutung und ein Beispiel.
Hier wird zunächst nicht näher auf das jeweilige Beispiel eingegangen, aber in den folgenden Beiträgen geht es dann immer schwerpunktmäßig um ein Thema, in dem mehrere Tags zusammenspielen.

a
Definiert einen Anker (Sprungmarke innerhalb des HTML-Codes) oder einen Hyperlink (intern und extern)

<a href="http://www.oxpus.de">OXPUS.de</a>

b
Formatiert den folgenden Text fettgedruckt

<b>Hallo Welt</b>

body
Definiert den Rumpfbereich der HTML-Datei

<body...>
</body>

br
Erzeugt einen Zeilenumbruch

Zeile 1<br>Zeile 2

button
Hiermit können Button erzeugt werden.

<button name="beispiel" type="button" value="Hallo Welt" onClick="self.location.href='http://www.oxpus.de/'">

center
Rückt den folgenden Text in die Mitte der Zeile.

<center>Hallo Welt</center>

div
Beschreibt einen zusammenhängenden Textbereich. Dieser beginnt in einer neuen Zeile und kann mittels CSS formatiert werden.

<div align="right">Hallo Welt</div>

font
Legt die Formatierung über Fontart, -Farbe und -Größe für den nachfolgenden Text fest.

<font face="Avalon,Wide Latin">Das ist Text in Schriftart Avalon, wenn nicht verfügbar, dann in Wide Latin</font>
<font size="7">Ziemlich riesig</font>
<font color="#0000FF">Blauer Text</font>

form
Erstellt ein Eingabeformular, in dem mittels dem Tag <input> Werte übergeben werden können. Die übergebenen Werte werden an die angegebene Aktion (Hyperlink) angehängt.

<form name="beispiel" method="get" action="http://www.oxpus.de">
</form>

frame
Erstellt ein Frame innerhalb eines Framesets.

<frame src="index.htm" name="Menue">

frameset
Definiert ein Frameset, in denen mehrere Frames enthalten sind.

<frameset cols="250,*">
</frameset>

h1-h6
Erstellt Überschriften in der Ordnung H1 bis H6.

<h1>Dies ist die erste Überschrift</h1>
<h2>Hallo Welt</h2>

head
Definiert den Kopfbereit der HTML-Datei.

<head>
</head>

hr
Erzeugt eine horizontale Trennlinie. Damit kann man Fliesstext besser optisch trennen.

<hr>

html
Definiert den folgenden Code als HTML. Nicht unbedingt nötig, aber vorgegeben.

<html>
</html>

i
Stellt den nachfolgenden Ttext kursiv (italic) dar.

<i>Hallo Welt</i>

img
Fügt Grafiken ein.

<img src="http://www.oxpus.de/phpBB/images/dot.gif" border="0">

input
Erstellt ein Eingabefeld/-Button für ein Formular. Die hiermit eingegebenen Werte werden wie unter name="..." definiert an die angegebene Aktion (URL) angehangen.

<input name="zuname" type="text" size="30" maxlength="40">
<input name="active" type="radio">
<input name="zutat" type="geschlecht" value="m">

li
Stellt den nachfelden Text als Liste dar.

<li>Hallo Welt</li>

link
Stellt Beziehungen der Datei zu anderen HTML-Dateien her. Dieses ist nicht gleichzusetzen mit einem < a >-Tag! Hiermit kann man den Browser mitteilen, welche Datei noch mitbenutzt werden soll.

<link rel="contents" href="inhalt.htm" title="Inhaltsverzeichnis">

meta
Erstellt Meta-Daten wie Kurzbeschreibung und Stichwörter für eine Datei, die vom Browser ausgelesen werden können. Hiermit können aber auch Weiterleitungen und Gültigkeiten definiert werden.

<meta name="author" content="Anna Lyse>

noframes
Definiert einen Bereich innerhalb der HTML-Datei, der angezeigt wird, wenn der eingesetzten Browser Frames nicht unterstützt.

<noframes>
Ihr Browser kann leider keine Frames anzeigen. Die Seite bleibt daher leer!
</noframes>

noscript
Definiert einen Bereich innerhalb der HTML-Datei, der angezeigt wird, wenn der eingesetzten Browser Javascript nicht unterstützt, bzw. dieses deaktiviert wurde.

<noscript>
Ihr Browser kann (zur Zeit) keine Scripts ausführen. Die Seite bleibt daher leer!
</noscript>

option
Erstellt eine Auswahloption für Drop-Down-Felder.

<option value="1">Hallo Welt</option>

p
Erzeugt für den folgende Text einen eigenen Absatz.

<p>Hallo Welt</p>

s oder auch strike
Markiert den folgenden Text als durchgestrichen

<s>Hallo Welt</s>

select
Definiert und leitet ein Drop-Down-Feld ein.

<select name="user" size="3">
</select>

span
Erstellt einen zusammengehörenden Text, den man gemeinsam formatieren kann.

<span style="color:blue">Hallo Welt in blau</span>

strong
Formatiert den folgenden Text als hervorgehoben. Hat den ähnlichen Effekt wie der Tag b.

<strong>Hallo Welt</strong>

style
Erstellt eine Klasse zu Formatierungen (hier als Beispiel in CSS), die z.B. mittels <span> verwendet werden kann.

<style type="text/css" media="screen">
<!--
body
{ background-image:url(back.jpg); padding:10px; }
#GrosserText
{ font-size:150px; font-family:"Arial Black",Arial,sans-serif; color:#73FBE7; }
#KleinererText
{ font-size:90px; font-family:"Arial Black",Arial,sans-serif; color:#FFFFFF; }
-->
</style>

table
Leitet eine Tabelle ein.

<table width="100%">
</table>

tbody
Definiert den Tabellenrumpf.

<tbody>
</tbody>

td
Definiert eine Tabellenspalte (senkrecht gesehen!).

<td>
</td>

textarea
Definiert einen mehrzeiligen Eingabefeld für ein Formular.

<textarea name="user_eingabe" cols="50" rows="10">Hallo Welt</textarea>

tfoot
Definiert den Tabellenfuß.

<tfoot>
</tfoot>

th
Erstellt eine Tabellenkopfzeile (waagerecht gesehen!).

<th>
</th>

thead
Definiert den Tabellenkopf.

<thead>
</thead>

title
Erstellt den Titel der HTML-Seite, die im Fenstertitel des Browser-Programmes anstelle der URL angezeigt wird.

<title>Meine Übungen</title>

tr
Definiert eine Tabellenzeile (waagerecht gesehen!).

<tr>
</tr>

u
Formatiert den folgenden Text unterstrichen.

<u>Hallo Welt</u>
Zuletzt geändert von oxpus am Di 08.Nov, 2005 20:44, insgesamt 1-mal geändert.
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Benutzeravatar
oxpus
Administrator
Beiträge: 28737
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Hier noch eine kurze Erklärung zu Farbcodes (mehr muss man auch nicht unbedingt wissen):

Die Farbcodes sind immer in hexadezimal anzugeben.
Ui, was ist das denn nun schon wieder?

Kleiner Exkurs:
Das hexadezimales Zahlensystem beruht auf 16 Ziffern: 0-9 und A-F. Das uns bekannte dezimale System verwendet nur 10 Ziffern nämlich 0-9.
Beim hexadezimales System stehen A für 10, B für 11 bis hin zu F für 15. Zahlen wie "AFFE" ergeben hiermit einen Sinn, auch wenn die "Zahl" eigentlich ein Tier beschreibt ;)

Wieder zurück zu den Farben:

In HTML sind Farben eben hexadezimal anzugeben. Das Format lautet "#RRGGBB". Man spricht auch von dem RGB-Farbsystem. Dabei gilt: Je höher der Wert, desto heller die Farbe.

"#" definiert die nachfolgenden Zeichen als Farbe
"RR" der hexadezimale Wert für Rot
"GG" der hexadezimale Wert für Grün
"BB" der hexadezimale Wert für Blau

Also ist "#FFFFFF" weiß und "#000000" schwarz.
Rot demnach "#FF0000", blau "#0000FF" und grün "#00FF00".

Gelb? Na?
Nein, das findet selber heraus :D

Das wars auch schon wieder. Wer Farblehre irgendwo/irgendwann mal hatte, kann sich nun vorstellen, was "#FF00FF" ergibt. Mehr wird nicht veraten.

Kleiner Tip noch:
Die Standardfarben kann man auch per Namen angeben, allerdings dann englisch:
black, blue, green, yellow, cyan, fuchsia um nur einige zu nennen.
Zuletzt geändert von oxpus am Mi 09.Nov, 2005 18:52, insgesamt 1-mal geändert.
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Benutzeravatar
oxpus
Administrator
Beiträge: 28737
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Den hatten wir doch schon :(
Richtig, aber es gibt ja noch etwas mehr, nämlich Frames, Scripte, Styles, Metas, etc.
Hier sollen nun die Grundlagen für das Gerüst der Seite erklärt werden. Schliesslich will man nicht alles in schwarzem Text mit Schriftart "Times Roman" und Standardgrösse formatiert auf einer weissen leeren Seite weitergeben und auch weniger oft soll eine Seite nur aus einem Frame (jede Seite ist ein Frame, wenn man es genau nimmt) bestehen.

Also ran an den Speck.

Die Tags HTML, HEAD und BODY habt Ihr ja nun kennen gelernt, aber wie machen das andere, im Browser-Titel einen Namen anzugeben? Wie funktioniert das mit einer automatischen Weiterleitung und wodurch wird z.B. einer Suchmaschine mitgeteilt, was in einer Seite vorhanden ist?

Wie, das ist alles mit HMTL machbar? Ja, seht selber:
<title>OXPUS :: HTML-Kurs</title>
Wer bis hierher aufgepasst habt, weiss, was diese Zeile bewirkt:
Richtig! In der Titelleiste des Browsers erscheint "OXPUS :: HTML-Kurs".
Und auch genau nur dafür ist der Tag <title> da. Dabei sollte man beachten, daß hier keine Formatierungen, Sonderzeichen, Grafiken oder ähnliches verwendet werden dürfen. Lediglich Text wird hier fehlerfrei dargestellt.
Diese Zeile und auch die folgenden werden alle im Kopf der HTML-Datei, also zwischen <head> und </head> untergebracht.

Doch wie werden weitere Inhalte deklariert, bzw. anderen Programmen zur Verfügung gestellt?
Es gibt ja schliesslich in Word-Dokumenten auch Autoren, wann erstellt und zuletzt geändert und weiter Angaben?

Dafür ist der Tag <meta> zuständig. Hiermit lassen sich viele Angaben zu der Seite machen. Sei es wie im Beispiel weiter oben der Zeichensatz, der Autor, Bemerkungen und auch automatische Weiterleitungen.
der Tag besteht aus 2 grundsätzlichen Varianten:
<meta name=name content=inhalt>
<meta http-equiv=bezeichner content=inhalt>
Mit <meta> wird diese Zeile eingeleitet, "name", bzw. "http-equiv" stellen den Bezeichner dar und "content" ist der Inhalt der Bezeichner.
Das Prinzip funktioniert ähnlich einer Variablenzuweisung in z.B. Basic, bedeutet aber etwas ganz anderes:
Während "name" lediglich allgemeine Definitionen enthält, stellt "http-equiv" die zugewiesenen Informationen anderen Programmen (z.B. Suchmaschinen) zur Verfügung.
Da man mit Meta-Tags eine Menge definieren kann, seien hier nur die wichtigsten als Beispiele genannt. Dazu immer in Blau eine kurze Erklärung dazu:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Weist dem Browser an, den entsprechenden Zeichensatz "iso-8859-1 zu verwenden
<meta name="author" content="oxpus">
Definiert den Autoren dieser Seite
<meta http-equiv="refresh" content="1; URL=http://www.oxpus.de/phpbb/portal.php">
Erzeugt eine automatische Weiterleitung nach X Sekunden zur angegebenen "URL="
<meta name="description" content="Dieser Beschreibungstext soll einem Anwender im Suchdienst bei Auffinden dieser Datei erscheinen.">
Beschreibung einer Seite für Suchdienste
<meta name="date" content="2001-12-15T08:49:37+00:00">
Datum der Datei. Format muss nach den internationalen Regeln erstellt werden
<meta name="robots" content="noindex">
Weist Suchrobotern an, diese Seite nicht zu indizieren
<meta name="keywords" lang="de" content="Ferien, Griechenland, Sonnenschein">
Legt deutsche Schlüsselwörter für Suchroboter fest
<meta name="keywords" lang="en-us" content="vacation, Greece, sunshine">
Legt englische Schlüsselwörter für Suchroboter fest
<meta http-equiv="Content-Script-Type" content="text/javascript">
Definiert die enthaltenden Script-Abschnitte als Javascript
<meta http-equiv="Content-Style-Type" content="text/css">
Definiert die enthaltenen Style-Abschnitte im CSS-Format
<meta http-equiv="expires" content="0">
Weist einen Proxy an, diese Seite immer erneut zu laden und nicht als dem Cache zu verwenden
<meta name="generator" content="TextPad">
Stellt die Information zur Verfügung, mit welchem Programm die Datei erstellt wurde
<meta http-equiv="cache-control" content="no-cache">
Weist einen Server an, diese Seite nicht zwischenzuspeichern
<meta name="revisit-after" content="20 days">
Weist einen Suchroboter an, in 20 Tagen nochmal vorbei zu schauen

Es kann natürlich wild kombiniert und auch der Inhalt unter "content" frei verwendet werden. Es ist aber zu bedenken, daß nicht jeder Browser alle Metas verstehen und auslesen kann!

So, daß war es zunächst vom Aufbau einer HTML-Seite. Im nächsten Beitrag widmen wir uns der Einteilung der Seite in Frames, um unterschiedliche Inhalte darstellen zu können.
Zuletzt geändert von oxpus am Mi 09.Nov, 2005 18:52, insgesamt 1-mal geändert.
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Benutzeravatar
oxpus
Administrator
Beiträge: 28737
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Um eine Webseite in einzelne Bereiche einzuteilen, etwa ein Navigationsmenü und einen Titel vom Rest der Seite zu trennen, kann man Framesets verwenden. Eine etwas andere Variante mit Tabellen ist hier auch möglich, das wird allerdings in einem weiteren Post beschrieben.
Der Vorteil von Frames gegenüber Tabellen besteht in der Flexibilität: Während innerhalb eines Framesets einzelne HTML-Seiten per Link ausgetauscht werden können, sind Tabellen eine starre Struktur, die eher für das formatierte Darstellen von Inhalten gedacht sind.

Wie wird denn nun eine Webseite unterteilt?
<frameset ...> <!-- Frameset-Definition -->
<frame ...> <!-- Framefenster-Definition -->
<noframes>
Wird angezeigt, wenn der Browser keine Frames anzeigen kann
</noframes>
</frameset>
Dies ist das Grundgerüst eines Framesets. Definiert wird dieses nach dem Kopfteil der HTML-Datei, kann muss aber nicht im Rumpfteil erstellt werden.

Zur Erklärung:
<frameset> definiert, wie eine Webseite aufgeteilt werden soll. Das kann horizontal (mittels "rows") oder vertikal (mittels "cols") geschehen.
Auch ist eine Verschachtelung von Framesets möglich, um zum Beispiel zwei vertikale Teile und im zweiten Teil auch noch eine horizontale Einteilung zu erreichen, doch dazu später mehr.
<frame> stellt das einzelne Frame dar und definiert dessen Erscheinungsform. Das können sein der Scrollbalken, Rahmen, feste oder veränderbare Grössen, etc.
<noframes> gibt einen Bereich an, den ein Browser anzeigt, der keine Frames unterstützt. Der hier dargestellte Text kann z.B. eine Tabelle beinhalten, die in etwa die gleichen Funktion übernehmen soll, wie das Frameset definiert wird.

Doch wie schaut es nun in der Praxis aus?
Definieren wir doch mal ein einfaches Frameset aus zwei horizontalen Frames:
<frameset rows="20%,80%">
<!-- Dadurch ergeben sich zwei Framefenster, deren Inhalt hier bestimmt wird -->
</frameset>
Das Fenster wird dadurch in zwei Teile unterzeilt, wobei der erste Teil 20%, der zweite Teil 80% des Fensterinhaltes ausmacht. Anstelle von Prozentwerten, die die Darstellung dynamisch gestalten, kann man auch Pixel angeben:
<frameset rows="20,*">
<!-- Dadurch ergeben sich zwei Framefenster, deren Inhalt hier bestimmt wird -->
</frameset>
Hierbei ist der erste horizontale Bereich 20 Pixel hoch, der zweite Frame füllt dann den Rest des Fensters.
<frameset rows="20,*, 80">
<!-- Dadurch ergeben sich zwei Framefenster, deren Inhalt hier bestimmt wird -->
</frameset>
Stellt nun das ganze auf den Kopf, oder? Nicht ganz. Es werden drei Frames definiert, wobei der obere Frame 20 Pixel, der untere 80 Pixel hoch sind, der mittlere den Rest des Fensters ausfüllt.

Damit dürfte auch schon der erste Unterschied zwischen Breiten/Höhen-Angaben deutlich werden:
Während Prozentwerte die Breiten/Höhen eines Bereiches in Abhängigkeit der Grösse des Browserfensters bestimmen, legen Pixel-Angaben fest unveränderbare Grössen fest. Damit kann die Seite dann auch zwangsweise aus dem Fenster hinauslaufen, nicht immer schön und gewollt.
Daher sollte man sich bei grösseren Bereichen immer auf einen dynamischen Wert mittels "*" oder einer Prozentangabe festlegen.

Was horizontal geht, klappt auch vertikal:
<frameset cols="20%,80%">
<!-- Dadurch ergeben sich zwei Framefenster, deren Inhalt hier bestimmt wird -->
</frameset>
Dieses Beispiel unterteilt das Fenster zwei vertikalt Teile, wobei der linke Teil 20%, der rechte Teil 80% des Fensterinhaltes ausmachen. Anstelle von Prozentwerten, die die Darstellung dynamisch gestalten, kann man auch hier wieder Pixel angeben:
<frameset cols="20,*">
<!-- Dadurch ergeben sich zwei Framefenster, deren Inhalt hier bestimmt wird -->
</frameset>
Hierbei ist der linkte vertikale Bereich 20 Pixel breit, der rechte Frame füllt dann den Rest des Fensters.
<frameset cols="20,*, 80">
<!-- Dadurch ergeben sich zwei Framefenster, deren Inhalt hier bestimmt wird -->
</frameset>
Diese drei Frames sind links 20 Pixel, rechts 80 Pixel breit und der mittlere füllt wieder den Rest des Fensters dynamsich aus.

Doch wie definiert man nun den Frame selber? Mit dieser Grundstruktur:
<frameset cols="250,*">
<frame src="navigation.htm" name="Navigation">
<frame src="start.htm" name="Inhalt">
</frameset>
Das Fenster wird in einem 250 Pixel breiten linken Frame und einem dynamische breiten rechten Frame unterteilt.
Dazu definiert <frame> mit "src=" den Verweis auf die im Frame darzustellende HTML-Seite und gibt dem Frame den Namen, wie unter "name=" angegeben. Dabei ist zu beachten, daß in der Reihenfolge, wie man die Frames angibt, bzw. definiert, diese auch dem Frameset zugeordnet werden!
In unserem Beispiel ist also die HTML-Seite "navigation.htm" 250 Pixel breit und vertikal von "start.htm" getrennt.

Was bedeutet denn nun Name? Warum brauche ich den überhaupt, wenn doch das Frameset fest definiert wurde?
Framesets können wesentlich mehr, als Tabellen: Sie sind in der Lage, innerhalb eines Frames per Klick auf einen Link immer wieder andere Seiten aufzurufen. Das ist z.B. für Menü-Frames sinnvoll, sie im "Hauptframe" eine neue Seite per Link laden. Und damit der eben Browser weiß, welchen Frame er bei Bezügen ansprechen soll, werden die Namen vergeben. Im Bereich der Links kommen wir noch eingehender auf dieses Thema zu sprechen, dann dürften die Namen und Bezüge verständlicher werden.

So, wird sich jetzt manch einer fragen, jetzt habe ich die Möglichkeit, vertikale und horizontale Bereiche zu erstellen, und was nun? Wie kann ich diese Bereiche nochmal unterteilen???

Nein, wieder nicht mit Tabellen, sondern mit einem weiteren Frameset! Man kann diese immer wieder ineinander verschachteln, sollte jedoch nicht zu sehr in die Tiefe gehen, da zum einen der Browser irgendwann nur noch Fehler darstellt und man selber auch den Überblick über die Frames verliert.
Weniger ist hier also mehr ;)

Na dann mal los, lasst und Framesets ineinander verschachteln:
<frameset cols="150,*">
<frame src="navigation.htm" name="navi">
<frameset rows="150,*">
<frame src="titel.htm" name="titel">
<frame src="index.htm" name="main">
</frameset>
</frameset>
Was diese Definition bewirkt? Probiert es aus. Mehr wird an dieser Stelle nicht verraten...

Und weiter geht es im nächsten Beiträg mit Links. Wie ein eigener Beitrag über Links? Das ist doch nicht so schwer!!!
Doch, Links können in ettlichen Varianten angelegt und mit vielen Zusatztags belegt werden. Auch die hier schon angesprochenen Bezüge spielen bei Links eine sehr grosse Rolle.
Zuletzt geändert von oxpus am Mi 09.Nov, 2005 18:53, insgesamt 1-mal geändert.
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Benutzeravatar
oxpus
Administrator
Beiträge: 28737
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Um nicht nur eine Seite Text darzustellen, kann man deutlich mehr mit HTML anstellen.
Sei es um Bilder einzubinden, auf eine neue Seite zu gelangen oder "Style-Sheets" für Formatvorlagen zu verwenden (zu Letzterem später mehr).

Es gibt für Links, bzw. Verweise 3 Arten:

Anker <a>
Bild <img>
Link <link>

Der Anker stellt den klassischen Link von einer Seite zu einer anderen Seite dar, wechselt Inhalte von Frames aus oder kann Scripte aufrufen (z.B. für PopUp-Fenster - siehe unter "Javascript").
Bilder werden mittels <img>-Tag eingebunden und der Tag <link> bezieht sich auf das Mitbenutzen einer weiteren HTML-Seite oder Datei.

Fangen wir mit <link> an:
Dieser Tag, positioniert im Kopfteil der HTML-Datei, fügt (vereinfacht gesagt) den Inhalt einer weiteren Datei zur Mitbenutzung ein.
Hiermit werden meistens Definitionen, z.B. CSS-Klassen, in die Hauptdatei eingebunden, das wie folgt geschehen kann:
<link rel="stylesheet" href="stylesheet.css" type="text/css">
Damit wird definiert, daß die eingebundene Datei "stylesheet.css" vom Format CSS ist und ein Stylesheet darstellt. Untergebracht wird diese Zeile immer im Kopfteil einer HTML-Datei, da nur dort ein direktes Einbinden einer externen Datei möglich ist.

Kommen wir nun zu den klassischen Links. Aber halt! Erst ein kleiner Exkurs, was Pfade angeht.
Wie Pfade? Ja, richtig!
Die Struktur der eigenen Webseite sollte man schliesslich im Vorfeld planen, damit man bei den Definitionen der Links mittels <a>-Tag keine Schwierigkeiten bekommt. Pfade kann man nämlich relativ zur aktuellen Position angeben (nur bei internen Links möglich!):
Ausgehend von der Position, an der sich das aktuelle Dokument befindet.
Oder man verwendet absolute Pfadangaben:
Das beinhaltet die Domäne, je nach Browser auch das vorangestellte Protokoll wie z.B. "http://" oder "ftp://", den kompletten Pfad zur und die Datei selber.
Vergleichbar sind absolute und relative Pfadangaben wie bei einem Betriebssystem, wo man auch angefangen vom (bei Windows) Laufwerksbuchstaben, bzw. (bei Unix/Linux) vom Root-Verzeichnis "/" ausgehend alle Ordner auflistet, um zur gewünschten Datei zu gelangen (absolut) oder ausgehend vom aktuellen Ort im Verzeichnisbaum den Pfad zur gewünschten Datei angibt (relativ).

Kurzum: Absolute Pfadangaben beinhalten immer den gesamten Pfad, relative Pfadangaben gehen von dem aktuellen Ort ab.
Relative Pfadangaben, die mit "/" beginnen, gehen unter HTML vom obersten Verzeichnis der Domäne aus (analog wir auch unter Unix/Linux). Angaben von dem aktuellen Ort dürfen daher nicht mit einem "/" beginnen!

Und wie sieht nun ein Link aus, bzw. wie wird dieser definiert? Na so:
<a href="pfad/datei">Dies ist ein Testlink</a>
Was, das ist alles? Ja, zunächst.
Beschreiben wir, was da passiert:
<a> ist ein Anker, der gesetzt/definiert wird oder einen Verweis dorthin beschreibt. Wenn man es streng betrachtet, ist eine im Link angegebene Datei auch ein Anker, das ist aber dann sehr weit her geholt.
Ein Link beginnt mit "href=" und weist den Browser an, auf einen Anker oder eine Datei zu verweisen, die nachfolgend angegeben wird.
Nach Abschluss des einleitenden Tags mittels ">" kommt der Linkname, hier wurde dieser "Dies ist ein Testlink" benannt. Und natürlich muss der Tag auch wieder geschlossen werden: </a>.

Das wäre ein Link und was ist denn nun ein Anker und wofür sind Anker überhaupt gut?

Anker innerhalb einer Webseite können z.B. dazu benutzt werden, um Kapitel direkt aus einer einleitenden Übersicht anspringen zu können.
Definiert wird ein Anker mittels:
<a name="Anker1">Anker 1</a>
und der Sprung dahin:
<a href="#Anker1">Gehe zu Anker 1</a>
Während man einen Anker nicht betitel muss (um diese nicht extra anzeigen zu müssen), ist ein Link immer zu benennen, da dieser ja ansonsten nicht verwendbar ist. Unsichtbare Link trifft man schliesslich so schlecht mit dem Mauszeiger.

Und warum beim Anker keine und beim Link zu einem Anker eine Raute (#)?
Der Anker wird allein durch den Zusatz "name=" definiert, der Link dorthin wird mit einer Raute (#) definiert. Selbstverständlich könnte man die Raute weglassen, bewirkt aber dann das Neuladen der Seite, bevor der Anker angesprungen wird. Das kostet unnötig Zeit und wird auch nicht von jedem Browser unterstützt.

So lassen sich nun Links auf Anker, interne und externe Seiten erstellen, doch wie macht man das mit Email-Adressen und für Downloads?
Im gleichen Muster. Ehrlich.
Für Downloads gibt es eine ganz einfache Regel: Alles, was der Browser nicht darstellen kann, wird heruntergeladen, der User erhält also (je nach dessen Einstellung) ein Download-Fenster oder die Datei wird gleich ausgeführt.
Und Email-Adressen werden mit nur einem kleinen Zusatz verlinkt:
<a href="mailto:webmaster@oxpus.de">Mail an OXPUS</a>
Erkannt? Richtig: "mailto:" veranlasst den Browser, das eingestellte Email-Programm des Users zu starten, eine neue Email zu öffnen, die Adresse dort als Empfänger einzutragen und darauf zu warten, was der User macht.

Ihr seht schon, Links können eine ganze Menge.

Doch nun zu einer etwas kniffligeren Sache, nämlich das Ziel eines Links (Verweises).
Was? Ziel? Wo geht es denn hin?

Nicht was Ihr jetzt meint, sondern in welchem Fenster soll ein Link geöffnet werden? Bei Framesets: In welchem Frame ist die Seite darzustellen?

Das geschieht innerhalb des <a>-Tags mit dem Zusatz "target=". Dabei werden folgende reservierte Wörter bereitgestellt:

"_self"
"_parent"
"_top"
"_blank"

Um nur die wichtigsten zu nennen. Der Unterstrich ist dabei wichtig und kein Tippfehler!
"_self bezieht sich auf das gleiche Fenster/Frame, "_parent" bedeutet das "übergeordnete" Fenster/Frame innerhalb eines Framesets, "_top" das oberste Fenster eines Framesets (welches damit komplett "gesprengt" wird) und "_blank" öffnet ein neues Browserfenster.

Und so sehen die entsprechenden Links gemäß unserem obigen Beispiel aus:
<a href="http://www.oxpus.de" target="_self">OXPUS</a>
<a href="http://www.oxpus.de" target="_parent">OXPUS</a>
<a href="http://www.oxpus.de" target="_top">OXPUS</a>
<a href="http://www.oxpus.de" target="_blank">OXPUS</a>
Dazu muss man sagen, daß "_self" der Standardwert ist und jeder Link, der ohne "target=" erstellt wird, mit diesem Attribut geöffnet wird, also immer im selben Fenster, bzw. Frame.
Zu den reservierten Wörtern kann man natürlich auch eigene Namen definieren. Lediglich ein Unterstrich (_) muss vorangestellt werden.
Ist dieser Name kein Frame innerhalb des aktiven Framesets, so öffnet der Link in einem neuen Fenster.

Und Ihr ahnt es sicher schon:
Ist das Ziel (target=) ein Frame im aktive Frameset, so wird die im Link angegebene Seite innerhalb dieses Frames dargestellt!
Jetzt wisst Ihr auch, warum ein Frame einen Namen hat und wofür er verwendet wird.

War doch nicht schwer, oder?

Dann noch schnell zu den Bildern:
<img src="pfad/bild.gif" />
positioniert das angegebene Bild an der eingetragenen Stelle auf der Webseite. Auch hier sind relative und absolute Pfade möglich, stimmt der Pfad nicht, so erscheint auch einfach kein Bild oder (je nach Einstellung des Browsers) nur ein Platzhalter dafür.
Aber Achtung: Bilder werden in der Regel immer mit einem Rahmen dargestellt. Man kann das umgehen, in dem man obiges Bild wie folgt abändert:
<img src="pfad/bild.gif" border="0"/>
"border=" gibt an, wie stark der Rahmen um ein Bild gezogen werden soll. "border=0" bedeutet dabei kein Rahmen und sollte daher immer verwendet werden (Es sei, man will es expliziert anders). Standard ist hierbei "border=1", sofern dieses nicht angegeben wird.

Tja und damit wäre das Einbinden von Bildern auch keine Schwierigkeit mehr. Aber wie macht man aus einem Bild ein Link, so wie hier im Board das auch an diversen Stellen möglich ist?
In dem man anstelle eines Textes zur Beschreibung des Link ein Bild einbindet.

Wie? Was?

Schaut her:
<a href="http://www.oxpus.de" target="_blank"><img src="images/dot.gif" border="0" /></a>
Erkannt? Genau:
Das eingebundene Bild wird so zum Link und ein Klick darauf wird in einem neuen Fenster dieses Board aufgerufen.

Zuletzt noch ein Hinweis zur Darstellung des Bild in seinen Anmaßen:
Um übergrosse Bilder verkleinert darstellen zu können, damit sie z.B. in das Gesamtlayout der Seite passen, kann man im <img>-Tag noch die Höhe und Breite des Bildes angeben. Hier ein Beispiel, was die Schreibweise verdeutlicht:
<img src="bild.gif" border="0" height="20" width="20" />
Dadurch wird das Bild auf Biegen und Brechen mit 20 man 20 Pixel dargestellt, egal ob es grösser oder kleiner ist. Das kann unschön aussehen und sollte wohl Überlegt sein.
Selbstverständlich kann man auch nur Höhe "height" oder nur Breite "width" angeben, was entsprechende Auswirkungen nach sich zieht.

Soviel zu den Links. Weiter geht es an dieser Stelle im nächsten Beitrag mit Formatierungen und Styles sowie deren Einsatzmöglichkeiten.
Zuletzt geändert von oxpus am Mi 09.Nov, 2005 18:54, insgesamt 1-mal geändert.
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Benutzeravatar
oxpus
Administrator
Beiträge: 28737
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Formatierungen und Styles

Soweit haben wir jetzt schon das wesentliche für den Aufbau einer Webseite gelernt, aber im Grunde ist diese Seite immer noch leblos.
Da passt eine Schriftart nicht, hier eine Schriftgrösse, die Ausrichtung der Texte ist unschön und überhaupt könnte da mehr Farbe rein.

Wir Ihr ja schon erfahren habt, gibt es dafür einige Tags, mit denen man formatieren kann.
Doch halt! Bevor Ihr jetzt anfangt, alle Tags wild auszuprobieren: Die folgenden Tags machen nach dem heutigen Stand noch Sinn...

<b></b> oder <strong></strong> (Formatiert den folgenden Text fettgedruckt)
<br /> (Erzeugt einen Zeilenumbruch)
<div></div> (Beschreibt einen zusammenhängenden Textbereich. Dieser beginnt in einer neuen Zeile und kann mittels CSS formatiert werden)
<h1></h1> - <h6></h6> (Erstellt Überschriften in der Ordnung H1 bis H6)
<hr> (Erzeugt eine horizontale Trennlinie. Damit kann man Fliesstext besser optisch trennen)
<i></i> (Stellt den nachfolgenden Ttext kursiv (italic) dar)
<li></li> (Stellt den nachfelden Text als Liste dar)
<p></p> (Erzeugt für den folgende Text einen eigenen Absatz)
<s></s> oder <strike></strike> (Markiert den folgenden Text als durchgestrichen)
<span></span> (Erstellt einen zusammengehörenden Text, den man gemeinsam formatieren kann)
<u></u> (Formatiert den folgenden Text unterstrichen)

... die folgenden Tags jedoch weniger
<center></center> (Rückt den folgenden Text in die Mitte der Zeile)
<color></color> (Färbt einen Text in einer anderen Farbe ein)
<font></font> (Legt die Formatierung über Fontart, -Farbe und -Größe für den nachfolgenden Text fest)

Wie? Werdet Ihr jetzt sicherlich fragen.
Warum denn <center>, <color> und <font> nicht mehr? Gerade diese kann man doch immer wieder einsetzen und sind auch sinnvoll?

Ja, die Formatierungen sind nach wie vor sinnvoll, aber in dieser Form zu umständlich! Glaubt Ihr nicht?

Dann werde ich Euch jetzt in einen Bereich führen, der CSS heisst und wesentlich mehr Möglichkeiten bietet, als die oben genannten Tags zusammen.
Glaubt Ihr nicht? Wartets ab!

Zunächst wieder ein kleiner Exkurs:
Es wurde z.B. eine neue Webseite kreiert, die mehrere Seiten, Frames, Tabellen und Bereiche beinhaltet. Alles wurde mit Liebe gestaltet, die oben genannten Tags fleissig verwendet.
Nach einer Weile ist die Seite zu langweilig geworden oder es sollen einfach nur Ergänzugen, bzw. weitere Seiten hinzukommen. Und die ganze umständliche Arie mit den Formatierungen geht wieder von vorne los.
Wer bis hierher schon angefangen hat, seine eigene Webseite zu erstellen, wird jetzt sicherlich aufhorchen, wenn ich behaupte:

Formatierungen können wesentlich einfacher und zentaler erstellt werden, als jeden Bereich einer Webseite immer wieder neu zu formatieren.

Was? Wie? Wo? Gibts doch nicht!
Doch, und zwar mit Styles!

Hier ein Beispiel, wie ein Style definiert wird und damit wieder zurück zu unseren Kurs:
<style type="text/css" media="screen">
<!--
body
{ background-image:url(back.jpg); padding:10px; }
{ font-size:20px; font-family:"Arial Black",Arial,sans-serif; color:#73FBE7; }
-->
</style>
Dieser Bereich muss im Kopfteil einer Webseite definiert werden, das sollte aber jetzt auch schon jeder wissen, oder?

Nachdem die Inhalte der letzten Beiträge nun wieder ins Gedächtniss gerufen wurden, will ich erklären, was in diesem Beispiel passiert und warum wir überhaupt mit Styles arbeiten, bzw. worin die Vorteile liegen.

Zunächst einmal wird mit dem Beginn des Blocks definiert, daß sich dieser Code-Teil um CSS-Code handelt ("text/css"), die "Platzhalter" <!-- und --> begrenzen den Code-Block.
Was dazwischen folgt, definiert für die diversen Objekte innerhalb einer Webseite alle Formatierungen.
Hier wird der Rumpfteil mit einem angegebenen Hintergrundbild und einer Schriftgrösse in entsprechender Schriftart und -farbe versehen.

Ja, warum denn hier definieren, für <body> kann ich doch auch der HTML-Tag verwenden?
Richtig, aber dieses ist nur ein Beispiel und das kann eben für alle Objekte verwendet werden.
So kann man z.b. die Form, Farbe, Grösse und Schrift von Links ändern (für die gesamte Webseite oder nur für bestimmte Links), Schriftformatierungen für die gesamte Seite vorgeben, Frames formatieren und vieles mehr.

Hier mal ein Auszug aus der aktuellen Styles-Datei zu diesem Forum:
body {
background-color: #E5E5E5;
scrollbar-face-color: #E6D7C7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #CED3D7;
scrollbar-3dlight-color: #BEC4CF;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EEEEEE;
scrollbar-darkshadow-color: #DD9999;
}

font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif }
a:link,a:active,a:visited { color : #006699; }
a:hover { text-decoration: underline; color : #DD6900; }
hr { height: 0px; border: solid #BEC4CF 0px; border-top-width: 1px;}
p, td { font-size : 11px; color : #000000; }
h1,h2 { font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size : 22px; font-weight : bold; text-decoration : none; line-height : 120%; color : #000000;}

.bodyline { background-color: #FFFFFF; border: 1px #DD9999 solid; }

.forumline { background-color: #FFFFFF; border: 1px #000099 solid; }

.adminlink { background-color: #F0F8FF; border: 1px #000099 solid; }

td.row1 { background-color: #EEEEEE; }
td.row2 { background-color: #CED3D7; }
td.row3 { background-color: #BEC4CF; }
td.row4 { background-color: #E6D7C7; }

th {
color: #0000FF; font-size: 11px; font-weight : bold;
background-color: #E6D7C7; height: 25px);
}

td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
background-color:#CED3D7; border: #FFFFFF; border-style: solid; height: 28px;
}

td.cat,td.catHead,td.catBottom {
height: 29px;
border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
font-weight: bold; border: #FFFFFF; border-style: solid; height: 28px;
}
td.row3Right,td.spaceRow {
background-color: #BEC4CF; border: #FFFFFF; border-style: solid;
}

.gen { font-size : 12px; }
.genmax { font-size : 16px; }
.genmed { font-size : 11px; }
.gensmall { font-size : 10px; }
.gen,.genmed,.gensmall { color : #000000; }
a.gen,a.genmed,a.gensmall { color: #006699; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover { color: #DD6900; text-decoration: underline; }

.mainmenu { font-size : 11px; color : #000000 }
a.mainmenu { text-decoration: none; color : #006699; }
a.mainmenu:hover{ text-decoration: underline; color : #DD6900; }

.cattitle { font-weight: bold; letter-spacing: 1px; color : #006699}
a.cattitle { text-decoration: none; color : #006699; }
a.cattitle:hover{ text-decoration: underline; }

.forumlink { font-weight: bold; font-size: 12px; color : #006699; }
a.forumlink { text-decoration: none; color : #006699; }
a.forumlink:hover{ text-decoration: underline; color : #DD6900; }

.nav { font-weight: bold; font-size: 11px; color : #000000;}
a.nav { text-decoration: none; color : #006699; }
a.nav:hover { text-decoration: underline; }

.topictitle,h1,h2 { font-weight: bold; font-size: 11px; color : #000000; }
a.topictitle:link { text-decoration: none; color : #006699; }
a.topictitle:visited { text-decoration: none; color : #5493B4; }
a.topictitle:hover { text-decoration: underline; color : #DD6900; }

input,textarea, select {
color : #000000;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
border-color : #000000;
}

input.post, textarea.post, select {
background-color : #FFFFFF;
}

input { text-indent : 2px; }

input.button {
background-color : #EEEEEE;
color : #000000;
font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
}
"Ui! Das ist doch viel zu kompliziert, das lerne ich nie!"
Wird jetzt sicherlich jeder ausrufen (wollen), aber keine Angst, das ist wirklich alles deutlich leichter, als es hier dargestellt ist, man kann dafür nämlich Grundregeln aufstellen und nach einer kurzen Erklärung, wie Styles arbeiten, dürfte das Meiste dieses Beispieles schon klarer erscheinen.

Fangen wir also mit den CSS-Grundlagen an:
Jeder HTML-Tag ist als Objekt für eine CSS-Definition geeignet. Also kann ich z.B. den Tag < b > mit einer CSS-Definition belegen. Falsch!
Nicht alle Tags sind CSS-fähig!

Was? Wieso? Verwirrung!

Erste Grundregel: Vereinfacht gesagt, können nur solche HTML-Tags mit CSS formatiert werden, die selber keine Formatierungen darstellen.
Also sind Tags wie

Code: Alles auswählen

<b>, <font>, <u>
und weitere ausgenommen.
Man kann auch sagen: Überall, womit ich Text in eine andere Form und Farbe bringe, lässt sich CSS nicht anwenden.
Es macht ja schliesslich auch keinen Sinn, den Tag für Fettschrift nochmal zu formatieren, oder?
Also wären da z.B. die Tags <body>, <input> und <table> (um nur ein paar Beispiele zu nennen) sowie deren zugehörenden Objekt-Tags (Tags, die zusammengenommen z.B. eine Tabelle erstellen können und dazu dem Tag <table> untergeordnet sind) CSS-fähig (In den Beiträgen zu Tabellen und Formularen geht dieser Kurs auch noch eingehender darauf ein, wo und wie mit CSS gearbeitet werden kann).

Hieraus ergibt sich die zweite Grundregel:
Wird in einer CSS-Definition ein Tag und dessen zugehörenden Objekt-Tags mit Definitionen beschrieben, so wird diese CSS-Formatierung immer bei Verwendung dieses Tags eingesetzt. Man stellt somit eine Standard-Formatierung her.
In unserem Beispiel geschieht das z.B. für Links mittels
a.nav { text-decoration: none; color : #006699; }
Hier wird definiert, das jeder Link, der mit dem Tag <a> erstellt wird und eine Klasse <nav> enthält, ohne Unterstreichung (text-decoration: none) und in bläulicher Schrift (color: #006699) erstellt werden soll.

Was sind denn nun wieder Klassen?
Genau das macht CSS aus: Es werden Klassen erstellt, die man vordefiniert und für bestimmte Tag das Standard-Format vorgeben oder beliebig auf Tags angewandt werden können. Jede Zeile in dem obigen Beispiel ist eine Definition von Klassen.
Würde man nun diese Beispiel-Definition ohne ".nav", also nur für <a> erstellen, so würden grundsätzlich alle Links mit dieser Formatierung angezeigt, ausser, man verwendet dann eine andere CSS-Klasse.
So wurde zusätzlich ein Bezeichner "nav" hinzugefügt, der als Klassendefinition in einem Link verwendet werden muss, damit dieser die Formatierung erfährt.

Und wie wird dann diese Klasse in den Link eingebunden?
So:
<a href="http://www.oxpus.de" class="nav">OXPUS</a>
Und das ist dann auch schon das ganze Geheimnis von CSS-Klassen!
Am Ende dieses Kurses werdet Ihr alle wichtigen HTML-Tags kennengelernt haben und könnt dann auch für die entsprechenden Tags CSS-Klassen erstellen. Vorher aber nochmal zur Verdeutlichung den genauen Aufbau einer Klasse:

Variante 1:
.Klasse { Definition/Formatierung }
Hiermit wird eine Klasse erstellt, die in jedem HTML-Tag (wie gesagt: ausser den formatierenden Tags!) mittels "class=" verwendet werden können.

Variante 2:
HTML-Tag.Klasse { Definition/Formatierung }
Diese definierte Klasse gibt nur für den angegebenen Tag und würde bei der Verwendung innerhalb eines anderen Tags keine Auswirkung haben.

Die Definitionen müssen immer innerhalb geschweifter Klammern untergebracht werden, also immer zwischen "{" und "}".
Ihr könnt ja schon einmal die Griffe dafür auf der Tastatur üben, denn diese werden oftmals eingesetzt. Wer z.B. C/C++ oder PHP kennt, weiß, wovon ich rede ;)

Was kann nun alles definiert werden? Alles, was auch mit HTML-Tags möglich ist und ein paar Dinge mehr.
Hier eine Übersicht über die wichtigsten (nicht alle möglichen) Formatierungen mittels CSS:
font-family (Schriftart)
Alle Standard-Schriften die installiert sind, können hier angegeben werden. Dabei wird in der Reihenfolge der Angabe geprüft, welche Schrift vorhanden und damit verwendet wird.
Achtung: Ist eine angegebene Schrift auf dem Rechner des Anwenders nicht vorhanden, wird diese durch die nächste angegebene Schrift, wenn keine gefunden wurde durch die Standard-Schrift dessen Systems ersetzt!
Standardschriften sind z.B. 'Times New Roman', Times, Verdana, Arial, Helvetica (bei Times New Roman sollte man die Hochkommas setzen, um Fehler zu verweiden)
Dazu kann man auch sogenannte generischen Schriftarten angeben, die, nachdem keine der angegebenen Schriften gefunden wurde, verwendet werden. Diese Schriften sind fest vorgegeben und heissen wie folgt:
serif = eine Schriftart mit Serifen,
sans-serif = eine Schriftart ohne Serifen,
cursive = eine Schriftart für Schreibschrift,
fantasy = eine Schriftart für ungewöhnliche Schrift,
monospace = eine Schriftart mit dicktengleichen Zeichen.

font-style (Schriftstil)
italic = Schriftstil kursiv
normal = normaler Schriftstil

font-size (Schriftgrösse)
xx-small = winzig.
x-small = sehr klein.
small = klein.
medium = mittel.
large = groß.
x-large = sehr groß.
xx-large = riesig.
smaller = sichtbar kleiner als normal.
larger = sichtbar größer als normal.

font-weight (Schriftgewicht)
bold = fett.
bolder = extra-fett.
lighter = dünner.

font-strech (Zeichenabstand)
wider = weiter als normal.
narrower = enger als normal.
condensed = gedrängt.
semi-condensed = halb gedrängt.
extra-condensed = stark gedrängt.
ultra-condensed = extrastark gedrängt.
expanded = geweitet.
semi-expanded = halb geweitet.
extra-expanded = stark geweitet.
ultra-expanded = extrastark geweitet.
normal = normale Laufweite.

font (Schrift allgemein)
Hier kann man mehrere Definitionen hintereinander packen, um nicht die komplexeren vorangangenen Definitionen verwenden zu müssen.

text-decoration (Textdekoration - Optische Hervorhebungen)
underline = unterstrichen.
overline = überstrichen.
line-through = durchgestrichen.
blink = blinkend.
none = normal (keine Text-Dekoration).

color (Schriftfarbe)

vertical-align (vertikale Ausrichtung)
top = obenbündig ausrichten.
middle = mittig ausrichten.
bottom = untenbündig ausrichten.
sub = tieferstellen (ohne die Schriftgröße zu reduzieren).
super = höherstellen (ohne die Schriftgröße zu reduzieren).

text-align (horizontale Ausrichtung)
left = linksbündig (Wird auch ohne Angabe verwendet - Standard)
center = zentriert
right = rechtsbündig
justify = Blocksatz

white-space (Textumbruch)
normal = automatischer Zeilenumbruch (wie bei allen HTML-Tags außer <pre> und <nowrap>).
pre = Zeilenumbruch wie im Editor eingegeben (so wie bei <pre>...<pre>).
nowrap = Kein automatischer Zeilenumbruch, Umbruch möglich durch entsprechende HTML-Tags.

margin (Abstand eines Objektes zum Fenster/Frame/Objektrand für alle Seiten, wobei in der Reihenfolge oben rechts unten links formatiert wird)

padding (Abstand eines Objektesinhaltes zum Objektrand für alle Seiten im gleichen Umfang)

border-width (Dicke eines Rahmens um ein Element - beim Internet Explorer muss dazu border-style mit angegeben werden!)
thin = dünn.
medium = mittelstark.
thick = dick.

border-xxx-color (Rahmenfarbe)
border-top-color definiert die Rahmenfarbe für oben,
border-left-color die Rahmenfarbe für links,
border-right-color die Rahmenfarbe für rechts,
border-bottom-color die Rahmenfarbe für unten.

border-style (Rahmenart - kann ebenfalls mit den Zusätzen top, left, right und bottom verwendet werden)
none = kein Rahmen (bzw. unsichtbarer Rahmen).
hidden = kein Rahmen (bzw. unsichtbarer Rahmen).
dotted = gepunktet.
dashed = gestrichelt.
solid = durchgezogen.
double = doppelt durchgezogen.
groove = 3D-Effekt.
ridge = 3D-Effekt.
inset = 3D-Effekt.
outset = 3D-Effekt.

border (Stellt die Zusammenfassung o.g. Border-Formatierungen dar)

background-color (Hintergrundfarbe)

background-image:url () (Hintergrundbild)

:link, :visited, :hover, :active (Pseudoformate für Links - Verweise. Die Reihenfolge ist so einzuhalten!)
link = allgemein
visited = besucht
hover = unter Mauszeiger
active = gerade aufgerufen

top (Startposition von oben)

left (Startposition von links)

bottom (Startposition von unten)

right (Startposition von rechts)

width (Breite)

min-width (Mindestbreite)

max-width (Maximalbreite)

height (Höhe)

min-height (Mindesthöhe)

max-height (Maximalhöhe)

display (Anzeigeart bzw. Nichtanzeige ohne Platzhalter)
block = Erzwingt einen Block - das Element erzeugt eine neue Zeile.
inline = Erzwingt die Anzeige im Text - das Element wird im laufenden Textfluss angezeigt.
list-item = wie block, jedoch mit einem Aufzählungszeichen.
none = Element wird nicht angezeigt und es wird auch kein Platzhalter freigelassen.

visibility (Anzeige bzw. Nichtanzeige mit Platzhalter)
hidden = Der Inhalt des Element wird zunächst versteckt
visible = Der Inhalt des Element wird zunächst angezeigt

cursor (Verändert den Mauszeiger)
auto = automatischer Cursor (Normaleinstellung).
default = Plattformunabhängiger Standard-Cursor.
crosshair = Fadenkreuz.
pointer = Zeiger.
move = Kreuz zum Bewegen des Elements.
text = Textmarke.
wait = Wartesymbol.
help = Hilfesymbol.
url("Datei") = Beliebiger Cursor, "Datei" sollte GIF- oder JPG-Grafik sein.

scrollbar-base-color = Basisfarbe der Scroll-Leiste

scrollbar-3dlight-color = Farbe für 3D-Effekte

scrollbar-arrow-color = Farbe für Verschiebepfeile

scrollbar-darkshadow-color = Farbe für Schatten

scrollbar-face-color = Farbe für Oberfläche

scrollbar-highlight-color = Farbe für oberen und linken Rand

scrollbar-shadow-color = Farbe für unteren und rechten Rand

scrollbar-track-color = Farbe für freibleibenden Verschiebeweg
Definiert wird innerhalb der Klammern immer mit o.g. Formatierungen, gefolgt von einem Doppelpunkt und dem entsprechenden Wert.
Getrennt werden die Formatierungen mit einem Semikolon ";".
So könnte folgendes definiert werden:
a.nav {color: #FF0000; backgound-color: #00FFFF }
Ihr könnt ja mal versuchen, was das bedeutet, mehr wird auch an dieser Stelle mal wieder nicht verraten.

Doch wo setze ich nun, nachdem ich diese Massen an Formatierungsmöglichkeiten kenne, an und definiere das Ganze?
Da gibt es 3 Punkte, an denen Styles definiert werden können:

Mit Hilfe einer externen Datei (Sollte sinnigerweise .css als Dateiendung haben)
Hierzu werden in eine neue Datei alle Formatierungen aufgeführt. Diese müssen nicht mit <style></style> umschlossen werden und auch kein <html>-Tag tragen. Eingebunden wird diese Datei mittels <link>, wie in einem vorherigen Beitrag beschrieben.
Hiermit kann man die CSS-Definitionen zentral für die gesamte Webseite ablegen, auch wenn diese aus mehreren Dateien bestehen sollte. Ein Einbinden mittels <link> genügt dann, ohne den Definitionsblock wiederholen zu müssen. Dadurch wird die Webseite beschleunigt, da die Definitionsdatei nur einmal geladen wird!

Innerhalb eines HTML-Dokumentes im Kopfbereich
Es gibt das gleiche, wie für die externe Datei, jedoch muss dieser Block dann mit <style></style> umschlossen werden.

Innerhalb einzelner HTML-Tags
Dabei wird im öffnenden Tag (bei Links innerhalb des Tags <a>) mittels der Anweisung "style=" die CSS-Formatierung erstellt und gleichzeitig auch verwendet.

Und wie verwende ich eine per externer Datei oder im Kopfteil definierte CSS-Formate?
Wer es nicht vergessen hat:
Mittels dem Aufruf "class=" analog "style=" innerhalb des öffnenden HTML-Tags bei global erstellten, also Tag-losen Klassen, bzw. ohne diese Angaben, wenn der Tag grundlegend mittels CSS formatiert und auch so dargestellt werden soll.
Selbstverständlich kann man diese Format-Vorgaben auch mittels einer anderen Klasse oder den bekannten HTML-Tags umformatieren.

So, das zu den CSS-Formaten. Zu bedenken ist dabei zuletzt noch, daß immer nur ein Tag oder ein mit einem Tag wie <span> umschlossener Textblock komplett mittels den CSS-Anweisungen formatiert wird, solange man innerhalb des Textes die Formatierung nicht anders definiert.
Mit <span> sähe das z.B. so aus:
<span class="CSS-Klasse">Text</span>
<span style="CSS-Formatierungen">Text</span>
Gut. Damit wir jetzt auch endlich mal vorwärts kommen, gehen wir im nächsten Beitrag eine weitere Möglichkeit durch, Text auf der Webseite zu positionieren, bzw. die Positionen festzulegen: Die Tabellen unter HTML.
Zuletzt geändert von oxpus am Mi 09.Nov, 2005 18:55, insgesamt 1-mal geändert.
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Benutzeravatar
oxpus
Administrator
Beiträge: 28737
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Wir haben nun gelernt, die Webseite mit Frames in Bereiche einzuteilen. Aber wie kann man denn nun deren Inhalt strukturiert darstellen, gerade wenn es sich um gleichlautende in Spalten am besten darzustellende Daten handelt?
Dazu benutzen wir Tabellen.
Dabei ist dieses nicht zu verwechseln mit Tabellen wie in einer Tabellenkalkulation oder einer Datenbank, sondern um die reine Formatierung und Ausrichtung des Seiteninhaltes, nicht deren Inhalte!
Wer mit modernen Textverarbeitungsprogrammen arbeitet, wird diese Funktionen kennen und z.B. gerade beim Entwurf von Formularen zu schätzen wissen.

Schauen wir doch nochmal kurz auf den Foren-Index dieses Boards: http://www.oxpus.de/phpBB/index.php
Was sehen wir da? Richtig! Daten in Tabellenform.
Im Grunde besteht das gesamte Board aus Tabellen, es gibt so gut wie keine Seite, auf der keine Tabelle enthalten ist und das fängt mit dem Kopf den Boards an, geht über den Index und endet mit dem Fuß auf jeder Seite.

Doch wie werden nun Tabellen erstellt?
Im Grunde sehr einfach, wenn man sich das folgende Muster anschaut:
<table>
<tr>
<td>
Inhalt Zelle 1
</td>
<td>
Inhalt Zelle 2
</td>
</tr>
</table
Schaut kompliziert aus? Stimmt, ist es auch, wenn man nämlich mit mehreren Zeilen (<tr>) und Spalten (<td>) sowie verschachtelten Tabellen arbeitet.
Glaubt mir, auf diesen Board gibt es Seiten, die das Ganze arg auf die Spitze treiben.

Zurück zum Beispiel: Was passiert da und was wird angezeigt?

Zunächst muss dem Browser angegeben werden, daß eine Tabelle zu erstellen ist.
Dieses wird mittels <table> eingeleitet.
In einer Tabelle gibt es nun auch Zeilen und Spalten. AUch das wird in unserem obigen Beispiel dargestellt und wer mitgezählt hat, sollte es bereits wissen: Eine Zeile mit zwei Spalten und den angegebenen Texten.

Um weiter fortfahren zu können, zunächst ein kleiner Grundsatz:
Es können zwar Tabellen ineinander verschachtelt, also Zeilen, Spalten oder gar einzelne Zellen durch Tabellen ersetzt werden, aber dazu sollte man immer daran festhalten, erst eine Zeile zu beginnen und dann die Spalten darin zu beschreiben, um die einzelnen Zellen definieren zu können.

Wie? Was? Zu kompliziert?

Ja, genau das ist das Problem, denn wenn man sich nicht vorstellen kann, was man mit der Definition einer Tabelle erreicht. Auch wird sich im Nachgang derjenige damit schwer tun, das verunstaltete Ergebnis schnell korrigieren oder gar ändern zu können.
Also Tabelle einleiten (<table>), Zeile beginnen (<tr>) und dann die Spalten dieser Zeile festlegen (<td>).
Es geht zwar auch in anderer Reihenfolge, aber das ist nicht unbedingt sauber und führt bei einer Analyse zu einigem Kopfzerbrechen (auch für den Browser!).

Das Grundgerüst hätten wir nun, wären da noch ein paar Regeln zu beachten:
Eine Tabelle wird ohne Angabe von Massen immer nur so breit und hoch, wie der jeweilige Inhalt hergibt und wird auch immer alles (auch die Tabelle selber) linksbündig dargestellt.
Unschön? Anhilfe kommt später.
Dazu muss man beachten, daß alle Zeilen die gleiche Spaltenanzahl der ersten Zeile haben! Die Breite der Spalten wird dabei immer mittels Formatierungen oder Inhalte definiert und über die gesamte Tabelle berechnet!

Schwer zu verstehen, hier ein Beispiel:

Zeile 1 mit 5 Spalten
Zeile 2 mit 4 Spalten

Geht nicht? Geht doch!
Aber was passiert?
Kurz: In der Zeile 2 ist die Spalte 5 leer! Und gerade das macht bei farbigem Hintergrund der Zellen ein unschönes Bild.
Das gleiche gilt auch für Zeilen:
Jede Zeile ist so hoch, wie die erste Spalte definiert wurde - sei es durch den Inhalt oder durch Formatierungen.
Kleinere Spalten in dieser Zeile zerstören damit auch wieder das Layout.

Aber wie kann man Abhilfe schaffen?

Zu den gerade genannten Layout-Fehlern können noch viele weitere dazukommen, daher beschränken wir uns zunächst auf die genannten, das ist schon schwer genug.

Um eine Breite einer Tabelle oder Spalte anzugeben, gibt es den Tag "width", den man mit Pixel oder Prozent angeben kann. Dazu kann man mit "align" und "valign" die Tabelle oder den Inhalt einer Zelle horizontal und vertikal ausrichten. Das gleiche ist auch für gesamte Spalten möglich.
Bei Zeilen funktionieren diese Angaben weniger, aber dafür muss man hier ja auch eher die Höhe angeben, welche mit "height" definiert wird. Prozentangaben funktionieren hier weniger, da die Tabelle immer nur so hoch/lang ist, wie der darzustellende Inhalt, ausser, man verwendet height explizit mit Pixelangaben!
Die Höhe sollte man aber dennoch nicht in der Zeilendefinition, sondern immer in der Spaltenbeschreibung angeben. Dadurch passieren weniger Fehler.

Doch wie werden diese Tags genutzt?
Hier ein komplettes Beispiel:
<table width="100%">
<tr>
<td width="50%" align="center">
<span style="color: #0000FF">Hallo Welt</span>
</td>
<td width="50%" align="right">
<span style="color: #FF0000">Hallo Welt</span>
</td>
</tr>
<tr>
<td colspan="2" height="25" align="center" valign="middle">
<span style="background: yellow">Hier eine Fußzeile</span>
</td>
</tr>
</table>
Zu schwer? Folgende Auflösung:

Dargestellt wird in rot, mittig in der linken Fensterhälfe der Text "Hallo Welt", am rechten Bildschirmrand der gleiche Text, diesmal in blau.
Darunter eine Zeile über die gesamte Fensterbreite hinweg mit dem Text "Hier eine Fußzeile" und dem Hintergrund in gelb. Die Fußzeile ist 25 Pixel hoch.
Die Spalten werden also in der beschriebenen Reihenfolge von links nach rechts, die Zeilen analog von oben nach unten dargestellt.

Also 2 Zeilen mit 2 Spalten und insgesamt 3 Zellen.

Moment! 2 Spalten in 2 Zeilen sind doch 4 Zellen und nicht 3!?!
In unserem Beispiel nicht!

Wer sich dieses Beispiel genau angesehen hat, wird auch gleich merken: Da ist ein Tag angegeben, der noch nicht bekannt ist!
Richtig: "colspan"!
Dieser Tag gibt an, über wie viele Spalten eine Zeile ausgedehnt werden soll. Dabei geht der Browser immer von den Spalten der ersten Zeile aus!
"colspan=1" ist standard und wird nicht angegeben.

Geht das mit Zeilen auch? Ja. Nur benutzt man dazu "rowspan". Auch damit kann man eine Zelle über mehrere Zeilen vergrössern, der Fachmann sagt dazu verbinden.

"rowspan" wird dabei in der Regel auch wie "colspan" in dem Tag <td> untergebracht, funktioniert aber auch im Tag <tr>.

Steigern wir nun die Schwierigkeitsstufe ein wenig mit folgender Frage:
Wie wird denn nun die einzelne Zelle formatiert?

Das geschieht analog den bereits beschriebenen CSS-Formatierungen oder HTML-Tags. CSS-Klassen oder CSS-Styles kann man dazu in allen Tabellen-Tags einfügen, also immer zwischen dem Tag-Namen (z.B. "table") und dem Grösserzeichen ">".
So ist eine Tabellenhintergrundfarbe der Tabelle in rot folgendermassen darzustellen:
<table style="background: #FF0000">
Für eine Zeile, Spalte oder gar Zelle analog möglich, eröffnen sich beinahe unendlich viele Möglichkeiten und da kommen die bereits erwähnten CSS-Klassen verstärkt zum Tragen, mit denen ganze Blöcke innerhalb der Tabelle automatisch (wir erinnern uns: Klassen mit HTML-Tag) oder manuell (Klassen ohne HTML-Tag) formatieren kann und das auf schnelle und einfache Weise.

Weitere Anmerkungen zu den Formatierungen:
Wie im obigen Beispiel genannt, wurden zwischen <td> und </td> der Tag <span> verwendet. Dieser dient im genannten Fall dazu, lediglich den Inhalt dieser einen Zelle zu formatieren. Der schliessende Tag </span> ist im Grunde nicht nötig, da </td> die Zelle mit allen Angaben abschliesst. Mit diesen Tags innerhalb einer Zelle kann man ggf. die Formatierung durch die Spalte selber nicht umgehen! Daher aufpassen, wo man was angibt, durch probieren kommt man schnell dahinter.

Und genau darin liegt der Unterschied zwischen Tabellen und losem Text: Eine Tabelle, die darin enthaltenen Zeilen, Spalten und Zellen sind jeweils in sich abgeschlossen und an den einzelnen Tags angegebene Formatierungen betreffen auch nur diesen Bereich:
Formatierungen beim Tag </td> betreffen die Zelle selber (sowie den Inhalt), an der Position von <tr> wird die gesamte Zeile entsprechend formatiert und bei dem Tag <table> die komplette Tabelle.

Und nun zu einem Problem:
Die Schwierigkeit bei der Erstellung von Tabellen besteht nicht unbedingt im Aufbau, sondern darin, die Formatierungen für die einzelnen Tabellenelemente mittels CSS möglichst einfach aber flexibel zu gestalten, um die Webseite mit allen Seiten im gleichen Layout halten zu können und spätere Änderungen/Ergänzungen schnell durchzuführen.
Da muss man sich schon genauer Gedanken über den Aufbau seiner Tabellen machen. Ebenso schwer ist es, immer die Spaltenanzahl gerade bei komplexeren Tabellen über alle Zeilen hinweg einzuhalten.
Dieses betrifft einem um so mehr, je öfter man Tabelleninhalte mit einer weiteren, also verschachtelten Tabelle, umschliesst.

Um nun auch Rahmen um die Zellen oder nur ganzer Tabellenbereiche zu erhalten, muss man mit "border" genau wissen, wo man was angibt. Hier ist ebenfalls wieder höchste Vorstellungskraft gefragt, da man bei Layoutfehlern wieder auf die richtige Stelle im HTML-Code kommen muss.
Ebenso kann man, sollte der Hintergrund einer Tabelle farbig dargestelt werden, auch die Zellen zueinander mit etwas mehr Abstand versehen, um ohne Rahmen eine modernere Ansicht zu erhalten. Dazu in den jeweiligen Tags "cellspacing" in Pixel angeben.
Die Formatierung "cellpadding", ebenfalls in Pixel, gibt an, wie weit der Zellinhalt vom Zellrand entfernt dargestellt werden soll. Und das gilt für alle Seiten gleichermassen.
Im Beitrag über die Formatierungen mit CSS wurde dieses entsprechend behandelt.

Zuletzt sei noch erwähnt, daß man Tabellenköpfe mit <th></th> erstellen kann, die im Grunde wie <td></td> funktionieren, jedoch aufgrund des unterschiedlichen Tag-Namens mittels CSS auch differenziert formatiert werden können.

Des weiteren existieren die Tags <thead>, <tbody> und <tfoot>, mit denen die Tabelle in Kopf, Rumpf und Fuss eingeteilt werden können. Auch diese Tags werden zunächst für einzelne unterschiedliche Formatierungen verwendet, können aber auch dazu dienen, nach bestimmten Kriterien Bereiche der Tabelle ein-, bzw. auszublenden. Dieses ist mit der Option "display: none;" für verstecken und "display: " für anzeigen möglich und könnte z.B. mittels Javascript und einem Formular, zu dem wir nun im nächsten Beitrag kommen werden, darstellbar.
Zuletzt geändert von oxpus am Mi 09.Nov, 2005 18:56, insgesamt 1-mal geändert.
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Benutzeravatar
oxpus
Administrator
Beiträge: 28737
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Bislang haben wir viel über den Aufbau, die Gestaltung, Einteilung und Formatierung von Inhalten gelernt.
Man könnte auch sagen: Die Webseite kann erstellt werden.

Aber ein Punkt fehlt noch: Die Kommunikation mit den User.
Genauer: Die Möglichkeit, dem Anwender etwas der Webseite mitteilen zu können. Interaktion nennt das der Fachmann.

Wie hier auf dem Board gibt es verschiedene Button und Eingabefelder (Textfelder - einzeilig/mehrzeilig -, Häckchen, Auswahlfelder) und um die werden wir uns jetzt kümmern.

Alle interaktiven Eingaben, die ein Benutzer vornehmen kann, werden mittels "Eingabe"-Tags definiert und entgegengenommen.

Da Formulare in reinen HTML-Seiten ohne eine ergänzende Websprache wie Java, PHP oder ähnliches nicht viel Sinn macht, werden wir uns auf den Aufbau und die Funktionsweise beschränken, auf Interaktionen ohne Formulare geht der Artikel "JavaScript" ein.

Dann mal los:
<form>
<input type="button" value="Hallo Welt" name="click">
</form>
Damit ist ein komplettes Formular in einer sehr einfachen Weise beschrieben.

Was macht man damit? Nicht viel, denn es wird lediglich ein anklickbarer Button erstellt, der hier nichts weiter auslöst.
Unschön? Ja, denn mehr kann HTML alleine nicht.

Aber halt, da ist eine Möglichkeit, Formulare auch mit reinem HTML zu einem Sinn zu führen: Button für den Aufruf von Seiten anstelle von Textlinks!

Wie geht das nun?

Kommen wir dafür zunächst zum Beispiel zurück:
<form> leitet ein Formular ein. Alle zwischen diesem Tag und </form> befindlichen "Eingabe"-Tags werden zurückgegeben und könnten ausgelesen werden.
In unserem Beispiel ist legiglich per <input>-Tag ein Button erstellt worden, der die Aufschrift "Hallo Welt" trägt und intern auf den Namen "click" hört.

Soweit schon einmal verständlicher, geht es jetzt an das Eingemachte:
<form action="seite2.htm">
<input type="button" name="click" value="Seite 2">
</form>
Hiermit wird dem Formular angewiesen, beim "Absenden" - in unserem Beispiel das Klicken auf den Button mit der Aufschrift "Seite 2" - die Aktion auszuführen. In diesem Falle die Seite "seite2.htm" zu laden.

Und damit wäre auch schon die erste und eine der wenigen Anwendungsgebiete von Formularen in reinen HTML-Seiten erklärt: Ersatz von Textlinks durch Buttons.

Aber HTML kann nicht nur Button darstellen. Bereits oben genannte Eingabefelder, Auswahlfelder und Häckchen kann man auch erzeugen. Hier die entsprechenden Tags dafür:

<input type="button" value="Button">
erzeugt einen Button mit der Aufschrift "Button"

<input type="text" size="30" maxlength="50" value="Eingabe">
erzeugt ein einzeiliges Textfeld mit einer Länge von 30 Zeichen und maximaler Eingabemöglichkeit von 50 Zeichen. Enthalten ist darin schon der Text "Eingabe". Soll das Textfeld leer sein, so ist diese Eingabe wie folgt zu definieren:
<input type"text" size="30" maxlength="50" value="">

<input type="submit" name="submit" value="Absenden">
erstellt einen Button, der alle Werte des Formulares per Link an die im Formular unter "action=" angegebene Datei übergibt.
Submit ist dabei ein festgelegter Befehl, der mit dem Inhalt "name=" gefüllt wird. Von allen Eingaben werden an eine Datei, wie unter "action=" eingetragen, alle Variable gemäß "name=" und den Werten "value=" übergeben. Dabei können beinahe beliebig viele Eingabefelder verwendet werden, beschränken sollte man sich jedoch pro Webseite auf wenige Felder, da es ansonsten auch unübersichtlich wird.
Der somit aufgerufenen Datei werden also somit alle eingegebenen Werte (value=) in den entsprechenden Variablen (name=) übergeben.

<input type="checkbox" name="haken" value="1">
erzeugt ein kleines Häckchenfeld, das man aktivieren und deaktivieren kann. In diesem Beispiel ist es beim Erstellen deaktiviert, im folgenden Beispiel mittels "checked" aktiviert, d.h. mit gesetztem Haken:
<input type="checkbox" name="haken" value="1" checked="checked">

<input type="radio" name="option" value="1">Ja<br />
<input type="radio" name="option" value="0">Nein

Wie jetzt, zweimal ein "Eingabe"-Tag mit den selben Namen? Ja, das ist richtig, denn HTML lässt dann die Eingabe in nur einem der gleich benannten Felder zu. In diesem Fall zwei Radio Button, aus denen man nur einen auswählen kann. Das klappt auch bei "type=checkbox".
Auch hier kann man mit "checked=" einen der beiden beim Seitenaufbau schon aktivieren.

<textarea cols="20" rows="50" style="width: 150px" name="nachricht">Texteingabe bitte hier</textarea>
erzeugt ein mehrzeiliges Textfeld (wie beim Posting hier auf dem Board) mit der Anzahl an Spalten "cols=" und Zeilen "rows" und einer dargestellten Breite von hier 150 Pixel.
Und warum steht denn der Text nach dem Tag?
Ansonsten könnte man vorgegebenen mehrzeiligen Text nicht darstellen lassen. Ihr seht ja auch den Endtag </textarea>.

Damit ist auch schon das Wichtigste zu den Eingabemöglichkeiten und Formularen unter reinem HTML aufgezeigt.
Selbstverständlich können auch die Einfabefelder mittels HTML-Tags oder CSS formatiert werden.

Weiterführende Informationen zu den Formularen unter HTML gibt es in einschlägiger Lektüre und gerade bei Java(script) und PHP werden Formulare sehr häufig benutzt und ausführlich erklärt, daher wird hier auf eine nähere Erklärung verzichtet.
Zuletzt geändert von oxpus am Mi 09.Nov, 2005 18:56, insgesamt 1-mal geändert.
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Benutzeravatar
oxpus
Administrator
Beiträge: 28737
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Hier endet nun der HTML-Workshop.

Das wichtigste für die ersten Schritte zur eigenen Webseite ist beschrieben, alles kann ein solcher Workshop aber nicht abdecken, dafür ist HTML trotz der einfachen Syntax zu umfangreich. Es sei an dieser Stelle nochmals auf die eingangs erwähnte Webseite selfHTML verweisen, die sehr umfangreich und ausführlich alles rund um HTML, Java/-script und sogar CSS, XML und Ähnlichem erklärt.

Sollten durch diesen Kurs fragen offen geblieben sein, hilft das Boardteam in den Foren gerne weiter.
Fehler im Kurs bitte an OXPUS melden, damit diese behoben werden können.
Zuletzt geändert von oxpus am Mi 09.Nov, 2005 18:57, insgesamt 1-mal geändert.
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Antworten