Document ID: /fineweb-2-swissfilter-quality_10-filterrobots/filtered/03258.jsonl.gz/1819

Dieser Text befindet sich in der neusten Version auf http://www.eggdrop.ch/texts/html/.
15.06.05: Version 1.0
23.01.04: Version 0.1
HTML steht für HyperText Markup Language und ist eine Seitenbeschreibungssprache, die bei Internetseiten eingesetzt wird.
Der HTML-Code wird in einen normalen Text-Editor eingegeben, es gibt aber auch spezielle HTML-Editoren, die den Code farbig hervorheben. WYSIWYG-Editoren (What you see is what you get) wie Macromedia Dreamweaver (oder gar Microsoft Word), bei denen man keinen Code schreiben muss, weil sie den automatisch generieren, empfehle ich nicht unbedingt, weil ich der Meinung bin, dass man nur dann professionelle Seiten erstellen kann, wenn man selber den Code schreibt. Selbst geschriebener Code ist übersichtlicher als generierter und Scriptsprachen wie PHP (die man dann selber schreiben muss) lassen sich folglich auch einfacher integrieren.
Damit die HTML-Datei im Internet verfügbar ist, muss sie auf einen Webserver raufgeladen werden, der die Datei im Internet zur Verfügung stellt. Ich werde darauf jedoch nicht eingehen, erkundige dich bei deinem Hoster (Webspaceanbieter), wie es geht.
Erwähnen will ich noch (weil es vielleicht nicht selbstverständlich ist), dass man den Quellcode einer HTML-Seite mit den meisten Browsern problemlos anschauen kann ("Quelltext anzeigen" oder ähnlich).
Was der Unterschied zwischen HTML und XHTML ist, werde ich in Abschnitt 1.3 beschreiben.
Früher (und heute oft immer noch) wurde HTML sowohl für das Aussehen der Internetseite (Farben, Schriftgrösse, etc.) als auch für die Struktur des Dokumentes (Überschriften, Absätze, etc.) verwendet. Dies führte oft zu sehr unübersichtlichem Code, sodass CSS eingeführt wurde.
HTML sollte nur für die Dokumentstruktur verwendet werden, nicht für das Aussehen einer Internetseite! Für das Aussehen ist CSS zuständig.
Die Sprache HTML wurde seit der ersten Version immer wieder erweitert. HTML 4.01 ist die letzte Version des HTML-Standards und somit auch die am meisten überladene Version von HTML. Zu beachten ist noch, dass es Strict-Versionen gibt, die weniger Elemente enthalten als die Transitional-Versionen. Man führte nun XHTML ein, welches XML-basierend ist (deshalb der Name XHTML) und weniger Elemente und Attribute enthält. Es wurden vor allem Elemente und Attribute gestrichen, die nur für das Layout zuständig waren, weil sich das ja eleganter mit CSS machen lässt.
Spreche ich in diesem Text von HTML, meine ich damit normalerweise auch XHTML.
Es gibt unter anderem folgende aktuelle (X)HTML-Standards:
Zwischen XHTML 1.0 Strict und XHTML 1.1 gibt es eigentlich wenige Unterschiede. Jedoch müssen laut dem W3C-FAQ XHTML 1.1-Dokumente mit einem XML-Content-Type an den Client gesendet werden, was beispielsweise der Internet Explorer nicht so gut unterstützt. Dieser Text basiert folglich auf XHTML 1.0 Strict.
Wer mehr über die verschiedenen Standards erfahren will, kann das auf http://www.w3.org/MarkUp/ tun.
Hier beschreibe ich noch kurz, was man sonst noch alles so auf Internetseiten einsetzen kann. Auf die Themen wird im Text aber nicht eingegangen:
Daneben gibt es noch viele weitere solche Technologien.
HTML-Dokumente haben meistens die Dateiendung .html. Im Prinzip ist eigentlich egal, welche Dateiendung sie haben, weil der Webserver dem Client sowieso mitteilt, ob sich hier jetzt um ein HTML-Dokument oder z. B. um ein Bild handelt (vorausgesetzt, der Webserver wurde entsprechend eingestellt). Mit der .html-Dateiendung ist man aber doch am besten unterwegs, weil diese Endung bei eigentlich allen Webhostern bzw. -servern korrekt ausgeliefert wird, ohne dass man spezielle Einstellungen vornehmen muss.
Das Hauptdokument heisst meistens index.html. Greift man also beispielsweise auf http://meineseite.com/ zu, liefert der Webserver die Datei http://meineseite.com/index.html aus.
HTML-Dokumente bestehen aus sogenannten Tags. Ein Tag wird mit eckigen Klammern (< und >) gekennzeichnet. Es gibt z. B. Tags um Bilder einzufügen, fett oder gross zu schreiben etc. In XHTML müssen sämtliche Tags geschlossen werden, was man am Slash (/) nach der öffnenden Klammer sieht. Hier ein Beispiel für ein (natürlich nicht existierendes) Tag:
<beispiel_tag>Dieser Text befindet sich zwischen einem tag.</beispiel_tag>
Tags können auch verschachtelt werden:
<erstes_tag>Ein Text, der sich teilweise <zweites_tag>zwischen zwei Tags</zweites_tag> befindet.</erstes_tag>
Wichtig ist:
Das zuletzt geöffnete Tag muss immer zuerst wieder geschlossen werden!
Das folgende Beispiel ist also falsch, weil das erste Tag vor dem zweiten Tag geschlossen wird:
<erstes_tag>Ein Text, der sich teilweise <zweites_tag>zwischen zwei Tags</erstes_tag> befindet.</zweites_tag>
Es gibt auch Tags, die an sich kein Abschlusstag benötigen würden, wie z. B. das br-Tag, das einen Zeilenumbruch einfügt. In XHTML muss aber alles abgeschlossen werden, wir schliessen ein br-Tag deshalb am besten verkürzt mit <br /> ab (statt <br></br>):
Hier hat es einen<br /> Zeilenumbruch.
Der Abstand vor dem Slash ist übrigens nur aus Kompatibilitätsgründen wichtig, weil ohne den Abstand einige reine HTML-Browser das Tag falsch anzeigen würden.
Öffnende Tags können Attribute haben mit einem Wert (z. B. das Ziel eines Hyperlinks oder die Grösse einer Datei):
<tag attribut="wert">...</tag>
Tags können natürlich auch mehrere Attribute haben:
<tag erstes_attribut="erster_wert" zweites_attribut="zweiter_wert">...</tag>
Ein XHTML 1.0 Strict-Dokument hat folgendes Grundgerüst:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Der Titel der Seite</title> </head> <body> Hier kommt der Text der Seite </body> </html>
Die erste Zeile teilt dem Browser mit, dass es sich hier um XML handelt (XHTML ist ja XML-basierend). Das Attribut encoding gibt die Codierung des Zeichensatzes an. UTF-8 ist international und sollte deshalb verwendet werden.
Die zweite Zeile gibt die genaue XHTML-Version an.
Die dritte Zeile (<html>) ist ein Tag, welches ganz unten wieder endet. Sie teilt mit, dass jetzt dann der HTML-Code folgt.
Die vierte Zeile (<head>) ist auch ein Tag und definiert einen Block, in welchem Eigenschaften stehen, die nicht direkt im Browserfenster angezeigt werden. Dazu gehören beispielsweise der Titel des Dokuments und CSS-Eigenschaften.
Im title-Tag steht nun der Titel, welcher oben in der Titelzeile des Browsers angezeigt wird.
Innerhalb des body-Tags kommt dann der ganze Text, der im Browserfenster angezeigt werden soll.
Die folgenden Tags kommen natürlich in den Abschnitt body:
|Tag||Beschreibung|
|<h1>||ganz grosse Schrift (vergleiche Titel auf dieser Seite ganz oben)|
|<h2>||grosse Schrift (vergleiche Titel dieses Kapitels)|
|<h3>||mittelgrosse Schrift (etwas grösser als die von diesem Text)|
|<h4>||normale Schrift (wird selten verwendet)|
|<h5>||kleine Schrift (wird selten verwendet)|
|<h6>||ganz kleine Schrift (wird selten verwendet)|
Beispielseite
An dieser Stelle möchte ich noch erklären, dass in HTML Zeilenumbrüche nicht selbstverständlich sind. Ein Zeilenumbruch im Quellcode ist kein Zeilenumbruch in der Darstellung. Man sollte grundsätzlich Abschnitte mit dem <p>-Tag machen und Zeilenumbrüche mit <br /> nur dann einsetzen, wenn sie wirklich benötigt werden.
|Tag||Beschreibung|
|<p>||ein Text-Abschnitt|
|<br />||ein Zeilenumbruch|
|<b>||fette Schrift|
|<i>||kursive Schrift|
|<tt>||Proportionalschrift (meistens Courier)|
Beispielseite
Weitere Tags gibt es unter http://www.w3.org/TR/xhtml-modularization/abstract_modules.html in den Abschnitten 5.2.2 oder 5.4.
Eine gepunktete Liste wird mit dem Tag <ul> eingeleitet. Jeder Listeneintrag wird von <li> und </li> umgeben:
<ul> <li>Eintrag 1</li> <li>Eintrag 2</li> <li>Eintrag 3</li> </ul>
Nummerierte Listen funktionieren gleich wie die gepunkteten, nur dass sie <ol> anstelle von <ul> verwenden.
Neben den normalen Listen gibt es noch Definitions-Listen, bei denen man zu einem Eintrag eine Definition zuweisen kann. Solche Listen habe ich z. B. im Abschnitt 1.4 verwendet.
<dl> <dt>Eintrag</dt> <dd>Definition</dd> <dt>Eintrag</dt> <dd>Definition</dd> </dl>
Beispielseite
Wollen wir einen Link zu einer anderen Seite machen, verwenden wir das Tag a. Die Zieladresse wird im Attribut href angegeben und der Text, der auf der Internetseite angezeigt wird befindet zwischen dem Start- und Endtag. Die Zieladresse kann entweder ein Dateiname sein, der sich im gleichen Verzeichnis befindet, wie die Webseite, oder auch eine externe Internetseite (dabei darf man das http:// nicht vergessen). Man kann auch eine Email-Adresse angeben, welcher allerdings das Präfix mailto: vorangestellt werden muss. Dazu einige Beispiele:
<a href="links.html">Klick hier, um zu der Linkseite zu kommen!</a> <a href="http://www.google.ch">Eine Suchmsachine</a> <a href="mailto:<email-pii>">Schick mir ein E-Mail!</a>
Beispielseite
Um Bilder einzufügen benutzen wir das Tag img mit folgenden Attributen:
Ich empfehle die width- und height-Attribute anzugeben, auch wenn sie optional sind, weil sonst bei vielen Bildern die Seite während dem Laden "auseinanderspringt" weil am Anfang die Grösse des Bildes nicht bekannt ist.
Hier ein Beispielcode:
<img src="bild.jpg" width="200" height="150" alt="Mein Bild" />
Der Slash am Schluss wird benötigt, damit es gültiges XHTML ist.
Beispielseite
Etwas schwieriger sind Tabellen. Eine Tabelle beginnt mit <table> und endet mit </table>. Anschliessend kommt eine Zeile, welche mit <tr> anfängt und mit </tr> aufhört und schliesslich die Spalten von Rechts nach links, die mit <td> anfangen und mit </td> enden. Hier ein Code einer Beispieltabelle:
<table> <tr> <td>Zeile 1, Spalte 1;</td> <td>Zeile 1, Spalte 2;</td> </tr> <tr> <td>Zeile 2, Spalte 1;</td> <td>Zeile 2, Spalte 2;</td> </tr> </table>
Will mal bestimmte Zellen der Tabelle hervorheben (z. B. die Überschriften), verwendet man anstelle von td das Tag th.
Hier noch einige Attribute des Tags table:
Ich empfehle jedoch, diese Attribute mit Hilfe von CSS zu setzen.
Beispielseite
Tabellen sollten für das Anzeigen von tabellarischen Daten verwendet werden und nicht für das Seiten-Layout. Für das Layout der Seite ist CSS zuständig.