Grunderna i HTML

Grundläggande HTML och lite råd och stilregler för hur det ska användas på SAC:s site

Vad är HTML

Ett 'språk' för att markera text så en dator kan känna igen olika delar av den (t ex rubriker, stycken och länkar till andra texter). Det gör det möjligt för datorn att visa texten snyggt och funktionellt, det vi alla känner som 'webben'.

Det går med lite mer avancerad användning av HTML även att kontrollera utseendet på texten (layout). Vi går inte in på det här utan håller oss till grunderna. Den här texten är anpassad för SAC:s hemsida där HTML-huvud och dekoration läggs till automatiskt av ett program. Det är alltså egentligen lite svårare med HTML än vad som lärs ut här ;-)

Taggar

Texten markeras med taggar. Taggar är inneslutna i hakar (< >). En b-tag ser altså ut så här: <b>

Taggarna märker oftast ut en vis del av texten som t ex fetstil. Därför behövs det en start- och en sluttag. Slut-taggarna har samma namn men med en slash (/) före. Så en b-sluttag ser ut så här: </b>

Teckenstilar

B-taggar markerar fetstil (bold), i-taggar markerar kursiv stil (italic, typografiska för kursiv) och u-taggar markerar understruken text. tt-tagar markerar 'skrivmaskinstext' så följande htmltext:

Detta <b>exempel kommer</b> att renderas <tt>som nedanstående</tt> stycke <u>visar</u>, <i>förstått</i>?

Detta exempel kommer att renderas som nedanstående stycke visar, förstått?

Som du ser bör textstilar användas med sparsamhet om det ska bli snyggt ;-)

Stycken

Raderna kommer att brytas så som det passar den dator som texten visas på. Därför ignoreras de radbrytningar som du matar in i texten (du kan testa det genom att ändra bredden på ditt webbläsarfönster och se hur den här texten bryts om).

Istället får du använda en tag för att berätta var stycken börja och slutar. Den tagen är p-tagen (paragraph). Ex:

<p>Denna text kommer att</p> <p>renderas i två stycken nedan!</p>

Denna text kommer att

renderas i två stycken nedan!

Slut exempel ;-) Förstår ni? För att HTML koden ska bli lättare att läsa är det lämpligt att stoppa in en tom rad mellan styckena även i koden, men det påverkar inte hur sidan visas!

Rubriker

Rubriker sätts med h-taggar (headings). De är numrerade efter hur 'viktiga' de är h1-taggarna är viktigast och ska normalt bara envändas till första 'huvudrubriken' på en sida. För mellanrubriker används h2-taggar och h3-taggarna för underrubriker. Rubriken före det här stycket skrivs t ex:

<h2>Rubriker</h2>

Länkar

Ska det vara någon poäng med hemsidor måste de ha länkar. Det fixas med en a-tagg på den sidan länken går från. Den sidan som länken går till behöver alltså inte ändras alls! En länk skrivs som:

<a href="sidnamn.html">beskrivning</a>

sidnamn.html är namnet på den sida länken går till och beskrivning är den text som visas där länken är (den text man klickar på för att följa länken).

Om man bara skriver namnet på en sida (som ovan) betyder det att den sidan måste finnas i samma katalog som den sidan länken ligger i är. Det kallas relativ länk och är oftast enklast att använda då man länkar mellan olika sidor på samma del av en sajt.

Om namnet föregås av en slash (/) så betyder det att sidan som länken går till ska ligga i början av samma sajt som sidan länken finns i ligger.

Slutligen kan länken vara en hel webbadress (ex: http://www.suf.cc/) och den metoden måste man använda om länken går till en annan sajt på internet.

Bilder

Bilder läggs in med img-taggen. Den skrivs som:

<img src="res/flames.gif">

Där res/flames.gif är namnet på bilden. Bilden måste ligga ute på en webbsajt och kan namnges på samma sätt som länkarna kan. Bilder kan laddas upp till SAC:s webbplatts via Resurser i Dir-info. På resursidan står adressen till alla uppladade bilder. Men är bilden uppladdad till samma katalog som du länkar den ifrån kan du även nå den med res/bildnamn som i exemplet ovan.

Mera, mera, mera!

Det fattas saker här, bl a br-taggen, ul- och il-taggen, div- och span-taggen och class-atributet. Om du har förslag på den texten eller har synpunkter, e-posta mig (lah@micropp.se) omedelbart!

Men titta dig omkring, hur ser koden ut på andra sidor? Du kan lära dig mycket av det nu när du kan grunderna. Din webbläsare kan troligen visa HTML-koden för alla sidor du besöker. Leta efter visa källa, view source eller liknande.

Lycka till!