Rubriker, länkar, fysiska- och logiska stilar samt fontstorlek

<H1> - <H6>

Det finns sex olika storlekar eller prioriteter för rubriker (headings) i HTML-standarden. Den första ställer man in med märket <H1> och avslutar med märket </H1>. Den är störst och har högsta prioriteten. Därefter finns <H2>, <H3>, <H4>, <H5> och <H6> som är mindre och har lägre prioritet. Eftersom <H6> är det sista märket har det lägst prioritet och är alltså minst.

Det är viktigt att man kommer ihåg att använda rätt avslutningsmärke för att avsluta rubriken; har man skapat en rubrik med storlek 3 det vill säga med märket <H3> måste man avsluta den med märket </H3>. Nedan följer ett exempel på de sex olika prioriteterna för rubriker:

<HTML>
	<HEAD>
		<TITLE>Demonstration av rubriker</TITLE>
	</HEAD>

	<BODY>
		<H1>En rubrik med prioritet/storlek 1</H1>
		<H2>En rubrik med prioritet/storlek 2</H2>
		<H3>En rubrik med prioritet/storlek 3</H3>
		<H4>En rubrik med prioritet/storlek 4</H4>
		<H5>En rubrik med prioritet/storlek 5</H5>
		<H6>En rubrik med prioritet/storlek 6</H6>
	</BODY>
</HTML>

Och så här ser det ut:

En rubrik med prioritet/storlek 1

En rubrik med prioritet/storlek 2

En rubrik med prioritet/storlek 3

En rubrik med prioritet/storlek 4

En rubrik med prioritet/storlek 5
En rubrik med prioritet/storlek 6

Absoluta och relativa länkar

Innan vi går in på hur man skapar en länk kan det vara bra att veta skillnaden mellan absoluta och relativa länkar. En absolut länk innehåller hela adressen med serverns namn och allt medan en relativ länk endast innehåller det som skiljer länkens adress från den för tillfället aktiva. Om du har skapat en hemsida som ligger på adressen:

http://www.min.server.se/sida.html

och vill skapa en länk till en annan sida som ligger i samma katalog på servern och heter sida2.html finns det två alternativ. Den absoluta länken blir:

http://www.min.server/sida2.html

Det andra alternativet är en relativ länk. Den relativa länken blir:

sida2.html

Den relativa länken använder sig alltså av informationen om var sidan som innehåller länken ligger någonstans och räknar sedan ut den absoluta länken. Fördelen med att använda relativa länkar är att de inte behöver ändras om du flyttar på dina sidor, din website. Dessutom fungerar relativa länkar redan då du arbetar med sidorna och har dem liggande på din egen hårddisk, det vill säga innan du har laddat upp dem. På så sätt kan du testa dina sidor och se så att alla länkar fungerar. Absoluta länkar bör användas främst då du skapar länkar till andras sidor som ligger på en annan server.

Märket <A HREF=>

Det är nu dags att gå in på hur man skapar en länk på sin websida. Det gör man med märket <A HREF=""> inom citationstecknen skriver man den relativa eller absoluta länkadressen. Efter märket skriver man den text som användaren (besökaren på din sida) ska kunna klicka på och avslutar med märket </A>.

För att återgå lite grand till föregående exempel kan vi se hur man skapar den länk som diskuterades. Det hela kan se ut så här:

<A HREF="sida2.html">Min andra hemsida</A>

Det finns en del andra länkar man kan skapa också. Om webläsaren har ett inbyggt program för att hantera e-post eller på något annat sätt kan skicka information till ett sådant program kan man skapa en länk som låter användaren skriva ett brev till, exempelvis, dig själv om sidan. Det enda man behöver göra är att börja själva länken med "mailto:" och därefter ange e-post-adressen. Min egen e-post-adress är jonny@zetterstrom.net, så för att skapa en länk som låter besökare skicka brev till mig skriver man:

<A HREF="mailto:jonny@zetterstrom.net">Skicka e-post till mig</A>

Så här kommer länken att se ut:

Skicka e-post till mig

Märket <BASE>

<BASE> är ett märke som inte används så mycket trots att det kan vara väldigt användbart ibland. Man kan nämligen definiera basadressen (URL) för alla relativa länkar. Om exempelvis sida.html har följande adress http://www.min.server.se/sida.html, så blir basadressen för alla relativa länkar automatiskt http://www.min.server.se/ men om alla sidor man har länkar till ligger i katalogen egna_sidor skulle det vara praktiskt om basadressen kunde vara http://www.min.server.se/egna_sidor/ istället.

Då kan man använda märket <BASE> för att ställa in basadressen. Det gör man så här:

<BASE HREF="http://www.min.server.se/egna_sidor/">

Tillsist kan det vara bra att veta att man ska vara noggrann med versaler och gemener då man skapar länkar, eftersom de flesta webservrar kör någon sorts UNIX system som inte förstår att A och a är samma bokstav.

Adresser och blockcitat

När man skriver adresser bör man använda sig av märket <ADDRESS> och avsluta med </ADDRESS>. På så sätt talar man om för webläsaren att man skrivit en adress och sedan är det upp till webläsaren att på något sätt markera att det rör sig om en adress. Exempel:

<ADDRESS>Mitt namn, min väg, mitt postnummer och ort, mitt land</ADDRESS>

Ett annat användbart märke då man exempelvis kodar sina specialarbeten i HTML kan vara <BLOCKQUOTE> och </BLOCKQUOTE> som man använder sig av för blockcitat. Här följer ett exempel:

<BLOCKQUOTE>
	Shall I compare thee to a summer's day?
	Thou art more lovely and temperate.
	Rough winds do shake the darling buds of May,
	and summer's lease hath all too short a date.
</BLOCKQUOTE>
William Shakespeare

Och då man tittar på websidan ser det ut så här:

Shall I compare thee to a summer's day? Thou art more lovely and temperate. Rough winds do shake the darling buds of May, and summer's lease hath all too short a date.
William Shakespeare

Fysiska stilar

De fysiska stilarna är endast tre stycken. De påverkar textens utseende. Man kan ställa in texten så att den blir fet, kursiv eller "monospaced" det vill säga varje tecken tar upp lika mycket plats. De flesta skrivmaskiner använder sig av "monospaced" text. Man slår på fet stil med märket <B> (för engelskans bold) och slår av det med </B>. Kursiv stil fungerar på samma sätt men märkena är istället <I> (för engelskans Italic) och </I>. "Monospaced" text slås på med märket <TT> som är en förkortning av teletyper och </TT> slår av det. Här följer ett exempel i HTML-kod:

<B> Fet stil, </B>
<I>Kursiv stil,</I>
<TT>Monospaced stil, 
<B><I> Fet, kursiv och monospaced stil</I></B></TT>

Som ser ut så här:

Fet stil, Kursiv stil, Monospaced stil, Fet, kursiv och monospaced stil

Logiska stilar

Förutom de fysiska stilarna finns det ett antal logiska stilar och det kan faktiskt vara bra att använda dem istället, eftersom framtida webläsare kanske läser upp texten för din besökare istället för att visa den. För vilken skillnad ska uppläsningsfunktionen göra mellan vanlig text och exempelvis fet text? Om man då istället använt den logiska stilen <STRONG> kan man tänka sig att volymen ökas något.

De logiska märkena är (i bokstavsordning):

<CITE> som ska användas för titlar på böcker, filmer och liknande. Avslutas med </CITE>.

<DFN> som ska användas för definierade ord. Avslutas med </DFN>.

<EM> som ska används för emfasisk text, exempelvis ord som ska betonas </EM>.

<KBD> som ska användas för sådant som ska skrivas in med tangentbordet, avslutas med </KBD>.

<SAMP> som ska användas när det gäller statusmeddelanden. Avslutas med </SAMP>

<STRONG> för text som ska vara starkt markerad, brukar vanligtvis betyda att texten visas med fet stil. Avslutas med </STRONG>

<VAR> för text som ska bytas ut mot det som passar, exempelvis:

"I MS-DOS gör man så här för att ta bort en fil:

DEL <VAR>filnamn</VAR>"

Det finns också en del logiska stilar som endast påverkar fonten; dessa är:

<BIG> - Stor font

<SMALL> - Liten font

<SUB> - Nedsänkt font (subscript)

<SUP> - Upphöjd font (superscript)

Märket <FONT>

Med märket <FONT> kan man ställa in fontens storlek, färg och typsnitt. Storleken kan anges med ett absolut värde mellan 1 (som är minst) och 7 (som är störst) eller med ett relativt värde som "+1" (större) eller "-1" (mindre). Det relativa värdet utgår från den fontstorlek som är inställd när webläsaren kommer fram till märket. För att skriva en rubrik med största möjliga font skriver man alltså så här:

<FONT SIZE="7">Stor rubrik</FONT>

Om man däremot bara vill ha text som är lite större än tidigare text kan man öka fontstorleken ett steg genom att skriva:

<FONT SIZE="+1">Större text</FONT>

Man kan också ställa in färgen med märket <FONT>. Det fungerar precis som då man ställer in färger med märket <BODY>. För att ställa fontfärgen till silver skriver man:

<FONT COLOR="SILVER">Silverfärgad text</FONT>

Till skillnad från rubriker (headings) så innebär inte en förändring av fontstorleken att man automatiskt får en radbrytning efteråt.

Med märket <BASEFONT> kan man göra inställningar för den normala fonten, enda skillnaden från <FONT> är att man inte behöver avsluta med </BASEFONT>, annars är syntaxen fullständigt identisk.