schlex

In diesem kleinen Lehrgang werden wir die Grundstruktur einer HTML-Seite unter die Lupe nehmen und los geht es:


Kurz zur Geschichte von Html:
Bereits im Jahr 1990 entwickelte der angergierte Forscher Tim Berners-Lee im Hochenergieforschungszentrum CERN/BERN/SCHWEIZ eine Möglichkeit neben allein den Texten im Internet, ebenfalls Formeln oder Grafiken in ein Projekt unterzubringen. Das ganze wurde die Geburtstunde von HTML, welches damals direkt auf das SGML basierend war. Das Internet konnte von nun an gedeihen, die ersten Webseiten wurden im Internet eingerichtet und über einen HTTP-Server dem User angeboten. Ein Vorteil von Html ist unter anderem der einfache Aufbau und die recht unkomplizierte Nutzung. Was bedeutet eigentlich die Abkürzung (HTML)? Der volle Wortlaut nennt sich: Hypertext Markup Language, was die Verknüpfung einzelner Dokumente und Ziellinks untereinander bedeutet. Mit dieser einfachen Möglichkeit ist es per Mausklick möglich sich schnell von einem zu einem anderen Dokument zu "navigieren". Die Grundidee zu Html entstammte jedoch dem Programm TeX, das Programm wurde bereits Ende der 70er Jahre von der Universität in Standford, durch den Professor "Donald Knuth" entwickelt. Ohne dessen Vorarbeit wäre die Weiterentwicklung seitens Berners-Lee wohl kaum vorstellbar gewesen. Die Sprache HTML hat sich seit Erschaffung dieser jedoch in ziemlich krassen Schritten weiterentwickelt. Es begann mit HTML 1.0, diese Html-Sprache spielt in der heutigen Zeit jedoch keine so große Rolle mehr in der Webseitenprogrammierung. Aufgebaut hat Html 1.0 auf das Tex-Textsatz-System welches unter UNIX verfügbar gewesen ist. Die erste Version verfügte nur über die einfachsten Elemente wie zum Beispiel der Überschrift und einigen Textformatierungsbefehlen, doch auch Grafikelemente konnten in Html 1.0 schon integriert werden. Mit der zweiten Version Html 2.0 wurde schon ein weitere Schritt nach vorne getan, weitere Spezifizierungen Seitens des W3C wegen einiger Konflikte mit Netscape wurden durchgeführt und auch die Sprache an sich wurde in einigen Punkten optimiert. Mit der Html-Version 3.2 wurden einige weiter Html-Standards vom W3C-Konsortium definiert, welche nun auch die unterschiedlichen Browser nahezu Perfekt beherrschten, jedoch auch immerhin noch weitere Differenz Fehler bei Nutzung unterschiedlicher Webbrowser auftraten. Ein erheblicher Nachteil war wohl in dieser Version dass keine Frame-Spezifikationen unterstützt wurden, Tabellen konnten jedoch Problemlos dargestellt werden. Mit der Html-Version 4.0 wurde dann aber alles anders. Viele nützliche Änderungen und Tunes an der Html-Spache selbst, aber auch durch einige neue Standards machten diese Version zu der "make my day" Sprache überhaupt. Im Jahr 1998 wurde die Version 4.0 von Html offiziell freigegeben, das W3C-Konsortium berücksichtige nun auch ergiebig die Wünsche seitens der kommerziellen Sparte um neue Vorschläge in die Standards zu integrieren. In Html 4.0 wurde ein wesentlicher Schritt getan, im Gegensatz zur Vorgänger-Version 3.2 von Html wurden nun auch Frames unterstützt, aber auch Scriptsprachen und CSS fanden in der aktuellen Version Verwendung. Anfang des Jahres 2000 wurde ein weiterer Standard des W3C-Konsortiums eingeführt, XHTML war geboren. Xhtml soll quasi eine Brücke zwischen den recht einseitigen Elementen von HTML und den komplexeren Einsatzgebieten von XML bieten. Auch im Bereich der Standards wurde in XHTML mächtig nachgerüstet, außerdem wurden so genannte DTDs, also definierte Datenstrukturen die zum Beispiel an andere Anbieter weitergereicht werden können eingeführt.
Der Grundaufbau einer Html-Seite:
INFO:
Kurz gesagt besteht eine Html-Seite aus zwei Elementen, zum einen der Kopfbereich und der Body-Bereich in dem die Inhalte der Seite dargestellt werden. Der Kopfbereich einer Html-Seite beinhaltet hierbei zum Beispiel die Titel-Information einer Webseite. Hier ein kurzes Beispiel für den Aufbau einer Html-Grundstruktur:

:: Beispiel-HTML-Grundstruktur:

--------------------------------------------------------------------------------
<html>
<head>
<title>
TITEL DER SEITE
</title>
</head>

<body>
INHALT DER SEITE
</body>

</html>

Im vornherein sei gesagt dass Html aus verschiedenen so genannten verschachtelten Elementen besteht. Hier wird dem Browser der die Webseite einliest deutlich gemacht, mit was er es genau zu tun hat und wie er dieses Element zu behandeln hat.

Erklärung der einzelnen Tags:

<html> </html>

In diesem Bereich wird dem Webbrowser mitgeteilt dass es sich um dass aktuelle Dokument um eine HTML-Datei handelt. Eingeleitet wird der HTML-Block mit dem <> und abgeschlossen wird der zu behandelnde Bereich mit <>. Alles was sich innerhalb dieses Bereiches befindet wird der Webbrowser als HTML behandeln.

<head> </head>

Dieser Teil spiegelt den Kopf einer Html-Datei wieder hier werden Informationen wie zum Beispiel der Titel der Seite gespeichert werden, aber auch optionale Meta-Informationen, externe CSS-Anweisungen oder Javascript Einbindungen werden hier eingefügt.

<body> </body>

In dem Body-Bereich einer Html-Seite werden alle Informationen und Elemente eingefügt, die der Benutzer der die Seite beguckt im Browser zu sehen bekommt. Zum Beispiel: Tabellen, Grafiken oder Texte.

<title> </title>

Mit diesem Tag geben Sie ihre Webseite einen Titel welches am besten den Inhalt der aktuellen Seite widerspiegelt. Im Bereich von Suchmaschinen-Crawler ist dieser Tag als besonders wichtig einzustufen, da ihre Webseite sonst mit einer vordefinierten "Unknown Document" oder ähnlichem ausgestattet wird.

Doctype Definitionen
Wenn Sie Ihre Html-Seite in einer speziellen Html-Sprachversion erstellen, können Sie die jeweilige Kennzeichnung der aktuellen Sprachversion mit den folgenden HTML-Tags angeben. Eingeleit wird das ganze über die !DOCTYPE Anweisung. Diesen Tag müssen Sie vor der gesamten Html-Struktur angeben, also noch vor <html>. Hierbei gibt es noch einige weitere Parameter, wie zum Beispiel dem Sprach-Parameter. Dieser muss als Standard jeweils, immer in Englisch angegeben werden, da HTML als Muttersprache Englisch hat. Definiert wird der Englisch-Tag mit der Abkürzung "EN". Folgende Typen der DTDs stehen Ihnen zur Einleitung des Quellcodes zur Verfügung:

[A.]
CODE:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 2.0//EN">

[B.]
CODE:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">

[C.]
CODE:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">

[D.]
CODE:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

[E.]
CODE:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

[F.]
CODE:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-strict.dtd">

[G.]
CODE:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">

[H.]
CODE:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 frameset//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-frameset.dtd">

Bedeutungen:

[A.]
Leitet HTML in der Version 2.0 ein

[B.]
Leitet HTML in der Version 3.2 ein

[C.]
Leitet HTML in der Version 4.0 ein

[D.]
Leitet HTML in der Version 4.0 in Verbindung mit Frames ein

[E.]
Leitet HTML in der Version 4.0 ein, mit Verwendung von Stylesheets und verbesserte Darstellungen

[F.]
Leitet HTML in der Version XHTML in Verbindung mit CSS ein

[G.]
Leitet HTML in der Version XHTML ein, jedoch für ältere Browser die kein CSS unterstützen

[H.]
Leitet HTML in der Version XHTML ein, in Verbindung mit Frames

Ein Einsatz-Beispiel:

:: Beispiel - DTD Einsatz:

--------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 2.0//EN">
<html xmlns="http://www.w3.org/TR/xhtml1">

<head>
<title>
TITEL DER SEITE
</title>
</head>

<body>
INHALT
</body>

</html>

Text mit Html formatieren:
Texte in Ihrer Webseite sind ja schön und gut, jedoch tunen Sie diese mit der richtigen Formatierung noch ein wenig in der Darstellung auf. In diesem Abschnitt werden wir die gebräuchlichsten TAGs zur Formatierung von Texten durchgehen. Die Formatierungstags für den Text sowie auch andere Elemente die Sie dem Benutzer über dem Browser anzeigen lassen wollen, müssen in den <body> Bereich eingebunden werden.

:: Beispiel - DTD Formatierungen:

--------------------------------------------------------------------------------
Überschriften:

<h1>TEXT</h1>
Überschrift-Format: H1

<h2>TEXT</h2>
Überschrift-Format: H2

<h3>TEXT</h3>
Überschrift-Format: H3

<h4>TEXT</h4>
Überschrift-Format: H4

<h5>TEXT</h5>
Überschrift-Format: H5

<h6>TEXT</h6>
Überschrift-Format: H6


--------------------------------------------------------------------------------
Hervorhebungen:

<b>TEXT</b>
Fette Schrift

<i>TEXT</i>
Kursive Schrift

<big>TEXT</big>
Vergrößerte Schrift

<small>TEXT</small>
Verkleinerte Schrift

<u>TEXT</u>
Unterstrichener Text

<blink>TEXT</blink>
Blinkende Wörter

<s>TEXT</s>
Text durchgestrichen

_TEXT
Text tiefgestellt

^TEXT
Text hochgestellt

<tt>TEXT</tt>
Text Schreibmaschinenform


:: Beispiel - Weitere Elemente:

--------------------------------------------------------------------------------
<br />
Erzeugt einen Zeilenumbruch

<p>TEXT</p>
Leitet einen Paragraph ein
und schließt diesen wieder ab

&nbsp;
Erzeugt ein Leerzeichen

<div>INHALT</div>
Ein Div-Tag Container wird erstellt


--------------------------------------------------------------------------------
Sonderzeichen:

ä = &auml;

Ä = &Auml;

ö = &ouml;

Ö = &Ouml;

ü = &uuml;

Ü = &Uuml;

ß = &szlig;

& = &amp

" = &quot

< = &lt

> = &gt



Bilder mit Html einbinden
In diesem Abschnitt wird Ihnen gezeigt wie Sie eine Grafik in Ihre Webseite einbinden können. Hierbei können die Grafiken auch jeweils mit weiteren Unteroptionen belegt werden um beispielsweise die Größe zu verändern, einen Rahmen zu erzeugen oder dem Bild einen Alternativtext zu geben. Das Tag welches für die Bilderdarstellung angewendet werden muss lautet <img>. Hier eine Übersichtstabelle wie Sie den <img> Html-Tag anwenden und ausbauen können:

:: Beispiel - Bilder einbinden:

--------------------------------------------------------------------------------
<img src="datei.jpg">
Ein Bild wird angezeigt.
Das Bild muss sich in der gleichen Ebene befinden
wie die HTML-Datei. Andernfalls ist der
Pfad zu der Datei zu setzten, Beispiel:
/ordner/datei.jpg

Weitere Optionen:

border="1"
Um das Bild wird ein Rahmen gelegt
Je höher die Zahl umso dicker der Rahmen!

title="Bildtitel"
Hier geben Sie einen Text ein der das Bild
beschreibt. Wenn ein Benutzer mit der Maus über
dem Bild stehen bleibt wird dieser Text angezeigt.

alt="Alternativtext"
Das Alt-Tag Attribut weist Ihrem Bild einen
alternativen Text zu, falls das Bild
einmal nicht vom Server geladen werden kann.

align"center"
Mit dieser Option steht Ihnen die Möglichkeit
zur Verfügung Ihr Bild auszurichten, hierbei
gibt es die folgenden Anweisungen, zum einen:
center, left und right


Html-Code Beispiel:

<img scr="datei.jpg" title="TITEL"
alt="TEXT" border="1" align="center">




Links mit Html setzen:
Die wohl wichtigste Eigenschaft einer Homepage an sich ist dass man durch Links andere Seiten der Homepage aufrufen kann oder einen Link auf eine externe Internetpräsenz setzen kann. Ohne Hyperlinks wäre dass Internet nicht dass was es zum heutigen Tage wäre. Die Haupteigenschaft von Links ist dass man Sie zur Navigation einsetzen kann. Auch in den Link-Tag gibt es weitere Möglichkeiten weitere Eigenschaften einem Link hinzuzufügen. Ein kleiner Nachteil an sich ist bei externen Links die nicht Überprüfbarkeit einer Seite. Sie sollten also mit dem setzen von Links Vorsicht walten lassen, umso mehr Links auf externe Internetseiten gesetzt werden, umso höher ist der Aufwand all diese Links auf Funktionalität zu überprüfen. Der Tag für einen Link lautet: <a> dass A spiegelt hier eine Abkürzung wieder, im ganzen lautet die Formulierung "Anchor". Um dem Link eine Quelle zu liefern wird das Attribut "href" eingesetzt, welches in der kompletten Formulierung "Hypertext-Reference" bedeutet. Hier einige Beispiele zu den Optionen und wie Sie diesen in einem Link einsetzten können.

:: Beispiel - Weitere Elemente:

--------------------------------------------------------------------------------
Hyperlink:

<a href="http://www.domain.de">LINKTEXT</a>
In diesem Beispiel sehen Sie, wie Sie auf einfache
Weise einen Link zu einem internen Dokument,
Beispiel: "datei.html" oder eine externe Internetseite setzen.

Weitere Optionen:

target="_blank"
Mit dem target Attribut haben Sie die Möglichkeit dazu, das Zielfenster in verschiedener Weise öffnen zu lassen, hier die möglichen Optionen: _blank _self _parent _top. Es muss jeweils das _ Zeichen vorangestellt werden!

title="TEXT"
Mit diesem Attribut geben Sie dem Link einen optionalen Titel, dieser wird dem Benutzer angezeigt, wenn er mit der Maus über den Link für eine gewisse Zeit stehen bleibt.

align="center"
Mit dieser Option steht Ihnen die Möglichkeit zur Verfügung ein Link auszurichten, hierbei gibt es die folgenden Anweisungen, zum einen: center, left und right

Email Optionen:

Mit dem Link-Tag von Html haben Sie auch die Möglichkeit dazu, auf einfache Weise eine Email-Adresse anzugeben um Ihren Homepagebesuchern Beispielsweise eine Kontaktmöglichkeit zu Ihnen zu geben. Folgendermaßen werden Email-Links aufgebaut:

Email-Link:

<a href="mailto:name@mail.de">LINKTEXT</a>
Mit dieser recht einfachen Möglichkeit können Sie nun ab sofort Ihren Besuchern auch eine Kontaktmöglichkeit zur Verfügung stellen. Wichtig hierbei ist dass direkt nach dem "href" Attribut mailto: und gleich danach die Email-Adresse angehangen wird. Es sollten bei der Trennung innerhalb des href-Attributs keine Leerzeichen verwendet werden!


E-N-D-E

INFO:
So, dass war es mit der HTML Einleitung. Für Fehler übernehme ich an dieser Stelle keine Haftung, da ich bei der Erstellung des Kurses immerhin eine Flasche Rotwein verschlungen habe. Verbesserungsvorschläge und weitere Ausarbeitungen können hier natürlich über die Kommentar-Funktion abgegeben werden. Also dann, viel Spaß bei den ersten HTML-Schritten.