Till Startsidan
JavaScript.nu / HTML-kurs / Horisontella streck

Horisontella streck

I detta kapitel:
Streck
Bredd
Var på sidan
Storlek
Färg
Noshade
Test


Vill du dra ett horisontellt streck tvärs över sidan gör du detta med HR-taggen, <HR>.
Ett vanligt streck ser ut såhär:

HR
HR står för "Horizontal Rule" (=horisontell linje, streck) och drar ett streck över sidan.
Attribut
ALIGN   Giltiga värden: center, left, right
COLOR   Detta fungerar bara med Explorer och bestämmer streckets färg.
NOSHADE   Har inga värden. Detta gör att 3D-effekten försvinner från strecket
SIZE   Streckets höjd: Ange ett heltalsvärde.
WIDTH   Streckets bredd: Ange ett heltalsvärde eller ett procentuellt värde.

För att ändra streckets bredd så gör vi det med WIDTH:
<HR WIDTH="50">

<HR WIDTH="100">

<HR WIDTH="200">

<HR WIDTH="400">

<HR WIDTH="25%">

<HR WIDTH="50%">

<HR WIDTH="100%">

Standard är 100%.

Med ALIGN-attributet bestämmer du om streckets ska finnas till vänster, i mitten eller till höger på sidan:
<HR WIDTH="30%" ALIGN="left">
<HR WIDTH="30%" ALIGN="center">
<HR WIDTH="30%" ALIGN="right">

Raderna ovan resulterar alltså i:




Streckets höjd bestäms med SIZE. Här kan du inte ange ett värde i procent, här måste ett heltalsvärde anges:
<HR WIDTH="100" SIZE="10">
<HR WIDTH="300" SIZE="20">
<HR WIDTH="30%" SIZE="30">

Raderna ovan resulterar nu i:




Streckets färg ändras med COLOR-attributet:
<HR WIDTH="100" SIZE="30" COLOR="red">
<HR WIDTH="200" SIZE="20" COLOR="#000000">
<HR WIDTH="300" SIZE="10" COLOR="silver">

Raderna ovan resulterar nu i:




Observera att färgen endast visas för dem som har Internet Explorer, inte för dem med Netscape.

Attributet NOSHADE, som saknar attributvärde, tar bort 3D-effekten på strecket. Nedan visas några exempel:
<HR WIDTH="100" SIZE="10" NOSHADE>
<HR WIDTH="400" ALIGN="right" COLOR="#00FF00" NOSHADE>
<HR NOSHADE>

Raderna ovan resulterar i:






Test
I slutet av varje kapitel i HTML-kursen finns några frågor som du ska svara på för att testa dina kunskaper inom HTML. Om du har fått alla rätt så är det bara att gå vidare, fast har du haft något fel kan det kanske vara klokt att försöka lista ut vad som kan ha varit fel. Givetvis kan du gå vidare även om du inte svarar rätt på alla frågor.
Vilken av följande HTML-koder är korrekt?
<HR WIDTH="50%" SIZE="50%">
<HR WIDTH="50" SIZE="50%">
<HR WIDTH="50%" SIZE="50">

Vilket av följande attribut fungerar inte i HR-taggen med Netscape?
ALIGN
COLOR
NOSHADE

Vilka värden kan NOSHADE ha?
YES eller NO
1 eller 0
Inga värden

Hur bred är detta streck <HR WIDTH="10">?
10 mm = 1 cm
10 px = 10 bildpunkter på skärmen
10% av skärmens bredd







Copyright © Omid Rouhani 1997-2022; Alla rättigheter reserverade.
Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ]