Layout

Lektion 2 - Text

Bisher ist alles, was der Browser uns anzeigt, eine leere, weiße Seite. Verständlich, da im Body Bereich noch nichts steht. Fangen wir also an, die Webseite mit Leben zu füllen. Öffne deine index.html Seite aus Lektion 1 im Editor.

2.1 Paragraph

Der Text auf Webseiten wird im Quelltext im <p> </p> Tag eingebettet. Das p steht für das englische 'paragraph' und bedeutet Absatz. Schreibe folgendes in den Body deines Quelltextes.

<p>Willkommen auf meiner Webseite!</p>

Wenn du nun deine Webseite im Browser aufrufst, erscheint nur die Nachricht "Willkommen auf meiner Webseite!".
Unter die Begrüßung schreiben wir nun eine kleine Info, was es auf der Webseite zu sehen gibt.

<p>Hier lerne ich Schritt für Schritt HTML. Das Grundgerüst ist bereits aufgesetzt, grade versuche ich mich am Text. Es kann nicht mehr lange dauern, dann wird hier der erste Link und das erste Bild angezeigt werden. Bis dahin werde ich fleißig die Aufgaben auf dieser Seite ausführen, damit ich bald meine eigene Webseite mit meinem eigenen Inhalt erstellen kann, die von der ganzen Welt betrachtet werden kann.</p>

Wenn du diesen Absatz unter den ersten mit der Überschrift einfügst, kannst du sehen, dass dein Browser automatisch eine Leerzeile zwischen die 2 Absätze fügt.

Alles in allem sollte dein Quelltext nun also etwa so aussehen:

<html>
    <head>
        <title>
Meine Webseite</title>
    </head>

    <body text="#000000" bgcolor="#FFFFFF" link="#0000FF" vlink="#0000FF" alink="#0000FF">

<p>Willkommen auf meiner Webseite!</p>
<p>Hier lerne ich Schritt für Schritt HTML. Das Grundgerüst ist bereits aufgesetzt, grade versuche ich mich am Text. Es kann nicht mehr lange dauern, dann wird hier der erste Link und das erste Bild angezeigt werden. Bis dahin werde ich fleißig die Aufgaben auf dieser Seite ausführen, damit ich bald meine eigene Webseite mit meinem eigenen Inhalt erstellen kann, die von der ganzen Welt betrachtet werden kann.</p>

    </body>
</html>

 

2.1.1 Paragraph Ausrichtung

Der Text kann durch eine Eigenschaft, die dem Paragraph-Tag mitgegeben wird, formatiert werden. Das Schlüsselwort align (engl.: to align = ausrichten) steht für die Ausrichtung des Textes. Folgende Eigenschaften stehen zur Verfügung:


Eigenschaft

left
right
center
justify

Bedeutung

Linksbündig
Rechtsbündig
Zentriert
Blocksatz

Übergibt man im <p>-Tag der Ausrichtung eine Eigenschaft, wird der Text entsprechend ausgerichtet auf der Webseite angezeigt.

<p align="center">Willkommen auf meiner Webseite!</p>

In diesem Falle wird dem Ausrichtungs-Schlüsselwort align die Eigenschaft center übergeben, so dass unsere Begrüßung nun zentriert auf der Webseite angezeigt wird. Wird keine Eigenschaft übergeben, wird der Text standartmäßig linksbündig angezeigt. Unser Beschreibungstext könnte sich als Blocksatz gut machen. Weise ihm diese Eigenschaft einmal zu.

 

2.2 Formatierende Tags

Man kann den Text nicht nur durch Eigenschaften innerhalb von Tags formatieren, sondern auch mit Tags. Die wichtigsten sind

<B> </B>
<I> </I>
<U> </U>
Fettdruck (Big)
Kursiv (Italic)
Unterstrichen (Underline)

Wenn wir uns daran erinnern, dass sich Tags immer auf das beziehen, was zwischen dem öffnenden Tag und dem schließenden Tag steht, ist es nun ein leichtes, unsere Überschrift fett zu bekommen.

<p align="center"><b>Willkommen auf meiner Webseite!</b></p>

Und da Überschriften oft durch Unterstreichen kenntlich gemacht werden, fügen wir das Underline-Tag auch noch hinzu.

<p align="center"><b><u>Willkommen auf meiner Webseite!</u></b></p>

Was hier gerade etwas chaotisch wird, zeigt sehr schön, wie HTML funktioniert. Am einfachsten ist es, ein öffnendes Tag im Quelltext gleich zu schließen und dazwischen zu schreiben, wie wir es hier gemacht haben. Denn solltest du bei den vielen Tags, die die Überschrift einschließen und gleich noch mehr werden, vergessen, eines zu schließen, wird der ganze nachfolgende Text der Webseite genauso formatiert werden. Lässt du zum Beispiel das schließende </B> Tag weg, wird auch die Beschreibung der Webseite aus dem nächsten Absatz fett gedruckt.

 

2.3 Font

Font ist wieder ein englisches Wort; es bedeutet übersetzt Schrift. Und so gibt es auch ein Font-Tag, mit dem man die Eigenschaften der Schrift formatieren kann. Bisher haben wir nur die Schriftfarbe im Body-Tag formatiert, was die ganze Seite betrifft. Innerhalb eines Font-Tags können wir einem Teil des Textes auch eine andere Schriftfarbe zuweisen, ebenso aber auch die Größe oder die Schriftart. (Leider ist das HTML Font-Tag mittlerweile veraltet, da man die gesamte Webseite auch mit CSS statt mit HTML Eigenschaften in Tags formatieren kann, aber zumindest die heutigen Browser können das Font Tag noch übersetzen.)

<font face="Comic Sans MS" size="4" color="#9900FF"> </font>

In diesem Font-Tag finden wir 3 Schlüsselwörter:

Schlüsselwort

face
size
color

Bedeutung

Schriftart
Schriftgröße
Schriftfarbe

face steht für die Schriftart des Textes. Als Eigenschaft weist du der Schrift den Namen der Schriftart zu, wie hier 'Comic Sans MS', oder auch 'Times New Roman' oder 'Verdana'. Der Browser kann allerdings nur Schriftarten anzeigen, die bei dem Besucher deiner Seite auf dem Computer installiert sind. Wenn du eine ausgefallene Schriftart irgendwo herunterlädst und sie bei dir installierst, um sie auf deiner Webseite zu sehen, wird dein Besucher da nichts von haben. Er wird die Schrift in der Standartschriftart sehen.
Die Größe der Schrift legst du mit size fest, allerdings nicht auf die Weise, wie du es z. B. aus Words kennst. Die Schriftgrößen in HTML reichen von 1 (ganz klein) bis 7 (sehr groß):

1 2 3 4 5 6 7

color entspricht im Font-Tag dem text aus dem Body-Tag mit dem Unterschied, dass Font-Tag nur den umschließenden Tag in die Farbe formatiert. Hier kannst du als Eigenschaften alle Farben als Hexadezimal Werte eintragen.

Eine zentrierte, große, rote, fette, unterstrichene Überschrift kannst du also folgendermaßen formatieren

<p align="center"><font size="5" color="#FF0000"><b><u>Willkommen auf meiner Webseite!</u></b></font></p>

wobei die Reihenfolge der Tags nach <p> egal ist. Du solltest nur drauf achten, dass sie sich in der umgekehrten Reihenfolge wieder schließen, damit es wenigsten etwas übersichtlich bleibt.

Und so sollte deine Webseite nun in etwa aussehen: Meine Webseite

 

2.4 Besonderheiten

2.4.1 <br>

Jedesmal, wenn man einen neuen Absatz beginnt, wird vom Browser eine Leerzeile zwischen die Absätze eingefügt. Für einen einfachen Zeilenumbruch gibt es daher das Break-Tag <BR>.

<p>... Bis dahin werde ich fleißig die Aufgaben auf dieser Seite ausführen, damit ich bald meine eigene Webseite mit meinem eigenen Inhalt erstellen kann, die von der ganzen Welt betrachtet werden kann.<br>
Und hier habe ich nun einen einfachen Zeilenumbruch im Text eingefügt.</p>

Das <br>- Tag wird nicht geschlossen, es wird nur einmal im Absatz platziert, um auf der Webseite einen Zeilenumbruch zu erzeugen.

2.4.2 ä, ö , ü und ß

Diese Umlaute sind dir aus der deutschen Sprache bekannt, sie kommen jedoch nicht in jeder Sprache vor und können von einigen anderssprachigen Computern nicht erfasst werden. Deshalb gibt es den sog. Ascii-Code, der von allem Computern übersetzt werden kann. Die Sonderlaute werden durch Ascii-Code im Quelltext verschlüsselt, um vom Browser richtig übersetzt werden zu können.

Zeichen

ä
Ä
ö
Ö
ü
Ü
ß

Ascii-Code

&auml;
&Auml;
&ouml;
&Ouml;
&uuml;
&Uuml;
&szlig;

Jedes Sonderzeichen ersetzt du im Quelltext durch den Ascii-Code. Das sieht z. B. wie folgt aus:

&Uuml;ber mir ist ein gr&ouml;&szlig;eres L&auml;mpchen.

 

2.4.3 HTML-eigene Zeichen

Es gibt gewisse Zeichen, die in HTML bereits belegt sind, wie die spitzen Klammern < > oder das & als Ascii-Code eigenes Zeichen. Diese Zeichen will der Browser übersetzten, weil sie zur HTML Sprache gehören. Wenn du sie aber, wie ich hier, auf deiner Seite sehen möchtest, musst du sie ebenfalls verschlüsselt in den Quelltext schreiben

Zeichen

<
>
&

Ascii-Code

&lt;
&gt;
&amp;

Alle Zeichen kannst du in den Tabellen von SelfHTML nachschlagen.

2.4.4 Erzwungenes Leerzeichen

Wie du vielleicht bereits bemerkt hast, ignoriert der Browser bei der Übersetzung Zeilenumbrüche im Quelltext, sowie Leerzeichen im Text. Wenn du dennoch einmal mehr als 1 Leerzeichen zwischen 2 Wörtern haben möchtest, kannst du es mit

&nbsp;

in deinen Text einfügen.


hr

2.5 Übungen

2.5.1 Formatiere den Satz "Ich löse eine Aufgabe" wie folgt:

  • Der Satz soll rechtsbündig sein
  • Die Schriftart soll Comic Sans MS sein
  • Das Wort 'Ich' soll kursiv sein
  • Die Wörter 'löse' und 'Aufgabe' sollen fett gedrucht sein
  • Die Wörter 'Ich löse' sollen blau sein
  • Das Wort 'Aufgabe' soll rot sein.
  • Die Wörter 'eine Aufgabe' sollen in der Schriftgröße 5 sein.

2.5.2 Änder die Farbe des Hintergrundes und der Schrift deiner Übungsseite, so dass sie nicht mehr eintönig schwarz-weiß ist. Füge der Seite weitere Absätze hinzu, an denen du die verschiedenen Formatierungen ausprobierst. Anschließend lade deine Seite ins World Wide Web hoch.

« zurück Inhalt | Fragen       Kurs weiter »
Layout