HTML-Grundlagen

HTML-Grundlagen

HTML: Hypertext Markup Language
die Beschreibungssprache für Text mit Hyperlinks (angegeben als URLs) und externen Elementen (Bilder, Multimedia ...)

HTML-Dateien [Beispiele mit "Ansicht/Quelltext"] enthalten:

Text
Hyperlinks
für den Rechner gedachte Beschreibungen (Textart, Aussehen), ggf. auch nur als Verweise
Verweise (bloße Verweise!) auf Bilddateien, Multimedia-Dateien, Java-Applets ...
ggf. kleine Progrämmchen (JavaScript)

HTML selbst ist keine Programmiersprache. HTML wird nicht "programmiert".

Ein Web-Browser liest HTML-Dateien ein (aus dem Netz, aber auch von Platte) und versucht (versucht!), die enthaltenen Beschreibungen zu interpretieren und die angegebenen Bilder etc. hineinzuladen. (Ausnahme: reiner Textbrowser oder falls das Laden von Bildern abgestellt ist).

Geschichte:

1989 bis 1991 Entwicklung am CERN (Tim Berners-Lee)
1993 der erste Browser mit grafischer Oberfläche (Mosaic, geschrieben u.a. von Marc Andreesen, später Netscape)
aktuell: HTML 4.01 und XHTML 1.1 als "Recommendations" des W3C

Problem: Es gibt verschiedene Arten (Versionen) HTML. Kein Browser versteht Version 4.01 komplett und schon gar nicht alles richtig. Immer auf den wichtigen aktuellen und älteren Browsern testen. XHTML ist eine sauberere Variante von HTML mit leichten Änderungen (mehr später).

HTML erzeugen

direkt aus Standard-Software; Beispiele: StarOffice, RagTime;
Problem: Fehler, Inkompatibilitäten, aufgebläht
HTML-Editoren mit WYSIWYG, Beispiel: Netscape Composer (gratis im Communicator enthalten);
nicht ganz so viele Probleme
textbasierte HTML-Editoren ("handgeschriebenes HTML"), Beispiel: HTML-Kit (gratis);
am Anfang etwas unkomfortabel, aber am saubersten und schlanksten

Interessante Funktionen von HTML-Kit (Musterbeispiel für guten textbasierten HTML-Editor):

Vorschau in allen installierten Browsern
automatisch aktualisierte Vorschau in Fenster
farbliche Kennzeichnung der verschiedenen HTML-Textbestandteile
Überprüfung auf auf Korrektheit: Actions -> HTML Tools -> HTML Tidy -> Invoke HTML Tidy
HTML-Bestandteile in den Text klicken
Hilfe beim "Ausfüllen" solcher Bestandteile: Actions -> HTML Tools -> HTML Tags Wizard -> ...
Konvertierung nach XHTML: Actions -> HTML Tools -> HTML Tidy -> Convert to XHTML

Erste Schritte mit HTML

"Leeres" Dokument mit HTML-Kit: Struktur ansehen. Begriffe:

<...> sind Auszeichnungen, englisch Tags
</...> ist eine besondere Form von Tag: ein End-Tag
<IRGENDWAS>TextTextText</IRGENDWAS> bildet ein Element, TextTextText ist der Inhalt des Elements
Elemente können in den Start-Tags Attribute enthalten: <font color="#99cc66">Text</font>

Auffälligkeiten:

Elemente können andere verschachtelt enthalten.
Manche Tags stehen allein, z.B. <br>.
Zeilenumbrüche und Leerzeichen sind weitgehend egal; der Browser formatiert nach seinem Willen.
Viele Zeichen außer Buchstaben und Ziffern sind tabu und müssen umgeschrieben werden. Beispiele:
< (less than) wird zu <> (greater than) wird zu >& (ampersand) wird zu &Bedarfstrennstrich (soft hyphen) wird zu nicht trennbares Leerzeichen wird zu  ggf. sicherheitshalber auch ä (a Umlaut) zu ä usw.
Typografisch korrekte Anführungszeichen und Gedankenstriche sehen -- auch wenn die meisten Browsern es anders akzeptieren -- laut Standard so aus: die deutschen Anführungszeichen „ und “ und der deutsche Gedankenstrich –

Beispiele:

Absatz <p>Laber fasel blubb.</p>
Fettschrift <b>wichtig</b>
Überschrift <h3>Titel</h3>
Link <a href="http://...">weitere Infos</a>
Bild einbetten <img src="..." width="13" height="42">
Font und Farbe verstellen <font ....>Text</font>
Tabellen <table><tr><td>...</td><></tr></table>

Problem: Tags geben mal die Textart an (<h3>, <p>) und überlassen dem Browser das Aussehen; dann aber wiederum geben sie das Aussehen vor (<b>, <font>). Trend: Arbeiten wie für Print mit RagTime vorgeführt. Also nur Textarten markieren und das Aussehen getrennt davon festlegen, möglichst zentral (Stylesheets, später).

XHTML: Kein Problem -- einfach HTML mit HTML-Kit nach XHTML umwandeln. Auffällig: Bei einzelnen Tags abschließender Schrägstrich, z.B. <br /> statt <br>. Namen von Tags und Attributen klein geschrieben; Attributwerte immer in Anführungszeichen. Am besten sofort auch für HTML angewöhnen.