Niklas Johanssons
HTML på svenska - lär dig göra hemsidor
Bokstavligt förlag 2
HTML på svenska - lär dig göra hemsidor Författare: Niklas Johansson Bokstavligt förlag: www.bokstavligt.com ISBN: 91-974895-6-5 © Niklas Johansson
3
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: 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! 22
Mina favoritlänkar:
iFokus Aktieguiden
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 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 tålamod så blir du rikligt belönad! Här är mina idoler: Mina favoritlänkar: Fler favoritlänkar: | Bokstavligt Förlag | 61 Ger ut läroböcker, exempelvis HTML på svenska och Sökmotoroptimering. | Tongoys | Leksaken vuxna önskar fanns när de var små. En bra anledning att skaffa barn. :-) | [email protected] |
62
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:
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
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.
64
Interna länkar I stora sidor är det ofta bra att kunna hoppa snabbt mellan olika ställen inom sidan. Det gör du med interna länkar. För att kunna hoppa till ett ställe inom sidan måste du sätta ett så kallat “ankare” på den plats du vill kunna hoppa till. Ett ankare kan se ut till exempel så här: Byt ut ankare mot vilket namn du vill så länge det bara används en gång på samma sida. När du har ett ankare är det lätt att göra en länk till den platsen på sidan: # betyder att länken refererar till ett ankare. Interna länkar kan även användas för förflyttning från en sida till ett namngivet ställe på en annan sida. En sådan länk kan se ut så här: Eller om den ligger i en annan domän: Ett bra användningsområde är innehållsförteckningar. Där kan du göra länkar från de olika innehållsposterna till rätt plats på sidan.
65
Fördjupningsavsnitt Vanliga frågor om första hemsidan “Jag har fått några ’kinesiska tecken’ eller liknande längst upp på min sida. Vad beror det på och hur får jag bort dem?” Det vanligaste felet är att du använder en ordbehandlare när du skriver sidan och glömmer att spara den i textformat. Då lägger ordbehandlingsprogrammet till en del styrkoder som kan få sidan att se väldigt ful ut. Ibland går det inte att läsa den alls. Använd helst en enkel text-editor eller se till att spara sidan som “text”. “Vad är det för skillnad mellan .htm och .html?” Skillnaden mellan .htm och .html är endast den att i till exempel äldre Windows-versioner kunde man bara använda tre tecken i filtillägget. Funktionen är densamma oavsett vilket du använder. “Om jag vill ha ett eget domännamn, hur skaffar jag det?” Det finns många sätt att skaffa det. Själva registreringen brukar man kunna få hjälp med av webbhotell. När du har namnet behöver du en server som namnet är kopplat till. Det är inte nödvändigt att ha sin hemsida på samma server som domännamnet utan du kan ha en så kallad “forwardingtjänst” (vidarebefordring) som innebär att alla som går till www.din-domän.com hamnar på din hemsida.
66
”Hur gör jag för att lägga ut min hemsida på nätet?” Hur du går till väga beror på var (vilket webbhotell) du ska lägga din sida. Det är olika på olika ställen. Läs på webbhotellets supportsidor eller kontakta deras kundtjänst.
67
Vanliga frågor om textformatering “Jag vill ha ett annat teckensnitt. Hur ändrar jag det?” För att välja teckensnitt på ett textavsnitt skriver du till exempel där textavsnittet börjar. Ersätt "namn-på-teckensnittet" med det teckensnitt du vill ha. Exempel på användbara teckensnitt är Arial, Courier, Times och Verdana. Slutkoden för är . En förutsättning för att besökaren ska se din sida i de teckensnitt du anger är att han eller hon har teckensnitten installerade på sin dator. Det går att ange flera alternativa teckensnitt genom att skilja dem åt med kommatecken (). De väljs i den ordning du skriver dem. “Hur gör jag en enkel radmatning? Med (paragraph) blir det ju en blankrad.” Enkel radbrytning får du med koden
(break). “Om jag vill att flera ord eller siffror ska hamna på samma rad, hur gör jag då?” Det finns en kod som heter (no break). Den har slutkoden och gör att texten mellan koderna inte delas upp på olika rader. Om du till exempel skriver ett tal (100 000 000 000 000 000) är det inte så snyggt om det delas upp på flera rader. Då är det bra att finns.
68
Vanliga frågor om färger och horisontella streck “Går det att ha länkar i olika färger på en sida?” Det går. Du kan ändra länkfärg på samma sätt som textfärg (). Tänk på att det kan bli rörigt med för många olika färger och att många användare är vana vid att länkar är blå. “Kan jag ändra färgen på det horisontella strecket?” Ja, det kan du göra. Du ändrar färgen med koden COLOR. skapar ett rött streck.
69
Vanliga frågor om länkar “Jag har en fil som jag vill att besökaren ska kunna läsa ner från min sida. Hur gör jag då?” Det är inte svårt. Det fungerar på samma sätt som andra länkar. Vi gör ett exempel. Tänk dig att du har en zip-fil som heter bilder.zip och som du vill att dina besökare ska kunna hämta. Filen ligger i samma katalog som sidan du ska göra länken ifrån. Då kan länken se ut så här: Zip-fil med bilder När besökarens webbläsare ser att det inte är ett HTML-dokument kommer den att fråga vad man vill göra med filen, det vill säga spara den på disken eller öppna den med något program. “Jag har gjort flera sidor som jag vill länka till varandra. Hur ska länkarna se ut?” Om vi till att börja med utgår ifrån att alla dina sidor ligger i samma katalog, och att den sida du vill göra en länk till heter “min_sida.htm”, kan länken se ut så här: Länk Nu gör vi ett exempel där “min_sida.htm” ligger i en underkatalog som heter “underkatalog”. En sådan länk ska se ut på det här viset: Länk 70
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å.
71
Vanliga frågor om bilder “Bilderna visas inte på min hemsida. Vad är det för fel?” Att bilderna inte visas beror vanligtvis på att du har skrivit fel namn i koden till bilderna eller också ligger inte bilderna på rätt ställe. Namnet måste vara EXAKT rätt. Stora och små bokstäver också. GIBSON.JPG är inte alltid samma sak som gibson.jpg i internetvärlden. Kontrollera att det är rätt. Annars är det bilderna som inte ligger på rätt ställe. Om du inte har skrivit annat i koden ska de ligga i samma katalog som HTML-dokumentet. “Hur sparar jag en bild som jag hittar på internet?” För att spara en bild från internet i din dator klickar du med höger musknapp på bilden och väljer alternativet “Spara bild som…” (”Save picture as…”). Tänk på att be om lov innan du använder andras bilder på din hemsida. “Det tar lång tid att läsa in bilderna på min hemsida. Kan jag göra något åt det?” Det finns en del knep när det gäller bilder. Det allra enklaste är att ange bildens storlek så att webbläsaren slipper räkna efter själv. Det gör du med koderna WIDTH (bredd) och HEIGHT (höjd).
72
Vi gör några exempel:
Bilden är 300 pixlar bred och 184 pixlar hög. Det betyder att vi kan skriva koden så här: Du kan även använda WIDTH och HEIGHT till att ändra storleken på bilder:
73
En annan sak som gör bilder mindre och därmed snabbare att läsa ner, är att välja rätt bildformat på bilderna. En tumregel är att använda jpg-format för fotografiska bilder och gif-format för ritade bilder. Vi gör några exempel på det också: Foton:
300 x 184 pixlar jpg: 7 kilobyte
300 x 184 pixlar gif: 12 kilobyte
74
Ritade bilder:
398 x 169 pixlar gif: 3 kilobyte
398 x 169 pixlar jpg: 12 kilobyte
Jag tycker att siffrorna talar ganska tydligt för sig själva. Trots att bilderna är lika stora på skärmen tar de olika mycket plats på disken. Png är ett bildformat som också passar bra för ritade bilder. Till skillnad från gif kan det visa miljontals färger, precis som jpg. Gif kan bara visa 256 färger.
75
Vanliga frågor om tabeller “Kan jag göra bakgrundsfärg på en tabell?” Ja, visst kan du göra det. Det går även bra att bestämma bakgrundsfärgen på varje enskild cell. Koden är densamma som när du bestämmer bakgrundsfärgen på hemsidan. Vi gör ett exempel med en tabell med fyra celler.
Cell 1 | Cell 2 |
Cell 3 | Cell 4 |
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. Sen bestämmer vi att den ska vara 300 pixlar bred och 300 pixlar hög. 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: 78
Och då ser det ut så här:
Vi sätter höjden på cellerna när vi ändå håller på:
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
#0033 00 #0033 33 #0033 66 #0033 99 #0033 CC #0033 FF #3333 00 #3333 33 #3333 66 #3333 99 #3333 CC #3333 FF #6633 00 #6633 33 #6633 66
#0066 00 #0066 33 #0066 66 #0066 99 #0066 CC #0066 FF #3366 00 #3366 33 #3366 66 #3366 99 #3366 CC #3366 FF #6666 00 #6666 33 #6666 66
#0099 00 #0099 33 #0099 66 #0099 99 #0099 CC #0099 FF #3399 00 #3399 33 #3399 66 #3399 99 #3399 CC #3399 FF #6699 00 #6699 33 #6699 66
84
#00CC 00 #00CC 33 #00CC 66 #00CC 99 #00CC CC #00CC FF #33CC 00 #33CC 33 #33CC 66 #33CC 99 #33CC CC #33CC FF #66CC 00 #66CC 33 #66CC 66
#00FF 00 #00FF 33 #00FF 66 #00FF 99 #00FF CC #00FF FF #33FF 00 #33FF 33 #33FF 66 #33FF 99 #33FF CC #33FF FF #66FF 00 #66FF 33 #66FF 66
#6600 99 #6600 CC #6600 FF #9900 00 #9900 33 #9900 66 #9900 99 #9900 CC #9900 FF #CC00 00 #CC00 33 #CC00 66 #CC00 99 #CC00 CC #CC00 FF #FF00 00 #FF00 33
#6633 99 #6633 CC #6633 FF #9933 00 #9933 33 #9933 66 #9933 99 #9933 CC #9933 FF #CC33 00 #CC33 33 #CC33 66 #CC33 99 #CC33 CC #CC33 FF #FF33 00 #FF33 33
#6666 99 #6666 CC #6666 FF #9966 00 #9966 33 #9966 66 #9966 99 #9966 CC #9966 FF #CC66 00 #CC66 33 #CC66 66 #CC66 99 #CC66 CC #CC66 FF #FF66 00 #FF66 33
#6699 99 #6699 CC #6699 FF #9999 00 #9999 33 #9999 66 #9999 99 #9999 CC #9999 FF #CC99 00 #CC99 33 #CC99 66 #CC99 99 #CC99 CC #CC99 FF #FF99 00 #FF99 33
85
#66CC 99 #66CC CC #66CC FF #99CC 00 #99CC 33 #99CC 66 #99CC 99 #99CC CC #99CC FF #CCCC 00 #CCCC 33 #CCCC 66 #CCCC 99 #CCCC CC #CCCC FF #FFCC 00 #FFCC 33
#66FF 99 #66FF CC #66FF FF #99FF 00 #99FF 33 #99FF 66 #99FF 99 #99FF CC #99FF FF #CCFF 00 #CCFF 33 #CCFF 66 #CCFF 99 #CCFF CC #CCFF FF #FFFF 00 #FFFF 33
#FF00 66 #FF00 99 #FF00 CC #FF00 FF
#FF33 66 #FF33 99 #FF33 CC #FF33 FF
#FF66 66 #FF66 99 #FF66 CC #FF66 FF
#FF99 66 #FF99 99 #FF99 CC #FF99 FF
86
#FFCC 66 #FFCC 99 #FFCC CC #FFCC FF
#FFFF 66 #FFFF 99 #FFFF CC #FFFF FF
Vanliga HTML-koder Användning
Startkod
Ankare
Centrering
Fetstil
Horisontellt
Saknas
Kursivering
Länk
Stycke
Tabell
Tabellcell
|
Tabellrad
|
Tabellrubrik
|
Bild
Slutkod
streck
Radbrytning Rubrik
Understrykning
Saknas
87
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?
95
Bokstavligt förlag www.bokstavligt.com
96