Gå til innhold

LES FØR DU POSTER - Oppslagsverk + Webdesign & webutvikling FAQ


Anbefalte innlegg

Før du poster!

Mange spørsmål i denne kategorien er besvart flere ganger, her skal vi gi deg svar på det viktigste. Ellers minner vi om at forumets egen søkefunksjonen og Googles søkefunksjon for forumet) er til for å brukes. Om du mener problemet ikke er blitt svart på før eller du mener svaret du fant ikke var tilfredsstillende nok, er du velkommen til å starte en ny tråd i riktig kategori.

I Web-design, HTML og CSS-kategorien er det mange hyggelige brukere som bruker mye av sin fritid på å hjelpe andre brukere. For å gjøre det lettere for dem å finne problemet og gi deg et godt svar bør ha med:

  • Utfyllende og god tittel
    - Beskriv problemet ditt ved hjelp av 4-5 ord. Hva eksakt er problemet?
    [*]God og detaljert beskrivelse av problemet og hva du vil ha hjelp til (uten for mange tomord)
    - Aldri: "Det er åpenbart hva som er feil, hvordan fikse?"
  • Utdrag av HTML-/CSS-filen hvor du tror feilen ligger
    - (I tillegg til link til hele HTML og CSS-filen)
  • Link til siden hvor problemet ligger, og direkte link til CSS-filen
    - (Mange av problemene kan være forårsaket av webserveren eller andre deler av koden)

Vil du ha kritikk på en webside eller komme tilbakemeldinger på andres arbeid. Les PoleCats Websider til kritikk, - en liten pekepinn

Husk at det finnes egne forum for PHP, Databaser (SQL), Javascript og webtjenester som webhosting/domene.

Ikke forvent at folk lager en hel side for deg!
Jeg vet jeg allerede har nevnt at du ikke skal forvente for mye av folkene her, men ikke skjelden kommer det inn folk som forventer at folk her inne skal lage en hel clanside for dem eller et stort web design for noen par hundre kroner. Det er riktignok ikke noen regel som sier man ikke kan spørre om slikt. Men vi ber deg tenke minst to ganger før du spør om noe slikt.

Det finnes tross alt mange tjenester som tilbyr både blogg, forum, gjestebok og webdesign dersom du ikke orker å sette det opp selv. Og skulle du ønske deg en hel klanside er det faktisk ikke så veldig vanskelig å sette opp med de riktige Wordpress eller Joomla plugin-ene.

Noen hjelpesider

HTMLdog - En av de beste HTML og CSS Guidene (Engelsk)
Hvis du absolutt må ha noe på norsk er denne HTML guiden og denne CSS guiden. Her finnes det noen feil, så HTMLdog er å anbefale. Likevel er disse to guidene noe av det beste man finner gratis på norsk.

En artikkel om yrket som profesjonell webdesigner (elieds)
Webhosting, oversikt.. (Marvil)
Webhotell i utlandet (myhken2)
Nybegynnerguide til Webdesign (White Fox)
Hvordan få en skisse til å bli ferdig HTML

Sjekk også "Oppslagsverk over artikler og nyttige sider" lengre nede i posten.

OSS - Ofte stilte spørsmål

Hva er XHTML?

 

XHTML er ikke, som mange tror, en ny versjon av HTML, men et supplement til HTML-språket. Forskjellen på XHTML og HTML er at XHTML er, og blir, tolket som XML. Dette gir flere fordeler, men også en del ulemper.

Fordeler:

  • Mulighet for å bruke andre XML-språk inni HTML-en (f.eks. MathML og SVG-bilder)
  • Raskere rendring
  • Krever mindre programvare for å rendre siden

Ulemper:

  • Dokumentet vil bli uleselig ved den minste syntaksfeil.
  • Slipper mange å tenke på mange faktorer som i XML-språket kan føre til feil

Merk at Internet Explorer fortsatt ikke støtter XHTML. Det er mulig å få nettleserne til å tolke XHTML som HTML (med media type: "text/html"), men da vil man miste alle fordelene med XHTML. I tillegg vil XHTML og HTML bli tolket forskjellig, sånn at man kan få problemer hvis man plutselig ønsker å begynne å servere dokumentet som XHTML.
Derfor er denne løsningen ikke å anbefale.

Mer info:
Sending XHTML as text/html Considered Harmful (Ian Hickson)

 

 

 

Bør jeg bruke XHTML?

Det kommer ann på. Men de fleste vil ha ingen nytte av mulighetene XHTML gir (se over) og det eneste man da ville oppnådd med XHTML er da bare en rekke feilkilder som kan føre til at documentet ikke kan leses i nettlesere. Pågrunn av den strenge måten XML (og dermed XHTML) blir rendret på vil nemmelig den minste feil føre til at dokumentet ikke kan rendres.

IE (Internet Explorer) støtter heller ikke XHTML. Så med mindre du har planer om å ikke støtte IE, noe som nesten er et must siden så mange PC-er på skoler, biblioteket, internettkaféer ol. bare har IE, bør du velge HTML.

Mer info:
Sending XHTML as text/html Considered Harmful (Ian Hickson)
XHTML vs HTML (Tommy Olsson - Sitepoint Forum)



Hva er forskjellen på XHTML 1.0 og XHTML 1.1?

XHTML 1.0 er HTML 4.01 rendret som XML (for mer info; se over).
Dvs. at du kan bruke akkurat de samme elementene og attributtene som HTML 4.01. (Men ikke de samme javascriptfunksjonene.)

XHTML 1.1 er XHTML 1.0 Strict med krav om at dokumentet sendes med media type (MIME-type) application/xhtml+xml (se spm. over). I tillegg er det noen få endringer i attributter. Se Changes from XHTML 1.0 Strict i XHTML 1.1 spesifikasjonen.



Hvordan midtstiller jeg en side?

 

Alt man trenger å gjøre er å sette disse CSS-egenskapene på div-elementet som inneholder innholdet til siden.

margin: 0 auto;

Da vil margene være 0 piksler på toppen og bunnen og like store (automatisk tilpasset) på høyre og venstre side. Husk at du også må stille inn hvor bred siden skal være.

width:500px;

Width-verdien varierer, sett den til så bred din side skal være.

NB! Dette vil ikke funke i Quirksmode IE. (F.eks. hvis du bruker XML deklarasjon eller ikke har satt noen doctype.)

Eksempel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="nb-no">
<head>
<title>Sidestilling av side</title>
<style type="text/css">
#container
{
margin: 0 auto;
width: 800px;

/* Sett bakgrunn til rød for å enklere se div-elementet */
background: red;
}
</style>
</head>

<body>
<div id="container">
<p>Sidens innhold</p>
</div>
</body>
</html>

Sjekk også: Dead Center

 

 

 

Hva er Quirksmode?

Quirksmode er en måte nettlesere rendrer gamle sider som ikke følger webstandardene, slik at de skal se ut slik designeren ønsket.

Den beste måten å unngå at websiden din blir rendret med Quirksmode er å følge W3C sine webstandarder og ha en doctype (se under) øverst i HTML-dokumentet.

HTML 4.01 Strict Doctypen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

I tillegg bør du passe på hvis du bruker XHTML at du ikke har en XML declaration (<?xml version="1.0"?>) øvert i XHTML-dokumentet. En bug i IE (Internet Explorer) gjør nemmelig at slike sider blir rendret i quirksmode.



Lite bilde i adresselinjen

1. Lage en liten logo. Logoen bør bli lagret i .ico formatet og være 16x16 piksler.
2. Laster bildet opp på websideområdet ditt. Filnavnet bør være favicon.ico (nederst i mappehierarkiet på websiden) med filtype .ico fordi mange nettlesere automatisk leter etter ikoner som ligger på URL http://www.dinside.no/favicon.ico. I tillegg bør ikonet være 16x16 pixler stor. Du kan bruke FavIcon to Pic for å konvertere ditt icon til .ico-formatet.

Hvis du ikonet ikke ligger på dinside.no/favicon.ico må du legge til HTML-snutten på alle HTML-sidene dine, med URL til ikonet.

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

NB! Husk " />" hvis du bruker XHTML.

Mer info
What is Favicon.ico? Personalise Your Site's Bookmark



Hvordan sender jeg brukeren videre til en annen side?

 

Hvis du har tilgang til PHP, eller et annet serversideskriptspråk bør du bruke en av disse kodesnuttene (disse tingene skal helst skje i HTTP-headeren, og ikke HTML-dokumentet).


Hvis du vil videresende brukere over lang tid:

<?php

header("HTTP/1.1 301 Moved Permanently");

header("Location: http://example.org/foo");

?>

Hvis videresendingen bare er midlertidig:

<?php

header("HTTP/1.0 307 Temporary redirect");

header("Location: http://example.org/foo");

?>

Hvis du ikke har tilgang til PHP, eller noe annet serversideskriptspråk kan du videresende brukeren ved hjelp av meta-elementet. (Dette er ikke anbefalt metode!)
0-en før URL-en er antall sekunder før siden skal videresende brukeren til den andre siden.

<html>
<head>
<meta http-equiv="refresh" content="0;url=http://www.somacon.com/">
</head>
<body>
This page has moved to <a href="http://somacon.com/">http://somacon.com/</a>
</body>
</html>

 

 

 

Åpne link i nytt vindu?

Å tvinge brukere til å åpne sider i nytt vindu/fane kan forvirre en del brukere, spesielt brukere med synsvansker som ikke kan se at siden er åpnet i en nytt vindu og prøver å bruke bakoverknappen for å komme tilbake til forrige side. Derfor er det ikke anbefalt å tvinge brukere til å åpne en link i et nytt vindu, og denne metoden er ikke tillatt i (X)HTML strictmode/XHTML 1.1.
Hvis det er absolutt nødvendig å åpne siden i et nytt vindu kan du bruke target-attributten med verdien; "_blank".

Eksempel:

<a href="http://www.site.com/page" target="_blank">Link</a>

 



Åpne link i ny fane?

Det er ingen måte å tvinge brukere til å åpne siden i en ny fane, men de fleste nettlesere som støtter faner åpner automatisk vinduer som skal åpnes i et nytt vindu i en ny fane. Dermed er det bare å bruke samme metode som for å åpne siden i et nytt vindu (se over).



URL endrer seg ikke når jeg trykker på en link

Hvis siden ligger inni en frame, f.eks. hvis du bruker .tk-domene eller .moo.no, er det bare frame-en (websiden inni websiden) som blir oppdatert, og ikke selve nettsiden man er på. Å bruke frames er ikke anbefalt, men hvis du bruker .tk eller .moo.no-domener har man ingen kontroll over dette. Den eneste måten å løse problemet på er da å spesifisere at alle linker skal åpne i den øverste siden. Dette kan man gjøre med å sette target-attributten til "_top".

Eksempel:

<a href="http://www.site.com/page" target="_top">Link</a>

NB! Dette er ikke tillatt i HTML 4.01 Strict, XHTML 1.0 Strict og XHTML 1.1

Man kan også bestemme at dette skal skje med alle linker ved å sette det i base-elementet. (Pass på at base-elementet er inni head-elementet.)

Eksempel:


<head>
<base target="_top">
</head>

(Husk " />" hvis du bruker XHTML)

NB! Dette er ikke tillatt i HTML 4.01 Strict, XHTML 1.0 Strict og XHTML 1.1



Statistikk på hjemmesiden?

Google Analytics
Statcounter (Med teller for besøkende)
Sol Ratings (Plassering på ratingslistene til Sol, ellers dårlig tjeneste)



Hvordan lage et under domene til side?

Dette kan man ofte gjøre i kontrollpanelet på webhotellet ditt (sjelden vanlig på gratis tjenester).
Bruker du One er dette en fin guide.



Drop-down Jump Menus



Hva er problemet med frames?



Hvilken webhost skal jeg velge?

Det er veldig avhengig av hvilke programmeringspråk du bruker og hva slags side du skal hoste. Her er en liten oversikt.



Hvordan importere side i en ramme?



Hvordan får jeg runde hjørner?

I dag er det ingen måte man kan få dette til i CSS. Når CSS3 Backgrounds and Borders Module kommer ut vil det være mulig å få runde kanter og ha flere bakgrunnsbilder på samme element, sånn at det vil bli mulig å få runde hjørner.

For å få til dette i dag kan man bruke en av disse metodene:
Javascript og CSS (lettest): More Nifty Corners
Bare CSS (mer kronglete): Css round corners boxes curves



Hvor mye skal jeg ta betalt for et oppdrag?

 



Hvorfor virker ikke æøå?

 

Problemet skyldes at nettleseren tror det er et annet tegnsett enn det det det egentlig er. Det finnes mange forskjellige tegnsett hvor æøå er forskjellige, og det er vikig å passe på at du lagrer filen med riktig tegnsett, og at nettleseren får vite hvilket tegnsett du bruker.

Det er anbefalt å bruke tegnsett: UTF-8 (Unicode)

1. Velg tegnsett:
Notepad -> Save As -> UTF
Notepad++ -> Format>UTF-8 (husk å ikke trykk på denne flere ganger)

NB! Husk å lagre skriptet uten BOM (Bit Order Mark). Ellers vil du få en error når du kjører header() funksjonen i PHP.

2. Sett serveren til å sende riktig tegnsett (PHP):

<?php

header('Content-Type: text/html; charset=UTF-8');

?>

Merk: Skriptet skal være helt øverst på siden.

3. Sett riktig tegnsett i HTML-dokumentet:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Husk " />" hvis du bruker XHTML.

Merk: Det er nødvendig å sende hvilket tegnsett som blir brukt både i http-headeren (header()-funksjonen) og i html-dokumentet.

For en mer utfyllende guide, sjekk: Problemer med æøå / skandinaviske tegn (Skrevet for PHP-script, men er samme greia med html)

 

 

 

Problemer med skygge på mønsterbakgrunn når midtstilling av side

Vis man prøver å lage skyggeeffekter kan man fort få problemer med å holde skyggeeffekten på plass i alle oppløsninger. F.eks. kan dette problemet oppstå.
post-3875-1178874089.gif

For å løse problemet sjekk denne guiden av Mikeal Berg:
Midtstilt felt, skygge på mønsterbakgrunn



Hjelp! Siden min vises ikke likt i IE, Firefox eller Opera.

De fleste tilfeller der siden ser forskjellig ut i forskjellige browsere eller ikke blir seende ut slik som i Photoshop, kan enkelt løses ved å overkjøre standardinnstillingene i nettleseren.

Firefox, Internet Explorer, Opera, Safari, etc., tillegger alle elementer egne CSS-verdier som standard. Det vil si at i f. eks. Internet Explorer vil body-elementet ha en padding på X-antall pixler.

Problemet er at ikke alle nettleserene tillegger de samme CSS-verdiene til hvert element. Dette kan heldigvis løses ved å sette alle CSS-verdiene til 0 og dermed overstyre standardinnstillingene. Spesielt er dette viktig for margin og padding, og det er derfor lurt å legge denne linjen øverst i CSS-dokumentet.

* { margin:0; padding:0; }

Da vil alle elementer (p, h1, h2, div, blockquote ol.) få tildelt padding og margin på 0 px, og man må derfor huske på å gi padding/margin igjen til elementer som p og blockquote for at man skal få mellomrom mellom avsnittene igjen (mellom hvert p-element).

Mer info: Global White Space Reset


 

Hvordan få Google (og andre) til å indeksere siden min.

Google og andre søkemotorer har et skjema for innsending av URL-er. For at dette skal funke må det finnes en eller flere linker fra sider Google allerede har i indeksen sin til ditt websted. Hvis ikke tenker Google antagelig at hvis så få folk finner denne siden, er den neppe til noen stor nytte for brukerne sine.

Men hvis Google finner en link til webstedet ditt vil den uansett begynne å indeksere siden din. Det enkleste du derfor kan gjøre er sørge for at noen som befinner seg på Goolge linker til siden din. (Tips: Du kan f.eks. legge til en linke til siden i signaturen på forumet.)

Husk at det kan ta opptil 3-5 uker for Google begynner å indeksere siden din.




Hvordan få gjestebok på siden min?

Dette kan ikke gjøres med HTML. Man må bruke et eget program for å gjøre dette.

Det kan være smart å bruke et ferdig PHP-skript. Mange gode finnes i denne tråden:
Gratis og nyttig PHP-script



Fra Photoshop til HTML/CSS

 


Oppslagsverk over artikler og nyttige sider

Noen hjelpesider
HTMLdog - En av de beste HTML og CSS Guidene (Engelsk)
Hvis du absolutt må ha noe på norsk er denne HTML guiden og denne CSS guiden. Her finnes det noen feil, så HTMLdog er å anbefale. Likevel er disse to guidene noe av det beste man finner gratis på norsk.

En artikkel om yrket som profesjonell webdesigner (elieds)
Webhosting, oversikt.. (Marvil)
Webhotell i utlandet (myhken2)
Nybegynnerguide til Webdesign (White Fox)


Nyttige verktøy
Browser Shots - Test siden din i mange forskjellige nettlesere (også Safari og IE)
Fangs - Gir deg svaret på hvordan siden din ser ut i en skjermleser.
FireBug med Yslow (Firefox utvidelse)
Adobe Kuler - Finn farger som passer sammen
Color Schemer Gallery - Fargekart
Accessibility Checklist
Grid Calculator
40 eminente frie typeface (fonter)

Anbefalte utviklerprogrammer
Aptana
Koster penger: E-text editor eller Intype (Alfa) på Windows, TextMate (Mac).


Nyhetssider
A List Apart
Digital Web Magazine
24 Ways - Julekalender (men nyttig resten av året også)
Vitamin
Sitepoint - Mer om webutvikling og backend enn A List Apart og Digital Web Magazine
CSS Beauty News - De beste bloggartiklene hver dag.

Blogger
456bereastreet
Anne van Kesteren (Gutt/mann!!, som arbeider i Opera og er opptatt av webstandarder, html5, whatwg++)
Hixie's Natural Log
devOpera - Triks, tips og artikler om webstandarder, html, css, Opera, widgets, javascript og webutvikling generelt
Official Google Webmaster Central Blog - Official news on crawling and indexing sites for the Google index
Opera Labs - Om Operas arbeid og litt om webstandarder
Microformatique - a blog about microformats and “data at the edges” from little things, big things grow
Cameron Moll
Mark Boulton


Inspirasjon
Design Meltdown - Pene design kategorisert etter farger/stil med kommentarer fra bloggern
OkapiStudio - Design med fokus på grafisk design og typografi
Dzialifornia - Ikoner ol.
Designgraphy - Portefølje med mye webdesign (++ noe annet)
Runo Grammofon - CD Covere
Flikr - Web Design Inspiration - Screenshots av mange pene websider
Best Web Gallery
Style Gala
CSS Vault - Webdesign galleri
Design Shake - Webdesign galleri
WebCreme - Webdesign galleri

... i tillegg kan Diskusjon.no sin egen tråd Skatteskrinet anbefales.

Anbefalte artikler

CSS-Layout
CSS Layout Techniques: for Fun and Profit - Inneholder templates/eksempler på ulike layouter
Why tables for layout is stupid: - En slags innføring i hvorfor tabeller ikke skal brukes til layout, og css skal
Block vs. Inline part 1, part 2, part 3 - Artikkelserie om forskjellen på inline og block-elementer/modus.

CSS-eksempler
Converting HTML to CSS - Eksempler på hvordan du kan erstatte gammeldagse html-løsninger med CSS
Pure CSS Popups 2 - Artikkel om hvordan du kan dra musa over en link, og få en tekst/et bilde til å dukke opp et annet sted på siden ved a:hover
CSS Design: Taming Lists - Hvordan lage stilfulle menyer ved hjelp av CSS
CSS Design: Going to Print - Utskrift ved hjelp av CSS.
Alternative Style: Working With Alternate Style Sheets - Hvordan jobbe med flere ulike stilsett.

HTML
Validation -Does it matter? - Hvorfor validering er viktig

XHTML
The perils of using xhtml properly
Sending XHTML as text/html Considered Harmful - Diskusjon om hvor vidt XHTML skal brukes.
Serving up XHTML with the correct MIME type - Oversikt over hvilke mime-typer som skal/skal ikke brukes til ulike doctypes.

Tilgjengelighet
A quick and dirty introduction to accessibility
Kast Tabellene (Arve Systad)
Generell systematikk (Arve Systad)
Markering er viktig (Arve Systad)

Søkemotoroptimalisering
Beginner's Guide to Search Engine Optimization - Bok om søkemotoroptimalisering

Grafisk design
Five simple steps to better typography - 1. Measure the measure, 2. Hanging punctuation, 3. Ligatures, 4. Typographic Hierarchy - size, 5. Typographic Hierarchy - weight
Elegant Web Typography - Presentasjon om typografi
Thinking With Type - Liten Webside om Typografi
Nine skills that separate good and great designers - Presentasjon fra Cameron Moll
Web 2.0 design style guide - Oversikt over en del design trender


Frames
Frames - The Problems And Solutions
- Eksempler og lenker til sider som omhandler problemer med (i)frames.

Javascript
Drop-down Jump Menus - Artikkel om hvordan du kan få en "dropdown-boks" til å virke som en meny.
How Not to Use Links - Artikkel som viser hvorfor <a href="#"> ikke skal brukes.


Diverse
Buzz: Hallucinogenic drugs? - Eksempler på css som ikke støttes i Internet Explorer 6.
Fix Your Site With the Right DOCTYPE! - Artikkel som forklarer hvorfor du skal bruke doctype, og hvilken.
Why Don’t You Code for Netscape? - Artikkel som forklarer hvorfor du skal optimalisere websider for eldre browsere.
Cool URIs don't change
Make Your Site Mobile-Friendly in Two Minutes
A Guide to CSS Support in Email: 2007 Edition
Optimizing Page Load Time


Forslag til forbedringer i FAQ-en eller "Oppslagsverk over artikkler/guider"? Send PM eller skriv i denne tråden.

Endret av Gavekort
Fikset ødelagte spoilertags
  • Liker 4
Lenke til kommentar
Videoannonse
Annonse

Sånn da skulle det meste være fikset på.

 

Noe du savner? Noe du ikke forsto? Eller fikk du bruk for denne tråden og ønsker å utbre glede over kan du legge inn et innlegg nedenfor.

 

OPS! Innlegg som omhandler diskusjon over kvaliteten/mangler osv. på innholdet blir slettet når FAQ-en har blitt oppdatert.

Endret av JonT
Lenke til kommentar
  • 10 måneder senere...

Utvide nyttige verktøy, eller lage en programvareseksjon?

 

Firebug: DOM/XHR/CSS/ALT! inspector. Alt i og rundt DOM kan manipuleres fra Firebug.

 

Aptana: Godt verktøy for redigering av HTML/CSS/JS/PHP osv. Veldig gode utvidningsmuligheter.

 

ColorZilla: Velg farger fra Firefox og få dem automatisk kopiert inn i minne. Bedre eyedropper enn photoshop!

 

Fangs: Gir deg svaret på hvordan siden din ser ut i en skjermleser.

Lenke til kommentar

Nei

Da møtte jeg i så fall ha delt opp posten i mindre poster, noe som hadde gjort at posten hadde kommet over flere sider. I tillegg hadde det da blitt veldig tungvint å legge seksjoner/spørsmål i en organisert rekkefølge.

Endret av JonT
Lenke til kommentar
  • 7 måneder senere...
  • 3 uker senere...
Alltid hyggelig å kunne hjelpe. Av ren nygjerrighet: Hvilke problemer var det du fikk svar på?

 

 

Marginforskjeller i browsere.

 

* { margin:0; padding:0; }

 

Denne løste ALT.

Nå må jeg bare bruke litt tid på trivielle ting jeg aldri har gjort før, som f.eks å lage left-margin på UL-elementer og slikt :)

Lenke til kommentar
  • 3 uker senere...
  • 1 år senere...

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...