This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
Välkommen! Vem säger att det är svårt och dyrt att göra hemsidor? Om du kan använda en ordbehandlare kan du också göra egna hemsidor. För att bevisa det har jag gjort en kurs i HTML, som är det språk man använder för att skriva hemsidor. HTML på svenska är ursprungligen en kurs som lades ut på internet 1996. Under åren har den använts av hundratusentals personer. Universitet, skolor och utbildningsföretag har använt den i sina utbildningar. Trots sina många år på nacken är innehållet högst aktuellt. HTML är fortfarande grunden för de flesta hemsidor. Kursen vänder sig framför allt till dig som inte har hållit på med HTML tidigare. Vi börjar från början och går igenom steg för steg hur du kan bygga en hemsida. Kursen har använts så många gånger, av alla sorters människor, att jag är alldeles övertygad om att det kommer att gå bra. Först går vi igenom nio steg där du får lära dig att göra en hemsida med bilder, länkar, textformatering, tabeller och en massa annat. Sen kommer ett antal fördjupningsavsnitt där jag besvarar de frågor jag oftast har fått. Sätt dig bekvämt så drar vi igång.
6
Vad behöver man för att göra hemsidor? En av de bästa sakerna med att göra hemsidor är att du inte behöver några dyra program eller avancerad utrustning. Det enda du måste ha är en texteditor och en webbläsare, till exempel Safari, Firefox, Internet Explorer eller Chrome. Om du har Microsoft Windows kan du använda Anteckningsblocket (i den engelska versionen heter det “Notepad”). Det går naturligtvis även bra att använda en ordbehandlare som Word, Pages, OpenOffice eller liknande, men eftersom du inte har någon användning för alla de avancerade funktionerna i en ordbehandlare är det ofta bättre att använda en enkel editor. I Mac OS X finns programmet Textredigerare som också går att använda.
7
Sitt ner och var tyst, nu börjar kursen! Inledning HTML är en förkortning av Hyper Text Markup Language och är egentligen inte ett programmeringsspråk utan en uppsättning markeringskoder. Varje textutseende och layout har sin egen kod eller “tagg” som man ibland kallar det (från engelskan). Jag har valt att kalla det kod eftersom det här är en svensk kurs. Koden för till exempel fetstil är (bold). All text som står efter en kod får det utseende koden ger. betyder “slut på fetstil”. Alla HTML-koder är omgivna av <>. De flesta koder fungerar på samma sätt. En startkod och en slutkod. Start-koden är omgiven av <> och slutkoden är omgiven av , som till exempel slutkoden för fetstil: . Koden för kursiv stil är (italics) och är slutkoden för kursiv stil. Ganska enkelt va?! Du kan skriva flera HTMLkoder på samma rad om du vill och det spelar ingen roll om du har mellanslag eller inte mellan koderna. Det här: Här är en kursiv text. Uppfattar webbläsaren likadant som det här: Här är en kursiv text.
8
Det viktigaste är att det är lätt att läsa koden. I kursen kommer vi oftast att ha en kod per rad. Det är lättare för en ovan att se vad som händer då. Nu när du har lärt dig grunderna är det dags att göra lite nytta.
9
Lektion 1: Min första hemsida Starta den texteditor eller ordbehandlare du vill använda för att skriva HTML-kod och skriv följande sex rader: Dessa rader ska alltid finnas med i dina HTML-dokument! Det spelar ingen roll om du skriver HTML-koder med gemener (små bokstäver) eller versaler (STORA BOKSTÄVER). I kursen använder vi versaler. Nu ska vi gå igenom vad ovanstående rader betyder. talar om för webbläsaren att här börjar den HTMLkod som beskriver hur sidan ska se ut. Följaktligen betyder koden “här slutar HTML-koden”. Utan dessa koder kommer webbläsaren att visa sidan på samma sätt som den ser ut i texteditorn och det kan bli rätt tröttsamt att läsa. Innanför -koderna talar man till exempel om vad sidan heter. Vi återkommer till det alldeles strax. -koderna anger var det du visar på sidan börjar och slutar. Det är mellan de koderna som det mesta av innehållet i en hemsida står.
10
Nu ska vi döpa sidan och fylla den med text. Infoga en rad mellan -koderna: <TITLE>Min hemsida <TITLE> används för att döpa sidan. Det du skriver mellan <TITLE>-koderna är det som står längst upp i webbläsaren när någon tittar på din sida. Vi ska snart titta efter hur det ser ut, men först ska vi lägga till ytterligare några rader: <TITLE>Min hemsida Välkommen till min hemsida! Det här är mitt första försök att göra en egen hemsida. Ju mer jag lär mig, desto bättre kommer sidan att bli. Ha lite tålamod så blir du rikligt belönad! När det gäller specialtecken som å, ä och ö finns det en del saker att tänka på, men det lämnar vi till senare. Om å, ä och ö ser konstiga ut på din sida behöver du inte oroa dig för det. Vi tar hand om det i lektion 9. 11
Nu är det äntligen dags att titta hur sidan ser ut. Spara dokumentet under namnet lektion1.htm. När du sparar dokumentet är det viktigt att du gör det i textformat. En vanlig ordbehandlare lägger till en del styrkoder om du inte sparar dokumentet i textformat. Om du använder en texteditor slipper du det problemet. Filtillägget “.htm” betyder att det är ett HTML-dokument. Ett HTML-dokument måste ha filtillägget “.htm” eller “.html”. Vi använder filtillägget “.htm” i våra övningar. Öppna html-dokumentet i webbläsaren. Kortkommandot Ctrl + O (i Windows) eller Cmd + O (i Mac) brukar fungera i många webbläsare. Leta reda på filen lektion1.htm. Här kan du se hur sidan ser ut.
12
Inte så snyggt, eller hur? All text hamnar i en enda lång rad fastän vi har skrivit den på olika rader. Det fixar vi i nästa lektion.
13
Lektion 2: Textformatering Med några nya koder ska vi se till att hemsidan vi gjorde i förra lektionen blir lite trevligare att titta på. Du vet redan att betyder fetstil och betyder kursiv stil. Lägg till några nya koder i HTML-dokumentet lektion1.htm: <TITLE>Min hemsida
Välkommen till min hemsida!
Det här är mitt första försök att göra en egen hemsida. Ju mer jag lär mig, desto bättre kommer sidan att bli. Ha lite tålamod så blir du rikligt belönad!
Vad koden
betyder är inte svårt att gissa: centrera. Allt efter
centreras mitt på raden.
talar om att centreringen ska upphöra.
14
betyder “rubrik storlek 1” (header 1). Storlek 1 är störst och 6 är minst:
betyder “nytt stycke” (paragraph). I vårt exempel visar det sig som en blankrad mellan rubriken och brödtexten. Det går inte att sätta in flera
efter varandra för att få ett stort mellanrum. Vill du ha det får du lösa det på andra sätt. Det finns en slutkod för “nytt stycke” (
). talar om att vi vill ha den efterföljande texten i storlek 4. Det finns 7 storlekar. 1 är den minsta och 7 är den största. Slutkoden är .
15
Nu ska vi se hur sidan ser ut. Spara den först, men byt namn till lektion2.htm. Öppna dokumentet i webbläsaren. Sidan ser ut så här.
Det börjar arta sig, men lite mer färger skulle se trevligt ut. Det tar vi i nästa lektion.
16
Lektion 3: Färger och horisontella streck “Standardutseendet” på en hemsida är vit bakgrund, svart text, blå obesökta länkar och röda besökta länkar. Det kan du lätt ändra på. Ändra i dokumentet “lektion2.htm” så att det ser ut så här: <TITLE>Min hemsida
Välkommen till min hemsida!
Det här är mitt första försök att göra en egen hemsida. Ju mer jag lär mig, desto bättre kommer sidan att bli. Ha lite tålamod så blir du rikligt belönad!
I koden kan man lägga till flera parametrar som talar om hur sidan ska se ut. BGCOLOR (background color) anger vilken bakgrundsfärg sidan ska ha. Färgkoden fungerar så här: 17
Tecknen efter # kan delas upp i tre grupper med två tecken vardera (7D BD E3). De talar om hur mycket rött, grönt och blått som ska blandas för att skapa den bakgrundsfärg man vill ha. Den första gruppen innehåller det hexadecimala värdet för mängden röd färg, nästkommande grupp hur mycket grönt och sista gruppen hur mycket blått som ska ingå i bakgrundsfärgen. I vårt exempel betyder det att vi vill ha CC (125 decimalt) röd färg, BD (189 decimalt) grönt och E3 (227 decimalt) blått. En hög siffra betyder att det ska vara mycket av färgen och en låg siffra att det ska vara lite. Minimum är 00 (ingen färg) och maximum är FF (max färg). Vår bakgrundfärg innehåller ganska mycket blått, lite mindre grönt och ännu mindre rött. Det blir en ljusblå nyans. Om du inte vill prova dig fram kan du använda någon av nedanstående färger. 000000 FFFFFF FF0000 00FF00 0000FF FFFF00 00FFFF FF00FF
= = = = = = = =
svart vitt rött grönt blått gult cyan lila
Saknar du någon färg? Experimentera med andra värden. I slutet av boken finns en tabell med 216 färger och deras värden. TEXT, LINK, VLINK och ALINK anger vad det ska vara för färg på text, obesökta länkar, besökta länkar och länkar i det
18
ögonblick du klickar på dem. Färgkoderna fungerar på samma sätt som med BGCOLOR. HTML-koden betyder att här vill vi ha ett horisontellt streck (horisontal rule) som har en längd som motsvarar 100 procent av skärmens bredd. Om du anger en bredd, men utelämnar %-tecknet betyder det att strecket ska vara så många pixlar brett. betyder att strecket nästan räcker hela vägen över en skärm som är 640 pixlar bred. Jag skrev tidigare att de flesta koder fungerar likadant, med en startkod och en slutkod. Här har vi ett undantag från det. Det finns koder som inte ändrar ett utseende och som därför inte behöver en slutkod. I dessa kombinerar man ihop start- och slutkod till en genom att sätta ett mellanslag och “/” före den avslutande > så att det blir till exempel (horisontellt streck) eller (radbrytning) i stället för och . De flesta webbläsare förstår även om du skulle skriva eller . Om du vill kan du även ändra färgen på text. gör efterföljande text röd. ändrar tillbaka till vanlig färg. Färgkoderna är desamma som för till exempel bakgrundsfärg.
19
Spara dokumentet under namnet lektion3.htm och se hur det ser ut. Det ser ut så här.
I nästa lektion ska vi lägga till länkar.
20
Lektion 4: Länkar En av de saker som gör hemsidor så spännande är att man kan placera länkar från en sida till en annan och på det sättet hoppa mellan olika sidor. Du kan till exempel göra en länk från en sida i Sverige till en sida i Australien. Det enda som krävs är att du har adressen till den sida du vill länka till. Man kan naturligtvis även göra länkar mellan egna sidor, eller till och med inom en sida. Det går att använda länkar till annat också. Vi ska snart titta på det. Vilka är våra favoritlänkar? iFokus och Aktieguiden är ganska bra. Då behöver vi veta vilka adresser, eller URL:er (Uniform Resource Locator), de har. iFokus har www.ifokus.se och Aktieguiden har www.aktieguiden.com. Länken till iFokus blir: iFokus Vi måste skriva http:// före adresserna. Vad betyder detta? Länkar har koden . HREF (Hypertext REFerence) talar om vilken typ av länk det är, nämligen en hyperreferens till en annan sida. Efter adress-koden talar du om vad det ska stå på länken: iFokus. Sedan avslutar vi länken med . Det var väl inte så svårt? Nu ska vi skapa länken till Aktieguiden. Vi börjar med att tala om vilken typ av länk vi vill göra:
21
Det här är mitt första försök att göra en egen hemsida. Ju mer jag lär mig, desto bättre kommer sidan att bli. Ha lite tålamod så blir du rikligt belönad! 22
Visst är det trevligt att få post! Därför ska vi lägga till en epostlänk, så att den som besöker hemsidan kan skicka några rader. Allt vi behöver är din e-postadress. Här använder vi [email protected]. Vi bygger upp länken steg för steg:
Det här är mitt första försök att göra en egen hemsida. Ju mer jag lär mig, desto bättre kommer sidan att bli. Ha lite tålamod så blir du rikligt belönad!
Spara dokumentet under namnet lektion4.htm. I nästa lektion ska vi använda bilder. Så här ser sidan från den här lektionen ut nu.
25
Lektion 5: Bilder Lite bilder kan lätta upp en hemsida. För att du ska kunna visa en bild på hemsidan bör den vara i antingen gif-, jpg- eller png-format. Ju större en bild är, desto längre tid tar det att ladda in den. Gif-bilder har den fördelen att de kan göras “genomskinliga” och man kan spara dem i ett sådant format att de laddas in gradvis med högre och högre upplösning (interlaced gif). Det är bra eftersom man kan se vad bilden föreställer redan innan den är helt laddad. Png-bilder kan också göras genomskinliga. Vi ska tala mer om bilder senare. Här är några bilder vi kan använda till hemsidan:
HTML-koden för de tre skönheterna på översta bilden är: 26
IMG (image) talar om att vi vill visa en bild. SRC (source) talar om att källan (bilden) heter vacker.jpg. Du måste ange sökvägen till bilden om den inte ligger i samma katalog som den HTML-sida som anropar den. Om vacker.jpg hade legat i en underkatalog som heter bilder skulle koden ha blivit: Observera att snedstrecket (/) ska luta framåt och inte bakåt som du kanske är van vid från en del datorer. BORDER=1 betyder att vi vill ha en ram som är 1 pixel bred runt bilden. Om du inte vill ha någon ram skriver du BORDER=0. En del har webbläsare som inte kan visa bilder, exempelvis synskadade som använder skärmläsare. För att de ändå ska veta vad en bild föreställer kan vi hjälpa dem genom att lägga till lite kod: ALT (alternative) gör att de som inte kan se bilden i stället ser den alternativa texten. Du måste inte använda ALT, men det är hövligt att göra det. Dessutom är det bra för sökmotorer, som inte heller kan se vad bilder föreställer. Vi lägger till bilderna på hemsidan från lektion 4: <TITLE>Min hemsida 27
Välkommen till min hemsida!
Det här är mitt första försök att göra en egen hemsida. Ju mer jag lär mig, desto bättre kommer sidan att bli. Ha lite tålamod så blir du rikligt belönad!
Jag bytte ut texterna iFokus och Aktieguiden mot koden för bilderna. Det betyder att bilderna fungerar som länkar. När man klickar på bilderna blir man skickad till iFokus eller Aktieguidens hemsidor. Det är väl snyggt?
29
Spara sidan under namnet lektion5.htm och titta hur den ser ut.
Ålrajt, nu börjar det se ut som en riktig hemsida!
30
Lektion 6: Tabeller Vi ska lägga till en tabell på hemsidan. Först ska vi titta lite på hur man gör tabeller. Vi börjar med enklast tänkbara. En tabell med bara en ruta: En ruta med ram runt Nu ska vi gå igenom steg för steg hur man gör. Vi börjar med att tala om att vi vill ha en tabell:
TABLE (tabell) betyder att vi vill göra en tabell. BORDER=1 talar om att det ska vara en ram som är 1 pixel bred mellan rutorna och runt tabellen. Nästa steg är att tala om att vi vill påbörja en rad i tabellen:
(table row) betyder att här börjar en ny rad i tabellen. Vi måste tala om att vi vill ha ett fält i tabellen också:
En ruta med ram runt
31
(table data) gör att vi får ett datafält i tabellen. Dessa tre rader är vad vi behöver för att definiera en enkel tabell. Vi sätter dit slutkoder också:
En ruta med ram runt
Nu ska vi lägga till en ruta i tabellen bredvid den vi redan har. Det ser ut så här:
En ruta med ram runt
En till ruta med ram runt
Vi lägger alltså till ett datafält efter det första men före slutet på raden (
). Då ser tabellen ut så här: En ruta med ram runt
En till ruta med ram runt
32
När vi ändå är igång kan vi lägga till en rad i tabellen så att det blir två rader med vardera två fält i:
En ruta med ram runt
En ruta till med ram runt
En ruta med ram runt på rad 2
En ruta till med ram runt på rad 2
Vi lägger in koderna för den nya raden efter den första raden, men före tabellslutet (
). Blev det mycket på en gång? Vi skriver om ovanstående HTML-kod på ett annat sätt så blir det lättare att förstå:
33
Utan att ändra ordningen på HTML-koderna har vi flyttat dem så att flera hamnar på samma rad. Då ser vi att tabellen börjar med
och slutar med
. Varje tabellrad börjar med en
(ny rad) och slutar med en
(radslut). Varje ruta börjar med en
(ny ruta) och slutar med en
(rutslut). Det blev väl lite mer överskådligt? Du kan säkert gissa att tabellen ovan ser ut så här: Ruta 1, rad 1
Ruta 2, rad 1
Ruta 1, rad 2
Ruta 2, rad 2
Ibland händer det att man vill ha en ruta som är lika lång som flera fält. Vi gör en sådan och sätter en rubrik i den:
Tabellrubrik
Ruta 1, rad 1
Ruta 2, rad 1
Ruta 1, rad 2
Ruta 2, rad 2
(table header) fungerar på samma sätt som
, med den skillnaden att allt som står i ett
-fält skrivs med fetstil och centreras. COLSPAN=2 betyder att fältet ska vara lika brett som 2 kolumner (fält) i tabellen. På samma sätt finns det en kod som heter ROWSPAN och som anger hur många rader högt ett fält ska vara.
34
Vi ser efter hur tabellen tar sig ut nu: Tabellrubrik Ruta 1, rad 1
Ruta 2, rad 1
Ruta 1, rad 2
Ruta 2, rad 2
Det finns fler funktioner att använda tillsammans med tabeller, men dem kan vi lämna till senare. Nu ska vi göra en tabell på vår hemsida. Vi gör en tabell med ytterligare några av våra favoritlänkar i. Komplettera HTML-dokumentet från lektion 5 så att det ser ut så här: <TITLE>Min hemsida
Välkommen till min hemsida!
Det här är mitt första försök att göra en egen hemsida. Ju mer jag lär mig, desto bättre kommer sidan att bli. Ha lite tålamod så blir du rikligt belönad!
WIDTH="80%" är en frivillig kod som betyder att tabellen ska ha en bredd som motsvarar 80 procent av webbläsarfönstrets bredd. Du kan även ange bredden i pixlar. Vi ska göra en sak till med tabeller innan vi går vidare till nästa lektion. Som sidan ser ut nu kommer texten att löpa från vänster kant till höger innan den radbryts. För den som har en skärm med hög upplösning kommer det att bli breda rader som är svåra att läsa. Därför ska vi lägga in en tabell som begränsar bredden på sidan till 900 pixlar.
37
Gör så här: <TITLE>Min hemsida
Välkommen till min hemsida!
Det här är mitt första försök att göra en egen hemsida. Ju mer jag lär mig, desto bättre kommer sidan att bli. Ha lite tålamod så blir du rikligt belönad!
Här har vi alltså lagt in innehållet på hemsidan i en tabell som är 900 pixlar bred. För att få sidan centrerad i mitten av webbläsarfönstret satte jag en
efter och en avslutande
före . Lägg också märke till att de två horisontella strecken inte längre är 100 procent av webbläsarfönstrets bredd, utan 100 procent av tabellens bredd.
40
Spara dokumentet under namnet lektion6.htm och ta en titt på sidan. Så här ser den ut.
Vi fortsätter med lektion 7.
41
Lektion 7: Sökmotorer Det kan vara roligt att ha en sökmotor på sin hemsida. Det ska vi lägga till nu. Det finns många olika sökmotorer så vi väljer en: Google. Det som behövs för att göra en sökmotor är ett formulär där vi kan fylla i det vi söker efter och en knapp för att tala om att sökningen ska börja. Dessutom behöver vi ett program som utför själva sökningen. På Googles hemsida finns koden för deras sökmotor. Så här ser den ut:
Koden börjar och slutar med . Allt som står innanför är kommentarer till 42
HTML-koden och visas inte på hemsidan. I det här fallet talar det om för oss var koden för Googles sökmaskin börjar och slutar. avslutar formuläret. Övriga koder har vi gått igenom tidigare så dem tänker jag inte kommentera mer än att det är en tabell och en bildlänk. Detta är vad som sker: När vi trycker på knappen submit överlämnas det som står i inmatningsfältet, q, till sökprogrammet som skickar tillbaka en ny sida med svaren till oss. Så här ser det färdiga formuläret ut:
Vi skapar en ny sida och lägger in sökmotorn på den. Kommer du ihåg hur man börjar? Och så lite färg: 44
Och formuläret med sökmotorn:
45
Det var det. Jag passade på att byta bakgrundsfärgen på tabellen till samma blå som resten av sidan har (#7DBDE3). Spara sidan med namnet lektion7.htm. Så här ser den ut.
46
Lektion 8: Ramar - flera fönster Ramar (frames på engelska) gör det möjligt att dela upp skärmen i flera fönster och visa olika saker i de olika fönstren. Om du till exempel har en sida med favoritlänkar kan du dela upp skärmen i två delar. I det ena fönstret visas en lista med länkarna och i det andra visas sidan för den länk man valt. Nu ska vi lära oss hur man bygger en sida som innehåller ramar. Först talar vi om att vi vill göra ramar: Ingen överraskning direkt. Här är hela koden för våra ramar:
48
Vi skapar en ny HTML-sida och lägger in koden: <TITLE>Min första hemsida En del webbläsare kan inte visa ramar. Vad kommer de som har sådana webbläsare att se? En tom sida. Vad kan vi göra åt det? Vi kan lägga till en kod som heter . Det som står mellan <NOFRAMES>-koderna visas i de webbläsare som inte kan visa ramar. Vi ska vara hyggliga och lägga till det i vår ram-sida: <HTML> <HEAD> <TITLE>Min första hemsida</TITLE> </HEAD> <FRAMESET ROWS="60,*"> <FRAME SRC="lektion7.htm" SCROLLING="no" NAME="huvud"> <FRAME SRC="lektion6.htm" NAME="visa"> <NOFRAMES> <P> Den här sidan kräver att man har en internetläsare som kan visa så kallade "ramar". </P> <P> 49<br />
<br />
Du som inte har det kan titta <A HREF="lektion6.htm" rel="nofollow">här</A> </P> Spara sidan under namnet lektion8.htm. Innan vår hemsida fungerar som den ska måste vi lägga till en kod i sidan vi skapade i lektion 7, om sökmotorer. På det sättet har vi kvar sökmotorn i det övre fönstret även när vi har gjort en sökning. Så här gör vi:
Det här är mitt första försök att göra en egen hemsida. Ju mer jag lär mig, desto bättre kommer sidan att bli. Ha lite tålamod så blir du rikligt belönad!
Som du ser ska BACKGROUND ligga innanför samma <> som BODY. Tänk på att stora bakgrundsbilder tar längre tid att läsa in. Så här ser vår hemsida ut nu.
Det finns fler, men detta är några av de mest användbara med svensk teckenuppsättning. Att ersätta specialtecken med 59
character entities kan vara ganska tidsödande. Det är faktiskt ett jobb som en enkel ordbehandlare eller texteditor kan hjälpa till med. De flesta ordbehandlare och texteditorer har en funktion som heter någonting i stil med “sök & ersätt” (find & replace). Den kan man använda till att säga “sök alla å och ersätt med å” och så vidare. Då går det ganska fort. Den som är duktig på att bygga makron i ordbehandlare kan lätt sätta ihop ett makro som ersätter alla specialtecken med character entities. Glöm inte inte att ändra alla specialtecken på din hemsida! Vi gör det på vår sida. Då ser koden ut så här: <TITLE>Min hemsida
Välkommen till min hemsida!
Det här är mitt första försök att göra en egen hemsida. Ju mer jag lär mig, desto bättre kommer sidan att bli. Ha lite 60
Listor Ibland vill man ställa upp saker i punktform. Det finns några funktioner i HTML som är till för just det. Börja med att tala om att du vill göra en punktlista. Det gör du med
(unnumbered list). Starta varje listrad med
(list item) och avsluta dem med
. Vi gör en enkel lista:
Rad
Rad
Rad
Och
ett i vår två i vår tre i vår så vidare
lista lista lista ...
Så här ser ovanstående ut:
• • • •
Rad ett i vår lista Rad två i vår lista Rad tre i vår lista Och så vidare ...
Nu gör vi samma sak, men byter ut
mot så att vi får en numrerad lista (ordered list):
Rad
Rad
Rad
Och
ett i vår två i vår tre i vår så vidare
lista lista lista ...
63
Det ser ut så här när du är färdig: 1. 2. 3. 4.
Rad ett i vår lista Rad två i vår lista Rad tre i vår lista Och så vidare ...
Vi går vidare och gör en lista med flera nivåer. Det går till på det viset att vi lägger flera listor i varandra:
Rad
Rad
Rad
Rad
ett i första nivån
två i första nivån
ett i andra nivån
två i andra nivån
Lägg märke till att den andra listan ligger före den första listans avslutande
. Så här ser den ut: 1. 2.
Rad ett i första nivån Rad två i första nivån • Rad ett i andra nivån • Rad två i andra nivån
Det finns en del andra sätt att definiera listor, men vi nöjer oss med det vi har gått igenom. Det kommer du långt med.
Det var väl inte heller så svårt att förstå? I det tredje exemplet ligger min_sida.htm i en annan katalog på samma nivå som den katalog vi befinner oss i. Den katalogen heter katalog. Länken ska se ut så här: Länk Här kan en förklaring vara på sin plats. ../ betyder att vi ska gå upp ett steg i katalogstrukturen. katalog/min_sida.htm talar om att vi sen vill hoppa ner i katalogen katalog och öppna sidan min_sida.htm. Om du vill hoppa upp flera steg i katalogstrukturen sätter du flera ../ efter varandra: Länk Nu kan du allt om länkar till egna sidor också.
Den ser ut så här innan vi har färglagt den: Cell 1
Cell 2
Cell 3
Cell 4
Koden för bakgrundsfärg heter, som du kanske kommer ihåg från lektion 3, BGCOLOR. Vi vill att tabellen i vårt exempel ska ha gul bakgrundsfärg och att den övre vänstra rutan ska ha röd bakgrundsfärg. Vi lägger till den kod vi behöver i tabellen vi nyss skapade:
Cell 1
Cell 2
76
Cell 3
Cell 4
Så här ser det ut: Cell 1
Cell 2
Cell 3
Cell 4
“Hur bestämmer jag storleken på en tabell?” Det gör du med WIDTH och HEIGHT. Du kan ange bredd och höjd i pixlar eller som en procentsats i förhållande till webbläsarfönstret. Vi börjar med att skapa en tabell med fyra rutor.
Cell
Cell
Cell
Cell
Sen bestämmer vi att den ska vara 300 pixlar bred och 300 pixlar hög.
Cell
Cell
Cell
Cell
77
Så här ser den ut:
Det går också att bestämma storleken på cellerna. De två cellerna till vänster får vara 50 pixlar och de högra 100 pixlar breda:
Cell
Cell
Cell
Cell
78
Och då ser det ut så här:
Vi sätter höjden på cellerna när vi ändå håller på:
Cell
Cell
Cell
Cell
79
Så här ser den färdiga tabellen ut:
80
Vanliga frågor om ramar (frames) “Vad är flytande ramar för något?” Flytande ramar ger möjlighet att skapa ett ram-fönster var som helst på sidan. Koden för flytande ramar heter IFRAME (inline frame). Så här används den: <IFRAME SRC="http://www.ifokus.se" WIDTH=400 HEIGHT=200> IFRAME är startkoden för flytande ramar. SRC="http:// www.ifokus.se" anger vad vi vill visa i fönstret. WIDTH och HEIGHT bestämmer bredd och höjd på fönstret. Slutkoden heter och är obligatorisk.
81
Vanliga frågor om allt möjligt “Vad är META-koder bra för?” Man kan bland annat använda META-koder för att hjälpa en del sökmotorer att indexera en sida. Om jag har en sida som innehåller information om Porsche 356, rockgruppen ZZ-Top och länkar till olika HTML-kurser kanske jag vill att sökning på orden Porsche, ZZ-Top och HTML ska ge en träff på min sida. Då kan jag använda: <META name="keywords" content="Porsche, ZZTop, HTML"> name="keywords" betyder att det är en definition av nyckelord för sidan och content="Porsche, ZZ-Top, HTML" säger att nyckelorden är Porsche, ZZ-Top och HTML. METAinformation ska ligga innanför och . Det fungerar inte i alla sökmotorer. Om du vill styra hur din sida beskrivs i sökmotorer kan du också använda META-koder. I stället för name="keywords" använder du då name="description" och efter content=" beskriver du vad sidan handlar om: <META name="description" content="Den här sidan handlar om Porsche 356, ZZ-top och HTMLkurser."> Det är inte alla sökmotorer som använder META-beskrivningar, men i och med att du har använt dem är du på säkra sidan.
82
Avslutning Om du har gått igenom hela kursen har du förhoppningsvis lärt dig ganska mycket om HTML och hur du bygger hemsidor. Har jag bevisat att det inte är svårt? Den här kursen är tänkt som ett första steg. Vill du lära dig mer finns det tusentals ställen på nätet där du kan hitta mer information. När du är nöjd med din hemsida kanske du vill att andra ska hitta den. Se till att den hamnar så högt som möjligt i sökmotorerna. Det gör du med sökmotoroptimering. Jag berättar mer om det i min bok som heter just Sökmotoroptimering.
Den
finns
både
som
pappersbok
91-974895-1-4) och e-bok (ISBN 91-974895-4-9). Lycka till med hemsidebyggandet! Niklas Johansson
83
(ISBN
Webbfärger 216 färger de flesta skärmar kan visa #0000 00 #0000 33 #0000 66 #0000 99 #0000 CC #0000 FF #3300 00 #3300 33 #3300 66 #3300 99 #3300 CC #3300 FF #6600 00 #6600 33 #6600 66
Tack Som vanligt när jag skriver böcker har människor i min närhet hjälpt till. I den här boken är det Tom Monder och Cattis Öhman som förtjänar ett extra stort tack! I stort sett alla era förslag till förbättringar är med i boken. :-) Åsa har hjälpt till med korrekturläsning, utöver att hon håller familjen flytande medan jag skriver. Sist vill jag tacka alla tusentals som har hört av sig under åren och delat med sig av synpunkter och beröm. Niklas
88
Om författaren Niklas Johansson har mångårig erfarenhet av arbete med internet. Han är en av personerna bakom det sociala intressenätverket iFokus, finanssajten Aktieguiden och många andra webbplatser. Förutom HTML på svenska har Niklas även skrivit böcker om ämnen som sökmotoroptimering (ISBN 91-974895-1-4), konsten att driva webbforum (ISBN 91-974895-2-2) och snabbläsning (ISBN 91-974895-0-6).
Foto: Emmy Johansson
89
Mer läsning från Bokstavligt förlag ...
90
Sökmotoroptimering - konsten att hamna högt i sökmotorer och få fler nöjda besökare (ISBN 91-974895-1-4) Vad skulle det betyda för dig om din webbplats hamnade högt upp i sökmotorernas resultatlistor?
• • •
Fler besökare? Högre försäljning? Mer annonsintäkter?
Lär dig vad sökmotorerna tycker om och anpassa webbplatsen så att du kan ge de bästa en match om höga sökmotorplaceringar. På köpet får du en webbplats som är informativ och lättare att hitta på. Dessutom blir den bättre anpassad för människor med funktionshinder. Oavsett om du är ansvarig för en stor webbplats, privatperson med en blogg eller driver ett diskussionsforum med miljontals användare kan boken vara till hjälp i jakten på besökare. Den här boken är skriven för att vara lättläst så att du kan komma igång snabbt.
91
Webbforum - skapa ett livskraftigt community genom effektiv kommunikation och levande diskussionsforum (ISBN 91-974895-2-2) Led ditt diskussionsforum till framgång! Som ansvarig för ett webbforum eller ett community är det många saker att hålla reda på. Allt från hur du strukturerar och uppmuntrar aktivitet, till viktiga lagar och konflikthantering.
• • • • • • • •
Vad kan jag göra för att skapa aktivitet i diskussionerna? Hur bemöter jag irriterade användare? Vilka egenskaper ska jag leta efter hos medarbetare? Vad kan jag göra för att få god stämning på webbplatsen? Borde jag skriva avtal med användarna? Vad behöver jag veta om lagar för att driva webbforum? Hur kan jag underlätta för funktionshindrade att delta i diskussionerna? Hur förebygger jag konflikter?
Din framgång beror till stor del på hur effektivt du hanterar alla återkommande ärenden. För att lyckas behöver du tydliga 92
strategier och bra rutiner. I den här boken får du råd och exempel som används och fungerar på levande webbplatser.
93
Snabbläsning - vägen till effektivare läsning (ISBN 91-974895-0-6) Livet handlar till stor del om att lära sig saker. Krypa, gå, springa, cykla, läsa, räkna och så vidare. Läsning är nyckeln till en stor del av all annan kunskap. Från det att vi har lärt oss att läsa är läsning en förutsättning för nästan alla andra studier. Svenska, historia, samhällskunskap, och så vidare. På de flesta arbetsplatser krävs det att man kan läsa och många måste läsa mycket för att hålla sig à jour. Att inte kunna läsa alls är ett stort handikapp. Den som däremot behärskar snabbläsning har stora fördelar av det. Snabbläsning handlar inte om att slarva igenom en text så snabbt du kan. Du läser snabbare, men inte slarvigare. Du förstår minst lika mycket som vid “vanlig” läsning. En sak du får lära dig i boken, är att sätta upp mål och läsa rätt saker, något som är viktigt vid snabbläsning. En annan sak du får lära dig, är att inte hoppa tillbaka i texten när du läser. Snabbläsning är inte hokus pokus. Det kräver inte några övermänskliga förmågor. Snabbläsning är en fråga om teknik. Ungefär som att köra bil. Om du lär dig teknikerna och övar blir du snabbläsare.
94
Boken Snabbläsning är skriven för dig som tycker att du läser långsamt och vill lära dig att läsa snabbare och effektivare. Hur skulle ditt liv förbättras om du kunde läsa dubbelt så fort?
26
Observera att snedstrecket (/) ska luta framåt och inte bakåt som du kanske är van vid från en del datorer. BORDER=1 betyder att vi vill ha en ram som är 1 pixel bred runt bilden. Om du inte vill ha någon ram skriver du BORDER=0. En del har webbläsare som inte kan visa bilder, exempelvis synskadade som använder skärmläsare. För att de ändå ska veta vad en bild föreställer kan vi hjälpa dem genom att lägga till lite kod: 
Du kan även använda WIDTH och HEIGHT till att ändra storleken på bilder: 
