| Att komma igång 1 | Att komma igång 2 |

Att komma igång 1

1. Inledning

Denna del har som syfte att visa hur man åstadkommer en enkel hemsida och vi kommer också att göra oss bekanta med några grundläggande koder.

I och med att alla webbläsare inte alltid tolkar koderna på samma sätt, är det bra att åtminstone ha de två dominerande webbläsarna installerade i datorn, Netscape och Internet Explorer. Dessa kan laddas ner gratis från respektive hemsidor. Netscape: home.netscape.com och Internet Explorer: www.microsoft.com. Det kan också vara en idé att kika efter dessa på de CD-skivor som brukar följa med vissa Internet-tidningar.

När vi skrivit koden måste vi förhandsgranska resultatet mellan dem och speciellt innan vi lägger ut sidan på Internet.

Att skriva kod fungerar lika bra med gemener som versaler och båda sätten används flitigt. Dock säger den senaste standarden med xhtml att man kodar med små bokstäver.

2. HTML-editor?

Att använda editorer har både för och nackdelar. En del tycker det är lättare med, medan andra tycker det är bättre utan. Det som till sist fäller avgörandet är vad du själv tycker! Men faktum är att de flesta professionella website-makare använder sådana.

Nu behövs ingen editor för mina att klara mina sidor, men vill du testa kan jag exempelvis nämna Allaire Homesite, Frontpage från Microsoft och Dreamweaver. Dessa är både kraftfulla och populära. En svensk editor, om du vill testa en sådan, är Einstein HTML. Klicka på respektive länk för att ladda hem 30 dagars fri utvärdering.

Titta gärna på mitt avsnitt som handlar om HTML-Editorer. Där visar jag lite lätt hur de fungerar samt deras starka och svaga sidor.

3. HTML-stommen

Nedanståde koder utgör stommen i varje HTML-dokument och på denna grund läggs ytterligare koder till, främst inom <body> </body> sektionen.

<html> <head> <title> </title> </head> <body> </body> </html>

Sakerna som ser ut så här: < och >, kallas "taggar" och inom dem står det olika kommandon eller koder.

<html> talar om att jag börjar koda i HTML. Denna kod avslutas med </html>. Det är liksom en "övergripande" kod som gäller för hela dokumentet. Därför placeras denna först och sist i koden. Inom denna övergripande del förekommer det olika avdelningar eller sektioner. Några av dem är <head> och <title>.

<head> betyder huvud och denna sektion i koden kallas för dokumenthuvudet. Avslutas med </head> efter <title> </title>.

En sektion inom huvudet är titeln: <title>. Här anger vi titeln på vår sida och det blir den som kommer längst upp till vänster i vebbläsaren, i det blåa fältet. (Förväxla ej detta med det namn du sparar sidan i!). Avslutas med </title>.

En annan sektion är den som kallas <body>. Det vi skriver inom denna del blir det som våra besökare kommer att se på sidan. Här kan vi skriva in text, lägga in bilder, skapa länkar från en sida till en annan och mycket mer. Avslutas med </body>

4. Din första hemsida!

Öppna programmet "Anteckningarna" genom att klicka på: "knappen" Start, Program, Tillbehör (gäller PC). Där brukar Anteckningarna finnas. Den engelska beteckningen för samma program är Notepad. Här kan vi skriva in våra HTML-koder. (Surfar du med Internet Explorer och har kommit till en sajt, kan du gå till menyn och välja Visa och därefter Källa. Då öppnas vanligtvis programmet Anteckningarna och du kan studera koder. Du kan även högerklicka någonstans på sajten och välja Visa källa.)

Vi börjar med att skriva in HTML-stommen i Anteckningarna och detta blir den första hemsida som vi gör.

<html> <head> <title> </title> </head> <body> </body> </html>

Spara detta genom att gå till menyn och välja Arkiv och sedan "Spara som". Döp dokumentet till något, typ: index.html eller index.htm (båda alternativen fungerar lika bra). Spara dokumentet med koderna i lämplig mapp, bara du sedan själv vet vart. Vanligt är att skapa en separat mapp på exempelvis skrivbordet där alla projekt sparas. Så här ser det ut i programmet Anteckningarna.

Öppna din webbläsare och öppna dokumentet du nyss sparade. I exempelvis Netscape 4.7: Välj "File" och sedan "Open Page". Bläddra fram aktuell fil som vi ovan kallade för index.html. Nu öppnas dokumentet i webbläsaren och vi får se resultatet av kodningen Så som sidan kommer att se ut på Internet. Observera att sidan ännu inte är utlagd, utan befinner sig i datorn.

Har du klistrat in denna kod i exempelvis Anteckningarn och öppnat den i en webbläsare, blev det en vit tom sida.

5. Vi ger hemsidan en titel

När vi ger hemsidan en titel anges denna mellan mellan <title> </title>. Koden ser ut så här:

<html> <head> <title>Nu har sidan en Titel!</title> </head> <body> </body> </html>

Klistra in koden i exempelvis Anteckningarna

OBS: när vi ändrat koden i anteckningarna måste vi alltid spara, annars kommer vi inte att kunna se resultatet av justeringen. I webbläsarens fönster klickar vi sedan på reload eller uppdatera.

6. Vi lägger in text

När vi skapar text för våra hemsidor läggs denna in i sektionen body mellan <body> och </body>. Det kan se ut så här:

<html> <head> <title>Sida med text</title> </head> <body> Här skriver vi in texten vi skall ha med. </body> </html>

Text placeras inom detta avsnitt och senare kommer vi också att lägga in bilder på exakt samma ställe.

7. Avsluta koderna i rätt ordning

Det är viktigt att avsluta koderna i rätt ordning, annars kommer kanske inte koderna att fungera riktigt. Att avsluta innebär att vi talar om i koden, att det till exempel inte kommer mer text eller bilder som skall ha speciella egenskaper.

Början och avslut bygger på principen, att det jag först påbörjar ex. <html> måste jag avsluta sist </html>. Och det jag sist påbörjar ex. <body> måste jag avsluta först </body>.

Men att avsluta koderna fel (om varandra) innebär ex. att skriva följande fel:

<head> <title> xxx </head> </title> eller <html> <body bgcolor="#ffffff"> Texten vi skriver in. </html> </body>

Koderna inne i en annan kod måste avslutas innan vi avslutar de "yttre" koderna och detta gäller alla koder.





kontakt	© Stefan Dahlén	Söndag 5:e februari 2012