Bygga hemsidor från grunden med HTML

En bok om HTML och CSS, en dator och ett anteckningsblock

En bok om HTML och CSS, en dator och ett anteckningsblock

HTML är grunden för allt hemsidebygge och även om det inte räcker till idag för att bygga en snygg och funktionell hemsida är det ändå en förutsättning att kunna språket, då det är basen för hemsidans utformning och integrerat även i nya system som css och php. Att inte kunna tolka och skriva HTML-kod blir ett problem för webbdesignern, även om denne använder andra verktyg och mallar och inte skriver koden från scratch.

HTML är en förkortning av HyperText Markup Language och är ett speciellt märkspråk för hypertext. Tillsamman med TCP/IP och http utgör HTML den grundläggande basen och standarden för webben.

Viktiga elementtyper och termer

När man arbetar med HTML finns det ett flertal termer och element man bör känna till. Genom att bli bekant med dessa uttryck kan man lättare kommunsera och göra sig förstådd när man arbetar med hemsidor, oavsett om det är inom en grupp eller enskilt.

Inom ramen för HTML finns det idag fyra kategorier:

Strukturmärken

Strukturmärken beskriver själva syftet med texten. Till exempel; <h1>Bygga hemsidor från grunden med HTML</h1>. Detta strukturmärke beskriver den högsta rubriknivån.

Presentationsmärkning

Denna typ av märkning presenterar och beskriver textens stil. Här använder man sig av kodningen <b>text</b>. Denna metod har dock i många fall ersatts av den så kallade stilmallen, CSS, som då istället presenterar data på sidorna.

Interaktiva element

De interaktiva elementen innebär interaktiva objekt, som knappar, listor och liknande. Denna typ av elementtyp skapar en mer dynamisk och användarvänlig hemsida.

Hyperlänkmärkning

Hyperlänkmärkning används för att märka ut aktuella länkar. Genom att ange koden <a href=” www.marcustisater.se”> Marcustisater </a>. Med andra ord innebär denna typ av kod att man skapar själva hyperlänkarna med <a href=”www.marcustisater.se”> och stänger länken med </a>. Mellan dessa två adderar med sedan de ord, eller mening, man vill använda som ankartext.

Övriga märkningar

Det finns självfallet mängder av olika uttryck inom HTML och här nedan är några vanliga taggar man burkar använda sig va när man skapar en hemsida.

  • <body> – Taggen “body” innehåller den kod där det som syns på hemsidan för besökaren finns. Text, länkar och bilder – allt finns i denna del.
  • <dl> – Taggen “dl” står för definitionslistor och är en typ av lista med två element, dels en slags rubrik och dels en text med indrag som kan ses som en beskrivning till den andra sortens element. Rubriken, eller det som ska definieras har taggen “dt” och beskrivningen med indrag har taggen “dd”.
  • <head> – Under taggen “head” i HTML-dokumentet finns information på hemsidan som inte syns, men som påverkar hur sidan framträder för läsaren. Till exempel kan denna tagg innehålla information om teckenuppsättning och “title”, se nedan.
  • <H1, H2, H3, H4, H5, H6> – Taggarna h1-h6 utgör olika storlekar på rubriker där h1 är största rubriktexten och h6 är minsta rubriktexten, liksom systemet för pappersstorlekar som A3, A4, A5.
  • <ol> – Taggen “ol” används för numrerad lista och med denna kan du ställa upp punkter i konsekutiv ordning med romerska siffror, heltal eller vanliga bokstäver.
  • <title> – Taggen “title” innehåller den information som ses på tabben i webbläsaren och på webbläsarens knapp i aktivitetsfältet.
  • <ul> – Taggen “ul” står för punktlista och det finns flera typer av punkter som standard, som punkt (disc), kvadrat (square) och cirkel (circle). “li” används sedan för varje listelement, det vill säga varje punkt i listan.

Styla hemsidan med CSS

CSS logga

På senare år har det blivit allt vanligare med att använda sig av kodningstekniken CSS, på svenska stilmallar, när man utformar en hemsida. Genom att använda denna metod kan man lättare stajla hemsidan och på så vis skapa snyggare layout.

Det hela innebär att du lär sig att utforma sidan med XHTML. CSS bestämmer hur informationen på din hemsida ska presenteras och detta gör du genom att sätta upp olika deklarationer – även kallade CSS-regler.

Två typer av CSS-metoder

Inom CSS finns det tre olika metoder man kan använda dig av. Dessa förkommer som extern och inbäddad CSS och som du nog ser på namnen innebär dessa lite olika.

Extern CSS

Den externa stilmallen innebär att du använder dig av en separat CSS-fil. I denna externa fil kommer dina deklarationer att finnas och genom att använda denna metod länkar du samman hemsidan med den externa CSS-filen. Sammanlänkningen kommer resultera i att informationen om varje element kommer att visas på hemsidan.

Genom att använda denna metod kan du göra stora layout- och designförändringar på din sajt genom att endast ändra några enstaka rader i stilmallen. Det är även värt att nämna att den grundläggande designen bär hanteras via den externa CCS-filen för bäst resultat.

Inbäddad CSS

Den inbäddade CSS handlar om att du blandar den interna stilmallen med en extern. Denna metod funkar bäst när du behöver göra många justeringar på din hemsida utan att behöva addera informationen i den externa stilmallen. Deklarationerna lägger du in mellan <head> Deklarationen </head>.

Fördelar med att använda CSS

Det finns idag många fördelar med att arbeta med stilmallar. Utöver möjligheten att enklare kunna styra din design, och skapa snyggare hemsidor, är det även smidigare att göra mindre ändringar på sajten. Dessutom hjälper CSS dig att skapa en mer broschyrliknande webblayout som annars vore omöjligt att göra.

Leave a Reply

Your email address will not be published. Required fields are marked *