HTML/CSS-Tutorial (Fett- und Kursiv-Schrift)

HTML/CSS-Tutorial Inhalt »

html-fett-kursiv

Im vorigen Artikel dieses Tutorials wurden bereits einige HTML-Tags erklärt, z.B. <head>...</head> für den Head-Bereich, <body>...</body> für den Body-Bereich, <title>...</title> für den Titel und <p>...</p> für Textabsätze, wobei der einzige Textabsatz nur aus einer einzelnen Textzeile “Dies ist ein Beispieltext.” bestand. In diesem Artikel geht es nun um die einfachste Form, einen Text zu gestalten, die darin besteht, Fett- und Kursiv-Schrift einzufügen.

Im weiteren Verlauf dieses Tutorials wird ein sogenannter “Blindtext” verwendet, an dem die Funktionsweise der einzelnen HTML-Tags gezeigt werden kann. Es handelt sich dabei um den wohl bekanntesten Blindtext im Internet, "Lorem ipsum", der seinen Ursprung im 16. Jahrhundert haben soll und der in einer pseudo-lateinischen Sprache verfasst wurde. Der Text "Lorem ipsum" wird auch als Dummy-, Füll- oder Platzhaltertext bezeichnet und ist absichtlich unverständlich, damit der Betrachter nicht durch den Inhalt abgelenkt wird. Er dient lediglich zu Vorführungs- und Layoutzwecken.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,...

Fett-Schrift

Um Abschnitte eines Textes in Fettschrift erscheinen zu lassen, sei es nun ein einzelner Buchstabe, ein einzelnes Wort, ein Satz oder der ganze Absatz, wird der betreffende Bereich mit den HTML-Tags <strong>...</strong> markiert.

Im folgenden Absatz sind einige Abschnitte in Fett-Schrift dargestellt:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

In HTML sieht der Absatz dann so aus:

<p>Lorem ipsum dolor sit amet, <strong>consectetuer</strong> adipiscing 
elit. Aenean commodo ligula eget dolor. <strong>Aenean massa.</strong> Cum 
sociis natoque penatibus et magnis dis <strong>parturient montes, nascetur 
ridiculus</strong> mus.</p>

Zunächst einmal wird in HTML der gesammte Text-Absatz mit <p>...</p> "umklammert", wobei <p> das Anfangs-Tag ist und zeigt, wo der Absatz beginnt und </p> (mit Schrägstrich!) das End-Tag ist und zeigt, wo der Absatz endet.

Immer dort, wo im Absatz ein Abschnitt in Fett-Schrift dargestellt werden soll, zeigt <strong> (Anfangs-Tag), wo die Fett-Schrift für diesen Abschnitt beginnt und </strong> (End-Tag mit Schrägstrich!), wo die Fett-Schrift endet.

html-fett-kursiv02

(Mit <strong>...</strong> wird der Abschnitt "umklammert", der in Fett-Schrift erscheinen soll, hier symbolhaft durch die beiden geschweiften Klammern (blau) dargestellt.)

Eingefügt in das "HTML-Grundgerüst", das im vorigen Artikel dieses Tutorials erklärt wurde, sieht das dann so aus:

<!doctype html>
<html lang="de">

    <head>
        <title>...</title>
    </head>

    <body>
        <p>Lorem ipsum dolor sit amet, <strong>consectetuer</strong> adipiscing elit. Aenean commodo ligula eget 
        dolor. <strong>Aenean massa.</strong> Cum sociis natoque penatibus et magnis dis <strong>parturient 
        montes, nascetur ridiculus</strong> mus.</p>
    </body>

</html>

Kursiv-Schrift

Ein Abschnitt, der in Kursiv-Schrift erscheinen soll, wird mit den HTML-Tags <em>...</em> markiert.

Im folgenden Absatz sind einige Abschnitte in Kursiv-Schrift dargestellt, z.B. das Wort "consectetuer":

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

In HTML sieht der Absatz dann so aus:

<p>Lorem ipsum dolor sit amet, <em>consectetuer</em> adipiscing elit. 
Aenean commodo ligula eget dolor. <em>Aenean massa.</em> Cum sociis 
natoque penatibus et magnis dis <em>parturient montes, nascetur 
ridiculus</em> mus.</p>

Auch hier gilt, wie schon im Beispiel "Fett-Schrift": Dort wo im Absatz die Kursiv-Schrift beginnen soll, wird ein Anfangs-Tag eingefügt (in diesem Fall <em>) und an der Stelle, an der die Kursiv-Schrift enden soll, ein End-Tag (in diesem Fall </em> mit Schrägstrich!).

html-fett-kursiv01

(Mit <em>...</em> wird der Abschnitt "umklammert", der in Kursiv-Schrift erscheinen soll, hier symbolhaft durch die beiden geschweiften Klammern (rot) dargestellt.)

In das folgende HTML-Grundgerüst wurden innerhalb des "Body-Bereichs" zwei Absätze eingefügt, zum einen der Absatz aus dem Beispiel "Fett-Schrift" und zum anderen der Absatz aus dem Beispiel "Kursiv-Schrift":

<!doctype html>
<html lang="de">

    <head>
        <title>...</title>
    </head>

    <body>
        <p>Lorem ipsum dolor sit amet, <strong>consectetuer</strong> adipiscing elit. Aenean commodo ligula eget 
        dolor. <strong>Aenean massa.</strong> Cum sociis natoque penatibus et magnis dis <strong>parturient 
        montes, nascetur ridiculus</strong> mus.</p>
      
        <p>Lorem ipsum dolor sit amet, <em>consectetuer</em> adipiscing elit. Aenean commodo ligula eget 
        dolor. <em>Aenean massa.</em> Cum sociis natoque penatibus et magnis dis <em>parturient montes, 
        nascetur ridiculus</em> mus.</p>
    </body>

</html>

Hinweis: Sämtliche Einrückungen und Leerzeilen dienen nur der besseren Lesbarkeit und gehören zum guten Programmierstil. Sie haben jedoch keinerlei Einfluss auf die spätere Darstellung der Webseite im Browser. So könnte der oben gezeigte "Quellcode" des HTML-Grundgerüstes mit den beiden eingefügten Beispiel-Absätzen auch folgendermaßen geschrieben werden:

<!doctype html>
<html lang="de"><head><title>...</title></head>
<body><p>Lorem ipsum dolor sit amet, <strong>consectetuer</strong> adipiscing elit. Aenean commodo ligula 
eget dolor. <strong>Aenean massa.</strong> Cum sociis natoque penatibus et magnis dis <strong>parturient montes, nascetur ridiculus</strong> mus.</p>
<p>Lorem ipsum dolor sit amet, <em>consectetuer</em> adipiscing elit. Aenean commodo ligula eget dolor. <em>Aenean massa.</em> Cum sociis natoque penatibus et magnis dis <em>parturient montes, nascetur ridiculus</em> mus.</p>
</body></html>

Der ganze Quellcode könnte sogar noch unübersichtlicher in einer einzelnen langen Zeile geschrieben werden. In allen Fällen würde es im Browser jedoch immer gleich aussehen.

Fett- und Kursiv-Schrift kombiniert

Fett- und Kursiv-Schrift können auch kombiniert werden, sodass ein Abschnitt sowohl in Fett-Schrift, als auch in Kursiv-Schrift erscheint.

Dazu wird der Abschnitt mit <strong><em>...</em></strong> markiert. Das gleiche Ergebnis wird durch <em><strong>...</strong></em> erzielt.

html-fett-kursiv03

(symbolhafte Darstellung)

Der folgende Absatz enthält zwei Abschniite, die sowohl in Fett-Schrift, als auch in Kursiv-Schrift dargestellt sind:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

In HTML sieht der Absatz dann so aus:

<p>Lorem ipsum dolor sit amet, <strong><em>consectetuer 
adipiscing</em></strong> elit. Aenean commodo ligula eget dolor. 
Aenean massa. Cum sociis natoque penatibus et magnis dis 
<strong><em>parturient montes, nascetur ridiculus</em></strong> mus.</p>

In das folgende HTML-Grundgerüst wurden innerhalb des “Body-Bereichs” alle drei Absätze aus den vorigen Beispielen eingefügt; für die Fett-Schrift, für die Kursiv-Schrift, für die Kombination aus beiden:

<!doctype html>
<html lang="de">

<head>
<title>...</title>
</head>

<body>
<p>Lorem ipsum dolor sit amet, <strong>consectetuer</strong> adipiscing elit. Aenean commodo ligula eget dolor. <strong>Aenean massa.</strong> Cum sociis natoque penatibus et magnis dis <strong>parturient montes, nascetur ridiculus</strong> mus.</p>
<p>Lorem ipsum dolor sit amet, <em>consectetuer</em> adipiscing elit. Aenean commodo ligula eget dolor. <em>Aenean massa.</em> Cum sociis natoque penatibus et magnis dis <em>parturient montes, nascetur ridiculus</em> mus.</p>
<p>Lorem ipsum dolor sit amet, <strong><em>consectetuer adipiscing</em></strong> elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis <strong><em>parturient montes, nascetur ridiculus</em></strong> mus.</p>
</body>

</html>

Dieser Quellcode ist zwar ohne Einrückungen und mit nur wenigen Leerzeilen geschrieben, hat aber dafür den Vorteil, dass die Datei dadurch kleiner wird, d.h. sie hat weniger Byte und kann schneller übertragen werden.

Hinweis: Die folgenden Varianten sind nicht erlaubt,...

html-fett-kursiv04


...da es sich hier um unzulässig, bzw. falsch "verschachtelte" HTML-Tags handelt!

Zum Vergleich: ...

html-fett-kursiv07

(richtig "verschachtelt" | falsch "verschachtelt")

...weitere (zulässige) Varianten der "Verschachtelung" sind:

html-fett-kursiv05

oder...

html-fett-kursiv06

« Eine einfache HTML-Datei

Überschriften »


 

Galerien / Präsentationen...

city001-sidebar

link-icon002 Galerien-Übersicht...

Kategorien

Alle Artikel

(Inhaltsverzeichnis)

link-icon002 alphabetisch geordnet...

link-icon002 nach Datum geordnet...

soziale Netzwerke...

"Cogniclip" ist auch auf folgenden sozialen Netzwerken vertreten:

Cogniclip auf Twitter Cogniclip auf Google+
 

Per RSS Beiträge abonnieren:

RSS-Feed von Cogniclip
 

Kalender

Dezember 2017
M D M D F S S
 123
45678910
11121314151617
18192021222324
25262728293031
« Feb