Een horizontale lijn maken in HTML

Deze How.com.vn leert je hoe je een horizontale lijn in HTML maakt. Een horizontale lijn kan worden gebruikt om inhoud op je website te scheiden. De code voor het maken van een regel is vrij eenvoudig. Je kunt in-line code toevoegen in HTML 4.01 om je lijn vorm te geven. In HTML5 gebruik je CSS om je lijn vorm te geven.^[1]XBron

Methode 1

Methode 1 van 2:

HTML 4.01

Pdf downloaden

1
Open of maak een nieuw HTML-document. HTML-documenten kunnen worden bewerkt met een teksteditor zoals Kladblok. Je kunt ook een code-editor gebruiken, zoals Adobe Dreamweaver. Gebruik de volgende stappen om een HTML-document te openen in het programma van je keuze:
- Open Kladblok of een teksteditor/code-editor van je keuze.
- Klik op het menu Bestand.
- Klik op Openen.
- Kies een HTML-bestand.
- Klik op Openen.
Scrol omlaag tot de regel waarboven je de regel wilt invoegen, en klik vervolgens op de uiterste linkerzijde van de regel om de cursor direct voor het begin van de regel te plaatsen.
Druk tweemaal op ↵ Enter om de tekst waarboven je de lijn wilt invoeren naar beneden te verplaatsen, en verplaats de cursor naar de lege ruimte.
Typ <hr> in de ruimte voor het begin van de regel. De tag <hr> maakt een horizontale lijn over de hele pagina.
Druk op ↵ Enter om dit te doen. Op dit punt moet de tag <hr> op een eigen regel staan.
6
Voeg attributen toe aan de horizontale lijn (optioneel). Je kunt attributen toevoegen aan een horizontale lijn, zoals lengte, breedte, kleur en uitlijning. Gebruik de volgende codes na 'hr' tussen de code-haakjes. Je kunt meer dan één attribuut toevoegen door deze te scheiden met een spatie.^[2]XBron
- Typ <hr size="#"> om de dikte van de lijn te wijzigen. Vervang # door de dikte (bijv. size="10").
- Typ <hr width="#"> om de breedte van de lijn te wijzigen. Vervang # door de breedte in pixels, of het percentage van de paginabreedte (bijv. width="200", of width="75%").
- Typ <hr color="#"> om de kleur van de lijn te wijzigen. Vervang # door de naam van de kleur of een hexadecimale code (bijv. color="red" of color="#FF0000")
- Typ <hr align="#"> om de lijn uit te lijnen. Vervang # door "right", "left" of "center" (bijv. <hr width="50%" align="center">).
7
Sla je HTML-bestand op. Als je een tekstbestand als een HTML-document wilt opslaan, moet je de bestandsextensie (.txt of .docx) vervangen door '.html'. Volg de volgende stappen om je HTML-document op te slaan:
- Klik op het menu Bestand.
- Klik op Opslaan als.
- Typ een naam voor het bestand, naast "'Bestandsnaam'".
- Typ .html aan het eind van de bestandsnaam.
- Klik op Opslaan.
8
Test je HTML. Als je je HTML-bestand wilt testen, klik dan met de rechtermuisknop op het bestand en selecteer Openen met. Selecteer vervolgens een webbrowser. Er moet een ononderbroken lijn verschijnen waar je de 'HR'-tag hebt geplaatst. De HTML-code ziet er ongeveer als volgt uit:^[3]XBron
Advertentie

Methode 2

Methode 2 van 2:

CSS/HTML5

Pdf downloaden

1
Open of maak een nieuw HTML-document. HTML-documenten kunnen worden bewerkt met een teksteditor zoals Kladblok. Je kunt ook een code-editor gebruiken, zoals Adobe Dreamweaver. Volg de volgende stappen om een HTML-document te openen in het programma van je keuze:
- Open Kladblok, of een andere teksteditor/code-editor naar keuze.
- Klik op het menu Bestand.
- Klik op Openen.
- Kies een HTML-bestand.
- Klik op Openen
2
Voeg een kop toe aan je HTML-document. Als je HTML-document nog geen kop heeft, gebruikt je de volgende stappen om een kop toe te voegen. De kop komt na de "<html>" tag, en voor de "<body>" tag.
- Typ <head> bovenaan het document.
- Druk tweemaal op ↵ Enter om twee nieuwe regels toe te voegen.
- Typ </head> om de kop af te sluiten.
3
Typ <style type="text/css"> in de kop. De opmaak-tag komt tussen de twee kop-tags. Hiermee heb je een plek waar je CSS-code kunt invoeren om je HTML op te maken.
- Je kunt ook een externe stijlpagina gebruiken. Lees "How to Add a CSS File to HTML" om meer te leren over het koppelen van een extern CSS-betand aan je HTML-bestand.
Dit is de CSS-tag voor het opmaken van je horizontale lijn. Plaats deze na de style-tag in de head-sectie, of in je externe CSS-bestand.
5
Voeg CSS-stijlen toe aan je "<hr>" tag. Deze plaats je achter de tag "hr {". Er zijn veel manieren om een horizontale lijn op te maken. Hierna volgen een paar voorbeelden.
- Typ width: ##px; om de breedte in te stellen. Vervang ## door de breedte van de lijn in aantal pixels. Je kunt ook een percentage (%) aangeven in plaats van pixels (px).
- Typ height: ##px; om de dikte van de lijn aan te geven. Vervang ## door het aantal pixels dat de lijn dik moet zijn.
- Typ background-color: ##; om de keur van de lijn aan te geven. Vervang ## door de naam van de kleur, of door een hekje (#) gevolgd door een hexadecimale kleurcode.
- Typ margin-right: ##px; om het aantal pixels vanaf de rechterkant aan te geven. Vervang ## door het aantal pixels of "auto". Typ "auto" om de lijn links uit te lijnen, of te centreren.
- Typ margin-left: ##px; om het aantal pixels vanaf de linker rand aan te geven. Vervang ## door het aantal pixels of "auto". Typ "auto" om de lijn rechts uit te lijnen, of te centreren.
- Typ margin-top: ##px; om een bovenmarge aan te geven voor de lijn. Vervang ## door de dikte van de lijn in pixels.
- Type margin-bottom: ##px; om een ondermarge aan te geven voor de lijn. Vervang ## door de dikte van de lijn in pixels.
- Typ border-width: ##px; om een rand rond de lijn te maken (optioneel). Vervang ## door de dikte van de rand in pixels.
- Typ border-color: ##; om de kleur van de rand rond de lijn aan te geven (optioneel). Vervang ## door de naam van de kleur, of een hekje (#) gevolgd door een hexadecimale kleurcode.
Hiermee sluit je de stijl-instellingen voor de <hr> tag af.

How.com.vn Nederlands: Step 7 Typ <hr> op een willekeurige plek in de body van je HTML-document.

Hiermee voeg je een horizontale lijn toe aan je HTML-document. Je CSS-stijlinstellingen zijn van toepassing wanneer je de <hr> tag gebruikt in je HTML.^[4]XBron Je code zou er nu ongeveer als volgt uit moeten zien:

<!DOCTYPE html><html><head><style type="text/css">hr {width: 50%;height: 20px;background-color: red;margin-right: auto;margin-left: auto;margin-top: 5px;margin-bottom: 5px;border-width: 2px;border-color: green;}</style></head><body><h1>Dit is een kop</h1><hr><p1> Dit is een alineatekst die wordt gescheiden door een horizontale lijn</p1></body></html>