[HTML Tutorial] #3 - Textformatierungen

**Comu** · 17.07.2012, 11:57

BILD ANZEIGEN [Warum wird das Bild nicht angezeigt?]

#3 - Textformatierungen

Nachdem wir uns nun damit beschäftigt haben wie HTML an sich aufgebaut ist und wie man sich am besten diese Verschachtelungen merkt geht es nun einen Schritt weiter. HTML wurde geschaffen um Informationen mit anderen zu Teilen.

Man kennt es aus Word o.Ä.: Man will ein bestimmtes Wort fett hervorheben, da es entweder wichtig ist oder etwas bestimmtes Aussagen soll. Genau diese Möglichkeiten haben wir in HTML auch. Das ganze nennt man wie in der Überschrift schon angesprochen Textformatierungen.

Dann fangen wir mal an. Es gibt die 3 Standard-Textformatierungen welche man per BB-Codes kennt ebenfalls in HTML. Diese sind dementsprechend <b> für fetten Text, <i> für kursiven Text und <u> für unterstrichenen Text.

An diesem Punkt gibt es aber eine kleine Ausnahme: Die obigen 3 Tags können genutzt werden. Ich habe jedoch schon öfters die Erfahrung gemacht, dass wenn ich <b> und <i> in einem Tag nutze, dass diese dann automatisch einen Zeilenumbruch hinzufügen (kann auch völliger quatsch sein) aber aus diesem Grund benutze ich die Tags <strong> als Ersatz für den fetten <b> Tag und <em> als Ersatz für <i>. Für <u> ist mir noch kein anderer Tag bekannt. (Ich habe mich hier nochmal schlau gemacht [danke an Finn], es besteht kein anderer Tag für <u>. Dementsprechend sind <em> und <strong> die Ausnahmen!)

Im Grunde heißt das nichts anderes: In diesem Tutorial wird <strong> für fetten Text, <em> für kursiven Text und <u> für unterstrichenen Text genutzt.

Aufgabe: Erstelle ein einfaches HTML-Dokument welches diese 3 Textformatierungen (plus normalen Text, also insgesamt 4) ausgibt. Achte darauf das du sie richtig platzierst, sie sollen alle auf der Webseite ausgegeben werden!

Spoiler:Lösung

Somit seid ihr nun schon in der Lage eure Texte dementsprechend anzupassen und wichtigere Sachen hervorzuheben.

Nun gibt es noch 2 wichtige Punkte: Überschriften und Zeilenumbrüche. Zeilenumbrüche sind wichtig wenn man nicht komplette Textblöcke haben will die bis zum Ende des Bildschirmrands gehen sondern diese geordnet in eine neue Reihe packen kann.

In Word ist dies einfach mit der ENTER Taste machbar. In HTML gibt es dafür einen gesonderten Tag, dieser nennt sich <br />. Hier seht ihr nun eine spezielle Form eines HTML Tags.

Diese HTML Tags sind Anfang- und Endtag in einem. Warum ist ganz einfach zu erklären: Bei <span> und </span> hatten wir beispielsweise einen Text den wir dazwischen ausgeben wollen. Bei <br /> wollen wir einen einfachen Zeilenumbruch erzeugen, wodurch hier <br></br> sinnlos und nur viel Schreibarbeit wäre.

Aus diesem Grund hat man sich gesagt: Okay, schließt man den Tag direkt und dann brauch man sich nicht mehr Arbeit machen (denn Programmierer sind allgemein sehr schreibfaul).

Wichtig hierbei ist: Das <br /> muss immer dahin wo die Zeile übersprungen werden soll. Du musst sie quasi genauso setzen wie als wenn du in Word ENTER drückst, um eine neue Zeile anzufangen:

Ein Beispiel wäre:

HTML-Code:

<html>
<head>
  <title> Zeilenumbruch </title>
</head>
<body>
 <span> Text 1 </span> <br />
 <span> Text 2 </span>
</body>
</html>

In diesem Fall würde Text 2 nun eine Zeile darunter stehen. Ab und zu kann es auch dazu kommen das HTML erst die vorhandene Reihe mit einem <br /> komplett beendet. Dann muss man einfach ein zweites <br /> dahinter setzen um in die neue Zeile zu rücken.

Als letztes Themengebiet in den Textformatierungen stehen nun die Überschriften an. Heutzutage ist es üblicherweise so das man mit CSS und Klassen die meisten Textpassagen so bearbeitet und nur noch in äußersten Notfällen auf die Überschriften zurückgreift. Trotzdem sollte jedem das bekannt sein, denn besonders am Anfang sind sie sehr hilfreich.

Der Tag für eine Überschrift lautet:

HTML-Code:

<h1-6> Überschrift </h1-6>

h1-6 denkst du dir nun? Das ist nicht schwer zu verstehen. Die 1-6 sagen einfach nur aus, dass es folgende Arten von Überschriften gibt: <h1>, <h2>,<h3>,<h4>,<h5>,<h6>. Diese sind chronologisch angeordnet, heißt <h1> ist die größte Überschrift und <h6> die kleinste.

Ab <h4> ist man jedoch wieder auf der normalen Textgröße wie von <span> angekommen. Heißt, im Grunde, wenn man diese Art von Überschriften nutzt ist es klug nur die von 1-3 zu nutzen, da der Rest einfach zu klein ist.

Wenn man sich nun alle Sachen anschaut welche wir nun hier besprochen haben, kommen wir auf folgendes Ergebnis:

HTML-Code:

<html>
<head>
  <title> Textformatierungen </title>
</head>
<body>
 <span> Das ist ein normaler Text. </span>
 <strong> Das ist ein fetter Text. </strong>
 <em> Das ist ein kursiver Text. </em>
 <u> Das ist ein unterstrichener Text. </u>
 <h1> Große Überschrift </h1>
 <h2> Normale Überschrift </h2>
 <h3> Kleine Überschrift </h3>
 <h4> Normale Textgröße </h4>
 <br />
</body>
</html>

Wie man im Endeffekt nun sieht, ist HTML eine reine Sache die man mit der Zeit auswendig lernen muss. Ihr habt nun die dementsprechenden Tags und könnt damit schon eine Menge anstellen. Am besten probiert ihr euch selber damit aus, denn nur so kann man sich die Sachen auch einprägen!

U-Labs

Account-Boerse

U-IMG

Thema: [HTML Tutorial] #3 - Textformatierungen

[HTML Tutorial] #3 - Textformatierungen

The Following 4 Users Say Thank You to Comu For This Useful Post:

Ähnliche Themen

[HTML Tutorial] #6 - Formulare

[HTML Tutorial] #5 - Tabellen

[HTML Tutorial] Übersicht

[HTML Tutorial] #1 - Einführung / Grundlagen

HTML Video Tutorial