HTML- Kurzreferenz

1. Einleitung
2. Struktur von HTML- Seiten
3. Schriftformatierung
4. Textformatierung
5. Listen
6. Tabellen
7. Verweise
8. Sonstiges

1. Einleitung:

Es gibt sicherlich unzählige Webseiten zum Thema HTML und Webdesign im Internet. Oft hat man jedoch mit einem überfluss an Informationen zu tun, in dem es schwierig ist, die für das eigene Projekt interessanten Informationen zu finden. Da ich persönlich in erster Linie an den Inhalten meiner Seiten interresiert bin, und ein schlichtes Design bevorzuge, komme ich mit nur wenigen Bestandteilen der Sprache HTML aus. Diese habe ich hier, aus folgendem Grund, für mich zusammengestellt.

Ich habe mich nach langer Überlegungszeit dazu entschieden, die Seiten ausschließlich mit einem einfachen Editor zu gestalten. Mit allen von mir getesteten "zusammenklick"- Entwicklungstools (darunter MS Frontpage und Netscape Composer) ist es nicht möglich sauberen HTML- Code zu generieren. Mit jedem Aufruf werden (nicht gewollte) Zeilen eingefügt, oder die Strukturierung des Codes wird zerstört. Auch scheinen einige dieser Tools, einmal implementierte Elemente nicht sauber wieder zu löschen können. Dann muss sowieso wieder an den Code. Dann kann man, auch wenn es erstmal aufwendiger ist, doch besser gleich alles "von Hand" programmieren, oder ?

2. Struktur von HTML- Seiten:

Grundgerüst:

HTML- Seiten unterliegen i.d.R. immer der folgenden Struktur bzw. dem folgenden Grundgerüst:

  <html>
  <head>
  <title>Titel - z.B. www.linuxteam.net</title>
  </head>
  <body text="#000000" bgcolor="#FFFFFF" link="#0000EF" vlink="#51188E alink="#FF0000">
   <!-- Inhalt der Datei -->
  </body>
  </html>

In der Zeile des ersten body- tags können wie hier optional Dokumentenweite voreinstellungen getroffen werden. text legt die dateiweite Schriftfarbe, bgcolor die dateiweite Hintergrundfarbe, link die dateiweite Farbe für Links zu noch nicht besuchten Seiten, vlink die dateiweite Farbe für Links zu bereits besuchten Seiten und alink die dateiweite Farbe für "aktivierte" Links fest. Die Farbe, kann wie hier, in hexadezimaler Schriftweise angegeben werden. Alternativ können auch die erlaubten Farbnamen verwendet werden.

3. Schriftformatierung:

Überschriften:

Überschriften sind in 6 unterschiedlichen Schriftgrößen, h1 bis h6, verfügbar, wobei h1die größte, und h6 die kleinste darstellt. Ich verzichte auf Beispiele, da genug in diesem Dokument vorhanden sind.

Physische Textausrichtung:

Fettschrift, Kursivschrift und Unterstrichener Text sind genauso möglich wie hochgestellter und tiefgestellter Text.

4. Einfache Textformatierung:

Blocksatz:

Dies ist ein toller Blocksatz. Es gibt ja Leute, die Blocksätze nicht so schön finden. Aber ich Finde Sie ganz toll, und benutze sie oft. Manchmal glaube ich es gibt nichts schöneres als Blocksätze, und manchmal glaube ich ich sollte nicht so viel vorm Computer sitzen. Da ich nicht weiss, was ich noch schreiben soll, höre ich jetzt auf.

Zitate:

Hier steht ein Zitat. Zitate können ja auch sehr lang und ausgiebig sein. Sie können aber auch kurz sein. Naja wichtig ist ja der Inhalt. Denn nur dieser ist wichtig. Und um diesen (vermeintlich) wichtigen Inhalt darzustellen, gibt es die Möglichkeit Zitate darzustellen. So genug, das müsste jetzt reichen.

Textumbruch:

So kann man einen Textumbruch erzwingen.
Dies kann sehr nützlich sein.

Eingerückter Text:

  Dies ist ein eingerückter Text. Dies wird durch einsetzen der nobrakespace- Anweisung erreicht.

Präformatierter Text:

main () {
	printf ("Hello World");
}

5. Listen:

Normale Aufzählungslisten:

Numerierte Liste:

  1. Listeneintrag
  2. Listeneintrag

Definitions- Listen:

Zu definierender Ausdruck
Definition des Ausdrucks

6. Tabellen:

Tabellen kann man mit HTML natürlich auch gestalten. Hier mal ein kleines Beispiel:

Überschrift erste Spalte Überschrift zweite Spalte
Inhalt erste Zeile, erste Spalte Inhalt erste Zeile, zweite Spalte
Inhalt zweite Zeile, erste Spalte Inhalt zweite Zeile, zweite Spalte

7. Verweise:

Ein klick auf den Link führt Sie zu meiner privaten Homepage. Ein Anker ist ein Verweis im gleichen Dokument, z.B. an eine andere Stelle. Ein klick auf den Link führt Sie z.B. an den Anfang des Textes. Mit einem klick auf diesen Link können Sie mir eine Email schreiben.

8. Sonstiges:

Kommentare:

  <!-- Dies ist ein Kommentar -->

Grafiken einbinden:

  <img src="/usr/bin/tux.jpg" alt="Hier sollten ein Bild von Tux erscheinen">

Trennlinien: