[Guide] Koda en enkel hemsida i HTML.
Work in progress!
Att koda en hemsida behöver inte alls vara så svårt som många tror. Det som krävs är grundläggande kunskap inom HTML och CSS. Denna guiden lär hjälpa dig en bra bit på vägen (förhoppningsvis). Med hjälp av HTML skapar du innehållet på din webbsida, och med hjälp av CSS bestämmer du hur din hemsida kommer att se ut.
En HTML-editor kan vara bra att ha:
Coffeecup HTML Editor - En riktigt bra editor som jag själv använder när jag ska koda. Gratis!
Notepad++ - Också en bra redigerare, men enligt mig slår den inte Coffeecup. Också gratis!
Aptana Studio - Verkar som ett vettigt alternativ.
Adobe Dreamweaver Om du har pengarna och vill satsa på något seriöst. Kostar runt 5 tusen.
Inlärningstips!
För att få en så effektiv inlärning som möjligt bör du tanka ner något av de gratis HTML-redigerarprogram som jag tidigare tipsat om, och prova att koda själv i samband med de nya saker du lär dig. Du bör även försöka förstå sammanhanget i allt, alltså förstå hur allting hänger ihop. Om du kan se logiken bakom språket så borde du också kunna lära dig det snabbare.
Lycka till! Om det är något ni inte förstår eller behöver hjälp med, kan ni antingen skickat ett privat meddelande till mig, eller svara i tråden.
Nu övergår vi till själva guiden. Vi börjar med lite HTML grund och jobbar oss upp från det:
Grundläggande HTML
En webbsidas viktigaste beståndsdelar:
I varje HTML-sida måste du ha med dessa taggar som kommer att innehålla olika delar av hemsidan:
<html>
Öppningstagg som talar om att innehållet ska tolkas som HTML.
<head>
Öppningstagg för head-delen.
</head>
Stänger head-delen. Om du skriver in data efter denna tagg kommer den inte tillhöra head-delen längre.
<body>
Öppningstagg för body-delen. Här kommer vi placera all information som kommer synas i webbläsaren. Detta är själva "huvuddelen".
</body>
Stänger body-delen.
</html>
Stängningstagg för html som avslutar koden på hemsidan.
Prova själv:
Öppna antingen Anteckningar i Windows, eller, om du har laddat ner något av de programmen jag tipsade om i början, öppna någon av dessa.
Skriv in de nödvändiga taggarna som vi nyss gick igenom:
<html>
<head></head>
<body></body>
</html>
Skriv in "Hello World!" mellan body-taggarna så att det ser ut såhär:
<body>Hello World!</body>
Spara nu sidan med filändelsen ".html" Du kan inte ha mellanslag i namnet på filen och du måste använda bokstäver mellan a-z. Till exempel "test.html".
Ha som vana att alltid döpa filerna med enbart små bokstäver, så inga problem uppkommer i framtiden när du ska lägga upp din hemsida på kanske ett webhotell.
Öppna sedan filen i din webbläsare, och du kan nu se att det står "Hello World!" på sidan.
Doctype:
En doctype talar om för en webbläsare vilken standard som använts för att bygga upp en webbsida och ska läggas allra längst upp i din kod. Innan <html> taggen!
Om du inte anger en doctype när du skapar en webbsida så kommer din webbläsare att gå in i quirk mode vilket gör att webbsidan kan bete sig konstigt och oförutsägbart.
Doctype strict:
Denna är den viktigaste doctypen och den enda vi kommer lära oss i den här guiden. Det är den enda nödvändiga i de allra flesta fallen.
Doctypen Strict innebär att du skriver korrekt uppmärkt XHTML och att du använder CSS för att exempelvis färga en text röd.
Koden för Doctype strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
Html-taggen:
Html-taggen ska alltid finnas längst upp på din hemsida, direkt under doctypen. Du måste också stänga den i slutet på din hemsida, såhär:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html>
<head></head>
<body></body>
</html>
Head-taggen:
Headtaggen börjar med <head> och avslutas med </head>
Head-delen innehåller information om din hemsida. Här kommer du i framtiden lägga in en länk till ditt CSS dokument. Även eventuella länkar till dokument med Javascript m.m. läggs in här. Låt oss fokusera på det enklaste och det absolut viktigaste:
Title
Om en webbsida listas bland sökresultaten på till exempel Google så är det första användaren ser rubriken, alltså taggen title. Titeln är den tyngsta delen när det kommer till sökmotorresultat, se därför till att alltid använda bra beskrivande titlar på varje hemsida.
Kodexempel:
<title>Min Hemsida</title>
Titeln öppnas med <title> och stängs med </title>
Body-taggen:
Bodytaggen börjar med <body> och avslutas, inte helt oväntat med </body>
Body är en av de allra viktigaste taggarna och det är här hemsidans synliga innehåll kommer att läggas in.
När du senare blandar in CSS i det hela, så är det oftast body man väljer för att sätta upp regler som påverkar hela hemsidans innehåll, till exempel typsnitt och textstorlek som ska gälla över hela hemsidan.
Resultatet:
Såhär långt har vi nu kommit, och det är såhär grunderna för en hemsida ser ut.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html>
<head><title>Min Hemsida</title></head>
<body>Innehållet på min hemsida</body>
</html>
HTML Länkar
Här lär du dig att skapa länkar på din webbsida.
Själva syftet med HTML var från början att länka mellan dokument. Därav namnet Hyper Text Markup Language.
För att skapa en länk använder du dig av en kod som ser ut så här:
<a href="URL-dit-du-vill-länka.html">Din länktext</a>
Om du till exempel vill länka till Sweclockers skriver du såhär:
<a href="http://www.sweclockers.com">Sweclockers!</a>
Och resultatet blir då såhär: Sweclockers!
Öppna en länk i nytt fönster:
Ibland vill man att länkar ska öppnas i ett nytt fönster eftersom man vill att besökaren ska stanna kvar på sin egna hemsida istället för att senare surfa vidare. För att öppna en länk i ett nytt fönster måste denna kod läggas till: target="_blank". Med hela länken blir det då:
<a href="http://www.sweclockers.com" target="_blank">Sweclockers!</a>
HTML Bilder
I den här delen lär du dig att lägga in bilder på din hemsida.
Img-taggen börjar med <img och avslutas med />. Se det som en typ av kombinerad öppna- och stängatagg.
Kodexempel:
<img src="testbild.jpg" alt="Text visas om bilden är trasig" title="Text visas när du för muspekaren över bilden" />
Men egentligen behövs bara:
<img src="testbild.jpg" />
för att bilden ska visas.
Förklarningar:
src="SökvägenTillBilden.gif"
Talar om vart bilden ligger på din server eller webhotell.
width ="bredd"
Bredden på bilden i pixlar. Skriv bara en siffra, inte "px" på slutet som i css.
height ="höjd"
Höjden i pixlar. Samma sak gäller här som med "width", bara ett nummer (106 = 106 pixlar).
alt ="text"
Om inte bilden kan visas, så kommer denna text ersätta bilden.
title ="text"
Textrutan som kommer upp när du håller muspekaren över bilden. Inte ett måste.
HTML Stycken
XHTML-taggen p står för stycke. Denna text är ett stycke och är därmed skriven innanför stycke-taggen som börjar med <p> och avslutas med </p>.
I ett sammanhang:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html>
<head>Sidorubrik</head>
<body>
<p>Detta är ett litet stycke som är skrivet innanför en p-tagg</p>
</body>
</html>
HTML Rubriker
Här går jag igenom de viktigaste rubriktaggarna på en webbsida.
Rubrikerna h1 och h2:
Den rubriken som väger tyngst är h1. Den är inte bara storleksmässigt störst utan väger även tyngst när det gäller sökoptimeringen för en webbsida.
Att använda rätt rubrik på din webbsida är ett steg i rätt riktning för att träffa bra i sökmotorer och få besökare.
h1 är den största rubriken, h2 kommer på andra plats storleksmässigt osv.
Taggen till dessa rubriker ser ut såhär:
<h1>Rubrik</h1>
<h2>Rubrik, fast lite mindre</h2>
Rubriker i ett sammanhang:
<html>
<head></head>
<body>
<h1>Detta är en rubrik</h1>
<p>Här är själva stycket under rubriken.</p>
</body>
</html>
HTML Radbrytning
Om du vill göra en ny rad i ditt html-dokument kan du inte bara göra det som du brukar (trycka på retur). Om du vill byta rad så har du inget val, du måste använda denna kod:
<br />
Så enkelt är det att göra radbrytningar. Denna tag behöver och kan inte stängas. Det enda som behövs är alltså bara taggen <br />.
HTML Listor
Listor i HTML är som vanliga listor i verkliga livet, inget speciellt med det. Det används för att lista upp olika saker, helt enkelt. Det är även listor man använder när man i senare skede, skapar en navigationsmeny till sin webbplats.
Onumrerad lista
För att skapa en onumrerad lista (engelska unordered list) så använder du öppningstaggen <ul>, lägger in listelementen i <li>Listelement</li>och stänger sedan listan med </ul>.
Alltså skriver du så här:
<ul>
<li>Bröd</li>
<li>Smör</li>
<li>Ägg</li>
<li>Juice</li>
</ul>
Och då blir resultatet:
Bröd
Smör
Ägg
Juice
Numrerad lista
Att skapa en numrerad lista fungerar på exakt samma sätt som den icke-numrerade listan. Använd bara öppningstaggen <ol> (engelska för ordered list) och stängningstaggen </ol> istället.
Såhär skriver du då:
<ol>
<li>Smör</li>
<li>Ägg</li>
<li>Mjölk</li>
</ol>
Och då blir resultatet:
Smör
Ägg
Mjölk
HTML Tabeller
En tabell (på engelska: table) används för att organisera data på ett enkelt sätt.
En tabell är en av de lite krångligare saker att bygga upp med XHTML, men det är ändå inte speciellt svårt när man väl har lärt sig det och förstår hur saker och ting hänger ihop. Jag gör en snabbguide inom detta område och förklarar inte så utförligt, om det är något ni inte förstår kan ni alltid skicka ett PM till mig. Du får hänga med så gott det går
Du öppnar tabellen med <table> och du stänger den med: Gissa? Du gissade rätt: </table>
<tr> talar om att en ny tabellrad börjar och </tr> talar om att en tabellrad avslutas.
<td>talar om att en ny tabellcell börjar och </td> talar om att en tabellcell avslutas.
width = Tabellens bredd
border = Tabellens kantlinje
Kodexempel:
<table width="200" border="1">
<tr>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
</tr>
</table>
Resultatet blir då:
HTML Span
Span-taggen används för att ge vissa mindre delar av exempelvis ett stycke, en speciell egenskap som inte påverkar den övriga texten.
Span börjar med <span> och avslutas med </span>...
I ett exempel: I exemplet kommer enbart ordet "röd" att vara rött.
<p>Vi testar att skriva en text med <span style="color:red;">röd</span>text.</p>
Skapa ett CSS dokument och länka till det i HTML-dokumentet:
Öppna en ny, tom sida i din HTML-editor eller i Anteckningar. Spara detta tomma dokument till "style.css"
Egentligen spelar det ingen roll vad du döper filen till, men denna gången använder vi style.css.
Se till att spara filen i samma mapp som ditt HTML-dokument (test.html).
I dokumentet skriver du:
body { background-color:black; color:white; }
För att få något resultat, måste du nu länka till ditt CSS-dokument i HTML-dokumentet:
Öppna HTML-dokumentet i någon redigerare (test.html).
Skriv in följande kod mellan <head></head> taggarna. Spelar ingen roll vart, oftast brukar man lägga koden under <title></title> taggen.
<link rel="stylesheet" type="style/css" href="style.css" />
Klart!
Nu kommer bakgrundsfärgen bli svart och textfärgen bli vit.
Som du ser använder vi taggen body eftersom vi vill att det ska påverka alla element vi har på hemsidan (alla element vi har innanför <body></body> taggarna). Efter taggens namn gör du två {curly brackets} som du sedan lägger formanteringen i (ex. background-color).
Div-taggen (Separerar viktiga delar på din hemsida)
Taggen div fungerar som ett behållarelement för olika komponenter på en webbsida. Dess främsta uppgift är att separera viktiga delar från varandra, som exempelvis behållare för artikeltext och sidomeny. Div-taggen är osynlig och det enda som syns är den information som du väljer att stoppa in i diven.
Div börjar med <div> och avslutas med </div>.
Id och Class (Läs detta!)
Den stora skillnaden mellan id och class är att ett id ska vara unikt på en webbsida. Det finns inga speciella regler för vilka element som får använda sig av id, men typiskt använder man id på större områden som exempelvis sidomenyer, behållare för artikeltext, header osv.
Id kan man alltså bara använda en gång på en hemsida, och den måste vara unik som tidigare sagt.
Class fungerar i princip på exakt samma sätt som id men skillnaden är att du kan använda samma class flera gånger på en hemsida.
Några bra exempel:
<div id="sidhuvud"></div>
<div class="rosatext"></div>
Klassen Rosatext kan man alltså använda flera gånger på sidan, och styla den med hjälp av CSS så att texten innanför den klassen bli rosa. Jag kan visa ett exempel på detta:
.rosatext { font-color:#FF63FC; }
Jag använde färgkoden #FF63FC i exemplet som är lika med Ljusrosa färg.
Du kan leta färgkoder på Colorpicker.com.
En class skrivs såhär i css-dokumentet:
.namn {}
En id skrivs såhär i css-dokumentet:
#namn {}
Grundläggande CSS
CSS Termer:
Attribut = Några exempel på attribut är: src, height, width och alt.
Värden = Några exempel är bil.jpg, 250, 5px.
Taggar = Märken är det som omger elementen, alltså med ett start-märke och slut-märke. Ett exempel är <p></p>
Deklaration = Detta är ett ord som ständigt återkommer när du arbetar med CSS, som tur är kan det enkelt översättas. En deklaration är nämligen samma sak som en regel.
En deklaration är uppbyggd av en egenskap och ett värde. Egenskapen kan vara exempelvis en färg, en ram, en bakgrundsfärg, en textstorlek med mera.Selektor = En selektor är namnet på den tagg eller område på din hemsida som du vill sätta upp en regler för. Exempelvis "body".
CSS Egenskaper:
Här kommer jag ta upp de vanligaste CSS-egenskaperna. Även om inte listan är komplett så är den mer än tillräcklig för att skapa din första hemsida.
Font och text
font-family:
Är en prioritetsordning av vilken font (eller typsnitt) som ska användas på ett element. Om inte fonten finns på besökarens dator så försöker den istället med det andra typsnittet i listan. Prioriteringen går från vänster sida, typsnittet som står längst till vänster har alltså störts prioritet.
Värden:
Arial, Helvetica, sans-serif
"Times New Roman", Times, serif
"Courier New", Courier, monospace
Georgia, "Times New Roman", Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif
Exempel: Typsnittet på all text inom body-elementet kommer nu att vara Verdana (om typsnittet finns på besökarens dator, annars Arial osv).
body {font-family: Verdana, Arial, Helvetica, sans-serif;}
font-size
Anger storleken på texten, teckenstorleken.
Värden:
em
px
Exempel: Textstorleken på allt innehåll i body-elementet kommer nu få textstorleken 12px.
body { font-size:12px; }
font-style
Om du vill att texten ska ha en speciell stil, anger du detta.
Värden:
normal
italic
oblique
Exempel: Texten i elementet <p></p> blir nu snedskrivet.
p { font-style: italic; }
p = står för paragraph. Mer om detta kommer snart.
font-weight
Anger tjockleken (vikten) på teckensnitt.
Värden:
Normal
Bold
Bolder
Lighter
Exempel: Texten i elementet <p></p> blir nu tjockt.
p { font-weight: bold; }
Marginaler
Margin:
Anger marginalen för vald sida på ett element i ordningen margin-top, margin-right, margin-bottom, margin-left.
Värden:
margin-top (marginal på toppen)
margin-right (marginal till höger)
margin-bottom (marginal på botten)
margin-left (marginal till vänster)
Värden:
Auto
Längd (px)
% (procent)
Exempel: Innehållet i elementet <p></p> kommer nu ha 10px marginal till toppen, 20px marginal till höger sida, 15px marginal till botten, 8px marginal på vänster sida om innehållet.
p {margin: 10px 20px 15px 8px}
Padding
Padding
Anger vilken kant på elementet som du vill formatera med padding. Skrivs i samma ordning som margin: topp, höger, botten, vänster. Går även att skriva ihop alla värden i en enda deklaration.
Värden:
px
Exempel: Här skriver vi ihop alla sidor på en enda deklaration. 5px padding från toppen och botten, 10px padding på både vänster och höger.
.sidomeny { padding:5px 10px 5px 10px; }
Skillnaden mellan margin och padding?
Margin (Röda pilar)
Anger avståndet till nästa objekt. Om du har två rutor bredvid varandra, så anger margin avståndet mellan dessa rutor.
Padding (Svarta pilar)
Anger avståndet inuti en box eller ruta från kanten till innehållet.
CSS Färger
color:
Denna deklaration ändrar textfärgen.
Värden:
Färgkod (t.ex. #000 för svar, #FFF för vit) Hitta andra färgkoder på Colorpicker.
Engelska färgord (fungerar inte med alla färger, några är: yellow, blue, green, black)
Exempel: I detta fallet blir all text som befinner sig inom <div id="content"></div> gul.
#content { color:yellow; }
background-color:
Som ni kanske hör på namnet ändrar denna deklaration bakgrundsfärgen.
Värden:
Samma som "color".
Exempel: I detta fallet blir bakgrundfärgen på hela sidan kolsvart.
body { background-color:#000; }
Glöm inte att gilla!
Intel Core i7 4770k 4.4GHz | EVGA 660Ti SC | 2x4GB XMS3 1600MHz | Crucial M500 240GB | Samsung 1TB | Logitech MX518 / QPAD MK-50
