Forside Lav hjemmeside Motion Familie og venner Gæstebog
       Lav hjemmeside

         HTML-tutorial

         JS-tutorial

         Meta-tester

         Test opløsning

         Formindsk billede

         Image mapper

         Din IP-adresse

         Timestamp

Peter Aude
Silkeborgvej 3
8464 Galten
tlf.: 2667 2439

.::HTML tutorial::.

Indholdsfortegnelse

Klik på knappen for at starte testeren


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:

  • Dette er første punkt i min liste
  • Dette er andet punkt i min liste
  • Dette er tredje punkt i min liste


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:

  1. Alfa Romeo
    • 146
    • 156
    • 166
  2. BMW
    • 320i
    • 325i
    • 520i
  3. VW
    • Passat
    • Golf
    • Bobble

Ø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:

Http://www.aude.dk
Helsingforsgade 27
8200 Århus N


Horisontal Rules

'Horisontal rules'( <HR>), er streger der opdeler siden horisontalt. <HR> kan ændres med flere egenskaber.

  • 'Size' ændrer tykkelsen af stregen.
  • 'Width' ændrer bredden af stregen
  • 'Color' ændrer farven af stregen.
Prøv at skrive:

<HR Width="55%" Size="5" Color="Green">


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.

Tegn og tilhørende koder:
< &lt;
> &gt;
& &amp;
mellemrum &nbsp;
Copyright &copy;


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:

Dette er overskriften til min tabel
Table Row 1, celle 1 Table Row 1, celle 2
Table Row 2, celle 1 Table Row 2, celle 2


En tabel startes med tag'et <TABLE> og sluttes med tag'et </TABLE>.
En 'row' startes med <TR> og sluttes med </TR> Cellerne i en 'row' startes med <TD> og sluttes med </TD>.
Koden til ovenstående tabel ser således ud:

<TABLE Border="2">
  <CAPTION> Dette er overskriften til min tabel </CAPTION>
   <TR>
    <TD> Table Row 1, celle 1 </TD>
     <TD> Table Row 1, celle 2 </TD>
   </TR>
  <TR>
   <TD> Table Row 2, celle 1 </TD>
   <TD> Table Row 2, celle 2 </TD>
  </TR>
</TABLE>


Som det ses er det egenskaben 'border', der bestemmer tykkelsen på rammen. Sættes Border= "0", vil tabellen være usynlig.
Der er også mulighed for at bestemme størrelsen og placeringen af tabellen, ved at bruge egenskaberne 'Width' og 'Align.'
Prøv f.eks at lave start tag'et om til:
<TABLE width="50%" Align="Right" Border="2">.




 
© Peter Aude 2000-2006