HEMSIDESSKOLA

En hemsida består av en eller flera s.k. webbsidor som  är sammanlänkade sinsemellan och har ett gemensamt syfte, t.ex. att visa en persons olika intressen, ett företags olika avdelningar eller för att strukturera upp mycket information. Om all information man vill visa får plats på en sida blir begreppen hemsida och websida alltså identiska.

En hemsida med bara en sida bör innehålla information om vem man är och hur man kan bli nått (oftast med e-postadress, ibland även med vanliga adress). Det bör också framgå vilket syftet är med sidan, dvs. om man skriver den för att visa sina akademiska meriter, att visa vem man är och vad man är intresserad av rent allmänt, att nå ut till fler människor med texter av olika slag än man hade gjort med en vanlig tryckning eller att kunna publicera sådant som man annars inte har någon möjlighet att publicera (t.ex. artiklar, skönlitterära texter eller lyrik som man skrivit själv), eller bara att visa sina kunskaper inom olika områden (t.ex. inom webbdesign).

Om syftet är att visa ens akademiska meriter bör sidan innehålla namn, titel eller anställning, adress till arbetet, e-postadress och en lista med ens olika vetenskapliga publikationer. Artiklar och mindre texter kan också läggas ut på egna sidor som länkas till denna lista på huvudsidan.
Om man i stället vill visa sina intressen rent allmänt är det praktiskt att utgå från en huvudsida med allmän information om en själv och en kort uppräkning av vilka intressen man vill gå närmare in på och sedan skapa en sida för varje intresse som sedan länkas till huvudsidan. Om ett av dessa intressen omfattar flera olika delämnen kan man skapa ytterligare sidor för dessa som länkas till den sida som får vara huvudsida för intresset. Man kan även länka dem direkt till hemsidans huvudsida. Huvudsidor bör vara ganska kortfattade och ska inte ta särskilt lång tid att ladda ner och titta igenom, ett bra mått är kanske max 2 A4-sidor. Är den längre är det bra att sätta in s.k. target-länkar så att man snabbt kan förflytta sig mellan olika delar av sidan (se nedan).

En hemsida med flera webbsidor bör alltså innehålla en huvudsida och flera andra webbsidor. Huvudsidan döps alltid till index.htm för att den ska vara det första man får upp när man söker på webbadressen. De övriga sidorna får lämpligen korta och någorlunda genomskinliga namn, t.ex. meriter.htmför en meritlista eller musik.htm för en sida där man beskriver sin favoritmusik. Bland dessa kan några också fungera som huvudsidor för andra sidor men det har ingen betydelse för namngivningen.
 
 

Hur gör man en hemsida?

En hemsida kan skapas på flera sätt. Det vanligaste är att man använder ett program som hjälper en med detta, men man kan också skapa hela sidan i ett vanligt ordbehandlingprogram (t.ex. Anteckningar i Windows) med hjälp av html-taggar. Nedan ska jag visa hur man kan skapa en sida med egna taggar. Fördelen med att göra all taggning själv är att man får sidan precis som man vill ha den, men ett bra webbsidesprogram kan underlätta och skynda på arbetet betydligt. Det bästa är förmodligen en kombination där man skapar sidan i en sk. webbredigerare och sedan gör ändringar i den med hjälp av ett ordbehandlingsprogram.

En hemsida är uppbyggd av s.k. taggar. Dessa består av vinkelparenteser med ett kommando. De inleds med <...> och avslutas med </...>. Text som ska synas skrivs mellan taggarna. Vissa taggar har ingen sluttagg (</...>) utan gäller bara för en gång varje gång den tillämpas, t.ex. infogande av bilder, medan taggar med en sluttagg tillämpas på hela den text som kommer mellan taggarna. Radbrytningen har här ingen betydelse för hur det blir i det färdiga dokumentet. Däremot måste man ange en tagg för radbrytning när man vill ha en sådan i den färdiga texten.
Det spelar ingen roll om man skriver i gemener eller versaler i taggarna  så länge man inte blandar och är konsekvent. Det är också viktigt att länkade filer och bilder skrivs på rätt sätt. En bild som t.ex. heter BILD.JPG är inte identisk med bild.jpg eller Bild.jpg.
Vissa bokstäver kan hanteras av en webbredigerare, men måste kodas om man gör på detta sätt. Detta gäller å, ä, ö och specialtecken som deviser (-), citattecken och annat. Nedan följer en lista över taggar och därefter en lista med koder för bokstäver och färger.

1. De viktigast taggarna
2. Text
3. Bilder
4. Länkar
5. Listor
6. Tabeller
7. Ramar
8. Bokstäver och specialtecken
9. Färger
 

1. De viktigaste taggarna

<HTML></HTML>    Denna tagg visar att dokumentet är en webbsida och måste därför finnas med. Den vänstra taggen placeras därför lämpligen först
                                    i dokumentet och sluttaggen på samma sätt lämpligen sist.
<TITLE></TITLE>    Titel på dokumentet. Denna syns inte i själva webbdokumentet, men däremot i webbläsarens fönster.
<BODY></BODY>    Denna tagg innehåller det som kommer att synas i dokumentet. Sluttaggen bör därmed placeras i slutet av dokumentet, före </HTML>
                                    Den vänstra taggen kan innehålla olika slags information om det som kommer efter. Oftast rör det sig om bakgrundsfärg,
                                    bakgrundsbild och färg på text och länkar. Dessa ser ut som följer:
    BGCOLOR=#xxxxxx
    BACKGROUND="bild.gif"
    TEXT=#xxxxxx
    LINK=#xxxxxx
    VLINK=#xxxxxx
"xxxxxx" står här för en färgkod bestående av sex siffror eller bokstäver, se under färger nedan. Man kan också välja att inte ange någon färg och sidan får då standardfärger: grå bakgrund, svart text och röda länkar.

Här kan man även ange justering av texten och ljudfiler:
    ALIGN=left
    ALIGN=right
    ALIGN=center
    BGSOUND="ljud.fil"

Exempel:
<BODY BGCOLOR=#6699FF TEXT=#333333 LINK=#FF6666 VLINKN=#6600CC ALIGN=center>
Denna tagg ger en sida med himmelsblå bakgrund, mörkgrå text, röda länkar och lika besökta länkar. Den gör också att all text som skrivs efter den blir centrerad.
</BODY>
 

2. Text

<BR>                                                            Radbrytning (Behöver ingen sluttagg).
<HR>                                                            Infogar horisontellt streck, här kan anges streckets justering i sidled, längd och ev. skuggning med taggarna:
<HR ALIGN=center WIDTH="100%" SHADE> En vänsterjusterad linje som bara är halva sidan lång och utan skuggning blir sådeles:
<HR ALIGN=left WIDHT="50%" NOSHADE>
<CENTER>...</CENTER>                         Centrerar innesluten text
<LEFT>...</LEFT>                                     Vänsterjusterar innesluten text
<RIGHT>...</RIGHT>                               Högerjusterar innesluten text
<FONT FACE="Times">...</FONT>         Gör att innesluten text kommer att bli i ett visst teckensnitt, här Times
<FONT SIZE="14">...</FONT>                Bestämmer storleken på det valda teckensnittet
<FONT COLOR=#333333>...</FONT>     Bestämmer färgen på den text som skrivs med det valda teckensnittet
<H1>...</H1>                                              Rubriktagg. Alla taggar med H och en siffra är rubriker i olika storlekar. 1 är den största storleken
<H6>...</H6>                                              och 6 är den minsta.
<B>...</B>                                                  Fetstil
<I>...</I>                                                     Kursivstil
<U>...</U>                                                  Understrykning
<S>...</S>                                                   Text med genomstruken linje
<STRIKE>...</STRIKE>                            Upphäver text med genomstruken linje
<SUB>...</SUB>                                        Nedsänkt text
<SUP>...</SUP>                                         Upphöjd text
<BIG>...</BIG>                                          Gör den inneslutna texten större
<SMALL>...</SMALL>                              Gör den inneslutna texten mindre
<CITE>...</CITE>                                      Markera att den inneslutna texten är ett citat
<Q>...</Q>                                                  Markera ett kort citat
<BLINK>...</BLINK>                               Den inneslutna texten blinkar
<EM>...</EM>                                            Förhöjer texten (emphasize)
<WBR>...</WBR>                                     Tillåter att texten avstavas
<FORM>...</FORM>                                 Skapar ett formulär
<PRE>...</PRE>                                        Förformaterad text med fast typsnitt, radbrytningar m.m.
<NOBR>...</NOBR>                                 Innehåller text som inte kan radbrytas
&COPY                                                        Copyright
 
 

3. Bilder

<IMG SRC="bild.gif">    Denna tagg lägger in en bild. Man kan även lägga till parametrar som bestämmer bildens storlek, placering på sidan och om den ska ha en ram eller inte, alltså:

    ALIGN=left/center/right
    WIDTH=bildens bredd i pixlar eller procent
    HEIGHT=bildens höjd i pixlar eller procent
    BORDER=ram i pixlar, t.ex. "1" (0 = ingen ram)
    ALT=Förklarande bildtext som syns om man vilar muspekaren över bilden

Exempel:

<IMG SRC="bild gif" ALIGN=left WIDTH=40 HEIGHT=40 BORDER="2" ALT="Bild på något">
 
 

4. Länkar

<A HREF="http://www.domännamn.landsnamn">Länknamn</A>              Länk till internetadress
<A HREF=MAILTO=:namn.efternamn@företag.land>E-postadress</A>    Länk till e-postadress. Mellan taggarna kan man antingen skriva ut
                                                                                                                        e-postadressen eller kalla den för något, t.ex. "min e-postadress".
<A HREF="http://www.domännamn.landsnamn"><IMG SRC="bild.gif></A>    Bildlänk, en klickbar bild som leder direkt till en hemsida
<A HREF="http://www.domännamn.landsnamn">Länknamn<IMG SRC="bild.gif></A>    En bildlänk där det dessutom finns en förklarande
                                                                                                                                                   klickbar länktext.

Target-länkar gör man på följande sätt:

Strax före det ställe i texten dit man vill kunna komma skriver man
<A NAME="bilder">         om man vill kalla detta ställe för "bilder", det kan heta vad som helst

Vid det ställe tidigare på sidan där man vill ha länken, t.ex. i en innehållsförteckning innesluter man själva länktexten i:
<A HREF="#bilder">Bilder</A>
 

5. Listor

Listor kan vara av olika slag, men har det gemensamt att varje enhet i listan (som föregås av punkt eller siffra) ska omslutas av taggen
<LI></LI>
Hela listan kan sedan omslutas av olika taggar beroende på listans slag.

<MENU>...</MENU>    Innehåller en lista med oordnade flerradiga enheter
<DIR>...</DIR>                Innehåller en oordnad lista med enradiga enheter
<OL>...</OL>            Innehåller en numrerad lista med flerradiga enheter
<UL>...</UL>        Innehåller en punklista med en- eller flerradiga enheter

Exempel:

Punktlista
<UL><LI>första raden</LI>
<LI>andra raden</LI>
<LI>tredje raden</LI></UL>
 
 

6. Tabeller

<CAPTION></CAPTION> Innesluter en tabellrubrik
<TABLE></TABLE>    Markerar att innehållet är en tabell och bör placeras först respektive sist i en tabell.
    Denna tagg kan även innehålla:
    COLS="3"                      Antal celler i sidled
    ROWS="3"                     Antal celler i höjdled
    WIDTH="100%"            Bredd, 100% betyder hela webbsidans bredd. Om man anger en lägre siffra kan man även välja var på sidan den ska placeras
                                               med ALIGN="left/center/right
    HEIGHT=                       Tabellens höjd
    CELLSPACING             Justerar avståndet mellan cellerna i
    CELLPADDING             Justerar avståndet mellan cellerna i
    BORDER="1"                 Ram runt tabellen
    BORDERCOLOR=         Färg på ramen runt tabellen
    BGCOLOR=                   Bakgrundsfärg i tabellen
    ALIGN=left/center/right
    NOWRAP                       Förhindrar att en lång text bryts till flera rader i en cell.

<TFOOT></TFOOT>       Tabellfot
<THEAD></THEAD>      Tabellhuvud
<TH></TH>                     Rubrik i en cell
<TR></TR>                      En rad
<TD></TD>                      En cell

Exempel på tabell utan rubrik, en svart ram med 2 pixlar, fyra celler bred och två hög och som täcker 80% (centrerad) av webbfönstret.

<TABLE COLS=4 ROWS=2 WIDTH=80% ALIGN=center BORDER="2" BORDERCOLOR"#000000">
<TR><TD>Detta är första rutan</TD><TD>Andra rutan i sidled</TD><TD>Tredje rutan</TD><TD>fjärde rutan</TD></TR>
<TR><TD>Andra raden</TD><TD>andra radens andra ruta</TD><TD></TD><TD></TD></TR>
 
 

7. Ramar
 
 

8. Bokstäver och specialtecken

Om man skriver i en webbredigerar så omvandlar den för det mesta specialtecken och besvärliga bokstäver till koder åt en, men om man skriver i HTML direkt så får man göra det själv. Tecken som å, ä och ö går bra att behålla som de är så länge man bara tittar på hemsidan från en svensk maskin. Om någon försöker titta på den från ett land som inte har dessa bokstäver så blir resultatet dock inte så lyckat och därför bör de alltid kodas. De viktigaste koderna är följande:
 

å = å	Å = Å
ä = ä	Ä = Ä
ö = ö	Ö = Ö
æ = æ	Æ = Æ
ø = ø	Ø = Ø

Det finns också en del andra bokstavstecken som kan vara bra att känna till:
 

akut accent	á = á  Á= Á	é = é  É = É	í = í Í = Í
grav accent	à = à  À = &Aagrave;	è = è  È = È	ì = ì  Ì = Ì
circonflex	â = â  Ä = Â	ë = ê  Ë = Ê	ï = î  Ï = Î
prickar	â = ä  Â = Ä	ê = ë   Ê = Ë	î = ï  Î = Ï
	û = ü Û = Ü
tilde	ä = ã  Ä =Ã

Isländskt thorn = &thorn;
      "         eth    = &eth;

Specialtecken:
 
 

! = !	/ = /
# = "	: = &58;
% = %	; = &59;
' = '	= = =
( = &#40	? = ?
) = &#41	@ = @
* = *	[ = [
+ = +	] = &93;
, = ,

9. Färger

En färgkod består av sex tecken  och är uppbyggd av bokstäverna F och C och siffrorna 0, 3, 6 och 9. I koden grupperas tecknen två och två vilket innebär att det första och det andra är samma, liksom det tredje och fjärde och det femte och sjätte. Om dessa tecken används ensamma bildar de färgerna i gråskalan:

000000        svart (obsidian)
333333        mörkgrått (basalt)
666666        grått (flinta el. skiffer)
999999        ljusgrått (betong)
CCCCCC    ännu ljusare grått (täljsten)
FFFFFF      vitt (marmor el. krita)

Om man kombinerar dessa tecken kan man då få alla möjliga färger:
 

6666CC	Skymningsviolett		9966CC	Skogsviol
6699FF	Himmelsblått		6666FF	Kvällsblått
66CC99	Havsgrönt		66CCCC	Turkos
66CC66	Päron		66CC99	Klor
669966	Mjöldagg		669966	Mossa
FFFF66	Senap		99CC66	Oliv
FFCC66	Kaprifol		FFFF66	Banan
FF6666	Lax		FF9966	Grapefrukt
CC3366	Nejlika		FF6666	Tulpan
CC66CC	Orkidé		CC6699	Druva

 

6600CC	Violett		660099	Lila
0033CC	Blått		3300CC	Blåklocka
006666	Tång		003399	Havsblått
339933	Klöver		006633	Gran
99CC33	Björklöv		669933	Ormbunke
FFFF00	Citron		CCCC33	Krasse
FF9900	Mandarin		FFCC00	Saffran
FF6600	Melon		FF9900	Orange
FF3333	Blodapelsin		FF6600	Eld
FF0033	Rött		FF3333	Tomat

 

000000	Sepiabrunt
663333	Kakao
996633	Smuts
CC9933	Kola
CCCCCC	Varm marmor
999966	Varm granit
333333	Varm skiffer
CCCCCC	Kall marmor
666699	Kall granit
333333	Kall skiffer

Marikas hemsida, övriga sidor:

Startsidan	Mer om mig	Studier	Foton	Släkt o. hembygd	Dans	Dikter o. citat	Länkar