E-Book Startseite Karteikarten-Programm
0

Absatz / Text

Einer der wichtigsten Codes, ist der für Text und Links und für Absätze. Nachdem Sie nun ein paar Grundlagen gelernt haben, beginnt nun das "richtige" Programmieren der Webseite. Der Tag für Standard-Texte ist <a>. Verwendet wird dieser Tag hauptsächlich für Links, Verweise, Sprungmarken und Anker. Aufgrund der Pseudoklassen (dazu erst im CSS-Kurs unter Links mehr), sollten Sie die a-Tags nur für Links, Verweise, Sprungmarken und Anker benutzen. Die Tags für Absätze sind <p> und enden mit </p>. Der Buchstabe "p" im Tagname ist vom englischen Wort "paragraph" abzuleiten. In dem Anzeigebeispiel sehen Sie keinen Unterschied zwischen dem a- und p-Tag, dass ist auch völlig normal: Denn einen richtigen Unterschied gibt es nicht wirklich (vom Aussehen). Die Lücke zwischen den 2 Texten (siehe Anzeigebeispiel) ist kein Zeilenumbruch, sondern ist das ganz normale Verhalten zwischen Absätzen. Mit CSS-Angaben kann die Höhe des Abstandes bearbeitet werden.

<a>Das ist ein ganz normaler Text. Oft wird dieser Befehl auch für Links und Verweise verwendet.</a>
<p>Das ist ein Absatz. Das p in dem Tag steht für "paragraph".</p>
Anzeigebeispiel
Anzeigebeispiel


Des Weiteren kann man mit HTML, Ausrichtungen für den Textabsatz vornehmen. Mit dem Attribut align im Absatz-Tag kann die Ausrichtung vorgenommen werden. Als Wert im Attribut gibt es folgende gültige Möglichkeiten: "left" (linksbündig), "right" (rechtsbündig), "center" (zentriert), "justify" (justieren / Blocksatz). Die Codes sehen folgendermaßen aus:

<p align="left">Dies ist ein linksbündiger Absatz!</p>
<p align="right">Dies ist ein rechtsbündiger Absatz!</p>
<p align="center">Dies ist ein zentrierter Absatz!</p>
<p align="justify">Dies ist ein justifierter (Blocksatz) Absatz!</p>
Anzeigebeispiel
Anzeigebeispiel



Trennlinien

Ein ebenfalls häufig verwendeter Code, ist der Code für Trennlinien. Trennlinien sind Striche, die in passenden Momenten und an der passenden Stelle eine Seite verschönern können. Eine Trennlinie wird mit dem Code <hr /> gekennzeichnet. Das "hr" im Code ist vom englischen "horizontal rule", zu Deutsch Querlinie abzuleiten.

<hr />
Anzeigebeispiel
Anzeigebeispiel


Auch Trennlinien können mit HTML ein wenig geschmückt werden. Es gibt 4 verschiedene Attribute, mit dem eine Trennlinie ohne CSS gestaltet werden kann. Mit dem einteiligen Attribut noshade erreichen Sie, dass die Trennlinie durchgezogen ist (Linie wirkt dadurch dicker). Mit dem Attribut width können Sie einstellen wie Breit die Linie sein soll. Zwischen den Anführungszeichen können Sie relativ und prozentuale Zahlen eingeben. Mit dem Attribut size (zu Deutsch "Größe") können Sie die Dicke der Linie einstellen. Die Standardeinstellung ist 2. Das 4. Attribut kennen Sie schon von dem vorherigen Text, denn auch hier kann man einstellen wie die Trennlinie ausgerichtet werden soll. Bei den Trennlinien ist jedoch kein "justify" möglich. Bitte bedenken Sie, dass die Ausrichtungs-Einstellung nur sinnvoll ist, wenn Sie das Attribut width verwenden, denn sonst geht die Trennlinien immer über die ganze verfügbare Fläche. Noch eine weitere Info: Eine Trennlinie richtet sich normalerweise immer in die Mitte (siehe 2. Trennlinie im Anzeigebeispiel) aus. Hier ein paar Beispielcodes:

<hr noshade />
 
<hr width="400" />
 
<hr size="8" />
 
<hr align="left" width="400" />
 
<hr align="right" width="400" />
 
<hr align="center" width="400" />
Anzeigebeispiel
Anzeigebeispiel



Zeilenumbruch

Es gibt 4 verschiedene Arten von Zeilenumbrüchen: Erzwungener Zeilenumbruch, Automatischen Zeilenumbruch verhindern, Geschützte Leerzeichen und Zeilenumbruch erlauben.

Der Erzwungene Zeilenumbruch, ist wohl der bekannteste von den 4 verschiedenen Arten. Mit diesem Code bewirken Sie, dass auch wenn an dieser Stelle kein Zeilenumbruch nötig wäre, ein Zeilenumbruch eingefügt wird. Wenn Sie diesen Code 2 Mal hintereinander notieren, können Sie damit auch bewirken, dass eine Leerzeile entsteht. Der Code für den Erzwungenen Zeilenumbruch ist <br />

<p>Ein Absatz... - Ein Absatz... - Ein Absatz... - Ein Absatz... - Ein Absatz... - 
Ein Absatz... - Ein Absatz... - Ein Absatz... - Ein Absatz... - Ein Absatz... -
Ein Absatz... - Ein Absatz... - Ein Absatz... - Ein Absatz... - Ein Absatz... -
Ein Absatz... - Ein Absatz... - Ein Absatz... - Ein Absatz... - Ein Absatz... -
Ein Absatz... - Ein Absatz... - Ein Absatz... - Ein Absatz... - Ein Absatz...</p>
<br />
<p>Ein Absatz... - Ein Absatz... - Ein Absatz... - Ein Absatz... - Ein Absatz... -
Ein Absatz... - Ein Absatz... - Ein Absatz... - Ein Absatz... - Ein Absatz... -
Ein Absatz... - Ein Absatz... - Ein Absatz... - Ein Absatz... - Ein Absatz... -
Ein Absatz... - Ein Absatz... - Ein Absatz... - Ein Absatz... - Ein Absatz... -
Ein Absatz... - Ein Absatz... - Ein Absatz... - Ein Absatz... - Ein Absatz...</p>
Anzeigebeispiel
Anzeigebeispiel


Die Funktion "Automatischen Zeilenumbruch verhindern" ist nicht so bekannt, da er auch oftmals nicht wirklich sinnvoll ist. Mit dem Code können Sie verhindern, dass an Stellen, wo der Browser normalerweise ein Zeilenumbruch vornimmt (wenn nötig), kein Zeilenumbruch entsteht. Den Bereich in dem Sie diese Funktion nutzen wollen müssen Sie in folgende Tags einschließen: <nobr> und </nobr>. Von einigen Browsern wird dies aber nicht mehr unterstützt!

<nobr>Dieser Text soll nie umbrochen werden! - Dieser Text
soll nie umbrochen werden! - Dieser Text soll nie umbrochen werden! - Dieser Text soll nie umbrochen
werden! - Dieser Text soll nie umbrochen werden! - Dieser Text soll nie umbrochen werden! - Dieser
Text soll nie umbrochen werden! - Dieser Text soll nie umbrochen werden! - Dieser Text soll nie
umbrochen werden! - Dieser Text soll nie umbrochen werden!</nobr>
Anzeigebeispiel
Anzeigebeispiel


Zusätzlich zu den genannten Arten des Zeilenumbruches, gibt es noch die sogenannte "Geschütze Leerzeichen". Wie Sie später auf dieser Webseite lernen, ergibt der Code &nbsp; ein erzwungenes Leerzeichen. Anders wie bei den normalen Leerzeichen handelt es sich bei dem oberen Code um ein "geschütztes Leerzeichen". Wenn man in einem Text statt dem normalen Leerzeichen, den oben genannten Code verwendet, erfolgt an der Stelle kein Zeilenumbruch. Zum Testen dieser Funktionen ziehen Sie das Fenster in dem sich der Code befindet, so klein, bis es nicht mehr weiter geht. &nbsp; wird aber auch für das erzeugen von mehreren Leerzeichen verwendet. Wer bereits versucht hat zwei Leerzeichen hintereinander zu erstellen ist gescheitert. Hierfür kann dieser kleine HTML-Code auch verwendet werden.

<p>Dies ist ein Absatz. Zwischen der Zahl 1&nbsp;und&nbsp;2 ist kein Leerzeichen
erlaubt. Auch zwischen der Zahl 3&nbsp;und&nbsp;4 ist kein Zeilenumbruch gestartet.</p>
Anzeigebeispiel
Anzeigebeispiel


Als letzte Art der Zeilenumbrüche gibt es die Funktion "Zeilenumbruch erlauben". Um Zeilenumbrüche zu erlauben gibt es 3 verschieden Methoden. Zeilenumbrüche erfolgen normalerweise nur bei Leerzeichen und bei Trennstrichen. Mit dieser Funktion können Sie jedoch (z. B. lange) Wörter automatisch trennen lassen. Gleichzeitig fügen die Codes Trennstriche an das Ende (z. B. in der 1 Zeile) des 1. Teils des Worts an. Wie schon oben gesagt gibt es 3 verschiedene Codemöglichkeiten: &shy; - <wbr> - &#8203; . Sie sollten bei diesem Code beachten, dass nur der 1. Code bei (fast) allen bzw. bei vielen Browsern funktioniert. Der 2. und 3. Code funktioniert entweder nicht, fehlerhaft oder ohne Trennstrich. Unserer Meinung nach sollten Sie aber keinen von diesen Codes verwenden, da selbst der 1. Code nicht bei allen Browsern funktioniert und es auch hier zu Fehldarstellungen kommen kann. Wenn Sie die Funktion testen wollen, müssen Sie eventuell Ihr Browserfenster kleiner "ziehen".

<p>Massenkommunikations&shy;dienstleistungsunternehmen 
Massenkommunikations&shy;dienstleistungsunternehmen 
Massenkommunikations&shy;dienstleistungsunternehmen 
Massenkommunikations&shy;dienstleistungsunternehmen 
Massenkommunikations&shy;dienstleistungsunternehmen 
Massenkommunikations&shy;dienstleistungsunternehmen 
Massenkommunikations&shy;dienstleistungsunternehmen 
Massenkommunikations&shy;dienstleistungsunternehmen 
Massenkommunikations&shy;dienstleistungsunternehmen 
Massenkommunikations&shy;dienstleistungsunternehmen</p>
 
<p>Massenkommunikations<wbr>dienstleistungsunternehmen 
Massenkommunikations<wbr>dienstleistungsunternehmen
Massenkommunikations<wbr>dienstleistungsunternehmen
Massenkommunikations<wbr>dienstleistungsunternehmen 
Massenkommunikations<wbr>dienstleistungsunternehmen 
Massenkommunikations<wbr>dienstleistungsunternehmen 
Massenkommunikations<wbr>dienstleistungsunternehmen 
Massenkommunikations<wbr>dienstleistungsunternehmen 
Massenkommunikations<wbr>dienstleistungsunternehmen</p>
 
<p>Massenkommunikations&#8203;dienstleistungsunternehmen 
Massenkommunikations&#8203;dienstleistungsunternehmen 
Massenkommunikations&#8203;dienstleistungsunternehmen 
Massenkommunikations&#8203;dienstleistungsunternehmen 
Massenkommunikations&#8203;dienstleistungsunternehmen 
Massenkommunikations&#8203;dienstleistungsunternehmen 
Massenkommunikations&#8203;dienstleistungsunternehmen 
Massenkommunikations&#8203;dienstleistungsunternehmen 
Massenkommunikations&#8203;dienstleistungsunternehmen 
Massenkommunikations&#8203;dienstleistungsunternehmen</p>
Anzeigebeispiel
Anzeigebeispiel



Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de