|
Indholdsfortegnelse |
|
Indledning til tutorial
Velkommen til min HTML tutorial. Siden er tiltænkt alle, der ønsker at få et hurtigt
indblik i HTML, eller som ønsker et opslagsværk. Jeg vil i denne tutorial
gennemgå det mest basale HTML.
For at gøre det lidt sjovere, er der mulighed for at afprøve HTML-koden
'on-the-fly'.
Tryk på knappen øverst for at starte et test vindue.
Test vinduet sparer dig for at åbne et tekstdokument, skrive din kode, gemme dokumentet som en
html-fil og åbne den i en browser.
Mange laver hjemmesider i såkaldte WYSIWYG (What you see is what you get) editorer som f.eks. MS Frontpage eller WebExpress. Dette er der heller ikke noget galt i, sålænge programmet laver siden som man ønsker det. Men når programmet pludselig ikke gør som man ønsker, er det rart selv at være i stand til at rette sin kode.
God fornøjelse :-)
Kort om HTML
HTML er ikke et programmeringssprog, men derimod en masse regler for
hvordan tekst, billeder o.l. må og skal placeres i en browser.
Disse regler er let lærte, og når man først har fat i tankegangen
er det enormt simpelt at kode og læse.
En HTML-fil er ikke andet end et tekstdokument, fra f.eks. Notepad, som har fil-endelsen 'htm'
eller 'html.' Så det eneste man behøver for at lave sin egen hjemmeside er en smule viden om HTML,
og lidt god fantasi.
Ønsker man ens side publiceret på Internet, kræver det at man har plads på en Internetserver. Dette
er dog inkluderet i de fleste Internet-abonnementer. Derudover er der mange firma'er, der
tildeler en gratis serverplads, sålænge de må reklamere på ens side.
Når man har adgang til en Internetserver, lægges HTML-filerne ud på denne, som de er.
Når en person 'surfer' ind på ens side henter han/hun HTML-filen ned til sin browser. Det er
først på dette tidspunkt at koden bliver oversat, og vist som billeder og tekst i browseren.
Netop på grund af at oversættelsen først sker i browseren, er der risiko for at ens
HTML ikke udarter sig som ventet i alle browsere. Derfor kan det være en god idé, at kontrollere ens
side i flere browsere før publicering.
HTML-sidens opbygning
HTML skrives ved at benytte såkaldte tag's. Et 'tag' er en besked til browseren om at den
skal udføre en bestemt handling. Hvis man for eksempel ønsker at et stykke tekst skal være
fed, ser start tag'et således ud: <B> og slut tag'et ser således ud: </B>.
Alt hvad der skrives imellem disse to tag's, kommer frem på skærmen som fed-skrift.
For at gøre browseren opmærksom på at man starter et nyt afsnit,
skriver man <P> (P står for paragraph, som er engelsk for afsnit). Et afsnit skal altid afsluttes med </P>.
Når man starter et afsnit, har man også mulighed for at bestemme hvor på skærmen teksten skal
placeres. Dette gøres ved at inkludere lidt i ens afsnits-tag.
Man kan for eksempel skrive <P ALIGN=Center>, for at placere teksten i midten af skærmen.
Eller <P ALIGN=Right> for at placere teksten i højre side af skærmen.
Med forståelse for dette, har du allerede godt fat i hvordan HTML virker. Man starter et tag ved at
skrive < tag'ets navn > og afslutter det igen ved at skrive </ tag'ets navn >. Og hvis det pågældende tag har
nogle specielle egenskaber vi ønsker at bruge, skrives disse i start tag'en.
Hvis du ikke allerede er god i gang med at eksperimentere, er dette vist et velvalgt tidspunkt.
Ved at eksperimentere lidt vil du finde ud af at browseren er ligeglad med hvor mange mellemrum
du har lavet i din kode, samt hvor mange linieskift du har lavet.
Ønsker du at lave et linieskift, bruger du tag'et <BR>(BR er en forkortelse for 'Break'). <BR> har logisk nok ikke et slut tag.
En HTML-side har et minimum af tag's. Hvis du ønsker at lave din egen side i f.eks. notepad, kan
du kopiere dem direkte ind:
<HTML>
<HEAD>
<TITLE> Velkommen til min hjemmeside :) </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Når du bruger denne tutorial behøver du ikke at indsætte ovenstående koder, da disse allerede er sat ind. Dette giver dig frihed til at koncentrere dig om de enkelte punkter i tutoriallen.
HTML tag'et fortæller browseren at der er tale om et HTML dokument.
HEAD indeholder TITLE, som er det, der (oftest) skrives øverst i ens browser. Derudover kan
HEAD indeholde en masse andre oplysninger, som for eksempel METATAGS, der bruges til at
fortælle søgemaskiner om sidens indhold.
BODY er der hvor selve sidens indhold beskrives. BODY TAG'et kan udvides med flere egenskaber.
Prøv f.eks. at skrive:
<BODY bgcolor="lightblue" >
Blue kan også udskiftes med #3399CC, som er en farvekode. Farvekoderne giver én større mulighed for at
vælge en specifik farve til hjemmesiden.
I BODY tag'et kan man også bestemme en masse om hvilke farver man vil bruge til tekst, links, besøgte links osv. Dette gøres ved:
text="#XXXXXX"
link="#XXXXXX"
vlink="#XXXXXX"
alink=#XXXXXX
Hvor XXXXXX skal udskiftes med en farvekode, eller også skal #XXXXXX udskiftes med en af
standard farverne (red, green, yellow, blue...).
Font
Ønsker du at ændre udseendet af din tekst i løbet af din side, kan du
bruge tag'et <FONT > . Prøv at indsætte følgende kode:
<FONT Color="red" Size="5" Face="Desdemona"> Dette er rød tekst af typen Desdemona med størrelsen 5 </FONT>
Unnumbered Lists
I HTML er der flere muligheder for at skabe overskuelighed på sin side ved
hjælp af lister. Den første listeform vi vil kigge på er en unummereret liste.
Start tag'et ser således ud: <UL> og slut tag'et ser således
ud: </UL> . For hvert punkt man ønsker i sin liste, starter man
med at skrive: <LI> og afslutter med </LI>.
Eksempelvis vil:
<UL>
<LI> Dette er første punkt i min liste </LI>
<LI> Dette er andet punkt i min liste </LI>
<LI> Dette er tredje punkt i min liste </LI>
</UL>
komme til at se således ud:
Ordered Lists
At lave en nummereret liste, er ligeså simpelt som ved en unummereret liste. Start tag'et ser således ud: <OL> og slut tag'et ser således ud </OL> . En linie indsættes ved <LI></LI>.
Definition Lists
Vil du selv bestemme hvorledes opdelingen af din liste skal se ud, er det
smarte valg en definitions liste. Denne liste kræver lidt mere end de forgående,
men ikke meget.
Start tag: <DL> og slut tag: </DL>
For at lave en overskrift bruges tag'et <DT> og før indholdet
af ens punkt bruges tag'et <DD> .
Et eksempel:
<DL>
<DT> Min 1. overskrift </DT>
<DD> Her skrives teksten til det punkt jeg lige
har defineret </DD>
<DT> Min 2. overskrift </DT>
<DD> Endnu et punkt. Dette placeres under anden
overskrift </DD>
<DT> Min 3. overskrift </DT>
<DD> Her er mit sidste punkt. </DD>
</DL>
Nested Lists
Selv om vi er igennem de gængse listeformer, er vi ikke helt færdige med lister endnu.
Lister er nemlig så smart indrettede, at man kan have lister i lister.
Dette er et eksempel:
Øvelsen at lave en 'nested list' er tænkt som en selvstændig opgave. Det er selvfølgelig også muligt at kigge i koden til ovenstående liste (Højreklik med musen, og vælg 'vis kilde').
Preformatted Text
Tekst man skriver i HTML er elastisk. Det vil sige, at hvis man ændrer størrelsen
af browseren, vil længden af en linie også ændres, så man slipper for at scrolle
sig igennem siden. Dette er også en stor fordel, da forskellige computere er sat op til
forskellige skærmopløsninger, så nogle vil kunne have længere linier end andre.
Skulle man af en eller anden årsag ønske at teksten man skriver kommer ud præcist som i
kildekoden, er der også mulighed for det.
Løsningen er at omslutte den pågældende tekst med tag's <PRE> og
</PRE> .
Eksperimenterer du lidt med <PRE> og </PRE> , vil du også finde
ud af at et tvunget linieskift i koden (tryk på enter) også bliver til et linieskift
på skærmen.
Blockquote
En blockquote ( <BLOCKQUOTE> og </BLOCKQUOTE>) er et citat felt.
Alt hvad der skrives inden for de to tag's vil komme lidt indskudt på skærmen. Nedenstående er
et eksempel på brug af blockquote:
Dette er min blockquote. Som resten af HTML er det også nemt at gå til :-)
Address
HTML har også en standard for adressefelter ( <ADDRESS> og </ADDRESS>).
Brugen af denne kan se således ud:
Horisontal Rules
'Horisontal rules'( <HR>), er streger der opdeler siden horisontalt.
<HR> kan ændres med flere egenskaber.
Escape Sequences
Da HTML opfatter nogle tegn på en speciel måde, som f.eks.
( <) og ( >), der er start og slut tegn for et tag,
er man nødt til at have specielle koder for disse, hvis man vil skrive dem til skærmen.
Et (&) fortæller browseren at der kommer en 'Escape sequence' og derfor er man også
nødt til at have en kode til det.
| < | < |
| > | > |
| & | & |
| mellemrum | |
| Copyright | © |
Linking
Linking er nok det vigtigste værktøj, når man snakker om HTML og Internet, da det er
dét, der binder flere sider logisk sammen, og giver en mulighed for at henvise til andre sider, filer m.m.
De to link tag's hedder <A> og </A>. Alt hvad der skrives i mellem
disse tag's, er den tekst, der kommer frem til brugeren af siden. Hvis du ønsker det, kan du også indsætte et billede
hér, og lade det være dit link.
For at specificere hvad det er der skal linkes til, har start taget en egenskab, der hedder HREF .
Prøv f.eks. at indsætte følgende kode:
<A HREF="http://www.yahoo.dk"> Tryk her for at komme til Yahoo! </A>
Den tekst der kommer frem er et link til Yahoos hjemmeside.
I og med at indholdet i HREF er startet med Http:// er det en absolut adresse.
Dette er i midertidigt ikke nødvendigt hvis du linker til en anden side,
der hører til din hjemmeside. Et sådant link kaldes et relativt link. Hvis
du undlader at skrive http://, og dermed laver et relativt link, er du som udgangspunkt
i roden af dit hjemmeside-bibliotek. Linker du til en fil, der ligger i et andet bibliotek end roden skal stien til denne fil specificeres.
Eksempelvis HREF="/MinMappe/Minfil.html".
Fordelen ved at lave relative links er, at skal du en dag flytte domæne, behøver du ikke
omskrive alle dine links, sålænge de stadig er placeret på samme måde i forhold til dit
biblioteks rod.
Du skal også være opmærksom på at nogle servere er case-sensitive. Dvs. de skelner mellem store og små bogstaver, og
vil derfor ikke opfatte minfil.html som den samme fil som MinFil.Html .
Du kan også linke til en mailadresse, ved at skrive:
<A HREF="mailto:peter@aude.dk"> Ris/ros er meget velkomment </A>
Billeder
Du indsætter et billede på din side ved at skrive <IMG SRC="DitBillede.gif" > Her
gælder samme regler som ved links, hvad angår absolute og relative adresser.
Når du indsætter billeder på din side, skal du være meget opmærksom på størrelsen af disse, da
mange brugere har langsomme modemopkoblinger til Internettet.
Tabeller
Tabeller er endnu et stærkt redskab til at lave overskuelighed på din side.
Tabeller kan være både synlige og usynlige.
Eksempel på en synlig tabel:
| Table Row 1, celle 1 | Table Row 1, celle 2 |
| Table Row 2, celle 1 | Table Row 2, celle 2 |
