In HTML eine Linie einfügen

Dieses How.com.vn 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]XForschungsquelle}

Methode 1

Methode 1 von 2:

Mit CSS/HTML5

PDF herunterladen

1
Öffne oder erstelle ein neues HTML-Dokument. 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
Füge einen Kopf zu deinem HTML-Dokument hinzu. 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
Gib <style type="text/css"> in den Kopf ein. 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.
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
Füge CSS-Stile für dein "<hr>"-Tag hinzu. 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.
Das schließt deine Stileinstellungen für dein <hr>-Tag.
7
Gib irgendwo im Textkörper deines HTML-Dokuments <hr> ein. 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]XForschungsquelle} Dein Code sollte so aussehen:
Werbeanzeige

Methode 2

Methode 2 von 2:

Mit HTML 4.01

PDF herunterladen

1
Öffne oder erstelle ein neues HTML-Dokument. 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.
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.
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.
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.
Drücke dazu Eingabe. An dieser Stelle sollte das <hr>-Tag auf seiner eigenen Zeile stehen.
6
Füge Eigenschaften zur waagerechten Linie hinzu (optional). 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]XForschungsquelle}
- 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
Speichere deine HTML-Datei. 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
Teste deine HTML. 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]XForschungsquelle}
Werbeanzeige