Site hosted by Angelfire.com: Build your free website today!

HTML och xhtml är inga programmeringsspråk utan markeringsspråk. Att placera data på rätt plats i en webbläsare. Ett html/xhtml-dokument består av två huvuddelar nämligen: head och body.

I huvudet ges information till sökmotorer ang. sidan/sajtens innehåll. Dessutom att styra vissa funktioner och utseendet i själva kroppen - body. I kroppen finns allt som visas i webbläsaren. Texten, bilderna, tabellerna och annat som presenteras där.

Koder (taggar) och dess egenskaper (attributes)

<och> omsluter en kod och dess egenskaper t.ex. <html> Startkod! </html> Slutkod! Det går bra att använda små som stora bokstäver i html men inte i xhtml som är den nya standarden för webbsidor. Så det är naturligtvis lika bra att anpassa sig till den nya standarden.

En kod/tagg/märke kan ha en eller flera egenskaper, som skiljs åt med ett mellanslag t.ex.:

OBS! Här ser vi att alla egenskapers (attributes) värde omsluts med citattecken. Ta för vana att alltid göra det. Vi behöver inte göra det med siffror, men xhtml kräver det så det är väl lika bra att följa den uppmaningen.

xml är startkoden för ett xhtml-dokument. Doctype anger för webbservrarna vilken standard som gäller för just detta dokument. Servrarna på nätet och webbläsarna i datorerna brukar klara av att läsa dokumentet andå, men man skall aldrig lämna saker och ting till slumpen eller hur!

Title anger innehållet för sajten/sidan. Informationen syns i statusraden högst upp i webbläsarfönstret. Informationen dyker också upp i sökmotorernas register.

Metakoderna är också till för sökmotorerna eftersom dom hjälper till med sökord, och en lite beskrivning av sidan/sitens innehåll. Här gäller det att vara nogrann och ange relevanta sökord som man tror att intresserade av ämnet söker på.

Beskrivningen skall vara kort, slagkraftig och sammanfatta innehållet så bra som möjligt. Glöm aldrig att stänga av koderna. Närmaste kod först!

Det gör man genom att lägga till en slash före koden. Om koden inte hade en avslutnings kod i den tidigare standarden html, lägger man till en slash straxt innan tecknet "större än".

Din första hemsida!

Starta upp din html-editor eller anteckningar som finnes under tillbehör i Windows. Börja programmera enl. följande: OBS! du behöver inte skriva in doctype koden till att börja med, eftersom dom flesta editorerna har en "format and fix" funktion som automatiskt rättar och lägger in nödvändiga koder. Så starta med koden <html>

Fortsätt sedan med informationen till våra berömda sökmotorer på Internet. Skriv först in en lämplig sammanfattande titel i huvudet (<head>), om vad som kommer att finnas på sidan. Det gör du med koden <title>.

Sedan är det dags för meta koderna och dess egenskaper. Gör en enkel beskrivning och lämpliga sökord som passar in på just din familj.

I body lägger du in en lämplig bakgrundsfärg med attributet (egenskapen) bgcolor och sedan bestämmer du textfärgen med attributet text.

Nu är det dags för en rubrik. Det finns 6 att välja på <h1> till <h6>. H1 är störst. Jag väljer h2. Sen bör jag väl centrera texten med koden <div> och attributet (egenskapen) align och värdet center.

Observera att när man avslutar en kod använder man kodens namn med en slash före. Man avslutar alltid den närmaste koden (taggen) först! Gör nu en liten kort presentation om dig och din familj:

Koden (taggen) <b> som står för bold ger fetstil och koden <p> som står för paragraf (paragraph) ger dig ett nytt stycke (OBS! glöm inte att avsluta fetstils och paragrafkoderna!)

Man kan också använda koden <hr/> som avgränsar olika stycken från varandra med en horisontell linje.

Avsluta sedan xhtml-dokumentet med </body> och </html>. Så här ser koden ut för hela exemplet i en vanlig html-editor:

Se exemplet i webbläsaren

Hjälpprogrammet Tidy

Innan du sparar dokumentet är det bra att använda funktionen "format and fix" i din html-editor. Alla har inte denna funktion eller programsnutt som W3C har tagit fram. Ladda i så fall ned detta gratisprogram från deras hemsida.

Så här gör du i vår editor på skolan. Tryck på "Tools" och välj "Tidy HTML Format and Fix":

Tryck på "Tidy Options":

Välj "Output-xhtml" och tryck på "Tidy dokument":

Nu kommer programmet att automatiskt rätta eventuella fel och lägga in rätt doctype i ditt dokument. Smart eller hur! Så här ser dokumentet ut efter programbearbetningen:

Sedan är det bara att spara ditt xhtml-dokument i en separat mapp i din dator. Eftersom det är ditt första och enda dokument för tillfället, bör du döpa den till index.html. Dubbelklicka sedan på den sparade filen så kommer webbläsaren i din dator att starta och visa innehållet.