Home | Lehre | Videos | Texte | Vorträge | Software | Person | Impressum, Datenschutzerklärung | Blog
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.