Aufbereitung von Informationen für das Internet -
Hypertextstruktur
 

Einführung in HTML-Tags - Der Aufbau von HTML

Obwohl die meisten HTML-Editoren keine besondere Kenntnisse über HTML voraussetzen, sollte man trotzdem den speziellen Aufbau einer HTML-Seite kennen. Oft ist es auch zweckmäßiger, schnell ein Tag in den HTML-Quelltext einzugeben, als lange nach dem entsprechenden Menüpunkt beim Editor zu suchen.

Außerdem bieten nicht alle Editoren sämtliche HTML-Tags zur Auswahl an, so daß man nicht vollkommen ohne Kenntnisse einiger wichtiger Tags trotz der vielen Möglichkeiten moderner HTML-Editoren auskommt. HTML-Dateien können mit jedem beliebigen (ASCII-) Texteditor geschreiben oder nachbearbeitet werden. In AOLPress  ist schon ein solcher Editor eingebaut, der zusätzlich die Tags farblich vom Text abhebt und die Struktur des Textes automatisch durch Einrückungen darstellt. Ein weiterer Editor für HTML-Seiten ist der Netscape-Composer.

Hier einige Beispiele für einfache HTML-Seiten:
 
Beispiel
Das macht der Browser daraus
Beispiel 1.) Eine Minimalseite 

<HTML> 
<HEAD> <TITLE>Diese Zeile wird nicht angezeigt</TITLE> </HEAD> 
<BODY> 
Dies ist ein einfaches Beispiel f&uuml;r eine HTML-Seite<P> 
Dieser Text erscheint in der zweiten Zeile 
</BODY> 
</HTML>

Dies ist ein einfaches Beispiel für eine HTML-Seite 

Dieser Text erscheint in der zweiten Zeile

Beispiel 2.) Verwendung von Zeichenformatierungsbefehle 

<HTML> 
<HEAD> <TITLE></TITLE> </HEAD> 
<BODY> 
<P>Aufbau einer HTML-Seite: 
<H2>Dies ist ein &Uuml;berschrift</H2> 
<P>Dies ist <B>Fettschrift</B></P> 
<P>Dies ist <I>Kursivschrift</I></P> 
<P>Dies ist <TT>keine Proportionalschrift</TT></P> 
<P>Dies ist <FONT COLOR="#FF0000">farbige</FONT> 
<FONT COLOR="#000080">Schrift</FONT></P> 
</BODY> 
</HTML>

Aufbau einer HTML-Seite 
Dies ist ein Überschrift 

Dies ist Fettschrift 

Dies ist Kursivschrift 

Dies ist keine Proportionalschrift 

Dies ist farbige Schrift

Beispiel 3.) Eine farbige Tabelle. (Erweiterung der Tabellen-Tags) 

<HTML><HEAD> <TITLE></TITLE> </HEAD> 
<BODY> 
Ein Beispiel f&uuml;r eine farbige Tabelle:<P> 
<TABLE BORDER=8> 
<TR><TD Bgcolor=blue><FONT COLOR="#FFFF00">Blaue Hintergrundfarbe</FONT></TD> 
<TD bgcolor=green bordercolor=red>Gr&uuml;ne Hintergrundfarbe</TD></TR> 
<TR> 
<TD Bgcolor=yellow>Gelbe Hintergrundfarbe</TD> 
<TD Bgcolor=red>rote Hintergrundfarbe</TD> 
</TR> 
</TABLE></BODY></HTML>

Ein Beispiel für eine farbige Tabelle 
Blauer Hintergrund Grüner Hintergrund
Gelber Hintergrund roter Hintergrund
 
Beispiel 4.) Implizite Javascript-Befehle im HTML-Text 

<HTML> 
<HEAD> 
<TITLE>Beispiel fuer implizites Javascript</TITLE> 
</HEAD> 
<BODY> 
Dies ist ein Beispiel f&uuml;r einen 
<P><A HREF="http://www.lehrer.uni-karlsruhe.de"  
onMouseOver="window.status='Hier erhalten Sie weitere  
Informationen';return true"  
onMouseOut="window.status='';return true">Link</A> 
mit Zusatztext in der Statuszeile. 
</BODY> 
</HTML>

Dies ist ein Beispiel für einen 

Link mit Zusatztext in der Statuszeile 

 

Zusammenfassung:


 Die wichtigsten HTML-Tags

Wie schon erwähnt, ist es manchmal günstig, anstatt mit Hilfe eines HTML-Editors die HTML-Tags direkt in den Text einzugeben.
Hier die wichtigsten Tags:

1.) Zeichenformatierungen
 
Das ist gewünscht
so geht's
Fettdruck Besipiel für <B>Fettdruck</B>
Starke Hervorhebung  <STRONG>starke</STRONG> Hervorhebung
Kursiv (Italic) Beispiel für<I>Kursivschrift</I>
Überschrift Die größte <H1>Überschrift<H1> 
die zweitgrößte <H2>Überschrift</H2> 
..... <H6>....</H6>
Teletype (nichtproportionale Schrift) Beispiel für <TT>nichtprop. Schrift</TT>
Farbige Schrift Hier <FONT COLOR=red>rote Schrift</FONT>
Blinkende Schrift Hier <BLINK>blinkt</BLINK> die Schrift
Durchgestrichene Schrift dies ist <S>durchgestrichen</S>
Eine etwas größere Schrift ab hier wirds <BIG>größer</BIG>
Eine etwas kleinere Schrift ab hier wirds <SMALL>kleiner</SMALL>
Quelltext ab hier ist es <CODE>Quelltext</CODE>
2.) Absatzformatierungen:
 
Das ist gewünscht
so geht's
Eine neue Zeile (weiches Return) <BR>
Ein neuer Absatz (hartes Return) <P>
Einen Absatz etwas einrücken <BLOCKQUOTE>.....</BLOCKQUOTE>
Vorformatierter Text <PRE>.......</PRE>
Adresssenformat <ADRESS>.....<ADRESS>
Bemerkung <NOTE> ...... </NOTE>
Textblock zentrieren  
(auch innerhalb von Tabellen)
<CENTER> .... </CENTER>
3.) Tabellen:
 
Das ist gewünscht
so geht's
Es soll eine Tabelle erzeugt werden mit einer  
Randsstärke von 2 Pixel
<TABLE BORDER=2> 
........ 
</TABLE>
eine neue Zeile beginnen <TR>
Eine Spalte innerhalb der Zeile <TD>.....</TD>
wie oben, jedoch mit Fettschrift;  
wird meist für Tabellenüberschriften benutzt
<TH> ....</TH>
Ein Beispiel: <TABLE BORDER=1> 
<TR><TH>Name</TH><TH>ORT></TH></TR> 
<TR><TD>Biene Maya </TD><TD>Blume</TD></TR> 
<TR><TD>.......</TD><TD>.......</TD></TR> 
</TABLE>
Die nebenstehende Tabelle kann folgendermaßen erzeugt werden: 

<TABLE Border=1> 
<TR><TD ROWSPAN=3>...</TD><TD>...</TD><TD>...</TD></TR> 
<TR><TD>....</TD><TD>.....</TD></TR> 
<TR><TD COLSPAN=2>....</TD></TR> 
</TABLE>

4.) Bilder und Links einfügen
 
Das ist gewünscht
so geht's
Ein Bild einfügen <IMG SRC="dateiname">
Einen Link einfügen <A HREF="http://www......">klicke hier</A>
Ein Bild kann auch angeklickt werden  
und damit als Link dienen.
<A HREF="http://www....."><IMG SRC="datei"></A>
5.) Listen:
 
Das ist gewünscht
so geht's
Numerierte Liste mit Listeneinträgen <OL> 
   <LI> ---- 
   <LI> ---- 
</OL>
Verschachtelte nicht-numerierte Liste 
mit Listeneinträgen
<UL> 
   <LI> ------ 
   <LI> ------ 
   <UL> 
     <LI> ................... 
     <LI> ................... 
   </UL> 
   <LI> ----- 
</UL>
Zusätzlich gibt es noch sogenannte Entities um Sonderzeichen darstellen zu können.
Hier die wichtigsten Beispiele:
 
&lt;     < &gt;    > &amp;   & &reg;   Ò  &copy;    Ó  &tm;   ä 
&nbsp; Leerzeichen &alpha;   a  &auml;   ä &uuml;   ü &ouml;    ö &szlig;  ß


Bemerkung:

Alle HTML-Tags hier aufzuzählen würde den Rahmen dieses Worksshops sprengen. Zudem gibt es mittlerweile HTML-Editoren, die die Angabe von HTML-Tags nicht mehr benötigen. Für weitergehende Informationen kann man im Internet danach suchen. Inzwischen gibt es auch viele Bücher, die sich mit HTML beschäftigen.

Literatur:
Frederik Ramm, Recherchieren und Publizieren im World Wid Web,
Vieweg, ISBN 3-528-15513-2

Weitere Informationen im Internet: Erstellung von HTML-Seiten


Verantwortlich für diese Seite:
Roland Bernert