Att skapa sin egen hemsida är ju idag väldigt enkelt om man låter WordPress eller en liknande lösning sköta det mesta. Men det finns gott om människor som gärna kodar sina hemsidor helt själva. Många tycker det är roligt att koda och många gör det för att de vill skapa en helt unik hemsida utan att tvingas begränsas till de mallar och teman som finns att välja mellan i exempelvis ett program som WordPress.

Programmen du behöver finns antagligen redan i din dator

Man kan tro att man behöver avancerade program för att koda sin egen hemsida. Men faktum är att allt du behöver har du säkert redan i din dator. För att skriva din HTML-kod så behöver man ett textredigeringsprogram och programmet Anteckningar som finns i Windows-datorer duger alldeles utmärkt att skriva HTML-koden i. Använder man sig av en Mac så kan man använda programmet TextEdit. Förutom detta behöver man en webbläsare. Mer än så behövs inte just nu. Öppna anteckningar och spara den som index.html på skrivbordet eller var du nu vill. Under filformat måste du också välja Alla filer. När du sparat filen så kommer du se att dokumentet blivit sparat som en länkadress till din webbläsare. Hur ens HTML-kod ska se ut beror på vad du ska på din hemsida. Om du söker på min hemsida här så kommer du hitta två artiklar som kan hjälpa dig med HTML-kodningen men det smartaste vore att googla fram hur du ska använda dig av HTML för att koda din hemsida. Det avsnittet är nämligen flera sidor långt vilket skulle resultera i en alltför lång artikel här. En bra guide finns här.

Andra program

Vissa program kan underlätta kodandet av hemsidan. Ett exempel är Adobe Dreamweaver och ett annat är Notepad++. Programmen kan hjälpa till med att färggruppera olika sorters koder så det blir mer läsbart, eller autokomplettera vissa koder. Adobe Dreamweaver har också inbyggd FTP-klient som laddar upp en fil automatiskt till servern så man slipper göra detta manuellt medan man skapar hemsidan. En viktig sak att komma ihåg är att mobilanpassa sin hemsida. En hemsida som är mobilanpassad ändrar storlek på bilder och placerar om bilder beroende på vilken enhet man besöker hemsidan med. Att mobilanpassa sin hemsida är faktiskt en ganska komplicerad metod när man kodar själv. Det enklaste sättet att mobilanpassa är att använda sig av media queries i CSS3. Med dessa queries kan man sätta upp olika regler för hur innehåll och media ska presenteras beroende på hur stor skärm besökaren på din hemsida har. Det kan se ut såhär;

 

@media only screen and (min-device-width: 520px) and (max-device-width: 1136px) {
#content {
font-size: 20px;
}
}

 

Denna kod måste man alltså skapa i CSS-dokument. Koden betyder att reglerna för #content bara kommer att användas om skärmen som besökaren använder sig av är över 520px och mindre än 1136px. När man mobilanpassar hemsidan på detta sätt så är det bra att testa hemsidan efteråt med de olika skärmstorlekarna man har hemma. Man kanske är flera i familjen som har olika mobiltelefoner eller surfplattor. Besök hemsidan med alla och se efter hur det ser ut. Mycket i kodandet av hemsidan kommer att handla om HTML. Som nybörjare är det svårt, men inte omöjligt. Följer du guiden jag länkade till ovan så kan du säkert skapa dig en egen hemsida. Lycka till!

Andra program