Gå til innhold

Fint oppsett av HTML

Stian Jacobsen

Anbefalte innlegg

Stian Jacobsen

Stian Jacobsen

Skrevet
Skrevet (endret)

Tenkte jeg bare skulle demonstrere hvordan en "pen" kode ser ut.

Ser at flere og flere som er ute etter kritikk på nettsidene sine har dårlig markup,

Se og lær..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="no" lang="no">
<head>

   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <meta http-equiv="Content-Language" content="no" />
   <link rel="stylesheet" type="text/css" href="stilskjema.css" media="all" />
   <title>Min hjemmeside</title>

</head>
 <body>
   <div id="rammeverk">
       
       <div id="topp">
           <h1>Min hjemmeside</h1>
           <p>Tittel tekst</p>
       </div>

       <div id="meny">
           <ul>
               <li><a href="lenke.html">Lenke</a></li>
               <li><a href="lenke.html">Lenke</a></li>
               <li><a href="lenke.html">Lenke</a></li>
           </ul>
       </div>

       <div id="innhold">
           <h2>Overskrift..</h2>
           <p>Dette er en tekst, bokstaver som former ord, som igjen utgjør en setning</p>
       </div>

   </div>
 </body>
</html>

Denne koden er oversiktlig, ryddig, pen, SEO og validert XHTML strict!

 

Her er en oversiktlig og pen CSS kode

/*
 STANDARD TAGGER
 ================*/

html,body
 {
     font-family: "Trebuchet MS", sans-serif, helvetica, arial;
     font-size: 14px;
     color: #555;

     background-color: #fff;
 }

*
 {
     margin: 0;
     padding: 0;
 }

h2, h3, h4
 {
     font-family: Georgia, sans-serif, helvetica, arial;
 }

/*
 UTFORMING AV LAYOUT
 ==================*/

div#rammeverk
 {
     width: 780px;
     padding: 10px;
     margin: 0 auto;

     text-align: left;
 }

 div#topp
   {
       width: 100%;
       
       background-color: navy;
   }
   div#topp h1
     {
         width: 190px;
         height: 70px;

         text-indent: -9000px;

         background: url(mappe/til/logo.png) no-repeat; 
     }

Forklaring;

Luft er viktig, da blir koden oversiktlig, en annen ting, separer standard tagger (form, ul, h1, p etc..) fra layout. I hver definisjon bruker jeg også å lage mellomrom mellom

størrelse, skrift, posisjonering og farge/bilde valg

Endret av MrNeeon
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Stian Jacobsen

Stian Jacobsen

Skrevet
  • Forfatter
Skrevet
Flott tiltak!

 

Men mange velger å kodet på forskjellige måter. I F.eks CSS kan man bruke:

#Content {
        width: 800px;
}

 

Jeg har nok noe å lære :) For se å få ryddet!

8374505[/snapback]

 

#content

{

width: 800px;

}

 

og

 

div#content

{

width: 800px;

}

 

er to forskjellige ting. Den første gjelder for alle elementer med id="content" mens den andre kun gjelder div's med id="content"

MEN, man skal aldri ha to elementer med samme id..

Lenke til kommentar
PHPdude

PHPdude

Skrevet
Skrevet

Ser bra ut det, men får vel pirke litt: Ser ikke helt hvorfor du skal ha et avsnitt (<p>) i headeren, blir jo så klart avhengig av hva man skal ha der da men...

Og fra et korrekt semantisk synspunkt finnes det vel ingen grunn til at div#rammeverk skal være med. Alt innhold er jo fra før pakket inn i <body>

Lenke til kommentar
Stian Jacobsen

Stian Jacobsen

Skrevet
  • Forfatter
Skrevet
Ser bra ut det, men får vel pirke litt: Ser ikke helt hvorfor du skal ha et avsnitt (<p>) i headeren, blir jo så klart avhengig av hva man skal ha der da men...

Og fra et korrekt semantisk synspunkt finnes det vel ingen grunn til at div#rammeverk skal være med. Alt innhold er jo fra før pakket inn i <body>

8375919[/snapback]

For å prike tilbake :)

Paragrafen der kan være ganske nytte fult i forhold til søkemotorer, dem lister opp det første dem leser etter <body> taggen, så om du har <h1>Mitt firma</h1><p>Mitt firma holder på med ditten og datten</p> så kommer det opp i f.eks google på beskrivelsen.. Jeg bruker denne metoden, samt å sette paragrafen med display: none; eller visibility: hidden;

 

HTML koden og stilskjemaet var bare ment som et oppsett, ikke som er virkelig kode (sikkert mange som har kopiert den allerede men..) Men det med en wrapper, rundt innholdet kan være nyttig i mange sammenhenger..

La oss si at du ønsker at siden din skal være midtstilt og 800piksler bred, da kommer en wrapper med margin: 0 auto; og width: 800px; godt med..

Lenke til kommentar
PHPdude

PHPdude

Skrevet
Skrevet
For å prike tilbake :)

Paragrafen der kan være ganske nytte fult i forhold til søkemotorer, dem lister opp det første dem leser etter <body> taggen, så om du har <h1>Mitt firma</h1><p>Mitt firma holder på med ditten og datten</p> så kommer det opp i f.eks google på beskrivelsen.. Jeg bruker denne metoden, samt å sette paragrafen med display: none; eller visibility: hidden;

 

HTML koden og stilskjemaet var bare ment som et oppsett, ikke som er virkelig kode (sikkert mange som har kopiert den allerede men..) Men det med en wrapper, rundt innholdet kan være nyttig i mange sammenhenger..

La oss si at du ønsker at siden din skal være midtstilt og 800piksler bred, da kommer en wrapper med margin: 0 auto; og width: 800px; godt med..

8376040[/snapback]

 

Vis <p>-taggen var sånt ment så blir jeg mer skeptisk for da er det ikke pirk lenger men en ganske stygg hack for noe man heller bør bruke <meta> til.

 

Er fullt klar over at mange bruker en ekstra wrapper rundt alt for lettere å style via CSS, men det gjør det ikke mer semantisk korrekt og er da mulig uten.

Dessuten er vel dette også i bunn og grunn en "hack" for at IE ikke håndterer <html> og <body>-taggene riktig i CSS tror jeg.

Lenke til kommentar
Stian Jacobsen

Stian Jacobsen

Skrevet
  • Forfatter
Skrevet
Vis <p>-taggen var sånt ment så blir jeg mer skeptisk for da er det ikke pirk lenger men en ganske stygg hack for noe man heller bør bruke <meta> til.

 

Er fullt klar over at mange bruker en ekstra wrapper rundt alt for lettere å style via CSS, men det gjør det ikke mer semantisk korrekt og er da mulig uten.

Dessuten er vel dette også i bunn og grunn en "hack" for at IE ikke håndterer <html> og <body>-taggene riktig i CSS tror jeg.

8376387[/snapback]

 

Tror du henger litt etter i tid..

1. Vil ikke kalle dette en hack.

2. Jeg vil aldri ha stylet body til f.eks bredde

Lenke til kommentar
PHPdude

PHPdude

Skrevet
Skrevet
<meta> brukes ikke lenger av søkemotorer, heldigvis!

8376519[/snapback]

 

Det er en sannhet med modifikasjoner! Det er riktig at søkemotorer som Google ikke lenger bruker <meta> informasjon for å rangere sidene, men jeg sikter til <meta name="description"> og den brukes fortsatt noe til beskrivelse av siden på søkeresultatene!

 

MrNeeon: Er også riktig som du sier at Google (og sikkert andre) ofte vil bruke første avsnittet som beskrivelse, men å da plassere den i headeren og i tillegg skjule den for vanlige brukere kan ikke kalles for stort annet enn en stygg hack hvor du trosser HTML-spesifikasjonen fordi du føler det er mer lettvint og gjøre det sånn.

Og med så mye svindling så blir vel Google fort nødt til å deplasere sider som lurer søkemotorer til å ta med innhold som ikke finnes der for vanlige brukere.

Er uansett bedre å gjøre det på en ordentlig måte.

Lenke til kommentar
Arve Systad

Arve Systad

Skrevet
Skrevet
Er fullt klar over at mange bruker en ekstra wrapper rundt alt for lettere å style via CSS, men det gjør det ikke mer semantisk korrekt og er da mulig uten.

Dessuten er vel dette også i bunn og grunn en "hack" for at IE ikke håndterer <html> og <body>-taggene riktig i CSS tror jeg.

8376387[/snapback]

 

1. Det er ikkje alle design som er mulige å utforme uten å ha eit eige div-element rundt heile sida.

 

2. eit div-element har null semantisk betydning, og du kan difor ikkje klage på at det er semantisk korrekt eller ikkje.

 

3. Nei, det er ikkje ein "hack", det er rett og slett eit hjelpemiddel for å få ting slik du vil.

 

:)

Lenke til kommentar
Haraldson

Haraldson

Skrevet
Skrevet (endret)

Ja, siden du kan style ul på samme måte som div, trenger du ikke et ekstra element rundt.

 

Arve: Og, om det nå ikke er nødvendig for mange design å ha en container, er det i 99% av tilfellene veldig tids- og CSS-besparende. Man slipper for eksempel å midtstille både header, meny, content og footer så lenge disse er i en container som er midtstilt. Videre kan man sette generelle regler innenfor containeren osv osv.

Endret av Mr.Berg
Lenke til kommentar
Arve Systad

Arve Systad

Skrevet
Skrevet (endret)

Om det er mulig med den ønska visuelle utforminga; ja. Og det er det som regel òg.

Arve: Og, om det nå ikke er nødvendig for mange design å ha en container, er det i 99% av tilfellene veldig tids- og CSS-besparende. Man slipper for eksempel å midtstille både header, meny, content og footer så lenge disse er i en container som er midtstilt. Videre kan man sette generelle regler innenfor containeren osv osv.

 

Endå fleire argument for å behalden den.

Endret av Arve Systad
Lenke til kommentar
PHPdude

PHPdude

Skrevet
Skrevet
1. Det er ikkje alle design som er mulige å utforme uten å ha eit eige div-element rundt heile sida.

 

2. eit div-element har null semantisk betydning, og du kan difor ikkje klage på at det er semantisk korrekt eller ikkje.

 

3. Nei, det er ikkje ein "hack", det er rett og slett eit hjelpemiddel for å få ting slik du vil.

8377493[/snapback]

 

1. Eksempler?

 

2. Og si at <div> har null semantisk betydning var vel å ta hardt i, <div> definerer en struktur i dokumentet og <div> er jo også et block-element.

Den ekstra <div>-taggen rundt alt var nå det minste problemet da, vis folk absolutt vil/trenger den så får de gjerne bruke den, men selv har jeg aldri hatt noe behov.

 

3. Jo! Med HTML4 kan man bruke <body> istedenfor som en sånn wrapper rundt alt. Problemet er at IE ikke viser dette riktig (sjokk...) og at mange derfor velger å legge til en ekstra <div> rundt alt, så vil si at det er en "hack" akkurat som andre CSS-hacks som brukes for å ting riktig i IE.

Lenke til kommentar
cyclo

cyclo

Skrevet
Skrevet

Hvordan man lager pen kode er jo også en smakssak. Det viktigste er vell at man selv (og evt. de man jobber med) klarer å lese den rett, forstå den, og få hurtig oversikt...

 

Personlig bruker jeg denne stilen på css:

 

div#rammeverk{width: 780px;padding: 10px;margin: 0 auto;text-align: left;}
div#topp{width: 100%;background-color: navy;}

 

Egentlig bude den vært indentert slik at alle { kommer under hverandre.

 

Nå får jeg sikkert kjeft av mange her. Men årsaken til at jeg gjør det slik er at det er _mye_ lettere å holde oversikt over css filen. Og særlig når den blir stor.

Lenke til kommentar

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å
Gå til emneliste

  • Hvem er aktive   0 medlemmer

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