Inhalt

• Schritte
• Methode 1 von 2: Arbeiten in HTML 4.01
• Methode 2 von 2: Arbeiten in CSS / HTML5

In diesem Artikel erfahren Sie, wie Sie in HTML eine horizontale Linie hinzufügen. Die horizontale Linie kann verwendet werden, um Inhalte auf der Site zu trennen. Der Code zum Erstellen der Zeile ist recht einfach. In HTML 4.01 ist es jedoch möglich, das Design einer Zeile mit internen Befehlen zu ändern. In HTML5 müssen Sie CSS verwenden, um die Linie zu gestalten.

Schritte

Methode 1 von 2: Arbeiten in HTML 4.01

1. 1 Öffnen Sie ein vorhandenes oder erstellen Sie ein neues HTML-Dokument. HTML-Dokumente können mit einem Texteditor wie Notepad oder einem speziellen Codeeditor wie Adobe Dreamweaver bearbeitet werden. Gehen Sie folgendermaßen vor, um ein HTML-Dokument in einem Programm Ihrer Wahl zu öffnen:
   • Öffnen Sie Notepad oder einen anderen Text- / Code-Editor.
   • Öffne das Menü Datei.
   • Klicke auf Offen.
   • Wählen Sie die HTML-Datei aus.
   • Klicke auf Offen
2. 2 Wählen Sie die Position aus, an der Sie die Linie einfügen möchten. Scrollen Sie nach unten, bis Sie die Zeile finden, über der die Zeile erscheinen soll, und bewegen Sie den Cursor dann direkt an den Anfang dieser Zeile, indem Sie ganz links auf diese Zeile klicken.
3. 3 Fügen Sie eine leere Zeile hinzu. Doppeltippen ↵ Enter, um den Text, vor dem Sie eine Zeile einfügen möchten, nach unten zu verschieben, und setzen Sie dann den Cursor auf eine leere Zeile.
4. 4 hr>-Tag hinzufügen. Eintreten Std> in die Leerstelle am Zeilenanfang. Etikett Std> ermöglicht es Ihnen, eine horizontale Linie über die gesamte Seite zu ziehen.
5. 5 Bewegen Sie den Cursor nach dem Tag "hr" in eine neue Zeile, indem Sie drücken ↵ Enter. Jetzt das Etikett Std> sollte in einer separaten Zeile stehen.
6. 6 Fügen Sie der horizontalen Linie Attribute hinzu (optional). Fügen Sie Attribute wie Länge, Dicke, Farbe und Ausrichtung hinzu. Schließen Sie sie unmittelbar nach dem "hr" in geschweifte Klammern. Um mehrere Attribute hinzuzufügen, trennen Sie sie durch ein Leerzeichen.
   • Eintreten Stundengröße = "#">um die Linienstärke zu ändern. Ersetzen Sie "#" durch einen numerischen Dickenwert (z. B. size = "10").
   • Eintreten hr Breite = "#">um die Strichstärke zu ändern. Ersetzen Sie "#" durch die Anzahl der Pixel oder einen Prozentsatz der Seitenbreite (z. B. width = "200" oder width = "75%").
   • Eintreten hr Farbe = "#">um die Linienfarbe zu ändern. Ersetzen Sie "#" durch den Namen der Farbe oder ihren Hexadezimalcode (z. B. color = "red" oder color = "# FF0000").
   • Eintreten hr align = "#">um die Linie auszurichten. Ersetzen Sie "#" durch "right" (rechts), "left" (links) oder "center" (center) (z. B. hr Breite = "50%" ausrichten = "Mitte">).
7. 7 Speichern Sie die HTML-Datei. Um eine Textdatei als HTML-Dokument zu speichern, müssen Sie die Dateierweiterung (.txt, .docx) in ".html" ändern. Befolgen Sie diese Schritte, um Ihr HTML-Dokument zu speichern:
   • Öffne das Menü Datei.
   • Klicke auf Speichern als.
   • Geben Sie im Feld Dateiname einen Namen für die Datei ein.
   • Hinzufügen .html nach dem Dateinamen.
   • Klicke auf Speichern.
8. 8 Überprüfen Sie Ihr HTML-Dokument. Um die HTML-Datei zu überprüfen, klicken Sie mit der rechten Maustaste darauf und wählen Sie Öffnen mit. Wählen Sie dann Ihren Webbrowser aus. An der Stelle, an der Sie das Tag "hr" eingefügt haben, sollte eine durchgezogene Linie erscheinen. Der HTML-Code sieht in etwa so aus:

   ! DOCTYPE html> html> body> h1> Heading / h1> hr size = "6" width = "50%" align = "left" color = "green"> p1> Diese Zeile sollte durch eine Linie von der Überschrift getrennt werden . / P1 > / Körper> / html>

Methode 2 von 2: Arbeiten in CSS / HTML5

1. 1 Öffnen Sie ein vorhandenes oder erstellen Sie ein neues HTML-Dokument. HTML-Dokumente können mit einem Texteditor wie Notepad oder einem speziellen Codeeditor wie Adobe Dreamweaver bearbeitet werden. Gehen Sie folgendermaßen vor, um ein HTML-Dokument in einem Programm Ihrer Wahl zu öffnen:
   • Öffnen Sie Notepad oder einen anderen Text- / Code-Editor.
   • Öffne das Menü Datei.
   • Klicke auf Offen.
   • Wählen Sie die HTML-Datei aus.
   • Klicke auf Offen
2. 2 Fügen Sie Ihrem HTML-Dokument einen Titel hinzu. Wenn Ihr HTML-Dokument noch keine Überschrift enthält, führen Sie diese Schritte aus, um eine hinzuzufügen. Die Überschrift muss nach dem html>-Tag und vor dem body>-Tag stehen.
   • Eintreten Kopf> oben im Dokument.
   • Doppeltippen ↵ Enterum zwei neue Zeilen hinzuzufügen.
   • Eintreten / Kopf>um den Titel zu schließen.
3. 3 Eintreten style type = "text / css"> innerhalb der Kopfzeile. Das style-Tag wird zwischen den beiden Überschriften-Tags platziert, um eine Stelle zu schaffen, an der Sie CSS verwenden können, um das HTML-Design zu ändern.
   • Alternativ können Sie ein externes Stylesheet verwenden. Lesen Sie den Artikel "So fügen Sie eine CSS-Datei in HTML ein»So erfahren Sie, wie Sie eine externe CSS-Datei mit einer HTML-Datei verknüpfen.
4. 4 Eintreten Stunde {. Dies ist das CSS-Tag zum Stylen der horizontalen Linie. Fügen Sie es nach dem "style"-Tag in Ihrem Header oder Ihrer externen CSS-Datei hinzu.
5. 5 Fügen Sie CSS-Stile für das hr>-Tag hinzu. Sie müssen nach dem Tag "hr {" stehen. Eine horizontale Linie kann auf verschiedene Weise gestaltet werden. Unten sind einige davon.
   • Eintreten Breite: ##px;um die Strichstärke anzupassen. Ersetzen Sie "##" durch die Linienbreite in Pixeln. Anstelle von Pixeln (px) können Sie einen Prozentsatz (%) verwenden.
   • Eintreten Höhe: ##px;um die Strichstärke anzupassen. Ersetzen Sie "##" durch die Linienbreite in Pixeln.
   • Eintreten Hintergrundfarbe: ##;um die Linienfarbe anzugeben. Ersetzen Sie „##“ durch einen Farbnamen oder eine Raute (#) gefolgt von einem hexadezimalen Farbcode.
   • Eintreten Rand rechts: ## px;um die Anzahl der Pixel vom rechten Rand anzugeben. Ersetzen Sie "##" durch eine numerische Anzahl von Pixeln oder den Code "auto". Geben Sie "auto" ein, um die Linie links oder mittig auszurichten.
   • Eintreten Rand links: ## px;um die Anzahl der Pixel vom linken Rand anzugeben. Ersetzen Sie "##" durch eine numerische Anzahl von Pixeln oder den Code "auto". Geben Sie "auto" ein, um die Linie rechts oder zentriert auszurichten.
   • Eintreten Rand oben: ## px; um die obere Auffüllung für die Zeile anzugeben. Ersetzen Sie "##" durch eine Zahl, die der Auffüllung in Pixeln entspricht.
   • Eintreten Rand-unten: ## px;um die untere Auffüllung für die Linie anzugeben. Ersetzen Sie "##" durch eine Zahl, die der Auffüllung in Pixeln entspricht.
   • Eintreten Rahmenbreite: ## px;um einen Kasten um die Linie zu zeichnen (optional). Ersetzen Sie "##" durch eine Zahl, die der Breite des Rahmens in Pixeln entspricht.
   • Eintreten Randfarbe: ##;um die Rahmenfarbe anzugeben (optional). Ersetzen Sie „##“ durch einen Farbnamen oder eine Raute (#) gefolgt von einem hexadezimalen Farbcode.
6. 6 Eintreten } nach den style-Attributen, um das Styling für das hr>-Tag zu vervollständigen.
7. 7 Eintreten Std> an einer beliebigen Stelle im Hauptteil des HTML-Dokuments, um eine horizontale Linie hinzuzufügen. Die CSS-Stileinstellungen werden jedes Mal angewendet, wenn Sie das hr>-Tag in Ihrem HTML-Dokument verwenden. Ihr Code sollte ungefähr so ​​aussehen:

   !DOCTYPE html>html>head>style type="text/css">hr {width: 50%; Höhe: 20px; Hintergrundfarbe: rot; Rand-rechts: auto; Rand-links: auto; Rand oben: 5px; Rand-unten: 5px; Rahmenbreite: 2px; Randfarbe: grün; } / style> / head> body> h1> Heading / h1> hr> p1> Diese Zeile sollte durch eine horizontale Linie von der Überschrift getrennt werden / p1> / body> / html>