easyHTML-Kurzanleitung
Diese Anleitung soll speziell Anfängern die Grundbegriffe von HTML kurz erklären. Die einzelnen HTML- Anweisungen werden nochmals in der Hilfe von easyHTML beschrieben.

easyHTML-Logo Auch diese Datei wurde mit easyHTML geschrieben. Falls Sie selbst easyHTML verwenden, dürfen Sie nebenstehendes Logo gerne in Ihre Homepage einbauen.

Achtung: Viele der hier dargestellten Beispiele sind ab HTML 5 offiziell nicht mehr gültig. Nach dem Willen des World Wide Web Consortiums (W3C) soll stattdessen zukünftig verstärkt auf Cascading Style Sheets (CSS) zurückgegriffen werden. Wenn Sie die Option "CSS statt HTML verwenden" aktivieren, wird easyHTML versuchen die inzwischen nicht mehr erlaubten HTML-Elemente und Attribute durch CSS-Formatierungen zu ersetzen.

 

Grundsätzliches über HTML
 
HTML-Befehle oder auch Steuerzeichen oder Auszeichnungen genannt (auf englisch Tags) bestehen meist aus zwei Teilen, dem einleitenden und dem abschließenden Tag. Dazwischen befindet sich der eigentliche Text, der durch diese Anweisungen entsprechend formatiert wird.

Zum Beispiel würde der folgende Text im Browser fett dargestellt werden:

<B>Das ist Fettschrift.</B>
Ergebnis: Das ist Fettschrift.

Die einzelnen HTML-Steuerzeichen können außerdem sogenannte Attribute enthalten, die die Darstellungsart noch weiter spezifizieren. Beispielsweise erzeugt die Anweisung <H3> ... </H3> eine Überschrift 3. Grades. Mit dem zusätzlichem Attribut ALIGN kann die Überschrift horizontal ausgerichtet werden.

<H3 ALIGN=CENTER>Überschrift zentriert</H3>

Ergebnis:

Überschrift zentriert

Es gibt aber auch Befehle ohne Endtag, wie z.B. <BR> (Line Break - erzeugt einen Zeilenumbruch im Text. Ohne <BR> wird der Text erst bei Erreichen des Festerrandes umgebrochen.)

Man unterscheidet weiterhin zwischen absoluten (typografischen) Formatierungen (wie <B>...</B>, welches immer Fettschrift bewirkt) und logischen Formatierungen (zum Beispiel Überschriften, die verschiedene Browser teilweise unterschiedlich anzeigen).

Hinweis: Ab HTML 5 sollen nur noch logische Formatierungen verwendet werden. Typografische Formatierungen sind mit CSS zu realisieren.

Zum Seitenanfang

 

Zeilenumbrüche und Absätze
 
Die Anweisung <BR> löst einen Zeilenumbruch des Textes aus. Normalerweise wird Text erst beim Erreichen des Fensterrandes vom Browser automatisch umgebrochen. Möchte man einen Zeilenwechsel schon vorher erreichen, muss <BR> verwendet werden.

Um einen größeren Abstand einzufügen (Leerzeile), gibt es das Steuerzeichen <P>, welches einen Absatz erzeugt. <P> besitzt das Attribut ALIGN zur horizontalen Ausrichtung. Hier ein Beispiel eines rechtsbündigen Absatzes:

<P ALIGN=RIGHT>Dieser Satz erscheint rechts ausgerichtet.</P>

Ergebnis:

Dieser Satz erscheint rechts ausgerichtet.

Falls ALIGN oder ein anderes Attribut angegeben wird, sollte der Abschluss </P> am Ende des Absatzes folgen. Ansonsten kann </P> auch weggelassen werden.

Ebenfalls zur Ausrichtung von Text oder anderen HTML-Elementen geeignet ist der Befehl <DIV>. Mit dem Unterschied, dass dieser keine Leerräume einfügt. Auch <DIV> verfügt über das Attribut ALIGN. Der Abschluss </DIV> muss immer mit angegeben werden.

Hinweis: Das Attribut ALIGN ist ab HTML 5 nicht mehr erlaubt. Falls Sie HTML 5-konform arbeiten wollen, können Sie stattdessen die CSS-Formatierung TEXT-ALIGN verwenden.

Zum Seitenanfang

 

Block- und Inline-Elemente
 
HTML unterscheidet zwischen sogenannten Block- und Inline-Elementen. Block-Elemente erzeugen meist einen eigenen Absatz und können Inline-Elemente, Text oder teilweise auch andere Block-Elemente enthalten. Inline-Elemente dürfen streng genommen nur innerhalb von Block-Elementen vorkommen und selbst nur normalen Text oder andere Inline-Elemente enthalten, jedoch keine Block-Elemente.

Block-Elemente sind:

address, blockquote, center, div, dl, fieldset, form, h1-6, hr, menu, noframes, noscript, ol, p, pre, table, ul

Zu den Inline-Elementen gehören:

a, abbr, b, big, br, button, cite, code, dfn, em, font, i, iframe, img, input, kbd, label, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, u, var

Zum Seitenanfang

 

Sonderzeichen
 
Deutsche Umlaute (ä, ö, ü) und ß werden, je nach Ländereinstellung und Zeichensatz, nicht auf allen Systemen korrekt dargestellt und sollten deshalb durch die entsprechenden HTML-Codes ersetzt werden. Wenn Sie "Optionen: Umlaute ersetzen" auswählen, werden ä, ö, ü und ß sowie das Euro-Zeichen bei der Texteingabe automatisch richtig umgewandelt. Ansonsten gibt es noch weitere Sonderzeichen, die Bestandteil von HTML sind (<, >, ", &) und auch umschrieben werden sollten, damit sie vom Browser nicht fehlinterpretiert werden.

Hinweis: Wenn der verwendete Zeichensatz im jeweiligen HTML-Dokument mit der Anweisung META korrekt angegeben ist, kann auf die Umwandlung der Umlaute verzichtet werden. Standardmäßig speichert easyHTML Dateien mit dem Zeichensatz Windows-1252. Im Menü "Optionen" können Sie den Zeichensatz auf UTF-8 umstellen. Wichtig bei der Verwendung von UTF-8-Dateien ist, dass beim Laden und beim Speichern die entsprechende Option aktiviert ist, da Sonderzeichen sonst falsch dargestellt und falsch gespeichert werden. Beachten Sie dabei, dass aktuell nur deutsche Sonderzeichen und Umlaute unterstützt werden.

Zum Seitenanfang

 

Struktur einer HTML-Datei
 
Ein HTML-Dokument besitzt folgende Grundstruktur:

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

 <HTML>

 <HEAD>
  <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=Windows-1252">
  <TITLE>Seitentitel</TITLE>
 </HEAD>

 <BODY>
  Körper des Dokuments
 </BODY>

 </HTML>

DOCTYPE
Gibt die verwendete HTML-Version an.
HTML
Sagt aus, dass es sich um eine HTML-Datei handelt.
HEAD
Bildet den Kopfteil, in dem grundsätzliche Einstellungen
getroffen werden, z.B. Titel oder Zeichensatz.
BODY
Körper des HTML-Dokumentes, der den eigentlichen,
darzustellenden Inhalt der Datei enthält.

Zur Vereinfachung kann über den Menüpunkt "Seite: Standardseite" von easyHTML ein komplettes Grundgerüst eingefügt werden. (Was hierbei genau eingefügt werden soll, lässt sich über "Optionen: Standardseite" festlegen.)

Zum Seitenanfang

 

Aufzählungen
 
Ungeordnete oder Nummerierte Listen werden oft verwendet zur übersichtlichen Gliederung von Aufzählungen. Für Aufzählungen ohne Reihenfolge wird die Ungeordnete Liste (Unordered List) benutzt. Für Aufzählungen in einer bestimmten Reihenfolge die Nummerierte Liste (Ordered List). Einträge innerhalb einer Liste werden mittels <LI> (List Item) gebildet und bei der Ungeordneten Liste durch einen Gliederungspunkt hervorgehoben. Bei der Nummerierten Liste erhält jeder Eintrag eine Zahl oder einen Buchstaben.

Beispiel einer Ungeordneten Aufzählung:

<UL>
 <LI>Eintrag</LI>
 <LI>Eintrag</LI>
 <LI>Eintrag</LI>
</UL>

Ergebnis:

  • Eintrag
  • Eintrag
  • Eintrag
Mit dem Attribut TYPE lässt sich die Darstellung des Gliederungspunktes beeinflussen.
Der Typ DISC ist standardmäßig voreingestellt.

TYPE=DISC      verwendet eine Scheibe
TYPE=CIRCLE    verwendet einen Kreis
TYPE=SQUARE    verwendet ein Quadrat

 
Beispiel einer Nummerierten Aufzählung:

<OL TYPE=A>
 <LI>Eintrag</LI>
 <LI>Eintrag</LI>
 <LI>Eintrag</LI>
</OL>

Ergebnis:

  1. Eintrag
  2. Eintrag
  3. Eintrag
Über das Attribut TYPE kann die Art der Nummerierung festgelegt werden.
Standardmäßig werden arabische Ziffern verwendet.

TYPE=A    verwendet Großbuchstaben
TYPE=a    verwendet Kleinbuchstaben
TYPE=I    verwendet große römische Zahlen
TYPE=i    verwendet kleine römische Zahlen
TYPE=1    verwendet arabische Zahlen

Zum Seitenanfang

 

Links einfügen
 
Links sind Verweise auf andere HTML-Dokumente oder sonstige Dateien (z.B. auch herunterladbare Archive, wie zip- oder exe-Dateien), die bei einem Mausklick auf den Link geladen werden. Folgender Link lädt zum Beispiel die Datei "infos.htm":

<A HREF="infos.htm">zur Info-Seite</A>
Ergebnis: zur Info-Seite

Obiges Beispiel setzt voraus, dass sich die Datei "infos.htm" im gleichen Pfad (Verzeichnis) befindet, wie die Datei in der der Link steht. Würde sie sich auf einem anderem Server befinden, müsste der komplette Pfad mit angegeben werden:

<A HREF="http://www.wsoft.de/infos.htm">zur Info-Seite</A>

Befände sich das Dokument auf dem gleichen Server in einem Unterverzeichnis, könnte der Link so aussehen:

<A HREF="verzeichnisname/infos.htm">zur Info-Seite</A>

Für einen Verweis in das übergeordnete Verzeichnis, werden zwei Punkte an den Anfang gesetzt:

<A HREF="../infos.htm">zur Info-Seite</A>

Beachten Sie außerdem, dass im Internet bei den Dateinamen zwischen Klein- und Großschreibung unterschieden wird. Enthält ein Name nur Kleinbuchstaben, aber Sie schreiben ihn im Link groß, wird der Link später nicht funktionieren. Üblicherweise werden nur Namen mit durchgehender Kleinschreibung benutzt. Manche FTP-Programme bieten deshalb die Möglichkeit die Dateien beim Übertragen automatisch umzubenennen. Analog dazu können Sie über "Optionen: Links in Kleinbuchstaben" easyHTML dazu veranlassen alle Dateinamen in Kleinbuchstaben einzufügen.

Weiterhin sollten Dateinamen keine Leerzeichen, Umlaute oder ß enthalten. Auch auf sonstige Sonderzeichen (z.B. Satzzeichen) sollte, bis auf den Unterstrich _ , besser verzichtet werden.

Falls Sie eine lokale Verknüpfung erstellen möchten, die auf ein HTML-Dokument verweist, dass auf Ihrer Festplatte gespeichert ist, käme folgender Link zum Einsatz:

<A HREF="file:///c:/verzeichnisname/infos.htm">zur Info-Seite</A>

Das vorangestellte "file:///" sagt aus, dass die Datei nicht aus dem Internet, sondern von Ihrem Computer geladen wird.

Zum Seitenanfang

 

Anker setzen
 
Umfangreiche Web-Seiten lassen sich durch das Einfügen von Ankern übersichtlicher gestalten. Anker sind Ansprungstellen, auf die durch einen Link verwiesen werden kann. Wird der Link aktiviert, springt der Browser zur angegebenen Ankerstelle.

Beispiel: <A ID="Software">Neue Software</A>
Definiert einen Anker mit der Bezeichnung "Software".

Dieser Link verzweigt zum Anker:
<A HREF="#Software">Zum Software-Angebot</A>

Falls der Anker auf einer anderen Seite liegt, muss diese mit angegeben werden:
<A HREF="neues.htm#Software">Zum Software-Angebot</A>

Das Beispiel lädt die Datei "neues.htm" und springt zur angegebenen Stelle.

Der Ankername darf im jeweiligen Dokument nicht doppelt vorkommen. Außerdem sollte man auf Leerzeichen, deutsche Umlaute und sonstige Sonderzeichen verzichten. Auch auf einheitliche Schreibweise (Groß- und Kleinschreibung) in Ankerdefinition und Ankerlink ist zu achten.

Zum Seitenanfang

 

Grafiken einfügen
 
Was für Links in Bezug auf Pfadangaben und Schreibweise gilt, gilt natürlich auch für Grafiken. Grafiken werden über die Anweisung IMG in die Seite eingebunden.

Beispiel:

<IMG SRC="foto.gif" WIDTH=100 HEIGHT=150 ALT="Foto von mir">

Die Attribute WIDTH und HEIGHT (Breite und Höhe) geben die Größe der Grafik in Bildpunkten (Pixel) an. Sie sollten immer verwendet werden, da sie als Platzhalter dienen, bis das Bild vollständig geladen wurde und so den Aufbau der restlichen Seite beschleunigen.

ALT ist ein Alternativtext, der angezeigt wird, solange die Datei noch nicht geladen ist oder falls es Schwierigkeiten mit der Darstellung gibt.

Eine interessante Einsatzmöglichkeit von Grafiken besteht darin, diese in einen Link einzubinden, so dass beim Mausklick auf die Grafik der Link ausgeführt wird. Das sieht dann folgendermaßen aus:

<A HREF="index.htm"><IMG SRC="home.gif" WIDTH=40 HEIGHT=40></A>

Das obige Beispiel würde die Grafikdatei "home.gif" anzeigen und bei einem Mausklick darauf die Datei "index.htm" laden.

Zum Seitenanfang

 

Tabellen verwenden
 
Tabellen sind ein häufig benutztes Hilfsmittel zur Positionierung von Text und Grafiken. Auch diese Anleitung enthält als Grundgerüst eine Tabelle. Eine Tabelle wird von den Anweisungen <TABLE> und </TABLE> umrahmt und besteht aus Zeilen <TR> und </TR> (Table Row), die sich in Überschriftszellen <TH> (Table Header) und in Datenzellen <TD> (Table Data) unterteilen.

Hier ein Beispiel einer einfachen Tabelle:

 <TABLE BORDER=1 WIDTH=80% BGCOLOR="#E1E1E1">
  <TR>
   <TH>Spaltentitel</TH>
   <TH>Spaltentitel</TH>
  </TR>
  <TR>
   <TD>Zellentext</TD>
   <TD>Zellentext</TD>
  </TR>
  <TR>
   <TD>Zellentext</TD>
   <TD>Zellentext</TD>
  </TR>
 </TABLE>

Ergebnis:

Spaltentitel Spaltentitel
Zellentext Zellentext
Zellentext Zellentext

Mittels WIDTH kann die Tabellenbreite angegeben werden. In unserem Beispiel 80% des sichtbaren Fensters. BORDER legt die Dicke der Tabellenumrandung fest. BORDER=0 würde die Tabelle ganz ohne Linien darstellen. Mit BGCOLOR ist es möglich für die Tabelle eine, vom übrigem HTML-Dokument abweichende, Hintergrundfarbe einzustellen.

Tabellen können sehr vielseitig eingesetzt werden. Als deutlich sichtbares Element (BORDER größer als 0) oder unsichtbar (BORDER=0) zur Ausrichtung von Textelementen und vor allem auch von Grafiken, die in jede beliebige Tabellenzelle eingefügt werden können.

Hinweis: Inzwischen wird nicht mehr empfohlen Tabellen für Layoutzwecke zu verwenden. Sie sollen nur noch zur tabellarischen Darstellung von Daten benutzt werden.

Zum Seitenanfang

 

Frames verwenden
 
Mittels FRAMESET ist es möglich den Bildschirm in mehrere Fenster (Frames) zu unterteilen. Der Inhalt der einzelnen Fenster wird durch die Anweisung FRAME festgelegt.

Beispiel einer Datei, die eine Framedefinition enthält:

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

<HTML>

<HEAD>
  <TITLE>Weger Software</TITLE>
</HEAD>

<FRAMESET COLS="200,*" FRAMEBORDER=YES FRAMESPACING=5 BORDER=5>
  <FRAME SRC="nav.htm" NAME="Navigation">
  <FRAME SRC="start.htm" NAME="Inhalt">
</FRAMESET>

</HTML>

COLS="200,*" teilt den Bildschirm in zwei Spalten - die erste 200 Bildpunkte breit, die zweite nimmt den Rest des Bildes ein. Mit FRAMEBORDER wird angegeben, ob ein Rahmen um die beiden Spalten angezeigt werden soll. FRAMESPACING bzw. BORDER legen die Dicke dieses Rahmens fest. Da der Microsoft Internet Explorer und der Netscape Navigator unterschiedliche Anweisungen hierfür verwenden, müssen alle beide angegeben werden.

In der ersten Spalte, die im obigen Beispiel den Namen "Navigation" trägt, wird die Datei "nav.htm" geladen. In der zweiten Spalte, mit dem Namen "Inhalt", wird die Datei "start.htm" angezeigt.

Beachten Sie auch das Dateien, die Framedefinitionen enthalten, keinen BODY besitzen. Dieser wird durch das FRAMESET ersetzt.

Möchte man nun ein HTML-Dokument in einem bestimmten Frame laden, geschieht dies über das Attribut TARGET, welches den Namen des Frames angibt, in dem die Seite dargestellt werden soll, zum Beispiel:

<A HREF="neues.htm" TARGET="Inhalt">Neuigkeiten</A>

Für TARGET gibt es außerdem festgelegte Schlüsselbegriffe, die eine bestimmte Funktion erfüllen:

TARGET="_self"
Lädt die Datei im gleichen Frame, in dem sich auch der Link dazu befindet.
Dies ist die Voreinstellung und muss normalerweise nicht extra angegeben werden.

TARGET="_parent"
Lädt das Dokument im übergeordneten Frame.

TARGET="_top"
Die Datei wird ohne Frame, auf dem gesamten Bildschirm angezeigt.

TARGET="_blank"
Ein neues Browser-Fenster wird geöffnet (ebenfalls ohne Frames).

 
Hinweis: Frames sind ab HTML 5 leider nicht mehr erlaubt (ausgenommen Inline-Frames).

 
Zum Seitenanfang

 

   www.weger-software.com

   Impressum | Datenschutzerklärung