Standardarbeitsanweisung SAA-015

Dokument-Typ: 

Standardarbeitsanweisung 

Labor für Umweltanalytik und Ökotoxikologie – Prof. Dr. Harald Platen 

am Fachbereich 04 KMUB der Fachhochschule Gießen-Friedberg 

Wiesenstraße 14 – D-35390 Gießen 

Telefon (mit Anrufbeantworter) / Telefax: ++49-641-309 2533 

URL: http://kmubserv.tg.fh-giessen.de/pm/platen/ E-Mail: harald.platen@tg.fh-giessen.de 

Dokument-Nr.: 

HP1005-SAA-015 

Version: 

01 

erstellt: geprüft: freigegeben: 

Stand/gültig ab: 

25.04.2009 

Datum/Name/Unterschrift Datum/Name/Unterschrift Datum/Name/Unterschrift 

Seite 1 von 8 

Bearbeiter/in: 

HP 

Programmierbefehle für HTML-Seiten - Level 01: für Anfänger/innen 

Gliederung/Verzeichnis 

0 Vorbemerkungen und Anwendungshinweise............................................................................................. 2 

0.1 Zweck .................................................................................................................................................. 2 

0.2 Gültigkeitsbereich................................................................................................................................ 2 

0.3 Vorgängerdokument(e) und Änderungen gegenüber dem/den Vorgängerdokument(en).................. 2 

0.4 Zuständigkeiten................................................................................................................................... 2 

0.5 Dokumentation der Überprüfung der Aktualität................................................................................... 2 

0.6 Begriffsbestimmungen ........................................................................................................................ 2 

0.7 Abkürzungen und Erläuterungen allgemeiner Begriffe ....................................................................... 2 

1 Darstellung einfacher Befehle zur Erstellung von Internetseiten ............................................................... 3 

1.1 Grundstruktur der Programmiersprache HTML .................................................................................. 3 

1.2 Das Grundgerüst einer HTML-Datei ................................................................................................... 3 

1.3 Gestaltungsinformationen (=Attribute) am Anfang des Textkörpers .................................................................................................................................. 3 

1.4 Formatieren und Ausrichten von Text................................................................................................. 4 

1.5 Sonderzeichen des deutschen Sprachraums und andere wichtige Zeichen...................................... 4 

1.6 Absätze ............................................................................................................................................... 4 

1.7 Tabellen............................................................................................................................................... 5 

1.8 Aufzählungen und Listen..................................................................................................................... 5 

1.9 Hyperlinks............................................................................................................................................ 5 

2 

1.10 Bilder ................................................................................................................................................... 6 

1.11 Seiteninterne Sprungmarken (Anker) ................................................................................................. 6 

1.12 Verweise in andere Ordner ................................................................................................................. 7 

1.13 Farben ................................................................................................................................................. 7 

1.14 Frames ................................................................................................................................................ 7 

Mitgeltende Unterlagen und Literatur......................................................................................................... 8 

C:\Users\HPlaten\01_Arbeitsbereich_HP_FH\1000_Managementhandbuch_HP\1005_SAA_Standardarbeitsanweisungen\HP1005_SAA_015_Aktuell_HTML_Level_01.doc 

Dokument:-ID: FB 04 - KMUB - Fachgebiet Umweltanalytik und Ökotoxikologie / HP1005-SAA-015 / 25.04.2009 / HP

Dokument-Typ: 







Dokument-Nr.: 


Version: 

01 


25.04.2009 

Seite 2 von 8 


HP 

0 Vorbemerkungen und Anwendungshinweise 

0.1 Zweck 

Das vorliegende Dokument ist für Anfänger/innen gedacht, die sich in die Programmiersprache HTML für die 

Erstellung von Internetseiten einarbeiten wollen. Dabei wird nicht der Anspruch erhoben, dass die hier dargestellten 

Befehle den „neuesten Stand der Technik“ widerspiegeln. Wohl aber ist es möglich, einfache, 

funktionierende Internetseiten zu erstellen und dabei die Struktur der Programmiersprache in ihren Grundzügen 

zu verstehen. 

Zum Selbststudium empfiehlt es sich, den Internet-Kurs (siehe Abschnitt 2, Nr. [2]) durchzuarbeiten und die 

vorliegende SAA in ausgedruckter Form als Studienunterlage dabei mit zu verwenden. 

Weiterführende Informationen sind dann die Internetseiten von SELFHTML.ORG (siehe Abschnitt 2, Nr. [3]) 

verfügbar. 

0.2 Gültigkeitsbereich 

Studium, Lehre und Forschung im Bereich des Labors für Umweltanalytik und Ökotoxikologie der Fachhochschule 

Gießen-Friedberg. 

0.3 Vorgängerdokument(e) und Änderungen gegenüber dem/den Vorgängerdokument(en) 

bis 2009-04-25: Platen, H. (2009). Befehle zur Erstellung von HTML-Seiten. Unterlagen zur Lehrveranstaltung 

AEDV für Studierende im Studiengang UHST im 6. Semester. Version 1.1, Fachhochschule 

Gießen-Friedberg, D-35390 Gießen. 

HP2080_02_AEDV_HTML_Befehle_V011.doc bzw. pdf vom 24.03.2009 

Umwandlung des Dokuments in eine SAA. 

bis 2009-03-24: Platen, H. (2009). Befehle zur Erstellung von HTML-Seiten. Unterlagen zur Lehrveranstaltung 

AEDV für Studierende im Studiengang UHST im 6. Semester. Version 1.0, 

Fachhochschule Gießen-Friedberg, D-35390 Gießen. 

HP2080_02_AEDV_HTML_Befehle_V010.doc bzw. pdf vom 30.03.2005 

0.4 Zuständigkeiten 

Für Erstellung, Aktualitätsprüfung und Archivierung: Leitung des Arbeitsgebiets „Umweltanalytik und Ökotoxikologie“ 

bzw. dessen Beauftragte/r. 

0.5 Dokumentation der Überprüfung der Aktualität 

Die Aktualitätsprüfung diese Dokuments erfolgt im Abstand von 12 Monaten; die Prüfung wird auf einer Anlage 

zu diesem Dokument dokumentiert. 

0.6 Begriffsbestimmungen 

Begriff Erläuterung 

keine Keine 

0.7 Abkürzungen und Erläuterungen allgemeiner Begriffe 

Begriff Erläuterung 

HTML Hypertext markup language 

SAA Standardarbeitsanweisung 

UHST Umwelt-, Hygiene- und Sicherheitstechnik 



Dokument-Typ: 







Dokument-Nr.: 


Version: 

01 


25.04.2009 

1 Darstellung einfacher Befehle zur Erstellung von Internetseiten 

1.1 Grundstruktur der Programmiersprache HTML 

Seite 3 von 8 


HP 

HTML ist eine einfache Programmiersprache; wird eine HTML-Datei in einen Browser eingelesen, wird aus 

dem Programmtext eine Internetseite aufgebaut. 

Wesentlicher Bestandteil der Programmiersprache sind die „Tags“, wie die entsprechenden Programmierbefehle 

genannt werden. 

Tags sind dadurch kenntlich, dass sie in von eckigen Klammern eingerahmt sind: < > 

Man unterscheidet „einleitende Tags“ und „schließende Tags“; letzterer ist dadurch gekennzeichnet, dass 

dem Befehlstext ein Schrägstrich vorausgeht; Beispiele: 

einleitender Tag: 

schließender Tag: 

Bei den meisten Tags wird vom Browser ein Befehl solange ausgeführt, bis er von einem schließenden Tag 

beendet wird. Allerdings gibt es auch einige Tags, deren Ausführung nicht durch einen schließenden Tag 

beendet werden muss. 

1.2 Das Grundgerüst einer HTML-Datei 

Eine HTML-Datei wird in zwei Teile untergliedert: 

(1) Dateikopf (Header); er wird begonnen und beendet von den Tags und ; er wird im 

Browserfenster nicht dargestellt wird, enthält aber Informationen, die die u.a. von Suchmaschinen 

gefunden werden. 

(2) Dateikörper (Body); er enthält den Inhalt, der im Browserfenster als „Internetseite“ dargestellt wird. 

 

 

 

 

 

 

 

 

Die zwischen diesen beiden Tags eingefügten Informationen 

werden nicht im Browserfenster dargestellt 

Die zwischen diesen beiden Tags eingefügten Informationen 

werden im Browserfenster dargestellt 

1.3 Gestaltungsinformationen (=Attribute) am Anfang des Textkörpers 

background=“…“ 

bgcolor=“…“ 

text=“…“ 

link=“…“ 

vlink=“…“ 

alink=“…“ 

Hintergundbild (alternativ zu bgcolor=) 

anstelle “…“ steht der Dateiname eines Bildes, 

z.B. “Wiese.jpg“ 

Farbe des Hintergrunds (alternativ zu background=) 

Farbe des Textes 

Farbe eines Links (vor dem „Anklicken“) 

Farbe eines besuchten Links (nach dem „Anklicken“) 

Farbe der aktiven Links (zeigt sich nur kurz nach dem Anklicken) 

Das Attribut wird in Kombination mit dem Attribut 



Dokument-Typ: 







Dokument-Nr.: 


Version: 

01 


25.04.2009 

Seite 4 von 8 


HP 

bgproperties=“fixed“ „background=“…“ verwendet. Es bewirkt, dass das Hintergrundbild 

fixiert ist und sich beim scrollen nicht bewegt. 

1.4 Formatieren und Ausrichten von Text 

 

 

 

 

bis 

 

 

 

 

 

 

 

 

 

 

Zeilenumbruch (es gibt kein schließendes Tag) 

Horizontale Linie (es gibt kein schließendes Tag) 

Ändert Schriftart, -größe, -farbe 

Attribute: size=“…“ Größe 1 bis 7 

color=“…“ Farbe 

Überschrift (groß) 

bis 

Überschrift (klein) 

face=“…“ Schrifttyp 

Fetter Text zwischen den Tags 

größerer Text zwischen den Tags 

kursiver Text zwischen den Tags 

formatiert den Text so, wie er eingegeben wurde. 

durchgestrichener Text zwischen den Tags 

kleinerer Text zwischen den Tags 

tiefgestellter Text zwischen den Tags 

hochgestellter Text zwischen den Tags 

Unterstrichener Text zwischen den Tags 

1.5 Sonderzeichen des deutschen Sprachraums und andere wichtige Zeichen 

ä 

Ä 

ö 

Ö 

ü 

Ü 

ß 

 

1.6 Absätze 

ä 

Ä 

ö 

Ö 

ü 

Ü 

ß 

festes Leerzeichen 

Anfang und Ende eines Absatzes 

Attribut: align=“…“ (Absatzausrichtung) 

Werte für „align“ sind: 

left linksbündig 

right rechtsbündig 

center zentriert 

justify Blocksatz 



Dokument-Typ: 


1.7 Tabellen 






Dokument-Nr.: 


Version: 

01 


25.04.2009 

Seite 5 von 8 


HP 

Tabellen dienen in HTML nicht nur zum strukturierten anzeigen von Daten; viel häufiger sind „blinde“ Tabellen, 

die zur Formatierung der Ausgabe dienen, ohne dass auf den ersten Blick ersichtlich ist, dass sich 

dahinter eine Tabelle verbirgt. Nachfolgend ist ein Beispiel für eine zweizeilige, dreispaltige Tabelle ohne 

Rand dargestellt: 

 

 

 

 

 

 

 

 

 

 

 

 

 

.. 

 

1.8 Aufzählungen und Listen 

Beginn der Tabelle 

Beginn der ersten Zeile 

Erste Spalte der ersten Zeile 

Zweite Spalte der ersten Zeile 

Dritte Spalte der ersten Zeile 

Ende der ersten Zeile 

Beginn der zweiten Zeile 

Erste Spalte der zweiten Zeile 

Zweite Spalte der zweiten Zeile 

Dritte Spalte der zweiten Zeile 

Ende der zweiten Zeile 

Ende der Tabelle 

Das Attribut border=“#“ bestimmt die Stärke der umrahmenden 

Linie in Pixeln, wobei # eine ganze Zahl ist. 

Unter HTML kann man sich verschiedene Aufzählungslisten erstellen (nummeriert, mit Spiegelstrichen, 

mit fortlaufenden Buchstaben etc.). Man unterscheidet „ordered lists“ zwischen den Tags und 

„unordered lists“ zwischen den Tags und 

 

Listenpunkt 1 

Listenpunkt 2 

 

 

Listenpunkt 1 

Listenpunkt 2 

 

1.9 Hyperlinks 

Der -Tag kann folgende Attribute haben: 

type=“..“ mit 1: Liste mit arabischen Ziffern 

mit a: Liste mit kleinem Alphabet 

mit A: Liste mit großem Alphabet 

mit I: Liste mit großen römischen Ziffern 

mit i: Liste mit kleinen römischen Ziffern 

start=“ “ gibt den Startwert an (z.B. 5) 

Der -Tag kann folgende Attribute haben: 

type=“..“ mit „square“ für Quadrate 

mit „circle“ für Kreise 

mit „disc“ für gefüllte Kreise 

Um Dokumente miteinander zu verbinden nutzt man sg. „Links“. Diese werden in HTML durch das Tag 

##### 

definiert, wobei XXXXX die genaue Bezeichnung der aufzurufenden Datei ist (ggf. mit dem kompletten 

Pfad, wo die Datei zu finden ist) und ##### die Bezeichnung ist, die auf dem Bildschirm zu sehen ist und 

als Link erscheint. Damit der Link funktioniert ist darauf zu achten… 

a) dass der in XXXXX aufzuführende Dateinahme korrekt geschrieben ist (incl. unter Beachtung der 

Dateiendung, z.B. .htm oder .html) 

b) dass der in XXXXX aufzuführende Pfad vollständig ist 



Dokument-Typ: 







Dokument-Nr.: 


Version: 

01 


25.04.2009 

c) dass der Dateiname oder Pfad links und rechts von Anführungsstrichen eingerahmt ist 

START 

Seite1.htm 

 

Die Bahn 

 

Manni Mammut 

 

 

1.10 Bilder 

 

 

 

1.11 Seiteninterne Sprungmarken (Anker) 

Seite 6 von 8 


HP 

Auf dem Monitor erscheint der Link in der Form START, der 

beim Anklicken die Datei Seite1.htm im Browser öffnet. 

Auf dem Monitor erscheint der Link in der Form Seite1.htm, der 

beim Anklicken die Datei Seite1.htm im Browser öffnet. 

Auf dem Monitor erscheint der Link in der Form Die Bahn, der 

beim Anklicken die Internetseite http://www.bahn.de im Browser 

öffnet. 

Auf dem Monitor erscheint der Link Manni Mammut, der beim 

Anklicken ein e-mail-Fenster öffnet mit dem Adressateneintrag 

„MisterX@gmx.de“. 

Auf dem Monitor erscheint das Bild bahn.jpg, unter dem sich der 

Link zu http://www.bahn.de befindet. Beim Anklicken des Bildes 

öffnet sich die entsprechende Internetseite. In gleicher Weise 

können e-mail-Fenster geöffnet werden. 

Der Tag fügt ein Bild in die Seite ein; allerdings muss immer das 

Attribut src=“…“ damit kombiniert werden, da dieses Attribut auf 

die Bilddatei verweist, die geöffnet und dargestellt werden soll. 

Durch diesen Tag wird die Grafik testbild.jpg auf der Webseite 

dargestellt. 

Im Allgemeinen können nur jpg- und gif-Dateien dargestellt werden. 

Optionale Attribute zur Gestaltung und Positionierung von Bildern: 

alt=“…“ Beim Kontakt des Cursors mit dem 

Bild erscheint ein alternativer 

Bildname 

align=“…“ Positioniert ein Bild links, rechts, 

zentriert (siehe Abschnitt 6) 

border=“…“ Definiert die Breite eines 

Bildrahmens (1 bis …) 

siehe Abschnitt 7 

height=“…“ Höhe der Grafik in Pixeln oder % 

erzwingen 

width=“…“ Breite der Grafik in Pixeln oder % 

erzwingen 

Das Bild testbild.jpg befindet sich im Unterordner /pictures/ 

Um innerhalb eines Dokuments hin und her zu springen benutzt man sg. Anker, die an der entsprechenden 

Stelle eingebaut werden. 

 

“Überschrift 1 



Dokument-Typ: 


viel, viel Text 

Nach Oben 






Direkter Sprung an eine Stelle in einer 

anderen Datei: 

Oben von 

datei.htm 

1.12 Verweise in andere Ordner 

../ 

bilder/grafik.htm 

1.13 Farben 

Dokument-Nr.: 


Version: 

01 


25.04.2009 

Ein Ordner höher 

Die Datei grafik.htm befindet sich im Ordner /bilder/ 

Seite 7 von 8 


HP 

Farben für Hintergründe, Zeichen etc. können auf zweierlei Weise definiert werden. 

(1) Unter Verwendung des englisches Begriffs z.B.: 

… bgcolor=“yellow“ … 

Dokument-Typ: 


 






Dokument-Nr.: 


Version: 

01 


25.04.2009 

Dieser Tag steht immer zwischen den FRAMESET-Tags. 

AAA: Name der Datei, die angezeigt werden soll. 

BBB: Name des Framesets, mit dem man z.B. mit 

zugreifen kann 

CCC: yes Scrollbalken werden immer angezeigt 

no Scrollbalken werden nie angezeigt 

auto Scrollbalken werden angezeigt, wenn sie 

benötigt werden. 

führt zum Verlassen des Frames 

Seite 8 von 8 


HP 

2 Mitgeltende Unterlagen und Literatur 

[1] Platen, H. (2005). Ein kurzer interaktiver Kurs zum Verständnis der Programmiersprache HTML. Webbasierte 

Einführung in den Aufbau von einfachen Internetseiten für das Selbststudium. Fachhochschule 

Gießen-Friedberg, D-35390 Gießen, verfügbar unter dem URL (Stand: 2009-04-25): 

ftp://primus.tg.fh-giessen.de/public/Personal/Platen/HP2080_HTML_Intro/default.htm 

[2] Platen, H. (2005). Ein kurzer interaktiver Kurs zum Verständnis der Programmiersprache HTML. Webbasierte 

Einführung in den Aufbau von einfachen Internetseiten für das Selbststudium. Darstellung der 

Internetseiten von [1] mit Quellcode zur Erstellung papierbasierter Arbeitsunterlagen. Fachhochschule 

Gießen-Friedberg, D-35390 Gießen, verfügbar unter dem URL (Stand: 2009-04-25): 

http://kmubserv.tg.fh-giessen.de/pm/platen/HP2080_HTML_Einstieg.pdf 

[3] SELFHTML e. V. (2007). SELFHTML Dokumentation - Version 8.1.2. Verfügbar unter dem URL 

(Stand: 2009-04-25) http://de.selfhtml.org/

Standardarbeitsanweisung SAA-015

Erfolgreiche ePaper selbst erstellen

Template löschen?

Als Template speichern?