In HTML eine Linie einfügen

PDF download PDF herunterladen
unter Mitarbeit von wikiHow Staff

PDF download PDF herunterladen

Dieses wikiHow bringt dir bei, wie du in HTML eine waagerechte Linie kreierst. Eine waagerechte Linie kann benutzt werden, um Inhalte auf deiner Webseite voneinander zu trennen. Der Code, um eine Linie zu erstellen, ist ziemlich simpel. Du kannst jedoch in HTML 4.01 In-line-Code hinzufügen, um deine Linie zu stylen. In HTML 5 musst du CSS benutzen, um deine Linie zu stylen. [1]

Methode 1
Methode 1 von 2:

Mit CSS/HTML5

PDF download PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1b\/658928-9-1.jpg\/v4-460px-658928-9-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1b\/658928-9-1.jpg\/v4-728px-658928-9-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    HTML-Dokumente können mit einem Textverarbeitungsprogramm wie etwa Notepad bearbeitet werden. Du kannst auch ein Code-Bearbeitungsprogramm verwenden, wie etwa Adobe Dreamweaver. Wende die folgen Schritte an, um ein HTML-Dokument im Programm deiner Wahl zu öffnen:
    • Öffne Notepad oder ein Text-/Code-Bearbeitungsprogramm deiner Wahl.
    • Klicke das Datei -Menü an.
    • Klicke Öffnen an.
    • Wähle eine HTML-Datei aus.
    • Klicke Öffnen an.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/04\/658928-10-1.jpg\/v4-460px-658928-10-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/04\/658928-10-1.jpg\/v4-728px-658928-10-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Falls dein HTML-Dokument noch keinen Kopf hat, wende die folgenden Schritte an, um einen hinzuzufügen. Der Kopf kommt vor das "<html>"-Tag und vor das "<body>"-Tag.
    • Gib oben im Dokument <head> ein.
    • Drücke zweimal Eingabe , um zwei neue Zeilen zu erstellen.
    • Gib </head> ein, um den Kopf zu schließen.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/ca\/658928-11-1.jpg\/v4-460px-658928-11-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/ca\/658928-11-1.jpg\/v4-728px-658928-11-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Das Stil-Tag kommt zwischen die beiden Kopf-Tags. Das kreiert einen Platz, an dem du den CSS-Code einsetzen kannst, um dein HTML zu stylen.
    • Alternativ dazu kannst du ein externes Stil-Blatt verwenden.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1a\/658928-12-1.jpg\/v4-460px-658928-12-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1a\/658928-12-1.jpg\/v4-728px-658928-12-1.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Das ist das CSS-Tag, das deine waagerechte Linie stylt. Füge dieses nach dem Stil-Tag in deinem Kopf hinzu, oder in deiner externen CSS-Datei.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/70\/658928-13-1.jpg\/v4-460px-658928-13-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/70\/658928-13-1.jpg\/v4-728px-658928-13-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Diese kommen hinter das "hr {"-Tag. Es gibt viele Methoden, wie du eine waagerechte Linie stylen kannst. Die Folgenden sind ein paar Beispiele.
    • Gib width: ##px; ein, um die Linienbreite festzulegen. Ersetze ## durch die Anzahl der Pixel, welche die Linie breit ist. Du kannst anstelle von Pixeln auch einen Prozentsatz (%) verwenden.
    • Gib height: ##px; ein, um die Liniendicke festzulegen. Ersetze ## durch die Anzahl der Pixel, welche die Linie dick ist.
    • Gib background-color: ##; ein, um die Farbe der Linie festzulegen. Ersetze ## durch den Namen einer Farbe oder ein Pfund (#), gefolgt von einem Hexadezimal-Farbcode.
    • Gib margin-right: ##px; ein, um die Anzahl der Pixel von der rechten Kante aus festzulegen. Ersetze ## durch die Zahl oder Pixel oder “auto”. Gib “auto” ein, um die Linie rechts oder mittig auszurichten.
    • Gib margin-left: ##px; ein, um die Anzahl der Pixel von der linken Kante aus festzulegen. Ersetze ## durch die Zahl oder Pixel oder “auto”. Gib “auto” ein, um die Linie rechts oder mittig auszurichten.
    • Gib margin-top: ##px; ein, um einen oberen Rand für die Linie festzulegen. Ersetze ## durch die Anzahl oder Pixel, die der Seitenrand dick ist.
    • Gib margin-bottom: ##px; ein, um einen unteren Seitenrand für die Linie festzulegen. Ersetze ## durch die Anzahl der Pixel, die der Seitenrand dick ist.
    • Gib border-width: ##px; ein, um einen Rand um die Linie herum zu kreieren (optional). Ersetze ## durch die Anzahl der Pixel, die die Umrandung dick ist.
    • Gib border-color: ##; ein, um die Randfarbe festzulegen (optional). Ersetze ## durch den Namen einer Farbe, oder ein Pfundzeichen (#), gefolgt von einem Hexazedimal-Farbcode.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/11\/658928-14-1.jpg\/v4-460px-658928-14-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/11\/658928-14-1.jpg\/v4-728px-658928-14-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Das schließt deine Stileinstellungen für dein <hr>-Tag.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/23\/658928-15-1.jpg\/v4-460px-658928-15-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/23\/658928-15-1.jpg\/v4-728px-658928-15-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Das fügt eine waagerechte Linie zu deinem HTML-Dokument hinzu. Deine CSS-Stil-Einstellungen werden jedes Mal angewendet, wenn du das <hr>-Tag in deinem HTML benutzt. [2] Dein Code sollte so aussehen: 
       <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 type 
 = 
 "text/css" 
 > 
 hr 
 { 
 width 
 : 
 50 
 % 
 ; 
 height 
 : 
 20 
 px 
 ; 
 background-color 
 : 
 red 
 ; 
 margin-right 
 : 
 auto 
 ; 
 margin-left 
 : 
 auto 
 ; 
 margin-top 
 : 
 5 
 px 
 ; 
 margin-bottom 
 : 
 5 
 px 
 ; 
 border-width 
 : 
 2 
 px 
 ; 
 border-color 
 : 
 green 
 ; 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
Dieses ist eine Überschrift </ 
 h1 
 > 
 < 
 hr 
 > 
 < 
 p1 
 > 
Dieses ist ein Absatztext, der durch eine waagerechte Linie abgeteilt ist. </ 
 p1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    Werbeanzeige
Methode 2
Methode 2 von 2:

Mit HTML 4.01

PDF download PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/18\/658928-1-1.jpg\/v4-460px-658928-1-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/18\/658928-1-1.jpg\/v4-728px-658928-1-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    HTML-Dokumente können mit einem Textverarbeitungsprogramm wie etwa Notepad bearbeitet werden. Du kannst auch ein Code-Bearbeitungsprogramm verwenden, wie etwa Adobe Dreamweaver. Wende die folgen Schritte an, um ein HTML-Dokument im Programm deiner Wahl zu öffnen:
    • Öffne Notepad oder ein Text-/Code-Bearbeitungsprogramm deiner Wahl.
    • Klicke das Datei -Menü an.
    • Klicke Öffnen an.
    • Wähle eine HTML-Datei aus.
    • Klicke Öffnen an.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cf\/658928-2-1.jpg\/v4-460px-658928-2-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cf\/658928-2-1.jpg\/v4-728px-658928-2-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Scrolle nach unten, bis du die Zeile findest, über welcher du die Linie einfügen möchtest. Klicke dann auf der äußerst linken Seite, um den Cursor direkt vor den Anfang der Zeile zu setzen.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0b\/658928-3-1.jpg\/v4-460px-658928-3-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0b\/658928-3-1.jpg\/v4-728px-658928-3-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Drücke zweimal Eingabe , um den Text, über welchem du die Linie eingeben möchtest, nach unten zu verschieben. Bewege den Cursor dann zu der leeren Stelle hoch.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/73\/658928-4-1.jpg\/v4-460px-658928-4-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/73\/658928-4-1.jpg\/v4-728px-658928-4-1.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Gib in den Freiraum, bevor die Zeile beginnt, <hr> ein. Das <hr> -Tag ist dafür verantwortlich, eine waagerechte Linie quer über die gesamte Seite zu kreieren.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c0\/658928-5-1.jpg\/v4-460px-658928-5-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c0\/658928-5-1.jpg\/v4-728px-658928-5-1.jpg","smallWidth":460,"smallHeight":341,"bigWidth":728,"bigHeight":540,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Drücke dazu Eingabe . An dieser Stelle sollte das <hr> -Tag auf seiner eigenen Zeile stehen.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f3\/658928-6-1.jpg\/v4-460px-658928-6-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f3\/658928-6-1.jpg\/v4-728px-658928-6-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Du kannst Eigenschaften zu einer waagerechten Linie hinzufügen, wie etwa Länge, Breite, Farbe und Ausrichtung. Verwende die folgenden Codes nach dem „hr“ in der Codeklammer. Du kannst mehr als eine Eigenschaft in einer Klammer hinzufügen, indem du sie mit einer Leerstelle voneinander trennst. [3]
    • Gib <hr size="#"> ein, um die Dicke der Linie zu verändern. Ersetze # durch die Dickezahl (z.B. size="10").
    • Gib <hr width="#"> ein, um die Linienbreite zu verändern. Ersetze # durch die Pixelzahl der Breite oder den Prozentsatz der Seitenbreite (z.B. width="200" oder width="75%").
    • Gib <hr color="#"> ein, um die Farbe der Linie zu ändern. Ersetze # durch den Namen einer Farbe oder einen Hexadezimalcode (z.B. color="red" or color="#FF0000")
    • Gib <hr align="#"> ein, um die Linie auszurichten. Ersetze # durch "right", "left" oder "center" (z.B. <hr width="50%" align="center"> ).
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/be\/658928-7-1.jpg\/v4-460px-658928-7-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/be\/658928-7-1.jpg\/v4-728px-658928-7-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Um einen Text als HTML-Dokument zu speichern, musst du die Dateiendung (.txt, .docx) durch „.html“ ersetzen. Wende die folgenden Schritte an, um dein HTML-Dokument zu speichern:
    • Klicke das Datei -Menü an.
    • Klicke Speichern als an.
    • Gib neben “Dateiname” einen Namen für die Datei ein.
    • Gib am Ende des Dateinamens .html ein.
    • Klicke Speichern an.
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/68\/658928-8-1.jpg\/v4-460px-658928-8-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/68\/658928-8-1.jpg\/v4-728px-658928-8-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Um deine HTML-Datei zu testen, klicke sie mit der rechten Maustaste an und wähle Öffnen mit aus. Wähle dann einen Webbrowser aus. Es sollte eine durchgehende Linie erscheinen, wo du das „hr“-Tag platzierst. Dein HTML-Code sollte so aussehen: [4] 
       <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
Dies ist eine Überschrift. </ 
 h1 
 > 
 < 
 hr 
 size 
 = 
 "6" 
 width 
 = 
 "50%" 
 align 
 = 
 "left" 
 color 
 = 
 "green" 
 > 
 < 
 p1 
 > 
Dieses ist Absatztext, der durch eine Linie von der Überschrift getrennt ist. </ 
 p1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    Werbeanzeige

Verwandte wikiHows

Kommentare in HTML Code einfügen
Ein Hintergrund Bild in HTML einfügen
HTM Dateien öffnen
Einen E mail Link in HTML erstellen
Eine einfache Webseite mit HTML gestalten
HTML Dateien bearbeiten
Die Farbe einer Schaltfläche in HTML ändern
Bilder mit HTML einfügen
Text in HTML blinken lassen
Eine Webseite mit einfachem HTML hacken
Ein Dropdown Menü mit HTML und CSS erstellen
Text in HTML zentrieren
Einen Download Knopf auf einer Webseite erstellen
Mit HTML innerhalb von einer Seite verlinken
Werbeanzeige

Referenzen

  1. ↑ https://www.w3schools.com/tags/tag_hr.asp
  2. ↑ https://love2dev.com/blog/html-horizontal-line/
  3. ↑ http://www.myhtmltutorials.com/line.html
  4. ↑ https://www.w3schools.com/TAGS/tag_hr.asp

Über dieses wikiHow

In anderen Sprachen
Diese Seite wurde bisher 12.319 mal abgerufen.

War dieser Artikel hilfreich?

Werbeanzeige