Html-Programmierung

Eine HTML-Seite erstellen

Sie finden, dass es langsam an der Zeit ist, Ihre eigene Homepage zu erstellen. Sie sollte Text und Bilder, mindestens eine Tabelle und einen Link enthalten Dafür benötigen Sie keine besondere Software - nur einen Editor. Der findet sich bei Windows in der Rubrik Zubehör.

Sehen Sie sich nun die folgende Webseite an und versuchen Sie die Funktion der "kryptischen" Zeichen im Quelltext zu erschließen.

Quelltext	Webseite
<html> <head> <title> Meine Startseite </title> </head> <body> Das ist der Anfang <i> meiner </i> Homepage. </body> </html>

Gehen Sie nun in folgenden Schritten vor:

Erstellen Sie auf Ihrem Stick ein Verzeichnis mit dem Namen Webseite.
Öffnen Sie den Editor.
Schreiben Sie in die erste Zeile <html>
Speichern Sie das Dokument im Verzeichnis Webseite. Schreiben Sie den Dateinamen bitte nur in Kleinbuchstaben. Geben Sie nicht nur den Namen ein, sondern auch die Erweiterung .htm
Fangen Sie an, Ihre Seite zu erstellen.
Achten Sie darauf, dass diese Zeilen immer am Ende Ihres Dokumentes bleiben:

</body>

</html>

1. Tags und ihre Bedeutung

Sie kennen nun schon die Tags <html>, <head>, <title> und <body>

Weitere sollten Sie ebenfalls in Ihrer Webseite verwenden. Hier einige wichtige Vertreter:

Tag	Englisch	Deutsch	Beispiel	Ansicht
<i>	italic	kursiv	<i>Hallo</i>	Hallo
<b>	bold	fett	<b>Hallo</b>	Hallo
<u>	underline	unterstrichen	<u>Hallo</u>	Hallo
<center>	center	zentrieren	<center>Hallo</center>	Hallo
<p>	paragraph	neuer Absatz	Hallo<p>Du</p>	Hallo Du
<br>	break	Zeilenumbruch	Hallo<br>Du	Hallo Du
<hr>	horizontal rule	horizontale Linie	<hr>
<wbr>	word break	optionale Worttrennung	Internet<wbr>seite	Internetseite
<nobr>	no break	Unterdrückung des Zeilenumbruchs	<nobr>Kein Umbruch</nobr>	Kein Umbruch

2. Attribute

a) bei Linien

Sehen Sie sich einmal die horizontale Linie in der Tabelle bei den Tags an. Sie sieht sehr unscheinbar aus. Um sie z.B. schmaler oder schwarz zu zeichnen, braucht man den Tag <hr> nur mit einem Attribut ergänzen. Man kann auch mehrere Attribute in einen Tag schreiben.

Attribut	Deutsch	Beispiel	Ansicht
width = "50%"	Breite von 50%	<hr width = "50%">
font color = "red"	Farbe rot	<hr font color = "red">
font color = "red" width = "50%"	rot und 50%	<hr font color = "red" width = "50%">

b) bei der Hintergrundfarbe

Die Hintergrundfarbe einer Webseite wird im <body> festgelegt. Dabei wird die Zahl hexadezimal eingegben, so dass die Ziffern 0-9 und die Buchstaben a-f zulässig sind.

Beispiel	Ansicht
<body bgcolor = "#FF00FF">

c) bei Schrift

Die Schrift muss nicht immer schwarz sein. Wählen Sie einfach das Tag <font> und ergänzen das Farbattribut. Die Schriftfarbe wird so lange beibehalten, bis das Tag </font> erscheint.

Beispiel	Ansicht
<font color = "#FF00FF">Das ist der Text. </font>	Das ist der Text.

3. Links

Um einen Link einzufügen, müssen wir an zwei Sachen denken. Das ist zum einen das Ziel, wo ich mich hinklicken möchte, wie z.B. http://www.google.de und dann an den Namen des Links, wie z.B. Suchmaschine.

Beispiel	Ansicht
<a href = "http://www.google.de"> Suchmaschine </a>	Suchmaschine

Wenn Sie den Link Suchmaschine anklicken, fällt auf, dass das Grundgerüst der Rautenberg-Seiten bestehen bleibt und die Suchmaschine einfach unter http://www.lehrer-rautenberg.de eingebunden wird. Das ist nicht legal. Ein Ausweg ist die Anweisung, den Link in einem neuen Fenster zu öffnen, was mit target = "self" realisiert wird.

Beispiel für Link in neuem Fenster	Ansicht
<a href = "http://www.google.de" target = "self"> Suchmaschine </a>	Suchmaschine

4. Tabellen

Um Tabellen zu zeichnen brauchen wir nur drei Angaben. Zunächst müssen wir zeigen, dass eine Tabelle anfängt, was mit dem Tag <table> realisiert wird. Dann folgt der Hinweis, dass eine Zeile beginnt, was mit <tr> geschieht. (tr ist Abkürzung für table row). Dann fehlen nur noch die Spalten. Eine neue Spalte wird erzeugt, indem das Tag <td> eingefügt wird. (td steht für table data).

Wenn für die Tabelle Linien benötigt werden, braucht nur der Tag <table> mit dem Attribut border = "1" aufgefüllt werden. Die Zahl "1" kann durch größere Zahlen ersetzt werden, wodurch die Linienstärke verstärkt wird.

Beispiel	Ansicht
<table border = "1"> <tr> <td>Das ist die erste Spalte </td> <td>Das ist die zweite Spalte </td> </tr> </table>

5. Grafiken

Um Grafiken einzufügen, brauchen wir nur die Quelle kennen. Es empfiehlt sich, die Grafiken im selben Verzeichnis abzulegen, wo sich auch die Webseite befindet. Dann ist das Einbinden in die Webseite besonders einfach.

Nehmen wir an, Sie möchten das Bild party.jpg in Ihre Webseite aufnehmen, dann geben Sie nur ein: <img src = "party.jpg">

(Das src steht für source)

Also dann, viel Spaß beim Erstellen Ihrer Webseite.

6. Sonstiges

Manchmal sollen bestimmte Wortkombinationen nicht getrennt werden, wie z.B. 500 Euro.

In dem Fall gibt man anstelle eines Leerzeichen   ein. Im Quelltext stünde dann: 500 Euro