Einige HTML Befehle


Dies ist lediglich eine Übersicht über die wichtigsten HTML-Befehle. Sie sollten für eine durchaus ansprechende Internetseite ausreichen.

➤ Um eine HTML-Datei zu erstellen, genügt ein simpler Editor. Die fertige Datei speichern Sie mit der Endung .html oder .htm - und das Ergebnis können Sie durch einen Doppelklick auf selbige sehen!
Jede HTML-Datei hat ein gewisses "Grundgerüst", auf dem alles aufbaut:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Im Browser angezeigter Titel</title>
<meta name="keywords" content="Schlüsselwörter der Website">
</head>
<body>
    Inhalt der Seite...
</body>
</html>

Die ersten beiden Zeilen beschreiben den Dokument-Typ der Datei, obige Angabe ist universell verwendbar.

Die weitere Reihenfolge der Tags (<html>, <head>,...) sollte wie angegeben eingehalten werden, damit möglichst alle Browser das selbe anzeigen!
Innerhalb des Title-Tags kann ein Titel für die Seite angegeben werden, der möglichst kurz und aussagekräftig sein sollte (detailliertere Angaben zum Inhalt können auch im folgenden Meta-Tag gemacht werden).

➤ Meta-Angaben können Anweisungen für Web-Server, Browser, Suchmaschinen (Robots) sein, Informationen zum Autor beinhalten, oder eine automatische Weiterleitung einleiten. Sie sind jedoch nicht für Kommentare zum Quelltext der Datei gedacht!

Der nächste Bereich ist der Hauptteil der Webseite. Innerhalb des Body-Tags wird der sichtbare Inhalt notiert. Text wird als Text geschrieben, bestimmte Formatierungen sind dafür nicht zwingend notwendig!

➤ Direkt im Body-Tag können noch einige Texteigenschaften eingestellt werden:

Hintergrundfarbe #ffffff bedeutet Weis.
Textfarbe: #000000 ist Schwarz.
Linkfarbe: #3300ffv ist ein helleres Blau.
Besuchte Links: #3300cc ist ein dunkleres Blau.
Gerade geklickter Link: #66ff00 ist ein Grün.
Eine Übersicht über die Hex-Farben gibts u.a. hier!
Anstatt einer einfarbigen Hintergrundfarbe kann auch ein Bild als Hintergrund genutzt werden. In diesem Fall notiert man statt bgcolor="..." folgendes: background="background.jpg"

➤ Aber es gibt natürlich gewisse Standardformatierungen:


➤ Einen Link erstellt man folgendermaßen:

Dieser Link geht im selben Fenster auf. Meist ist es jedoch besser (da übersichtlicher), wenn ein Link ein neues Browserfenster öffnet:

Hier öffnet sich jetzt ein neues Fenster, dank der Angabe target="_blank". Möglich wäre auch target="_top" um den Link im aktuellen Fenster zu öffnen (nicht notwendig).

Projektinterne Links baut man mit einer relativen Struktur auf:
In der Datei index.htm soll ein Link eingebaut werden, der zur Linkseite links.htm führt - beide Dateien befinden sich im selben Ordner auf dem Server.
Es genügt folgende Angabe:

Wäre die index.htm im Hauptverzeichnis, und die links.htm im Unterordner "dateien", müsste der Link so aussehen:

Will man von der links.htm wieder zur index.htm zurück, muss man diesen Unterordner berücksichtigen:


Links innerhalb einer einzelnen Seite nennt man "Anker". Gesetzt wird ein Anker mit:

Ein Anker muss nicht zwingend einen Linknamen haben (einen "leeren" Anker sieht man nicht).
Dieser kann dann mit <a href="#ziel">Zum Link</a> aufgerufen werden.
Um einen solchen Anker (der z.B. auf seite_2.htm liegt) von einer anderen projektinternen Seite aufzurufen, muss der Link folgendermaßen lauten: <a href="../seite_2.htm#ziel">Zum Anker auf seite_2</a>.


➤ Eine weitere nützliche Funktion sind Tabellen, die in HTML mit dem table-Tag eingeleitet werden: 


<table>
   <tr>
      <td>Zeile1/Spalte1
      </td>
      <td>Zeile1/Spalte2
      </td>
   </tr>
   <tr>
      <td>Zeile2/Spalte1
      </td>
      <td>Zeile2/Spalte2
      </td>
   </tr>
</table>

Ergibt diese Tabelle:

Zeile1/Spalte1 Zeile1/Spalte2
Zeile2/Spalte1 Zeile2/Spalte2

Dies läßt sich natürlich beliebig erweitern, wobei tr = Tabellenzeile und td = Tabellendaten = Spalten sind.

➤ Es gibt in HTML auch die Möglichkeit, diverse Mauszeiger in bestimmten Bereichen selbst festzulegen:


cursor:crosshair

cursor:pointer

cursor:move

cursor:e-resize

cursor:ne-resize

cursor:nw-resize

cursor:n-resize

cursor:sw-resize

cursor:se-resize

cursor:s-resize

cursor:w-resize

cursor:text

cursor:wait

cursor:help

cursor:url(cursor.gif)


Mit Hilfe der letztgenannten Möglichkeit kann ein eigener Cursor angegeben werden - im gif- oder jpg-Format.

[...to be continued...]




© 2001 - 2010 Christoph Albrecht - Home - Valid XHTML 1.1