Olles HTML-Grotta

HTML-kod

Så himla svårt ska det ju inte behöva vara, och det är det inte heller. Nedan följer exempel på HTML-kod med kommentarer som gör det lätt att konstruera HTML-dokument i vilken texteditor som helst.

HTML betyder förresten: Hyper Text Markup Language. På svenska blir det ungefär: Hyper Text Uppmärknings-Språk. Se där! Nu kan du ju nästan det här.

Här kan du välja ditt favoritämne, eller bläddra neråt.

Taggar
Indelning
Huvud
Kropp
Textformatering
Färger
Länkar
Tjänster
Adresser
Bilder
Listor
Tabeller

Överkurs

Taggar

Hur ser det ut då? Det kanske ser krångligt ut, men följer en enkel princip. Alla styrkoder anges med HTML-taggar. (Jag vet att det är engelska, men jag har inte kommit på nåt bättre ord.) Varje tag börjar med "<" och avslutas med ">". Mellan dessa tecken finns ett ord som berättar vad taggen gör och hur den gör det.

Taggarna funkar som så att dom anger början och slutet på nåt, till exempel fetstil, och då ser det ut såhär: text..., där "B" är koden för fetstil, anger att fetstil ska börja och anger att fetstil ska upphöra. Ett snedstreck ("/") i en tag anger slut på den styrkoden. Snedstrecket ska alltid stå före själva koden. Man ska alltså inte skriva . Det funkar inte.

Indelning

Då så. Då tar vi ett exempel på hela faderullan på en gång. Hela Dokumentet omsluts av taggar som anger att det är ett HTML-dokument. Innuti dokumentet finns avdelningarna HUVUD och KROPP (brödtext). Avdelninarna anges med <HEAD> för huvud och <BODY> för kropp. Se nedan.

    <HTML>
      <HEAD>
        Här finns huvudet
         .
         .
      </HEAD>
      <BODY>
        Här skriver man brödtexten
         .
         .
      </BODY>
    </HTML>

Huvud

Jag tänkte ta det lite lugnt i början, och bara ta med det allra enklaste. I huvudet anger man titeln på dokumentet. Titeln är det som skrivs som rubrik på ditt BROWSER-fönster. På denna sida är titeln "Olles HTML-Grotta", och detta borde stå ute på fönsterramen, eller vad det nu kan heta. (Om det är nån som kan engelska, så brukar dom kalla det för CAPTION.)

Titeln anger man med <TITLE>. Så här kan det se ut:

    <HTML>
      <HEAD>
      <TITLE>Olles HTML-Grotta</TITLE>
      </HEAD>
      <BODY>
        Här skriver man brödtexten
         .
         .
      </BODY>
    </HTML>

Kropp

Det är alltså här man skriver texten. Det ska vara vanlig ASCII-text. Det brukar man kunna åstadkomma i sin ordbehandlare genom att välja att spara som text. Finessen är att man då inte får med koder för textformatering och sånt. HTML har egna koder för det.

Det är en massa krångel med att skriva text i HTML. Det funkar nämligen inte som vanligt. HTML skiter i om det finns flera mellanslag i rad, det blir bara ett kvar när man läser det i sin browser. Likaledes struntar din browser i radbyten. Texten kommer att gå från kant till kant, om man inte säger till den något annat. Den bryr sig inte om tomma rader heller.

Alltså har nån listig person hittat på styrkoder för detta. Radbrytnimg anges med och stycke anges med . Här kommer också dom första undantagen från de annars så stela reglerna. Man börjar inte en rad med och slutar med , utan man sätter in en brytning där man vill ha den. Likadant är det med styckesindelning. Man skriver bara i slutet på stycket.

    <HTML>
      <HEAD>
      <TITLE>Olles HTML-Grotta</TITLE>
      </HEAD>
      <BODY>
        Här skriver man brödtexten.<P>
        Sedan börjar nästa stycke.<P>
        Och man kan bryta av<BR> en rad på mitten.
      </BODY>
    </HTML>

Exemplet ovan kommer att se ut såhär:

Här skriver man brödtexten.

Sedan börjar nästa stycke.

Och man kan bryta av
en rad på mitten.

Det var väl ganska enkelt, eller hur?

Textformatering

Det finns ett gäng olika saker man kan göra med text, förutom att bryta rader och indela i stycken. De mest förekommande är fetstil, kursivering, unserstrykning och rubriker.

Fetstil text... text...

Kursivering text... text...

Understrykning text... text...

Rubriker <H4>text...</H4>
text...

Det går givetvis att låta texten ha flera attribut samtidigt, om man nu nödvändigtvis vill. Det där med rubriker är också lite speciellt. Det finns sex olika nivåer på rubriker. Dom heter H1, H2, ... ,H6. Skillnaden på en rubrik och en vanlig text är att för rubriker är fontstorleken förinställd, så man inte behöver bry sig om det, plus att det är fetstil.

Det går också att ställa storlek på fonten i vanlig text. Detta åstadkommer man med ,där värde kan vara absolut eller relativt. Alltså: jag kan sätta storleken till exakt tre (SIZE="3") eller till tre mer än just nu (SIZE="+3"). Storleken är normalt tre, i alla fall på min datamaskin. Troligen kan det bero på vilka insällningar du har i windows och/eller i din browser. Kolla nedan för en uppfattning om storleken.

Storlek ett, två, tre, fyra, fem, sex.

Storleken 6 motsvarar alltså även storlek +3 (3+3=6 okej?). Och när man sedan är klar med sin storlek, och vill återgå till standard, gör man ju det med , men det förstod du väl redan förut.

Ifall man nu inte skulle vara nöjd med olika storlekar, utan verkligen vill att något ska synas, kan man ju alltid använda färger.

Färger

Färger kan ansättas såväl bakgrunden som själva texten. Färger kan anges på två olika sätt: antingen som ett färgvärde, eller med färgens namn.

Färgvärdet kan kanske verka lite krångligt, för man anger inte bara färgen med siffror, det ska vara hexadecimala siffror också. Man anger färgerna i RGB-format, d.v.s. värden för rött, grönt och blått, i en kombination som ger rätt färg. Varje värde anges med två siffror. Se exempel nedan.

Värdet "000000" ger svart färg Värdet "black" ger svart färg

Värdet "FF0000" ger röd färg Värdet "red" ger röd färg

Värdet "00FF00" ger grön färg Värdet "green" ger grön färg

Värdet "0000FF" ger blå färg Värdet "blue" ger blå färg

Värdet "FFFFFF" ger vit färg Värdet "white" ger vit färg

Värdet "orange" ger orange färg Värdet "cyan" ger ljusbå färg

Jag har faktiskt inte koll på hur många färger man kan ange med namn, men det står säkert i nån mer komplett HTML-guide.

Sedan gäller det bara att få färgen på det ställe man vill ha den. Ska man sätta hela bakgrunden i en färg får man göra det i BODY-taggen. Det ser ut såhär: <BODY BGCOLOR="red">, om man nu vill ha just röd bakgrund.

So framgår ovan kan även texten färgläggas. Det gör man enklast med den nästan självförklarande taggen (alltså för röd text).

Länkar

Nu börjar vi komma till det riktigt intressanta. Länkar är det som gör HTML så enkelt och användbart. En länk är helt enkelt en hänvisning till ett annat dokument. Det behöver inte heller nödvändigtvis vara ett HTML-dokument. Textfiler och bilder är väl två av de vanligaste målen för en länk, bortsett från andra HTML-dokument förståss.

En länk behöver inte heller nödvändigtvis använda WWW. Även andra tjänster kan tas i anspråk, som till exempel FTP (filöverföring), NEWS (nyhetsgrupper) och MAIL (elektronisk post).

En länk skapar man genom att lägga in ett "ankare" i sin HTML-fil, som hänvisar till den fil man vill åt. Ankaret innehåller en fullständig adress till filen i form av en URL (Uniform Resource Locator). Det är ett fint ord som du kan använda för att imponera på dina vänner. Ankaret anges med <A>. Sedan ska man ju ha in adressen också. Nu kallar jag helt enkelt adressen för URL. Jag tänkte ta det lite senare. Den sätter man in i taggen: <A HREF="URL">. Så här ser det i alla fall ut:

    <HTML>
      <HEAD>
      <TITLE>Olles HTML-Grotta</TITLE>
      </HEAD>
      <BODY>
        Så här ser en <A HREF="http://www.eff.org/">länk</A> ut.
      </BODY>
    </HTML>

Där "www.eff.org" är själva adressen. Och när man tittar på den i sin lilla browser blir det:

Så här ser en länk ut.

Länken blir understruken och får en annan färg. Färgen kan vara den färg som är förinställd i browsern eller en färg som är angiven i HTML-dokumentet. Mer om det senare.

Tjänster

Som någon säkert uppmärksammade, så står det "http://....." i länken. Det där "http" är en av det tjänster som finns till förfogande. Här är några:

http:// Hämta en fil från en WWW-server

ftp:// Hämta en fil från en FTP-server

file:// Hämta en fil från den lokala datorn

gopher:// Hämta en fil från en GOPHER-server

mailto: Skicka E-mail

news: Hämta nyheter från USENET NEWS

Adresser

Så kommer vi då till URL:erna. Det är en slags symboliska adresser som beskriver var den där filen man vill åt egentligen finns. Dom är uppbyggda efter ett enkelt system.

prefix host.domain[:port]/path/filename

Prefix är alltså tjänsten (t.ex. http://), host (värddator) och domain (domän) anger vilken datamaskin som avses (t.ex. www.eff.org) där den sista biten (org) anger domain. Slutligen anges path (katalog) och filename (filnamn).

Jag lämnade [:port] till sist, för det används inte så himla ofta. Den anger vilken portadress som skall anropas på värddatorn, om inte den normala ska användas.

Man behöver egentligen inte alltid ange alla delar av URL för att hitta rätt. Om jag till exempel vill länka till en sida som ligger i samma katalog som den aktuella sidan, räcker det att skriva: <A HREF="sida2.htm">nästa sida</A>. Ligger den i en underkatalog kan man skriva: <A HREF="katalog2/sida2.htm"> nästa sida</A>.

I dessa fall utgår browsern från den datamaskin och den katalog man ligger i för tillfället.

Bilder

Det är lite olika vilka typer av bilder som browsern klarar av, men GIF- och JPEG-format verkar vara allmänt okej.

En bild lägger man in med <IMG SRC="URL">, där URL är samma som ovan. Det betyder också att du kan ha bilder på din sida som du hämtar någon annanstans.

    <HTML>
      <HEAD>
      <TITLE>Olles HTML-Grotta</TITLE>
      </HEAD>
      <BODY>
        <IMG SRC="bild.jpg">
        <IMG SRC="http://www.eff.org/sweeps/guitarbutton.gif">
      </BODY>
    </HTML>

Och precis som med text, går det att lägga ett litet ankare runt en bild. På så sätt kan man göra en klickbar bild.

    <A HREF="http://www.eff.org"><IMG SRC="bild.gif"></A>

Vänner av skönhet anmärker måhända på att bilden får en ful ram runt sig när den blir ett ankare. Den kräsne kan göra sig av med dendär ramen med det enkla handgreppet BORDER="0".

    <A HREF="http://www.eff.org" BORDER="0"><IMG SRC="bild.gif"></A>

Som du kommer att märka, uppför sig bilder konstigt ibland. Dom vill inte hamna på de ställen man hade tänkt sig etc. Det går givetvis att fixa det mesta av detta, men inte allt man vill. Det tar nog en del plats att visa, så det kommer i överkursen.

Listor

Listor finns, vad jag vet, i två utföranden: numrerade och onumrerade. Numrerade listor gör man med taggen <OL> enligt nedan:

    <HTML>
      <HEAD>
      <TITLE>Olles HTML-Grotta</TITLE>
      </HEAD>
      <BODY>
        <OL>
        <LI>Första
        <LI>Andra
        <LI>och Tredje raden.
        </OL>
      </BODY>
    </HTML>

Det blir såhär:

Första

Andra

och Tredje raden.

På liknande sätt med taggen <UL> får man en onumrerad lista.

Första

Andra

och Tredje raden.

Man kan också experimentera med listor innuti andra listor.

        <OL>
        <LI>Första
            <OL>
            <LI>Första och en tredjedel
            <LI>Första och två tredjedelar
            </OL>
        <LI>Andra
        <LI>och Tredje raden.
        </OL>

Vilket ger följande resultat:

Första

Första och en tredjedel
Första och två tredjedelar

Andra

och Tredje raden.

Nu när du tycker att du kan göra listor kan du alltid försöka dig på tabeller, ty de är betydligt trixigare att fixa.

Tabeller

Precis som du trodde gör man tabeller med <TABLE>. Jag kastar mig oförskräckt på exemplet:

    <TABLE BORDER="2">
    <TR>
    <TD>rad1, kolumn 1
    </TD>
    <TD>rad1, kolumn 2
    </TD>
    </TR>
    </TABLE>

Vilket ger:

rad1, kolumn 1 rad1, kolumn 2

Som du säker ser lade jag till en egenskap som heter BORDER="2". Om man inte anger BORDER får man ingen ram runt tabellen, och då kan det vara svårt att se var gränserna går.

Som man kan gissa anger <TR> raden och <TD> kolumnen i tabellen. Om jag har förstått saken rätt, måste man alltid börja med raden (som i exemplet). Sen är det bara att fylla på med kolumner i raderna och rader i tabellen till man har fått nog.

Men det blev ju inte så särskilt snyggt. Och hur fixar man det? Om man vill ha lite utrymme mellan texten och ramen kan man välja att sätta in CELLPADDING="10" i tabellen:

    <TABLE BORDER="2" CELLPADDING="10">

och då blev det genast bättre:

rad1, kolumn 1 rad1, kolumn 2

Eller CELLSPACING="10":

rad1, kolumn 1 rad1, kolumn 2

Fast då blir det snyggare om man tar bort BORDER. Siffrorna som man anger i de olika attributen är antal pixlar (eller bildelement, om man ska tala svenska).

Det går också att ange storleken på hela tabellen, eller enskild kolumn med WIDTH. Denna anges i antal bildelement eller i procent (av browserns fönster).

    <TABLE BORDER="2" WIDTH="70%">

Får till följd:

rad1, kolumn 1 rad1, kolumn 2

Liksom vid annan textformattering går det i tabeller att ha viss påverkan över textens placering. Om man till exempel vill centrera texten på en rad:

    <TR ALIGN="CENTER">

Ger:

rad1, kolumn 1 rad1, kolumn 2

Eller bara en kolumn med:

    <TD ALIGN="CENTER">

Så får man:

rad1, kolumn 1 rad1, kolumn 2

Det går även att ange andra värden till ALIGN än CENTER; det finns LEFT och RIGHT, alltså vänster och höger. Om man inte anger något så blir det automatiskt LEFT.

Rent allmänt så går det faktiskt att göra en himla massa grejor med tabeller, men det är krångligt och lätt att göra fel. Jag låter alla intresserade försöka själva, för jag ska inte påstå att jag har sån himla bra koll på det själv.

Överkurs

Tja..., det kommer en fortsättning så småningom. Tills dess: skicka dina kommentarer till mig.

Bakord

Nu kan du i alla fall det mest grundläggande och är redo att på egna ben träda websidornas väg. Kom ihåg att det enklaste sättet att lyckas göra något vackert, och kanske användbart, är att stjäla från de sidor du ser på nätet. Det brukar i allmänhet finnas någon funktion i browsern som låter en titta på HTML-koden för sidan man tittar på. I min browser (Netscape) finns det under menyn VIEW och val SOURCE. Det brukar också gå bra att spara hela sidan (minus bilder, förståss) på nåt sätt.

Lycka till på din upptäcktsfärd genom HTML-djungeln.

Fetstil	<B>text...</B>	text...
Kursivering	<I>text...</I>	text...
Understrykning	<U>text...</U>	text...
Rubriker	<H4>text...</H4>	text...

Värdet "000000" ger svart färg	Värdet "black" ger svart färg
Värdet "FF0000" ger röd färg	Värdet "red" ger röd färg
Värdet "00FF00" ger grön färg	Värdet "green" ger grön färg
Värdet "0000FF" ger blå färg	Värdet "blue" ger blå färg
Värdet "FFFFFF" ger vit färg	Värdet "white" ger vit färg
Värdet "orange" ger orange färg	Värdet "cyan" ger ljusbå färg

http://	Hämta en fil från en WWW-server
ftp://	Hämta en fil från en FTP-server
file://	Hämta en fil från den lokala datorn
gopher://	Hämta en fil från en GOPHER-server
mailto:	Skicka E-mail
news:	Hämta nyheter från USENET NEWS