html_stepbystep

Tips för billiga kläder: Klädguiden med kläder och för din motorcykel kanske Mckläder och mc hjälmar kan passa bra? Pröva! KlädGuiden innehåller massor med sköna prisvärda kläder. Jag skrev den för att hjälpa människor att hitta unika kläder. Kanske något för fritiden när du inte kodar HTML ;)

Skapa din första sida med HTML

8 steg

Den här guiden leder dig smärtfritt igenom de första stegen på en webbutvecklares väg. Du får se hur du kan gå ifrån noll till en sida möjlig att publicera på internet.

Det första du behöver är en editor, med vilken du skriver koden. Det finns alltifrån simpla, såsom Windows Anteckningar, till mer avancerade. Nu precis i startgroparna kommer vi att använda Anteckningar (Notepad på engelska).
 

För att öppna anteckningar öppnar du först startmenyn. Sedan väljer du antingen Program -> Tillbehör -> Anteckningar, eller Kör och skriver in "notepad" i textrutan och trycker på OK (Se bild). Den senare metoden är i de flesta fall effektivare.
Skriv kommentarAvbryt - Visa kommentarer ( 1 )Göm kommentarer
Namn Kommentar
Charlie   Notera att det ser annorlunda ut i Windows XP med standardstartmenyn.
 
Webbläsaren, exempelvis Microsoft Internet Explorer, som kommer att visa sidan förstår bara text, så kallad kod. Koden bestämmer färger, funktioner och val av bilder. Alla sidor som finns på Internet är uppbyggda på det här sättet.
 

När du har ett tomt anteckningar öppet, är det dags att börja fylla den nya sidan med kod. Med vissa undantag börjar alla webbsidor på Internet med texten 
<html>
och avslutas med 
</html>
Skriv nu in det som på bilden.
Skriv kommentarAvbryt - Visa kommentarer ( 0 )Göm kommentarer
Namn Kommentar
 

Allt du skriver innanför <html> och </html> kommer att synas som text på din sida. Nu vill vi infoga en text och skriver således in den (Se bild).
Skriv kommentarAvbryt - Visa kommentarer ( 3 )Göm kommentarer
Namn Kommentar
ccd   det borde vara
<html><body>
innehåll
</bodY></html>...
ek   ska man hålla på och följa standarder så kan man ju göra det till punkt och pricka i så fall, och då duger det inte med lite <body>.. alltså. <html>Grattis världen!</html> duger fint, för en simpel sida! standarder är överhypat.
olle   standarder är överhypat om man hoppas att ens sida skall funka i internet explorer för alltid. en sida som ser ut sådär kommer kanske inte att funka om ett år eller tre. följer man en standard och anger vilken standard där man följer är man garanterad att siten faktiskt renderas ordentligt i alla browser som följer standarder.
 

För att kunna se hur sidan ser ut behöver den sparas. Klicka på "Arkiv" och sedan "Spara som". När du sparar kan du antingen skriva in 
C:\index.html
som filnamn eller skapa en mapp under C:\ där du sparar alla dina sidor (Se bild, klicka för att förstora). Tryck nu på spara.
Skriv kommentarAvbryt - Visa kommentarer ( 1 )Göm kommentarer
Namn Kommentar
redmond   vad menas med index?? jag har sett att en massa sidor har det..
 
Det finns flera webbläsare ute på marknaden. Mozilla Firefox, Microsoft Internet Explorer och Opera är bland de största. Vi kommer att använda Internet Explorer eftersom alla som använder Microsoft Windows har denna installerad.
 

Nu är det god tid att ta reda på hur vår sida ser ut. Öppna din webbläsare och klicka i navigationsrutan (Se bild). Här kan du, på samma sätt som du skriver in URLer (Som www.simpelt.se), skriva in sökvägar på datorn. Skriv in 
C:\index.html
om det var så du sparade koden du tidigare skrev.
Skriv kommentarAvbryt - Visa kommentarer ( 0 )Göm kommentarer
Namn Kommentar
 

Tryck på Enter. Har du angivit rätt adress kommer sidan att se ut som på bilden. Lite liten text för ett grattis, tycker du inte?
Skriv kommentarAvbryt - Visa kommentarer ( 0 )Göm kommentarer
Namn Kommentar
 

Det är dags att skapa en rubrik! Till vår hjälp använder vi oss av de magiska nyckelorden
<h1>
och 
</h1>
H står för header (rubrik) och 1 för att det är den största som gäller. Skriver du istället <h4> får du en liten rubrik. Experimentera! Låt texten som skall bli storvuxen läggas innanför <h1> och </h1> (Se bilden).
Skriv kommentarAvbryt - Visa kommentarer ( 6 )Göm kommentarer
Namn Kommentar
zat0s   kan man ha hur högt som helst?
fredrik   Vad menar du med "hur högt som helst"? Om du syftar på storleken går det bara att få ner till <h5> (minst) och upp till <h1> (störst).
zat0s   ok.. tack!!
ecnum   det där är inte helt korrekt. med css kan du få texter som är i princip hur stora som helst. t ex
<h1 style="font-size: 300px;">hyfsat stor rubrik</h1>
ek   fast nu är det väl så att man inte ska använda <h1> till <h5> om man ändå vill hålla på med css. då är det bättre att ha <p style="font-size: 300px;">. dessutom ligger inte begränsningen vid <h5> utan vid <h6>
Hans   Egentligen bör ni inte använda "inline-css" (stilkod som man lägger direkt i html-kod) överhuvudtaget. Placera den istället i externa css-filer. ek: Ur SEO-perspektiv är det bättre att använda <h1> när man vill använda en rubrik och sedan formatera denna med (föredragsvis extern) CSS. <p> är till för stycken, <hx> för rubriker.
 
Som utvecklare av webbsidor är det mycket vanligt att uppdatera sidan man arbetar med ofta. Detta för att se hur koden man nyss skrivit ter sig i webbläsaren. I Internet Explorer kan man uppdatera sidan på två sätt. Antingen genom att Klicka på knappen "Uppdatera" i verktygsfältet eller genom att helt enkelt trycka på tangentbordets knapp F5.
 

Gå återigen in på sidan och det här är resultatet du bör få. Grattis världen! En ny webbutvecklare är på stark frammarsch! Grattis!
Skriv kommentarAvbryt - Visa kommentarer ( 1 )Göm kommentarer
Namn Kommentar
zat0s   weei!! :D
 
   
Steg för steg
Skapa din första sida med HTML
Skapa en schysst presentation
Piffa till texten
 
Snygg layout
 
Skapa sidor snabbt
 
Kommunikation
 
Eller varför inte resa lite med några sista minutenresor? Det är grymt härligt avkoppling för ett tag.

På väg att välja en ny kamera? Hitta tips och idéer om olika
kameror här.