Einfache Html Tags

Es gibt eine Reihe von einfachen Tags, mit denen Sie Ihre HTML-Seite formatieren und den Textfluss steuern können.

4.1 Überschriften

Mit Hilfe von Überschriften legen Sie fest, von welchem Thema die Seite oder die folgenden Absätze handeln. Insgesamt gibt es sechs unterschiedliche Überschriften:

<h1>...</h1> 

bis

<h6>...</h6>

. Die Überschriftengröße nimmt mit jedem höheren Wert ab.

<html>
<head>
<title>Meine erste HTML-Seite</title>
</head>
<body>

<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>
<h4>Überschrift 4</h4>
<h5>Überschrift 5</h5>
<h6>Überschrift 6</h6>

</body>
</html>

4.2 Absätze und Zeilenumbrüche

Die Ausgabe von einfachem Text können Sie mit Hilfe von Absätzen und Zeilenumbrüchen kontrollieren.

Der Tag

<p>...</p> 

definiert einen Absatz, mit dem Standalone-Tag

<br>

fügen Sie einen einfachen Zeilenumbruch ein.

<html>
<head>
<title>Meine erste HTML-Seite</title>
</head>
<body>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ac mauris. Donec volutpat laoreet libero. Donec elementum magna eget tellus faucibus mattis. Praesent eu mi. Nunc nec eros. Curabitur a lorem nec diam cursus vehicula. In hac habitasse platea dictumst. Pellentesque ante odio, aliquet a, molestie ac, ornare a, nulla. Nulla ornare nulla vitae nunc.Fusce sollicitudin erat eu purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed a nisl. Duis vitae metus nec nunc placerat pretium. Cras dapibus varius eros. Nam a eros. Sed ornare cursus erat. Donec mollis, augue eget euismod dapibus, quam mauris feugiat lectus, ut iaculis nisl mi sit amet metus. Donec felis. Nunc egestas lacus sed arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ac mauris. Donec volutpat laoreet libero. Donec elementum magna eget tellus faucibus mattis. Praesent eu mi. Nunc nec eros. Curabitur a lorem nec diam cursus vehicula. In hac habitasse platea dictumst. Pellentesque ante odio, aliquet a, molestie ac, ornare a, nulla. Nulla ornare nulla vitae nunc.<br>Fusce sollicitudin erat eu purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed a nisl. Duis vitae metus nec nunc placerat pretium. Cras dapibus varius eros. Nam a eros. Sed ornare cursus erat.<br>Donec mollis, augue eget euismod dapibus, quam mauris feugiat lectus, ut iaculis nisl mi sit amet metus. Donec felis. Nunc egestas lacus sed arcu.</p>

</body>
</html>

4.3 Textformatierungen

Um bestimmte Textpassagen hervorzuheben, können Sie diese unterschiedlich formatieren:

<b>...</b>

– Der Text wird mit diesem Tag fett gedruckt.

<i>...</i> 

– Der Text wird mit diesem Tag kursiv gedruckt.

<u>...</u> 

– Der Text wird mit diesem Tag unterstrichen.

<html>
<head>
<title>Meine erste HTML-Seite</title>
</head>
<body>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <b>Fusce ac</b> mauris. Donec volutpat laoreet libero. Donec elementum magna eget tellus faucibus mattis. Praesent eu mi. Nunc nec eros. Curabitur a lorem nec diam cursus vehicula. In hac habitasse platea dictumst. Pellentesque ante odio, aliquet a, molestie ac, ornare a, nulla. Nulla ornare nulla vitae nunc.Fusce sollicitudin erat eu purus. <i>Pellentesque habitant</i> morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed a nisl. Duis vitae metus nec nunc placerat pretium. Cras dapibus varius eros. <u>Nam a eros.</u> Sed ornare cursus erat. Donec mollis, augue eget euismod dapibus, quam mauris feugiat lectus, ut iaculis nisl mi sit amet metus. Donec felis. Nunc egestas lacus sed arcu.</p>

</body>
</html>

4.4 Ausrichtung

Viele Tags können Sie mit einem Attribut zur Ausrichtung versehen. Notieren Sie dazu im öffnenden Tag dazu das Attribut align=”…”. Als Werte sind “left” (links – der Standardwert), “center” (zentriert), “right” (rechts) oder “justify” (Blocksatz) möglich.

<html>
<head>
<title>Meine erste HTML-Seite</title>
</head>
<body>

<h1 align="center">Überschrift</h1>

<p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ac mauris. Donec volutpat laoreet libero. Donec elementum magna eget tellus faucibus mattis. Praesent eu mi. Nunc nec eros. Curabitur a lorem nec diam cursus vehicula. In hac habitasse platea dictumst. Pellentesque ante odio, aliquet a, molestie ac, ornare a, nulla. Nulla ornare nulla vitae nunc. Fusce sollicitudin erat eu purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed a nisl. Duis vitae metus nec nunc placerat pretium. Cras dapibus varius eros. Nam a eros. Sed ornare cursus erat. Donec mollis, augue eget euismod dapibus, quam mauris feugiat lectus, ut iaculis nisl mi sit amet metus. Donec felis. Nunc egestas lacus sed arcu.</p>

</body>
</html>