LearnTec - 6. Februar 1998 - 9.00 12.30 Uhr

OStR Thomas Mühlbayer, OStR Roland Bernert

Section U, U2, Worksshop

 

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 ohne die Kenntnis einiger wichtiger Tags trotz der vielen Möglichkeiten moderner HTML-Editoren nicht vollkommen ohne die Kenntnis des HTML-Codes 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.

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



Verantwortlich für diese Seite:
Roland Bernert