# En modern webbsida steg för steg
Author: johan

Tidigare har vi tittat på varje del för att bygga en professionell hemsida med modern webbstandardarder.

De tidigare delarna har varit:

*   [Planera din hemsida](/Articles/Read.aspx?ArticleId=1f5b2eaa-b79a-418a-a733-b47ad0743d06 "http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=1f5b2eaa-b79a-418a-a733-b47ad0743d06")
*   [Skriv texter som blir lästa](/Articles/Read.aspx?ArticleId=1143d3d5-1c41-4c2e-ad72-d0c01afc6ccb "http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=1143d3d5-1c41-4c2e-ad72-d0c01afc6ccb")
*   [Grunderna i HTML](/Articles/Read.aspx?ArticleId=b3f28de8-c058-4195-a10c-3b5e851ff5af "http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=b3f28de8-c058-4195-a10c-3b5e851ff5af")
*   [Introduktion till CSS](/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2 "http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2")

I denna artikel ska du få se konkreta exempel på hur du kan sätta samman alla delarna. Du bör ha läst de tidigare artiklarna eller ha en grundförståelse för HTML och CSS.

Syftet med hemsidan
-------------------

Syftet med min hemsida är att ge min pappa, konstnären Åke Nordberg, en hemsida där han kan visa upp sina tavlor. Han kan ingenting om att bygga hemsidor. Sidan måste därför vara riktigt enkel att uppdatera.

Största syftet är att kunna visa upp de nyaste tavlorna och berätta om när och var han har utställningar. Förmodligen är besökaren ganska ovan vid datorer och internet. Sidan måste därför vara väldigt enkelt att förstå.

Besökare kan dels redan kunna adressen, men mer troligt är att de hittar till den med hjälp av någon sökmotor som t ex Google. Därför måste sidan vara så anpassad som möjligt för att Google ska kunna indexera innehållet på sidan.

Besökarna kommer troligtvis inte köpa tavlor direkt från hemsidan, men däremot ska det vara väldigt enkelt att hitta kontaktuppgifter för att komma i kontakt med konstnären.

Textinnehållet
--------------

Har man väl hittat till hemsidan är man troligtvis mest ute efter att titta på tavlorna eller att veta när och var utställningarna är. Textinnehållet kommer därför vara rätt kortfattat och förmodligen inte uppdateras så himla ofta.

Däremot ska sidan innehålla många ord som användare kan tänkas söka på i sökmotorer. Förhoppningsvis kan fler hitta hemsidan av en ren slump, t ex om man söker på resmål. Det är därför viktigt att alla bilder är väl beskrivna med så kallade alt-texter. Detta gör att även Google kan ”se” bilderna.

Layout
------

Sidans layout och design ska vara riktigt enkel. Det kommer inte finnas speciellt många sidor så navigationen kan göras riktigt enkel och tydlig.

Designen ska även hjälpa till att visa tavlor, så färgval och illustrationer kommer vara sparsmakade.

Redan på startsidan ska användaren slussas in till visningen av tavlorna. På startsidan visas därför alltid de senast inlagda bilderna, samt länkar till de olika bildkategorierna. Tack vare kategori-länkarna kommer viktiga sökord finnas redan på startsidan.

Navigation
----------

Eftersom sajten inte kommer ha speciellt mycket innehåll räcker det att ha en väldigt enkel navigation. Sidorna kommer inte ha några undersidor.

Inledningsvis kommer sajten ha följande sidor:

*   Start
*   Tavlor
*   Utställningar
*   Om konstnären
*   Kontakt

HTML-kodens struktur
--------------------

Varje del i sidan delas in i olika grupper av innehåll. Detta görs med DIV-element. Fördelen med detta är just att vi kan formge sidan nästan hur vi vill med hjälp av CSS. Vi behöver egentligen inte veta i förväg hur sidan kommer se ut, bara vi vet strukturen på sidan.

Inledningsvis tänker jag mig att sidan ska innehålla sidhuvud, navigation, stor innehållsyta, en sidospalt och en sidfot där adressuppgifter alltid ska vara tillgängliga. Sidospalten kommer inte visas på alla sidor utan bara där den fyller ett syfte.

![Hemsidans olika delar och divar](/Sites/b1f6387b-6b09-4821-a65a-3e3b66f2fa1f/hemsidaboxar.png "Hemsidans olika delar och divar")

Strukturen i koden ser ut så här:

· Body

*   Div för att kapsla in allt innehåll
    *   Div för sidhuvud
    *   Div för navigation
        *   Ul för navigation
            *   Li för länk
                *   Länk
            *   Li
                *   Länk
            *   Li
                *   Länk
    *   Div för innehåll
        *   Rubrik
        *   Text
        *   Underrubriker
        *   Mer text
    *   Div för högerspalt
        *   Rubrik
        *   Text
    *   Div för adressuppgifter
        *   Adress

<!--\[if !supportLists\]-->·

Koden kommer inte att innehåll något utseende alls. Den innehåller enbart struktur och innehåll. Tack vare att vi kapslat in varje del av sidan med olika DIV-element med unika ID eller CSS-klasser blir det enkelt att skapa en enda CSS-stilmall för alla sidor.

Detta ger många fördelar, bland annat:

*   Lätt att uppdatera innehållet
*   Lätt att få formgivningen enhetlig över hela sajten
*   Lätt att ändra utseende på hela sajten utan att behöva ändra i enskilda sidor
*   Bättre när Google ska indexera sidan
*   Bättre tillgänglighet för människor med funktionshinder

Vi bygger en mallsida
---------------------

Jag tänker börja med att göra en mallsida. Denna kommer följa strukturen ovan, men ännu så länge inte ha något utseende.

Så här ser koden ut:

<!DOCTYPE  html  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html  xmlns\="http://www.w3.org/1999/xhtml">

<head\>

    <meta  http-equiv\="Content-Type" content\="text/html; charset=utf-8" />

    <title\>Roslagskonst - &Aring;ke Nordberg</title\>

</head\>

<body\>

    <div  class\="PageContainer">

        <div  class\="PageHeader">

        </div\>

        <div  class\="Navigation">

   <ul\>

    <li\><a  href\="Default.aspx">Hem</a\></li\>

    <li\><a  href\="Art.aspx">Visa tavlor</a\></li\>

    <li\><a  href\="Shows.aspx">Utst&auml;llingar</a\></li\>

    <li\><a  href\="About.aspx">Om &Aring;ke Nordberg</a\></li\>

    <li\><a  href\="Contact.aspx">Kontakt</a\></li\>

   </ul\>

  </div\>

  <div  class\="ContentContainer">

   <h1\>Sidans rubrik</h1\>

   <p\>Exempel på innehåll</p\>

   <h2\>Underrubrik</h2\>

   <p\>Exempel på mer innehåll.</p\>

  </div\>

  <div class\="SideColumn">

   <h2\>Rubrik i sidospalten</h2\>

   <p\>Innehåll i sidospalten</p\>

  </div\>

  <div  class\="PageFooter">

   <address  class\="ContactInformation">

    &Aring;ke Nordberg<br />

    Svanbergav&auml;gen 27<br />

    761&nbsp;73 Norrt&auml;lje

   </address\>

   <address  class\="ContactInformation">

    <a  href\="mailto:ake.nordberg@roslagskonst.com">

     ake.nordberg@roslagskonst.com

    </a\><br />

    Telefon: 0176-229 329

   </address\>

  </div\>

 </div\>

</body\>

</html\>

Om du har ett HTML-program som kan göra mallar är det en bra idé att spara detta som en mall som du sedan kan utgå från när du skapar nya sidor. Hur som helst så sparar jag denna fil som default.htm.

När man tittar på detta i webbläsaren så ser det kanske inte så kul ut än, men vi har en perfekt grund för att formge sidan precis hur vi vill.

![Hemsidan utan något utseende](/Sites/b1f6387b-6b09-4821-a65a-3e3b66f2fa1f/utancss.jpg "Hemsidan utan något utseende")

Trots att sidan inte är så snygg än, så fungerar den faktiskt. Det finns en tydlig navigation. Det är enkelt att se vilka rubriker som är viktigast och vi adressuppgifterna särskiljer sig från den övriga texten.

Formge sidan med CSS
--------------------

Nu kommer vi till den kanske roligaste biten. Nu ska vi formge sidan. Jag kommer att lägga all CSS i en egen fil så att jag kan utnyttja samma fil på alla sidor i sajten. Jag strävar alltid efter att så långt det går separera innehåll från utseende.

Jag har en idé om att den slutliga sidan ska se ut ungefär så här:

![En idé om hur hemsidan ska se ut när den är färdig.](/Sites/b1f6387b-6b09-4821-a65a-3e3b66f2fa1f/hemsideside.jpg "En idé om hur hemsidan ska se ut när den är färdig.")

Typografi
---------

Det första jag tänker göra är att bestämma teckensnitt och storlekar för text och rubriker. Ett teckensnitt som jag tycker är snyggt och som många bloggar använder är ”Trebuchet Ms”. Den gör sig bra i lite större storlek.

I en helt ny fil som jag döpt till styles.css lägger jag in följande kod:

body

{

 font-family: "Trebuchet MS", "Times New Roman";

 font-size: 90%;

}

Att tilldela elementet body denna stildefinition gör att precis all text i hela sidan får denna stil. Det sker tack vare att alla stildefinitioner ärvs ned till alla barn-element. Alla element som har med innehåll att göra är ju barn, barnbarn etc till just body-elementet.

Koden font-family, eller selektorn som den egentligen kallas, ger all text teckensnittet ”Trebuchet MS” och om det inte finns installerat används ”Times New Roman”. Det är bra att ange flera teckensnitt. Separerar varje alternativt teckensnitt med kommatecken.

Storleken på texten bestäms med selektorn font-size. 90% betyder att det ska vara 90% av standardstorleken. Storlekar kan anges i pixlar (px), punkter (pt), procent (%) eller em. Pixlar och punkter är ofta mer exakta och förutsägbara, men gör också att texten inte kan förstoras eller förminskas i vissa webbläsare. Du bör helst använda procent eller em då användaren själv kan bestämma hur stor texten ska vara. Detta är t ex viktigt för personer med nedsatt syn.

Enheten ”em” är lite lurig. 1 em är samma som 100%. 0.8em är samma som 80% och 1.5em är samma som 150%.

Jag fortsätter med att lägga till följande kod:

h1

{

 font-size: 200%;

 margin: 0 0 0.5em 0;

 font-weight: normal;

}

h2

{

 font-size: 150%;

 margin: 0 0 1em 0;

 font-weight: bold;

}

p

{

 margin: 0 0 1em 0;

 line-height: 1.5em;

}

Denna kod gör alla h1-element, dvs. den viktigaste rubriken, dubbelt så stor som normaltexten. Selektorn **margin** bestämmer ur stort utrymme det ska vara runt elementet. Marginalerna anges i ordningen topp, höger, botten och vänster. Koden **margin: 0 0 0.5em 0;** betyder att det inte är något utrymme över, till höger eller till vänster om rubriken, men under rubriken ska det vara ett utrymme som är hälften så stort som rubrikens höjd. 0.5em bestämmer just att det är hälften av rubrikens höjd. Ju större text, desto större avstånd.

Koden **font-weight: normal;** bestämmer att rubriken ska vara normal stil. Som standard är rubrik 1 fet stil, därför behöver jag sätta den till normal om jag vill slippa standardutseendet.

För rubriknivå två, dvs. elementet h2, är teckenstorleken 150% av normalstorleken, avståndet under rubriken är lika högt som rubrikstorleken och rubriken ska vara fet stil.

Slutligen har jag lagt in en definition för alla p-element, dvs. vanliga textstycken. Som standard har varje p-element en tom rad ovanför sig. Jag vill hellre ha detta under stycket. Det löser jag med margin-selektorn. Dessutom ökar jag radavståndet för att texten ska bli luftigare. Koden **line-height: 1.5em** gör radavståndet 1.5 ggr det normala avståndet.

För att se hur sidan ser ut med dessa stilmallar behöver jag länka in stilmallen i HTML-sidan. Först sparar jag CSS-filen som styles.css i samma mapp som HTML-filen. Därefter lägger jag till <link>-element mellan <head> och </head>

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>Roslagskonst - &Aring;ke Nordberg</title>

 **<****link** **rel\="stylesheet"** **type\="text/css"** **href\="Styles.css" />**

</head>

Om jag nu tittar på HTML-sidan har ser den ut så här:

![Hemsidan med typografi](/Sites/b1f6387b-6b09-4821-a65a-3e3b66f2fa1f/typografi.jpg "Hemsidan med typografi")

Inga stora underverk ännu så länge, men ett steg på vägen.

Layout
------

Nästa steg är att få lite med formgivning på sidan. Jag vill att sidan ska ha en bestämd bredd och att sidan ska vara centrerad i webbläsaren.

Tack vare att vi lade ett div-element runt allt innehåll är detta relativt enkelt. För att centrera sidan behöver vi dock göra lite annorlunda i Internet Explorer 6.0 och andra webbläsare som är bättre på att följa webbstandardarder.

Öppna CSS-filen igen och ändra definition för body-elementet så att det istället står:

body

{

 font-family: "Trebuchet MS", "Times New Roman";

 font-size: 90%;

 **background-color:#efefef;**

 **margin****: 0;**

}

Lägg även till detta i slutet av filen:

.PageContainer

{

 margin: 0 auto 0 auto;

 width: 770px;

 background-color: white;

}

Koden **background-color: #efefef;** bestämmer att bakgrunden för hela sidan ska vara ljust grå. Du kan lära dig mer om färgkoder på Wikipedia.

Koden **margin: 0;** bestämmer att sidan inte ska ha några marginaler alls. När både topp, höger, botten och vänster ska ha samma marginal, räcker det med att ange det en gång.

Som du kanske minns från Intruktion till CSS så betyder punkten i inledningen till .PageContainer att detta är namnet på en CSS-klass. Samma namn har jag angett på div-elementet i HTML-sidan.

Koden **margin: 0 auto 0 auto;** gör att sidan centreras horisontellt, men inte några marginaler i toppen eller botten av sidan. Det är just denna del som inte fungerar i IE6. Vi kommer till en lösning till för det.

Koden **width: 770px;** bestämmer att sidans bredd ska vara 770 pixlar. Jag bestämmer även att allt inuti sidan ska ha vit bakgrund. Att jag valt just 770px beror bland annat på att det ger en behaglig sidbredd för att läsa texterna och för att det får plats på en skärm med upplösningen 800x600px.

I vissa avseenden är det bättre att undvika fasta bredder. En mer flytande layout skulle anpassa sig bättre efter olika skärmar och bättre kunna visas på mobiltelefoner eller handdatorer.

Fortsätt att lägga till nedanstående kod:

.PageHeader

{

 height: 120px;

 background-color: Red;

}

.PageFooter

{

 padding: 1em 2em 2em 2em;

 border-top: 1px solid #ffcc00;  
color: #666;  
background-color:#efefef;  
 overflow: auto;

}

.PageFooter address

{

 float: left;

 width: 33%;

}

.ContentContainer, .SideColumn

{

 padding: 2em;

}

Eftersom jag ännu inte riktigt bestämt mig för hur sidhuvudet ska se ut, så gör jag bara ned röd yta av det. I klassen .PageHeader har jag bestämt att höjden på sidhuvudet ska vara 120px. Temporärt har jag även lagt till en röd bakgrundsfärg.

I sidfoten har jag lagt till två selektorer som heter **padding** och **border**. Border skapar kantlinjer runt elementet. Padding skapar utfyllnad mellan kantlinjen och innehållet.

Boxmodellen
-----------

Förhållandet mellan margin, border och padding brukar kallas för ”boxmodell”. Hur de hänger ihop visas enklast med nedanstående bild:

![Boxmodellen](/Sites/b1f6387b-6b09-4821-a65a-3e3b66f2fa1f/boxmodell.png "Boxmodellen")

Innerst ligger innehållet. Det är på denna yta du kan bestämma bredd och höjd. För att få luft mellan innehåll och eventuell kantlinje kan du använda padding. Utanför padding kommer kantlinjen. Kantlinjer kan ha olika tjocklekar, färger och stilar. För att få luft mellan kantlinjen och elementen runtomkring används margin.

Detta är viktigt då både margin, border och padding påverkar elementets bredd. Om du bestämt bredden till 200 pixlar, har 20px padding på vardera sidan, en 2px bred kantlinje och 10px bred marginal kommer elementets totala bredd bli 200 + (20\*2) + (2\*2) + (10\*2) = 264px.

Figursättning med float
-----------------------

I sidfoten finns två address-element. Att jag valt att använda detta element istället för t ex div är för att det blir semantiskt mer korrekt. Det betyder att koden beskriver innehållet, utan att man behöver förstå innehållet. Detta är viktigt för sökmotorer och funktionshindrade, men har även andra användningsområden.

Jag vill att de två adressblocken ska ligga sida vid sida. Koden **width: 33%;** bestämmer att varje block ska vara 33% av sidfotens bredd. Koden **float: left;** bestämmer att elementet ska figersättas till vänster, vilket innebär att annat innehåll kan ligga flöda till höger.

Float är det kanske det viktigaste verktyget för att skapa layout utan tabeller.

Fortsätt med att lägga till följande kod:

.Navigation

{

 background-color: #FFCC00;

 padding: 0.5em 2em 0.5em 2em;

 overflow: auto;

}

.Navigation ul

{

 margin: 0;

 padding:0;

 list-style:none;

}

.Navigation ul li

{

 float: left;

 margin: 0 2em 0 0;

}

.Navigation ul li a

{

 color: black;

 text-decoration: underline;

}

Nu är det dags att formge navigationen. Den första koden gör egentligen ingenting nytt. Den bestämmer en brandgul bakgrundsfärg och anger utfyllnad runt texten.

Navigationen består av en punktlista. Punktlistor är utmärkta för att skapa t ex navigationer med. En stor fördel är att de har en inbyggt struktur, vilket gör det lätt att skapa trädstrukturer ungefär som filer och mappar.

Koden **.Navigation ul** tar bort marginal och utfyllnad på alla ul-element som är barn till klassen .Navigation. Koden **list-style: none;** gör att listan inte får någon punkt framför sig.

![Navigation, ex 1](/Sites/b1f6387b-6b09-4821-a65a-3e3b66f2fa1f/hemsida-nav1.jpg "Navigation, ex 1")

Koden **.Navigation ul li** låter varje li-element ligga bredvid varandra. Marginalen till höger om varje li-element är satt till 2em, dvs. två teckens bredd.

![Navigation, ex2](/Sites/b1f6387b-6b09-4821-a65a-3e3b66f2fa1f/hemsida-nav2.jpg "Navigation, ex2")

Som du kan se så lägger sig länkarna nu över den gula bakgrundsfärgen. För att ordna detta har jag satt koden **overflow: auto;** på klassen .Navigation.

Slutligen bestämmer koden **.Navigation ul li a** att länkar i navigationen (a-elementen) ska vara svarta och alltid vara understrukna.

![Navigation, ex 3](/Sites/b1f6387b-6b09-4821-a65a-3e3b66f2fa1f/hemsida-nav3.jpg "Navigation, ex 3")

Att skapa kolumner med CSS
--------------------------

Nu återstår endast att låta innehållsytan och sidospalten visas som två kolumner. Även det ska göras genom att använda float.

Lägg till denna kod:

.ContentContainer

{

 float: left;

 width: 480px;

}

.SideColumn

{

 float: right;

}

Koden float:left; på klassen ContentContainer styr att annat innehåll kan flöde till höger. För att verkligen göra plats för en sidospalt bestämmer jag innehållsytans bredd. Jag behöver dels tänka på om jag har marginaler, kantlinjer och padding, men även dra av så mycket som sidospaltens bredd.

I klassen för sidokolumnen sätter jag **float: right;** för att verkligen högerställa kolumnen. Nu har vi två kolumner vid sidan av varandra utan att ha använt layout-tabeller.

Det är dock ett litet dilemma. Hela sidfoten flödar också till höger om innehållet.

![Inte riktigt bra än.](/Sites/b1f6387b-6b09-4821-a65a-3e3b66f2fa1f/utanclear.jpg "Inte riktigt bra än.")

För att bestämma att ett element inte ska flöda runt ett annat element används koden **clear: both;**. Lägger vi till detta i klassen .PageFooter blir utseendet bättre.

Slutligen
---------

Det sista jag ska göra är att lägga in ett lite bättre sidhuvud. Jag har skapat en bild som passar i ytan. I HTML-koden lägger jag in ett img-element.

<div class\="PageHeader"><img src\="header-boats.jpg" alt\="Sidhuvud" /></div\>

I stilmallen anpassar jag definitionen för PageHeader lite. Jag har bort den bestämda höjden och den röda bakgrundsfärgen, och lägger istället in definition för bilden.

.PageHeader

{

}

.PageHeader img

{

 width: 770px;

}

Sidan är nu färgig och med lite mer innehåll ser den ut så här:

![Den färdiga hemsidan](/Sites/b1f6387b-6b09-4821-a65a-3e3b66f2fa1f/fardighemsida.jpg "Den färdiga hemsidan")

Relaterade länkar
-----------------

*   [Planera din hemsida](/Articles/Read.aspx?ArticleId=1f5b2eaa-b79a-418a-a733-b47ad0743d06 "http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=1f5b2eaa-b79a-418a-a733-b47ad0743d06")
*   [Skriv texter som blir lästa](/Articles/Read.aspx?ArticleId=1143d3d5-1c41-4c2e-ad72-d0c01afc6ccb "http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=1143d3d5-1c41-4c2e-ad72-d0c01afc6ccb")
*   [Grunderna i HTML](/Articles/Read.aspx?ArticleId=b3f28de8-c058-4195-a10c-3b5e851ff5af "http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=b3f28de8-c058-4195-a10c-3b5e851ff5af")
*   [Introduktion till CSS](/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2 "http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2")

Av: johan
---------

*   [Personlig sida](javascript:void top.ShowProfile('johan'))
*   [Kontakta](javascript:void top.ShowProfile('johan', 'Contact.aspx'))

Datum för publicering
---------------------

*   2007-03-23

## Comment 1
Author: xarfez

Du ska ha en eloge för dessa artiklar som du lagt upp nu. Helt crazy seriös ju :).

Nu orkade jag inte läsa igenom dem då jag inte är nybörjare men iaf.

## Comment 2
Author: johan

#1: Tack! Jag tror att många av besökarna här är nybörjare, så jag tänkte ta det från grunden. Det jag egentligen tycker är roligast är CSS och JavaScript, så det kommer bli mer avancerade tips också.

## Comment 3
Author: xarfez

Finemang ju :\]

JavaScript kan man alltid bli bättre på.

## Comment 4
Author: Tom

Oj, det där var seriöst! Superartikel!

Vem som helst kan få det att se proffsigt ut nu!

  Tom

## Comment 5
Author: Kattapult

Va kul med en sån bra artikel :D.

Jag får prova lite sedan :)

## Comment 6
Author: Niklas

Verkligen bra artikel! Jag satt och lekte med mallarna. Det blev en hemsida. :-)

[http://www.photograf.se/](http://www.photograf.se/)

Vänliga hälsningar

Niklas

## Comment 7
Author: johan

Härligt Niklas!

Ser bra ut och snygg kod! Stilmallslänkningen ska ligga mellan <head> och </head>. Du har lagt den precis utanför </head>.

I sidfoten saknas det en </p>. Visserligen inte ett krav så länge du inte kör xhtml.

Men en viktig sak du glömt är att ange alt-texter för alla bilder. Tänk på Google och funktionshindrade!

// Johan

## Comment 8
Author: Niklas

#7: Alt-texterna har jag inte glömt. De kommer. Jag har tagit åt mig av ditt tjat i kommentarerna till alla andras sidor. :-)

Jag ska fixa de andra sakerna.

Tack för kommentarerna!

Vänliga hälsningar

Niklas

## Comment 9
Author: Zpookey

Niklas....Jag bara diggar bilden på ekorren :D  
Den är ju grym :)  
  
För att kommentera din hemsida så är den stilren och lättnavigerad.....men ska du verkligen prata om dig själv i tredje person i "Om Niklas Johansson"?

## Comment 10
Author: johan

#8: Härligt att höra att det ger effekt. :)

Läste för ett tag sedan att 97% av världens hemsidor är otillgängliga för funktionshindrade. Det absolut enklaste man kan göra för att fixa det är just alt-texter och rubrik-element. Och man har ju så mycket att vinna på det själv också med tanke på att Google också gillar sidan bättre då.

Att helt gå ifrån tabellbaserad design är svårare, men något man bör försöka lära sig.

// johan

## Comment 11
Author: ryttarn

Jag blev lite inspirerad och tänkte börja designa min nya hemsida med hjälp av Sidmallar, men har en liten fundering, kan man på ett enkelt sätt låta menyn styra vad som visas i "ContentContainer" utan att header och navigation behöver laddas om? eller är jag hänvisad att använda frames då.....

Anledningen till frågan är att både navigation och inehållet på sidan hämtas från en ganska maffig databas. Vill inte gärna göra för många roundtrips på menyn....

## Comment 12
Author: johan

#11: Nej, inte utan ramar. Rent praktiskt däremot så har både DreamWeaver, Frontpage och Expression Web stöd för webbmallar där du kan skapa en mallsida där du har vissa regioner i sidan som går att ändra.

Det gör att du bara har en mallsida att ändra i när du ska lägga till eller ändra i navigationen eller byta design på sidan. Men hela sidan, inkl meny, kommer alltid sparas med varje fil.

Jag tror inte man behöver vara så väldigt rädd för att varje enskild sida blir lite störrre jämfört med ramar. Det som ofta tar tid på normala hemsidor är antalet filer som behöver hämtas, dvs. sammanlagda antalet bilder, stylesheets, javascript-filer etc som en sida behöver. När man har ramar behöver man hämta flera filer och man har ofta samma fil fler gånger i olika ramar.

## Comment 13
Author: ryttarn

#12 Tja, då behåller jag nog ramarna.... Den applikation jag planerar för just nu skulle bli vansinnigt tungrodd om jag skulle ladda menystrukturen varje gång då denna kan inehålla väldigt många poster beroende på vart och vad man håller på med........

Men man kan ju ta det bästa från två världar, layoutinformationen kan man ju lägga i CSS fil, medan man håller navigationsträdet i en sepparat frame för att slippa en massa onödiga roundtrips.... Skall länka när jag kommit lite längre i prototypen så kanske du förstår varför jag vill undvika roundtrips....

## Comment 14
Author: Tuva-Lena

Alltså, det här blir spännande. Vilken artikel du har plitat ihop Johan! Wow! Jag gick en ettårig kurs i webb design för 8 år sen, och då var det bara html.kod som gällde, så jag har fortsatt med det. Men nu börjar jag märka luckorna som uppstår. Hoppas kunna lära mig jättemycket av dig. Vad jag kan se så är du minst lika driven som dom lärare jag hade då! Hääärligt att utvecklas! Vill du titta på min sida? Driver ett äventyrsföretag vid sidan av: [www.3sjoar.se](http://www.3sjoar.se/)  ![Glad](../tiny_mce/plugins/emotions/images/smiley-smile.gif)

## Comment 15
Author: Madde80

Tackar för en bra och grundlig presentation till hur man bygger upp en hemsida från grunden, och hur ditt arbetssätt ser ut! Jag står i grundvalarna för att bygga om min hemsida, och hade då tänkt börja om helt - och göra det rätt, den här gången - inga halvmessyrer med lite css och lite html-formatering. Så det här är ovärdeligt. Tack!

## Comment 16
Author: Anken

hejhej, jag har inget program för att göra hemsidor så jag använder mig av anteckningar nu. jag provade skriva in det som står i atrikeln och tänkte använda den som en mall. men jag får inte in min bild som jag gjorde. jag gjorde en bild som skulle passa som header, funkar det inte bara för att jag inte använder ett "riktigt" program eller är det något annat som är fel?

## Comment 17
Author: [Borttaget]

Helt säkert är det något annat som är fel. Om du visar koden som du la in för att visa bilden kanske det går att se vad som är fel. Bilden måste så klart ligga i samma mapp om länken inte också pekar på mappen. Det behövs inte något speciellt program för att skapa en sida, det går utmärkt med en texteditor som anteckningar.  

Länkadressen ska stå inom citationstecken, ungefär så här:

<img src="bild.jpg">

## Comment 18
Author: [Borttaget]

Om bilden ligger i en undermapp är avdelaren snedstreck / och inte det bakvända som används i Windows.

<img src="bildmapp/bild.jpg">

## Comment 19
Author: Osterang

Försökte göra en egen sida, ska fixa min egen design senare.. Men när jag försöker sätta sidokolumnen på rätt ställe blir det bara såhär "/ http://www.freewebs.com/lundegard/

## Comment 20
Author: Fotorika

Hej! Har varit på gång att försöka mig på en egen hemsida ett tag nu men är totalt värdelös på allt som handlar om webbdesign, koder osv. XD Har lärt mig havlmycket om Html och pytte lite om Css, bläddrade snabbt igen artikeln och såg att slutresultaten blev bra, hällde därför upp ett stort glas Cola för att sätta mig ner och läsa igenom den! Hoppas den ska hjälpa mig att komma någonvart med min hemsida! :D

Tack på förhand för hjälpen :D Mvh Erika

## Comment 21
Author: Fotorika

Vad är ett Html program? Och HUR gör man en mall? Fattar inte, jag använder webhotellet Freewebs (alltså bygger förhand med html använder itne deras koder)

Jag vet inte hur jag ska göra en Css-stilmall?

## Comment 22
Author: Fotorika

En sak till, (nu har jag skrivit 3 inlägg men iallfall) Jag undrar en sak, jag gör precis som du skrivit, jag har gjort allt dwt där (tom det där med länkarna på gul bakgrund) i mitt CSS dokument men jag fattar inte hur jag ska kunna se det, asså när jag öppnar html dokumentet ser det ut som i början, borde det inte ändras.?

(<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> ) ska jag ändra någonting i den här koden? typ [www.w3.org](http://www.w3.org/)? eller ?

## Comment 23
Author: Kefa

Tack för en utomordentlig grund. Har fått till en hyfsad grundsida..Får några problem; när jag lägger in bilden i topp som jag döpt till main-banner 770x131px så blir navigationslisten bredare än bilden, hur korrigerar jag det? Hur ändrar man den gula färgen i navigationslisten? Hur bygger man vidare med ytterligare sidor på enklaste sätt?

## Comment 24
Author: AndreasS

Den gula färgen ändrar du i detta stycket i css koden:

.Navigation

{

background-color: #FFCC00;

padding: 0.5em 2em 0.5em 2em;

overflow: auto;

## Comment 25
Author: [Borttaget]

Kul att någon engagerar sig för att förklara saker utförligt. Samma information går ju att hitta på ett flertal ställen på nätet med hjälp av en enkel sökning, men det är inte så ofta man hittar något vettigt på svenska.

Själv har jag ingen hemsida numera, men har tänkt att försöka göra en så småningom. Har funderat på att använda XML och XSLT istället (bland annat för att jag ändå tänkt dokumentera alla mina inspelningar med XML-filer med så mycket information som möjligt - vem som spelar vad, vilket instrument som användes, hur instrumentet var inställt, vilka effekter som användes och hur dessa var inställda och så vidare, även länk till en sampelfil på själva låten ifråga).

Kommer jag att, som relativ nybörjare, få problem? Vet hur XML fungerar men har inte kikat så djupt på XSLT än. För- och nackdelar jämfört med HTML/CSS? Läste någonstans, kan dock inte hitta var just nu, att HTML/CSS är lite på utgående och att XML/XSLT är framtiden. Synpunkter på detta påstående? Fast om XML/XSLT är framtiden kanske man borde vänta till framtiden med att använda det…

Urtsäkta den onödigt långa parentesen i stycke 2.

## Comment 26
Author: Kefa

Finns det verkligen ingen bok om Expression Web på svenska, är det bara jag som är handikappad? Har nu fått till en master sida, och skall tydligen göra en dwt.När jag försöker spara står det "no content regions definied". Vad gör jag, jag vill alltså ha en sida att utgå ifrån och att resten i princip skall se lika ut. Och kunna göra layoutjusteringarna på en sida.

## Comment 27
Author: johan

#25: HTML är det ändå det du har för att skapa presentationen. Det är bra att du lagrar saker som XML, men det du har XSLT till är att göra om din XML till HTML.

## Comment 28
Author: Cuyi

Ok.. jättebra artikel. Men hur lägger man upp hemsidan då?! T.ex på freewebs eller vad man nu har..

## Comment 29
Author: Cuyi

Skulle gärna få svar...!  
:P Alla andra får ju svar på snabbt ![Oskyldig](../tiny3/plugins/emotions/img/smiley-innocent.gif "Oskyldig")

## Comment 30
Author: AndreasS

#28 Vet tyvärr inte hur freewebs funkar. Men har man ett eget webbhotell kan det vara bra om man har ett ftp program för att föra över filerna från datorn till sitt webbhotell.

## Comment 31
Author: Cuyi

Ok.. tack i alla fall! :)

någon som vet något om freewebs som kan svara på mina frågor :)?

## Comment 32
Author: Cuyi

\*putt\*

har även en till fråga, hur öppnar man anteckningar i sin webbläsare? alltså för att se hur det ser ut som en webbsida.. :)

TACKSAM FÖR SVAR. ska nämligen försöka knåpa ihop någe. men ingen vill ju svara på mina frågor :< men men ^^ väntar väl då! :d

## Comment 33
Author: AndreasS

#32 Om du spar ner din sida som du gjort i anteckningar och sparar du filen som t.ex index.html, index.htm och inte som index.txt så kan du öppna sidan i en webbläsare. Dvs. du skriver in index.html alternativt index.htm och inte bara index.

Hoppas att du förstår vad jag menar.

## Comment 34
Author: Jona-than

Hej och tack för en fantastisk lärdom i konsten att skapa hemsidor.

En fråga har jag dock, Texterna jag skriver i innehållet visar inga Å,Ä,Ö. Varför inte? 

en till: 

I iexplorer visas sidan som din sida visas, med två spalter bredvid varandra, men i Firefox och i googles vebbläsare chrome hamnar den höra kolumnen under den vänstra. dock i höger sida.

## Comment 35
Author: MoaW

#31 om du Pm:ar mig så kan jag hjälpa dig att ladda upp sidan på freewebs :)

## Comment 36
Author: Inkanyezi

#34 För att åäö ska visas korrekt i alla webbläsare ska de skrivas med koder:

*   å = &aring;  
    
*   ä = &auml;  
    
*   ö = &ouml;
*   Å = &Aring;  
    
*   Ä = &Auml;  
    
*   Ö = &Ouml;

Koden börjar med tecknet ampersand (&) och avslutas med semikolon.

## Comment 37
Author: Cuyi

**#33** Nej, förstår inte :( Visa med en bild?  
**#35** Har pm:at dig!

## Comment 38
Author: AndreasS

#37 Läs egenom [denna](Read.aspx?ArticleId=b3f28de8-c058-4195-a10c-3b5e851ff5af) artikel där finner du svaret och har bild på det.

## Comment 39
Author: Cuyi

#38 Ok, tack :)

## Comment 40
Author: Muzzy96

Värkligen bra! Jag fick faktiskt till det, men ska göra om det nu :) Tack, det var jätte bra ![Tungan ute](http://datorn.ifokus.se/tiny3/plugins/emotions/img/smiley-tongue-out.gif "Tungan ute")

## Comment 41
Author: Muzzy96

har bara en liten fråga.. Där all text ska vara.. Hur får man den längre?

## Comment 42
Author: [Borttaget]

Någon som har planer på att skriva något liknande för XML/XSLT? Har ännu inte sett någon sådan på svenska (vilket absolut inte betyder att det inte finns).

## Comment 43
Author: Muzzy96

Så här ser min ut nu :)

[http://mrodin.webs.com/](http://mrodin.webs.com/)

## Comment 44
Author: [Borttaget]

#43: Trots rätt teckenkoding (UTF-8), så blev det tydligen fel på ett ställe:

”Exempel p? mer inneh?ll”

Annars antar jag att det såg ut som det skulle.

## Comment 45
Author: [Borttaget]

Detta gav mig inspiration till att göra ny hemsida. Har använt samma "mall" nu så länge så jag känner för att göra om den.

så här ser den ut nu

[http://www.gillasart.onatima.se](http://www.gillasart.onatima.se)

Tycker inte den ser proffsig ut

## Comment 46
Author: [Borttaget]

Jag har gjort upp en ny hemsida. Alla bilder finns inte med och inga sidor förutom index sidan.

Menening är att jag på den mörkröda bakgrunden ska lägga thumbnails på olika kategorier, till exempel tecknade porträtt och blommor.

Jag kunde dock inte få den skriva koden att fungera i Frontpage, så jag fick ta hjälp av det jag redan lärt mig.

Kommentera gärna!

[http://www.onatima.se](http://www.onatima.se)

## Comment 47
Author: AndreasS

#46 För mig som använder firefox ser sidan konstig ut. Texten behövs justeras. Och sedan den med headern och raden med länkarna till dina undersidor har olika mått emot dom undre. Se bifogad bild.

## Comment 48
Author: [Borttaget]

Samma sak i Opera.

Sidan [http://validator.w3.org/](http://validator.w3.org/) kan användas för att testa webbsidor och i din sidas fall blev det 18 fel och 2 varningar.

## Comment 49
Author: [Borttaget]

\# 47 - Jag ändrade bredden på tabellerna eftersom jag fick en likadan bild tidigare idag. Men det ser konstigt ut eftersom ramen inte lägger sig i kanterna. Nu har jag en skärm med upplösning 1024x768, men detta borde ju inte ha någon betydelse.

Bakgrunden till länkarna och nedre bakgrunden är inte lika höga. På den undre mörka bakgrunden ska jag lägga thumbnails.

Jag vet dock inte vad jag ska göra för att det ska se likadant ut med alla webläsare.

\# 48 - Jag förstår inte vad jag ska göra med informationen.

## Comment 50
Author: [Borttaget]

#49:Läste du vilka fel sidan ansåg att det var på din sida? För där finns ju förklarat några rader om varje fel den hittade, exempelvis första felet:

”The checked page did not contain a document type ("DOCTYPE") declaration. The Validator has tried to validate with a fallback DTD, but this is quite likely to be incorrect and will generate a large number of incorrect error messages. It is highly recommended that you insert the proper DOCTYPE declaration in your document -- instructions for doing this are given above -- and it is necessary to have this declaration before the page can be declared to be valid.”

Bara för att ta ett exempel, som dessutom antyder att du kanske inte gjort 18 fel; det första felet kan vara orsaken till att den tror sig hittat ytterligare 17 fel. Kedjereaktion, typ…

## Comment 51
Author: [Borttaget]

Jag gör koden i Frontpage och då kommer automatiskt upp denna inledning av koden. Jag undrar var jag ska skriva DOCTYPE?

<html>

<head>  
<meta http-equiv="Content-Language" content="sv">  
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">  
<meta name="ProgId" content="FrontPage.Editor.Document">  
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">  
<title>Gillas Art första sidan</title>  
<STYLE>BODY {  
BORDER-RIGHT: #33090A 4px solid;  
BORDER-TOP: #33090A 4px solid;  
BORDER-LEFT: #33090A 4px solid;  
BORDER-BOTTOM: #33090A 4px solid;  
SCROLLBAR-ARROW-COLOR: #33090A;  
SCROLLBAR-TRACK-COLOR: #D6AFBB;  
SCROLLBAR-BASE-COLOR: #D6AFBB  
}  
.top{  
width: 800px;  
height: 100px;  
background: #D5ACB8;  
border: #F8EFF1 1px solid;  
Padding: 10px  
}

## Comment 52
Author: [Borttaget]

Jag har lagt koden i en annan html-editor denna gången. Jag får dock inte bilderna med mig, men ni kan väl se om det ser bättre ut så här.

[http://www.onatima.se](http://www.onatima.se)

## Comment 53
Author: AndreasS

om du tar bort detta _C:\\Hemsida - Nya Art\\_ ur länkningen till bilderna så kommer nog bilderna med.

## Comment 54
Author: [Borttaget]

Jag har ändrat sökvägarna nu och bilderna fungerar hos mig. Frågan är hur det ser ut hos er andra

[http://www.onatima.se](http://www.onatima.se)

## Comment 55
Author: AndreasS

Bilderna fungerar. Men texten till vänster om din bild är fortsfarande förskjuten åt vänster utanför ramen.

## Comment 56
Author: [Borttaget]

Nu har jag gjort om hela koden och lagt in tabeller istället för bara divar.

Har inte länkat någonting, detta är fortfarande en test.

[http://www.onatima.se](http://www.onatima.se)

## Comment 57
Author: [Borttaget]

Hoppas  hoppas ![Tungan ute](http://datorn.ifokus.se/tiny3/plugins/emotions/img/smiley-tongue-out.gif "Tungan ute")

## Comment 58
Author: [Borttaget]

Texten nu ännu längre till vänster än förra versionen, sorry.

Angående DOCTYPE, så hittar du information om detta på följande ställe:

[http://www.w3schools.com/html/html\_whyusehtml4.asp](http://www.w3schools.com/html/html_whyusehtml4.asp )

Så här står det om just DOCTYPE:

<Citat>–––

**Validate Your HTML Files as HTML 4.01**  
  
An HTML document is validated against a Document Type Definition (DTD). Before an HTML file can be properly validated, a correct DTD must be added as the first line of the file.  
  
The HTML 4.01 Strict DTD includes elements and attributes that have not been deprecated or do not appear in framesets:

_<!DOCTYPE HTML PUBLIC  
"-//W3C//DTD HTML 4.01//EN"  
"http://www.w3.org/TR/html4/strict.dtd">_  
  
  
The HTML 4.01 Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes:

_<!DOCTYPE HTML PUBLIC  
"-//W3C//DTD HTML 4.01 Transitional//EN"  
"http://www.w3.org/TR/html4/loose.dtd">_  
  
  
The HTML 4.01 Frameset DTD includes everything in the transitional DTD plus frames as well:

_<!DOCTYPE HTML PUBLIC  
"-//W3C//DTD HTML 4.01 Frameset//EN"  
"http://www.w3.org/TR/html4/frameset.dtd">_

–––</Citat>

## Comment 59
Author: [Borttaget]

I min dator ser det helt ok ut. Jag förstår inte..........

Vilken DOCTYPE ska jag lägga in här då? Känner mig mycket förvirrad ![Rynkar på näsan](http://datorn.ifokus.se/tiny3/plugins/emotions/img/smiley-frown.gif "Rynkar på näsan")

Så  här ser det ut hos mig

## Comment 60
Author: [Borttaget]

Nu har jag ändrat igen. Hoppas att detta fungerar, annars ger jag upp.

[http://www.onatima.se](http://www.onatima.se)

## Comment 61
Author: [Borttaget]

#60    Verkligen fina teckningar och alster! Ville gärna se mer, men kanske är sidan inte helt klar än för det går inte att klicka på någon av länkarna. I alla fall inte med Firefox.

## Comment 62
Author: [Borttaget]

#60: Jag vet ju inte hur du tänkt dig, men nu sitter texten på ett vettigt sett, tycker jag.

Ser ut som George Harrison längt ner till höger, förresten.

## Comment 63
Author: [Borttaget]

Jaaa, nu äntligen så fungerar layouten!!!

Jag ska länka nu och lägga in de andra sidorna så att ni kan se. Pust!

![Tungan ute](http://datorn.ifokus.se/tiny3/plugins/emotions/img/smiley-tongue-out.gif "Tungan ute")

## Comment 64
Author: [Borttaget]

Så här blir sidan. Jag har länkat till bilden "Gudinnor o änglar". En sida är klar och resten göres förhoppningsvis i morgon.

Och ja, det är George Harrison!

[http://www.gillasart.onatima.se](http://www.gillasart.onatima.se)