HTML-kursus indhold.

   Generelt

1. Hvad er Html og hvad står det for ?
   
   

2. Hvilke programmer er nødvendige ?
   
   

3. Gode tips og et par tommelfingerregler til Html.
   
   

4. Uploadning til internetudbyder.
   
   

5. Tilmelding til søgemaskiner/linkssider.

Grundlæggende Html

6. Det nødvendige Html-skelet.
   
   

7. Tilføjelser til BODY-koden (baggrund, tekstfarve m.v.).
   
   

8. Tekst (type, størrelse m.v.).
   
   

9. Billeder (indsættelse, ramme m.v.).
   
   

10. Links (billede/tekst som links m.v.).
    
    

11. Lister (simpel/nummereret).
    
    

12. Musik & Lyd.
    
    

13. Blandet (skillelinjer, specialtegn, placering m.v.).
    
    

14. Farvekoder.

Html for videregående

15. Tables (simpel opsætning, placering m.v.).
    
    

16. Frames (inddeling af frames m.v.).
    
    

17. Fordele og ulemper ved frames (bør læses).
    
    

18. Javascripts (indsættelse, ikke hvordan man laver dem).
    
    

19. Stylesheed / CSS.
    
    

20. Imagemaps (billeder som menuer).
    
    

21. Forms (inputsfelter, opsætning m.v.).
    
    

22. META koder.
    

Html anvendes til at lave hjemmesider med. Html er egentlig bare en tekstfiL, der bliver gemt med endelsen html/htm (filnavn.html). Html består af en masse små koder, som alle står i vinkelben ( < og > ). Koderne tolkes af ens browser (et program til at vise og tolke Html-dokumenter). F.eks. 
<h2> Velkommen til min hjemmeside !</h2> 

Velkommen til min hjemmeside !

Du skal først og fremmest have et program der kan vise/tolke dine Html-dokumenter, det kaldes en browser. De to mest kendte browsere er Microsoft Internet Explorer og Netscape Navigator.

Først skal du beslutte hvordan du vil arbejde med din hjemmeside, om du selv vil kode den eller bruge en WYSIWYG-editor (What You See Is What You Get, altså man ser som det kommer til at se ud.) Hvis man vil bruge en WYSIWYG-editor bør du nok vælge DreamWeaver, Homesite, CoffeeCup eller Microsoft Frontpage 2000. Ønsker man derimod selv at kode sin side, vil jeg stærkt anbefale WebWriter, men du kan sagtens nøjes med Notesblok i starten til Html-kodning, du skal IKKE bruge programmer som MS Office, hvor du kan ændre skrifttype/størrelse m.v., da dette IKKE tolkes rigtigt af en browser. Brug ikke Microsoft Publisher, som er et eksempel på en wysiwyg-editor, der laver elendig kode og som får HTML-sider til at fylde 2-3 gange mere end hvad der er nødvendigt. Resultatet bliver at siderne fungerer dårligt.

Når du senere skal have grafik på din side, bliver det også nødvendigt med et tegne- eller billedebehandlingsprogram. Her kan man som nybegynder (eller måske lidt mere erfaren bruger) sagtens bruge programmet Paint Shop Pro.

Gode tips og et par tommelfingerregler til Html.

Tommelfingerregel :
Når man koder Html kommer man ofte ud for, at der skal bruges flere koder på samme tekst. Når man skal det, er det en meget god ide at starte og slutte koderne korrekt, det gøres således :
<kode1><kode2>
Tekst der bliver påvirket af kode 1 OG kode 2
</kode2></kode1>

Følgende måde er den ukorrekte måde at gøre det på :
<kode1><kode2>
Tekst der bliver påvirket af kode 1 OG kode 2
</kode1></kode2>

Altså : Koderne skal afsluttes i MODSAT rækkefølge af hvad de startede. Der sker dog ikke noget hvis man gør det modsatte, men det er en god ting at holde sig til reglen.

Tips :

Når du sidder og koder Html, er det en god ide både at have Notesblok og ens browser åbnet samtidigt. Så kan man gemme engang imellem, og ligesom følge med i hvad det er der sker, det giver også en hurtigere forståelse af hvordan Html fungerer. Man kan også bruge Stone's WebWriter som kan tjekke om der er fejl i koderne.

Uploadning til internetudbyder.

Når ens side er færdig skal den selvfølgelig uploades (lægges ud på internettet), så andre kan besøge den. Dette gøres via et FTP-program, jeg anbefaler WS_FTP LE eller CuteFTP. .

Først og fremmest skal du have downloadet og installeret programmet, du kan downloade det fra Tucows: http://tucows.inet.tele.dk/  

Nu skal du i gang med opsætning af WS_FTP

1. Tryk "New". Skriv f.eks. dit internetudbyders navn under "Profile Name".

    

2. Under "Host Name/Address" skriver du din internetudbyders Hostadresse (ring evt. og spørg din internetudbyder, hvis du ingen anelse har).

    

3. Under "Host Type", lader du den stå på "Automatic detect".

    

4. Under "User ID" skriver du dit Bruger ID (brugernavn), som du også bruger til internettet.
   

    

5. Under "Password" skriver du din adgangskode, som du også bruger til internettet.

    

6. Tryk så "Ok", resten af felterne behøver normalt ikke at udfyldes. Nu skulle programmet gerne ringe op, og tilslutte sig din mappe på din internetudbyders computer (server), hvor du uploader din hjemmeside til.

    

7. Når du er færdig med at uploade din side, skulle den gerne være på internettet på en adresse lignende : http://xxx.internetudbyder.dk/brugernavn/.

    

Den rigtige måde er : filnavn.html (og ikke andre !).

Grunden er at serveren ikke accepterer et lille a og et stort A (eller andre bogstaver !) som det samme bogstav. Så der kan sagtens ligge en fil der hedder : FILNAVN.HTML og en fil der hedder : filnavn.html ved siden af hinanden, og det kan godt skabe forvirring.
Hvis du ikke har en internetudbyder, der tilbyder webplads, kan du prøve et af de steder på nettet, hvor man kan få gratis webplads.

Tilmelding til søgemaskiner/linkssider.

Dette afsnit er først nødvendigt at læse, når du har fået din hjemmeside uploadet.
Når du som sagt har uploadet din hjemmeside, skal den tilmeldes nogle søgemaskiner, så andre kan finde den. Når man tilmelder sin side er det en rigtig god ide at overveje følgende, inden man går i gang :

1. Sidens navn (hvis den har noget).
2. En lille, kort og præcis beskrivelse af din side. Beskrivelsen må normalt max. fylde ca. 20-150 ord.

Her er et par forslag til de mest kendte søgemaskiner.
Du skal se efter et link ved navn 'Tilføj side', Tilføj URL' eller lignende.

1. www.altavista.com
2. www.chart.dk
3. www.edderkoppen.dk
4. www.jubii.dk
5. www.kvasir.dk
6. www.yahoo.dk / www.yahoo.com

Søg evt. efter "Søgemaskiner", på en af ovenstående sider, så skulle der komme flere søgemaskiner frem.

Hvis du en dag surfer på en side, så er det en god ide at lægge mærke til, om der findes en linksside. Hvis der gør, kan man evt. spørge webmasteren om han ikke nok vil linke til din side, hvis du linker til hans.
Hvis du overvejer reklameservice lignende Bannerbyt, Webreklame m.v. så skal du lige tænke på, at besøgende ikke altid får et godt indtryk af ens side, hvis den er overklistret med alle mulige forskellige bannerreklamer. Så hvis du har overvejet ovenstående, så nøjs med højst én bannerreklame, af hensyn til de besøgende.

1. www.danban.dk
2. Muldvarpens's Bannerprogram
3. OutSearch Bannerbyt

Søgerobotter er søgebasernes arbejdsmyrer, der kravler rundt på nettet og indsamler og checker oplysninger om hjemmesidernes indhold.

Hvis du vil vide mere om META koder, så læs dette afsnit. META koder.

Det nødvendige Html-skelet.

Herunder ser du et eksempel på det nødvendige grundskelet.

Html : alle HTML-dokumenter starter med koden <HTML> og slutter med koden </HTML>. Browseren ved så, at alt mellem de to koder skal tolkes som Html-dokument.

Head : hovedsektionen indeholder kun information om dokumentets titel, som vises i browserens øverste blå linie, metatags (mere herom senere) og evt. Javascripts.

Titel :  hjemmesidens titel, det du skriver der, kommer til at stå øverst i titellinien, skriv ikke alt for meget her.

Body : her skriver du selve sidens indhold. Der er tilføjelser til BODY-koden i afsnittet lige nedenunder.

Tilføjelser til BODY-koden (baggrund, tekstfarve m.v.).

Man tilføjer en underkode (en "tilføjelseskode") til en kode på følgende måde :

<BODY underkode1="specefiktion1" underkode2="specefiktion2">.

Der er ingen regler for hvor mange "underkoder" man må tilføje. For hver grundkode, findes der normalt 2 - 6 underkoder. Der findes heller ikke nogen bestemt rækkefølge, bortset fra at grundkoden skal stå forrest. Nogle af underkoderne går nogen gange igen i andre grundkoder.
Måske virker det lidt forvirret, men det er kun lige i starten.

Her er de mest normale underkoder til BODY-koden :

BACKGROUND="filnavn.jpg" Baggrund, man bruger normalt kun JPG- el. GIF-filer til grafik/billeder.

BGCOLOR="Blue" Baggrundsfarve, foregår via farvekoder eller "farvenavne" (på engelsk).

TEXT="Yellow" Tekstfarve, foregår via farvekoder eller "farvenavne" (på engelsk).

Link="Green" Linksfarve, foregår via farvekoder eller "farvenavne" (på engelsk).

VLINK="Gray" Besøgt linksfarve, foregår via farvekoder eller "farvenavne" (på engelsk).

ALINK="Purple" Aktivt linksfarve, foregår via farvekoder eller "farvenavne" (på engelsk).

Her er nogle avancerede underkoder til BODY-koden, som normalt ikke bruges :

BGPROPERTIES="FIXED" Fastlåser baggrunden så den IKKE scroller med.

TOP/LEFT/RIGHTMARGIN="0" Angiver pladsen øverst i dokumentet. Normalt laver browseren automatisk et lille mellemrum.

Et eksempel på en færdig BODY-kode :

<BODY BACKGROUND="filnavn.jpg" TEXT="Red" Link="Green">

Tekst (type, størrelse m.v.).

Tekstfarven har du sikkert allerede bestemt i BODY-koden, men hvis du ønsker flere forskellige tekstfarver, kan det sagtens lade sig gøre.

Tekstkode :<FONT COLOR="Green">Her skriver du teksten der skal være grøn </FONT>

Grundkoden ser således ud : <FONT> Her skriver du teksten der skal påvirkes af TEKST-koden </FONT>

Teksten du skriver uden for TEKST-koden bliver den farve du har valgt i BODY-koden. Standarden er sort.
Til TEKST-koden kan du tilføje følgende underkoder :

COLOR="Green" Tekstfarve, foregår via farvekoder eller "farvenavne" (på engelsk).

SIZE="6" Tekststørrelsen, foregår med tal, prøv dig frem.

FACE="Comic Sans MS" Teksttype, brug KUN windows standardskrifttyper, da brugeren skal have samme skrifttype på sin computer, for at se den ønske skrifttype der bliver brugt på din side.

Hvis du kun ønsker at definere størrelsen kan du nøjes med koden : <HX>Tekst der skal påvirkes af koden</HX>. X er et tal mellem 1 og 6. Her kan du fornemme størrelsen :

Dette er H1

Dette er H2

Dette er H3

Dette er H4

Dette er H5

Dette er H6

Her er et par løse tekstkoder (uden underkoder) :

Bold (fed) skrift = <b>Tekst der skal stå med fed</b> .
Big skrift = <big>Denne tag gør teksten stor</big> .
Small skrift = <small>Denne tag gør teksten lille</small> .
Italic (Kursiv) skrift = <i>Tekst der skal stå med kursiv</i> .
Skrivemaskineskrift= <tt>Tekst der skal stå som Skrivemaskineskrift</tt> .
Understreget tekst = <u>Tekst der skal være understreget</u> .

NB: Pas på med den underskrevet tekst. Underskrevet tekst tolkes ofte som et link.

Billeder (indsættelse, ramme m.v.).

Hvem vil have en side uden billeder/grafik ? Derfor er der selvfølgelig også noget der hedder en BILLEDE-kode :-)
Grundkoden ser således ud : <IMG SRC="billede.jpg">

BILLEDE-koden skal IKKE afsluttes. Her er nogle underkoder :

ALT="Se mit flotte bilede" Hvad der skal stå, når man holder musen over et billede i mere end 2 sek.

WIDTH="200" Bredden, er ikke nødvendig. Angives i pixles.

HIGHT="150" Højden, er ikke nødvendig. Angives i pixles.

BORDER="4" Rammetykkelse, hvis ikke bruges = ingen ramme, hvilket er normalt.

Som sagt, skal billedetypen enten være JPG eller GIF, da alle browsere understøtter disse formater.

NB: Hvis du har et billede der orginalt er 200 * 200 pixles, er det ikke en god ide at "tvinge" det ned til f.eks. 15 * 15 pixles, det er heller ikke godt den anden vej. Billedekvaliteten forringes ved manipulering.

Links (billede/tekst som links m.v.).

Grundkoden for links ser således ud : <A HREF="filnavn.html">Linktekst</A> .

Tilføjelser til linkkoden :

HREF="mailto:din@mailadresse.dk" Maillink, Indsættes i stedet for : <A HREF="filnavn.html">

TARGET="placering" Hvor skal linket åbnes ?

TARGET=" " har følgende underkoder :

• _blank dokumentet åbnes i et nyt, ikke-navngivet vindue
• _self dokumentet åbnes i den aktuelle ramme
• _parent dokumentet åbnes over "moder"-dokumentet
• _top dokumentet åbnes på øverste niveau

Hvis du vil have, at brugeren skal kunne klikke på et billede, for at springe til et andet sted/en anden fil, kan du indsætte BILLEDE-koden der hvor der oprindeligt skulle være linktekst, sådan her :

<A HREF="filnavn.html"><IMAGE SRC="billede.jpg"></A> .

Når du anvender et billede som link, vil browseren naturligt lave en border (ramme) omkring billedet, den kan du fjerne ved at indsætte : BORDER="0" i BILLEDE-koden. Det vil så komme til at se sådan her ud :

<A HREF="filnavn.html"><IMAGE SRC="billede.jpg" BORDER="0"></A> .

Info : Lige for at slå det fast med syvtommer søm er : Et link et "tryk-link", der anvendes som en genvej til et andet Html-dokument, en fil/adresse eller et billede.

Lister (simpel/nummereret).

En liste skal være overskuelig, det gøres på følgende måder::

En prik-liste :

<UL>
<LI>Listens øverste punkt.
<LI>Listens næstøverste punkt.
<LI>Listens tredjeøverste punkt.
</UL>

UL fortæller ens browser, at der kommer u-nummereret liste.

LI fortæller ens browser at der kommer et punkt (prik).

Ovenstående vil resultere i :

• Listens øverste punkt.
• Listens næstøverste punkt.
• Listens tredjeøverste punkt.

<OL>
<LI>Listens punkt 1.
<LI>Listens punkt 2.
<LI>Listens punkt 3.
</OL>

OL fortæller ens browser at der kommer en nummereret liste.

LI fortæller ens browser at der kommer et punkt, i dette tilfælde et nummereret punkt.

Ovenstående vil resultere i :

1. Listens punkt 1.
2. Listens punkt 2.
3. Listens punkt 3.

Der er to tags til brug af lyd. <BGSOUND>-tagget understøttes kun af Microsoft Internet Explorer, men er tilgengæld meget enkelt og nemt at bruge og det kører de fleste filformater.

Den har følgende underkode :

LOOP="3" Bestemmer hvor mange gange lyden skal gentages og kan være et tal eller INFINITE der lader lyden gentages i det uendelige

<BGSOUND SRC="filnavn.mid">

Netscapes lyd-tag hedder <EMBED> og laver en player på skærmen.

Den har følgende underkoder :

WIDTH="145" Breden på playeren.

HEIGHT="61" Højden på playeren.

AUTOSTART="TRUE" Kan være TRUE eller FALSE og bestemmer om playeren skal starte automatisk.

HIDDEN="TRUE" Kan også være TRUE eller FALSE og bestemmer om playeren skal være synlig.

LOOP="TRUE" Kan være TRUE eller FALSE og bestemmer om filen skal gentages i det uendelige.

Eksempel på player med <EMBED>
<EMBED SRC="filnavn.mid" AUTOSTART="FALSE">

When I'm Sixty-four (The Beatles)

Microsoft Internet Explorer understøtter også <EMBED>. <EMBED>-tagget understøtter også de fleste filformater.

OBS! Der er endnu ingen browsere der understøtter det meget brugte mp3-filformat.

Blandet (skillelinjer, specialtegn, placering m.v.).

Nyttige koder :

<BR> = Ny linje. Fungerer i praksis som ENTER-tasten.

<P> = Nyt afsnit. Fungerer som regel som 2 x ENTER-tasten.

Nogle mener at CENTER-koden er ved at uddø, derfor bruger de DIV-koden :

<DIV ALIGN="left/center/right"> Tekst der skal centreres, højre- eller venstrecentreres </DIV>

eksempel på DIV-koden :

Til venstre (left)

I midten (center)

Til højre (right)

Den har følgende underkoder :

ALIGN="left/center/right" Placering af skillelinjen.

SIZE="4" Tykkelsen, bruges normalt ikke (heller ikke på ovenstående skillelinje).

WIDTH="85%" Bredden, angives normalt i procent, men kan også angives i pixles.

COLOR="Red" Farven, hvis den angives forsvinder skyggen (er ikke angivet på ovenstående skillelinje).

NOSHADE = Ingen skygge, indsættes som en normal underkode (anvendes ikke på ovenstående skillelinje).

Specialtegn

Her er hex-farvekoderne (de mest brugte) :

Udover hex-farvekoderne, kan du også bruge de engelske udtryk for farver, som f.eks.black, white, green, red, blue, yellow, o.s.v.

Begge type farvekoder kan anvendes i alle de koder, hvor man kan angive farver.

Tables (simpel opsætning, placering m.v.).

Med tabeller kan du sætte en side op, som du har lyst til. Tabeller bruges til at sætte grafik op ved siden af tekst og til at lave spalter.

<TABLE BORDER="1"></TABLE> Det der ligger imellem disse to tags definerer tabellen. BORDER="1" betyder at der bliver sat ramme af størrelsen "1" rundt omkring tabellen (denne størrelse kan du selv sætte som du har lyst)

<TR></TR> Denne kode laver en række.

<TD></TD> Denne kode laver en kolonne. Det er inden i disse tags at du sætter din tekst og billeder.

<TH></TH> Bruges i stedet for <TD> -tagget og bevirker at teksten inde i cellen bliver fed og centreret.

Både <TABLE>, <TD> og <TH> -tagget understøtter WIDTH-attributten i procent.

Her er et eksempel:

<TABLE WIDTH="90%" BORDER="1">
<TR>
<TH WIDTH=40%>Titel 1</TH>
<TH WIDTH=60%>Titel 2</TH>
</TR>
<TR>
<TD>Felt 1</TD>
<TD>Felt 2</TD>
</TR>
<TR>
<TD>Felt 3</TD>
<TD>Felt 4</TD>
</TR>
</TABLE>

Her er et eksempel:

<TABLE WIDTH=90% BORDER=1 CELLSPACING=4>
<TR>
<TH WIDTH=40% COLSPAN=2>Titel 1 og 2</TH>
</TR>
<TR>
<TD ROWSPAN=2>Felt 1 og 3</TD>
<TD WIDTH=60%>Felt 2</TD>
</TR>
<TR>
<TD>Felt 4</TD>
</TR>
</TABLE>

Her er et eksempel:

<TABLE WIDTH=90% BORDER=0 CELLSPACING=0>
<TR>
<TH WIDTH=40% COLSPAN=2 BGCOLOR=#FF0000>Titel 1 og 2</TH>
</TR>
<TR>
<TD ROWSPAN=2 BGCOLOR=#C0C0C0>Felt 1 og 3</TD>
<TD WIDTH=60% BGCOLOR=#0000FF>Felt 2</TD>
</TR>
<TR>
<TD BGCOLOR=#00FFFF>Felt 4</TD>
</TR>
</TABLE>

Rowspan og colspan er nyttige hjælpemidler til at designe en tabel. F. eks. sådan en her:

Frames. Du ser dem overalt.
Det frames oftest blive brugt til, er at lave en menu i siden, der kontrollerer hjemmesiden:

Frames gør ikke en dårlig hjemmeside god, den gør den bare overskuelig, men frames kan 
bruges på mange kreative måder:

Efterlyst (www.efterlyst.dk)

Frames, frames, frames. Lad os sige at du gerne vil have en menu på din hjemmeside. Du har de sider menuen skal skifte i mellem, de hedder velkommen.html, links.html og email.html.
Så skal du lave menuen. Den skal også laves som en separat hjemmeside, f. eks.: menu.html

Som du måske kan regne ud, angiver man med TARGET hvilken frame den side man har lavet et hyperlink til, skal vises i.
Jeg valgt at kalde frame for "side", men man bestemmer selv benævnelsen.

Nu skal selve frame-dokumentet laves:

Her er de mest brugte underkoder til FRAMESET-koden :

COLS="20%,*" Laver et antal spalter (lodret) med den bredde du angiver. Du adskiller dem med kommaer, og du kan angive bredden i enten pixels, procent eller med en * (som så betyder 'resten').
F. eks. vil COLS="20%, 300, *" give en frame der fylder 20% af vinduet, en der er 300 pixels bred, og en der fylder resten.

ROWS="*,20" Det samme som ovenover, her er det blot vandrette rækker der laves.

FRAMEBORDER="0" Angiver om der skal være ramme mellem éns frames. Kan være true eller false, 1 eller 0, yes eller no.

FRAMESPACING="0" Angiver hvor meget mellemrum der skal være i mellem éns frames.

Her er de mest brugte underkoder til FRAME-koden :

SRC="start.html" Her angiver du hvilket html-dokument browseren skal bruge.

NAME="side" Her giver du framen et navn. Det er vigtigt, hvis den skal kunne ændre indhold via en menu der bruger TARGET.

NORESIZE Hvis du medtager dette parameter, vil brugeren ikke kunne gøre dine frames større eller mindre. Praktisk, da det ofte ændrer indholdet drastisk i en negativ retning.

SCROLLING="auto" Angiver om der skal være et rullepanel i højre side. Kan være yes, no eller auto. Vælger du auto fremkommer der et rullepanel hvis der er brug for det.

MARGINHEIGHT og MARGINWIDTH Angiver hvor langt der skal være fra toppen og fra venstre af framens kanter til dens indhold.
F. eks. MARGINHEIGHT="5" MARGINGWIDTH="10".

Det sidste omkring frames, er taggen NOFRAMES.
Her kan du skrive lige hvad du vil, ja du kan skrive en hel hjemmeside, hvis du har lyst. Det vigtigste med <NOFRAMES> er, at indholdet kun fremkommer i en browser, der er så gammel, at den ikke kender til frames. Så vil den vise indholdet af <NOFRAMES>.
Forklaringen er, at browsere ikke bare er bagud-kompatible, de er også fremad-kompatible, hvilket vil sige, at hvis de kommer til en tag de ikke kender, så viser de ikke en fejlmeddelelse, de springer dem simpelthen over, indtil de kommer til noget, de kender. I dette tilfælde indeholdet af <NOFRAMES>.

Fordele og ulemper ved frames (bør læses).

Fordele:

 

• Hurtig og nem navigation på webstedet.
• Personen der skal konstruere webstedet undgår unødigt arbejde.
• Webstedet fylder mindre fordi koden kun skal optræde èn gang.
• Sikrer et sammenhængende design.
• Giver en nem mulighed for at vise søgekriterier sammen med resultatet.
• Nedsætter access-tiden (tilgangstiden), da det normalt kun er HTML-dokumenter i den ene ramme, som udskiftes ved link eller søgninger.
  Indholdet i øvrige rammer bevares.
  
  Ulemper:

   

• Udskrivning af et enkelt HTML-dokument er lidt mere kompliceret.
• Da bogmærker/favoritter kun kan indeholde én URL, kan du ikke bogmærke en specifik kombination af rammer.
• Nogle (ældre) browsere understøtter ikke frames (rammer).

Her skal du placerer din Javascript kode:

Der er dog også nogle scripts der skal placeres i BODY-sektionen her er f.eks. et:
Hvis du er doven (hvem er ikke det?), så brug dette Javascript til automatisk at angive, hvornår siden sidst blev opdateret: Se JavaScript kode.

Denne side er opdateret Mandag d. 5 Februar 2001

Stylesheed / CSS(Cascading Style Sheets).

Style er en ny standart som blev indført fra browserversion 3.2, men her var det ikke specielt godt. Nu har de fleste browsere fuld understøttelse af Stylesheed (Bl.a. IE 4.0 og NS 4.0). Style bruges til at definere en masse HTML kode meget hurtigere end det før var muligt.

Du kan lave

NYE

fede

ting med

STYLESHEETS

Nej, ovenstående er ikke et billede. Prøv at holde musen hen over teksten. Den vil blive til en markør. Prøv nu at markere teksten og kopiere den ind i Notesblok. Hvad sagde jeg, det er tekst!

Det fulde navn for et stylesheet er Cascading Style Sheet, og de kan kort forvandle din kedelige tekst på hjemmesiden til noget der lige pludselig er interessant at se på.
Man kan sige at stylesheets på en måde er en videreudvikling af <FONT>, men det ville alligevel være en stor underdrivelse af stylesheets evner. De kan nogle ting som <FONT> også kunne, nemlig at ændre skriftens type, størrelse og farve, men de kan meget mere end det.

Stylesheets kan enten integreres i selve HTML-dokumentet, eller de kan laves i en separat fil med endelsen .css. (virker kun i IE 4.0 eller nyere).
F. eks. bruger dette dokument en separat stylesheet-fil, nemlig style.css, og man kalder stylesheet-filen ved at placere denne linie i HTML-dokumentets <HEAD>:
<LINK REL="stylesheet" HREF="style.css" TYPE="text/css"> Man udskifter selvfølgelig filen i HREF med sin egen.

Her får du blot en lille smagsprøve på de funktioner der er i CSS.

Når du laver CSS til en enkelt hjemmeside, er det mest hensigtsmæssige nok at integrere det i HTML-dokumentet, i <HEAD>.

Du starter med at skrive:

Hvor TAG er den tag du ønsker at definere, og parametre er et af de følgende:

• font-family - den skrifttype du ønsker. F. eks. font-family: Verdana, Arial, Helvetica
• font-size - den størrelse skriften skal have. F. eks. font-size: 36
• font-weight - hvor fed teksten skal være. Valgmulighederne er: normal, bold.
• font-style - 2 muligheder: normal, italic (kursiv).
• text-decoration - 5 forskellige muligheder: none, underline, overline, line-through eller blink.
• color - en hvilken som helt farve. F. eks. color: red.
• background - elementets baggrundsfarve. F. eks. background: beige.
• text-align - venstre-justeret, højre-justeret, centreret eller justeret. left, right, center eller justify.
• margin-left - hvor langt skal der være fra browserens venstre kant til elementet. Negative værdier kan også bruges. F. eks. margin-left:-50.
• margin-right - Samme som ovenfor, blot fra browserens højre kant.
• margin-top - Samme som ovenfor, blot fra browserens øverste kant.
• margin-bottom - Samme som ovenfor, blot fra browserens nederste kant.

Og lad os få nogle eksempler:

Du vil gerne lave en rød overskrift, med skrift-størrelse 50 og Courier New som skrifttype.
Du skriver:

Og du får resultatet:

Sæt nu, at du vil have to forskellige <H1>'ere. Så laver du en klasse til hver af dem.
Du skriver:

<STYLE TYPE="text/css">

H1.klasse1 {color:red; font-size:50; font-family:Courier}
H1.klasse2 {color:balck; font-size:30; font-family:Arial}

</STYLE>

<H1 class="klasse1">Min første overskrift</H1>
<H1 class="klasse1">Min anden overskrift</H1>

Smarte link's

Link er som regel lidt kedelige at se på. Her vil jeg vise dig, hvordan du fjerner understregningen, og får dem til at skifte farve (Kun IE 4.0) når musen er over dem.
Du skriver:

<STYLE TYPE="text/css">

A:HOVER {color:red;}
A:LINK {text-decoration: none;}
A:VISITED {text-decoration: none;}

</STYLE>

Link til toppen

eller du kan skrive nedenstående, hvis du vil have flere farver og størrelser.

<A STYLE="color:#008000; text-decoration:none; font-size: 22;" href="#top">Link til toppen</a>

Link til toppen

Lad os tage et eksempel til:

<TABLE WIDTH=450 CELLSPACING=20><TR>
<TD WIDTH=225 STYLE="text-align:justify">
<SPAN STYLE="font-size:30">D</SPAN>Der var engang en rig og mægtig konge, der hed Salomon. Hans rigdom var uden grænser, uendelig stor. Hans visdom var vidt besunget over hele jorden, og fra hele verden kom mennesker for at spørge Salomon til råds. Han forfattede mange ordsprog, af hvilke vi den dag i dag høster inspiration til vores sprog.</TD>
<TD WIDTH=225 STYLE="text-align:justify">
På et tidspunkt i sit liv besluttede Salomon sig til, at han ville prøve alt! Han havde pengene og magten til at gøre de vildeste ting, et menneske kan udtænke af egen kraft, og han gjorde det. Han havde blandt andet 1000 koner (dermed også l000 svigermødre - dyb krise).</TD>
</TR></TABLE>

Her er en masse nye ting med. Bemærk især STYLE="..." og <SPAN>.

Med STYLE kan man definere en tags CSS inde i selve taggen, som du kan se i HTML-dokumentet ovenfor. Men i stedet for <TD WIDTH=200 STYLE="text-align:justify"> kunne du jo bare have skrevet <TD WIDTH=200 {text-align:justify}>.

<SPAN> er en tag udviklet specielt til CSS. I sig selv har den ingen funktion, hvis du bare skriver <SPAN>Velkommen</SPAN>, ville der bare stå Velkommen, ligesom der også ville have gjort uden <SPAN>. Det smarte ved <SPAN> er at du i den kan bruge STYLE="...". Du kan også kalde en klasse fra den.
Nært beslægtet med <SPAN> er <DIV>. Den eneste forskel jeg har kunnet finde i mellem dem, er at <DIV> laver ny linie, hvilket <SPAN> ikke gør. Men der er sikkert også andre forskelle.

Imagemaps (billeder som menuer).

Herunder ser du et eksempel på hvordan man bruger et billede som nenu.

Du er inde på et klik bart område, det har dog ingen funktion.

Her er så koden:

Her er nogle af Imagemaps koder :

IMG SRC="menu.gif" USEMAP="#panel" BORDER=0 Først indsættes et billede og det navngives med USEMAP

MAP NAME="panel" Startkode for Imagemaps.

AREA SHAPE=RECT COORDS"1,1,149,22" SHAPE kan være RECT (rektangel), CIRCLE (cirkel) eller POLY (mangekantet). Området defineres med tal kordinater.

Det er dog langt nemmere at bruge et imagemaps-program, hvis du ønsker en billedmenu. Programmet CoffeeCup Image Mapper vil jeg personligt anbefale, men andre programmer kan selvfølgelig være lige så gode.

Forms (inputfelter, opsætning m.v.).

Herunder ser du et eksempel på koden til en formular.
Dette eksempel er til Cybercity brugere.

For at få FormMail til at virke, skal den starte med denne kode :

<FORM METHOD="GET" ACTION="/cgi-bin/FormMail.cgi"> Definer formular. (URL) Cybercity.

<FORM NAME="form" METHOD="post" ACTION="/cgi-bin/formmail"> Definer formular. (URL) Get2net.

METHOD="GET" Kan være GET eller POST

INPUT TYPE="hidden" Inddateringsfelt. Kan være TEXT, PASSWORD, CHECKBOX, RADIO, IMAGE, HIDDEN, BUTTON, SUBMIT, RESET.

INPUT NAME="email" Feltnavn. F.eks. email, tillader brugeren at specificere deres egen email addresse.

INPUT VALUE="*****" Feltværdi. F.eks. http:// er en forvalgt værdi. 

INPUT SIZE="40" Felternes længde i tegn.

INPUT MAXLENGTH="40" Max antal tegn i feltet.

Der er ingen slutkode til input.

TEXTAREA ROWS=25 COLS=8 Tekstboks med højde og bredde.

Nødvendige Form Fields:

Der er et formfield du skal have i din form, for at FormMail skal virke korrekt. Det kaldes recipient. Dette form field tillader dig at specificere hvem resultaterne skal mailes til. Du vil højst sandsynligt have denne værdi skjult.
F.eks.:

<INPUT TYPE="hidden" NAME="recipient" VALUE="email@din.host.dk">

META koder eller META tags, som de kaldes på engelsk, er små uforståelige koder i toppen af dit HTML dokument. Hvis du aldrig har kigget i din HTML kode, har du heller aldrig set dem eller skænket dem en tanke. META koderne kan ikke ses, med en almindelig browser. META koderne er lavet for kunne angive forskellige andre informationer om bl.a. ophavsrettigheder, forfatter, opdateringsfrekvens, udgivelsesdato osv. META koderne bruges hovedsagelig af mange søgemaskiner, de bruger dog som regel kun to ud af de mange META koder, der er tilgængelige, nemlig: META DESCRIPTION og META KEYWORDS. Som kodernes navn antyder, er det sidens beskrivelse og sidens nøgleord. I disse to koder kan du således angive en tekst, som du vil have at søgemaskinerne bruger som beskrivelse og som nøgleord.

Du starter med at skrive:

Forklaring på nogle META koder :

NAME="Description" CONTENT="HTML-kursus." Det er den tekst, som beskriver dit websted, f.eks. Besøg min hjemmeside, hvor du kan få et HTML-kursus.

NAME="Author" CONTENT="Pc-hjaelpen.dk" Det er navnet på forfatteren til webstedet.

NAME="Generator" CONTENT="Stone's WebWriter 3" Det er navnet på den HTML-editor, som du anvender, f.eks. Stone's WebWriter 3

NAME="Rating" CONTENT="General" Det er klassificering af webstedet, f.eks. General

NAME="Keywords" CONTENT="nøgleord1, nøgleord2, osv." Det er de nøgleord, som er relevante for dit website. Nøgleordene er de ord, som siden især vil blive indekseret under, f.eks. html, java, javascript, design, webdesign, tips, tricks.

NAME="Objecttype" CONTENT="Homepage" Det er forklaring på hvad type dit website er, f.eks. Homepage

NAME="Reply-to" CONTENT="email@din.host.dk" Det er e-mail adressen til forfatteren.

NAME="Title" CONTENT="Pc-hjælpens Homepage " Det er titlen på webstedet eller siden, f.eks. Pc-hjælpens Hjemmeside

NAME="Robots" CONTENT="Index" Værdien Index oplyser til søgerobotter, at den aktuelle html-side skal indekseres.

NAME="Robots" CONTENT="Noindex" Værdien Noindex oplyser til søgerobotter, at den aktuelle html-side ikke skal indekseres.

NAME="Robots" CONTENT="Follow" Værdien Follow oplyser til søgerobotter, at alle underliggende sider gerne må indekseres.

NAME="Robots" CONTENT="Nofollow" Værdien Nofollow oplyser til søgerobotter, at alle underliggende sider ikke skal indekseres.

NAME="Robots" CONTENT="All" Værdien All oplyser til søgerobotter, at alt må indekseres.

NAME="Robots" CONTENT="None" Værdien None oplyser til søgerobotter, at intet skal indekseres.

Alle META koder skal placeres i HEAD-sektionen (mellem <HEAD> og </HEAD> øverst på siden):

Hvis du vil vide mere, så besøg A Webmaster's Guide To Search Engines, som er et godt udgangspunkt, hvis du vil vide alt om søgemaskiner, herunder hvordan de fungerer og indekserer.