Thema     : Einführung in HTML
Datum     : 7.3.2002
Form      : Unterrichts-Begleitmaterial
Hinweis   : Ersetzt kein Lehrbuch
Dateiname : html-inf.rtf
Version   : D1.4.7  vorläufige Fassung
Verfasser : G.H.Singmann
Internet  : www.singmann.de
E-Mail....: guenter@singmann.de
.
a) Empfohlene Formatierung: Courier oder Arial mit Schriftgrad 9
b) !=unwichtig     !!!!!=sehr wichtig
c) Suchen mit STRG F
01.) HTML-Dokumente
01.01) Allgemeines
HTML (Hyper Text Markup Language) genormte Seitenbeschreibungssprache für
ein unabhängiges Textformat; der Browser stellt den Text samt Formatierung
und Hyperlinks anhand von HTML-Tags dar;
Erstellung mittels ASCII-Editor und Tags oder HTML-Editor, der den Text
in eine HTML-Datei konvertiert; der Server sendet dem Browser die
HTML-Datei (ASCII-Datei) zu, der Browser verwandelt diese in eine Web-Seite;
mehrere aufeinanderfolgende Leerzeichen werden zu einem zusammengefaßt;

Gründe zur Erstellung des HTML-Dokuments (=der Web-Seite) mittels 
ASCII-Editor:
a) HTML-Dokumente werden von verschiedenen fehlertoleranten 
   Browsern unterschiedlich übersetzt bzw. angezeigt
b) HTML-Seiten lassen sich mit jedem beliebigen Editor erstellen
   und danach mit einem Web-Browser kontrollieren
c) Browser enthalten Erweiterungen, die noch nicht standardisiert wurden.
.
Hinweise:
Im HTML-Quelltext werden...
- aufeinanderfolgende Leerzeichen durch ein Leerzeichen ersetzt
- Leerzeilen im Quelltext unterdrückt
.
Begriffe:
Webseite=HTML-Dokument
HTML-Tags
Groß-/Kleinschreibung egal
offene und geschlossene Tags
Header=Kopfteil
Body=Rumpfteil, Textrumpf eines HTML-Dokuments
01.02) Genereller Aufbau eines HTML-Dokumentes
<TITLE> scheint als Lesezeichen/Bookmark in der Titelleiste der Browser
01.02.a) Beispiel XXX001.HTM:
   <HTML>
   <HEAD>       <!--Dokumentkopf, interne Überschrift-->
    <TITLE>      Dokument 08/15
    </TITLE>     <!Dokumenttitel>
    <META NAME="Name" CONTENT="Inhalt">
   </HEAD>
   <BODY>       <!Dokumentkörper>
   <H1>Mein erster HTML-Text.</H1>
   Wer dies liest, ist doof!
   </BODY>
   </HTML>
.
01.02.b) HTML-Seitenaufbau
  <HTML></HTML>  Hieran erkennt der Web-Browser 
                 den Anfang und das Ende
                 der HTML-Datei, des HTML-Dokuments
  <BODY></BODY>  Seiteninhalt
.
01.02.c) Beispiel XXX002.HTM mit Begrüssungsmelodie track12.wav
beim Öffnene, Laden der HTM-Datei:
  <HTML> 
  <HEAD> <TITLE> Dokument-Titel </TITLE>
   <META NAME="Author" CONTENT="Gerda Klein">
   <META NAME="Hinweis" CONTENT="Im Hafen ist die Hölle los.">
   <BGSOUND SRC="track12.wav" loop="2">
  </HEAD>
  <BODY>         sichtbarer Hauptteil 
  </BODY></HTML>
01.03) <BODY> Farben und Hintergrund
Hintergrund: Standard ist grau
Standard-Farbnamen, HTML-Farbwerte: 
BLACK, SILVER, GRAY, WHITE,
MAROON, RED, PURPLE, FUCHSIA,
GREEN, LIME, OLIVE, YELLOW,
NAVY, BLUE, TEAL, AQUA;
Hinweis: nicht jeder Browser nutzt die Farbnamen

a) <BODY BGCOLOR=green>
b) <BODY BGCOLOR="#EF0098">                    
    Hintergrundfarbe
c) <BODY TEXT="#0000FF">                       
   Textfarbe
d) <BODY BACKGROUND="\hptools\ghslogo1.gif">   
   Hintergrundgrafik/Hintergrundbild mit 
   automatischer Bildwiederholung
e) <BODY BACKGROUND="file://A:/windows/streifen.bmp">
   Hintergrundbild mit automatischer Bildwiederholung
f) <BODY BACKGROUND="file://C:/windows/streifen.bmp" 
    bgcolor="#000000" text="#0000FF" 
    LINK=#00FF00" VLINK="#008888" ALINK="#FF0000>
g)  <body bgcolor="#000080" text="#FF8800">
01.04) Zeichenformatierung, Stile
a) <I> kursiv/italic </I>    
b) <B> fett/bold Fettdruck </B>   
c) <U> unterstrichen/underscore </U>   
d) <TT> SCHREIBMASCHINENSCHRIFT/TYPEWRITER TEXT MIT        
        GLEICHER ZEICHENLÄNGE (dicktengleich) </TT>   
e) <BLINK> BLINKT bei MSIE </BLINK>   
f) <S> DURCHGESTRICHEN strikeout </S>   
g) <STRIKE> durchgestrichen </STRIKE>
h) <SUB>
<SUB> tiefgestellt subscript </SUB>
H<SUB>2</SUB>O
i) <SUP> hochgestellt superscript </SUP>
j) <SMALL> kleine Schrift</SMALL>
k) <BIG> große Schrift(art) </BIG>
l) <STRONG> meistens FETT </STRONG>
m) <code> Quellcode, Listing in nichtproportionaler Schrift </code>
n) <i><u>kursiv und unterstrichen</u></i>
o) <CITE> Hervorhebung des Textes als Zitat und ggf. kursiv </CITE>
p) <EM> kursive Texthervorhebung </EM>
q) <VAR> Texthervorhebung, z.B. kursiv </VAR>
01.05) FONT  Schriftarten, Fonts
SIZE=Schriftgröße 1 bis 7, auch relativ;
Schriftartnamen, z.B. ARIAL, genau angeben;
a) <FONT FACE="Courier New" SIZE=30>Courier 30</FONT>
b) <FONT FACE="Arial" COLOR="YELLOW">farbige Schrift</FONT>
c) <FONT COLOR="CYAN">farbige Schrift</FONT>
d) <FONT COLOR="MANGENTA">farbige Schrift</FONT>
e) <FONT COLOR="#FF0000"> rote Schrift</FONT>
f) <FONT size=7 COLOR="BLACK">farbige Schrift</FONT>jetzt normale Schrift
g) <font size=6 face=wide latin,Arial color=black> ggf. Auswahl der 
    Schriftart</font>wieder normal
h)<basefont size=6>Normalschriftgröße verändern bis zum nächsten </font>
i)<font size=5 face=Wide Latin, Arial color=red> Browser verwendet 
Wide Latin.
 Falls nicht vorhanden, Arial</font>Wieder normale Schriftart.
01.06) <BR> BREAK
Einzelkommando, bleibt im gleichen Absatz:
Zeilenumbruch innerhalb eines Absatzes; 
Break-Tag, Zeilenumbruch in der Anzeige
a) <P> Zeile 1 <BR> und hier Zeile 2</P>
01.07) <P> Absatz und Absatzausrichtung
<p>: Paragraph-Tag, erzeugt eine Leerzeile bzw. Absatzschaltung;
Angabe <P>mit und </P> empfehlenswert; 
Hinweis: <BR> bewirkt einen harten Zeilenumbruch;
a) <P>Absatz</P>
b) <P> Text mit der Möglichkeit des weichen Umbruchs an
   Wortzwischenräumen durch den Browser </P>
c) <P ALIGN=CENTER> zentrierter Absatz</P>
d) <P ALIGN=LEFT>   linksbündiger Absatz</P>
e) <P ALIGN=RIGHT>  rechtsbündiger Absatz</P>
01.08) <Hx> Überschrift
Beschreibung: Leitet eine Überschrift ein.
Headline-Tag Level (Ebene) H1 bis H6;
Überschrift ist eigener Absatz, Absatzschaltung <P> nicht notwendig;
Default: ALIGN=left
a) <H1> Headline-Level 1 </H1>
b) <H3 ALIGN=center> Überschrift zentriert</H3>
c) <H4 ALIGN=left> Überschrift links ausgerichtet</H4>
d) <H3 ALIGN=right> <i> <font color=red>
   Überschrift kursiv rot </font> </I></H3>
e) <H1><b>Überschrift23</B></H1>
f) <H2><font color="#FF0000">Überschrift24</font></H2>
01.09) Zitatblöcke, Einzüge
Verschachtelung mit Blockquote-Tags;
a) <BLOCKQUOTE> eingerückt </BLOCKQUOTE>
b) <BLOCKQUOTE> eingerückt
   <BLOCKQUOTE> weiter eingerückt </BLOCKQUOTE></BLOCKQUOTE>
01.10) <A> Anker-Tag (Anchor-Tag) Sprung/Hyperlink-Einbindung
<A> fügt Verknüpfung, Hyperlink, Link, Verweis ein
- Syntax: <A HREF=(Verweisziel)>Verweistext</A>
- zu einer anderen Webseite
  http://pfadangabe
  file://pfadangabe
  HREF = Hypertext REFerence
a) <A HREF="http://www.xyz.de">zurück zur Homepage</A>
b) <A HREF="linkxyz.htm">meine Lieblings-Seite</A>
c) <a href="file://c:\hptools\home.htm">Mein Home</A>
    auf dem lokalen PC
d) <A href="http://www.dtag.de">Deutsche Telekom AG</A>
e) <A href="mailto:Gerda.Klein@t-online.de">eMail an Gerda Klein</A>
   Electronic Mail bzw. elektronische Post an 
   E-Mail-Adresse (user-ID@host)
   Allgemein: <A HREF="MAILTO:alias"> Erklärung</A>
f) <A HREF="bild2.htm"> <IMG SRC="../PIC/hund1.gif" alter="Weiter"> </A>
    Webseite bild2.htm wird durch Anklicken von 
    Ankerbild/Grafik hund1.gif aufgerufen.
g) <A HREF=FILE://LOCALHOST/C:/WINDOWS/HELP.HLP>Hilfetexte</A>
h) <A HREF=FILE://C:/hptools/home.htm>HTM: Homepage lokal</A>
i) <A HREF=FILE://C:/hptools/ghslogo1.gif>GIF: GIF-Logo</A>
j) <A HREF=FILE://C:/hptools/LLISTE_1.DOC>DOC: LListe_1.DOC laden</A>
k) <A HREF=Bild3.htm target=Fenster4>weiter</A>
    TARGET: Verweisziel im aktuellen Rahmen und das mit Target 
    angegebenen Fenster anzeigen
l) <A HREF=FILE://C:/hptools/LLISTE_1.HTM#SIEBEN>LListe_1.HTM Abschn.7</A>
   auf Anker in einem anderen HTML-Dokument springen
n) Verweis auf eine Textdatei:
   <A href="http://www.xyz.de/home/utext1.txt">Unterrichtsmaterial</A>    
n) Verknüpfungen/Anker innerhalb des HTML-Dokumentes;
   Hypertext springt zur Textmarke/Sprungmarke;
   Textmarken werden nicht optisch hervorgehoben;
  <BODY> 
  <A NAME="Seitenanfang"> Seitenanfang</A>
  <A HREF="#Seitenanfang"> zurück zum Seitenanfang</A> 
  </BODY>
o) Verweis zum Anker in einem anderen Dokument:
  <A HREF="uebers.htm#Seitenanfang"> zurück zum Übersicht</A> 
01.11) <UL> Einfache/Unsortierte Liste (Aufzählungsliste)
<UL> leitet Festlegung einer unsortierten Liste ein.
<LI> leitet den folgenden Eintrag in einer Liste ein.
Aufzählungen/Unordered bzw. Unnumbered List erstellen;
Punktliste mit Bulletzeichen (großer Punkt am Zeilenbeginn)
Aufzählungszeichen: TYPE=DISC, CIRCLE, SQUARE
LH=List Header/Listenkopf; LI=List Item/Listeneintrag
a) <UL>  <!--Orte Anfang der Aufzählung-->
    <LI>  Hamburg   erstes Element der Aufzählung </LI>
    <LI>  Pinneberg zweites Element der Aufzählung</LI>
   </UL> <!Ende der Aufzählung>
b) <UL TYPE=SQUARE> 
   <!--UL TYPE=circle--> 
   <!--UL TYPE=disc--> 
    <LH>  <B>Hast Du Kummer mit die Deinen...</B><BR>
    <LI>  Bier auf Wein, das laß' sein!
    <LI>  Wein auf Bier, das rat' ich Dir!
   </UL> <!Ende der Aufzählung>
01.12) <DIR> Directory-/Verzeichnis-Listen
wie <UL>;
a) <dir>
    <LI>Norden FL</LI>
    <LI>Süden  SE</LI>
    <LI>Osten  HL</LI>
    <LI>Westen NF</LI>
   </dir>
01.13) <OL> Sortierte/numerierte Liste / Ordered List
OL: Leitet Festlegung einer sortierten Liste ein.
OL=Ordered List; Listewird automatisch durchnumeriert;
Start für Startwert; Value für Wertänderung innerhalb der Liste;
Zahlenformate: type=i, type=I, type=1, type=a, type=A, 
a) <OL type=1>
    <LI>Norden </LI>
    <LI>Süden  </LI>
    <LI>Osten  </LI>
    <LI>Westen </LI>
   </OL>
b) <OL type=1>
    <LI>Norden </LI>
    <LI>Süden  </LI>
    <LI>Osten  </LI>
    <LI value=1000>Osten  </LI>
    <LI>Westen </LI>
   </OL>
c) <OL type=i>
   <!--OL type=A-->
   <!--OL type=A start=F-->
   <!--OL start=10-->
    <LI>Norden </LI>
    <LI>Süden  </LI>
    <LI>Osten  </LI>
    <LI>Westen </LI>
   </OL>
01.14) <DL> Definitionslisten, Definierte Liste, Definition List
Anwendung: Glossar und Begriffsbestimmungen (Baumstruktur)
DL=Definition List
DT=Definition Term, leitet Glossar-Eintrag ein
DD=Definition Definition
a) <DL>  <!Anfang der Definitionsliste>
    <DT>  Pinneberg = erster zu definierender Begriff </DT>
     <DD>  eine schöne Stadt = erste Definition         </DD>
    <DT>  Waldhagen  zweiter zu definierender Begriff </DT>
     <DD>  ein schönes Dorf = zweite Definition         </DD>
   </DL> <!Ende der Definitionsliste>
01.15) <OL> Geschachtelte/Verschachtelte Listen
   <OL type=I>
   <LI>Tiere    </LI>
    <UL type=circle>
     <LI>Hund   </LI>
     <LI>Katze  </LI>
    </UL>
   <LI>Pflanzen </LI>
    <UL>
     <LI>Baum   </LI>
     <LI>Blume  </LI>
     <LI>Strauch</LI>
    </UL>
   </OL>
01.16) Kommentar, Dokumentation im HTML-Quelltext
a) <!--  Dies ist ein üblicher Kommentar -->
01.17 <HR> Horizontale Trennlinie
Beschreibung: Fügt eine waagerechte Linie ein.
Dicke in Pixel; normale Trennlinie ohne noshade erzeugt
dreidimensionalen Effekt
a) <HR>Überschrift 1
b) <HR>
c) <HR>Überschrift 2
d) <HR WIDTH=60  ALIGN=left> 60 Pixel
e) <HR WIDTH=60% ALIGN=left> 60 % des Bildschirmbreite
f) <HR WIDTH=60% ALIGN=center>
g) <HR WIDTH=60% ALIGN=right>
i) <HR NOSHADE> Trennlinienschattierung deaktivieren;
j) <HR NOSHADE WIDTH=65% SIZE=6 ALIGN=CENTER>
k) <HR size=15>
l) <HR color="red">
m) <HR color=#990000>
n) <HR size=15 noshade>
o) <HR size=20 width=65%>
p) <HR size=20 width=65> Breite 65 Pixel
q) <HR size=20 width=65 align=right>
r) <HR size=20 width=65 align=center>
s) <HR size=20 width=65 align=left>
01.18) Umlaute und Sonderzeichen (Referenzliste)
Escapesequenzen werden mit & eingeleitet und ; beendet;
Sonderzeichen und Umlaute werden maskiert (Maskierung) bzw
durch Entities (Entity) dargestellt
Maskierung von Sonderzeichen
Sonderzeichen werden durch Entities dargestellt.
Beispielformulierung: &auml; ist die Umschreibung bzw. Entity für ä.
ä = &auml;   ö = &ouml;   ü = &uuml; 
Ä = &Auml;   Ö = &Ouml;   Ü = &Uuml; 
< = &lt;    less than
> = &gt;    greater than
ß = &szlig;
& = &amp    ampersand, kaufmännische UND
&copy       copyright
&quot;
&reg;       registered trademark
&trade;     trademark
&ntilde;
&egrave;
&ecirc;
&eacute;
&#137;      ASCII-Nummer
&#65;       Buchstabe A
&nbsp;      non-breaking space
01.19) <IMG> Grafik / IMAGE /Binärdatei einfügen/einbinden
Beschreibung: Mit IMG werden GIF- oder JPG-Grafikdateien 
bzw. Bilddateien in das HTML-Dokument eingefügt.
SRC (SouRCe=Quelle, Ursprung) nennt die URL der Grafikdatei im GIF oder JPEG-Format;
ALT nennt Alternativ-Anzeige-Text, falls die Grafikanzeige 
ausgeschaltet wurde;
GIF und JPEG-Dateien sind komprimiert und haben kürzere Übertragungszeiten
als BMP-Bitmap-Dateien;
Browser können ggf. Bilder nicht verkleinern/vergrößern, daher Bilder
mit Grafikprogramm auf Wunschgröße bringen;
IMG=IMaGe
SRC=SouRCe
Ausrichtung: ALIGN=BOTTOM (Standard), TOP, MIDDLE, TEXTTOP, 
             ABSBOTTOM, BASELINE, LEFT, RIGHT
a) <img SRC="pic/bildchen.gif" align=left width=80 height=70 alt="Text">
b) <img SRC="photo2.gif">
   photo2.gif im gleichen Verzeichnis
c) <img SRC="../pic/blume.gif" align=right border=1>
d) <img SRC="../pic/hund1.gif" align=left border=0>
e) <img SRC="grafik/bildchen.gif" ALT="bildchen">Mein Lieblingsbild</IMG>
f) <img src="file://c:\hw1win\untdat\internet\image28.gif">
    auf der lokalen Festplatte
g) <IMG SRC="blume.gif">
h) <IMG SRC="blume.gif" ALT="Blümchen">
i) <IMG SRC="/hptools/ghs_web/ghslogo1.gif" 
   ALIGN="RIGHT" WIDTH=172 HEIGHT=96 ALT="ghslogo1.gif">
j) <img src="/HW1WIN/UNTDAT/INTERNET/Image28.gif" 
   width=60 heigth=70 alt="Nix Bild">Rose</A></P></BODY>
k) <IMG SRC="/hptools/ghs_web/wnlogo2.jpg" 
   ALIGN="RIGHT" WIDTH=172 HEIGHT=96 ALT="wnlogo als jpg">
l) <A HREF="bild2.htm"> <IMG SRC="../PIC/hund1.gif" alter="Weiter"> </A>
    Webseite bild2.htm wird durch Anklicken von 
    Ankerbild/Grafik hund1.gif aufgerufen.
m) diverse Varianten
bim1<img src="\ghs\ghsgif\image2.gif border=16"> <BR> <HR>
bam1<img src="\ghs\ghsgif\image21.gif" alt="nix Bildchen"> <BR> <HR>
bum1<img src="\ghs\ghsgif\image20.gif" alt="nix Bildchen" border=16> <BR> <HR>
bim2<img src="\ghs\ghsgif\comp.gif" border=8 > <BR> <HR>
bam2<img src="\hptools\gsinsweb\ghslogo1.gif" hight=60 width=60 border=50>text default <BR> <HR>
bum2<img src="\hptools\gsinsweb\ghslogo1.gif" hight=60 width=60 
border=50 align=bottom>bottom/unten <BR> <HR>
bim3<img src="\hptools\gsinsweb\ghslogo1.gif" hight=60 width=60 
border=50 align=top>top/oben <BR> <HR>
bam3<img src="\hptools\gsinsweb\ghslogo1.gif" hight=60 width=60 
border=50 align=middle>middle/mittig <BR>
01.20) <TABLE> Tabelle
<TABLE> leitet Festlegung einer Tabelle ein.
<TD> enthält Text dieser Tabellenzelle
<TH> enthält Text dieser Kopfzelle
<TR> neue Tabellenzeile
Text in mehreren Spalten;
CAPTION=Tabellen-Überschrift/-Beschriftung
BORDER = äußere Rahmenbreite
CELLSPACING = Breite der Feldabgrenzung bzw. innere Rahmendicke
CELLPADDING = Abstand der Felder zur Feldgrenze bzw. Randabstand des
Zellinhaltes zum inneren Rahmen;
TABLE WIDTH=600 (in Pixel)
TABLE WIDTH=65% (der Fensterbreite)
TR=Table Row       = Tags rahmen Zeile ein
TH=Tabel Header    = Tags rahmen Zelle der Kopfzeile ein
TD=Table Data cell = Tags rahmen Zelle ein
Ausrichtung: align=left oder center oder right;
.
01.20.a) Beispiel Rahmendicke mit BORDER
   <TABLE BORDER="1" bgcolor=blue>
   <!--TABLE BORDER="0"-->
   <!--TABLE-->
   <TR> <!--TableRow-->
    <TD><font color="#ff8040"> Z1S1</TD> <!TableDefinition>
    <TD> Z1S2</TD>
   </TR>
   <TR>
    <TD> Z2S1</TD>
    <TD> Z2S2</TD>
   </TR>
   </TABLE>
.
01.20.b) Beispiel asymetrische Tabelle COLSPAN bzw. Zellen verbinden
   <TABLE BORDER="1" cellspacing=15 cellpadding=10>
   <TR> <!--TableRow-->
    <TD COLSPAN="2"> Z1S1</TD> <!--zwei Zellen verbinden-->
    <TD> Z1S2</TD>
   </TR>
   <TR>
    <TD> Z2S1</TD>
    <TD> Z2S2</TD>
    <TD> Z2S3</TD>
   </TR>
   </TABLE>
.
01.20.c) Beispiel asymetrische Tabelle ROWSPAN
   <TABLE BORDER="1">
   <TR> <!TableRow>
    <TD ROWSPAN="2"> Z1S1</TD> <!TableDefinition>
    <TD> Z1S2</TD>
    <TD> Z1S3</TD>
   </TR>
   <TR>
    <TD> Z2S1</TD>
    <TD> Z2S2</TD>
   </TR>
   </TABLE>
.
01.20.d) TH CAPTION
   Beispiel Tabelle mit Kopfzeile bzw. Spaltenüberschrift
   Tabellenüberschrift: caption align=top
   Tabellenunterschrift: caption align=bottom
Bsp.:
   <TABLE BORDER="1" width=100%>
    <Caption align=top><B> Temperaturen</B></Caption>
    <TR>
     <TD></TD>
     <TH>Jan</TH>
     <TH>Feb</TH>
     <TH>Mär</TH>
    </TR>
    <TR>
     <TH height=300> Entenhausen</TH> <!--Zeilenhöhe festlegen-->
     <TD> -5</TD>
     <TD> -10</TD>
     <TD>   8</TD>
    </TR>
    <TR>
     <TH> Kl. Kleckersdorf</TH>
     <TD> -13</TD>
     <TD> -11</TD>
     <TD>   8</TD>
    </TR>
   </TABLE>
.
01.20.e) CELLSPACING CELLPADDING
   CELLSPACING für Dicke der Zellumrandung
   CELLPADDING für Abstand zwischen Zellrand und Zellinhalt
    <TABLE BORDER="1" CELLSPACING=6 CELLPADDING=9>
    <TR>
     <TD>Jan</TD>
     <TD>Feb</TD>
     <TD>Mär</TD>
    </TR>
    </TABLE>
.
01.20.f) Breite und Höhe im Verhältnis zum Browser-Fenster
    <TABLE WIDTH=100% HEIGHT=90%>
    ....
    </TABLE>
.
01.20.g) Zeilenhöhe und Spaltenbreite erzwingen mittels Pixelangabe
   <TABLE BORDER="1" WIDTH=100%>
   <TR> <!TableRow>
    <TD WIDTH=250 HEIGHT=160> Z1S1</TD> <!TableDefinition>
    <TD> Z1S2</TD>
    <TD> Z1S3</TD>
   </TR>
   <TR>
    <TD> Z2S1</TD>
    <TD> Z2S2</TD>
   </TR>
   </TABLE>
.
01.20.h) Zelleninhalte ausrichten ALIGN, VALIGN,
   LEFT, RIGHT, CENTER, TOP, MIDDLE, BOTTOM
   <TABLE BORDER="1" WIDTH=100%>
   <TR VALIGN=MIDDLE> <!--TableRow-->
    <TD ALIGN=CENTER> Z1S1</TD> <!--TableDefinition-->
    <TD ALIGN=CENTER> Z1S2</TD>
    <TD> Z1S3</TD>
   </TR>
   <TR VALIGN=MIDDLE>
    <TD> Z2S1</TD>
    <TD> Z2S2</TD>
   </TR>
   </TABLE>
.
01.20.i) Farbige Rahmen
   <TABLE BORDER=1 BORDERCOLOR=#C0000>
    ......
   </TABLE>
.
01.20.j) Farbige Zellen, Gesamt- und Einzeldefinition
   <TABLE BORDER=1 BGCOLOR=#C0A300>
    ......
    <TD BGCOLOR=#FFFFFF> Z2S1</TD>
   </TABLE>
.
01.20.k) CAPTION
   Tabellenüberschrift
   <TABLE BORDER=1 BGCOLOR=#C0A300>
   <CAPTION VALIGN=TOP> Ortsvergleich </CAPTION>
    <TR>
     <TD BGCOLOR=#FFFFFF> Ort  </TD>
     <TD> Groß-Hamburg         </TD>
     <TD> Kl. Kleckersdorf     </TD>
    </TR>
    <TR>
     <TD BGCOLOR=#FFFFFF> Einwohner </TD>
     <TD align=right> 1.732.321    </TD>
     <TD align=right> 17           </TD>
    </TR>
   </TABLE>
.
01.20.l) NOWRAP CAPTION
   Zellentext nicht umbrechen mit NOWRAP
   <TABLE BORDER=1 BGCOLOR=#C0A300>
   <CAPTION VALIGN=TOP> kein Umbruch </CAPTION>
    <TR>
     <TD BGCOLOR=#FFFFFF nowrap> Dieser Text ist sehr lang und 
         enthält viele
         Wörter. Er erschein in einer Zeile und bewirkt 
         keinen Umbruch.
     </TD>
     <TD> kurzer Text1 </TD>
    </TR>
    <TR>
     <TD> kurzer Text2 </TD>
     <TD> kurzer Text3</TD>
    </TR>
   </TABLE>
.
01.20.m) WIDTH
   Beispiel zur relativen Zellenbreite
   <TABLE BORDER width=100%>
   <TR> <!TableRow>
    <TD width=15%>  Nr</TD> <!TableDefinition>
    <TD width=55%>  Menü</TD>
    <TD width=30%>  Preis</TD>
   </TR>
   <TR>
    <TD> 123</TD>
    <TD> Stammessen 1</TD>
    <TD> DM 12,00</TD>
   </TR>
   </TABLE>
01.21) <CENTER> Bereiche zeilenzentriert ausrichten
der eingeschlossene Text wird zeilenzentriert;
für Objekte wie Absätze, Überschriften, Grafik;
wird durch ALIGN ersetzt;
  a) <CENTER>
      <H1>Überschrift 1</H1>
      <P>Absatz1</P>
     </CENTER>
01.22) <MAP> <AREA> Clientside Imagemaps
a) AREA legt innerhalb einer Grafik einen hot-spot-Bereich fest, der
   mit einem Link belegt wird.
b) Hotspots der Imagemaps erzeugen Link; Sensitive Bilder;
a) <img src="/windows/kugeln.bmp" height=64 
    width=64 border=0 usemap="#URL_LISTE">
   <MAP name="URL_LISTE">
    <area shape="rect" coords="0,0,31,31" 
     href="file://a:/ghs/ghsavi/wasch.avi" alt="Animation Waschen">
    <area shape="rect" coords="32,0,63,31" 
     href="/windows/kugeln.bmp"            alt="BMP-Kugeln">
    <area shape="rect" coords="0,32,31,63" 
     href="/windows/media/kamera.wav"      alt="Kamera-Klick">
    <area shape="rect" coords="32,32,63,63" 
     href="http://www.dtag.de"             alt="Telekom">
   </MAP>
01.23) ADRESSe
<ADRESS>Realisation GHS-Soft Hamburg 1997</ADDRESS>
01.24) <PRE> Vorformatierter Text
PREformatted Text in Nicht-Proportionalschrift (Courier);
Tabulatoren, Leerzeichen und Leerzeilen bleiben erhalten;
   a) <PRE>Formatierung
                       /Leerzeichen
                                   /Leerzeilen beibehalten
      </PRE>

   b) <PRE>
        <B>Nachname    Telefon</B>
        Hansen, G.      47 11
        Klein, G.       47 12
      </PRE>
01.26) <FORM> Formular-Container
Beschreibung: Leitet Festlegung, Definition eines Formulars ein.
Anwendung: Bestelllisten, Fragebogen
Hinweis: enctype="text/plain"
Browser versendet Formulardaten als normalen Text.

a) <SELECT> Auswahlboxen (vgl. Herdt S.52)
Hinweis: multiple bewirkt eine Mehrfachauswahl
Hinweis: size=1 bewirkt eine Dropdown-Liste
Hinweis: selected bewirkt Markierung
Hinweis: value="xxx" xxx wird zurückgeschickt

<select name="Liste" size=5 multiple>
<!--select name="Liste" size=1-->
<option value="perPedes" selected>zu Fuß
<option value="Bus">Bus HVV
<option value="S-Bahn">S-Bahn HVV
<option value="Auto">eigenes Auto
<option value="PundW">Pferd und Wagen
<option value="Taxe">Taxi
<option value="Flugzeug">Flugzeug
</select>
.
b) <TEXTAREA> Eingabe-Textfelder (vgl. Herdt S.51)
<TEXTAREA name="Meckerecke" rows=5 cols=50>Ihre Wünsche?
</TEXTAREA>
.
c) <INPUT RADIO> Optionsfelder (vgl. Herdt S.50)
nur eine Auswahl aus mehreren Wahlmöglichkeiten
<H3>Jahreszeit</H3>
<INPUT type=radio name="Quartal" value="Frühjahr" checked>Frühjahr
<INPUT type=radio name="Quartal" value="Sommer"          >Sommer
<INPUT type=radio name="Quartal" value="Herbst"          >Herbst
<INPUT type=radio name="Quartal" value="Winter"          >Winter
.
d) <INPUT CHECKBOX> Kontrollkästchen (vgl. Herdt S.50)
eine oder mehrere Auswahlmöglichkeiten
<H3>Elektroakustik</H3>
<INPUT type=checkbox name="Fahrzeug" value="TV"   checked>Fernseher
<INPUT type=checkbox name="Fahrzeug" value="Radio"       >Radio
<INPUT type=checkbox name="Fahrzeug" value="Radiowecker" >Radiowecker
<INPUT type=checkbox name="Fahrzeug" value="Autoradio"   >Autoradio
.
e) <FORM INPUT> Formular-Container 
<H2>Bestell-Formular</H2>
<form action="http://home.t-online.de/home/G.H.Singmann"  method="POST"> <TT>
BestNr: <INPUT type=text     name="BestNr"           size=10  maxlength=25> <BR>
__Bez.: <INPUT type=text     name="Bez"              size=20 maxlength=256> <BR>
Anzahl: <INPUT type=text     name="Anz"    value="1" size=6  maxlength=10>  <BR>
_Kd-Nr: <INPUT type=password name="KdNr"   value=""  size=6 maxlength=10>  <BR>
Liefer: <INPUT type=radio    name="Lief"   value="Post" checked> Post
        <INPUT type=radio    name="Lief"   value="Paketdienst" > Paketdienst<BR>
__Info: <INPUT type=checkbox name="Kat"    value="Katalog" >     Katalog
        <INPUT type=checkbox name="SAng"   value="Angebot" >    Sonderangeb.<BR>
Sonst.: <Textarea name="Wunsch" rows=5 cols=30>Ihre Wünsche</Textarea>     <BR>
        <INPUT type=submit   name="OK"     value="Abschicken">              <BR>
        <INPUT type=reset    name="Cancel" value="Eingaben löschen">        <BR>
</TT>
</form>
.
f) <FORM INPUT> vollständiges Beispiel
<html>
<head><title>GHSFormular01</title>
</head>
<body bgcolor="#FFFFFF">
<h3>
Senden Sie mir<BR>
mit diesem Formular<BR>
Ihre Nachricht (Wünsche, Ideen, Vorschläge, Anliegen, Gedanken, Meckereien usw.)
</h3>
<form action="MailTo:G.H.Singmann@t-online.de" method="post" enctype="text/plain">
<H3>A. Notwendige Angaben:</H3>
1. Ihr Nachname, Vorname&#160;&#160; <input name="NVname" size=60 maxlenght=80><br>
2. Ihre E-Mail Adresse&#160;&#160; <input name="EMailAdr" size=60 maxlenght=80><br>
3. Ihre Nachricht an mich&#160;&#160; 
<textarea name="Nachricht" rows=2 cols=80 wrap=virtual></textarea><br>
<H3>B. Weitere, freiwillige Angaben:</H3>
4. Ihre Fax-Nr.&#160;&#160;<input name="FaxNr1" size=50 maxlenght=255><br>
5. Ihre erste Telefon-Nr.&#160;&#160;<input name="TelNr1" size=50 maxlenght=255><br>
6. Ihre zweite Telefon-Nr.&#160;&#160;<input name="TelNr1" size=50 maxlenght=255><br>
7. Wie sind Sie per Fax erreichbar?&#160;&#160;
<select name="FaxErreichbar" size=1>
 <option>immer, auch nachts
 <option>vorher anrufen
 <option>Fax nur mit PC
 <option>Fax nur tagsüber
 <option>noch kein Fax
 <option>Fax ist leider putti
</select><br>
8. Ihr Vermerk:&#160;&#160;
<input type=radio name="Vermerk1" value="ES">Eilt sehr!!!&#160;&#160;
<input type=radio name="Vermerk1" value="BUR">Bitte um Rückruf&#160;&#160;
<input type=radio name="Vermerk1" value="BUA">Bitte um Antwort&#160;&#160;
<input type=radio name="Vermerk1" value="BUF>Bitte um Faxantwort&#160;&#160;
<input type=radio name="Vermerk1" value="ZK">Zur Kenntnisnahme
</p>
<H3>C. Eingaben...</H3>
<input type=submit value="absenden">&#160;&#160;
<input type=reset value="verwerfen"><br>
</form>
</body>
</html>
01.27) <MARQUEE> Laufschrift
Parameter: DIRECTION, LOOP, SCROLLAMOUNT, SCROLLDELAY
a) <marquee> MSIE 1. Marquee </marquee>
b) <font size=5 color=red>
   <marquee> MSIE 2. Marquee </marquee>
   </font>
c) <font size=7 color=blue>
   <marquee align=top width=50% hight=140> MSIE 3. Marquee </marquee>
   </font>
d) <font size=7 color=blue>
   <marquee direction=right bgcolor=yellow align=top width=65% hight=180> 
    MSIE 4. Marquee </marquee>
   </font>
e) <font size=7 color=blue>
   <marquee scrollamount=40 direction=right bgcolor=red align=top 
    width=75% hight=180> MSIE 5. Marquee </marquee>
   </font>
f) <font size=9 color=yellow>
   <marquee scrollamount=40 scrolldelay=1000 direction=right bgcolor=blue align=top 
    width=85% hight=180> MSIE 6. Marquee </marquee>
   </font>
01.28) <EMBED> Eingebettete Objekte
a) <embed src="file://a:\ghs\ghsavi\wasch.avi"     width=150 height=100> <BR>
b) <embed src="file://C:\windows\media\chimes.wav" width=150 height=100> <BR>
c) <embed src="file://C:\windows\media\ding.wav" width=150 height=100> <BR>
01.29) FRAMESET FRAME NOFRAME Rahmen
gleichzeitige Anzeige eigenständiger HTML-Dateien in festgelegten Bereichen
(frames=Rahmen) des Bildschirmes
FRAMESET: Leitet Festlegung, Definition eines Rahmenssets ein.
FRAME: Leitet Festlegung, Definition eines Rahmens ein.
<NOFRAME> Browser leider ohne Rahmendarstellung :-(( </NOFRAME>

Parameter: 
a) Rahmen anzeigen mit FRAMEBORDER=0(nein) oder =1(ja); 
b) Abstand der Frames mit FRAMESPACING;
c) MARGINHEIGHT: legt vertikalen Abstand zur Rahmenbegrenzung fest.
d) MARGINWIDTH: legt horizontalen Abstand zur Rahmenbegrenzung fest.
e) SCROLLING: Anzeige der Bildlaufleisten
SCROLLING=AUTO(default)
SCROLLING=NO keine Bildlaufleiste anzeigen
SCROLLING=YES
f) NORESIZE: Rahmengröße nicht veränderbar

Sntax: <frameset cols/rows=Aufteilung 
        border=pixelanzahl 
        frameborder=1/0 oder yes/no 
        framespacing=pixelanzahl>
Hinweis zu NORESIZE:
<frame src=datei1.htm NORESIZE> Framegröße ist unveränderbar und 
wirkt sich auf angrenzende Frames aus!
Hinweis:  <frame src=datei1.htm scrolling=yes/no> Bildlaufleiste wird
erzwungen oder unterdrückt.
.
a1) zwei Rahmen (nebeneinander)
<HTML>
<HEAD>
<TITLE>Rahmenseite1</TITLE>
</HEAD>
<frameset cols="30%, 70%" border=15>
 <frame src="file://C:\hptools\home.htm" name="GHS-Homepage">
 <frame src="file://C:\hptools\kurse_97.htm" name="Kurse">
</frameset>
<body>
a) Text für Browser ohne Frame-Anzeige.
b) Browser mit Frameanzeige unterdrücken diesen body-Bereich.
</body>
</HTML>
.
a2) zwei Rahmen (nebeneinander), falls darstellbar
<HTML>
<HEAD>
<TITLE>Rahmenseite1</TITLE>
</HEAD>
<frameset cols="30%, 70%" border=15>
 <frame src="file://C:\hptools\home.htm" name="GHS-Homepage">
 <frame src="file://C:\hptools\kurse_97.htm" name="Kurse">
 <noframes>
  <body bgcolor=green>
   Ihr Browser kann leider keine Frames darstellen!
  </body>
 </noframes>
</frameset>
<body>
a) Text für Browser ohne Frame-Anzeige.
b) Browser mit Frameanzeige unterdrücken diesen body-Bereich.
</body>
</HTML>
.
b) drei Rahmen (oben einer, unten zwei)
<HTML>
<HEAD>
<TITLE>Rahmenseite2</TITLE>
</HEAD>
<frameset rows="30%, 70%">
 <frame src="file://C:\hptools\home.htm" name="GHS-Homepage">
 <frameset cols="20%, 80%"> 
  <frame src="file://C:\hptools\kurse_97.htm" name="Kurse97">
  <frame src="file://C:\hptools\kurse_98.htm" name="Kurse98">
</frameset>
</HTML>
.
c) vier Rahmen (oben zwei, unten zwei)
<HTML>
<HEAD>
<TITLE>Rahmenseite3</TITLE>
</HEAD>
<frameset rows="25%, 75%">
 <frameset cols="20%, 80%"> 
  <frame src="file://C:\hptools\home.htm" name="GHS-Homepage">
  <frame src="file://C:\hptools\lliste_1.htm" name="Linkliste1">
 </frameset>
 <frameset cols="25%, 75%"> 
  <frame src="file://C:\hptools\kurse_97.htm" name="Kurse97">
  <frame src="file://C:\hptools\kurse_98.htm" name="Kurse98">
 </frameset>
</frameset>
</HTML>
.
d) vier Rahmen 
(oben links einer, oben rechts zwei untereinander, unten einer)
<HTML>
<HEAD>
</HEAD>
<frameset rows="45%, *">
 <frameset cols="30%, *">
  <frame src="file://c:\hw1win\untdat\internet\ghsbsp01.htm">
  <frameset rows="35%, *">
   <frame src="file://c:\hw1win\untdat\internet\ghsbsp02.htm">
   <frame src="file://c:\hw1win\untdat\internet\ghsbsp03.htm">
  </frameset>
 </frameset>
 <frame src="file://c:\hw1win\untdat\internet\ghsbsp04.htm">
</frameset>
</HTML>
.
e) TARGET für dreiteiligen Zielframe
e1) tbb_home.htm mit dreiteiligem Frame
<HTML>
<HEAD>
<TITLE>tbb_home.htm</TITLE>
</HEAD>
<FRAMESET rows="25%,75%">
 <FRAME src="http://home.t-online.de/home/G.H.Singmann/tbb_logo.htm" 
  name="oben"-->
 <FRAMESET cols="30%,70%">
  <FRAME src="http://home.t-online.de/home/G.H.Singmann/tbb_men1.htm" 
  name="links">
  <FRAME src="http://home.t-online.de/home/G.H.Singmann/tbb_ai.htm" 
  name="rechts">
 </FRAMESET>
</FRAMESET>
</HTML>
e2) tbb_men1.htm mit Menüauswahl mit Targetangabe
<HTML>
<HEAD>
<TITLE>tbb_men1.htm</TITLE>
</HEAD>
<BODY>
<H3>Übersicht</H3>
<P><A HREF="http://home.t-online.de/home/G.H.Singmann/tbb_ai.htm" 
target="rechts"> Allgemeine Informationen </A> </P>
<P><A HREF="http://home.t-online.de/home/G.H.Singmann/tbb_tr.htm"
target="rechts"> Tauschrubriken </A> </P>
<P><A HREF="http://home.t-online.de/home/G.H.Singmann/tbb_ak.htm"
target="rechts">Aktuelles</A></P>
<P><A HREF="mailto:G.H.Singmann@t-online.de">Ihre eMail an uns</A> </P>
</BODY>
</HTML>
.
f) <IFRAME> Freischwebender Rahmen
<body>
<font size=6 color=red>
ich, du, er, sie, es, wir, ihr, sie *** 
ich, du, er, sie, es, wir, ihr, sie *** 
ich, du, er, sie, es, wir, ihr, sie *** 
ich, du, er, sie, es, wir, ihr, sie *** 
ich, du, er, sie, es, wir, ihr, sie *** 
ich, du, er, sie, es, wir, ihr, sie *** 
ich, du, er, sie, es, wir, ihr, sie *** 
ich, du, er, sie, es, wir, ihr, sie *** 
<iframe 
 src="\ghs\ghshtm\ghshallo.htm"  name="guckrahmen" align=center
 marginwidth=10  marginheight=10   hspace=10
vspace=10>freischwebender Rahmen1
</iframe>
ich, du, er, sie, es, wir, ihr, sie *** 
ich, du, er, sie, es, wir, ihr, sie *** 
ich, du, er, sie, es, wir, ihr, sie *** 
ich, du, er, sie, es, wir, ihr, sie *** 
ich, du, er, sie, es, wir, ihr, sie *** 
ich, du, er, sie, es, wir, ihr, sie *** 
ich, du, er, sie, es, wir, ihr, sie *** 
ich, du, er, sie, es, wir, ihr, sie *** 
</body>
01.30) META-Tag
a) meta=zwischen: 
b) 'Zwischendaten': Daten, die Angaben über die Daten dieser HTML-Seite enthalten
c) Zweck: Zugriffe, Hits auf Webseite erhöhen
Z.B.: Suchmaschine sucht in Stichwörtern
d) Syntax: <META NAME="Parameter" CONTENT="Wert">

Beispiel:
  <HTML> 
  <HEAD> <TITLE> Dokument-Titel </TITLE>
   <META NAME="Author"   CONTENT="Gerda Klein">
   <META NAME="keywords" CONTENT="Möbel, Mode, Inneneinrichtung, Wohnen">
   <META NAME="Hinweis"  CONTENT="Im Hafen ist die Hölle los.">
   <META NAME="ROBOT"    CONTENT="index, nofollow">
  </HEAD>
  <BODY>         sichtbarer Hauptteil 
  </BODY></HTML>
01.41) OBJECT 
OBJECT: leitet Festlegung einer AciveX-Komponente ein
02.) HTML-Edtioren
02.01) HTML-Quelle erstellen unter Netscape Navigator NN
a) START->PROGRAMME->NETSCAPE COMMUNICATOR->NETSCAPE NAVIGATOR
b) Vorhandene HTML-Datei laden:
   DATEI->SEITE ÖFFNEN->DATEI WÄHLEN
c) gleiche HTM-Quelle öffnen mit 
   START->PROGRAMME->ZUBEHÖR->EDITOR
   dort
   DATEI ÖFFNEN...
d) HTML-Quelltext mit EDITOR überarbeiten/editieren
   anschließend  mit Alt D S speichern
e) Ins NN-Fenster wechseln mit Alt Tab
f) Ansicht aktualisieren mit Strg F oder ANSICHT->NEU LADEN 
g) zurück zum EDITOR HTML-Quelltext mit Alt Tab
h) weiter unter d)
02.02) HTML-Quelle bearbeiten mit MS Internet Explorer (IE 3.02)
a) START->PROGRAMME->INTERNET EXPLORER
b) Vorhandene HTML-Datei laden:
   DATEI->ÖFFNEN->DURCHSUCHEN...
c) ANSICHT->QUELLTEXT
d) HTML-Quelltext überarbeiten/editieren
   anschließend  mit Alt D S speichern
e) Ins IE-Fenster wechseln mit Alt Tab
f) Ansicht aktualisieren mit F5 oder ANSICHT->AKTUALISIEREN 
g) zurück zum HTML-Quelltext mit Alt Tab
h) weiter unter d)