Nybegynnerguide til Webutvikling

[White Fox]

Hei alle potensielle webdesignere.

 

Jeg husker når jeg først entret denne delen av forumet. Jeg savnet en skikkelig nybegynnerguide. Jeg visste ingenting og spurte en haug av dumme spørsmål i forumet. Her kommer en liten guide til dere som skal starte på deres første hjemmeside:-p

 

 

Ordforklaringer

 

Webhotell: En plass du kan laste opp sidene dine til. En organisasjon som har basert seg på dette og lar deg bruke deres server. Ofte mot betaling.

URL - Uniform Resource Locater: En adresse på internett. F.eks: www.hw.no

Hjemmesideeditor: Et program som du lager hjemmesiden din i.

WYSIWYG-editor - What you see is what you get: En editor hvor du ikke nødvendigvis må kode selv. Man setter opp tabeller osv, men programmet tar seg av koden. Du får det du ser. De fleste WYSIWYG-programmer fungerer også utmerket når det gjelder å kode selv!

HTML - Hyper Text Markup Language: Alle hjemmesider er laget med HTML/XHTML. Et slags kodespråk som bestemmer hvordan hjemmesiden din skal se ut.

XHTML - The Extensible HyperText Markup Language:

Dette er noe du ikke nødvendigvis trenger når du lager en hjemmeside. XHTML er "oppfølgeren" til HTML, men mange mener at HTML fortsatt holder i masser.

CSS- Casading Style Sheet: En HTML-spesifikasjon som gir Web-utviklere og -brukere mer kontroll over hvordan Web-sider vises i nettleseren. Med CSS kan både brukere og Web-utviklere lage stilark(style sheets) som beskriver hvordan siden skal se ut.

Webhost: En webhost, er som oftest en bedrift som har siden din på sine egne servere. Dette koster ofte penger, men det finnes også gratis webhoster som er foholdsvis gode. Istedenfor å få en serverplass hos f.eks en bedrift så er det også en mulighet å bruk en egen server hjemme som du har siden din på. Når du har lastet opp siden din til serveren så kan andre brukere aksessere siden din ved å taste inn URL'en eller evt ip'en til stedet på serveren der siden din ligger.

 

 

Steg 1 - Skaffe nødvendig "utstyr"

 

 

Webhotell/URL

 

Aller først må du skaffe deg en serverplass så du kan få lastet opp sidene dine.

Her finner du en fin oversikt over webhotell. Hvis du derimot ikke er villig til å betale mye penger er Home.no eller start.no sitt alternativ helt greit for din første hjemmeside. Start har 10 kr i oppstartsgebyr, mens home er helt gratis. Dog med mye nedetid.

Når du først bestiller webhotell følger som oftest en URL med. Altså adressen til din side på nettet. Hvis du ønsker en spesiell Url til din side kan du ta en titt på www.domeneshop.no eller ta et enkelt søk til venstre her på forumet. Under domenesøk. Du kan også få en gratis adresse til hjemmsiden din på www.dot.tk, men det er mange som mener at dette ikke er så gode domener av ulike grunner. Hvis du skaffer deg en ny URL fra .TK eller et annet sted så gjør du bare slik at den henter opp siden din fra den URL'en du fikk sammen med serverplassen. Dette er som oftest veldig enkelt!

 

 

Programmer

 

Når du nå har skaffet deg en serverplass og et domene så gjenstår det bare å kode, designe og laste opp siden din. Dette kan gjøres i mange ulike programmer.

Når det gjelder kodingen så kan man starte med Notisblokken i Windows, men dette er ofte veldig vanskelig. Det mange mener er det beste programmet i dag er dreamweaver, men dette er veldig dyrt. Man kan enten velge ett program hvor man koder selv eller en såkalt wysiwyg editor(Se ordforklaringen). Uansett hvilket valg man tar her så er det veldig lurt å lære seg HTML og CSS skikkelig.

Når det gjelder design, layout, grafikk og redigering av bilder så er det adobes produkter som er mest utbredt, men det finnes også gode gratis/billige løsninger.

I tillegg trenger du bare et FTP-program til å laste opp sidene dine til serveren med. I noen editorer er FTP innebygget, men ikke i alle.

 

 

Program til å kode siden i:

 

Vanlige editorer:

 

Notisblokk - Følger med Windows

Crimson Editor - Gratis

TSW WebCoder - Gratis

Notepad 2 - Gratis

Textpad - 30 dagers prøvetid

Editpad - 30 dagers prøvetid

Gedit - Gratis(Bare til Linux)

Bluefish - Gratis(Bare til Linux)

Notepad++ - Gratis

 

WYSIWYG-editor:

 

WebDwarf - Gratis

Dreamweaver - 30 dagers prøvetid

Evrsoft - Gratis

 

Vanlige online editorer:

 

FCKeditor - Gratis

 

WYSIWYG online editorer:

 

HTML area - Gratis

 

 

Program til å designe siden i:

 

Adobe Photoshop - Kjøpes

Gimp - Gratis

 

 

FTP-program til å laste opp siden til serveren med:

 

Filezilla - Freeware

SmartFTP - Shareware

WS_FTP - Shareware

FlashFXP - Shareware

 

 

 

Steg 2 - Lære det grunnleggende

 

Nå starter den tunge biten. Man må lese og lære seg Html/css++. Uansett om man bruker en grafisk editor eller ikke så er dette nødvendig. Husk å ha hjemmesideeditoren din oppe, mens du leser. Prøv deg frem og test ut. Aller først må man lære seg grunnleggende Html, og helst også css. Her kommer noen fine nybegynnerguider:

 

Grunnregler:

 

Grunnregler - Norsk

Webdesign og CSS - Norsk

 

HTML:

 

Html begnner's guide - engelsk

Html turtorial - Engelsk

Html-Intro - Norsk

Hjemmesideskolen - Html - Norsk

Introduction to Html - Engelsk

En enkel guide til Html - Norsk

 

 

CSS:

 

Css - Innledning - Norsk

Css Beginner's guide _ Engelsk

Guide to Casading Style Sheets - Engelsk

Css Tutorial - Engelsk

Stilsett skolen - Norsk

 

Design, Layout og Grafikk:

 

Guider til Photoshop - Norsk

Fargekart - Engelsk

Se hvilke farger som passer sammen - Norsk

 

 

Annet:

 

Lage hjemmesider - Norsk

Filoverføring - Norsk

Lære seg Dreamweaver - Norsk

 

 

 

Steg 3 - Lage hjemmesiden

 

Nå har du egentlig det du trenger. Så da er det bare å sette igang. Åpne editoren, ftp-programmet og et bilderedigeringsprogram og ha det gøy!!

 

 

 

Steg 4 - Valider siden din

 

Det er viktig at koden din følger de reglene som er satt av wc3. Valider siden din og rett opp eventuelle "feil" i koden.

 

HTML validator

CSS validator

 

 

 

Steg 5 - Lære mer

 

Etterhvert strekker ikke kunnskapene til. Man må lære mer, og sette seg virkelig inn i Webdesign. Her er noen fine guider for de mer viderekomne:

 

 

HTML:

 

HTML Intermediate Guide - Engelsk

HTML Advanced Guide - Engelsk

 

CSS:

 

CSS Intermediate Guide - Engelsk

CSS Advanced Guide - Engelsk

Artikler som omhandler CSS - Norsk

 

XHTML:

 

XHTML Introduksjon - Norsk

XHTML Tutorial - Engelsk

 

Design, Layout og Grafikk:

 

Videregående guide til Gimp - Norsk

 

Annet:

 

Nyttige guider og tips på unrealized.org - Engelsk

 

 

 

------------------------------------------------------------------------------------------------------------------------------------------------

 

Håper denne guiden hjelper mange med å komme i gang med sin første side. Kom også med tilbakemeldinger og innspill

 

------------------------------------------------------------------------------------------------------------------------------------------------

 

Edit: Skrivefeil

Endret 5. april 2007 av White Fox

[Andreaz_]

Ikke no dårlig nybegynnerguide dette, men...

litt rar forklaring av css?

[White Fox]

Ikke no dårlig nybegynnerguide dette, men...

litt rar forklaring av css?

Fikses..

[Elendil]

Bra at du tar initiaiv(elns).

[Marvil]

Fint tiltak. Tror jeg har en liggende på maskina en plass, tror vertfall jeg begynte på noe lignende for lenge siden.

 

Satse på at man kanskje slipper noen av disse basic problemstillingene som blir tatt opp gang på gang.

Det jeg frykter, er at ingen leser dette, slik som så mange andre like FAQ-tråder vi har. Vi har webhosting, hvordan gi/motta kritikk, osv, men svært få ser ut til å lese dem.

 

For nybegynnere, så er det mulig at denne siden kan være litt behjelpelig innen selve sideutviklingen. Har ikke gransket innholdet og kvalitetssjekket alt, men rimelig sikker på at siden fikk B på hovedprosjektet og er bygget på pensumbøker og annen faglitteratur. (sjekk spes Takk Til-siden)

 

[Uin Viel]

Meget bra Tror dette vil hjelpe mange, inkludert meg selv.

[Gjest Slettet-df17e]

Bra jobba White Fox

 

Men Bluefish er vel ikke en Grafisk Editor det ? Og den er vel bare til Linux

Har brukt Bluefish i lang stund og alderi sett noe WYSIWYG i den :!:

[White Fox]

Bra jobba White Fox

 

Men Bluefish er vel ikke en Grafisk Editor det ? Og den er vel bare til Linux

Har brukt Bluefish i lang stund og alderi sett noe WYSIWYG i den :!:

Ok.. Det gikk litt fort for seg med den sorteringen av editorene. skal fikse det jeg.

[Ṱormod]

Bra artikkel! Eneste jeg vil pirke litt i er at du skriver "Grafiske Editorer". Tror mange vil bli forvirret av dette og oppfatter dette kanskje som bilderedigeringsprogram. Skriv heller "Hjemmeside-editor" eller "Web-redigeringsprogrammer"

[White Fox]

Bra artikkel! Eneste jeg vil pirke litt i er at du skriver "Grafiske Editorer". Tror mange vil bli forvirret av dette og oppfatter dette kanskje som bilderedigeringsprogram. Skriv heller "Hjemmeside-editor" eller "Web-redigeringsprogrammer"

Ja... har nå endret og bruker bare uttrykket wysiwyg. Tror det blir mer oversiktlig. Flott med tilbakemelding her.

[halvardm]

Bra du lager en artikkel om dette.

Er jo en del som spør om akkurat dette temaet.

[Arve Systad]

Fin tråd detta, men du bør/kan likegreit fjerne alt som har med XHTML å gjøre - XHTML er ikkje for nybegynnere uansett.

 

Under ordforklaringer: Gjør "overskriftene" bold og vanlig størrelse istede for større størrelse, du

[White Fox]

Fin tråd detta, men du bør/kan likegreit fjerne alt som har med XHTML å gjøre - XHTML er ikkje for nybegynnere uansett.

 

Under ordforklaringer: Gjør "overskriftene" bold og vanlig størrelse istede for større størrelse, du

Ok.. skal fikse det med ordforklaringer. Men jeg tenker at det er greit å beholde xhtml. Når man har lært en del kan man jo gå videre på dette, og det er jo ikke så veldig mye vanskeligere for nybegynnere å lære dette enn HTML vil jeg tørre å påstå.

Endret 4. januar 2005 av White Fox

[White Fox]

Denne guiden forsvinner vel bare langt bakover her hvis det ikke blir linket til den, satt som sticky eller ett eller annet. Ønsker jo at noens akl få bruk for dette her.

[PoleCat]

Legg den inn i Oppslagsverk-tråden da vel.

[Goscinny]

Hva skjer? Denna tråden fortjener da ein sticky??? En ting, White Fox, du burde legge til Flash FXP under FTP-programmer. Bruker dette selv, og det er veldig enkelt og greit. Tror ikke det har noe med Flash og gjøre, men iallefall et glimrendes program!

[Dahl]

Flott initiativ!

[Jakob K]

Først og fremst; bra tiltak/initiativ ja. Blir mange av disse spørsmålene av og til.

 

Greit at XHTML-en står der, så lenge den forblir under "Lære mer"-seksjonen, men jeg ville alikevel lagt ved en notis om at dette ikke er noe man vanligvis har bruk for på en blogg el...

 

Savnet lenker til HTMLDog og W3C (spesielt validatoren, hvor du gjerne kan legge til en forklaring som sier at den bare er for å sjekke om du har skrevet koden etter "reglene"). Unrealized kunne også vært noe å lenke til, kanskje?

 

Og det er ingen nybegynnere som ser i Oppslagsverkstråden uansett. En nybegynnerguide er noe en nybegynner virkelig trenger, og mener derfor denne fortjener å bli sticky.

 

Ville gjort forskjell på domene og URL. Domene er den delen av adressen som kommer før landsforkortelsen (eksempelvis: http://www.vg.no/foo/bar), mens URL-en er hele adressen.

 

Du kan tilføye GIMP som et gratis alternativ til Photoshop.

 

Også noen skrive-/gramatikkfeil:

• domeneadresse => domene / URL (avhengig av hva du tenkte på)
  
• Wysiwyg editor => WYSIWYG-editor
  
• Ftp program => FTP-program
  
• .tk domene => .TK-domene
  
• Åpne [..] å ha det gøy => Åpne [..] og ha det gøy
  

[Steinmann]

Kansje linke til noen artikler om man bør bruke xhtml?

Liker ikke å sende ferskinger ned den ruten, da ender det bare med tag-suppe

 

Fin artikkel da, bør refereres til oftere mtp nybegynnere

[Loomy]

Slett ikke værst!

 

Men du bør nevne at de aller, aller fleste, om ikke alle, WYSIWYG-programmer også støtter manuell koding. For å ta et eksempel; Dreamweaver har, IMHO, en av de aller beste kode-editorene på markedet.

Legg gjerne til Notepad++ under kode-editorer.