En grundkurs i hemsidor och hur de är uppbyggda
bilhtml

Den här artikeln tänkte väldigt grundligt gå igenom koncepten kring en hemsida och hur den är uppbyggt, för att ge dig grundkunskap att bygga vidare på och ge dig möjligheten att kunna modifiera ditt tema, antingen på en egen server eller hos WordPress.com.

Strukturen på en hemsida

Okej, vi börjar med att förklara konceptet ”hemsida”. Moderna hemsidor och framförallt stora ramverk som WordPress, försöker så långt det går att separera presentation från logik, och sedan vidare hålla allting så separat det går för att vi som användare enkelt ska kunna modifiera så mycket som möjligt utan att behöva leta så mycket.

Html

För enkelhetens skull, låt oss likna en hemsida vid en bil. Html koden beskriver hur bilen ska vara uppbyggd. Den säger att hela bilen är en bil, och i den ska det finnas 5 platser, 4 dörrar, en motor, 4 hjul. och så vidare. Allting delas in i element som ringar in andra element. Ett startelement kan se ut så här: <bil>. Alla element måste avslutas, och det görs dem genom att placera ett framåt snedstreck (front slash) i elementet: </bil>. Varje text snutt som är inringat med ”krokodilmunnar” kallas för en tagg och en starttagg och en sluttagg skapar ett element.

Exempel:

<bil>
    <dörr>
        <fönster>
        </fönster>
    </dörr>
    <säte>
    </säte>
    <dörr>
        <fönster>
        </fönster>
    </dörr>
</bil>

För att lättare kunna identifiera de olika elementen så kan vi sätta klasser (class) och id:n (id) på dem. Se klassen som bilmodellen, den kan delas av många bilar som ser likadana ut, och id:t är registreringsnumret, och pekar på precis en specifik bil, och inga fler.

<bil class="wp70" id="abc123">
    <dörr class="vänster">
        <fönster>
        </fönster>
    </dörr>
    <säte>
    </säte>
    <dörr class="höger">
        <fönster>
        </fönster>
    </dörr>
</bil>

CSS

Css:en eller stilmallen, talar om hur din bil ser ut. Allt från längd och bredd till färg och form. När man skriver i sin stil mall så filtrerar man ut vissa element som man vill ange attribut på och talar sedan om hur alla filtrerade element ska se ut. Om vi vill förändra en specifik elementtyp, behöver vi bara skriva namnet på det elementet, utan ”större än”, ”mindre än” tecknen, exempelvis bil. Vill vi filtrera ut element utefter deras klasser så skriver vi en punkt och sedan klass-namnet, exempelvis .vänster. På samma sätt gör vi för att filtrera efter ett visst id, men då använder vi fyrkant, stakettecken, så då blir det #abc123. Vi kan även kombinera flera av dessa med mellanrum ifall det ska vara element i ett annat element och komma ifall det ska inkludera även en ny filtrering av element. Om vi har en skada på sätet och en repa i vänster fönster på bil abc123 så skulle vi kunna skriva så här:

bil#abc123 .vänster fönster
{
    skada: stenskott;
    djup: 1 cm;
}
bil#abc123 säte
{
    skada: brännmärke;
}

Måsvingarna talar om att här slutar filtreringen av element och nu börjar deklarationen av hur elementet ska formateras. Först skriver du en nyckel med ett kolon efter och sedan ett värde, och avslutar raden med ett semikolon. När du är färdig med alla deklarationer avslutar du med en måsvinge igen.

Databas

Databasen tar hand om all information om bilden, den skulle tex kunna innehålla all information som registreringsverket har, alltså ägaren till bilen, adressen och så vidare. Den här informationen ska vara enkel att ändra då man ska kunna sälja bilen och byta ägare.

En databas är uppbyggd precis som ett excel dokument med rader och kolumner. Varje kolumn representerar en typ av information och varje rad motsvarar en post. Varje databas tabell måste också ha en primär nyckel som ska vara unik och göra det möjligt att hitta en specifik post. I vårat exempel skulle det vara helt perfekt att använda registreringsnumret som denna nyckel, då vi vet att det bara får finnas en bil för varje registreringsnummer. I många fall använder man bara en siffra som hela tiden räknar upp för varje ny post utan att vara direkt kopplad till någonting specifikt på bilen.

Reg-nummer Bil modell Ägare Adress
123abc wp70 WordPressGuru Internetvägen 123, Storstad
456def guru40 WordPressGuru Internetvägen 123, Storstad

I tabellen finns det nu två bilar registrerade, båda är bundna till WordPressGuru, men så länge den primära nyckeln är olika så kan man ändå hitta en specifik bil.

Php

Php är ett serverspråk som talar ser till att informationen i databasen visas på hemsidan, och får saker och ting att hända. Om du vrider på nyckeln så är det php-språket som talar om att du ska ändra värdet på tändning från av till . Det är php som placerar alla saker på rätt plats och får din bil att leva. Du kan se php som motorn i din bil. Med hjälp av villkorssatser kan du få saker att ske beroende på andra saker. Om vi tar exemplet med att vrida på nyckeln igen, så skulle du kunna skriva en sats som är
”Om du vrider på nyckeln och motorn är av -> starta motorn
annars -> stäng av motorn”

1
2
3
4
5
6
7
8
9
10
<?php
if( $vrida == true && $motorn != 'igång' )
{
    startaMotorn();
}
else
{
    stängAvMotorn();
}
?>

På rad 1 och 10 ser vi php taggarna. Dessa talar om att mellan dessa är det php-kod, så att vår hemsida vet hur den ska tolka det vi skriver.
Rad två är våran villkorssats som säger att ifall värdet på $vrida är lika med sant och värdet på $motor är ‘inte lika med’ igång så ska vi köra funktionen ”startaMotorn” annars ska vi köra funktionen ”stängAvMotorn”.

Sammanfattning

Där har vi de fyra huvudsakliga delarna i en hemsida. Html för att tala om strukturen, stilmallen för att visualisera, databasen för fakta och php för att sätta ihop allting och få det all leva.

Hur ser detta ut på riktigt?

Vi har hittills bara gått igenom detta genom ett låtsasexempel på en bil för att det ska vara lättare att förstå, men det är ny dags att börja med lite riktiga taggar så att ni ska kunna lära er att modifiera era egna hemsidor.

Det första elementet, och det som omringar alla hemsidor, är alltid taggen <html> den säger att ”här börjar en hemsida” och när webbläsaren hittar </html> så vet den att ”här slutar hemsidan”.
Inuti detta har vi först hemsidans huvud <head></head> och sedan kropp <body></body>. I huvudet skriver du saker som titel och länkar till stilmallar och lite sådant. I kroppen kommer själva hemsidan med alla dess element.

Här kommer en lista på lite bra element att känna till:

  • div – Ett block, ett fyrkantigt område.
  • span – Ett område som omsluter text för att kunna styla.
  • p – En paragraf.
  • h1 – Header 1 – brukar oftast ringa in titeln på din hemsida.
  • h2, h3… h6 – Header 2-6 – h2 är ofta rubriker till inlägg, eller saker i sidopanelen. H3 är ofta underrubriker i ett inlägg och så vidare.
  • strong – Gör text till fetstil, är tillsammans med em det ända element som får användas för att styla din text på andra ställen än i stilmallen.
  • em – Gör text till kursiv, är tillsammans med strong det ända element som får användas för att styla din text på andra ställen än i stilmallen.
  • ul – Ringar in en onumrerad lista
  • li – Ett listobjekt
  • a – Ett ankare – Länkar till antingen en annan hemsida, eller en annan sida på din egen hemsida.
  • img – Bilder. Detta element behöver ingen avslutnings tagg utan avslutas i starttaggen: <img src=”adressen till en bild” />
  • br – En radmatning i text. Detta element behöver ingen avslutnings tagg utan avslutas i starttaggen: <br />

En standard hemsida skulle kunna se ut som följer:

<html>
    <head>
        <title>
           Hello World - Min första hemsida
        </title>
    </head>
    <body>
        <h1>
            Hello World!
        </h1>
        <p>
            Det här är min första hemsida.
        </p>
        <ul>
            <li>
                En lista
            </li>
            <li>
                Ett element till
            </li>
        </ul>
        <div>
            Det här är en div
        </div>
        <span>
            Det här är en span
        </span>
    </body>
</html>

Spara koden i ett dokument som du döper till index.html och dubbelklicka på filen för att öppna den i en webbläsare.

Yes! Det fungerade, men det ser ju inte så roligt ut, så vi lägger till en stilmall också.

Skapa ett nytt dokument som du döper till style.css och placera det på samma ställe som index.html.

Ändra nu i headern (mellan <head> och </head>) så att den ser ut enligt följande:

    <head>
        <title>
           Hello World - Min första hemsida
        </title>
        <link rel="stylesheet" href="style.css" type="text/css" />
    </head>

Vi har nu lagt till en länk till vår stilmall, attributet rel talar om att det är en stilmall, href talar om vad filen heter och type talar återigen om att det är en stilmall.

Gå nu in i style.css och skriv följande:

h1
{
    color: blue;
    text-decoration: underline;
    font-size: 26px;
    font-family: Georgia, 'Times New Roman', times,serif;
}
 
p
{
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
div,
span
{
    border: 1px solid green;
    color: red;
    background: yellow;
    margin-bottom: 10px;
}

Spara och ladda om din sida för att se ändringarna.

Våran header har nu bytt färg, blivit understruken och ändrat font. Vår paragraf har ändrat radhöjd och font och både våran span och div har fått bakgrund, border, text färg och en marginal i botten på 10px. Vi kan nu se hur enkelt det är ett modifiera våra element med stilmallen och få saker att se helt annorlunda ut. Vi kan också se skillnaden mellan ett div element och ett span element.

Applicera detta i WordPress

I WordPress hittar du alla filer som är värda att modifiera under ”Utseende > Redigera”. Här är saker och ting exakt likadana som jag precis har beskrivit bara lite mer avancerade. Om du kikar i din stilmall (style.css) så hittar du precis dessa definitioner, och vilka element de modifierar. Testa gärna att ändra på någonting, spara och se hur det förändrar din hemsida.

Om du använder en egen installation från WordPress.org, så hittar du även alla andra temafiler här, de som skriver ut inläggen på din sida, de som talar om hur ett inlägg ska se ut när det är ensamt och hur en sida ska formateras. Om du går in i en sådan fil och ändrar så kan du direkt se hur saker förändras på din blogg.

Det är nu kunskap och fantasi kommer med i spelet. Det gäller att veta vad man kan göra, och hitta på ett sätt att använda den informationen på. Vad beträffar databasen och php, så ignorerar jag det i denna grundläggande guide, då det kan bli relativt komplicerat och WordPress redan sköter det mesta av detta i bakgrunden åt oss i vilket fall, vilket gör att html och css är det första vi behöver lära oss.

Ett sista ord

Nu är det egentligen bara att börja testa och leka med de givna verktygen. Skapa gärna en ny blogg, och testa runt med att ta bort element, sätta in nya, och formatera dem i stilmallen.

Om du vill lära dig mer om html och css så skulle jag skarpt rekommendera att du kollar in W3Schools och deras guider och dokumentation. Annars är Google rent allmänt ett fantastiskt verktyg (jag rekommenderar inte längre W3Schools, ta istället en titt på tex Html Dog).

Viktigast av allt är dock att du vågar, och inte ger upp. Jag vet inte hur många år jag har hållit på med alla dessa språk och många fler, och jag lär mig nya saker hela tiden. Det finns alltid mer information där ute, och ingen blir någonsin fullärd, så börja på din nivå, läs och testa och våga göra fel, det gör jag också.


4 kommentarer till 'En grundkurs i hemsidor och hur de är uppbyggda' »»

  • Logiken är fel i:

    Om ( $vrida == true && $motorn == ‘igång’ )
    så skorrar det i startmotorn…

    Rätt är:

    ( $vrida == true && $motorn != ‘igång’ )
    Alltså om man vrider och motorn inte är igång -> starta motorn.


  • Mycket bra guide! Pedagogiskt så det förslår. Jag är själv relativt ny inom WordPress, och har inte riktigt hängt med under åren med php, css osv. Du förklarade så jag fick en bättre förståelse :)


    • Kul att höra. Förhoppningen med guiden är att du nu ska ha tillräckligt mycket grundförståelse för att våga dig ut och testa på språken på riktigt. CSS och HTML är då en bra start. Lycka till!


Lämna en kommentar

XHTML: Du kan använda dessa taggar:
<a href="">, <em>, <strong>, <img src="">,
<pre lang="php">, <code>, <blockquote>