Intro till HTML

Grundläggande HTML och lite råd och stilregler för hur det lämpligast används på SubCults sajt.

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 SubCult där HTML-huvud och dekoration ställs in separat i olika mallar och läggs till automatiskt av vårat serverprogram. 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 alltså ut så här: <b>

Taggarna märker oftast ut en viss 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:

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 tagg för att berätta var stycken börjar och slutar. Den tagen är p-tagen (paragraph). Om FixHTML är påslaget stoppas det automatiskt in p-taggar mellan stycken avgränsade med en tom rad emellan. För att förstå den kod som vårat serverprogram genererar är det ändå bra att förstå vad p-taggen är så här följer ett exempel:

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!

Med br-taggen, <br>, kan man tvinga fram en vanlig enkel radbrytning. Det är bra när man skriver adresser och liknande. Ofta missbrukas fler br-taggar efter varandra för att skapa styckesbrytningar. Gör inte det - Använd p-taggar för stycken! Det ska inte läggas in någon slut-tagg för br-taggen, det är en 'enkel' tagg

En annan enkeltagg är hr-taggen, <hr>, som lägger in en linje (horisontal rule) för att avdela olika delar av en sida tydligt.

Rubriker

Rubriker sätts med h-taggar (headings). De är numrerade efter hur 'viktiga' de är h1-taggarna är viktigast och ska normalt bara anvä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:

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:

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.subcult.org/) och den metoden måste man använda om länken går till en annan sajt på internet.

Listor

Listor skapas med ol- och ul-taggar, ol är ordered (numrerad) lista och ul är unordered (punktlista). Mellan start- och sluttagg för listan lägger man varje listelement i li-taggar (list item):

Mera, mera, mera!

Det finns mycket mer man kan göra med HTML! Men det här ska räcka för att komma igång. När du lärt dig behärska det här, och det lär du dig snart om du bara använder det lite, så blir det mycket lättare att lära sig mer då allt bygger på samma principer. Det finns för all del helt nya begrep som styles, men det kan vi gott vänta med ;-)

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!

Författare: MZ     Korrektur: sabina