Publisert av Ronnie Aarebrot, 17. februar 2010 under CSS, HTML, Hjelpemidler

Det er mange som daglig jobber med html og css når det kommer til design. Her viser jeg deg noen vanlige feil som ofte skjer blant nybegynnere.

Closing tags

Noen tags krever at du avslutter med skråstrek “/” mens andre krever at du avslutter taggen i seg selv, “</div>” husk dette når du jobber med html.Usikker? Da kan du alltids sjekke våre tidligere html/css guider.

<img alt=”img” src=”kreativtstudio.jpg” />
<div>Velkommen til Kreativtstudio.no </div>

Feil DOCTYPE

HTML krever at du alltid starter dokumentet med en doctype eller (correct DOCTYPE declaration). Denne trenger og skrives før alt annet, altså, øverst i html dokumentet ditt. Her ser du et eksempel på DOCTYPE til XHTML 1.0 Transitional.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Feil rekkefølge

Når du f.eks ønsker og gjøre teksten din bold (tykk skrift) er det viktig at du gjør dette på den rette måten. Husker du alltid å lukke <strong> tagen på det rette tidspunktet (gjelder kun hvis du ikke bruker css). Dette er et eksempel på rett og galt,

Rett, <div><strong>Kreativtstudio.no</strong></div>
Galt, <strong><div>Kreativtstudio.no</strong></div>

Store eller små bokstaver?

i HTML er det alltid best og skrive ting med små bokstaver, dette vil også validere html koden din riktig. Dersom du begynner og skrive inn store bokstaver, oppdager du feil under validering av dokumentet ditt.

Rett, <div>Følg vår RSS Feed, det hjelper deg virkelig!</div>
Galt, <DIV>Dette er ikke “gyldig” kode</DIV>

HTML og CSS i samme dokument? (inline styles)

Ja, html og css kan blandes, men ikke gjør det. Dersom andre (eller deg selv?) en dag åpner opp prosjektet ditt og finner blandet kodet over alt, er det “umulig” og finne fram. CSS burde og “skal” ligge i et eget stilsett dokument (.css).

Galt, <a href=”#” style=”color: #343434;”>Nettsiden min</a>

Solide navn på classes og id’s

Når du jobber med større nettsider kan dette være det som sparer deg for mest tid. Når du oppretter nye klasser (classes) eller ID’s bruk gode navn som i tillegg forklarer hva de gjør. Dette vil gjøre det lettere for deg å unngå feil.

Rett, <div id=”banner”> </div>
Galt, <div id=”bilde”> </div>

Glemmer du å lukke CSS skikkelig?

Selvfølgelig, det lar seg gjøre, men det viser seg at flere gjør feil og får problemer dersom du ikke gjør det. Hver gang du har skrevet noe i CSS bør du alltid avslutte med semikolon (dette gjelder kun den siste linja før du avslutter class eller id).

Rett, #banner { padding: 12px 15px 10px 0; color: #000; }
Galt, #banner { padding: 0 12px 15px 10px; color: #fff }

Bruk golbal styles

Mange skjønner det ikke, men her er svaret. Kenneth fra Kreativtstudio har allerede nevnt dette flere ganger, bruk <h1><h2> osv tags oftere. Da kan du enkelt style flere overskrifter samtidig uten og måtte opprette nye klasser. (Dette er også godt likt blant søkemotorer).

Bruk shorthand (snarveier)

CSS lar deg bruke noen “snarveier” . Dette kan spare deg for tid og mer ryddig kode. Dersom du f.eks skulle bruke padding ville du ikke brukt padding-left, top, right osv men,

padding: 0 5px 10px 2px;

  1. Top (toppen) 0
  2. Right (høyre) 5px
  3. Bottom (bunnen) 10px
  4. Left (venstre) 2px

Snarveier for fargene (Color Declarations)

Hex nummer som gjentar seg selv, f.eks #ffffff kan gjøres enda kortere slik, #fff. Det samme gjelder med #000000 som da blir #000.

Validate (godkjenning)

Det er viktig og sjekke at stilarket og html dokumentet ditt oppfyller de nødvendige kravene. Derfor kan du alltid sjekke om siden din inneholder dårlig kode eller feil du kanskje bør rette på. Sjekk ditt HTML eller CSS dokument i dag.

Tiny URL for dette innlegget: http://tinyurl.com/2e82lfs