Um Teile eines Text hervorzuheben, verwendet man als Formatierung kursiv, fett oder
unterstrichen.
Das umschließende Tag für fett gedruckten Text ist <b>...</b> (b für engl. bold).
Das umschließende Tag für kursiven Text ist <i>...</i> (i für engl. italic).
Das umschließende Tag für unterstrichenen Text ist <u>...</u> (u für engl. underline).
Es wird oft empfohlen auf Unterstreichung zu verzichten, da diese auch verwendet wird um Links
hervorzuheben.
Bei unterstrichenem Text nimmt der Betrachter oft an, dass es sich um einen Link handelt und wenn er auf
unterstrichenen Text klickt passiert aber nichts.
Beispiel:
<p>
Dieser <b>Text</b> beinhaltet <i>wichtige</i> Wörter.<br>
Eine <b><i>sehr</i></b> wichtige Sache
ist, dass man die <u>öffnenden</u> Tags in der <i><b>richtigen</b></i>
Reihenfolge schließt. </p>
Dieser Text beinhaltet wichtige Wörter.
Eine sehr wichtige Sache ist, dass man die
öffnenden Tags in der richtigen
Reihenfolge schließt.
Block-Elemente und Inline-Elemente
Eine Überschrift (<h.>), ein Absatz (<p>) und ein <hr> sind sogenannte Block-Elemente. Sie
bilden im Browser-Layout einen festen Block.
Block-Elemente können keine Bloock-Elemente enthalten. Ein Paragraph darf also keinen Paragraph
enthalten.
Auch vor einem <hr> muss ein Absatz zuerst mit </p> geschlossen werden.
In Überschriften darf ebenfalls kein anderer Block aufgemacht werden.
<i>, <b>, <u>, ... sind keine Block-Elemente und dürfen in Blockelementen auftreten.
Wenn Blöcke zusammengefasst werden sollen muss das <div>-Tag statt einem <p>-Tag verwendet werden,
da es als Flow-Block-Element dies ermöglicht.
Ein P, H1-H6, etc. Tag wird automatisch geschlossen, wenn ein nächster Block startet.
Beispiel: Hier werden Blöcke nicht ordentlich geschlossen
Der Browser macht durch seine Fehlerkorrektur aus:
<p>hallo
<p>
Dieser Text ist wichtig. <hr>
Aber das HTML ist fehlerhaft!
</p>
</p>
folgendes:
<p>hallo </p> <p>
Dieser Text ist wichtig.
</p> <hr>
Aber das HTML ist fehlerhaft! <p></p> <p></p>
Aufgaben
Nehmen Sie einen Texteditor ihrer Wahl und kopieren Sie das HTML-Gründgerüst hinein.
Speichern Sie die Seite als .html-Datei.
Holen Sie sich da s HTML-Grundgerüst.
Erzeugen Sie eine Überschrift mit dem Text „Was ich weiß“
Der Absatz unter der Überschrift soll so aussehen:
Ich weiß, wie man fetten, kursiven und unterschrichen Text erzeugt.
Ich weiß auch wie man alles zusammen macht: übertriebene Hervorhebung.
Speichern Sie Ihre Datei und überprüfen Sie das Ergebnis im Browser.
<h1>Was ich
weiß</h1> <p>
Ich weiß, wie man <b>fetten</b>, <i>kursiven</i> und <u>unterschrichen</u> Text erzeugt.<br>
Ich weiß auch wie man alles zusammen macht: <b><i><u>übertriebene Hervorhebung</u></i></b>. </p>
Holen Sie sich das HTML-Grundgerüst.
Kopieren Sie unten stehenden Text in den <body>-Bereich und
heben Sie die Überschriften (HTML-Datei, Fettgedruckter Text, Kursiver Text, Hinweis) mit
Heading-Tags hervor.
Speichern Sie Ihre Datei und betrachten Sie sie im Browser.
Den Inhalt unter der Überschrift umschließen sie mit Absatz-Tags (<p>)
Bei den Hinweisen packen Sie jeden Hinweis in einen eigenen Absatz.
Speichern Sie Ihre Datei und betrachten Sie sie im Browser.
Die Wörter Tab und HTML fett hervor.
Speichern Sie Ihre Datei und betrachten Sie sie im Browser.
Unterstreichen sie Unterstreichungen
Speichern Sie Ihre Datei und betrachten Sie sie im Browser.
Machen Sie jedes Wort fett fett und jedes kursiv kursiv.
Speichern Sie Ihre Datei und betrachten Sie sie im Browser.
Der Teil fettem und kursivem Text soll fett und kursiv sein.
Speichern Sie Ihre Datei und betrachten Sie sie im Browser.
<Text>
HTML-Dateien
In HTML kann man Text mit Tags hervorheben.
Fettgedruckter Text
Das Tag für fett gedruckten Text ist b. Dieses Tag braucht ein schließendes Tag.
Kursiver Text
Das Tag für kursiven Text ist i.
Hinweis
Auf Unterstreichungen sollte man verzichten.
Man kann fett und kursiv auch verschachteln zu fettem und kursivem Text.
</Text>
HTML-Dateien
In HTML kann man Text mit Tags hervorheben.
Fettgedruckter Text
Das Tag für fett gedruckten Text ist b.
Dieses Tag braucht ein schließendes Tag.
Kursiver Text
Das Tag für kursiven Text ist i.
Hinweis
Auf Unterstreichungen sollte man verzichten.
Man kann fett und kursiv auch verschachteln
zu
fettem und kursivem Text.
<h1>HTML-Dateien</h1> <p>
In <b>HTML</b> kann man Text
mit Tags hervorheben. </p> <h2>Fettgedruckter Text</h2> <p>
Das <b>Tag</b> für <b>fett</b> gedruckten
Text ist b.
Dieses <b>Tag</b> braucht ein schließendes Tag. </p> <h2>Kursiver
Text</h2> <p>
Das <b>Tag</b> für kursiven
Text ist i. <br> </p> <h2>Hinweis</h2> <p>Auf <u>Unterstreichungen</u> sollte man verzichten.</p> <p>Man kann
<b>fett</b> und <i>kursiv</i> auch
verschachteln zu <i><b>fettem und
kursivem Text.</i></p>