Een horizontale lijn toevoegen aan HTML

Video: HTML Tags - Horizontal line in HTML

Inhoud

Stappen
Methode 1 van 2: Werken in HTML 4.01
Methode 2 van 2: Werken in CSS / HTML5

In dit artikel wordt uitgelegd hoe u een horizontale lijn in HTML toevoegt. De horizontale lijn kan worden gebruikt om inhoud op de site te scheiden. De code voor het maken van de regel is vrij eenvoudig. In HTML 4.01 is het echter mogelijk om het ontwerp van een regel te wijzigen met behulp van interne commando's. In HTML5 moet je CSS gebruiken om de lijn op te maken.

Stappen

Methode 1 van 2: Werken in HTML 4.01

1 Open een bestaand of maak een nieuw HTML-document. HTML-documenten kunnen worden bewerkt met een teksteditor zoals Kladblok of een gespecialiseerde code-editor zoals Adobe Dreamweaver. Volg deze stappen om een HTML-document te openen in het programma van uw keuze:
- Open Kladblok of een andere tekst-/code-editor.
- Open het menu Bestand.
- Klik op Open.
- Selecteer het HTML-bestand.
- Klik op Open
2 Selecteer de locatie waar u de regel wilt invoegen. Scroll naar beneden totdat u de regel vindt waarboven de regel zou moeten verschijnen en verplaats de cursor vervolgens rechtstreeks naar het begin van die regel door helemaal links van die regel te klikken.
3 Voeg een lege regel toe. Dubbeltik ↵ Enterom de tekst waarvoor u een regel wilt invoegen naar beneden te verplaatsen en plaats de cursor op een lege regel.
4 Voeg hr>-tag toe. Binnenkomen hr> naar de lege ruimte aan het begin van de regel. Label hr> stelt u in staat om een horizontale lijn over de hele pagina te tekenen.
5 Verplaats de cursor na de tag "hr" naar een nieuwe regel door op te drukken ↵ Enter. Nu de tag hr> moet op een aparte regel staan.
6 Voeg attributen toe aan de horizontale lijn (optioneel). Voeg attributen toe zoals lengte, dikte, kleur en uitlijning. Zet ze direct na de "hr" tussen accolades. Om meerdere attributen toe te voegen, scheidt u ze met een spatie.
- Binnenkomen hr-grootte = "#">om de dikte van de lijn te wijzigen. Vervang "#" door een numerieke diktewaarde (bijvoorbeeld size = "10").
- Binnenkomen hr breedte = "#">om de lijndikte te wijzigen. Vervang "#" door het aantal pixels of een percentage van de paginabreedte (bijvoorbeeld breedte = "200" of breedte = "75%").
- Binnenkomen hr kleur = "#">om de lijnkleur te wijzigen. Vervang "#" door de naam van de kleur of de hexadecimale code (bijvoorbeeld color = "red" of color = "# FF0000").
- Binnenkomen hr align = "#">om de lijn uit te lijnen. Vervang "#" door "rechts" (rechts), "links" (links) of "midden" (midden) (bijvoorbeeld hr width = "50%" align = "center">).
7 Sla het HTML-bestand op. Om een tekstbestand als HTML-document op te slaan, moet u de bestandsextensie (.txt, .docx) wijzigen in ".html". Volg deze stappen om uw HTML-document op te slaan:
- Open het menu Bestand.
- Klik op Opslaan als.
- Typ een naam voor het bestand in het veld Bestandsnaam.
- Toevoegen .html achter de bestandsnaam.
- Klik op Sparen.
8 Controleer uw HTML-document. Om het HTML-bestand te controleren, klikt u er met de rechtermuisknop op en kiest u Openen met. Selecteer vervolgens uw webbrowser. Er zou een ononderbroken lijn moeten verschijnen waar u de tag "hr" hebt ingevoegd. De HTML-code ziet er ongeveer zo uit:

Methode 2 van 2: Werken in CSS / HTML5

1 Open een bestaand of maak een nieuw HTML-document. HTML-documenten kunnen worden bewerkt met een teksteditor zoals Kladblok of een gespecialiseerde code-editor zoals Adobe Dreamweaver. Volg deze stappen om een HTML-document te openen in het programma van uw keuze:
- Open Kladblok of een andere tekst-/code-editor.
- Open het menu Bestand.
- Klik op Open.
- Selecteer het HTML-bestand.
- Klik op Open
2 Voeg een titel toe aan uw HTML-document. Als uw HTML-document nog geen kop heeft, volgt u deze stappen om er een toe te voegen. De kop moet achter de html>-tag komen en vóór de body>-tag.
- Binnenkomen hoofd> bovenaan het document.
- Dubbeltik ↵ Enterom twee nieuwe regels toe te voegen.
- Binnenkomen / hoofd>om de titel te sluiten.
3 Binnenkomen stijltype = "tekst / css"> binnen de kop. De stijltag wordt tussen de twee koptags geplaatst om een plaats te creëren waar u CSS kunt gebruiken om het HTML-ontwerp aan te passen.
- Als alternatief kunt u een externe stylesheet gebruiken. Lees het artikel "Een CSS-bestand invoegen in HTML»Om te leren hoe u een extern CSS-bestand koppelt aan een HTML-bestand.
4 Binnenkomen uur {. Dit is de CSS-tag voor het opmaken van de horizontale lijn. Voeg het toe na de tag "style" in uw header of extern CSS-bestand.
5 Voeg CSS-stijlen toe voor de hr>-tag. Ze moeten na de tag "hr {" komen. Een horizontale lijn kan op verschillende manieren worden gestyled. Hieronder staan er een paar.
- Binnenkomen breedte: ## px;om de lijnbreedte aan te passen. Vervang "##" door de lijndikte in pixels. In plaats van pixels (px) kunt u een percentage (%).
- Binnenkomen hoogte: ## px;om het lijngewicht aan te passen. Vervang "##" door de lijndikte in pixels.
- Binnenkomen Achtergrond kleur: ##;om de lijnkleur op te geven. Vervang "##" door een kleurnaam of hekje (#) gevolgd door een hexadecimale kleurcode.
- Binnenkomen marge-rechts: ## px;om het aantal pixels vanaf de rechterrand op te geven. Vervang "##" door een numeriek aantal pixels of de code "auto". Voer "auto" in om de lijn naar links of in het midden uit te lijnen.
- Binnenkomen marge-links: ## px;om het aantal pixels vanaf de linkerrand op te geven. Vervang "##" door een numeriek aantal pixels of de code "auto". Voer "auto" in om de lijn naar rechts of in het midden uit te lijnen.
- Binnenkomen marge-top: ## px; om de bovenste opvulling voor de regel op te geven. Vervang "##" door een getal dat overeenkomt met de opvulling in pixels.
- Binnenkomen marge-onder: ## px;om de onderste opvulling voor de regel op te geven. Vervang "##" door een getal dat overeenkomt met de opvulling in pixels.
- Binnenkomen grensbreedte: ## px;om een kader rond de lijn te tekenen (optioneel). Vervang "##" door een getal dat overeenkomt met de breedte van de rand in pixels.
- Binnenkomen rand kleur: ##;om de randkleur op te geven (optioneel). Vervang "##" door een kleurnaam of hekje (#) gevolgd door een hexadecimale kleurcode.
6 Binnenkomen } na de stijlkenmerken om de styling voor de hr>-tag te voltooien.
7 Binnenkomen hr> ergens in de hoofdtekst van het HTML-document om een horizontale lijn toe te voegen. De CSS-stijlinstellingen worden elke keer dat u de hr>-tag in uw HTML-document gebruikt, toegepast. Je code zou er ongeveer zo uit moeten zien: