Forside
Tutorials
Kommende
HTML tags
Programmer
LAERHTML.dk

Projekt 1 - tutorial 4

I denne del af projektet vil jeg gennemgå de nødvendige ting for at kunne udgive din første hjemmeside på nettet.

Jeg vil først og fremmest give dig et overblik over hvad der er din hjemmeside (hvilke filer og mapper) og hvad du har brug for så du kan lægge den på en server så den kan ses af resten af verden.

Derudover vil jeg give dig nogle tips til hvordan andre brugere af din hjemmeside ser den.

Indhold:
  1. Få styr på filerne
  2. Udgivelse af hjemmesiden
    1. Mulighed 1, privat hosting
    2. Mulighed 2, webhotel
    3. Mulighed 3, Dropbox
  3. Sidste overvejelser

Resultat

Det er sådan set ikke noget html-orienteret resultat i dette afsnit. Så hjemmeside resultatet et er det samme som i 3. del af projektet, så kig i Struktur hvis du mener der mangler noget, for der kommer ikke mere html i denne del af projektet.

Få styr på filerne

I tutorial 1 fik I at vide, at I skulle oprette en ny fil og kalde den index.htm.  Grunden til dette er fordi serveren som hjemmesiden ligger på, skal have et udgangspunkt for at åbne den korrekte fil når den “kigger” i en ny mappe. På langt de fleste servere vil det være index.htm, at serveren kigger først efter. Hvis den ikke finder denne fil, eller en af de andre “start-filer”, vil der ikke blive vist en hjemmeside, men derimod en fejlmeddelse.

Herunder kan I se en liste over nogle typiske navne til jeres start-fil. Dog er I stort set altid sikre med index.htm.

  1. index.htm
  2. index.html
  3. default.htm

Hvis I selv har fuld kontrol over server indstillingerne, er det muligt at kalde din start-fil noget andet, men det vil jeg ikke komme ind på her.


Start-filen kan ende på andet end htm eller html. Det er oftest hvis man laver hjemmesiden i et eller andet server-side sprog, som f.eks. ASP eller PHP. Så vil start-filen oftest hedde default.asp eller index.php.


Når jeg snakker om at serveren kigger i en mappe efter filer, så er det fordi det er godt at forestille sig sin hjemmeside, som en mappe fyldt med filer og andre mapper. Som I også gjorde tidligere i dette projekt, oprettede i flere filer i den samme mappe og lavede også undermapper.

Herunder kan I se en illustration af mappeopbygningen i vores første hjemmesideprojekt.

Når I laver links, menuer, indsætter billeder og på anden måde henviser til filer eller mapper på jeres hjemmeside, så sørg for at det er præcis det samme filnavn/mappenavn I anvender. Nogle browsere/servere kan have problemer med f.eks. at finde et billede hvis det er navngivet en lille smugle anderledes i koden, som den er navngivet på computeren. Hvis jeg nu indsatte billede på hjemmesiden på følgende måde:

<img src="billeder/Ny1_Lille.jpg" alt="Flot udsigt over NY" />

Så kan jeg ikke være sikker på at alle browsere/servere viser billedet, da der er nogle store bogstaver i filnavnet i koden, men på computeren er alle bogstaver små.

Desuden bryder nogle udenlandske browsere og servere sig ikke om danske specialtegn, som f.eks. æøå, så det er en god ide at holde sig fra disse når I navngiver filer og billeder.

Derudover bør man også holde sig fra mellemrum og specialtegn i filnavne og mappenavne.


Nu har vi klargjort vores hjemmesidefiler til at blive uploadet til en server. I den næste sektion vil jeg gennemgå de forskellige muligheder du har for at dele din nye hjemmeside med resten af verden.

Udgivelse af hjemmesiden

I denne sektion, skal vi til at overveje hvor din hjemmeside skal ligge, hvor nemt skal det være for andre at finde den og hvor meget det må koste.

Mulighed 1, privat hosting

Du kan have din hjemmeside liggende på din computer derhjemme. Det kræver blandt andet at du har fast IP fra din internet udbyder. Derudover kræver det en masse server opsætning og viden om sikkerhed, backup og DNS.

Selve det at køre din egen ‘host’ / dit eget ‘webhotel’ er forholdsvis kompliceret for en helt nybegynder, så hvis det er første gang du arbejder med hjemmesider, domæner og DNS, så vil jeg ikke anbefale denne løsning. Men fortvivl ej, der er andre lettere, mere praktiske og billigere løsninger.

Mulighed 2, webhotel (Den anbefalede)

Du har også muligheden for at købe plads på et webhotel. Et webhotel er en service, som tilbyder ‘plads’ på nettet. Afhængigt af hvilket webhotel man vælger, får man mange forskellige ekstra services. F.eks. får man tit en e-mail server med i prisen, så man kan lave sine egne mail-adresser.

Du kan finde et webhotel på www.webhostpriser.dk . Her har du mulighed for at finde præcis det webhotel der passer dig bedst. Der findes mange forskellige webhoteller, så inden du køber plads, så tjek dem ud med google.


Der er mange variationer af support, services, priser, plads, mail-konti og servertyper, så gå ikke bare ud og køb det første og det dyreste. F.eks. hvis du bare laver en almindelig HTML hjemmeside (som vi har gjort i dette projekt), så behøver du ikke support af ASP, php, MySQL eller CGI.


Når du køber plads på et webhotel skal du være opmærksom på prisen. Typisk er prisen opgivet i priser pr. måned, men man betaler typisk for et helt år ad gangen. Desuden er der typisk også et oprettelsesgebyr. Derudover er prisen for dit domæne typisk ikke med. Prisen for et .dk  domæne er i skrivende stund 45 kr om året. De 45 kr er udelukkende en administrationsafgift, som betales til DK-hostmaster, så ud over retten til et .dk  domæne i et år, får du ikke noget de 45 kr. Det vil altså sige at hvis du køber et webhotel, vil regnestykket typisk se således ud:

45 kr (.dk domæne i et år) + 12 x (prisen pr. måned) + (oprettelsesgebyr)


Oprettelsen af et webhotel + et .dk domæne, vil cirka tage et par dage, afhængigt af hvor man bestiller denne service. Dette tager blandt andet så lang tid fordi der er to virksomheder som skal oprette dig som kunde og have opsat deres servere, DNS forbindelser og indstillinger efter dine ønsker. De to virksomheder er DK-hostmaster, som står for at administrere alle .dk domæner og dit webhotel.


Jeg kan desværre ikke give dig en komplet guide i hvordan selve bestillingen af et webhotel + et domæne foregår, eftersom det er forskelligt fra udbyder til udbyder, men jeg kan komme med en generel beskrivelse.

På langt de fleste webhotellers hjemmeside starter bestillingen af et webhotel og domæne, med at du søger efter et ledigt domæne. Der er typisk en søge-bar hvor du indtaster det domænenavn du kunne tænkte dig. Hvis det du ønsker dig ikke er ledigt, så vælg et andet. Når du har fundet et der er ledigt kunne næste skridt være at indtaste personlige informationer. Derefter skulle man gerne blive taget til en betalingssiden.


Som regel får du et velkomstbrev med diverse oplysninger. Typisk er der oplysninger om diverse brugernavne og adgangskode til kontrolpaneler, webmail, FTP  og statistikker. Netop FTP-oplysningerne er vigtige for udgivelse af din hjemmeside. FTP er nemlig en måde hvorpå du kan få forbindelse direkte til din webserver.


Godt! Lad os nu antage at du har modtaget dit velkomstbrev med dine FTP-oplysninger.


For at kunne forbinde til din webserver/FTP, skal du have et FTP-program. Her på lærhtml.dk  anbefaler vi FileZilla , som du kan downloade her: http://filezilla-project.org/download.php?type=client

FileZilla er et godt og gratis FTP-program, som kan køre på de mest almindelige platforme. Download programmet og installer det med de anbefalede indstillinger. Når du starter det første gange, bør det se således ud:


I dit velkomstbrev bør der som minimum stå følgende oplysninger:

  1. Hostnavn, host eller vært (Alle tre betyder det samme)
  2. Brugernavn, Bruger, user eller username
  3. Adgangskode, kode, pass, eller password

I nogle tilfælde står der også ekstra oplysninger, som f.eks. hvor du bør placere dine filer på din server. Denne placering kunne typisk være “public_html”, “domænenavn.dk” eller “httpdocs”.

Disse oplysninger skal vi bruge nu. For at oprette et nyt websted / en ny FTP forbindelse, følges disse trin:

  1. Gå op i "Fil" og ned i "Websteds Manager.."
  2. Nu åbnes din Websteds Manager i FileZilla. Tryk på “Nyt websted”
  3. Nu har du muligheden for at navngive dit websted. Det kunne f.eks. være "domænenavn.dk". Det er i princippet ligegyldigt hvad det hedder, bare du selv kan genkende det.
  4. Ovre til venstre har du muligheden for at angive "Vært", "Bruger" og "Kodeord". For at angive "Bruger" og "Kodeord" skal du vælge "Logontype" til at være "Normal”.
  5. Nu har du oprettet dit faste websted. Du behøver ikke at trykke "Gem" nogen steder. Tryk i stedet på "Tilslut" for at tilslutte til din server.

Nu skulle du være tilsluttet til din FTP-server. Er der problemer med at få dine FTP-oplysninger til at virke, altså du ikke kan tilslutte med de oplysninger du har fået, så søg i dit webhotels support sektion, eller skriv en meddelse til dem via deres support-system.


Når du er tilsluttet skal du gå ind på din hjemmeside-mappe (den som typisk hedder “public_html”, “domænenavn.dk” eller “httpdocs”). Hvis du, når du er tilsluttet, bare møder en tom mappe (kan indeholde nogle filer som er lagt der ind af dit webhotel), så er du i din hjemmeside-mappe. Igen det afhænger af dit webhotel.


Det er i denne mappe at du skal uploade dine filer.


Når du har uploadet din hjemmeside, burde du kunne gå ind på dit domænenavn og se din hjemmeside.


Herunder kan du se disse trin i billed-form, så du får en mere grafisk gennemgang. Klik på billedet for at se det i fuld størrelse.

(Tryk på billedet for at se det i fuld størrelse)

Mulighed 3, Dropbox

Hvis du ikke har nogen intentioner om at betale for den første lille hjemmeside du laver i HTML og CSS, er der heldigvis et gratis alternativ. Det eneste du går på kompromis med, er domænenavnet.


Hvis du har en Dropbox konto, så har du også en “public folder” - altså en offentlig mappe. Her kan du ligge dine hjemmesidefiler i, og så kan alle se din hjemmeside. Simpelt, nemt og hurtigt. Det eneste det kræver er en Dropbox konto. Lav mig give dig de enkelte trin til at udgive din hjemmeside med Dropbox.

  1. Hvis du ikke har en Dropbox konto, så opret en her: https://www2.dropbox.com/register
  2. Installer Dropbox programmet og installer det.
  3. Åben din Dropbox mappe.
  4. Her finder du en mappe der hedder "Public".
  5. Her har du to muligheder.
    1. Enten lægger du dine hjemmesidefiler i denne mappe. Det har den konsekvens at du kun kan have én hjemmeside i din "Public" mappe.
    2. Du kan også oprette en mappe inde i din "Public" folder og og lægge dine filer i denne mappe. Mappen kunne f.eks. hedde "Projekt1" eller "NewYork".
  6. Nu er din hjemmeside i princippet på nettet. Din URL / hjemmesideadresse, finder du ved at højreklikke på enten din mappe (“Projekt1”/”NewYork”) eller din “index.htm”, og gå ned i “Dropbox” og klikke på “Copy public link”.
  7. Indsæt / Ctrl+V i din browsers adresse-linje, og se din hjemmeside.

Herunder kan du se disse trin i billed-form, så du får en mere grafisk gennemgang. Klik på billedet for at se det i fuld størrelse.

(Tryk på billedet for at se det i fuld størrelse)

Sidste overvejelser

Nu skulle du gerne have lagt din hjemmeside på nettet. Tillykke! Her til sidst vil jeg genre motivere dig til at lære en helt masse mere om det at lave hjemmesider.


Nu har du lært den grundlæggende i det at opbygge en hjemmeside i ren HTML og en smugle CSS. Vi vil i de næste mange tutoriels og projekter lære dig at komme dybere i disse emner.


Vi har skrevet tidligere i dette projekt, at der kan være forskel på hvordan nogle løsninger ser ud i nogle browsere og andre løsninger ser ud i andre browsere. Det optimale vil jo selvfølgelig være at ens hjemmeside ser ens ud uanset hvem der kigger på den og i hvilken browser. Desværre er det en umulig opgave, eftersom der findes et utal af browsere. Hvad man kan gøre er at optimere sin hjemmeside til de mest brugte browsere.

W3 udgiver hver måned en ny statistik over hvilke browsere som folk bruger mest. Disse statistikker kan ses her: http://www.w3schools.com/browsers/browsers_stats.asp . Ud over browser statistikker, er der også statistikker over hvor store folks opløsning  er, som også er meget nyttigt.


I de næste projekter vil gå ind i nogle specifikke emner der giver dig værktøjerne til at håndtere disse problemstillinger.

  1. XHTML.  XHTML er en mere standaliseret måde at skrive HTML på. Standarder gør at browsere tolker ens hjemmeside helt ens alle sammen.
  2. CSS.  CSS bliver desværre også fortolket forskelligt afhængig af browser. Derfor kommer der et afsnit om hvilke ting du skal passe på med.


Nu er du ude på “the world wide web” med din første hjemmeside, og jeg håber du er motiveret til at forsætte med endnu et par projekter her på siden for at blive endnu bedre webudvikler.


God fornøjelse!
- Hans Thorhauge Dam, hans@laerhtml.dk