HTML - Formatierung
Wenn Sie ein Textverarbeitungsprogramm verwenden, müssen Sie mit der Fähigkeit vertraut sein, Text fett, kursiv oder unterstrichen zu machen. Dies sind nur drei der zehn verfügbaren Optionen, die angeben, wie Text in HTML und XHTML angezeigt werden kann.
Fettgedruckter Text
Alles, was darin erscheint <b>...</b> Element, wird wie unten gezeigt fett dargestellt -
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Kursiver Text
Alles, was darin erscheint <i>...</i> Element wird wie unten gezeigt kursiv dargestellt -
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses an <i>italicized</i> typeface.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Unterstrichener Text
Alles, was darin erscheint <u>...</u> Element, wird mit Unterstreichung angezeigt, wie unten gezeigt -
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses an <u>underlined</u> typeface.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Strike Text
Alles, was darin erscheint <strike>...</strike> Das Element wird durchgestrichen angezeigt. Dies ist eine dünne Linie durch den Text, wie unten gezeigt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Monospaced Schriftart
Der Inhalt von a <tt>...</tt>Element ist in monospaced Schrift geschrieben. Die meisten Schriftarten werden als Schriftarten mit variabler Breite bezeichnet, da unterschiedliche Buchstaben unterschiedliche Breiten haben (z. B. ist der Buchstabe 'm' breiter als der Buchstabe 'i'). In einer monospaced Schriftart hat jedoch jeder Buchstabe die gleiche Breite.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Hochgestellter Text
Der Inhalt von a <sup>...</sup>Element ist hochgestellt geschrieben; Die verwendete Schriftgröße entspricht der Größe der sie umgebenden Zeichen, wird jedoch eine halbe Zeichenhöhe über den anderen Zeichen angezeigt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Tiefgestellter Text
Der Inhalt von a <sub>...</sub>Element ist in Index geschrieben; Die verwendete Schriftgröße entspricht der der sie umgebenden Zeichen, wird jedoch die halbe Höhe eines Zeichens unter den anderen Zeichen angezeigt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Eingefügter Text
Alles, was darin erscheint <ins>...</ins> Element wird als eingefügter Text angezeigt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Gelöschter Text
Alles, was darin erscheint <del>...</del> Element, wird als gelöschter Text angezeigt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Größerer Text
Der Inhalt der <big>...</big> Das Element wird eine Schriftgröße größer angezeigt als der Rest des Textes, der es umgibt (siehe unten).
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Kleinerer Text
Der Inhalt der <small>...</small> Das Element wird eine Schriftgröße kleiner angezeigt als der Rest des Textes, der es umgibt (siehe unten).
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Inhalte gruppieren
Das <div> und <span> Mit Elementen können Sie mehrere Elemente gruppieren, um Abschnitte oder Unterabschnitte einer Seite zu erstellen.
Beispielsweise möchten Sie möglicherweise alle Fußnoten auf einer Seite in einem <div> -Element platzieren, um anzuzeigen, dass sich alle Elemente in diesem <div> -Element auf die Fußnoten beziehen. Sie können diesem <div> -Element dann einen Stil hinzufügen, damit sie mithilfe eines speziellen Satzes von Stilregeln angezeigt werden.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>
<div id = "content" align = "left" >
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>Dies führt zu folgendem Ergebnis:
Das <span> -Element kann dagegen nur zum Gruppieren von Inline-Elementen verwendet werden. Wenn Sie also einen Teil eines Satzes oder Absatzes haben, den Sie zusammenfassen möchten, können Sie das Element <span> wie folgt verwenden.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style = "color:green">span tag</span>
and the <span style = "color:red">div tag</span> alongwith CSS</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Diese Tags werden häufig mit CSS verwendet, damit Sie einem Abschnitt einer Seite einen Stil hinzufügen können.