<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Mikael Brevik &#187; Markup</title>
	<atom:link href="http://mikaelb.net/emne/markup/feed/" rel="self" type="application/rss+xml" />
	<link>http://mikaelb.net</link>
	<description>Bloggen</description>
	<lastBuildDate>Mon, 07 Sep 2009 20:11:35 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>4 nye semantiske tips</title>
		<link>http://mikaelb.net/2008/12/4-nye-semantiske-tips/</link>
		<comments>http://mikaelb.net/2008/12/4-nye-semantiske-tips/#comments</comments>
		<pubDate>Thu, 04 Dec 2008 17:20:51 +0000</pubDate>
		<dc:creator>Mikael Brevik</dc:creator>
				<category><![CDATA[Markup]]></category>
		<category><![CDATA[element]]></category>
		<category><![CDATA[semantikk]]></category>
		<category><![CDATA[xhtml]]></category>

		<guid isPermaLink="false">http://mikaelb.net/blogg/?p=25</guid>
		<description><![CDATA[Etter at jeg postet forrige post, tenkte jeg at jeg skal gjøre dette så ofte jeg kan, og lage en serie av artikler som jobber for å forbedre semantikken i dokumenter og sider over hele nettet. I alle fall til leserne av denne bloggen.

Bruk ol til å markere kommentarfeltene dine. Det vil bli logisk oppbygd [...]]]></description>
			<content:encoded><![CDATA[<p>Etter at jeg postet <a title="Mikael Brevik blogg: 4 semantiske tips" rel="article" hreflang="no" href="http://mikaelb.net/2007/4-semantiske-tips/">forrige post</a>, tenkte jeg at jeg skal gjøre dette så ofte jeg kan, og lage en serie av artikler som jobber for å forbedre semantikken i dokumenter og sider over hele nettet. I alle fall til leserne av denne bloggen.</p>
<ol>
<li><em>Bruk <code>ol</code> til å markere kommentarfeltene dine.</em> Det vil bli logisk oppbygd med tanke på at det er en kronologisk oppbygging av det. Først har du navn, så url/hjemmeside og e-post, deretter kommer det hovedsteget kommentaren. Rekkefølgen kan selvfølgelig være anderledes, men det var bare et eksempel. Du skal selvfølgelig i tillegg bruke <code>fieldset</code>/<code>label</code> og alle andre semantiske oppbygginger for form. Dette med å bruke en ordnet liste, er generelt for alle form, ikke bare for kommentar felt. Også registrering, søk, nyhetsscript osv.</li>
<li><em>Snakker du om kode, kan du bruke <code>var</code> til å definere variabelnavn.</em> Det gir brukeren informasjon om at det virkelig er et variabelnavn. Eksempel: <code>&lt;var&gt;my_variable&lt;/var&gt;</code>. Også her kan du bruke <code>lang</code>-attributten, som snakket om <a title="Mikael Brevik blogg: 4 semantiske tips" rel="article" hreflang="no" href="http://mikaelb.net/2007/4-semantiske-tips/">forrige post</a>.</li>
<li><em>Bruk <code>kbd</code> til å definere tastatur-knapp/kombinasjon.</em> Skriver du en guide til hvordan du kan gjøre en ting med hurtigtaster, kan du vise brukeren at dette er tastaturknapper du snakker om ved å bruke <code>kbd</code>-tagen. Eksempel på bruk er <code>&lt;kbd&gt;SHIFT + ALT + V&lt;/kbd&gt;</code>.</li>
<li><em>Bruk <code>dfn</code> til å definere en definisjon/uttrykk/et term</em>. Om man kommer med ukjente uttrykk som ikke er en del av dagligdags tale, også gjerne kjent som faguttrykk kan man bruke <code>dfn</code>-elementet til å vise dette til brukeren. Eksempel på bruk er <code>&lt;dfn lang="en"&gt;object orientert programmering&lt;/dfn&gt;</code></li>
</ol>
<p>Det var dagens semantiske tips, med noen kanskje ukjente elementer. Husk at du kan bruke standard attributter på disse.</p>
]]></content:encoded>
			<wfw:commentRss>http://mikaelb.net/2008/12/4-nye-semantiske-tips/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>4 semantiske tips</title>
		<link>http://mikaelb.net/2008/12/4-semantiske-tips/</link>
		<comments>http://mikaelb.net/2008/12/4-semantiske-tips/#comments</comments>
		<pubDate>Thu, 04 Dec 2008 17:16:18 +0000</pubDate>
		<dc:creator>Mikael Brevik</dc:creator>
				<category><![CDATA[Markup]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[semantikk]]></category>
		<category><![CDATA[xhtml]]></category>

		<guid isPermaLink="false">http://mikaelb.net/blogg/?p=23</guid>
		<description><![CDATA[Her kommer en kjapp liste over 4 semantiske tips som du kan fundere litt over og kanskje vurdere å bruke i dine sider, for å maksimere tilgjengeligheten. Dette er kanskje litt inspirert av Photoshop TVs &#8220;One for the Road&#8221;, der de gir tips på slutten av programmet som seerne burde sjekke ut.

Definer sidespråk til eksterne [...]]]></description>
			<content:encoded><![CDATA[<p>Her kommer en kjapp liste over 4 semantiske tips som du kan fundere litt over og kanskje vurdere å bruke i dine sider, for å maksimere tilgjengeligheten. Dette er kanskje litt inspirert av Photoshop TVs &#8220;One for the Road&#8221;, der de gir tips på slutten av programmet som seerne burde sjekke ut.</p>
<ol>
<li><em>Definer sidespråk til eksterne lenker.</em> Dette gjøres via attributten til a, som heter <code>hreflang</code>. Der definerer du språket til siden du lenker til ved å gjøre f.eks: <code>&lt;a href="http://site.no" title="Sidetittel" hreflang="no"&gt;Side&lt;/a&gt;</code>.</li>
<li><em>Definer språk i paragrafene dine.</em> Også slik at brukeren skal få informasjon om hvilket språk dette står på. Dette gjøres med attributten <code>lang</code>, og du kan blant annet bruke den på paragraf-elementet. Eksempel: <code>lang="no"</code>.</li>
<li><em>Bruk <code>rel</code> til å definere hva en link er</em>. Om du lenker mellom sidene dine i en hel nettside kan du bruke <code>rel</code> til å si til nettleseren hva denne siden er for deg. Det er et nøkkelord, som kan gruppere forskjellige linker og si hva som hører sammen. Har du f.eks en &#8220;kontakt meg&#8221;-side kan du bruke <code>rel="contact"</code>.</li>
<li><em>Bruk <code>rev</code> til å definere hva lenkesiden er i forhold til nåværende side</em>. Det vil si det motsatte av <code>rel</code>, og om du da er inne på &#8220;Kontakt meg&#8221; siden, og linker tilbake til fremsiden, kan du bruke <code>rev="contact"</code> for å vise at du er inne på kontaktsiden til hovedsiden din.</li>
</ol>
<p>Det var 4 kjappe (kanskje litt vell kjappe) tips, til hvordan du kan forbedre tilgjengeligheten/semantikken i dine sider!</p>
]]></content:encoded>
			<wfw:commentRss>http://mikaelb.net/2008/12/4-semantiske-tips/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Link-tag med rel attributten</title>
		<link>http://mikaelb.net/2008/12/link-tag-med-rel-attributten/</link>
		<comments>http://mikaelb.net/2008/12/link-tag-med-rel-attributten/#comments</comments>
		<pubDate>Thu, 04 Dec 2008 16:28:44 +0000</pubDate>
		<dc:creator>Mikael Brevik</dc:creator>
				<category><![CDATA[Markup]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[link-tag]]></category>

		<guid isPermaLink="false">http://mikaelb.net/blogg/?p=5</guid>
		<description><![CDATA[Forord
Tenkte jeg skulle gi en liten innføring i hvordan man bruker link-taggen til flere ting enn å koble til en ekstern CSS fil. Jeg tror det er stor manglene kunnskap på bruk av link-taggen ute på nettet. Det lønner seg å legge til flere link-tagger med forskjellig informasjon for bedre brukervennlighet på siden din. Nå [...]]]></description>
			<content:encoded><![CDATA[<h3>Forord</h3>
<p>Tenkte jeg skulle gi en liten innføring i hvordan man bruker <code>link</code>-taggen til flere ting enn å koble til en ekstern CSS fil. Jeg tror det er stor manglene kunnskap på bruk av <code>link</code>-taggen ute på nettet. Det lønner seg å legge til flere <code>link</code>-tagger med forskjellig informasjon for bedre brukervennlighet på siden din. Nå skal jeg forklare litt hva <code>link</code> gjør, gi noen eksempler og snakke litt rundt den.</p>
<h3>Hva gjør den?</h3>
<p>Så hva gjør denne <code>link</code>-taggen? Jo, den definerer rett og slett forhold mellom to forskjellige dokument. Det er nemlig derfor <code>link</code> brukes når du skal koble til en ekstern CSS fil. Når man gjør dette har man verdien &#8220;stylesheet&#8221; i attributten <em>rel</em>. Men, som jeg har sagt tidligere kan manbruke <code>link</code> til mye annet. Blant annet navigering mellom sider. Om du bruker Opera har du kanskje sett en tool-bar som har linker som: Next, Up, Home osv. Disse knappene fungerer ikke på de fleste sidene, men definerer du hva de gjør i <code>link</code>-tag, vil de fungere. Du vil altså øke brukervennligheten på siden din. Så hva kan du gjøre? Se nedenfor for hvilke verdier du kan i ha <em>rel</em> attributten.</p>
<h3>Mulige verdier</h3>
<ul>
<li>alternate</li>
<li>appendix</li>
<li>bookmark</li>
<li>chapter</li>
<li>contents</li>
<li>copyright</li>
<li>glossary</li>
<li>help</li>
<li>home</li>
<li>index</li>
<li>next</li>
<li>prev</li>
<li>section</li>
<li>start</li>
<li>stylesheet</li>
<li>subsection</li>
</ul>
<p>Disse verdiene beskriver kanskje seg selv. Du har index, home, help, next, prev, copyright som kanskje er mest relevant/viktigst &#8211; om du ser bort i fra stylesheet ja.</p>
<h3>Eksempler</h3>
<p>Så hvordan bruker vi dette?</p>
<p>Under <code>head</code> legger du inn dette.<code><br />
&lt;link title="Startsiden" rel="index" /&gt;<br />
&lt;link title="Hjelpesiden" rel="help" /&gt;<br />
&lt;link title="Neste artikkel" rel="next" /&gt;<br />
&lt;link title="Forrige artikkel" rel="prev" /&gt;<br />
</code></p>
<h3>Tilleggsinformasjon</h3>
<p>Disse attributtene kan brukes på <code>link</code> i xhtml strict: charset, href, hreflang, rel, rev, media, type. I tillegg til disse har vi de vanlige attributtene som id, name, title, lang, xml:lang osv. Du kan også bruke ekstra attributtene som onclick, ondblclick, onmousedown osv med JS.</p>
]]></content:encoded>
			<wfw:commentRss>http://mikaelb.net/2008/12/link-tag-med-rel-attributten/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
