|
ASP.net (199)
ASP 3.0 (111)
PHP (30)
HTML (66)
SQL (89)
CSS (46)
XML (7)
JavaScript (78)
Diverse kode (13)
Programmering (22)
System og drift (15)
Trafikk og inntekt (11)
Guider og tips (22)
Nyttig lesestoff (23)
Web forum (604)
Link galleri (565)
ASP.NET kurs(5)
CSS kurs (2)
JQuery kurs (2)
Øk trafikken (8)
Facebook App. (4)
Microsoft CEO (6)
Server & web
Internett & epost
Systemverktøy
Sikkerhet
Fildeling
Lyd & media
Diverse software
Domenesalg
Metagenerator
Websikre farger
WebMail
Bli medlem!
Siste innlegg
Gjestebok
Tips en venn
Kontakt oss
Forsiden
|
|
Web standarder
Av: Øyvind A. Isaksen
Denne artikkelen tar utgangspunkt i Microsoft sine anbefalinger med tanke på korrekt oppsett av websider i XHTML. Vi forklarer hva man bør tenke på når man skal velge "riktig" XHTML standard, hvordan deklarere dette i dokumentet, litt om oppsett generelt, bilder, og til slutt et eksempel på bruk av tabell løst design.
Dette er nyttige ting du bør ta hensyn til FØR du starter utviklingen av et nytt nettsted!
WEB STANDARDER
XHTML standarden har 2 hovedmål:
1. Bedre seperasjon mellom dokument struktur og presentasjon.
2. Reformatere HTML for XML anvendelse.
3 versoner av XHTML 1.0 standarden:
XHTML 1.0 Transitional
Innehar alle tagger og atributter fra HTML4.01.
Muliggjør en "enkel" obergang fra HTML til XHTML uten for mye problemer.
XHTML 1.0 Strict
Sammenlignet med XHTML 1.0 Transitional har XHTML 1.0 Strict en renere
seperasjon mellom dokument struktur og presentasjon. Strict tvinger deg
til å bruke CSS for å styre utseendet PÅ dine websider.
XHTML 1.0 Frameset
Benyttes på sider med frames oppbygning.
TYPER XHTML, OPPSETT SIDER GENERELT
I motsetning til HTML er man i XHTML nødt til å lage et korrekt formatert
XML dokument. Siden må bestå av en gyldig DOCTYPE før innholdet begynner.
Dette har med hvordan siden skal ble rendret i nettleseren.
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Root elementet må referere til XHTML namespace:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
- Alle element og atributtnavn MÅ ha små bokstaver (lowercase).
Husk at XML er case sensitivt.
- Alle tagger må avsluttes korrekt: <p>Dette er korrekt</p>.<br />
- Alle atributter MÅ ha en verdi.
Ikke korrekt: <input type="checkbox" checked />
Korrekt: <input type="checkbox" checked="checked" />
- I stedet for "name" atributtet må vi benytte "id" atributtet.
Grunnen er at "name" atributtet er fjernet fra XHTML 1.0.
- Innholdet i <script> og <style> tagger på ligge i en CDATA seksjon.
Da unngår vi at innholdet i skriptet blir tolket som XHTML.
<script type="text/javascript">
/* <![CDATA[ */
function test() {
return true;
}
/* ]]> */
</script>
- Angi MIME type i toppen av din asp.net side for at en browser skal
rendre XHTML dokumentet som et XHTML dokument.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Bilder
Alle bilder MÅ ha et "alt" atributt.
<img src="bilde.gif" alt="Mitt bilde" />
Hvis et bilde er et design element, sett "alt" teksten lik en tom streng.
<img src="blank.gif" alt="" />
I ASP.NET angir du "AlternateText" for bildekontrollen.
Skal du angi en blank "alt" tekst for en ASP.NET (2.0)
bildekontroll må du benytte "GenerateEmptyAlternateText".
Tabell løst design
Benytt kun tabeller for å presentere data som skal vises i en tabell struktur.
Layout lager vi i ved hjelp av <div> tagger og CSS.
Følgende side består av 3 kolonner, presentert uten tabeller:
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head runat="server">
<title>Layout uten tabeller</title>
<style type="text/css">
#content
{
margin-left:auto;
margin-right:auto;
width:800px;
}
#leftColumn
{
float:left;
width:150px;
border:1px solid black;
padding:10px;
}
#middleColumn
{
float:left;
width:430px;
padding:10px;
}
#rightColumn
{
float:right;
width:150px;
border:1px solid black;
padding:10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="content">
<div id="leftColumn">
Innhold venstre kolonne
</div>
<div id="middleColumn">
Innhold midt kolonne
</div>
<div id="rightColumn">
Innhold høyre kolonne
</div>
</div>
</form>
</body>
</html>
|
|
