www.michael-
buhlmann.de

Internetprogrammierung

Eine kurze Einführung in HTML, CSS und JavaScript

Die Website www.michael-buhlmann.de ist mit HTML, CSS und JavaScript verfasst, d.h.: die Internetbrowser nutzen die in diesen (Programmier-, Meta-) Sprachen niedergelegten Befehle und Objekte. Die folgende kurze Einführung möchte daher einen Überblick geben über den Stoff, aus dem die Website gemacht ist. Handwerkliche Voraussetzungen für das Erstellen einer Website sind ein Texteditor (Erstellen) sowie das Vorhandensein von Internetbrowsern wie dem InternetExplorer (Testen).

Die Seiten der Homepage werden dann - Providerunterstützung vorausgesetzt - ins Internet hochgeladen (Upload) durch FTP-Clients und -Programme (FTP als File Transfer Protocol; Einrichtung: Profilname, FTP-Hostname, FTP-Typ, UserID als Benutzerkennung, Passwort) oder kommandozeilenbasiert unter Windows > Start > Ausführen auf der (ehemaligen) DOS-Ebene (Eingabe: ftp <FTP-Server>, Benutzername, Passwort; Befehle: dir, cd, put bzw. mput, get bzw. mget usw.).

I. Ein Steilkurs durch HTML

HTML (HyperTextMarkupLanguage) ist eine Auszeichnungssprache, die die logischen Bestandteile eines Internet-Dokuments (wie Titel, Kopf, Rumpf, Überschrift, Text, Liste usw.) beschreibt. Eingebunden werden diese Bestandteile mit Tags von der Form <...> (einleitend) bzw. </...> (abschließend). Bezogen auf die HTML-Seite, das Internet-Dokument, als Ganzes, haben wir:

<html>...</html> (Verweis auf den die ganze Seite umfassenden HTML-Code)

<head>...</head> (Kopf)

<title>...</title> (Titel)

<meta name="..."> (Meta-Angaben zum Dokument)

<body>...</body> (Rumpf mit dem Dokumententext)

Der Kopf der Seite kann dann so aussehen:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" SYSTEM "http://www.w3.org/TR/xhtml1/DTD/dhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; CHARSET=iso-8859-1">
<title>Titel</title>
<link rel="stylesheet" type="text/css" href="CSS-Datei" />
</head>

Bezogen auf Teile des normalen (ASCII-) Textes, haben wir:

<h1>...</h1>, ... <h6>...</h6> (Überschriften)

<i>...</i> (kursiv)

<b>...</b> (fett)

<u>...</u> (unterstrichen)

<em>...</em> (betont)

<br /> (Zeilenwechsel)

<p>...</p> (Textabsatz)

Wichtig sind die Listen, die mit HTML definiert werden können:

<ul type="square|circle|disc"><li>...</li><li>...</li></ul> (Aufzählungsliste)

<ol type="a|A|I" start=...><li>...</li><li>...</li></ol> (nummerierte Liste)

Ebenfalls von Wichtigkeit sind die Tabellen:

<table>
<thead>
<tr><th>...</th><th>...</th></tr>
</thead>
<tbody>
<tr><td>...</td><td>...</td></tr>
</tbody>
</table>

mit ihren Zeilen <tr>...</tr> und den Zellen (<th>...</th>) des Tabellenkopfs (<thead>...</thead>) und Datenzellen (<td>...</td>) des Tabellenkörpers (<tbody>...</tbody>).

Schließlich ist hinzuweisen auf die Links, auf die Verknüpfungen innerhalb und außerhalb eines HTML-Dokuments:

<a href="URL-Adresse">...</a>

wobei href auf eine Textmarke oder auf eine URL, eine Webadresse, verweist, auch auf ein PDF-Dokument.

Das Einfügen von Bildern geschieht mit dem Befehl:

<img="URL-Adresse" />

Das <select>-Element stellt in HTML ein Pulldown-Menü zur Auswahl dar mit:

<select name="Name" ...>
<option value="Wert1">Bezeichnung1
<option value="Wert2">Bezeichnung2
...
</select>

sowie mit unter JavaScript zu verarbeitenden Werten Wert1, ...

Das <form>-Element definiert durch

<form name="Name"> ... </form>

ein Formular, das mit Hilfe der Elemente

<label for="Name1">...</label>
<input type="text/radio" id="Name1" name="Name1" />

unter JavaScript zu verarbeitende Eingaben auf dem HTML-Dokument ermöglicht.

Schließlich ist zu verweisen auf das <div>-Element, das auf einer HTML-Seite Bereiche schafft:

<div>...</div>

Der Auskommentierung von HTML-Passagen dient:

<!-- ... //-->

Die Farbigkeit von HTML-Seiten, das Definieren von Schrifttyp und -größe und vieles andere mehr überlassen wir dann den Stylesheets im Rahmen von CSS und CSS-Dateien.

II. Websites

Eine Website oder Homepage ist meistens eine Zusammenstellung von einzelnen Seiten (HTML-Dokumenten), die miteinander über Links verbunden sind.

Die Anfangsseite einer solchen Homepage hat als Dateinamen "index.htm" oder "index.html", alle Seiten sind unter Windows vom Typ *.htm oder *.html und enthalten in den Navigationsbereichen bzw. -leisten, aber auch in den Inhaltsbereichen die Links zu anderen Seiten der Homepage oder zu anderen Websites. Inhaltlich zusammenhängende Seiten sollten innerhalb der Homepage einen ähnlichen Speicherort erhalten, die Homepage insgesamt stellt sich unter dem Betriebssystem Windows und im WindowsExplorer als eine Ansammlung von htm-, css- und js-Dateien (*.htm, *.css, *.js) in Verzeichnissen und Unterverzeichnissen dar.

Seiten innerhalb einer Homepage oder eines Teils einer Homepage sollten gleiches (ähnliches) Aussehen bei gleichem (ähnlichem) Aufbau haben. HTML bestimmt den Aufbau von Seiten vorzugsweise über die <div>-Anweisungen, die zueinander parallel oder ineinander geschachtelt sein können. Z.B. beschreibt die HTML-Struktur (*)

<div id="wrap">
<div id="header"><div id="header1">...</div><div id="header2">...</div></div>
<div id="navigation">...</div>
<div id="content">...</div>
</div>

(bei entsprechenden Stylesheets) eine Seite mit vier Bereichen, dem linken und rechten Kopfteil, der Navigationsleiste und dem Inhalt.

III. Einführung in CSS

CSS ist die Abkürzung für "Cascading Style Sheets" und das Mittel, um Form und Aussehen einer HTML-Seite zu bestimmen. Die Verknüpfung der Seite mit einer CSS-Datei erfolgt dabei über

<link rel="stylesheet" type="text/css" href="CSS-Datei" />

CSS-Dateien sind unter Windows vom Typ *.css. Die CSS-Datei listet dabei die Eigenschaften von HTML-Elementen und deren Ausprägungen auf, und zwar gemäß den Formen:

HTML-Element.Klasse {Eigenschaften}

#Identität {Eigenschaften}

* {Eigenschaften}

HTML-Element1 > HTML-Element2 {Eigenschaften}

(mit Klassen-, Id-Selektor, Universalselektor und Kind-Selektor). HTML-seitig erfolgt die Zuweisung von Stylesheets vermittels:

<HTML-Element class="Klasse">

<HTML-Element id="Identität">

HTML-Elemente sind dann: a, b, body, h1, ..., h6, i, li, p, table, td, th, ul usw., CSS-Eigenschaften vom Typ

CSS-Eigenschaft: Ausprägung(en);

sind:

color: #6-stellige Farbkombination; (Schriftfarbe)

font: Zahl% | Zahlpt; (Schriftgröße)

font-family: verdana, tahoma, sans-serif usw.; (Schrift)

font-variant: normal | small-caps; (Kapitälchen)

font-weight: normal | bold | bolder | 100 | ... | 900; (Fettdruck)

letter-spacing: normal | Längenangabe; (Buchstabenabstand)

word-spacing: normal | Längenangabe; (Wortabstand)

für die Schrift,

text-align: left | right | center | justify; (Textorientierung)

text-decoration: none | underline | blink; (Textunterstreichung u.a.)

text-indent: Längenangabe; (Texteinzug)

für den Text z.B. innerhalb eines Absatzes,

list-style: Typ Position Bild; (Listenformatierung)

list-style-image: URL | none;

list-style-position: inside | outside;

list-style-type: disc | circle | square usw.;

für Listen,

background: scroll | fixed Hintergrundfarbe Hintergrundbild Bildposition Bildwiederholung; (Hintergrundformatierung)

background-attachment: scroll | fixed; 

background-color: #6-stellige Farbkombination;

background-image: URL | none;

background-position: left | center | right top | center | bottom;

background-repeat: repeat | repeat-x | repeat-y | no-repeat;

border: Rahmendicke Rahmenart Rahmenfarbe; (Rahmenformatierung)

border-bottom/left/right/top-color: Rahmenfarbe;

border-bottom/left/right/top-style: Rahmenart;

border-bottom/left/right/top-width: Rahmendicke;

float: left | right | none; (Elementpositionierung)

height: Längenangabe | auto; (Höhe)

margin: Längenangaben; (Außenabstand)

margin-bottom/left/right/top: Längenangabe;

padding: Längenangaben; (Innenabstand)

padding-bottom/left/right/top: Längenangabe;

position: static | relative | absolute | fixed; (Positionierungsschema)

width: Längenangabe | auto; (Breite)

für den body, einen Bereich oder einen Absatz.

Ergänzt werden können HTML-Elemente durch (dynamische) Pseudoklassen, wie etwa bei Links:

a:active (Link wurde aktiviert)

a:focus (Link wird über Taste aktiviert)

a:hover (Maus wird über Link gefahren)

a:link (Link wurde noch nicht aktiviert, besucht, ...)

a:visited (Link wurde besucht)

Bezogen auf den oben beschriebenen Aufbau einer Seite (*) könnten die Stylesheets-Angaben dann etwa so aussehen:

body {background-color: #FFFFCC; font-size: 100.01%; font-family:verdana,sans-serif,tahoma; text-align: center;}
#wrap {width: 80%; margin: 0 auto; padding: 0; text-align: left; background: #FFFFCC;}
#header {height: 135px; margin: 0; padding: 0; text-align: left; background-color: #FBF7A2; border-top: #C0C0C0 solid 1px; border-right: #C0C0C0 solid 1px; border-bottom: #EAEAEA solid 30px;}
#header1 {width: 180px; height: 135px; float: left; padding: 0; background: #FFFFCC url("images/logo_start_2.jpg") no-repeat left 100%; border: 0;}
#header2 {height: 135px; margin-left: 180px; padding-left: 2px; background: #FFFFCC url("images/100top00.jpg") left 100% repeat-y;}
#navigation {float: left; width: 180px; height: 640px; background-color: #EAEAEA; border-bottom: #C0C0C0 solid 1px;}
#navigation ul {list-style-type: none; margin: 0; margin-top: 6px; padding: 0; font-size: 85%;}
#navigation ul li {height: 48px; margin: 0 0 1px 0; text-align: left; font-weight: bold; color: #003399; font-size: 85%;}
#navigation ul li a {height: 48px; text-decoration: none; display: block; background: #E0E0E0 url("images/100but00.jpg"); padding-left: 12px;}
#navigation ul li a:hover, #navigation ul li a:active, #navigation1 ul li a:focus {height: 48px; width: 100%; border-left: 0px; display: block; background: #FFFFFF url("images/100but00.jpg") 0% -48px no-repeat; color: #336699; text-decoration: none;}
html>body #navigation ul li a, #navigation ul li a:hover {width: auto;}
#content {margin-left: 180px; margin-top: 0; margin-bottom: 0; padding: 4px; border-left: #C0C0C0 solid 0px; text-align: left;}

Bei der Erstellung von Stylesheets ist noch zu beachten, dass nicht jeder Internetbrowser gleich auf manche der Stylesheets reagiert. So sind u.U. in den CSS-Anweisungen Hacks (Bugfixes) einzufügen, um Bugs ("Fehler") bei bestimmten Browsern zu unterbinden.

IV. Programmieren mit JavaScript

JavaScript ist eine Programmiersprache, die in gewisser Weise eine Erweiterung von HTML darstellt. Eingebunden werden JavaScript-Routinen als Funktionen in den Head einer HTML-Seite, aufgerufen werden die JavaScript-Routinen vom Body der Seite durch Verweis auf die jeweilige Funktion. Wir haben also das Schema:

<head>
...
<script type="text/javaScript">
function Name1()
{ ...
}
function Name2()
{...
}
...
</script>
</head>
<body>
...
<a href="javascript:Name1()">(Text)</a>
...
...<input type="button" onClick="javascript:Name2()">
</body>

Die JavaScript-Funktionen werden dann mit Programmiercode gefüllt, wobei jeder Befehl mit einem Semikolon abzuschließen ist. Variablen werden mit var deklariert, auch die Zuweisung von Werten ist möglich. Vom Body der HTML-Seite her können Inhalte eines Formulars eingelesen werden. Enthält das Formular F1 ein Eingabe-Textfeld T1, mit dem eine Jahreszahl eingegeben werden soll, so sind die Zuweisungen

var jahr = 0;
jahr = Formname.Eingabename.value; (Formname als <form>-Element in HTML)

gültig. Mit Variablen kann dann gerechnet werden mit +, -, *, / als Grundrechenarten, % zur Modulorechnung. + dient weiter zum Aneinanderketten von Strings. Der Fallunterscheidung dienen:

if (Bedingung)
{
...
}
else
{
...
}

, wobei Bedingung u.a. auf die Gleichheit (==) oder Ungleichheit (!=, <, <=, >, >=) von Werten abhebt, sowie:

switch(Variable)
            {
            case Wert1:
            ...
            case Wert2:
            ...
            default:
            ...
            }

, was dem Variablenwert entsprechende Vorgehensweisen ermöglicht. Die Fälle sind mit break; abzuschließen. Unterfunktionen

function Name(Variable1, Variable2, ...)
{

return Wert;
}

, die Werte empfangen und einen Wert zurückgeben, können gebildet werden.

Auch das HTML-Prozedere kann in JavaScript nachgeahmt werden. Dazu schauen wir uns die Objekte in JavaScript an. In der Hierarchie ganz oben steht das window-Objekt, das Fenster der Website. Fenster lassen sich öffnen mit

window.open(URL, Name, ...);

, schließen mit

window.close();

, fokussieren mit

window.focus();

. Auch die Zuweisung eines Fensters an eine Variable (z.B.: Info = window.open(...);) ist möglich. Neben diesen mit dem window-Objekt verbundenen Methoden gibt es noch die Eigenschaften, die ein Fenster hat: inner/outerWidth/Height, scrollbars, pageX/YOffset usw.

Das Objekt document, ein Unterobjekt von window, ist für den Inhalt der Website zuständig. So kann mit

window.document.write(Text);

HTML-Text, also u.a. der Titel des Windows, normaler Text, Listen, Tabellen, Links usw., in das aktuelle Fenster geschrieben werden.

Das Objekt history, ein Unterobjekt von window, kennt die Methoden back(), forward(), go() und home(), die schon während des Internetbetriebs angeklickte Fenster ansprechen. Das Objekt location, ebenfalls ein Unterobjekt von window, besitzt die Eigenschaft href, mit der ein neues URL aufgerufen werden kann:

window.location.href = URL;

Die Methode reload() ruft das aktuelle Fenster neu auf. Das Unterobjekt document hat u.a. die Methode write(String), mit der man einen String ins aktuelle Fenster schreiben kann, sowie open() und close().

Es bleibt noch darauf hinzuweisen, dass JavaScript auch über eine spezielle Java-Script-Datei in ein HTML-Dokument eingebunden werden kann. Dies geschieht über:

<script type="text/javascript" src="JavaScript-Datei"></script>

JavaScript-Dateien sind unter Windows vom Typ *.js.

Da JavaScript den Nachteil hat, dass die Programmbefehle - wie die HTML-Befehle - vom Internet-Browser immer neu interpretiert werden müssen, sind manche aufwändige Rechenroutinen zeitintensiv und können einige Sekunden dauern. Hier helfen sog. Java-Applets weiter, in der Programmiersprache Java geschriebene Routinen, die kompiliert, also in Maschinensprache übersetzt werden und daher wesentlich schneller sind, allerdings nicht auf jedem Browser laufen.

V. Beispiel: Grundstruktur einer Website

Die nachstehende Beispielwebsite soll aus Seiten mit immer demselben Layout bestehen. Die Seiten sind über Links in einer Menüleiste verbunden. Jede Seite besteht aus sechs Feldern in zwei Spalten mit je drei Zellen (Kopf, Hauptteil, Fuß):

LogoTitel
NavigationSeiteninhalt
ImpressumSeitenfuß

Den HTML-Seiten der Website zugeordnet ist eine CSS-Datei format.css, die von den Boxen bis zur Schrift die Formatierung der HTML-Seiten organisiert. Inhalt von format.css ist:

body {background-color: <Hintergrundfarbe>; font-size: 100.01%; font-family:verdana,sans-serif,tahoma; text-align: left;} [linksbündige Website über den gesamten Bildschirm]
#seite {width: 100%; margin: 0 auto; padding: 0; text-align: left; background: #FFFFCC;} [Box der gesamten Seite]
#kopf {height: <Höhe>; margin: 0; padding: 2px; text-align: left; background-color: <Hintergrundfarbe>; border: <Randformatierungen>;} [Box des Seitenkopfes]
#kopf_links {width: <Breite>; float: left; background: url("<Logo-Bild>") no-repeat left 100%;} [Unterbox des linken Seitenkopfes/des Logos]
#kopf_rechts {margin-left: <Breite>; background: url("<Hintergrundbild>") no-repeat left 100%;} [Unterbox des rechten Seitenkopfes/der Überschrift]
#hauptteil {margin: 0; text-align: left; background-color: <Hintergrundfarbe>; border: <Randformatierungen>;} [Box des Hauptteils]
#navigation {float: left; width: <Breite wie kopf_links>; height: <Höhe>; background-color: <Farbe>; border: <Randformatierungen>;} [Unterbox des Navigationsteils]
#navigation ul {list-style-type: none; margin: 0; padding: 0; font-size: 85%;} [Navigationsliste]
#navigation ul li {height: <Höhe des Listenfeldes>; margin: 0 0 1px 0; text-align: left; font-weight: bold; color: #003399; font-size: 85%;} [Formatierung des Listenfeldes]
#navigation ul li a {height: <Höhe des Listenfeldes>; text-decoration: none; display: block; background: <Hintergrundfarbe>;} [Formatierung des Listenfeldes]
#navigation ul li a:hover, #navigation ul li a:active, #navigation ul li a:focus {height: <Höhe des Listenfeldes>; width: 100%; display: block; background: <Hintergrundfarbe>; text-decoration: none;} [Formatierung des Listenfeldes]
html>body #navigation ul li a, #navigation ul li a:hover {width: auto;}
#inhalt {margin-left: <Breite>; padding: 2px; border: <Randformatierungen>;} [Unterbox des Seiteninhalts]
#fuss {clear: left; height: <Höhe>; margin: 0; padding: 2px; text-align: left; background-color: <Hintergrundfarbe>; border: <Randformatierungen>;} [Box des Seitenfußes]
#fuss_links {width: <Breite>; float: left; background: <Hintergrundfarbe>;} [Unterbox des linken Seitenfußes/des Impressums]
#fuss_rechts {margin-left: <Breite>; text-align: left; background: <Hintergrundfarbe>;} [Unterbox des rechten Seitenfußes]
<Formatierungen von Absätzen, Schrift, Bildern u.a.>

Höhen und Breiten sind in der CSS-Datei in px oder % anzugeben, ebenso die Schriftgrößen; Farben können mit rgb(<0-255>,<0-255>,<0-255>) angegeben werden.

Die Datei der HTML-Seiten der Website sind dann folgendermaßen strukturiert:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" SYSTEM "http://www.w3.org/TR/xhtml1/DTD/dhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; CHARSET=iso-8859-1">
<title>Titel</title>
<link rel="stylesheet" type="text/css" href="format.css" />
</head>
<body>
<div id="seite">
<div id="kopf">
<div id="kopf_links">[...]</div>
<div id="kopf_rechts">[...]</div>
</div>
<div id="hauptteil">
<div id="navigation"><ul>[Navigationsliste]</ul></div>
<div id="inhalt">[...]</div>
</div>
<div id="fuss">
<div id="fuss_links">[...]</div>
<div id="fuss_rechts">[...]</div>
</div>
</div>
</body>
</html>

Das Aussehen einer solcherart aufgebauten Seite ist das folgende:

HTML- und CSS-Datei können - wie anfangs erwähnt - mit einem Texteditor (Windows Editor) bearbeitet werden (Dateiendungen .htm und .css beachten). Zur Farbgestaltung der Webseite kann die Farbpalette eines Mal- und Grafik-Programms (Windows Paint) genutzt werden, Bilder können mit Fotoprogrammen an die Website angepasst werden (Bildgröße, Reduzierung der Dateigröße u.a.). Steht der Grundaufbau der HTML-Seite fest, so kann diese vervielfältigt werden; die Vervielfältigungen sind Grundlage weiterer Seiten. Die Website oder Homepage ist dann - wie gesagt - eine Zusammenstellung von einzelnen HTML-Dokumenten, die miteinander über Links verbunden sind. Die Anfangs- oder Startseite der Website sollte dann mit "index.htm" oder "start.htm" bezeichnet werden.

VI. Literatur

Chao, Ingo, Rudel, Corina, Fortgeschrittene CSS-Techniken (inkl. CSS-Debugging) (= Galileo Computing), Bonn 2009

Hanke, Johann-Christian, Internet. Online-Recherche - E-Mail - IRC und ICQ - Meine eigene Homepage - Optimale Browser-Konfiguration - Spielen im Internet (= Franzis' Computerbuch Jubiläumsausgabe), Poing 1999

Kannengiesser, Matthias, Enseleit, Damir, PHP 5. Praxisbuch & Referenz (= Franzis' Professional Series), Poing 2004

Kronenberg, Friedrich, Online Surfing im Internet (= Econ Computer Taschenbücher 28078), Düsseldorf-Wien 1995

Lemay, Laura, Cadenhead, Roger, JAVA 2 in 21 Tagen, München 2001

Louis, Dirk, Müller, Peter, Java 2. Praxis der objektorientierten Programmierung (Kompendium. Einführung, Arbeitsbuch, Nachschlagewerk), München 2004

Lubkowitz, Mark, Webseiten programmieren und gestalten. Das umfassende Handbuch (= Galileo Computing), Bonn 2005

Maurice, Florence, Rex, Patricia, CSS. Webdesign mit Cascading Style Sheets (= Markt + Technik), München 2008

Münz, Stefan, Nefzger, Wolfgang, HTML 4.0 Handbuch. HTML 4.0 - JavaScript - DHTML - Perl (= Franzis' Professional Series), Poing 32001

Seeborger-Weichselbaum, Michael, JavaScript (= Das bhv Taschenbuch 5020), Kaarst 22000

Seibert, Björn, Hoffmann, Manuela, Professionelles Webdesign mit (X)HTML und CSS (= Galileo Computing), Bonn 2008

Wenz, Christian, Hauser, Tobias, Maurice, Florence, Das Website-Handbuch. Programmierung und Design (= Markt + Technik), München 2009

Michael Buhlmann

Zurück