En grundkurs i hemsidor och hur de är uppbyggda

Transkript

1 En grundkurs i hemsidor och hur de är uppbyggda 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 5platser, 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> <säte> </säte> <dörr> </bil> För att lättare kunna identifiera de olika elementen så kan vi sätta klasser (class) ochid: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">

2 <säte> </säte> <dörr class="höger"> </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 medmellanrum 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, Lovisa 456def guru40 WordPressGuru Internetvägen 123, Lovisa 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.

3 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 på. 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 <?php if( $vrida == true && $motorn!= 'igång' ) startamotorn(); else stängavmotorn();?> 10 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.

4 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.

5 Gå nu in i style.css och skriv följande: h1 p color: blue; text-decoration: underline; font-size: 26px; font-family: Georgia, 'Times New Roman', times,serif; 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.