Lär dig HTML: 3 lektioner i att bygga en enkel hemsida
Postad: 15 december 2007 | HTML-guider | 20 CommentsLektion 1 – absolut nybörjare
Del 1 av HTML-skolan riktar sig till dig som inte har arbetat med html förut men vill prova på att göra en hemsida. Du har kanske inte heller så stor vana att hantera din dator och använder därför ett wysiwyg-program som exempelvis dreamweaver för att underlätta.
Det spelar ingen roll – WYSIWYG betyder ungefär ”det du ser är vad du får” och innebär att om du gör några klick med musen så skapar programmet koden och du behöver inte tänka på något mer. Men eftersom jag anser att grunden för att skapa hemsidor ligger i att lära sig hur html fungerar så hänvisar jag också till hur man ”kodar för hand”.
Sådana här program kan generera koder som är ”för mycket” i olika sammanhang därför tycker jag att det är lite vanskligt att enbart förlita sig på dessa. Tag gärna tillfället i akt och försök själva – kunskap i htmlkodning underlättar definitivt eventuella felsökningar.
Börja här:
Skapa en mapp på skrivbordet som du förslagsvis döper till webb. För dig som aldrig gjort det tidigare så gör du det genom att högerklicka på ”skrivbordet” och ange nytt >> mapp i rutan som kommer upp.
Under mappen ser du en blåmarkerad list med en vit blinkande prompt. Denna prompt skriver ut din text så skriv ”webb” och klicka sedan bredvid mappen. Nu ska det stå ”webb” under mappen. Öppna sedan upp notepad, anteckningar eller det program du använder.
Har du aldrig öppnat anteckningar eller notepad förr gör du så här (Win 8 – Win 10):
- Längst ner i vänstra hörnet finns en söklist. Klicka i den och skriv in ”anteckningar” eller ”notepad”.
- I rullgardinen som kommer upp finns en länk (win app) som heter Anteckningar – klicka på den.
- Nu kommer det upp ett nytt fönster med en tom vit bakgrund. Maximera.
Steg 1
Se nu till att du har ett tomt (blankt) dokument framför dig oavsett om det är i notepad, anteckningar eller från ditt wysiwyg-program. Finns det någon kod som programmet genererat så radera denna! Spara sedan det tomma dokumentet som index.htm i mappen webb. Du gör detta genom att klicka på arkiv >> spara som. Nu kommer en stor ruta upp med en rullgardinslista som det förmodligen står ”mina dokument” på.
Klicka på listan med pilen och scrolla ned tills du ser mappen som det står webb på. Markera denna (blir blåmarkerad i listan) och klicka sedan på den lilla rutan spara som finns längre ned till höger. Dubbelkolla sedan att filen verkligen blev sparad genom att gå in på skrivbordet och öppna mappen webb. Dubbelklicka på den. Ser du filen index.htm så gjorde du rätt.
Steg 2
Det första som alltid ska finnas på ett dokument som ligger ute på nätet är ett så kallat doctype. Doctype innehåller information om din hemsida, hur du har byggt den, vilka typer av koder du använder och så vidare. Det är därför mycket viktigt att du inte glömmer att skriva ut detta doctype, annars tolkas sidan i ett ”felaktigt” läge av webbläsaren. Hemsidor utan gällande doctype är ur en kodningsdefinition helt ofullständiga oavsett hur proffsiga de än ser ut att vara och inget att sträva efter!
Eftersom vi nu ska börja med att göra en enkel hemsida sätter vi därför in den första koden allra högst upp i dokumentet. Kopiera gärna av den och klistra in i ditt eget dokument. Råkade du stänga ditt dokument så öppnar du det igen genom att upprepa proceduren med startknappen >> kör och välja index.htm. Du kan också gå in i själva mappen och dubbelklicka på filen – när den har öppnats går du in i arkiv (file) och öppna (open) – då kommer du in i anteckningar.
Sätt in följande kod för html5.
<!DOCTYPE html>Steg 3
Nu har du typbestämt ditt dokument och vi ska börja med själva html-kodningen. När man skriver i htmlkoder använder man sig av meta-taggarna < och >. Denna tagg < öppnar en kod medan denna > avslutar koden. Det är inte samma sak som att stänga en kod – man stänger koderna genom att lägga en slash / före själva attributet. Du kommer att förstå allt efter som vi skapar dokumentet.
Den första koden som kommer efter doctype är naturligtvis html – Hyper Text Markup Language. Därefter kommer sidhuvudet – head. Det som skrivs i sidhuvudet kommer inte att synas på själva hemsidan, men kan styra utformningen på ett eller annat sätt beroende på vilka koder man skriver in. Vi ska kika mer på det längre fram – nu inriktar vi oss först på att bygga vår sida.
Så här långt har vi kommit i kodningen:
<!DOCTYPE html>
<html>
<head></head></html>Efter <head> måste vi lägga <title> – titeln på sidan. Observera att <title> inte är samma sak som index.htm. <title> är den text som kommer att synas högst upp i webbläsaren när man besöker sidan och inte namnet på själva filen/dokumentet. Vi skriver dit:Min första hemsida och här stänger vi sedan head och beger oss in i body.
Så här långt har vi nu kommit i kodningen:
<!DOCTYPE html>
<html>
<head>
<title>Min första hemsida</title>
</head>
<body></body></html>Body är kroppen på sidan, det vill säga den del där din text eller dina bilder kommer att synas. Det som är viktigt i all htmlkodning är att man inte upprepar vissa koder två gånger. WYSIWYG-programmen tänker aldrig på detta eftersom de bara är skapade att generera en kod, som sedan kan upprepas i all oändlighet om bara klickar på knappen. Programmet är med andra ord inte så ”smart” att det kan se – eller tänka på – om man råkar trycka in fel kod. Det utför bara ditt kommando. Vissa kommando innehåller dessutom flera kodslyngor som ”standard” och det är just dessa som ställer till problem om man inte förstår htmlprogrammeringens grunder.
I ett dokument får det bara finnas 1 head – 1 body och en rubrik h1. Detta är oerhört viktigt om man dels vill få en fungerande hemsida och dels att den följer de syntaktiska och semantiska reglerna. Head kommer också före body – aldrig tvärtom. Det vanligaste felet är just att det finns flera ”body/head-koder” i samma dokument. Ha därför alltid som vana att kontrollera detta. När Ni sedan vet vad som ska finnas inom respektive kod, och var koden ska vara, är det lättare att se när koder har hamnat på fel ställe.
Vi ska fylla body med en rubrik och lite text. VI börjar med vår rubrik h1 och eftersom vi även ska skriva en mening (paragraph) inleder vi det med elementet p.
<h1>Min hemsida</h1>
<p>Hej och välkommen till min första hemsida. Än ser det inte så mycket ut för världen men den kommer snart att bli finare.</p>Som vi nu har lärt oss så avslutar vi body med en snedslash så här /body.
Så här långt har vi nu kommit i kodningen:
<!DOCTYPE html>
<html>
<head>
<title>Min första hemsida</title>
</head>
<body>
<h1>Min hemsida</h1>
<p>Hej och välkommen till min första hemsida. Än ser det inte så mycket ut för världen men den kommer snart att bli finare.</p>
</body></html>Steg 4
Vi avslutar vårt dokument här med att stänga </html> för att granska hur det blev. Det här är mitt första htmldokument. Dock är den än så länge bara tentativt valid. För att den ska fylla hela kravet måste vi skriva in ytterligare koder. Det – och utvecklar sidan – gör vi i lektion 2.
Här är koden till hela dokumentet.
<!DOCTYPE html>
<html>
<head>
<title>Min första hemsida</title>
</head>
<body>
<h1>Min hemsida</h1>
<p>Hej och välkommen till min första hemsida. Än ser det inte så mycket ut för världen men den kommer snart att bli finare.</p>
</body>
</html>