HTML-Kurzanleitung

Autor: M. Blaschke (16.1.98)

  1. Grundlegendes zu HTML-Seiten und deren Einsatzgebieten im UWTH
    1. Steueranweisungen
    2. Grundgerüst einer HTML-Seite
  2. Überschriften
  3. Absätze und Unterteilungen
  4. Bilder
  5. Listen
    1. Ungeordnete Liste
    2. Geordnete Liste
    3. Ungeordnete Liste mit Überschriften
  6. Verweise (Hyperlinks und Anker)
    1. Verweise innerhalb einer Seite
    2. Weltweite Verweise
    3. Email-Verweise
  7. Zeichenformate und Effekte
  8. Tabellen
  9. Liste der speziellen Zeichen
  10. Tips und Anmerkungen

1.0 Grundlegendes zu HTML-Seiten

Wie Ihr alle wißt, befindet sich unser Web-Server momentan im Aufbau. Dadurch wird die Möglichkeit geschaffen, daß wir das Institut und seine Aktivitäten im Internet präsentieren und damit auch für unsere Arbeit werben. Um eine möglichst umfassende Präsentation zu erreichen, ist es wichtig, daß jeder Institutsbereich, jede Fachgruppe bzw. jeder Mitarbeiter einen Überblick über seinen Aufgabenbereich gibt. Auf Grund der Komplexität der Aktivitäten ist es sinnvoll, daß sich alle Mitarbeiter am Aufbau unseres Servers beteiligen, d.h. die Erstellung von Internetseiten beherrschen.

Die Einsatzgebiete fü:r WEB-Seiten im UWTH sind z.B. folgende:

Mit der folgenden Beschreibung soll ein Einstieg erleichtert werden, sie erhebt nicht im geringsten Anspruch auf Vollständigkeit.

Die Abkürzung HTML steht für Hypertext Markup Language. Wie aus der Bezeichnung Text ersichtlich ist, handelt es sich um eine Programmiersprache zur Darstellung von Texten Eine Seite kann dabei mit jedem Texteditor erstellt werden, soweit dieser in der Lage ist, den Text im ASCII-Format zu speichern. Das HTML-Format gestattet es einen formatierten Text darzustellen, der zusätzlich Bilder enthalten kann. Angezeigt werden die Seiten mit einem sogenannten Browser (z.B. Netscape), einem Programm zur Interpretation des HTML-Formates.

Dabei ist es möglich, die komplette Seite zuerst auf seinem Rechner zu erstellen und zu optimieren und sie erst dann zu veröffentlichen. Dies wird durch die Eigenschaft des Browsers auch eine Datei laden zu können ermöglicht.

Die nachfolgende Seiten soll einen kleinen Überblick über die wichtigsten HTML-Anweisungen geben. Damit sollte es jedem Leser möglich sein, auf einfache Weise eigene Web-Seiten zu erzeugen. Für diejenigen, die sich intensiver mit dem HTML-Format beschäftigen wollen, sei auf folgende Seiten verwiesen:

1.1 Steueranweisungen

Eine Steueranweisung, ein sog. TAG, ist folgendermaßen aufgebaut:

<Name Attribute>

Dabei wird nicht zwischen Groß- und Kleinschreibung innerhalb des TAGs unterschieden.Die angegebene Steueranweisung gilt bis zu ihrem Ende-TAG. Dieses wird durch einen vorangestellten Querstrich angegeben, also

</Name>

Attribute können innerhalb der TAG´s teilweise auch weggelassen werden. Zwischen dem Start-TAG und dem Ende-TAG steht die eigentliche Information. Die TAG´s und ihre Attribute werden vom Browser nicht angezeigt. Unbekannte TAG´s werden unterdückt. Zusätzlich ist es möglich verschiedene TAG´s ineinander zu verschachteln:

<Name1 Attribute> .....<Name2 Attribute> .....</Name1>....</Name2>

oder auch


<Name1 Attribute> .....<Name2 Attribute> .....</Name2>....</Name1>

Und das ist auch schon das ganze Geheimnis der HTML-Steueranweisungen. Die Reihenfolge der Attribute kann dabei beliebig sein.

1.2 Grundgerüst einer Seite

Eine HTML-Seite besteht grundsätzlich aus folgendem Grundgerüst, dabei kennzeichnet die Zeichenfolge <!-- den Beginn die Zeichenfolge --> das Ende eines Kommentars.

<HTML>                <!-- Beginn der HTML-Seite -->





  <HEAD>              <!-- Kopf der Seite -->


    <TITLE> Der Titel der Seite,der in der Kopfzeile des Browsers abgezeigt wird -->


    </TITLE>          <!-- Ende des Titels -->


  </HEAD>             <!-- Ende des Kopfbereiches -->





  <BODY Attribute>   <!-- Beginn des Informationsbereichs -->





     Hier steht die eigentliche Information





  </BODY>             <!-- Ende des Informationsbereichs -->





</HTML>               <!-- Ende der HTML-Seite -->

Die Attribute, die in dem TAG BODY optional angegeben werden können, sind folgende:

Grundgerüst dieser Seite mit den Attributen von BODY sieht wie folgt aus:

<HTML>                ;Beginn dieser HTML-Seite





  <HEAD>              ;Kopf der Seite


    <TITLE>  HTML-Kurzanleitung


    </TITLE>          ;Ende des Titels


  </HEAD>             ;Ende des Kopfbereiches





  <BODY BACKGROUND=/~blaschke/bilder/html1.gif

        BGCOLOR=#000000             ;Weiß

        TEXT=#0000FF                ;Blau

        LINK=#FF0000                ;Rot

        VLINK=#FF0080               ;Violett

        ALINK=#000000 >             ;Weiß




     Hier stehen die Info´s zu HTML-Seiten





  </Body>             ;Ende des Informationsbereichs





</HTML>               ;Ende dieser HTML-Seite

Alle weiteren TAG´s, die im folgenden angegeben werden, müssen innerhalb des Bodys liegen, also zwischen <BODY> und </BODY> !!!

2.0 Überschriften

Um Überschriften im Text hervorzugeben und sie zu positionieren, gibt es folgende Steueranweisung:

Syntax: <Hx ALIGN=y> mit den Schriftgrößen x=1..6 und der Ausrichtung y=LEFT, RIGHT, CENTER oder JUSTIFY (optionale Angabe)

Der Quelltext <H1> Sehr großer Text </H1>ergibt:

Sehr großer Text

Der Quelltext <H2 ALIGN=RIGHT> Großer Text, rechts </H2> ergibt:

Großer Text, rechts

Der Quelltext <H3> Mittelgroßer Text </H3> ergibt:

Mittelgroßer Text

Der Quelltext <H4 ALIGN=CENTER> Mittlerer Text, mittig </H4> ergibt:

Mittlerer Text, mittig

Der Quelltext <H5>Kleiner Text </H5> ergibt:

kleiner Text

Der Quelltext <H6> Sehr kleiner Text </H6> ergibt:

Wenn sie dies lesen können brauchen Sie keine Brille !!!

3.0 Absätze und Unterteilungen

Für Absätze und Unterteilungen gibt es einige TAGs:

Syntax: <P ALIGN=y> mit der optionalen Ausrichung y=LEFT, RIGHT, CENTER oder JUSTIFY

Beispiele:

Der Quelltext <P ALIGN=LEFT > Ich stehe links </P> ergibt:

Ich stehe links

Der Quelltext <P ALIGN=RIGHT > Ich stehe rechts</P> ergibt:

Ich stehe rechts

Der Quelltext <P ALIGN=CENTER >Ich stehe in der Mitte ergibt:</P>

Ich stehe in der Mitte

Der Quelltext <P ALIGN=JUSTIFY >Ich stehe als Blocksatz zurVerfügung. Ich stehe als Blocksatz zurVerfügung. Ich stehe als Blocksatz zurVerfügung. Ich stehe als Blocksatz zurVerfügung. Ich stehe als Blocksatz zur Verfügung. Ich stehe als Blocksatz zur Verfügung. Ich stehe als Blocksatz zur Verfügung. Ich stehe als Blocksatz zur Verfügung. Ich stehe als Blocksatz zur Verfügung. Ich stehe als Blocksatz zur Verfügung. </P> ergibt:

Ich stehe als Blocksatz zurVerfügung. Ich stehe als Blocksatz zurVerfügung. Ich stehe als Blocksatz zurVerfügung. Ich stehe als Blocksatz zur Verfügung. Ich stehe als Blocksatz zurVerfügung. Ich stehe als Blocksatz zur Verfügung. Ich stehe als Blocksatz zur Verfügung. Ich stehe als Blocksatz zur Verfügung. Ich stehe als Blocksatz zur Verfügung. Ich stehe als Blocksatz zur Verfügung.

Weitere Möglichkeiten:

4.0 Bilder

Das wesentliche Element, um HTML-Seiten optisch ansprechend zu gestalten, sind Bilder. Eingebunden werden sie über das folgende TAG:

< IMG ALIGN=x SRC=y>

Dabei gibt x die Zentrierung des Bildes an also LEFT, RIGHT, TOP, TEXTTOP, MIDDLE, ABSMIDDLE, BASELINE, BOTTOM, ABSBOTTOM und y die Pfadangabe zu dem Bild.

Beispiele:

        <IMG SRC=/~blaschke/bilder/smile.gif ALIGN=LEFT>

Das Bild liegt dabei auf Laufwerk H in meinem Home-Verzeichnis (~blaschke=home/pc/blaschke/public_html) unter dem angegebenem Pfad und wird linksbündig auf der Seite dargestellt. Der Text in diesem Bereich fließt dabei um das Bild herum.

Ich bin der Smilie, dessen Bildobergrenze mit der Obergrenze der Textzeile (ALIGN=TEXTTOP) übereinstimmt.

Da mehrere Bilder auf einer Seite gelegentlich zu etwas seltsamen Formatierungen führen, kann man sie auch in eine Tabelle einbinden, um die Übersichtlichkeit zu erhöhen.

5.0 Listen

5.1 Ungeordnete Liste

Der nachfolgende Text

<UL><LI>Ich bin der erste Eintrag der ungeordneten Liste</LI>


<LI>Ich bin der zweite Eintrag der ungeordneten Liste


<UL><LI>Ich bin der erste Eintrag der ungeordneten Liste im zweiten Eintrag</LI>


<LI>Ich bin der zweite Eintrag der ungeordneten Liste im zweiten Eintrag</LI></UL></LI>


<LI>Ich bin der dritte Eintrag der ungeordneten Liste</LI></UL>

erzeugt folgende Liste:

Dabei ist:

5.2 Geordnete Liste

Der nachfolgende Text

<OL><LI> Ich bin der erste Eintrag der geordneten Liste </LI>


    <LI> Ich bin der zweite Eintrag der geordneten Liste


    <OL> <LI>Ich bin der erste Eintrag der geordneten Liste


              im zweiten Eintrag</LI>


         <LI>Ich bin der zweite Eintrag der geordneten Liste


              im zweiten Eintrag</LI>


   </OL></LI>


    <LI> Ich bin der dritte Eintrag der geordneten Liste </LI>


</OL>

erzeugt folgende Liste:

  1. Ich bin der erste Eintrag der geordneten Liste
  2. Ich bin der zweite Eintrag der geordneten Liste
    1. Ich bin der erste Eintrag der geordneten Liste im zweiten Eintrag
    2. Ich bin der zweite Eintrag der geordneten Liste im zweiten Eintrag
  3. Ich bin der dritte Eintrag der geordneten Liste

Dabei ist:

5.3 Ungeordnete Liste mir Überschriften

Der nachfolgende Text

<DL>


<DT>Überschrift 1</DT>


<DD>Ich bin der erste Eintrag der Liste mit Überschriften unter Überschrift 1</DD>


<DD>Ich bin der zweite Eintrag der Liste mit Überschriften unter Überschrift 1</DD>


<DT>Überschrift 2</DT>


<DD> Ich bin der erste Eintrag der Liste mit Überschriften unter Überschrift 2</DD>


<DD>Ich bin der zweite Eintrag der Liste mit Überschriften unter Überschrift 2</DD>


</DT>

erzeugt folgende Auflistung

Überschrift 1
Ich bin der erste Eintrag der Liste mit Überschriften unter Überschrift 1
Ich bin der zweite Eintrag der Liste mit Überschriften unter Überschrift 1
Überschrift 2
Ich bin der erste Eintrag der Liste mit Überschriften unter Überschrift 2
Ich bin der zweite Eintrag der Liste mit Überschriften unter Überschrift 2

Dabei ist:

6.0 Verweise (Hyperlinks und Anker)

Es gibt zwei Arten von Verweisen

  1. Ein Verweis innerhalb der geladenen Seiten. Diese sollten immer dann verwendet werden, wenn die Seite länger wird. Es bietet sich dann an z. B. ein Inhaltsverzeichnis an den Beginn der Seite zu stellen, von dem aus auf die entsprechenden Unterpunkte verwiesen wird. Wird auf eine Stelle im Text verwiesen muß natürlich ein entsprechende Marke innerhalb der Seite existieren.
  2. Ein Verweis auf eine beliebige Seite oder ein Programm im Internet

6.1 Verweise innerhalb einer Seite

Beispiel zu Verweisen innerhalb einer Seite:

Inhaltverzeichnis

Unterpunkt 1: bla, bla, bla .....und zurück zum Inhaltsverzeichnis

Unterpunkt 2: bla, bla, bla .....und zurück zum Inhaltsverzeichnis

Der Quelltext zu diesem Bespiel:



<H4><A Name=start></A>Inhaltsverzeichnis</H4>


<A NAME=verweis1 ></A>


<A HREF=/html1.#verweis1>Gehe zu Unterpunkt 1 


<A HREF=/html1.#verweis2>Gehe zu Unterpunkt 2 





<P><A NAME=verweis1 ></A>


<A HREF=/html1.#verweis1>Unterpunkt1: 


bla bla bla ..... 


<A HREF=/html1.#start> und zurück zum Inhaltverzeichnis</A></P>


<P><A NAME=verweis2 ></A>


<A HREF=/html1.#verweis2>Unterpunkt1: 


bla bla bla ..... 


<A HREF=/html1.#start> und zurück zum Inhaltverzeichnis</A></P>

6.2 Weltweite Verweise

Exemplarisch seien hier zwei Links aufgeführt, einmal die UWTH-Startseite und dann noch das Rechenzentrum Hannover. Die Syntax ist ebenfalls extrem einfach:

<A HREF=eine Adresse im Internet> Text der den Link verbal/grafisch (Bild) beschreibt</A>

also beispielweise für die UWTH-Startseite:

<A HREF=http://www.uwth.uni-hannover.de> UWTH-Startseite</A>

6.3 Email-Verweise

Der Browser ist normalerweise auch in der Lage Email´s zu verschicken. Möchte man innerhalb einer Seite einen Verweis auf eine Mail-Adresse erzeugen, so geht das wie folgt:

<A HREF=MAILTO:eine Mail-Adresse > Text/Bild die die Mail-Adresse verbal/grafisch (Bild) beschreibt</A>

also zum Beispiel an mich:

        <A HREF=mailto:blaschke@uwth.uni-hannover.de>Email an M. Blaschke </A>

ergibt:

Email an M. Blaschke

Wird der obige Text angeklickt, so erscheint ein Fenster in dem eine Mail geschrieben und abgeschickt werden kann.

7.0 Zeichenformate und Effekte

Es folgen einige TAG´s für verschiedene Schrifttypen und Effekte:

z.B.:

blaschke@uwth.uni-hannover.de

Anmerkung: Es gibt keine Attribute für diese TAG´s !

<FONT SIZE=5 COLOR=#ff0000> Die Schrift hat die Größe 5 und ist rot!! </FONT>

Wenn die Schrift blau ist, kann die Version des Browsers Texte nicht in verschiedenen Farben darstellen.

8.0 Tabellen

Eines der schönsten Elemente für die Gestaltung einer Seite ist die Tabelle

Frisches ObstJunges Gemüse Wilde Tiere
KirschenKarotten Hund
ÄpfelErbsen Katze
BirnenRosenkohl Maus

Der Quelltext sieht folgendermaßen aus:



<TABLE BORDER="2" ALIGN=CENTER> 





<TR>   <TH ALIGN=CENTER COLSTART=1 COLSPAN=1>  Frisches Obst   </TH>


       <TH ALIGN=CENTER COLSTART=2 COLSPAN=1>  Junges Gemüse </TH>


       <TH ALIGN=CENTER COLSTART=3 COLSPAN=1>  Wilde Tiere   </TH> </TR>


       


<TR>   <TD ALIGN=LEFT   COLSTART=1> Kirschen  </TD>


       <TD ALIGN=CENTER COLSTART=2> Karotten  </TD>


       <TD ALIGN=RIGHT  COLSTART=3>  Hund     </TD>          </TR>   





<TR>   <TD ALIGN=LEFT   COLSTART=1>  Äpfel    </TD>


       <TD ALIGN=CENTER COLSTART=2>  Erbsen   </TD>


       <TD ALIGN=RIGHT  COLSTART=3>  Katze    </TD>          </TR>   





<TR>   <TD ALIGN=LEFT   COLSTART=1>  Birnen   </TD>


       <TD ALIGN=CENTER COLSTART=2>  Rosenkohl</TD>


       <TD ALIGN=RIGHT  COLSTART=3>  Maus     </TD>         </TR>   


      


</TABLE>

Dabei bedeuten:

9.0 Liste der speziellen Zeichen

Leider ist es nicht möglich, alle Zeichen direkt über die Tastatur einzugeben. Einige Zeichen müssen über Kürzel eingefügt werden. Also z.B. : Beim Editieren nicht für alle Fälle sondern f&uuml;r alle F&auml;lle schreiben !!!!

Die nachfolgende Liste gibt alle verwendbaren Zeichen und deren Kürzel an.

¡ 
&#161;
¿
&#191;
 ¢
&#162;
£
&#163;
¤
&#164;
¥
&#165;
&#182;
§
&#167;
©
&#169;
®
&#174;
ª
&#170;
º
&#186;
«
&#171;
»
&#187;
µ
&#181;
°
&#176;
·
&#187;
<
&lt;
×
&#215;
÷
&#247;
±
&#177;
¹
&#185;
²
&#178;
³
&#179;
¼
&#188;
½
&#189;
¾
&#190;
¦
&#166;
À
&Agrave;
Á
&Aacute;
Â
&Acirc;
Ã
&Atilde
Ä
&Auml;
Å
&Aring;
Æ
&AElig
Ç
&Ccedil
È
&Egrave;
É
&Eacute;
Ê
&Ecirc;
Ë
&Euml;
Ì
&Igrave;
Í
&Iacute;
Î
&Icirc;
Ï
&Iuml;
Ð
&ETH;
Ñ
&Ntilde;
Ò
&Ograve;
Ó
&Oacute;
Ô
&Ocirc;
Õ
&Otilde;
Ö
&Ouml;
Ø
&Olash;
Ù
&Ugrave;
Ú
&Uacute;
Û
&Ucirc;
Ü
&Uuml;
Ý
&Yacute;
Þ
&THORN;
ß
&szlig;
à
&agrave;
á
&aacute;
â
Uacirc;
ã
&Atilde
ä
&auml;
å
&aring;
æ
&aelig;
ç
&ccedil;
è
&egrave;
é
&eacute;
ê
&ecirc;
ë
&euml;
ì
&igrave;
í
&iacute;
î
&icirc;
ï
&iuml;
ð
&eth;
ñ
&ntilde;
ò
Uograve;
ó
&iacute;
ô
&ocirc;
õ
&otilde;
ö
&ouml;
ø
&oslash;
ù
&ugrave;
ú
&uacute;
û
&ucirc;
ü
&uuml;
ý
&yacute;
þ
&thorn;
ÿ
&yuml;

10.0 Tips und Anmerkungen

Letzte Wartung dieser Seite am 29.01.1998 durch M. Blaschke , Unterwassertechnikum Hannover, Lise_Meitner-Str.1, 30823 Garbsen, Raum 109, Tel.: 0511/762-9835, e-mail: blaschke@uwth.uni-hannover.de)