HTML-taggar, kallas även märken, talar om för web-läsaren att här ska något göras istället för att bara visa text. Det som står innanför < och > visas inte på skärmen, eftersom webläsaren vet att allt som står innanför < och > ska tolkas som HTML-taggar och således inte skrivas ut som text. < och > är alltså mycket viktiga i HTML. Glömmer man att skriva dessa tecken tror web-läsaren att HTML-taggarna ska skrivas ut som vanlig text. När web-läsaren stöter på en ogiltig HTML-tagg, struntar den i den och fortsätter efter den felaktiga taggen. En av grundreglerna i HTML är att okända taggar ska ignoreras. Om det inte var så skulle man få mängder med felmeddelanden nästan varje gång man försökte titta på en web-sida.
Den första tagg som vi ska lära oss är <HTML>. Den har även en sluttagg som följaktligen är </HTML>. <HTML> ska alltid stå överst i en HTML-fil och </HTML> ska alltid finnas längst ner. Alltså omsluter <HTML> och </HTML> allt som finns inuti filen. Starttaggen talar om för web-läsaren att filen innehåller HTML-kod, men de flesta web-läsare bryr sig inte om om taggen skulle saknas. Om den finns är det däremot ett tecken på en god HTML-fil och en ambitiös HTML-författare med hög moral...Därför bör man inleda ett HTML-dokument med <HTML> och avsluta det med med </HTML>, som alltså anger "att här tar HTML-filen slut".
Ett HTML-dokument kan alltid delas upp i två viktiga delar. Den första delen av dokumentet kallas huvudet, och det som följer därefter kallas kroppen.
Huvudet inleds med taggen <HEAD> och avslutas med </HEAD>, alltså på samma sätt som med <HTML>-taggen ovan. Vad finns då i huvudet? Jo, det är där som vi kan definiera vilken Titel web-sidan ska ha. En web-sidas titel hittar du alltid överst i web-läsarens fönster.
När sökverktygen på Internet samlar information som läggs i respektive sökverktygs databas är det oftast själva titeln som de tittar mest på. Det är däför viktigt att man väljer en lagom lång titel som beskriver web-sidans innehåll så träffande som möjligt. Med lagom lång menas ett par-tre-fyra ord.
Titeln skapas genom att man i huvudet (alltså mellan <HEAD> och </HTML>) skriver <TITLE>Sidans titel.
Efter huvudet kommer som sagt kroppen, och den inleds som du kanske gissat med <BODY> och avslutas med </BODY>. Det är i kroppen som web-sidans innehåll finns, alltså det som syns i själva fönstret. Här finns all text, alla bilder, tabeller, listor m.m., det vill säga det intressanta på sidan.
<HTML> <HEAD> <TITLE>Nästa exempel</TITLE> </HEAD> <BODY> Den här texten finns inuti dokumentets kropp och kommer alltså att synas som vanlig text i webläsaren. </BODY> </HTML>
Man sparar filen i den katalog som man valt ut att lägga sina web-filer i. Spara filen med filnamnet följt av filtillägget .html eller .htm (om ditt operativsystem endast får ha tre tecken i filtillägget).
När man surfar på nätet och struntar i att skriva filnamnet antar de flesta web-läsare att man är ute efter en fil med namnet index.html eller index.htm. Denna brukar utgöra själva stommen i web-sidan. OBS! vissa webservrar är skiftlägeskänsliga. Med detta menas att dom inte kan skilja mellan små och stora bokstäver. En del kan inte hantera stora bokstäver. Äldre servrar och datorer klarar heller inte att hantera finamn som är längre än 8 bokstäver. De klarar heller inte av filtillägget som är längre än tre bokstäver. Därför är det säkrast att man sparar sina HTML-filer med filnamn som är högst åtta bokstäver långa och med filtillägget .htm. Använd heller inte bokstäverna å, ä och ö.
När man skapar egna web-sidor, gör man klokast i att namnge filen som beskriver ens viktigaste sida till index.htm. Om man gör det slipper de som ska titta på sidan att skriva filnamnet. Långa URL:er är jobbiga att handskas med, och kan man förkorta dem är det förstås bra.
Först och främst behöver man en web-läsare t.ex. Netscape eller Microsoft Internet Explorer för att man ska kunna se sin färdiga web-sida.
Man behöver en katalog att spara sina eller mapp där man kan lägga upp den färdiga web-sidan. Om man vill att sidan ska synas på World Wide Web erfodras en katalog som är åtkomlig från webben där man kan spara sina filer. Den tillhandahåller internetleverantören som man har.
Enklast är att spara alla filer på en hårdisk i en viss katalog. Då kan ingen se dem på webben, men själv märker man ingen större skillnad hemma vid datorn. När man är nöjd kan man flytta katalogen så att den blir åtkomlig från webben.
Man behöver en enkel textredigerare som kan spara text i ASCII-formatet. Det lilla programmet Anteckningar som finns i Windows 95 duger gott för detta ändamål.
I HTML finns stöd för sex olika rubriktyper. En rubrik inleds av taggen <Hx> (där x ska ersättas av en siffra mellan 1 och 6). Därefter följer det som ska stå i själva rubriken, och rubriken avslutas förstås med </Hx>. H:et står för Heading, alltså det engelska ordet för rubrik.
En rubrik hamnar alltid på en ny rad med lagom tomrum ovanför, så att den verkligen framträder ur texten. När rubriken avslutas med </Hx> görs ånyo en radframmatning, så att den efterföljande texten inte fortsätter på samma rad som rubriken. Vanligtvis brukar alla rubriker skrivas med fet text för att synas så bra som möjligt.
<H1>Detta är det största rubrikformatet</H1>Rubriken ovan är den största typen av rubrik H1. Som du ser hamnade den här vanliga bödtexten på en ny rad direkt under rubriken. <H2>Detta är det näst största rubrikformatet</H2>Denna rubrik är något mindre än den förra. Den är skriven med hjälp av rubriktypen H2.Lägg märke till att rubriken automatiskt hamnade på en ny rad. Det gör alltid rubriker. <H3>Detta är det tredje största rubrikformatet</H3>Så här ser en rubrik ut som skapats med rubriktypen H3 <H4>Detta är det fjärde största rubrikformatet</H4>Denna rubriken har skapats med rubriktypen H4. Den här rubriken är lämplig som underrubrik. <H5>Detta är det näst minsta rubrikformatet</H5>Rubriken är skriven med hjälp av rubriktypen H5 <H6>Detta är det minsta rubrikformatet</H6>Den här rubriken har skapats med rubriktypen H6. Ofta är den minsta typen av rubrik nästan lika liten eller till och med mindre än brödtexten. Kom ihåg att rubriker för det mesta ska vara ganska korta. |
Taggen <P> anger att ett nytt stycke precis skall börja, och vill man kan man markera att stycket är slut med </P>. Sådana stycken får i de flesta web-läsare tomma rader ovanför och under sig.
Det är enkelt att framtvinga en ny rad i HTML. Allt som behöver göras är att man lägger till taggen <BR> (det står för BReak) på de ställen man vill ha en ny rad. (Lägg märke till att <BR> är en tagg som inte behöver någon sluttagg </BR> finns alltså inte!). Vid en radbrytning skapas inga mellanrum som mellan stycken.
När man ibland har text vid sidan om bilder (när man har angivit ALIGN=LEFT eller ALIGN=RIGHT i märket <IMG>). vill man hoppa ner till raden under bilden. Då kan man lägga till attributet CLEAR till <BR>. CLEAR kan ha fyra olika värden: LEFT som betyder att man ska hoppa förbi bilder i vänstermarginalen, RIGHT, som betyder att man ska hoppa förbi bilder i högermarginalen, ALL, som betyder att nästa rad ska börja först när både vänster- och högermarginalerna är tomma och NONE som betyder att <BR> ska fungera som vanligt. Anledningen till att värdet NONE finns är att man kan ändra märkets förvalda beetende med hjälp av formatmallar. Om man gjort om <BR> så att märket hoppar förbi bilder i marginalerna kan man alltså ange CLEAR=NONE om man bara vill ha en vanlig radbrytning någonstans.
En logisk formattagg låter web-läsaren själv bestämma vad den ska göra för att uppnå önskad effekt, och är alltså mer att betrakta som en sorts strukturtagg. Ett exempel kan vara att du anger att ett visst textstycke ska vara särskilt framhävt. En web-läsare kanske anser att det bästa sättet är att göra texten fet, medan en annan kanske anser att det är bättre att texten både fet och kursiv.
En fysisk formattagg säger däremot till web-läsaren att texten måste formateras på ett visst sätt. Man kan t.ex säga att ett textstycke måste vara skrivet i fetstil, eller vara kursivt. Vissa web-läsare, t.ex textbaserade sådana, kan därför få proplem med fysiska formattaggar.
Använder man när man vill
peka på en speciell bokstavskombination och önskar framhäva att
bokstäverna ska tolkas bokstavligt, och inte som ett vanligt ord.
Exempel: <SAMP>ABC</SAMP>
Formattaggen <KBD> (KeyBoarD) ska användas när man vill visa
att något ska matas in från tangentbordet.
Exempel: <KBD>dir *.htm /s /p</KBD>
Den logiska formattaggen <EM> (emphasis) anger att
texten ska framhävas tills taggen </EM> påträffas. De
flesta web-läsare nöjer sig med att göra texten kursiv.
Exempel: <EM>Rekommederas starkt!</EM>
Formattaggen <STRONG> anger att texten ska betonas
starkt ända tills </STRONG> dyker upp i HTML-filen.
Flertalet web-läsare skriver ut textstycket i fetstil.
Exempel: <STRONG>mycket viktigt</STRONG>
Om man vill lägga upp korta kodsnuttar (kanske små
programmeringskommandon) på sin websida finns det ett format som lämpar
sig bra för detta. Skriv <CODE> innan kodsnutten, och avsluta med
</CODE> efter den.
Exempel: <CODE>(display"Hej på er allihop</CODE>
Ibland har man variabler eller liknande i sin text. Man brukar
försöka skilja dem från den omgivande texten på något sätt. På webben
gör man det genom att skriva <VAR> framför variabeln och
</VAR> bakom den. Vanligtvis blir variablerna kursiva.
Exempel: <VAR>k, m, n</VAR>
Då och då kan det hända att det smyger in sig ett och annat citat i
dina web-texter. Skriv då <CITE> före citatet och </CITE>
efter det, så kommer det att synas tydligare.
Exempel: <CITE>"Att vara eller att inte
vara, det är frågan"</CITE>
<BLOCKQUOTE> skrivs med fördel före ett långt citat och
sluttaggen </BLOCKQUOTE> avslutar det. Sådana citat inleds och
avslutas av de flesta web-läsare automatiskt med nya rader. Dessutom
blir det ofta kursivt, eller också skjuts dess vänstermarginal in en
smula.
|
Exempel: <BLOCKQUOTE> Problemet med världen är att de kloka är så osäkra på sin sak, medan de dumma är så tvärsäkra.</BLOCKQUOTE> |
Varje web-sida bör innehålla en address till den person som skapat
den. Eftersom vi använder Internet är det självklart att den addressen
skall vara en e-postadress. För att skriva en e-postaddress skriver man
<ADDRESS>e-postaddressen>/ADDRESS>. Man kan förstås skriva
in vilken information som helst inuti ett ADDRESS-block, datumet när
sidan sist redigerades kan vara ytterligare ett användningsområde.
|
Exempel: Skicka gärna e-post till mig! Addressen är <ADDRESS>karlsson.robert@vetlanda.mail.telia.com</ADDRESS> |
En del web-läsare (t.ex Internet Explorer) kursiverar det ordet som
definieras, men många (t.ex Netscape) gör ingenting. Därför är
<DFN>taggen tyvärr inte speciellt användbar.
Exempel: En del web-läsare som inte bryr sig om DFN-taggen är
Netscape. Däremot gör web-läsaren
<DFN>Internet Explorer</DFN>
något vettigt av den.
Det rekommenderas att man översätter svenska tecken i HTML-dokument. Använder man den europeiska standardteckenuppsättningen, ISO-8859-1 , som Windows t.ex använder, behöver man inte det. Men andra, t.ex Mac-ägare, som inte har Windows kan få svårigheter med att läsa din text. För att visa dessa tecken använder man speciella koder som webbläsaren översätter till rätt tecken. Koderna börjar med tecknet "&" och slutar med ett semikolon (;). Däremellan finns antingen ett kort nyckelord eller ett nummertecken (#) följt av ett tal.
| Tecken | Numerisk kod | Teckenkod |
|---|---|---|
| < | < | < |
| = | = | |
| > | > | > |
| & | & | & |
| " | " | " |
| Fast mellanslag |   | |
| © | © | © |
| ® | ® | ® |
| | ­ | ­ |
| ¯ | ¯ | ¯ |
| å | å | å |
| ä | ä | ä |
| ö | ö | ö |
| Å | Å | Å |
| Ä | Ä | Ä |
| Ö | Ö | Ö |
Utförligare tabell hittar du på Tecenkodstabell
Enligt standarden ska alla HTML-dokument börja med följande märke:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
Detta märke berättar att dokumentet följer version 4.0 av HTML-standarden och innehåller en URL till ett SGML-dokument som beskriver standarden. Av HTML 4.0 finns det två olika varianter en strikt (strict på engelska) och en "för övergångsskedet" (transitional på engelska). I den strikta varianten, som det på sikt är meningen att alla ska använda, har man tagit bort en del märken som inte behövs längre. För att göra intressanta webbsidor som fungerar även i äldre webbläsare, bör man använda övergångsstandarden.
Innan du börjar bygga upp en större hemsida är det en del saker du bör tänka på. Att göra allt för stora dokument med mycket bilder, animationer, ljud m.m, gör att sidan tar lång tid att ladda ner. Besökaren kan då tröttna och lämna din sida, dela därför upp informationen i flera dokument. Men gör inte för många små, för då måste besökaren hela tiden ladda in nya dokument. Att hänga med i texten och resonemanget, blir då svårare om besökaren måste vänta på att nya sidor laddas in, det är lättare att rulla i ett långt dokument om man vill repetera något än att gå tillbaka genom en följd av sidor. Det är även lättare att skriva ut eller spara ett längre dokument när man vill läsa det i lugn och ro utan att behöva vara uppkopplad på nätet.
Att dela upp en sida i olika fragment är en bra lösning. Man kan då ha en innehållsförteckning i början av dokumentet med länkar till de olika delarna. Det går då lätt att hoppa till den information man är intresserad av, samtidigt blir det lätt och intuitivt att läsa dokumentet.
Du bör ha en startsida. Denna sida bör berätta vad din del av World Wide Web innehåller och man ska kunna nå de andra dokumenten med hjälp av länkar. Har man inte för många dokument är det en fördel om man kan nå alla dokument från startsidan. Har man däremot mer än 15 - 20 dokument, är det en god idé att göra ett index i två nivåer, där varje länk på startsidan går till en sida med länkar till en kategori av dokument. För att underlätta för läsaren att förstå hur man kan hitta det dokument man är intresserad av från startsidan, bör du tänka igenom strukturen noga. Man bör presentera dokumentstrukturen på startsidan och ge läsaren en uppfattning om hur många dokument strukturen innehåller.
Din sidas färg och typsnitt, placeringen av text, bilder och navigerinsknappar, bör passa ihop med det budskap du vill förmedla till besökaren. Många besökare kommer snabbt att lämna din sida om de inte kommer underfund med sidans syfte och innehåll. Använd helst bara websäkra färger.
Gör inte din sida typsnittsberoende, använd bara de typsnitt som var installerade på dator när du fick den. Om du använder underliga typsnitt kan sidan se ful ut hos besökarens webbläsare om den inte har typsnittet installerat. Ge därför besökaren ett vettigt alternativ.
Använd inte för många typsnitt. Tre olika räcker gott, ett för sidans logotyp, ett för rubrikerna och ett för brödtexten. Använd inte heller för många teckenstorlekar. Gör inte texten för liten, sidan kan då vara svår att läsa. Blanda inte för mycket med teckensorter, t.ex fet och kursiv stil, eller fet och understruken text, det ser inte särskilt vackert ut. Times, Baskervill, Helvetica och Arial är länpliga typsnitt för brödtext, som också blir snygga vid utskrift.
Om man har många dokument, bilder, animationer, ljud m.m i sin sida och lägger allt i en och samma katalog blir det svårt att hålla reda på var allt hör hemma. Det är då bättre att skapa underkataloger för att göra det mer lättöverskådligt. Man kan då lägga alla HTML-filer i själva huvudkatalogen. Man kan sedan lägga alla foton i en eller flera underkataloger. Samma sak kan man sedan göra med gifbilder, ljud, gifanimationer, knappar, bildrubriker, m.m. Det går också att bara ha själva startsidan, index.htm, i själva huvudkatalogen. Resten av dokumenten kan man sedan dela upp i olika underkataloger, efter kategori. Hur man länkar mellan toppdokumentet och dokumenten i underkatalogerna, se Relativa addresser
Klicka på knapparna för att backa tillbaka eller för att läsa vidare om HTML-guiden.
Denna sida är skriven av Robert Karlsson.
E-post: karlsson.robert@vetlanda.mail.telia.com
Hemsida: http://w1.383.telia.com/~u38302477
Sidan uppdaterades senast:
© Copyright 1999