List of public pages created with Protopage

_start with music_

Rich sticky notes

Web widgets

play_canada_ music

_go on with ten designrules_

Plain sticky notes

Sticky note

10 Gebote zur Strukturierung elektronischer Dokumente 1. Korrekte Verwendung von Auszeichnungssprachen (Tags, Attributen und Entitäten) 2. Gute Dokumentenstruktur (u.a. korrekte Verschachtelung) 3. Korrekte Referenzen (absolut vs. relativ) 4. Verzicht auf das Erzwingen von Whitespace mit Mitteln der logischen Strukturierung (z.B. leere Absätze) 5. Verzicht auf manuelle Gliederungs-/Listennummerierungen (z.B. Bindestriche als Listenpunkte) 6. Verzicht auf Layout-Tabellen (insbesondere im Webdesign) 7. Verzicht auf direkte Formatierung (z.B. STRING-Element in HTML) 8. „Form follows Function“ (keine “sinnfreien” Verzierungen, Animationen etc.) 9. Alternativ-Infos für Grafiken, Tabellen und Multimedia-Elemente 10. Meta-Informationen (für Recherchierbarkeit ,aber auch Aktualität und Versionierung von Dokumenten)

_and an HTML/CSS guide_

Plain sticky notes

HTML

Was ist HTML?

Die Hypertext Markup Language (HTML, dt. Hypertext-Auszeichnungssprache) ist eine textbasierte Auszeichnungssprache zur Strukturierung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von einem Webbrowser dargestellt. Neben den vom Browser angezeigten Inhalten einer Webseite enthält HTML zusätzliche Angaben in Form von Metainformationen, die z. B. über die im Text verwendete Sprache oder den Autor Auskunft geben oder den Inhalt des Textes zusammenfassen. Die Auszeichnungssprache wird vom World Wide Web Consortium (W3C) weiterentwickelt. Aktuell trägt HTML die Versionsnummer 4.01. HTML 5 befindet sich in der Entwicklung.

Rich sticky notes

Aufbau einer HTML-Datei

Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden Teilen:

a) Dokumententyp-Deklaration

Die Dokumententyp-Deklaration regelt folgende Dinge:
  • Welche Elemente darf ein HTML-Dokument enthalten?
  • Welche Elemente dürfen innerhalb welcher anderen Elemente vorkommen? 
  • Welche Attribute gehören zu einem Element? 
  • Ist die Angabe dieser Attribute Pflicht oder freiwillig etc.?

Die Dokumenttyp-Deklaration wird am Anfang jeder HTML-Datei vor dem einleitenden html-Tag in Großbuchstaben notiert.

Hinter der startenden spitzen Klammer folgt ein Ausrufezeichen (!). Darauf folgt immer die Angabe DOCTYPE HTML PUBLIC. Hiermit legt ihr fest, dass ihr euch in eurem Dokument auf eine öffentlich verfügbare HTML-Dokumententyp-Definition (kurz DTD) bezieht. Dies ist notwendig, da eine HTML-Datei erst dann gültig ist, wenn sie sich auf einen bestimmten Dokumententyp bezieht und sich im folgenden Quelltext auch genau an die jeweiligen dokumententypspezifischen Regeln hält.

b) Head-Bereich

Der Head einer HTML-Datei ist meist der Teil im Hintergrund, den man kaum zu sehen bekommt. Er beginnt mit dem Tag <head> und endet mit dem Tag </head>.

Hier werden die Aspekte festgelegt, welche nur geringfügig das Aussehen und die Struktur des Dokuments behandeln.

Zudem sind im Head-Element auch folgende Elemente möglich:

  • der Seitentitel
  • SkripteStyleSheets
  • Meta-Angaben
  • Bezüge zu anderen Seiten
  • Basiseigenschaften

Die Reihenfolge der Elemente im Head ist zudem frei wählbar.

c) Body-bereich

Der Body Bereich beginnt stets mit dem einleitenden Tag <body> und endet mit dem abschließenden Tag </body>.

 

Hier wird nun der eigentliche Inhalt der HTML-Datei angegeben, der letztenendes im Browser angezeigt werden soll, wie etwa

  • Texte
  • Grafiken
  • Tabellen
  • Töne, etc.

Beispiel

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"     

"http://www.w3.org/TR/html4/loose.dtd">       Dokumententypdeklaration

 

<html>
<head>
Head-Bereich

<title>Beschreibung der Seite</title>      
</head>       
<body>

Body-Bereich
</body>
</html>

Tags

Als HTML-Tag wird ein einzelner HTML-"Befehl" bezeichnet.


Dabei kommt der Begriff Tag aus dem Englischen und hat dort die Bedeutung von "Etikett, Anhänger, Aufkleber, Marke, Kennzeichnung, Auszeichner".


Am besten lässt sich es mit dem Begriff "Kennzeichnung" veranschaulichen. Man kennzeichnet Bereiche innerhalb von seinem Inhalt, dass diese in bestimmter Weise angezeigt werden soll.


Dabei kann man dann sagen, hier beginnt der Bereich und dort hört er wieder auf.

Jeder Html-Befehl wird also mit einem Tag geöffnet und auch wieder geschlossen.

Anfangs-Tag:      <"befehl">
End-Tag:            </"befehl">

Bei Tags gibt es keine Groß und Kleinschreibung, da sonst keine weltweite Kompatibilität gewährleistet ist. Man hält sich also grundsätzlich an Kleinschreibung

Beispiel

<p>erster Absatz, der sehr lang sein kann</p>
<p>zweiter Absatz - und nach der Definition bewirken
Absätze immer einen Abstand (egal ob es sich um Text
handelt oder bei Schuhen zwischen Straße und Träger</p>

Attribute

Früher wurde viel Design direkt über HTML gemacht. Dies wurde durch Attribute bei den entsprechenden HTML-TAGs erreicht. So konnte z.B. die Ausrichtung von Text mitgegeben werden (linksbündig, rechtsbündig, zentriert) oder Farben angegeben werden.


Das sollte man bei der Philosophie von XHTML dringend unterlassen (zumal viele dieser alten Attribute sonst von den Validerungsroutinen als Fehler angemerkt werden) - das Design wird nun über CSS gemacht. Es ist nur noch Inhalt und Logik gewünscht. Daher sind nicht mehr allzuviele Attribute zugelassen bzw. gerne gesehen.


Zwei Attribute gibt es bei Aufzählungen, die als inhaltliche/logische Angabe angesehen werden. Die Art der Aufzählung (ob mit Zahlen, Buchstaben etc.) und die Startzahl.

Beispiel


<h1 style="backround-color:#ffffff" align="center">Hallo Welt </h1>

Hier wird also die erste Überschrift eines HTML-Dokumentes näher beschrieben. Sie soll die Farbe weiß haben und zentriert dargestellt werden.

<a href="http://www.tu-ilmenau.de/>Das ist die Seite der TU-Ilmenau</a>

Dies wird dann im Browser als Link angezeigt.

_and business_

News

coffee*break*time*blog

Calendars

Calendar

_end with bookmarks_

Bookmarks

Plain sticky notes

Knowledge

Video

Design