Kurzanleitung HTML

Inhaltsverzeichnis
Was ist HTML?
Grundaufbau einer HTML-Seite
Sonderzeichen (ä, ö, ü, ß, ", &, ...)
Textformatierung (zentriert, Schriftgröße, etc.)
Textlineal (horizontal ruler)
Einrückung
Hintergrund
Listen
Tabellen
Hyperlinks und eMail
mit Hyperlink neues Fenster öffnen
Lokaler Anker
Refresh
Grafiken 1 : Größe und Position
Grafiken 2 : Grafiken als Hyperlinks
Sound-Datei automatisch abspielen
Frames 1 : Aufbau von Frames
Frames 2 : Verweise zwischen Frames
Frames 3 : Frame-Set beenden

Was ist HTML?
HTML (HyperText Markup Language) ist "die Programmiersprache", mit der Web-Seiten konstruiert werden.
Eigentlich ist HTML nichts anderes als die Kombination von Text mit den dazugehörigen Steuerzeichen.
Diese Steuerzeichen bezeichnet man als "Tag's" (sprich : täg). Diese Tag's stehen in "Klammern", nämlich den kleiner-als- und größer-als-Zeichen (< und >).
Befehle, die der Browser nicht (er-)kennt, ignoriert er.

Grundaufbau einer HTML-Seite
<HTML>
   <HEAD>
      <TITLE>
      Name der Seite
      </TITLE>
   </HEAD>
   <BODY>
   Text, Grafiken, etc.
   </BODY>
</HTML>

Sonderzeichen
ä = ä Ä = Ä ö = ö Ö = Ö
ü = ü Ü = Ü ß = ß § = §
" = " & = & < = < > = >
SPC =  

Textformatierung
<H1> = Überschrift-Größe (1=größte, 6=kleinste Schrift) </H...>
<CENTER> = zentrieren </CENTER>
<FONT SIZE=1> = Schriftgröße (1=kleinste, 3=Standard, 7=größte Schrift) </FONT>
<FONT COLOR="#FFFFFF"> = Schriftfarbe in RGB-Hex-Zahlen </FONT>
000000=schwarz FFFFFF=weiß FF0000=rot FF8000=orange FFFF00=gelb 00FF00=grün 0000FF=blau FF00FF=violett 00FFFF=türkis 800000=braun
<B> = Bold (fett) </B>
<I> = Italics (kursiv) </I>
<FONT FACE="arial">

= Schriftart "Arial" (auch andere Standardschriftarten
    wie z.B. "Symbol" möglich) </FONT>

<U> = Underline (unterstrichen) </U>
<SUP> = Superscript (hochgestellt) </SUP>
<SUB> = Subscript (tiefgestellt) </SUB>
<BLINK> = blinkend </BLINK>
<PRE> = nichtproportionale Schrift (wie Schreibmaschine) </PRE>
<BR> = Zeilenumbruch
<P> = Zeilenumbruch mit Leerzeile (entspricht <BR><BR>)
<BR CLEAR="all"> = gemeinsamer Zeilenumbruch hinter Grafik + Text
Natürlich sind alle Kombinationen von Größe, Farbe etc. möglich.

Textlineal (horizontal ruler)
<HR> = Textlineal einfügen
<HR WIDTH="20%"> = Textlineal mit einer Breite von 20% der Bildschirmbreite
<HR WIDTH=200> = Textlineal mit einer Breite von 200 Pixeln
<HR SIZE=2> = Textlineal mit einer Höhe von 2 Pixeln
<HR ALIGN="center"> = Textlineal zentriert (auch möglich : "left" und "right")
auch Kombinationen möglich, wie z.B. <HR WIDTH="50%" ALIGN="center">

Einrückung
<DL> = Umrahmung für eine Einrückung </DL>
<DD> = Zeile wird eingerückt </DD>
<DT> = Zeile wird nicht eingerückt </DT>

Hintergrund
<BODY BACKGROUND="bild.gif"> = kachelt den Hintergrund der Seite mit BILD.GIF
<BODY BGCOLOR="#FF0000"> = setzt die Hintergrundfarbe auf rot
Dies funktioniert auch mit Hintergründen für ganze Tabellen, Tabellenzeilen oder Tabellenzellen.
Beispiel : der weiße Hintergrund dieser Zeile entsteht durch <TR BGCOLOR="#FFFFFF">

Listen
<UL> = Umrahmung für eine ungezählte Liste </UL> Beispiel:

<UL>
<LI>Zeile 1
<LI>Zeile 2
</UL>
Zeile 1
Zeile 2

<OL> = Umrahmung für eine gezählte Liste </OL>
<LI> = Beginn einer neuen Listenzeile

Umbrüche passieren automatisch oder durch den <BR>-Tag.
Auch Verschachtelungen von ungezählten und gezählten Listen sind möglich.

Tabellen
<TABLE> = umschließt die gesamte Tabelle </TABLE>
<TABLE BORDER> = Umrahmung der Tabelle einschließlich der Tabellenzellen </TABLE>
<TABLE BORDER=5> = Umrahmung mit der Pixelbreite 5 (bei BORDER=0 keine Umrahmung)
<TABLE WIDTH="80%"> = definiert die Breite der Tabelle als 80% der Bildschirmbreite
<TABLE WIDTH=500> = definiert die Breite der Tabelle als 500 Pixel
<TABLE BGCOLOR="#FFFFFF"> = definiert hFFFFFF=weiß als Hintergrundfarbe der Tabelle
<TABLE CELLSPACING=8> = definiert den Abstand zwischen den einzelnen Zellen als 8 Pixel
<TABLE CELLPADDING=7> = definiert den Abstand zwischen Text und Zellenrand als 7 Pixel
<TR> = umschließt eine Tabellenzeile </TR>
<TD> = umschließt eine Tabellenzelle </TD>
<TD WIDTH="15%" = definiert die Zellenbreite als 15% der Tabellenbreite (Jede Zellenbreite muß einmal definiert sein.) </TD>
<TD ALIGN="center"> = zentriert den Zelleninhalt; möglich sind auch "left" oder "right" </TD>
<TD COLSPAN=3> = verbindet die folgenden drei Zellen in der Zeile zu einer Zelle </TD>
<TD ROWSPAN=2> = verbindet die folgenden zwei Zellen in der Spalte zu einer Zelle </TD>

Hyperlinks und eMail
<A HREF=" ... "> = umrahmt jeden Hyperlink </A>

Hier einige Beispiele (TIP : Beobachte, welchen Hyperlink der Browser anzeigt, wenn sich der Mauspfeil über dem Hyperlink befindet (bei Netscape : links unten)):

Hier steht der Programmcode in HTML ... ... und so sieht's dann aus.

Hyperlink zu <A HREF="http://www.geocities.com">GeoCities</A> Hyperlink zu Geocities
Schreiben Sie mir eine <A HREF="mailto:michael.ziltz@gmx.de">eMail</A> Schreiben Sie mir eine eMail
Hyperlink zu einer <A HREF="nichts.html">Datei</A> im gleichen Verzeichnis Hyperlink zu einer Datei im gleichen Verzeichnis
Hyperlink zur Datei <A HREF="bilder/comic.gif">COMIC.GIF</A> im Unterverzeichnis "BILDER" Hyperlink zur Datei COMIC.GIF im Unterverzeichnis "BILDER"
Hyperlink zur Datei <A HREF="../index.html">INDEX.HTML</A> im übergeordneten Verzeichnis Hyperlink zur Datei INDEX.HTML im übergeordneten Verzeichnis
Hyperlink zur <A HREF="../index.html">WebDesign-Hauptseite <IMG SRC="webdesign.gif"></A> im übergeordneten Verzeichnis Hyperlink zur WebDesign-Hauptseite im übergeordneten Verzeichnis
Hyperlink zur Datei <A HREF="file:///c:/windows/win.ini"> C:/WINDOWS/WIN.INI</A> auf der Festplatte = Hyperlink zur Datei C:/WINDOWS/WIN.INI auf der Festplatte

mit Hyperlink neues Fenster öffnen
<A HREF="http://www.geocities.com" TARGET="window-2">GeoCities</A> = Öffnet beim Anklicken von GeoCities die GeoCities-Homepage in einem neuen Browser-Fenster

Lokaler Anker
<A NAME="Z1"></A> = Definition des Zielankers "Z1"
<A HREF="#Z1">Ziel 1</A> = Hyperlink zum Anker "Z1" in der gleichen Datei
<A HREF="seite2.html#Z3">Ziel 3</A> = Hyperlink zum Anker "Z3" in Datei "SEITE2.HTML"

Refresh
<META HTTP_EQUIV="Refresh" CONTENT="5"> = lädt die selbe Seite nach 5 Sekunden neu ein
<META HTTP-EQUIV="Refresh" CONTENT="5" URL="NEU.HTML"> = lädt nach 5 Sekunden die Datei "NEU.HTML"

Grafiken 1: Größe und Position
<IMG SRC="bild.gif"> = fügt die Grafik BILD.GIF ein
<IMG SRC="bild.gif" ALT="Das ist ein Bild"> = läßt beim Überfahren der Grafik ein Minifenster mit der Schrift "Das ist ein Bild" erscheinen
<IMG SRC="bild.gif" ALIGN="left"> 2 KByte Text = positioniert die Grafik linksbündig und läßt die 2 Kilobyte Text auf der rechten Seite um die Grafik fließen (alternativ geht auch ALIGN="right")
<IMG SRC="bild.gif">Hier steht ein Text = fügt rechts unten neben der Grafik den Text "Hier steht ein Text" ein
<IMG SRC="bild.gif" ALIGN="top">Hier steht ein Text = fügt rechts oben neben der Grafik den Text "Hier steht ein Text" ein (alternativ geht auch ALIGN="middle" : Text steht rechts in der mittleren Höhe neben der Grafik)
<BR CLEAR="all"> macht einen gemeinsamen Zeilenumbruch hinter Text + Grafik. Die nächste Textzeile beginnt dann unter der Grafik.
<IMG SRC="bild.gif" VSPACE=20 HSPACE=10> = läßt neben der Grafik 20 Pixel und über/unter der Grafik 10 Pixel Platz
<IMG SRC="bild.gif" WIDTH=100 HEIGHT=50> = stellt die Grafik in der Größe 100*50 Pixel dar, unabhängig von der Originalgröße.
Die Angabe von WIDTH und HEIGHT ist unbedingt zu empfehlen. Damit kann der Browser die Seite schon formatieren und den Text darstellen, auch wenn die enthaltenen Bilddateien erst nach und nach geladen werden. Höhe und Breite der Grafiken werden von den meisten Grafikprogrammen dargestellt (z.B. bei PaintShop in der linken unteren Ecke).
<IMG SRC="bild-sw.gif" LOWSRC="bild-col.gif"> = baut zuerst die schnell zu ladende Schwarzweiß-Grafik BILD-SW.GIF auf und ersetzt diese dann mit der langsamer ladenden Farb-Grafik BILD-COL.GIF

Grafiken 2: Grafiken als Hyperlinks
Natürlich kann man anstelle eines Textes auch eine Grafik als Hyperlink verwenden (siehe das Ordnersymbol "Web-Design" in Hyperlinks und eMail).
Es gibt aber auch die Möglichkeit, nur Teile einer Grafik einem Hyperlink zuzuordnen (z.B. bei einem Stadtplan einen Hyperlink auf die Stadthalle, einen auf das Rathaus, einen auf das Schwimmbad, ...).
Nehmen wir einmal an, wir haben einen Stadtplan mit der Gröszlig;e 500*300 Pixel. Im Rechteck 100/50-120/70 ist das Rathaus, im Kreis um den Punkt 300/200 mit Radius 10 ist das Schwimmbad, und die avantgardistisch geplante Stadthalle belegt das Dreieck mit den Eckpunkten 400/100, 440/100, 420/150.
<MAP NAME=stadtplan> = definiert und startet die Karte "stadtplan".
<AREA SHAPE=rect coords="100,50,120,70" HREF="rathaus.html"> = erzeugt im Koordinatenrechteck 100/50-120/70 einen Hyperlink zu RATHAUS.HTML
<AREA SHAPE=circle coords="300,200,10" HREF="schwimmbad.html"> = erzeugt im Kreis um den Punkt 300/200 mit Radius 10 einen Hyperlink zu SCHWIMMBAD.HTML
<AREA SHAPE=polygon coords="400,100,440,100,420,150" HREF="stadthalle.html"> = erzeugt im Dreieck mit den Eckpunkten 400/100, 440/100, 420/150 einen Hyperlink zu STADTHALLE.HTML
</MAP> = beendet die Karte
<IMG SRC="innenstadt.gif" BORDER=0 WIDTH=500 HEIGHT=300 USEMAP="#stadtplan"> = definiert die Datei INNENSTADT.GIF mit der Größe 500*300 als Karte "stadtplan"
Mit dem Attribut NOHREF anstatt HREF="..."können auch Bereiche explizit ausgeklammert werden.

Sound-Datei automatisch abspielen
Leider benutzen Netscape und der Internet-Explorer hier unterschiedliche Befehle. Damit die Dateien auf beiden Browsern abgespielt werden empfiehlt sich folgender Doppelbefehl :
<EMBED SRC="gmiller.mid" HIDDEN="true">
<BGSOUND SRC="gmiller.mid" LOOP=2> = spielt die MIDI-Datei GMILLER.MID auf beiden Browsern automatisch ab. Netscape (2. Zeile) hier sogar 2-mal

Frames 1 : Aufbau von Frames
Die beispielhafte Grundseite erzeugt drei Frames, von denen jeder Frame durch eine eigene HTML-Datei definiert wird. Die Grundseite ist lediglich für die Aufteilung verantwortlich.
<HTML>
<HEAD><TITLE>FrameSet </TITLE></HEAD>
<FRAMESET ROWS="20%,80%"> = spaltet den Bildschirm horizontal in 20% / 80% So ungefähr ist die Aufteilung der Frames "oben", "links" und "rechts".
<FRAME SRC="oben.html" NAME="oben"> = Der obere Frame bekommt den Inhalt OBEN.HTML und den Namen OBEN.
<FRAMESET COLS="25%","75%"> = spaltet den Bildschirm vertikal in 25% / 75%
<FRAME SRC="links.html" NAME="links"> = Der links Frame bekommt den Inhalt LINKS.HTML und den Namen LINKS.
<FRAME SRC="rechts.html" NAME="rechts"> = Der rechte Frame bekommt den Inhalt RECHTS.HTML und den Namen RECHTS.
</FRAMESET> = beendet die beiden unteren Frames
</FRAMESET> = beendet den oberen Frame
</HTML>
Anstatt der prozentualen Größenbezeichnung ist auch die Definition mit Absolutzahlen (z.B. "100,650") möglich.
<FRAME SRC="frame-1.html" NORESIZE> = verhindert, daß sich der so entstehende Frame (aber nur der!) verschieben läßt.
<FRAME SRC="frame-1.html" SCROLLING="no"> = verhindert den automatischen Einbau von Bildlaufleisten falls erforderlich ("yes" baut die Bildlaufleiste zwingend ein)
< ... .html" MARGINWIDTH=50 MARGINHEIGHT=100> = läßt zwischen Frame und der Seitenbegrenzung der HTML-Seite (nicht Hintergrund!) einen Rand von der Höhe 50 und der Breite 100 entstehen.

Frames 2 : Verweise zwischen Frames
Frames werden i.A. dazu verwendet, damit ein einheitliches Gesamtlayout erhalten bleibt. Im Beispiel aus Frames 1 steht z.B. der Gesamttitel der Homepage im Frame OBEN, das Inhaltsverzeichnis befindet sich im Frame LINKS und lediglich die Anzeige im Frame RECHTS ändert sich je nach Mausklick im Inhaltsverzeichnis-Frame.
Im Frame LINKS steht dann z.B. der Hyperlink :
<A HREF="ich.html" TARGET="rechts">Ich über mich</A> = Bei Mausklick auf Ich über mich im Frame LINKS erscheint im Frame RECHTS die Datei ICH.HTML.
Bei einem Hyperlink ohne TARGET="..." ändert sich lediglich der aktuelle Frame.

Frames 3 : Frame-Set beenden
Der TARGET-Tag aus Frames 2 wird auch verwendet, um ein Frame-Set zu beenden (z.B. beim Verlassen der eigenen Homepage). Hier gibt es einige fest definierte Befehle :
<A HREF="nichts.html" TARGET="_blank" ... = Der Browser öffnet ein neues Anzeigefenster mit dem Verweisziel. Ausprobieren!
<A HREF="nichts.html" TARGET="_parent" ... = Der Browser schließt die Frames und zeigt das Verweisziel in dem Zustand des Anzeigefensters, das vor dem Start des eigenen Frame-Sets aktuell war.
<A HREF="nichts.html" TARGET="_top" ... = Das Verweisziel wird im gesamten Anzeigefenster angezeigt.

Seit der feierlichen Er�ffnung am 12. Oktober 1998

Zugriffe.

Sonderzeichen
ä	= ä	Ä	= Ä	ö	= ö	Ö	= Ö
ü	= ü	Ü	= Ü	ß	= ß	§	= §
"	= "	&	= &	<	= <	>	= >
SPC	=

Textformatierung
<H1>	= Überschrift-Größe (1=größte, 6=kleinste Schrift)	</H...>
<CENTER>	= zentrieren	</CENTER>
<FONT SIZE=1>	= Schriftgröße (1=kleinste, 3=Standard, 7=größte Schrift)	</FONT>
<FONT COLOR="#FFFFFF">	= Schriftfarbe in RGB-Hex-Zahlen	</FONT>
	000000=schwarz FFFFFF=weiß FF0000=rot FF8000=orange FFFF00=gelb 00FF00=grün 0000FF=blau FF00FF=violett 00FFFF=türkis 800000=braun
<B>	= Bold (fett)	</B>
<I>	= Italics (kursiv)	</I>
<FONT FACE="arial">	= Schriftart "Arial" (auch andere Standardschriftarten wie z.B. "Symbol" möglich)	</FONT>
<U>	= Underline (unterstrichen)	</U>
<SUP>	= Superscript (hochgestellt)	</SUP>
<SUB>	= Subscript (tiefgestellt)	</SUB>
<BLINK>	= blinkend	</BLINK>
<PRE>	= nichtproportionale Schrift (wie Schreibmaschine)	</PRE>
<BR>	= Zeilenumbruch
<P>	= Zeilenumbruch mit Leerzeile (entspricht <BR><BR>)
<BR CLEAR="all">	= gemeinsamer Zeilenumbruch hinter Grafik + Text
Natürlich sind alle Kombinationen von Größe, Farbe etc. möglich.

Textlineal (horizontal ruler)
<HR>	= Textlineal einfügen
<HR WIDTH="20%">	= Textlineal mit einer Breite von 20% der Bildschirmbreite
<HR WIDTH=200>	= Textlineal mit einer Breite von 200 Pixeln
<HR SIZE=2>	= Textlineal mit einer Höhe von 2 Pixeln
<HR ALIGN="center">	= Textlineal zentriert (auch möglich : "left" und "right")
auch Kombinationen möglich, wie z.B. <HR WIDTH="50%" ALIGN="center">

Einrückung
<DL>	= Umrahmung für eine Einrückung	</DL>
<DD>	= Zeile wird eingerückt	</DD>
<DT>	= Zeile wird nicht eingerückt	</DT>

Hintergrund
<BODY BACKGROUND="bild.gif">	= kachelt den Hintergrund der Seite mit BILD.GIF
<BODY BGCOLOR="#FF0000">	= setzt die Hintergrundfarbe auf rot
Dies funktioniert auch mit Hintergründen für ganze Tabellen, Tabellenzeilen oder Tabellenzellen. Beispiel : der weiße Hintergrund dieser Zeile entsteht durch <TR BGCOLOR="#FFFFFF">

Listen
<UL>	= Umrahmung für eine ungezählte Liste	</UL>	Beispiel:	<UL> <LI>Zeile 1 <LI>Zeile 2 </UL>	Zeile 1 Zeile 2
<OL>	= Umrahmung für eine gezählte Liste	</OL>
<LI>	= Beginn einer neuen Listenzeile

Umbrüche passieren automatisch oder durch den <BR>-Tag. Auch Verschachtelungen von ungezählten und gezählten Listen sind möglich.

Tabellen
<TABLE>	= umschließt die gesamte Tabelle	</TABLE>
<TABLE BORDER>	= Umrahmung der Tabelle einschließlich der Tabellenzellen	</TABLE>
<TABLE BORDER=5>	= Umrahmung mit der Pixelbreite 5 (bei BORDER=0 keine Umrahmung)
<TABLE WIDTH="80%">	= definiert die Breite der Tabelle als 80% der Bildschirmbreite
<TABLE WIDTH=500>	= definiert die Breite der Tabelle als 500 Pixel
<TABLE BGCOLOR="#FFFFFF">	= definiert hFFFFFF=weiß als Hintergrundfarbe der Tabelle
<TABLE CELLSPACING=8>	= definiert den Abstand zwischen den einzelnen Zellen als 8 Pixel
<TABLE CELLPADDING=7>	= definiert den Abstand zwischen Text und Zellenrand als 7 Pixel
<TR>	= umschließt eine Tabellenzeile	</TR>
<TD>	= umschließt eine Tabellenzelle	</TD>
<TD WIDTH="15%"	= definiert die Zellenbreite als 15% der Tabellenbreite (Jede Zellenbreite muß einmal definiert sein.)	</TD>
<TD ALIGN="center">	= zentriert den Zelleninhalt; möglich sind auch "left" oder "right"	</TD>
<TD COLSPAN=3>	= verbindet die folgenden drei Zellen in der Zeile zu einer Zelle	</TD>
<TD ROWSPAN=2>	= verbindet die folgenden zwei Zellen in der Spalte zu einer Zelle	</TD>

Hyperlinks und eMail
<A HREF=" ... ">	= umrahmt jeden Hyperlink	</A>

Hier einige Beispiele (TIP : Beobachte, welchen Hyperlink der Browser anzeigt, wenn sich der Mauspfeil über dem Hyperlink befindet (bei Netscape : links unten)):
Hier steht der Programmcode in HTML ...	... und so sieht's dann aus.
Hyperlink zu <A HREF="http://www.geocities.com">GeoCities</A>	Hyperlink zu Geocities
Schreiben Sie mir eine <A HREF="mailto:michael.ziltz@gmx.de">eMail</A>	Schreiben Sie mir eine eMail
Hyperlink zu einer <A HREF="nichts.html">Datei</A> im gleichen Verzeichnis	Hyperlink zu einer Datei im gleichen Verzeichnis
Hyperlink zur Datei <A HREF="bilder/comic.gif">COMIC.GIF</A> im Unterverzeichnis "BILDER"	Hyperlink zur Datei COMIC.GIF im Unterverzeichnis "BILDER"
Hyperlink zur Datei <A HREF="../index.html">INDEX.HTML</A> im übergeordneten Verzeichnis	Hyperlink zur Datei INDEX.HTML im übergeordneten Verzeichnis
Hyperlink zur <A HREF="../index.html">WebDesign-Hauptseite <IMG SRC="webdesign.gif"></A> im übergeordneten Verzeichnis	Hyperlink zur WebDesign-Hauptseite im übergeordneten Verzeichnis
Hyperlink zur Datei <A HREF="file:///c:/windows/win.ini"> C:/WINDOWS/WIN.INI</A> auf der Festplatte	= Hyperlink zur Datei C:/WINDOWS/WIN.INI auf der Festplatte

mit Hyperlink neues Fenster öffnen
<A HREF="http://www.geocities.com" TARGET="window-2">GeoCities</A>	= Öffnet beim Anklicken von GeoCities die GeoCities-Homepage in einem neuen Browser-Fenster

Lokaler Anker
<A NAME="Z1"></A>	= Definition des Zielankers "Z1"
<A HREF="#Z1">Ziel 1</A>	= Hyperlink zum Anker "Z1" in der gleichen Datei
<A HREF="seite2.html#Z3">Ziel 3</A>	= Hyperlink zum Anker "Z3" in Datei "SEITE2.HTML"

Refresh
<META HTTP_EQUIV="Refresh" CONTENT="5">	= lädt die selbe Seite nach 5 Sekunden neu ein
<META HTTP-EQUIV="Refresh" CONTENT="5" URL="NEU.HTML">	= lädt nach 5 Sekunden die Datei "NEU.HTML"

Grafiken 1: Größe und Position
<IMG SRC="bild.gif">	= fügt die Grafik BILD.GIF ein
<IMG SRC="bild.gif" ALT="Das ist ein Bild">	= läßt beim Überfahren der Grafik ein Minifenster mit der Schrift "Das ist ein Bild" erscheinen
<IMG SRC="bild.gif" ALIGN="left"> 2 KByte Text	= positioniert die Grafik linksbündig und läßt die 2 Kilobyte Text auf der rechten Seite um die Grafik fließen (alternativ geht auch ALIGN="right")
<IMG SRC="bild.gif">Hier steht ein Text	= fügt rechts unten neben der Grafik den Text "Hier steht ein Text" ein
<IMG SRC="bild.gif" ALIGN="top">Hier steht ein Text	= fügt rechts oben neben der Grafik den Text "Hier steht ein Text" ein (alternativ geht auch ALIGN="middle" : Text steht rechts in der mittleren Höhe neben der Grafik)
<BR CLEAR="all"> macht einen gemeinsamen Zeilenumbruch hinter Text + Grafik. Die nächste Textzeile beginnt dann unter der Grafik.
<IMG SRC="bild.gif" VSPACE=20 HSPACE=10>	= läßt neben der Grafik 20 Pixel und über/unter der Grafik 10 Pixel Platz
<IMG SRC="bild.gif" WIDTH=100 HEIGHT=50>	= stellt die Grafik in der Größe 100*50 Pixel dar, unabhängig von der Originalgröße.
Die Angabe von WIDTH und HEIGHT ist unbedingt zu empfehlen. Damit kann der Browser die Seite schon formatieren und den Text darstellen, auch wenn die enthaltenen Bilddateien erst nach und nach geladen werden. Höhe und Breite der Grafiken werden von den meisten Grafikprogrammen dargestellt (z.B. bei PaintShop in der linken unteren Ecke).
<IMG SRC="bild-sw.gif" LOWSRC="bild-col.gif">	= baut zuerst die schnell zu ladende Schwarzweiß-Grafik BILD-SW.GIF auf und ersetzt diese dann mit der langsamer ladenden Farb-Grafik BILD-COL.GIF

Grafiken 2: Grafiken als Hyperlinks
Natürlich kann man anstelle eines Textes auch eine Grafik als Hyperlink verwenden (siehe das Ordnersymbol "Web-Design" in *Hyperlinks und eMail). Es gibt aber auch die Möglichkeit, nur Teile einer Grafik einem Hyperlink zuzuordnen (z.B. bei einem Stadtplan einen Hyperlink auf die Stadthalle, einen auf das Rathaus, einen auf das Schwimmbad, ...). Nehmen wir einmal an, wir haben einen Stadtplan mit der Gröszlig;e 500300 Pixel. Im Rechteck 100/50-120/70 ist das Rathaus, im Kreis um den Punkt 300/200 mit Radius 10 ist das Schwimmbad, und die avantgardistisch geplante Stadthalle belegt das Dreieck mit den Eckpunkten 400/100, 440/100, 420/150.
<MAP NAME=stadtplan>	= definiert und startet die Karte "stadtplan".
<AREA SHAPE=rect coords="100,50,120,70" HREF="rathaus.html">	= erzeugt im Koordinatenrechteck 100/50-120/70 einen Hyperlink zu RATHAUS.HTML
<AREA SHAPE=circle coords="300,200,10" HREF="schwimmbad.html">	= erzeugt im Kreis um den Punkt 300/200 mit Radius 10 einen Hyperlink zu SCHWIMMBAD.HTML
<AREA SHAPE=polygon coords="400,100,440,100,420,150" HREF="stadthalle.html">	= erzeugt im Dreieck mit den Eckpunkten 400/100, 440/100, 420/150 einen Hyperlink zu STADTHALLE.HTML
</MAP>	= beendet die Karte
<IMG SRC="innenstadt.gif" BORDER=0 WIDTH=500 HEIGHT=300 USEMAP="#stadtplan">	= definiert die Datei INNENSTADT.GIF mit der Größe 500*300 als Karte "stadtplan"
Mit dem Attribut NOHREF anstatt HREF="..."können auch Bereiche explizit ausgeklammert werden.

Sound-Datei automatisch abspielen
Leider benutzen Netscape und der Internet-Explorer hier unterschiedliche Befehle. Damit die Dateien auf beiden Browsern abgespielt werden empfiehlt sich folgender Doppelbefehl :
<EMBED SRC="gmiller.mid" HIDDEN="true"> <BGSOUND SRC="gmiller.mid" LOOP=2>	= spielt die MIDI-Datei GMILLER.MID auf beiden Browsern automatisch ab. Netscape (2. Zeile) hier sogar 2-mal

Frames 1 : Aufbau von Frames
Die beispielhafte Grundseite erzeugt drei Frames, von denen jeder Frame durch eine eigene HTML-Datei definiert wird. Die Grundseite ist lediglich für die Aufteilung verantwortlich.
<HTML>
<HEAD><TITLE>FrameSet </TITLE></HEAD>
<FRAMESET ROWS="20%,80%">	= spaltet den Bildschirm horizontal in 20% / 80%
<FRAME SRC="oben.html" NAME="oben">	= Der obere Frame bekommt den Inhalt OBEN.HTML und den Namen OBEN.
<FRAMESET COLS="25%","75%">	= spaltet den Bildschirm vertikal in 25% / 75%
<FRAME SRC="links.html" NAME="links">	= Der links Frame bekommt den Inhalt LINKS.HTML und den Namen LINKS.
<FRAME SRC="rechts.html" NAME="rechts">	= Der rechte Frame bekommt den Inhalt RECHTS.HTML und den Namen RECHTS.
</FRAMESET>	= beendet die beiden unteren Frames
</FRAMESET>	= beendet den oberen Frame
</HTML>
Anstatt der prozentualen Größenbezeichnung ist auch die Definition mit Absolutzahlen (z.B. "100,650") möglich.
<FRAME SRC="frame-1.html" NORESIZE>	= verhindert, daß sich der so entstehende Frame (aber nur der!) verschieben läßt.
<FRAME SRC="frame-1.html" SCROLLING="no">	= verhindert den automatischen Einbau von Bildlaufleisten falls erforderlich ("yes" baut die Bildlaufleiste zwingend ein)
< ... .html" MARGINWIDTH=50 MARGINHEIGHT=100>	= läßt zwischen Frame und der Seitenbegrenzung der HTML-Seite (nicht Hintergrund!) einen Rand von der Höhe 50 und der Breite 100 entstehen.

Frames 2 : Verweise zwischen Frames
Frames werden i.A. dazu verwendet, damit ein einheitliches Gesamtlayout erhalten bleibt. Im Beispiel aus *Frames 1* steht z.B. der Gesamttitel der Homepage im Frame OBEN, das Inhaltsverzeichnis befindet sich im Frame LINKS und lediglich die Anzeige im Frame RECHTS ändert sich je nach Mausklick im Inhaltsverzeichnis-Frame. Im Frame LINKS steht dann z.B. der Hyperlink :
<A HREF="ich.html" TARGET="rechts">Ich über mich</A>	= Bei Mausklick auf Ich über mich im Frame LINKS erscheint im Frame RECHTS die Datei ICH.HTML.
Bei einem Hyperlink ohne TARGET="..." ändert sich lediglich der aktuelle Frame.

Frames 3 : Frame-Set beenden
Der TARGET-Tag aus *Frames 2* wird auch verwendet, um ein Frame-Set zu beenden (z.B. beim Verlassen der eigenen Homepage). Hier gibt es einige fest definierte Befehle :
<A HREF="nichts.html" TARGET="_blank" ...	= Der Browser öffnet ein neues Anzeigefenster mit dem Verweisziel. Ausprobieren!
<A HREF="nichts.html" TARGET="_parent" ...	= Der Browser schließt die Frames und zeigt das Verweisziel in dem Zustand des Anzeigefensters, das vor dem Start des eigenen Frame-Sets aktuell war.
<A HREF="nichts.html" TARGET="_top" ...	= Das Verweisziel wird im gesamten Anzeigefenster angezeigt.