|
  Radbrytning.
Nytt stycke. Mellanslag.
<br>
BR står för "Break row" på engelska alltså bryt
raden. I vanliga fall när man skriver i en ordbehandlingsprogram t.ex.
Word och vill ha radbrytning trycker man på Enter- tangent
men inte för en HTML dokument. Man måste
använda <br> för att få text på nästa
rad annars fortsätter text i samma rad.
Om du vill skriva XHTML stäng tomma element BR. Man kan skriva </br> men
för att följa standard och att den är bakåtkompatibel skriv <br
/> och glöm inte mellanslag efter BR.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HTML test sida 1.</title>
</head>
<body>
Hej på dej!
<br>Fint
väder idag.
</body>
</html> |
Hej på dej!
Fint väder idag. |
XHTML
Hej på dej! <br />Fint väder idag. |
Kod till vänster är en komplett dokument. Resultat av koden
ser du till höger. Kod i XHTML visas längst till höger. Bakgrundsfärg är
bara för
att framhäva kod och resultat. ( Kod för få linjer i tabellen ovan är
<table width="99%" frame="hsides" rules="all" bordercolor="#0000ff"> )
Se sidan 8-1 för att skapa linjer i tabeller.
Om man utelämnar <br> taggen blir resultaten
Hej på dej! Fint väder idag.
I fortsättning kommer jag att bara skriva den del av koden som skrivs mellan <body> och </body>
men det är bara för min bekvämlighet. Du för förutsätta att inledning och avslutningsdel av
koden finns med.
Det spelar ingen roll hur du skriver din sida bara taggarna kommer i rätt ordning. Webbläsaren
behandlar din sida tecken för tecken och utför instruktioner i taggarna i den ordning de finns. T.ex. du kan skriva
din kod så här.
| Ex. 1 |
Hej på dej!
<br>Fint väder idag. |
Ex.2 |
Hej på dej! <br>
Fint väder idag.
|
Ex. 3 |
Hej på dej!<br>
Fint väder idag. |
Använd inte extra <br> för att skapa flera tomma rader. En del webbläsare slår ihop extra
radbrytningar till en <br> och en taldator skulle bara upprepa "slut på raden" gång på
gång. Det finns ett bättre sätt att skapa tomutrymme och det ska vi titta på när vi undersöker
en tagg som heter <pre> lite längre fram.
Det finns ett egenskap, CLEAR, till <br> tagg som används vid bilder och
tabeller. Läs mer här.
<nobr> och </nobr>
Betyder No Break alltså ingen brytning. Taggen måste avslutas. Gör att texten skrivs på en rad.
Nackdelen med detta är att en lång rad kan försvinna under högerkanten av webbläsare.
Rulla sidan sidleds, för att läsa texten, är inte särskilt populärt hos besökare.
<p> och </p> (XHTML - Icke tomma element måste ha avslutande tagg.)
P står för "Paragraph" - engelska för stycke. Vill man skapa ett nytt stycke använder man
taggen <p> . Den har sluttagg </p> och vad <p> gör är att först
skapa en tom rad och sedan flytta efterföljande text till raden därefter. Se nedan.
|
Hej på dej!
<p>Fint väder idag.</p> |
|
Hej på dej!
Fint väder idag.
|
|
XHTML
Alltid avsluta <p> med
</p> |
En del brukar utelämna sluttagg </p> men det kan skapa problem att inte ha
sluttagg när du anger egenskaper. Samma sak när det finns tabeller eller bilder i sidan. Gör det til
en vana att avsluta <p> med </p> för att slippa problem senare eller om du vill följa
XHTML standard.
BODY ska egentligen inte innehålla ren text utan text ska finnas i olika stycke där
<p> stängs med </p>
Du kan kombinera <p> och <br> som i koden nedan.
Hej på dej!
<p><br>Fint väder idag.</p>
|
|
XHTML
Hej på dej!
<p><br />Fint väder idag.</p>
|
Här är det två olika taggar med två olika instruktioner som påverkar texten men webbläsaren
tolkar taggar och utför instruktioner korrekt. Först <p> och sedan <br> . Vad som händer är
att <p> skapar ett nytt stycke och <br> taggen flyttar texten ned ytterligare en rad. Det blir i praktiken två
tomma rader emellan.
Obs! Det går inte att skriva <br><p> och du kan läsa i nästa
stycke varför.
Den första taggen <br> skapar en tom rad men <p> tagg har inget
element att kunna avgöra var stycket ska
börja. En tom rad räknas inte som ett element.
Detsamma gäller flera <p> taggar i följd för att skapa tomutrymme. Webbläsaren erkänner
bara den första <p> taggen och ignorerar de andra eftersom den måste ha ett tecken eller en bild mellan varje
<p> för att kunna placera nästa <p> korrekt.
Däremot om du infogar mellanslagskod så här
<p> </p> kan
du skapa ett "tom" stycke.
För större utrymme använd <pre>
Mellanslagskod förklaras nedan.
För att kunna lägga in flera mellanslag används vilket är
kod som tolkas av webbläsaren som mellanslag. Bokstäverna står för "Non breaking space" på
engelska. Den måste skrivas med små bokstäver.
Webbläsaren ignorerar extra mellanslag, i ditt material, mellan t.ex. två ord. Den erkänner bara
ett mellanslag. Använd för fler mellanslag. Se nedan.
1
2 3
Som du ser upprepas koden tre gånger mellan varje tal och därmed får man tre mellanslag som skiljer talen
när sidan öppnas i en webbläsare.
Resultaten av ovanstående kod är
1 2 3
och eftersom man normalt kan lägga in ett mellanslag och du lägger till
ett mellanslag efter 1 som nedan
1
blir resultatet fyra mellanslag till nästa tal. Notera att jag kallar för
kod och inte tagg. Det finns en del koder i HTML utan avgränsare. De kännetecknas av att de börjar med
& och avslutas med semikolon. Oftast skrivs de med små bokstäver. Se längre ner i
sidan om ASCII kod.
Ett annat sätt att använda denna kod är för att hindra
webbläsare från att skapa raddbrytning mellan element som ska visas tillsammans. Se exempel nedan
| ....titta på exempel :- |
kan delas så här |
....titta på exempel
:- |
Make up borstar 7 st. Pris: $5.00 EUR 4.17
c.a. 35 Kr. Fri frakt. |
 |
För att dessa tecken :- ska visas tillsammns med "exempel" används
istället av den normala mellanslag. Detta gör att de två element ses som ett av
webbläsare. Radbrytning sker antigen innan "exempel" eller efter tecken :-
Om du vill kombinera två element, så att webbläsare ser de som ett,
ersätt mellanslag med
Rubriker.
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
H, första bokstav, i engelskans "Heading" för rubrik.
Dessa taggar används för rubriker. Varje tagg representerar en textstorlek.Rubrik är
alltid på en egen rad och det automatiskt infogas radmatningar för
och efter. Stilen blir
fetare än
vanlig text. Titta på koden nedan.
<body>
<h1>Kapitel 1.</h1>
<p><h6>Hej på dej!</h6></p>
</body> |
Resultat av
<h1> +
</h1> och
<h6> + </h6>
ser du till höger |
Kapitel 1.
Hej på dej! |
Det finns sex olika storlekar som man kan använda. <h1> är den största. Sedan
kommer <h2>, <h3>, <h4>, <h5> och till sist <h6>
vilket ger den minsta textstorleken. Man måste avsluta taggar annars blir resten av texten påverkad.
Har man börjat en sidan med en viss rubrikstorlek då ska andra rubriker,
på sidan, vara i fallande grad och aldrig storre än den inledande rubrik.
Man ska inte använda dessa taggar för vanlig
text. Det finns andra taggar
som ger bättre
kontroll över
textstorlek. Det ska vi titta på
lite längre fram. Det allra bästa sätt att formattera text är att använda
CSS.
Egenskaper för en tagg.
En del taggar har egenskaper (kallas också för attribut eller parametrar) som man kan använda för
att ytterligare påverka innehållet i sidan. De flesta egenskaper måste tilldelas ett värde för
att kunna fungera.
Skriver man taggen utan egenskaper är det standardvärde som tillämpas. Standardvärde i engelska
kallas för default värde och man kan träffa på denna term i svensk text.
align
Taggar för rubriker har egenskap ALIGN (engelska för att justera). Det innebär att man kan justera
rubrikens position på sidan. Det finns tre olika värden som man kan använda vilka är
left ,engelska för vänster,
center för mitten och right
för höger.
Eftersom värdet LEFT är standard behöver man inte ange den. I alla taggar skrivs egenskap
plus värde utan något mellanslag.
<instruktion egenskap="värde">Kapitel
1.</avsluta instruktion><p>
Notera att värdet innesluts i citationstecken. Detta, med citationstecken, kan vara
lite förvirrande. En del värden kan skrivas utan citationstecken och det är också korrekt. Eftersom
det är inte fel att ange alla värden i citationstecken det är bäst att göra så. Man behöver
inte komma ihåg vilka värden kan vara utan.
<h2 align="center">Kapitel 1.</h2><p>
Resultaten av ovanstående kod blir att rubriken justeras till mitten av sidan. <p> taggen gör
så att texten efter rubriken flyttas ned med en tom rad emellan. Vill du att texten kommer precis under rubriken
använd <br>
Kapitel 1.
Eftersom jag använder en tabell på denna sida gäller centrering i den del som används för texten.
<h2 align="center">
<Instruktion egenskap="värde">
Alltihop är en enda tagg. Vi undersöker de olika delar.
<
h2
align=
"center"
> |
|
Först vänster avgränsare följt av instruktionen
vilket är en rubrik storlek och sedan ett mellanslag innan egenskap
och denna egenskap+lika med tecken har ett värde
vilket skrivs inom citationstecken och till sist
höger avgränsare för att stänga taggen. |
Med värdet RIGHT justeras rubriken längst ut till högerkanten av sidan. Se koden nedan.
<h2 align="right" >Kapitel 1.</h2><br>
Resultatet blir Kapitel 1.
Förväxla inte titel och rubrik. Titel syns bara längst upp, i ramen, av webbläsare medan rubrik
syns på sidan eftersom den är skriven innanför <body> taggarna.
ASCII kod
Alla tecken som du skriver på en webbsidan lagras enligt ett kodsystem. Den mest
vanligt, som de flesta datorer arbetar med, är den ASCII system. Vill du se kod och
de olika symboler som representeras gå till
denna sidan.
| 
