HTML

Märka upp text

Sidan ser inte allt för rolig ut så vi ska pigga upp den med ett par saker. Dels ska en del av orden i texten förstärkas och bakgrundsfärgen ska ändras till ljusblå.

Ändra bakgrundsfärg gör man genom att sätta attributet BGCOLOR i märket BODY. Vi ersätter

<BODY>
med
<BODY BGCOLOR="lightblue" FONT-FAMILY="arial">

fonten är det typsnitt på texten som ska användas på sidan. Det finns väldigt många olika sorts fonter att använda men vanligen används bara ett fåtal. Några av de mest använda är Times New Roman, Arial och Verdana.

BGCOLOR är en förkortning av background color. Fast egentligen är vi ute och cyklar lite nu. Det som vi precis gjorde genom att sätta bakgrundsfärg var att bestämma precis hur något ska se ut. Vi har tidigare kommit fram till att HTML bara ska stå för strukturen av sidan, inte för utseendet. Men tills att vi har lärt oss det riktiga sättet ( Cascading Style Sheets, CSS ) tillåter vi detta lilla snedsteg som hör till den gamla HTML 3.2.

Färger i HTML kräver egentligen ett eget avsnitt men vi ska gå igenom grunderna kort här. För att använda de vanliga färgerna som vi har namn på går det oftast bra att skriva bara namnet (på engelska). Som vi såg nyss går det att sätta bakgrundsfärgen genom att ange värdet lightblue för attributet BGCOLOR. Det går också att ange andra färger än de vi kan sätta namn på. Systemet RGB (Red Green Blue) ger oss möjlighet att beskriva hela 16 miljoner färger. Naturligtvis går det inte att se skillnad på alla dessa och datorn väljer den närmaste färgen i skalan som den känner till.

Här kan du prova olika färgkombinationer. Fyll i de olika rutorna med tal mellan 0 och 255 och klicka på uppdatera.

RBG-systemet bygger på de tre färgerna röd, grön och blå. Genom att kombinera olika mycket av dessa tre får vi fram målfärgen som vi ska använda. Varje enskilt färgvärde ligger mellan 1 och 255 och detta kan skrivas på lite olika sätt. Ett sätt är att använda hexadecimalt skrivsätt och det ser då ut enligt : #AABB45. Man börjar med tecknet # och därpå följer två tecken för röd, två för grön och två för blå färg. Varje tvåteckenkombination summerar ihop till ett tal enligt :

tecken 1 * 16 + tecken 2

Men vad betyder A då? Eftersom det inte går att beskriva tal upp till 255 med två tecken bara med hjälp av 0-9 använder man också A-F för 10-15. Det här betyder att AA ger talet 170. Om vi gör samma sak för 45 som var värdet för blå blir talet 69. Färgen #AABB45 ser alltså ut såhär. Prova själv att skapa hexadecimala tal för olika decimala tal mellan 0 och 255. Prova även att gå åt andra hållet!

Om man tycker att det är jobbigt att använda sig av Systemet hexadecimalt går det att skriva rgb(170, 187, 69) istället. Då blir färgen rgb(170,187,69) precis som innan. Lek gärna med färger för att få lite känsla för hur det fungerar. Det finns också många ställen på Internet som erbjuder färgskalor där du kan hitta dina favoritfärger.

Uppmärkning av kod vara det ja. Vi sätter märket I runt Hovawart och gårdshund, samt B runt Elliegården.

<I> står för italic som är kursiv stil och <B> står för bold som är fetstil

En av de bästa sakerna med HTML är att det skrivs som ren text, alltså ett format som är enkelt att läsa in på vilken dator och plattform som helst. Men det här betyder också att allt som inte är ren text i dokumentet måste göras med kod. T ex går det inte att lägga in en radbrytning i sitt dokument genom att använda tangentbordets tecken. En sådan radbrytning kommer bara att vara ett mellanslag (om ens det) på HTML-sidan i en webbläsare. Detsamma gäller för tabbar och flera mellanslag efter varandra, de flyter ihop till ett enkelt mellanslag. Man måste alltså använda sig av HTML.

För att inte få för långa rader lägger vi in en radbrytning efter varje mening med märket BR. BR är ett av de fåtal märken som inte har något slutmärke.

Vi får följande utseende och kod.

Resultat


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

			"http://www.w3.org/TR/html4/loose.dtd">

<HTML>

	<HEAD>

		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; 

			CHARSET=ISO-8859-1">

		<TITLE>Nike, en busig hund </TITLE>

	</HEAD>



<BODY BGCOLOR="lightblue" FONT-FAMILY="arial">



<H1>Nike, en busig hund</H1>



<P> Nike är en trevlig och busig hund och av rasen <I>

Hovawart</I>.

<BR>

Detta är en mycket pigg och arbetsvillig bruksras och namnet 

betyder ungefär <I>gårdsvakt</I>. 

<BR>

Hon kommer från Lillhärdal (nära Sveg) och är uppfödd på kenneln 

<B>Elliegården</B>.

<BR>

Nike tränas i vanlig lydnad, tävlingslydnad och spårning. <BR>

Hon tävlar i både lydnad och spår och tycker att det är 

mycket roligt. Hon vill arbeta hela tiden!.

</P>

</BODY>

</HTML>