Hoe een horizontale lijn in html toe te voegen

Uit dit artikel leert u hoe u een horizontale lijn in HTML kunt toevoegen. De horizontale lijn kan worden gebruikt om inhoud op de site te verdelen. De code voor het maken van een lijn is vrij eenvoudig. Niettemin, HTML 4.01 U kunt het lijnontwerp wijzigen met behulp van interne opdrachten. HTML5 om de lijn te stylen, moet CSS gebruiken.

Stappen

Methode 1 van 2:
Werk in HTML 4.01
  1. Titel afbeelding 658928 1 1
een. Open het bestaande of maak een nieuw HTML-document. HTML-documenten kunnen worden bewerkt in een teksteditor, zoals "Kladblok", of in een gespecialiseerde codeeditor, zoals Adobe Dreamweaver. Volg deze stappen om een ​​HTML-document in het geselecteerde programma te openen:
  • Open een blocnote of andere teksteditor / code-editor.
  • Open menu Bestand.
  • Klik Open.
  • Selecteer HTML-bestand.
  • Klik Open
  • Titel afbeelding 658928 2 1
    2. Kies een locatie waarin u een regel wilt invoegen. Scroll naar beneden totdat u een tekenreeks vindt waarop de lijn zou moeten verschijnen en verplaats de cursor rechtstreeks naar het begin van deze regel door op zijn uiterste linkerhand te klikken.
  • Titel afbeelding 658928 3 1
    3. Voeg een lege reeks toe. Tweemaal klikken ↵ Voer in om de tekst te verlagen die u nodig hebt om de lijn in te voegen, plaats vervolgens de cursor op de lege reeks.
  • Titel afbeelding 658928 4 1
    4. Tag toevoegen
    .     Binnenkomen
    op een lege plaats aan het begin van de lijn. Label
    Hiermee kunt u een horizontale lijn tekenen via de volledige pagina.
  • Titel afbeelding 658928 5 1
    vijf. Verplaats de cursor na de "HR" -tag naar een nieuwe string door op te klikken ↵ Enter. Nu tag
    moet in een aparte lijn zijn.
  • Titel afbeelding 658928 6 1
    6. Voeg kenmerken toe aan de horizontale lijn (optioneel). Voeg kenmerken toe, zoals lengte, dikte, kleur en uitlijning. Sluit ze onmiddellijk na "HR" bij elkaar in krullende beugels. Om meerdere attributen toe te voegen, deel ze dan door een ruimte.
  • Binnenkomen
    , Om de dikte van de lijn te veranderen. Vervang "#" numerieke dikte (bijvoorbeeld grootte ="10").
  • Binnenkomen
    , Om de lijnbreedte te veranderen. Vervang "#" door het aantal pixels of percentage van de breedte van de pagina (bijvoorbeeld breedte ="200" of breedte ="75%").
  • Binnenkomen
    , Om de kleurlijn te veranderen. Vervang "#" door de naam van de kleur of de hexadecimale code (bijvoorbeeld kleur ="rood" of kleur ="# FF0000").
  • Binnenkomen
    , Om de lijn uit te lijnen. Vervang "#" naar "rechts" (aan de rechterkant), "links" (aan de linkerkant) of "Centre" (gecentreerd) (bijvoorbeeld,
    ).
  • Titel afbeelding 658928 7 1
    7. Sla het HTML-bestand op. Om het tekstbestand als een HTML-document op te slaan, moet u de bestandsextensie wijzigen (.TEKST, .DOCX) AAN ".HTML ». Volg deze stappen om HTML-document op te slaan:
  • Open menu Bestand.
  • Klik Opslaan als.
  • Voer de naam in voor het bestand in het veld "Bestandsnaam".
  • Toevoegen .HTML Na de bestandsnaam.
  • Klik Sparen.
  • Titel afbeelding 658928 8 1
    acht. Controleer uw HTML-document. Om het HTML-bestand te controleren, klikt u met de rechtermuisknop op en selecteert u "Openen met". Selecteer vervolgens Webbrowser. Waar u de "HR" -tag hebt ingevoegd, zou een vaste lijn moeten verschijnen. HTML-code ziet er zoiets uit:
    Header Size ="6" breedte ="vijftig%" align ="Links" Kleur ="Groente">Deze reeks moet van de lijnkop worden gescheiden.
    • Methode 2 van 2:
    Werk in CSS / HTML5
    1. Titel afbeelding 658928 9 1
    een. Open het bestaande of maak een nieuw HTML-document. HTML-documenten kunnen worden bewerkt in een teksteditor, zoals Kladblok, of in een gespecialiseerde codeeditor, zoals Adobe Dreamweaver. Volg deze stappen om een ​​HTML-document in het geselecteerde programma te openen:
    • Open een blocnote of andere teksteditor / code-editor.
    • Open menu Bestand.
    • Klik Open.
    • Selecteer HTML-bestand.
    • Klik Open
  • Titel afbeelding 658928 10 1
    2. Voeg een titel toe aan HTML-document. Als er geen kop in het HTML-document is, volgt u deze stappen om deze toe te voegen. De titel moet na de tag gaan En voor de tag .
  • Binnenkomen Aan de bovenkant van het document.
  • Tweemaal klikken ↵ Enter om twee nieuwe regels toe te voegen.
  • Binnenkomen , Om de titel te sluiten.
  • Titel afbeelding 658928 11 1
    3. Binnenkomen inside header. De tag "Style" wordt geplaatst tussen twee koptags om een ​​plaats te maken waar het HTML-ontwerp kan worden gewijzigd met behulp van CSS-code.
  • Alternatieve manieren waarop u een externe stijlbladtafel kunt gebruiken. Lees het artikel "Hoe CSS-bestand in HTML in te voegen", Om te leren hoe u een extern CSS-bestand kunt aansluiten met HTML-bestand.
  • Titel afbeelding 658928 12 1
    4. Binnenkomen HR {.Dit is een CSS-tag om een ​​horizontale lijn te stylen. Voeg het toe na de tag "Style" in de kop of in het externe CSS-bestand.
  • Titel afbeelding 658928 13 1
    vijf. Stijlen CSS toevoegen voor tag
    .    Ze moeten gaan na de tag "HR {".De horizontale lijn kan op vele manieren worden uitgegeven. Hieronder zijn sommige van hen.
  • Binnenkomen Breedte: ## PX-, Om de lijnbreedte te configureren. Vervang "##" waardebreedte in pixels. In plaats van pixels (PX), kunt u het percentage (%) gebruiken.
  • Binnenkomen Hoogte: ## px-, Om de dikte van de lijn in te stellen. Vervang "##" de lijndikte in pixels.
  • Binnenkomen Achtergrond kleur: ##-, Om de lijnkleur op te geven. Vervang "##" door de naam van de kleur of het raster (#), waarna de hexadecimale kleurcode zal gaan.
  • Binnenkomen Margin-rechts: ## PX-, Om het aantal pixels van de rechterrand te specificeren. Vervang "##" door een aantal pixels of de "Auto" -code. Voer "Auto" in om de lijn aan de linkerkant of in het midden uit te lijnen.
  • Binnenkomen Margin-Left: ## PX-, Om het aantal pixels van de linkerrand te specificeren. Vervang "##" door een aantal pixels of de "Auto" -code.Voer "Auto" in om de lijn aan de rechterkant of in het midden uit te lijnen.
  • Binnenkomen Margin-top: ## px- , Om de bovenste streepje voor de lijn te specificeren. Vervang "##" door het nummer dat overeenkomt met de breedte van het streepje in pixels.
  • Binnenkomen Margin-bodem: ## px-, Om de onderste achterste streepje te specificeren. Vervang "##" door het nummer dat overeenkomt met de breedte van het streepje in pixels.
  • Binnenkomen Grensbreedte: ## PX-, Om het frame rond de regel te tekenen (optioneel). Vervang "##" door het nummer dat overeenkomt met de dikte van het frame in pixels.
  • Binnenkomen Rand kleur: ##-, Om de kleur van het frame op te geven (optioneel). Vervang "##" door de naam van de kleur of het raster (#), waarna de hexadecimale kleurcode zal gaan.
  • Titel afbeelding 658928 14 1
    6. Binnenkomen } Na stijlattributen om de stijlinstelling voor de tag te voltooien
    .
  • Titel afbeelding 658928 15 1
    7. Binnenkomen
    overal in het lichaam van het HTML-document om een ​​horizontale lijn toe te voegen.     CSS-stijlinstellingen worden toegepast na elk gebruik van de tag
    In HTML-document.Uw code moet ongeveer als volgt kijken:
     Type ="Tekst / CSS"> HR {Breedte: 50% -hoogte: 20px-achtergrond-kleur: rood-margin-rechts: automatisch margin-links: auto-margin-top: 5px-margin-bodem: 5px-grensbreedte: 2px-rand- Kleur groen-}Titel
    Deze reeks moet worden gescheiden van de kop van de horizontale lijn
    • Deel in het sociale netwerk:
    Vergelijkbaar