För inte alls många år sen byggde man statiska hemsidor utan att använda någon databas eller hemsideprogram. Jag minns själv att jag kodade/skrev HTML och CSS i ett vanligt textdokument. Problemet när man gjorde detta var att man inte kunde se hur resultatet blev innan man väl laddade upp sin hemsida via FTP. Det blev många vändor med uppladdning, radering och samma vända igen. Det var charmigt på sitt sätt men väldigt tidskrävande.
Enklare med Dreamweaver och FrontPage
Från textdokument till program som klarar av både HTML, CSS och mobilanpassade hemsidor. Vi talar nu om Dreamweaver. Det har funnits i väldigt många år och utvecklas faktiskt fortfarande trotts att det finns bättre alternativ därute. Med Adobe Dreamweaver blir man webbutvecklare av världsklass. Man behöver inte överdrivet mycket erfarenhet innan man börjar med verktyget, lite tålamod och viljan att testa sig fram är allt som behövs. Vill man ha något att jämför med så är Dreamweaver väldigt likt Microsoft FrontPage fast bättre.
Ska man välja mellan något så är Dreamweaver man ska använda. FrontPage utvecklas tyvärr inte längre.
Båda programmen är bra att börja med för att läsa sig HTML och CSS. Detta för att man kan se direkt på skärmen när man exempelvis fetmarkera något eller skapar en länk. Man ser då hur kodningen blir samt resultatet. På detta sättet lär man sig undermedvetet hur kodningen ska se ut och blir bättre på detta med tiden. Till slut kanske du kan skriva HMTL direkt i ett textdokument som jag gjorde i början.
Vad är HTML?
Enkelt sagt kan man säga att det är utformningen av texten. Hur den ska placeras samt titlar, fetmarkering, understrykning. Även styckeindelning, storlek på bilder och annat som hör till det visuella.
Mer detaljerad information återfinns här: https://sv.wikipedia.org/wiki/HTML
Vad är CSS?
Från ett HTML dokument kan man välja att skriva in CSS direkt i dokumentet men att rekommendera är att skapa ett separat som hämtas ifrån HTML dokumentet. På detta sättet kommer sidan ladda snabbare och det blir även enklare att jobba. Speciellt om man har en stor hemsida eller har planer på att det ska bli en stor sida i framtiden.
Med CSS väljer man exempelvis bakgrund, typsnitt samt även kan man ha en central källpunkt för att hämta hem hur en titel ska se ut. Även andra saker går att centralisera så att de hämtas snabbare och laddas snabbt för besökaren. Detta inkluderar meny, logo, header och footer.
Innan man börjar med CSS bör man ha en viss struktur att utforma hemsidan ifrån. Man bör kunna se allt framför sig innan man läser och skriver koden. Det tar tid att lära sig men blir enklare med tiden. Speciellt om man som mig själv skrev HTML och CSS i ett vanligt textdokument innan hemsideprogram fanns tillgängliga.
Exempel på hur CSS kan se ut;
body {background-color: #BDBDBD;}
p {font-family: ”Georgia”, ”Times New Roman”, serif; font-size: 15px;}
CSS Koden ovanför säger att bakgrunden till hemsidan ska vara grå vilket färgkoden #BDBDBD säger. Texten på sidan som skrivs i <p></p> vilket hänvisar till den helt vanliga texten ska vara skriven i Georgia och Times New Roman i storleken 15px.
Tack vare dessa två rader så vet en webbläsare om hur dessa sakerna ska se ut. Man behöver alltså inte lägga in detta för varje enskilt ord utan det räcker alltså med denna koden.
Webbhotell och domänman till din hemsida
För att man ska se hur en hemsida ser ut när man byggt den i ett textdokument, Dreamweaver eller FrontPage behöver man ett webbhotell. Till detta behövs även ett domännamn. Har du inget av detta idag kan Webbdo vara ett bra alternativ att börja med då allt är inkluderat i deras webbhotell. När man väl har detta fixat kan man ladda upp sin hemsida (HTML och CSS) till sitt webbhotellskonto via FTP anslutning och sen är det klart. Gör man ändringar är det bara att ersätta befintliga dokument på sitt konto och vips så visas det nya innehållet.
För den som är ny med att bygga en hemsida samt undrar vad ett webbhotell och domännamn är. Då har Webbdo.se bra guider som visar dig steg för steg hur du ska göra.
Slutord för artikeln
Tack för att du tog dig tid till att läsa denna guiden om hur man bygger en hemsida med HTML och CSS. För den som vill finns mer djupgående artiklar på Internet att ta del av. Språket kan tyckas svårt att lära sig i början men när man väl börjat så kommer det rulla på, det lovar jag. Iallafall om du har intresset för kodning och tycker det är roligt att skapa något eget.
Kanske är det just du som jobbar som professionell webbdesigner inom några år likt mig?