Een horizontale lijn maken in HTML

PDF download Pdf downloaden
Bijdragen van wikiHow-redactie

PDF download Pdf downloaden

Deze wikiHow 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]

Methode 1
Methode 1 van 2:

HTML 4.01

PDF download Pdf downloaden
  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-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 .
  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>"}
    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.
  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>"}
    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.
  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>"}
    Typ <hr> in de ruimte voor het begin van de regel. De tag <hr> maakt een horizontale lijn over de hele pagina.
  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>"}
    Druk op ↵ Enter om dit te doen. Op dit punt moet de tag <hr> op een eigen regel staan.
  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>"}
    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]
    • 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. {"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>"}
    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. {"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>"}
    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] 
       <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
Dit is een kop </ 
 h1 
 > 
 < 
 hr 
 size 
 = 
 "6" 
 width 
 = 
 "50%" 
 align 
 = 
 "left" 
 color 
 = 
 "green" 
 > 
 < 
 p1 
 > 
Dit is alineatekst die van de kop is gescheiden door een lijn. </ 
 p1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    Advertentie
Methode 2
Methode 2 van 2:

CSS/HTML5

PDF download Pdf downloaden
  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-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. {"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>"}
    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. {"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>"}
    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.
  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>"}
    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. {"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>"}
    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.
  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>"}
    Hiermee sluit je de stijl-instellingen voor de <hr> tag af.
  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>"}
    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] Je code zou er nu ongeveer als volgt uit moeten zien: 
       <!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 
 > 
Dit is een kop </ 
 h1 
 > 
 < 
 hr 
 > 
 < 
 p1 
 > 
Dit is een alineatekst die wordt gescheiden door een horizontale lijn </ 
 p1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    Advertentie

Gerelateerde artikelen

XML bestanden openen
De kleur van tekst in HTML veranderen
De broncode van een webpagina bekijken
Spaties in HTML toevoegen
Commentaar toevoegen aan HTML
De lengte en breedte van een afbeelding instellen met HTML
Notepad gebruiken
Een computerprogramma maken
De hex code van een kleur achterhalen op je computer
Een onschuldig virus creëren
Programmeren in Python
Gegevens toevoegen aan een draaitabel in Excel
Een php‐bestand openen
Een SQL Server database maken
Advertentie

Bronnen

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

Over dit artikel

In andere talen
Deze pagina is 9.349 keer bekeken.

Was dit artikel nuttig?

Advertentie