Um zwei Sektionen optisch voneinander abzutrennen, könnte sich z.B. eine Trennlinie gut eignen. Deshalb erfährst du hier, wie du ganz einfach mit HTML eine horizontale Linie erzeugen kannst.
So machst du in HTML eine horizontale Linie
Für die Trennlinie benötigst du in HTML lediglich folgendes HTML-Element: Der HTML-Code für ein Leerzeichen ist folgender: <hr>
Das „hr“ steht dabei für „horizontal ruler“. Das <hr> kann im Grunde überall im <body> eingebaut werden und benötigt kein schließendes Element.
Beispiel:
Dies ist ein Text oberhalb der Trennlinie
Der Text unterhalb
<p>Dies ist ein Text oberhalb der Trennlinie</p>
<hr>
<p>Der Text unterhalb</p>Das Aussehen der horizontalen Linie ändern
Natürlich kann das Aussehen der HTML horizontalen Linie per CSSCSS (Cascading Style Sheets) heißt auf deutsch „Mehrstufige Formatvorlagen“. CSS ist eine Formatierungssprache für HTML-, SVG- und XML-Dokumente. Genutzt wird CSS um den Inhalt einer Webseite vom Design zu trennen! Weitere Infos dazu gibt es hier. mehr erfahren geändert werden. Dazu verwenden wir, wie bei jedem anderen HTML-Element auch, das style-Attribut, um den CSS-Code zu definieren.
Die HTML-Attribute size, color, width, align und noshade sollten nicht mehr verwendet werden, weil sie veraltet sind und nicht mehr in HTML5 unterstützt werden. Stattdessen sollte das Aussehen per CSSCSS (Cascading Style Sheets) heißt auf deutsch „Mehrstufige Formatvorlagen“. CSS ist eine Formatierungssprache für HTML-, SVG- und XML-Dokumente. Genutzt wird CSS um den Inhalt einer Webseite vom Design zu trennen! Weitere Infos dazu gibt es hier. mehr erfahren definiert werden.
Farbe ändern
Die Farbe der Linie kann mit der CSS-Anweisung border-color geändert werden
Beispiel 1:
<hr style="border-color: green;">Beispiel 2:
<hr style="border-color: #ff0000;">Höhe ändern
Die Höhe der Linie kann mit der CSS-Anweisung border-width geändert werden
Beispiel 1:
<hr style="border-width: 5px;">
Beispiel 2:
<hr style="border-width: 20px;">
Breite ändern
Die Breite der Linie kann mit der CSS-Anweisung width geändert werden.
Beispiel 1:
<hr style="width: 50px;">Beispiel 2:
<hr style="border-width: 80%;">Sie sehen gerade einen Platzhalterinhalt von Facebook. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenSie sehen gerade einen Platzhalterinhalt von Instagram. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenDieser Beitrag ist auch verfügbar auf: 
English (Englisch)
Schreibe einen Kommentar