1. Grundkoden för en sida.
2. Styckeformatering och indrag.
3. Rubriker
4. Logisk eller fysisk stil?
5. Teckensnitt och färger.
6. Skapa länkar.
7. Avgränsare.
8. När din sida är färdig.
9. Förslag på länkar.
<BODY>
</BODY>
</HTML>
All text och alla koder skrivs mellan BODY-elementen. Vissa specialfunktioner läggs in mellan HEAD-elementen och detta kan du läsa om på andra sidor på den här webresursen. Ytterligare några koder skrivs inne i BODY, bl.a för bakgrundsfärg, textfärg och länkfärger. Här är den färgkod som jag har använt på min webresurs:
<BODY text=#FFFFFF background="bakgrund/blackway.gif" link="#FFCC00" vlink="#00CC00" alink="#FF3300">
Paragrafelementet används för att markera nytt stycke. Webbläsaren gör automatiskt ett nytt stycke när den hittar ett <P>. Avslutningen </P> behövs sällan (men undantag finns).
Ett annat viktigt element är det som ger radbrytning och skrivs:
<BR>
Tips: Texten blir rörig om man skriver den i en enda stor klump. Använd därför gott om mellanslag och gör nytt stycke före varje nytt element. Då blir det lättare för dig att läsa texten i texteditorn. Och änk på att webbläsaren inte bryr sig om dina radbrytningar, om du inte använder <P> eller <BR>.
<CENTER></CENTER>
Talar om för webbläsaren att texten (eller vad det nu är du vill ha centrerat) skall placeras i mitten. Kommandot </CENTER> avslutar centreringen. Så här blir det:
Tips: Det spelar inte någon roll om du skriver <CENTER> eller <center>, dvs. om du använder små eller stora bokstäver. Därför är det vanligt att man skriver elementnamnen med stora bokstäver och attributen med små bokstäver. Då blir det lättare att läsa koden.
För att centrera en text kan man också använda sig av ett attribut till <P>, som skrivs så här:
<P align="center"></P>
Detta skapar också centrering av texten. Observera att du måste avsluta <P> för att inte resten av texten skall påverkas.
Tips: Många webbläsare klarar inte av align-attributet inne i P och därför rekommenderar jag dig att använda CENTER-elementet i stället.
<P align="right"></P>
Då kommer texten i stället att bli högerjusterad.
Detta kan vara användbart när man t.ex. gör tabeller.
Texten följer då i stället högerkanten.
Notera dock det som jag nyss tipsade om!
Indrag (indent på engelska) innebär att en rad eller ett stycke flyttas åt höger. Sådant är vanligt i böcker, där första raden i ett nytt stycke ofta börjar ett par mellanslag längre in än resten av stycket. Det finns emellertid olika slags indrag och ni som arbetar med ordbehandling kännert.ex. till uttrycken "indrag av första raden", "hängande indrag", m.m.
I HTML finns i princip bara två slags indrag, nämligen det där första raden eller hela stycket är förskjutna. Vi tar dem i ordning:
Man använder ofta mellanslag för indrag av första raden, som i början av den här meningen. För att webbläsaren säkert skall förstå att man gjort ett mellanslag måste man dock använda en särskild kod för detta, nämligen eller   båda är olika tecken för samma sak. Ett annat sätt att skapa ett lite större indrag på (för den som inte vill skriva en massa ) är att använda någon av de inbyggda funktionerna för indrag, som finns i HTML
![]() |
<BLOCKQUOTE> </BLOCKQUOTE>
som ger ett fint indrag och som dessutom passar alldeles utmärkt för långa citat. Som namnet antyder blir texten dessutom presenterad som ett särskilt 'block' eller stycke. Avslutningen måste finnas för att inte resten av texten skall få samma indrag. Skapar ibland problem när man arbetar med stilmallar. Använd då ett <UL> i stället. |
![]() |
<UL></UL>
Detta är kommandot för att göra en lista. En lista ligger alltid med ett visst indrag. Använder man inga andra listkommandon, <LI>, gör alltså webbläsaren ett indrag. Skillnaden mot att använda BLOCKQUOTE är dock inte särskilt stor och jag rekommenderar dig därför att använda den senare.
|
![]() |
Ett annat sätt är att lägga in texten i en tabell och lämna en eller ett par kolumner tomma. Tabeller beskriver jag mer om här. |
![]() |
Proffsen använder genomskinliga (transparenta) bilder, som de lägger i tabellkolumnen längst till vänster, och som åstadkommer fasta, bestämda indrag för texten i högerkolumnen. |
Här är exempel på de olika rubrikerna:
<H1> |
Rubrik |
<H2> |
Rubrik |
<H3> |
Rubrik |
<H4> |
Rubrik |
<H5> |
Rubrik |
<H6> |
Rubrik |
Som du ser måste varje kommando avslutas, annars fortsätter den genom hela dokumentet. Alla avslutningar har ett snedstreck i sig, t.ex. </H1>, som talar om för webbläsaren att den skall avsluta <H1>.
Det vi gjorde i förra avsnittet var att ange en logisk förändring. Vi angav nämligen bara att det skulle vara en rubrik av en viss typ och sedan lät vi webbläsaren avgöra hur stor denna skulle se ut.
En fysisk förändring är t.ex att tala om att en viss text skall ha en viss teckenstorlek, vara kursiv, fet eller nedsänkt. I det här avsnittet kommer du att få reda på hur man skapar sådana kommandon.
Vi börjar med några kommandon för fysisk stil
<B> </B>
Ger fet stil (bold)
<i> </i>
Ger kursiv stil (italics)
Obs! Kursiv stil syns väldigt dåligt på de flesta skärmar och bör därför inte användas till vanlig löpande text. Kan dock användas till rubrikerna H1, H2 och H3. Själv brukar jag kursivera H3, för att få fram en intressant förändring av texten:
<H3><i>Detta är ett exempel!</i></H3>
Som blir:
Här fungerar det inte alltid om <i> skrivs före <H3>. Sådant upptäcker man när man kontrollerar texten i webläsaren. Tänk också på att inte "nästla" elementen, dvs du bör inte skriva elementen så här:
<H3><i>Detta är ett exempel!</H3></i>
Då kan det nämligen bli felaktigt i webläsaren. Avsluta alltså alla element i den ordning de introduceras i koden!
<U> </U>
Understruken text; visas dock inte alltid av webläsare och bör användas med viss försiktighet, eftersom länkar också är understukna.
<TT> </TT>
Ger en fast bredd och som du ser här ser det lite lustigt ut! I vissa webbläsare ger detta element en skrivmaskinsliknande text.
<STRIKE> </STRIKE>
Genomstruken text, t.ex för "Jag tycker att festen var jättetråkig jätterolig!"
<BLINK> </BLINK>
Syns dock inte i alla webläsare och kan lätt förstöra intrycket av en sida. Tänk på att allt som blinkar och rör sig drar åt sig uppmärksamheten!
y<SUP>x</SUP>
Ger en exponent: yx Fungerar inte i alla webläsare.
P<SUB>n</SUB>
Ger nersänkt text: Pn Fungerar inte i alla webläsare.
Kommandon för logisk stil
Det är viktigt att komma ihåg att en logisk förändring kan se olika ut i olika webläsare, beroende på hur de är inställda. En logisk förändring är alltså inget man skall använda om man vill att texten skall se ut på ett visst, bestämt sätt!
Av de kommandon jag nämner nedan använder jag bara BIG och SMALL. Men var och en får hitta sina egna favoriter.
<BIG> </BIG>
Ökar textens storlek med ett steg.
<SMALL> </SMALL>
Minskar textens storlek med ett steg
<DFN> </DFN>
För ord som skall definieras; ger normalt kursiv stil.
<EM> </EM>
Förstärkning (emphasis); visas kursivt eller med fet stil.
Tips: det kan vara svårt att se kursiv stil på skärmen, så därför kan du med fördel använda fet stil i stället!
<CITE> </CITE>
Citering, används t.ex för boktitlar; visas kursivt.
Inom HTML använder man många kommandon som ger samma resultat på skärmen. Onödigt med både DFN, EM och CITE kan tyckas, då de (på min dator i alla fall) ger samma resultat på skärmen. Men ju fler kommandon man har desto större valfrihet får man när man skriver sin kod.
<BLOCKQUOTE> </BLOCKQUOTE>
Används för att skapa citatblock. Hur stort indrag webläsaren gör varierar mellan olika fabrikat och versioner.
<KBD> </KBD>
Används för datorkod; visas i fixerad font. Variationer förekommer.
<CODE> </CODE>
Samma som KBD, men ger ofta en lite annan font. Variationer förekommer.
<SAMP> </SAMP>
Samma som KBD och CODE men med annan font igen. Variationer förekommer.
<STRONG> </STRONG>
Stark förstärkning (strong emphasis); visas i fetstil (bold)
<VAR> </VAR>
Variabel; visas kursivt. Variationer förekommer.
<ADDRESS>adresstext </ADDRESS> Används normalt i slutet av ett dokument och visar adressen i kursiverad (eller fet) stil. Kommandot skapar dock inte någon länkning. (För att skapa en länk, se avsnittet om länkning nedan.)
Upp
Det finns också ett antal andra kommandon för att formatera
texten. Ett av de vanligste och också mest användbara är FONT-elementet.
Det har några olika attribut för att förändra teckensnittet, teckenstorleken
och teckenfärgen, som jag nu skall berätta om:
<FONT face="Comic Sans MS, Arial, Helvetica, sans-serif">
Används för att styra vilket teckensnitt som skall användas på sidan. Det skrivs re den text man vill ha förändrad. Webläsaren letar då i typsnittsmappen datorn, först efter Comic Sans MS, sedan efter Arial eller Helvetica och m dessa saknas väljer den i stället något annat teckensnitt som saknar riffer. Men någon absolut styrning går inte att åstadkomma, eftersom sökaren kan ställa in webläsaren efter en egen mall. Ibland väljer bläsaren också ett teckensnitt som finns i grundinställningen (kallas kså 'default').
Tips: Ange alltid ett alternativt teckensnitt, ifall webläsaren saknar det du angivit.
Man avslutar alltid med </FONT> för att stänga av en förändring. Vill man att hela texten skall ha detta typsnitt behöver man inte använda någon avslutning. Tänk dock på att FONT-elementet inte fungerar om man använder tabeller. Då måste man skriva ett nytt FONT-kommando i varje tabellcell. Därför rekommenderar jag alla att använda stylesheets i stället, åtminstone när man börjar bli lite varm i kläderna.
<FONT size="1-7">
FONT är elementnamnet och "size" kallas för ett attribut. (Även "face" ovan är alltså ett attribut.) Kommandot förändrar fontens storlek där värdet "1-7" används om du vill ange en viss fysisk storlek mellan 1 och 7. Som du ser finns 6 olika steg, som motsvarar rubrikstorlekarna. Men titta här på följande rubriker:
Detta är en rubrik
Den första rubriken är skriven med <H1>, men i den andra använder jag <FONT size="7">. En stor skillnad, eller hur?!
Du kan också i 'size' ange ett värde mellan -4 och +4, om du vill ange en storlek i förhållande till default, alltså ett logiskt värde. Märk att 7 och +4 är lika stora. Observera också att det är viktigt att värdet skrivs inom citationstecken!.
Använder man </FONT> kan man förändra en del av en text. Utan avslutning förändras all efterföljande text.
Exempel: Man kan ändra storleken på hela ord/stycken eller enskilda bokstäver
<FONT SIZE="+4">Hemsida</FONT>
ger: Hemsida |
<FONT SIZE="+4">H</FONT>emsida
ger: Hemsida |
<FONT color="#FF0000">
Det här får bli lite överkurs: du kan förändra textens färg med hjälp av kommandot ovan. Koden FF0000 betyder att texten skall vara röd. Jag förklarar mer om färger och deras koder i sektionen om färger, som du hittar från startsidan. Pröva dig fram!
Tips: Eftersom face, size och color är attribut, behöver du bara använda ett enda FONT-element. I stället för att skriva
<FONT face="Comic Sans MS, Arial, Helvetica, sans-serif">
<FONT size="+3">
<FONT color="#FF0000">
skriver du helt enkelt bara:
<FONT face="Comic Sans MS, Arial, Helvetica, sans-serif" size="+3" color="#FF0000">
På så sätt blir koden smidigare!
Alla länkar har kommandot
<A href="länkens adress">länkens text</A>
A står för 'anchor' och anger att det är en länk. Attributet href anger vilken adressen är. Avslutningen </A> är viktig för att inte all efterföljande text skall göras till en länk.
Länk till en e-postadress:
<A href="mailto:namn@domän.se">Blabla Kalsong</A>
som blir: Blablabla Kalsong
När du klickar på den länken tror webbläsaren att du vill skicka ett e-mail och öppnar förmodligen ditt e-postprogram. För att skicka e-post utan att detta händer (så som jag har det på min webresurs) måste man använda sig av lite mer avancerad programmering, samt ett särskilt program på den server där man har sina sidor. Det finns tyvärr ännu så länge få Internetleverantörer som erbjuder denna tjänst till privatpersoner eller för ett rimligt pris.
Man kan på det här sättet även länka till flera adresser samtidigt, genom att använda ett kommatecken mellan e-postadresserna:
<A href="mailto:namn@domän.se,namn_2@domän.com"> Blabla Kalsong /a>och Mixer Karlsson</A>
som blir: Blabla Kalsong Mixer Karlsson
Det går även att skicka kopior och dolda dito:
<A href="mailto:namn_1@domän.se?cc=namn_2@domännamn.com&bcc=namn_3@domännamn.net">Skicka oss ett brev!</A>
som blir: Skicka oss ett brev!
Här använder man ett frågetecken när man inleder strängen med nya kommandon, dvs man skriver ?cc=. På motsvarande sätt måste man ha med ett & när man skriver in ännu fler kommandon, dvs man skriver &bcc=. Vill man använda flera mailto, cc och bcc går det bra. Skilj dem åt med ett kommatecken, som jag visade ovan.
Man kan även lägga in ett ämne eller subject så här:
<A href="mailto:namn_1@domän.se?cc=namn_2@domännamn.com&bcc=namn_3@domännamn.net&subject=Meddelandetexten skriver man här!">Skicka oss ett brev!</A>
som blir: Skicka oss ett brev!
Tänk bara på att webbläsarna gör konstiga saker med bredden på sidan när länkarna är för breda för den bredd du ställt in. Den här sidan krånglar just nu i min dator eftersom länken i exemplet blev bredare än 500 pixlar...
Länk till annan URL:
<A href="http://www.namn.domän">Länkens text</A>
Alltså samma princip som för "mailto:". Med "annan URL" avses alltså sådana sidor som ligger på andra adresser än den man befinner sig på. Denna sortens länk kallas "absolut" och ser ut så här: Länkens text.
Länk inom samma URL:
<A href="filnamn.html">länkens text</A>
Kallas också "relativ" länk, eftersom man länkar till andra HTML-filer på sin egen hemsida. I stället för en URL anger man således ett filnamn, som alltid måste ha extensionen ".html" (vissa undantag finns). Observera att å, ä, ö, mellanslag och andra konstiga tecken alltid skall undvikas i filnamn. Dessutom bör man ge akt på att stora och små bokstäver i filnamnet också måste skrivas så i länken. Detta gäller för övrigt också vid all annan filhantering.
Om man länkar till andra filer i samma mapp räcker det normalt med att ange filnamnet. Men om man vill länka till dokument i andra mappar, är det nödvändigt att tala om sökvägen för webläsaren. Skall man neråt i rarkin anger man mappens_namn/filens_namn.html. Skall man uppåt måste man använda kommandot ../ för varje steg uppåt i hierarkin. Exempel: Jag skall länka tillbaka till index-sidan, från en fil i undermappen med texter. Jag skriver då
<A href="../index.html"</A>
Länk till viss plats i ett dokument:
Man kan länka till en viss plats på en sida. Funktionen kallas 'named tag'. Normalt använder man detta som jag har gjort ovan, nämligen så att man kan klicka på texten i innehållsförteckningen så att man kommer till en plats längre ner på sidan.
Länken skapas i två steg. Först går man till den plats dit man vill komma, d.v.s dit länken skall leda. Man skriver där:
<A name="ankarets namn">
Därefter skapar man en länk till detta namn, t.ex i innehållsförteckningen, med kommandot:
<A href="#ankarets namn">texten i innehållsförteckningen</A>
#-tecknet betyder ungefär: 'Använd det här namnet'. Det markerar också att den efterföljande texten skall visas längst uppe till vänster på skärmen.
Den här metoden kan naturligtvis även användas för att länka till andra dokument och även till sidor på andra URL:er. Det enda som krävs är att det finns ett namn (<A name="namn">) definierat och att du känner till det. Du skriver då bara <A href="adress/filnamn#ankare"</A>. Observera att det inte skall vara något snedstreck framför #-tecknet.
Det går att ändra färgerna på länkarna, som jag nämnde tidigare. Man kriver ändringarna som attribut inne i BODY och det finns tre sådana attribut:
![]() |
link används för länkar man ännu inte klickat på. |
![]() |
alink används för länkar man just klickat på och som är aktiva. |
![]() |
vlink används för länkar man besökt. |
Här är ett exempel som blir ganska snyggt:
<BODY bgcolor="#FFFFFF" text="#333333" link="#000099" alink="#000099 vlink="#990000">
Man skall försöka välja länkfärger som harmoniserar med bakgrunden och med den övriga layouten. Dessutom är det en allmänt vedertagen standard att "oklickade" länkar är blå, att aktiva länkar är blå eller lila och att besökta länkar är röda. Använder du andra färger bör du försöka göra dem lätta att förstå. Riktigt dumt är det t.ex att välja rött för obesökta länkar och blått för besökta!
Man använder inget avslutningselement! Avgränsaren kan också justeras på lite olika sätt:
<HR width="*" size="*">
Attributet 'width' bestämmer avgränsarens bredd horisontellt över skärmen; 'size' bestämmer tjockleken. Default är att avgränsaren är 1 pixel tjock och sträcker sig i hela skärmens bredd (100%). Man kan alltså använda både pixelvärden och procentvärden. Använder man kortare varianter än 100% brukar de ibland lägga sig till vänster och ibland centreras. Därför kan man göra följande tillägg:
<CENTER>
<HR width="50%" size="5">
</CENTER>
som blir:
Attributet 'noshade' ger en avgränsare utan skugga:
<HR width="50%" size="5" noshade>
som blir:
I Explorer kan man göra färgade avgränsare, med attributet color:
<HR color="#FF0000">
som blir:
Upp
Innan du kan lägga upp dina sidor på internet är det några
saker du bör göra.
![]() |
Läs igenom din sida (sidor) och kolla stavfel och länkar. |
![]() |
Ladda in sidan i olika webläsare: använd minst någon tidig version av Netscape och Explorer. Då ser du om du använt kommandon som äldre webläsare inte förstår. |
När du är nöjd, dina sidor laddas som de skall och alla länkar fungerar, skall du ladda upp dina sidor på internet. För att kunna göra det behöver man först och främst ett webbhotell. Antingen har man tillgång till en sådan genom sitt internetabonnemang, eller använder man sig av en gratistjänst. Alla frågor om hur man skaffar sig ett konto brukar besvaras på den hemsida, där den server man vill använda finns.
Du måste i vissa fall använda ett särskilt FTP-program för att skicka upp dina sidor. Internetleverantörernas hemsidor, webbservrarnas hemsidor och datortidningarnas CD-ROM-skivor är nedlusade med bra FTP-program. Ta i första hand kontakt med din leverantörs support för frågor om detta.
FTP-programmet konfigureras på ungefär samma sätt som webläsaren. När du öppnar FTP-klienten (=programmet) ringer det upp och loggar in på ditt konto. Nu kan du skicka upp dina sidor, ta bort inaktuell information, o.s.v.
Har du väldigt många sidor kan du eventuellt utnyttja de valideringstjänster som finns på nätet och som hjälper dig att kolla att filerna är korrekt kodade, att inga länkar är brutna, m.m; se i länksamlingen nedan.
Sedan kan du lägga en räknare på din sida. Här skall du höra med din leverantör, som med största sannolikhet kan erbjuda olika slags räknare och annat smått och gott.
Självklart skall du tala om att du finns! Skicka e-post till alla dina vänner (och ovänner) och meddela din URL (webbadress). Anmäl din URL hos de olika söktjänsterna: skriv där det står "submit URL". Adresser hittar du nedan!
Upp
Antalet sidor på internet har hittills mer än fördubblats varje år. Länkar blir
dessutom fort inaktuella: man räknar med att en genomsnittlig sida ligger c:a
1,5 månad på internet innan den försvinner. Därför kan jag inte garantera att
de sajter jag listar nedan fungerar, eller ens att de är de bästa. Läs regelbundet
internettidningar, så håller du förhoppningsvis jämna steg med utvecklingen!
Andra webresurser
Det finns många bra sajter för den som vill fördjupa sina kunskaper om HTML och webprogrammering. För en förteckning, se min sida om Surftips
Filarkiv
Om det är ett program du inte hittar nedan kan du besöka tillverkarens hemsida, eller använda dig av någon av de databaser som finns. På mina sidor om att surfa effektivare och surftips hittar du mer information om detta.
HTML-program
Det finns hundratals olika HTML-program, där du antingen skriver koden själv eller får hjälp med att skriva den. En del går att ladda ner från nätet och pröva en tid. Annat måste man köpa. Datortidningarnas CD-ROM-skivor är ofta fyllda med bra program och då slipper du vara uppkopplad och betala dyra telefonräkningar.
Valideringstjänster
Se min sida Valideringstjänsterna - hur bra är dom?
Söktjänster
På så gott som alla söktjänster kan man anmäla (submit) sin sida. Ibland måste man ange en lämplig kategori. Många gånger görs sedan en värdering av hur viktig din sida är. Bli alltså inte besviken om dina sidor inte kommer med. De vanligaste söktjänsterna brukar ligga med som bokmärken när du installerar webläsaren: kolla under "Sök" - "Search".
För en förteckning, se min sida om att söka effektivare
Det finns också tjänster som låter dig anmäla dina sidor till flera olika söktjänster samtidigt, t.ex:
The Promoter:
http://www.thepromoter.com/
Submit Shack:
http://www.submitshack.com/
SubmitSite.com:
http://www.submitside.com/
Min erfarenhet av dem är dock ganska dålig. Dels kostar de oftast en hel del pengar och dessutom är det alltid svårt att kontrollera att sidorna verkligen finns med på de olika söktjänsterna. Som privatperson finns alltså ingen anledning att anlita den här typen av lycksökare!
Du bör dessutom också ha klart för dig att du kommer att få en del reklam via e-post efter att ha anmält dina sidor till utländska söktjänster!
Hur rankas din websida?
Position Agent:
http://www.positionagent.com/
Rank This!
http://www.rankthis.com/
WebsiteGarage:
websitegarage.com
Tips: Du kan ibland använda kommandot 'link: din URL' hos de olika söktjänsterna för att se hur många som länkat till din sida. Läs på söktjänstens FAQ eller under "Advanced Search".
Gratistjänster
För en förteckning, se min sida om Surftips. Där finner du länkar till ställen där du kan få gratis webbutrymme, räknare, gästbok, poll, e-post, m.m.
Bilder
Du hittar mer information om bilder på introduktionen till grafik och färger.
Webläsare
Jag har bara med några av de vanliga webläsarna (men det finns mängder av andra):
Internet Explorer:
http://www.microsoft.com/
Netscape:
http://www.netscape.com/
Opera:
opera.nta.no
Icab:
http://www.icab.de/
Lycos Browser:
neoplanet.lycos.com
Övriga
Browserwatch: http://www.browserwatch.com/ har alla nyheter om Netscape och Explorer
Internet Product Watch: ipw.internet.com har nyheter om olika internetapplikationer
Texten är lånad från
www.jonasweb.nu,
men redigerad av
.