Jeg er hverken grafisk designer eller har særligt dybtgående erfaring med, at lave hjemmesider. Alligevel kaster jeg mig ud i tema om hjemmeside design. Andre har lavet bedre hjemmesider.

Afsnittet er primært lavet fordi jeg arbejder lidt med det i øjeblikket, og dels fordi det vil give mig påskud for, at eksperimentere med forskellige aspekter af web-design. Samtidig forsøger jeg, at lære mere. Så en fremstilling kan være et led i min egen læringsproces.

Design er jo et spørgsmål om smag og øjet der ser. Alligevel er der nogle tekniske færdigheder og lidt know how der skal være på plads inden man kan lave en hjemmeside.

Efterhånden som man lærer nye færdigheder udvides mulighederne for, at præsentere de ideer man har på nettet på en pæn og overskuelig måde. Hermed er intet sagt om min side. Der er dels det rent grafiske indtryk og spørgsmålet om navigationen på hjemmesiden

Hjemmesider bygges op i et kodesprog - HTML. 
Man skal altså i princippet kunne skrive i HTML. Man kunne i teorien klare sig med simpel tekst editor som f.eks. Notesblok - og en browser når man skal lave en hjemmeside.

HTML (Hyper Text Markup Languange) blev udviklet på Cern i 1991, men er senere blevet videreudviklet. Koden består af de såkaldte "tags". Indsættelse af en kode eller et format begynder med <""> og slutter med</"">. På denne vis:

<html>

<head> <title>""</title> </head>

<body></body>

</html>

Ovenstående viser strukturen for websider. I "Hovedet" står information, som ikke er synligt i det egentlige web-dokument. "Kroppen" udgør det synlige web-dokument.

Ud over de grundliggende koder kan man tilføje yderligere egenskaber ved hjælp at attributter. Herudover findes der koder for specialtegn. Ikke at jeg vil gøre meget ud af HTML.

Man kan finde en del om emnet, dels er der udgivet litteratur, og der findes ressourcer på den nettet. Klik her for, at få en oversigt over nogle af de mest benyttede HTML-koder.. Se i øvrigt også angivne links og ressourcer nederst på siden.

Det er et møjsommeligt arbejde, at skulle bygge sine sider op fra en teksteditor med, at skrive HTML koder. Ulempen ved en sådan fremfærd er, at det kan være vanskeligt, at bevare overblikket over hvordan det faktisk tager sig ud i en browser.

Der er udgivet HTML editorer som kan indsætte koden i ens web-dokument, hvilket giver nemmere og mere sikker generering af koder.

Et eksempel på en sådan editor er Stones Webwriter. Den er endda gratis til personlig brug. En anden type editorer er editorer af typen WYSIWYG (What you see is what you get). I disse editorer kan man arbejde med Websiderne direkte, som det tager sig ud i en browser. Ulempen er, at man ikke har så meget kontrol over hvad der sker med koderne. Men man kan komme langt uden, at kunne den mindste smule HTML. Det er dog en fordel, hvis man kender noget til HTML eller det mindste til syntaksen i sproget, så man kan rette i koderne hvis man skulle få behov for det. Har man brug for en specifik kode har man mulighed for, at slå den op hvis man ikke kan den i forvejen.

HTML er velegnet til, at angive et dokuments struktur. Imidlertid er der sket en videre udvikling. For kontrol af layout op præsentation har World Wide Web Consortium (W3C) udviklet en standard. Her kan de såkaldte Cascading Style Sheets (forkortet CSS) anvendes til styring af typografi og layout.

Ind til videre har jeg kun opbygget et par sider og nogle menuer med css.

På html.dk betegnes HTML som et struktursprog, hvorimod css betegnes som et layout- sprog. Når man laver hjemmeside med HTML er man i reglen nødt til at styre sidens layout med brug af tabeller.

Det har sine ulemper. Her byder css på mulighed for at lave sider helt uden brug af tabeller. Placeringen af tekst og grafikelementer kan styres meget præcist med css uden brug af tabeller. Man kan endvidere lave layers med css som kan bruges til layout i 3D

Til gengæld kommer man ikke uden om, at skulle skrive koder i hånden i notesblok

Css har en anden stor fordel. Man kan lave stilark på sin side

Opsætning af marginer, farve mv. kan med et enkelt css dokument bestemmes for hele siden eller flere undersider. Dette er illustreret i nedenstående figur

Med Cascading Style Sheets kan man med et css dokument styre typografi og layout for flere sider eller undersider
ruder 10
ruder knægt
ruder dame
ruder konge
ruder es
Med Css kan man lave layout i 3D
Ved hjælp af HTML koderne kan man skabe links dels til sider der placeret på andre web-servere, og dels til undersider på ens egen side. Jeg vil ikke gøre så meget ud af links her, men koncentrere mig om navigationen inden for siden. Principperne er i stor udstrækning de samme

En hjemmeside kan hurtigt blive en lidt rodet affære hvis navigationen ikke fungerer nogenlunde enkelt. Specielt hvis man som en amatør som mig ikke starter med et klart koncept, men bygger på efterhånden, som man får nye ideer. 

En meget benyttet metode, at gøre navigationen mere enkel er den såkaldte lineære navigation, som er illustreret ved nedenstående figur

Den såkaldte lineære navigation er en metode til, at gøre navigationen på et websted nemmere.
Rammesider kan være en hjælp i bestræbelserne på at skabe en forholdsvis lineær navigation. En rammeside er en webside som bestemmer egenskaberne for selve rammesiden. Inde i rammerne kan man have selvstændige websider. 

På figuren til højre har jeg vist en side der er bygget op af 2 rammer. I dette eksempel foregår navigationen fra rammen med navnet "left" mens sideindholdet skifter i rammen med navnet "right".

Følgende HTML kode kan være nyttig når man skal styre navigationen på rammesider

<A Href="URL" target="frame name">

 

 

Eks. Vil man f.eks. linke til sin underside "fritid.html" og have rammen med navnet "right" som destinations ramme vil linket kunne tage sig sådan ud:

Ved brug af rammesider kan man styre naviga-tionen med hhv. en side med menuer og en side med indhold i "målrammen"
 


<A Href="fritid.html" target="right" > link til fritid</A>

Andre nyttige koder i forbindelse med navigationen er

< A Href="URL" target="_blank">

der åbner siden man har linket til i et nyt vindue

<A Href="URL" target="_self"> 

der åbner linket i samme ramme

<A Href="URL" target="_parent">

åbner linket i den overordnede ramme/"moderramme"

Brugen af rammesider har dog også sine ulemper. Flere steder har jeg set anbefalinger af, at rammesider bør undgås..

Det står jo enhver frit for, at lave en hjemmeside om det de ønsker. Mange private hjemmesider handler om personlige interesser, men det kunne ligeså godt være en side med et fagligt indhold. Mulighederne står åbne.

På siden skal man så have placeret sit indhold i form af formateret tekst og brødtekst.

Billeder kan være med til, at skabe indhold på siden. Et gammelt kinesisk ordsprog siger jo, at et billede fortæller mere end 1000 ord.

Der er 2 billedformater som anvendes meget i forbindelse med hjemmesider. Den ene type er JPG eller JPEG (Joint Photographic Experts Group). Dette format kan komprimeres relativt meget uden for stort tab af billedinformation. Man må finde en balance mellem billedets filstørrelse og dermed den tid det vil tage, at loade det på den ene side og billedkvalitet på den anden side..

Det andet billedformat som anvendes meget er GIF (Graphics Interchange Format). Modsat JPG er GIF begrænset til 256 farver. Til gengæld kan GIF billeder have gennemsigtig baggrund, og kan bestå af en serie af billeder. Man kan udnytte dette til, at lave animationer.

Hvad angår billeder og GIF animationer, så betyder flere af disse dels forbrug af plads på serveren og, at siderne bliver tungere, at indlæse.

Flere internetudbydere tilbyder en vis mænge plads på deres servere i forbindelse med abonnementet f.eks. 10 MB, som jeg en gang havde. Billeder fylder relativt meget mere end tekst så man må gå på kompromis med antal og opløsning Man kan dog mod et beskedent beløb få mere plads på en server f.eks. 100 MB eller mere. Men billeder tager stadig tid, at overføre til de besøgendes computere, og det kan være et problem for nogen med mindre båndbredde på deres forbindelse.

Man kan vælge, at lave thumbnails for, at spare de besøgende for, at skulle indlæse et stort billede. Man kan angive en alternativ tekst ved indsættelse af et billede, som den besøgende kan se hvis billedet ikke bliver indlæst eller indlæsning fravælges.

eks  

<IMG SRC="guitar.jpg" ALT="Dette er et billede af min guitar">

Man bør i princippet gøre det. Jeg har dog selv forsømt det på min side.

Der kan naturligvis siges meget mere om arbejde med tekst og grafik på Web. Jeg er dog nødt til, at begrænse fremstillingen. Jeg henviser til de angivne ressourcer nederst på siden. Hvad angår grafik og animationer er det op til den enkelte, at finde en balance. Nogen finder, at overdreven brug af f.eks. animationer er dårlig smag. Nogen vil måske synes det har taget overhånd på min side. Smag og behag er jo forskellig. Det at lave en hjemmeside er jo ofte et spørgsmål om, at eksperimentere.

Man kan også lægge baggrundslyd på sin hjemmeside. Det kan gøres med koden <BGSOUND SRC="lydfil">.. Fil formatet kan være *.au, *.midi, real audio, eller*. wav. Flere formater kunne nævnes for andre platforme end Windows. På anden vis kan man linke til lydfiler der lagt ud på siden.

Filmklip er en anden mulighed. Men hvor pladsforbrug og loadtider kan være et problem med billeder er dette problem endnu større med film. Formatet kan være *.avi,*. mpeg, quicktime, eller realvideo. Jeg vil ikke gøre mere ud af det her. Det har ikke været aktuelt for mig, at lægge den slags på nettet. Økonomisering med pladsen, og hensynet til den tid det vil tage, at hente film ned spiller her en rolle for de fleste. Lægger man den slags ud bør man som minimum angive størrelse på filerne, så besøgende kan se hvor lang tid det vil tage, at hente hjem.

Der findes en del kode af forskellig slags man kan hente hjem og anvende. En del ligger frit tilgængeligt på nettet.

Java er et programmeringssprog som anvendes mange steder på nettet. Der findes både egentlig Java programmering og et scripttingsprog. 

Mange steder ligger JavaScripts tilgængelige på nettet. JavaScripts er et scripttingsprog som indlejres direkte i HTML koden. Flere steder på min side har jeg anvendt JavaScripts f.eks. i adgangsbegrænsningen til mit fotoalbum. Det kan være en god ide, at kigge kildekoden efter, når man vil anvende et JavaScript. Det er ikke altid, hele koden vises på den webside hvor man henter dem.

Java Applets er også noget som ligger frit tilgængeligt flere steder. Og nogle Applets kan man købe. Ved Java Applets henter man et lille Java program ,som man kan placere sammen med sine HTML filer på serveren. Det er ofte filer af typen *.jar eller *.class. Oftest følger en kode med, som man kan sætte ind i HTML koden, hvor man ønsker Appletten placeret. Koden til Appletten indeholder nogle parametre, som man kan indstille på. En beskrivelse af indstillingerne for følger i reglen med i en tekst fil. Usignerede Java applets kan dog ikke længere anvendes uden videre og efterhånden er brugen af Java på private sider svindende. Jeg vil ikke gøre mere ud af Java her, men henviser til sektionen herom

JavaScripts erstatter i vist omfang CGI - Scripts. Også kode for anvendelse af CGI Scripts ligger tilgængelige på nettet. Det kan f.eks. dreje sig om besøgstællere, gæstebøger, formmail og mere. Jeg vil blot gøre opmærksom på muligheden, og ikke gøre mere ud af det her.

Endvidere er der muligheden for, at anvende Flash på siden. Med Flash kan man lave animation og det er også muligt, at lave egentlig programmering. Brugen er Flash er blevet mere udbredt. I skrivende stund er min viden om Flash begrænset. Jeg henviser til sektionen herom, hvor jeg foretager mine første eksperimenter med Flash.

Herudover eksisterer der en række muligheder for oprettelse af dynamiske hjemmesider med programmering i ASP, PHP og XHTML og anvendelse af SQL i forbindelse med databaser på et site. Dette vil jeg afgrænse mig fra, at komme ind på af den simple grund, at min viden om disse emner er sparsom. Der henvises til ressourcerne der angivet i sektionen "JavaScripts"

Når siden skal på nettet

Når man er klar til det skal siden uploades. Der findes flere programmer der kan anvendes til formålet. Cute FTP og WS_FTP kunne her nævnes. Når man skal uploade, har man brug for, at kende Profil navn. Serveradresse/brugermappe, BrugerID og i reglen også et password. Udbyderne af hjemmesideplads lægger i reglen information ud om procedurerne for uploadning.

Følgende bøger kan anbefales: Hjemmesidebogen, Jesper Ek, IDG forlag 2001

Følgende Links kan anbefales

Libris - det tidligere IDG forlag

Tutorial til HTML på HTML.net

Tutorial til css på HTML.net

Tutorial til html og css på HTML.com

World Wide Web Consortium (W3C)

Knowware: