1. #1
    Permanent gesperrt

    Registriert seit
    18.11.2011
    Beiträge
    773
    Thanked 752 Times in 362 Posts

    Standard [HTML Tutorial] #3 - Textformatierungen


    #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

    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>
    </body>
    </html>


    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!
    Geändert von Comu (17.07.2012 um 13:48 Uhr)

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

    DnL (18.07.2012), milchbubix (12.08.2012), Mr Amari (17.07.2012)

Ähnliche Themen

  1. [HTML Tutorial] #6 - Formulare
    Von Comu im Forum HTML
    Antworten: 0
    Letzter Beitrag: 12.08.2012, 11:59
  2. [HTML Tutorial] #5 - Tabellen
    Von Comu im Forum HTML
    Antworten: 0
    Letzter Beitrag: 26.07.2012, 17:39
  3. [HTML Tutorial] Übersicht
    Von Comu im Forum HTML
    Antworten: 0
    Letzter Beitrag: 17.07.2012, 12:07
  4. Antworten: 0
    Letzter Beitrag: 16.07.2012, 21:22
  5. HTML Video Tutorial
    Von Comu im Forum Webentwicklung
    Antworten: 9
    Letzter Beitrag: 17.11.2011, 01:49
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191