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:

  1. Erstellen Sie auf Ihrem Stick ein Verzeichnis mit dem Namen Webseite.

  2. Öffnen Sie den Editor.
  3. Schreiben Sie in die erste Zeile <html>
  4. 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
  5. Fangen Sie an, Ihre Seite zu erstellen.
  6. Achten Sie darauf, dass diese Zeilen immer am Ende Ihres Dokumentes bleiben:
  7. </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 &nbsp; ein. Im Quelltext stünde dann: 500&nbsp;Euro