Guide: HTML

From rtgkomArkiv
Jump to: navigation, search

Hvad er HTML?[edit]

Forkortelsen HTML står for Hypertext Markup Language, altså et sprog til "markup"(/opmærkning) af hypertext.

Begrebet hypertekst(/hybertext) dækker over muligheden brugeren har for at bestemme rækkefølgen teksten læses i. M.a.o. læses hypertekst ikke fra start til slut som vi er vandt til den gør i en normal bog (fra forord til efterskrift), men derimod opfordres brugeren til at "bladre" i teksten.

Et Opmærkningssprog(/markup language) kombinerer tekst og information om tekst på en sådan måde at teksten i sig selv indeholder information om hvordan den skal præsenteres.

På denne måde kan teksten "selv holde styr på" hvordan overskrifter, rubrikker, tabeller etc. skal præsenteres for brugeren i sidste ende.

Vi bruger altså HTML til at holde styr på en hypertekst og præsentationen af denne.

Det er også vigtigt at HTML er et sprog som vi kender det fra hverdagssprog, det skal ligeledes overholde grammatiske-/stave-regler.

Hurtigt i gang(i Windows)[edit]

Jeg vil hurtigt gennemgå hvordan man nemt kan få taget hul på HTML.

- Først åbnes en simpel text editor (Notepad/Notesblok, Ultraedit, etc., Word dur ikke :) )

Dette gør du ved at:

  • klikke start
  • vælge Kør(/Run)
  • indtaste "notepad" i feltet
  • klikke OK.

http://www.rtgkom.dk/~kraenvh05/image002.jpg

Når editoren er startet, starter du med at gemme den ubrugte fil et sted på din harddisk (skrivebordet plejer at være en fin placering). Det er vigtigt at du gemmer filen som en ".html" frem for en ".txt" fil. Det gør du ved at vælge "Alle filer" i feltet "Filtype:" (/"Save as type:").

http://www.rtgkom.dk/~kraenvh05/image004.jpg

Samtidig skal du gemme din fil med "fil-efternavnet" ".html"

Når du har gemt HTML filen kan du finde filen der hvor du gemte den, dobbeltklikke på den og derved åbne den i din browser(Internet Explorer/Firefox.. etc.)

Når du har åbnet filen i browseren bør der blot være en blank side.

Prøv at skrive et lille stykke tekst i din tekst editor, gem filen igen(på samme placering) og gå ind i din browser og opdater siden (F5).

Back to basics[edit]

For at lære at skrive HTML skal vi kende et par ord der bruges meget i denne forbindelse.


Det første ord er "browser", browser bruges til gennemsøge/bladre igennem Internettet.

Standart browseren i fx Windows XP er måske bedre kendt som "Internet Explorer", i grove træk er det browserens opgave at hente HTML til de sider du forespørger(fx: google.com) og derefter konvertere den hentede HTML til en "menneskelæselig tekst".


Det andet ord er "tag", det udtales som man ville gøre det hvis man læste det på engelsk.

Ordet er afledt slang af udtrykket "HTML-tag".

Basalt set kan man betragte browseren i et af to stadier. Enten læser browseren tags ellers læser den tekst.

Tags kendes fra den normale tekst ved at være omgrænset af henholdsvis < og > i starten og slutningen.

Dvs. at når browseren skal gennemlæse en HTML side læser den skiftevis, <tag>tekst<tag>tekst.

Herunder kommer et eksempel på en simpel HTML tekst :

<b> Hello World </b>

Det første tag indeholder bogstavet "b", dernæst kommer teksten "Hello World" og til sidst har vi et tag der indeholder bogstaverne "/b"

Det første tag kaldes et "b-tag", b’et er en forkortelse af ordet "bold" der på dansk kaldes fed. b-tagget sørger således for at alt efter det bliver tekstbehandlet til at have en fed skrifttype.

Teksten "Hello World" er blot almindelig tekst og bliver derfor af browseren gjort fed jf. ovenstående sætning.

Det sidste tag indeholder bogstaverne "/b", som hovedregel betyder "/" som første bogstav i et tag at det pågældende tag afslutter et ældre tag.

På denne måde afslutter det andet tag det første og browseren vil jf. eksemplet ikke blive ved med at skrive eventuel tekst efter det andet tag, med fed skrift, men derimod blot fortsætte normalt.

Da det første tag starter fed skrift og det sidste slutter det, kalder vi de to tags henholdsvis start- og slut- tags.

<b> bliver således et b-start-tag og </b> et b-slut-tag.

Ydermere bør det bemærkes at fx b-tagget kan skrives på flere måder, browseren skelner i mange tilfælde ikke imellem store og små bogstaver. Således kan b-tagget skrives både <b> og <B>.


Det tredje ord er "property", oversat til dansk betyder det egenskab.

Det skal forstås som en egenskab ved et tag.

Som eksempel kan vi forestille os at der er et tag der hedder "bil".. Bilen har visse egenskaber, eller variabler der gør den forskellig fra andre biler, som eksempel nævnes farve, højde, bredde og længde.

På samme måde har HTML-tags egenskaber der beskriver hvordan de afviger fra det normale.

Vi kan kigge på et tag der ofte bruges når man skal opsætte en hjemmeside, nemlig font-tagget.

Font-tagget styrer tekststørrelse, skrifttype og farve for den tekst der står imellem font-start-tagget og font-slut-tagget.

Ex:

<font size="5" color="red" face="Tahoma"> Hello World </font>

Ovenfor ses font-start-tagget først, den venter vi lidt med at forklare nærmere, derefter kommer vores tekst "Hello World", og til sidst ser vi font-slut-tagget.

Hvad der er nyt er:

size="5" color="red" face="Tahoma"

Som sagt styrede font-tagget størrelse(size), farve(color) og skrifttype(face) på den tekst det omklamrede.

Size, color og face er således properties på font-tagget.

I eksemplet har jeg givet size værdien 5, color er sat til rød/red og skrifttypen er sat til Tahoma.

Bemærk at jeg skriver: navn="værdi" , hvor navn byttes ud med navnet på den property der skal sættes og værdi er værdien den skal sættes til.

Bemærk også at jeg har sat gåseøjne (") omkring værdien, dette sikrer at browseren ved hvad der er værdi og hvad der er property.

Prøv eventuelt at skrive eksemplet ind i din texteditor(notepad), gem så filen og åben den med din browser.

Afsluttende[edit]

Afsluttende vil jeg fortælle at det altid er muligt at finde information om HTML, tags og deres properties på internettet.

Google.com er en fremragende start, ønsker du at vide hvilke farver du fx kan skrive som værdi til color-property på font-tagget kan du fx skrive "HTML, font, color" i søgefeltet og få 35,600,000 hits. Så læringsmateriale skulle der være nok af.

Samtidig kan jeg anbefale http://www.w3.org/html/ som opslagsværk, dog er siden hovedsageligt henvendt til engelske/amerikanske eksperter, men da det er dem der definerer html er der god grund til at kigge forbi deres side.

Som alternativ kan den danske side for førstegangskodende HTML interesserede, www.html.dk varmt anbefales.