Publisert av Kenneth Vassbakk, 10. desember 2009 under HTML & CSS

Når man er ny med HTML er det greit å ha noe å øve seg på. Her er noen eksempler på hva du burde huske når du skriver HTML.

1: Alltid lukk HTML tagger

Jeg ser flere steder at folk ikke lukker taggene sine, dette burde du alltid gjøre. Hvis du ikke gjør dette vil du møte på validation feil og feil overalt.

<p> Hei
<p>Velkommen til DINURL.NO
<p>Her kan du lese om...

Skriv heller slik:

<p>Hei </p>
<p>Velkommen til DINURL.no </p>
<p>Her kan du lese om...

2: Deklarer DOCTYPE

DOCTYPE går før åpningen html koden øverst på siden og forteller nettlesren om siden inneholder HTML, XHTML, eller en blanding av begge deler, slik at den kan riktig tolke markup koden.

Flere steder vil de kreve at du legger inn DOCTYPE før de hjelper deg med ditt problem. Dette løser også flere problemer med IE.

De 4 vanligste:

  1. <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
  2. <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
  3. <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
  4. <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

3; Ikke bruk inline CSS style

Når du sitter å jobber kan det ofte være fristende å bare skrive inline CSS istedenfor å lage en class/id for den.

<p style="color: red">Her har vi noe tekst som er rød</p>

Dette ser jo ikke så gale ut? Vel, Når du lager design burde du først lage alt innholdet før du begynner med stylingen. Istedenfor å gjøre dette, gjør det ferdig med alt innholdet så lager du CSS stylingen senere.

Gjør heller slik

<p class="red-text">Her har vi noe tekst so mer rød</p>

CSS:

.red-text {
color: red;
}

4: Plasser eksterne CSS filer i HEAD taggen

Du kan inkludere eksterne CSS filer hvor du vil i et HTML dokument, men i HTML dokumentasjonen annbefaler de deg å gjøre dette i HEAD taggen. Dette hjelper også på farten siden blir lastet inn i nettleseren.

<head>
<title>Min blogg</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />

5: Ikke bruk inline JavaScript

Før i tiden var det vanlig å bruke inline JavaScript, men det er det ikke nå lenger. Bruk heller eksterne JavaScript filer.

<script type="text/javascript" src="STI TIL JAVASCRIPT"></script>

6: Valider ofte

Valider ofte for å være sikker på at det du gjør er ritkig. For å gjøre dette enkelt annbefaler jeg deg å laste ned Web Developer Toolbar om du bruker Firefox.

7: Last ned Firebug

Dette er en utrolig god plugin for utviklere. Den er uten tvil den beste pluginen for deg driver med webutvikling. Du kan enkelt finne ut hvilke CSS verdier et element arver fra et annet, og utrolig mye annet som hjelper deg med utviklingen av ditt nettsted.

Last ned Firebug.

8: Bruk Firebug

Dette kan ikke legges nok vekt på. Firebug gjør det så utrolig mye lettere for deg å finne ut hvor det er noe som gjør at siden ikke blir ritkig. Det er enkelt å ut om det er en margin som gjør at siden ikke vises slik du ønsker en skal vises. Du kan også endre verdiene i css for å finne ut når det bli riktig for å så endre senere slik at det alltid blir riktig.

9: Skriv taggene med små bokstaver

De fleste nettlesere lar deg skrive taggene med store bokstaver

<DIV>
<P>Paragraf</P>
</DIV>

Men det er meningen at disse skal skrivest med små bokstaver

Skriver heller slik

<div>
<p>Paragraf</p>
</div>

10: Bruk H1 – H6 taggene

Dette er noe jeg også bruker å være slapp med.
Men for på grunn av SEO er det bedre å bruke H1-H6.
Prøv å bytt ut de p taggene du har stylet til stor skrivt til en passende H tag

<h1>Overskrift</h1>
<h6>Liten undertittel, men fortsatt en tittel</h6>

11: Spar H1 til tittelen

Om du lager en blog, spar H1 taggen til overskriften. Spesielt om du lager en blogg vil jeg annbefale deg å bruke H1 taggene på overskriften til innlegget

12: Bruk UL på navigasjonen din

Alle nettsider har en eller annen form for navigasjonsbar, og du kan enkelt komme deg unna med å skrive noe slik:

<div id="nav">
<a href="#">Home</a>
<a href="#">News</a>
<a href="#">About</a>
<a href="#">Archive</a>
</div>

Jeg vil annbefale deg å ikke bruke denne metoden.

Skriv heller slik

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Archive</a></li>
</ul>

13: Lær deg å sikte deg inn på Internet Explorer

Har du merket at nettsiden du utvikler mens du sjekker i Firefox/Opera/Chome/osv aldri ser helt riktig ut når du først åpner den i Internet Explorer? Jeg har selv hatt mange problemer med dette og laget mange ekstra klasser i CSS for å løse dette.

Når du er ferdig å lage CSS for de andre nettleserene, lag en egen for Internet Explorer

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="path/to/ie.css" />
<![endif]-->

Denne sier rett og slett: «Hvis brukerens nettlesere er Internet 6 eller lavere, last inn dette stilsettet. Hvis ikke, ikke gjør noe»
Om det er nødvendig at IE 7 også får eget stilsett, bytt ut «lt» med «lte» (mindre enn, eller det samme som)

14: Alle bilder trenger ALT attributten

Denne er veldig lett å hoppe over, men den trengs til valideringen og tilgjengeligheten. Om et bilde ikke er der blir teksten i ALT attributten skrevet ut istedenfor bildet

Dårlig

<img src="bilde.jpg" />

Bra

<img src="bilde.jpg" alt="bilde" />

15: Style ALLE elementer

Dette gjelder spesielt for utvikling for klienter. Selv om du kanskje ikke har brukt en blockquote betyr ikke at klienten ikke vil gjøre det. Selv om du ikke bruker OL vil ikke si at klienten din ikke gjør det, osv. Letteste måten er å lage en egen side hvor du styler alle elementer: ul, ol, p, h1-h6, blockquote osv.

16: Lær deg Photoshop

Når du designer en nettside er Photoshop alltid greit å kunne. Selv setter jeg alltid opp designet i Photoshop før jeg begynner med HTML og CSS, og jeg er sikker på at det er mange andre som også gjør dette.

17: Ikke bruk et Framework… Enda

Framework som 960 Grid System er fantastiske. Men når du skal lære deg HTML & CSS er det ikke lurt å begynne med noe som allerede løser det meste for deg.

Framework er ment for de som allerede har kunnskapene som skal til innenfor språket. Senere når du kan mer, kan du prøve deg på å  bruke et Framework


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