09. Skaffa hemsida

Skaffa hemsida: HTML-grunder

2009-08-21 23:23 #0 av: dijete

I andra delen av vår artikelserie "Skapa hemsida" går vi igenom hur du börjar sakta men säkert koda din egna hemsida i en enkel texteditor.

Vad är HTML?

HTML är en förkortning av orden HyperText Markup Language. HTML är den grundläggande koden som används för en hemsida. Du kan dock inte få ut allt i en HTML-kod utan måste oftast kompliteras med t ex CSS för att få ut maximala funktionen i koderna.

grunder.jpg

Börja bygga en sida med HTML

När du ska bygga din hemsida behöver du en texteditor. I detta fall kommer vi använda Notepad (Anteckningar) som finns i Windows som standard. Det finns även WYSIWYG (What You See Is What You Get, På svenska: Vad du ser är vad du får) editorer som skriver koden åt dig i programmet ett av dom är Frontpage. Även om du använder en WYSIWYG editor är det viktigt att du har grundkunskaper om HTML som du kommer lära dig i denna guide. Anledningen till varför du behöver grundkunskaper även om du använder en WYSIWYG editor är att t ex om du vill lägga till ett javascript som t ex förhindrar högerklick behöver du veta inom vilken tag du ska sätta koden.

HTML används i taggar <tags> och avslutar ofta med </tags>, HTML är inte känslig för små eller stora bokstäver så det spelar ingen roll om du skriver <TITLE> eller <title>,<HTML> Anger att koden och sidan är ett HTML-dokument.

<HEAD> Denna del av HTML-dokumentet är ''osynlig'', information här under ger information till din webbläsare,sökmotorer,osv. Inget som du skriver här syns på din sida som text.

<TITLE> Din hemsidas titel.

<BODY>Allt som skrivs under Body syns i Webbläsaren, det är som hemsidans kropp.

STEG 1. - GRUNDERNA

Att skriva HTML och visa på din webbplats/i en webbläsare.

  1. Skriv in koden i bilden nedan i ett nytt textdokument i Notepad (Anteckningar). Var noga med att skriva exakt alla tecken!

    start.jpg
  2. Spara din sida med namnet: min_sida.html

  3. Starta sedan din webbläsare och öppna ditt HTML-dokument. Tryck CTRL + O och bläddra dig fram till ditt dokument: min_sida.html

Grattis! Du har nu skapat din första sida!

STEG 2. - TEXTFORMATERING

Nu ska du lära dig att formatera hur din text ska se ut det finns flera olika alternativ, här kommer några exempel:

text.jpg

h1: <h1>Din text</h1>
h2: <h2>Din text</h2>
h3: <h3>Din text</h3>

För den vanliga texten behöver du bara avsluta föregående koder ordentligt. Alltså inte glömma tex: </h3> efter du skrivit din text inom taggarna.

Såhär ser det ut i själva HTML-koden när jag kodat ihop det som i bilden ovan.

rubriker.jpg
Ursäkta att min mus satt precis vid <body>

Nu har vi gått igenom grunderna för HTML, tredjedelen kommer handla om: Färger & Teckensnitt.

Anmäl
2009-08-22 02:41 #1 av: dijete

Nu är andra delen av Skaffa hemsida artikelserien ute. Inom kort kommer även Färger & Teckensnitt, längre fram planerar vi CSS.

Anmäl
2009-08-22 02:43 #2 av: IdaSH

Intressant artikel Glad

Anmäl
2009-08-22 02:44 #3 av: AnneN

Ännu en superbra artikel Glad Har du skrivit allt ur eget huvud eller har du använt några källor?

/Mvh Anne
~Sajtvärd på Blandrashundar ~Medarbetare på Support
Hundägare i Norrbotten? Välkommen till oss på Hundhuset!

Anmäl
2009-08-22 02:48 #4 av: dijete

#3 Jag har skrivit allt ur eget huvud!

Tack så mycket! Glad

Anmäl
2009-08-22 02:49 #5 av: dijete

Kan tillägga också att Ida även har skrivit lite i denna artikel, dock mest jag.

Anmäl

Bli medlem på iFokus

För att kunna delta i diskussionen måste du bli medlem på iFokus. Det går snabbt, enkelt, och kostar ingenting. Medlemskapet ger dig tillgång till över 300 sajter.