Validera din kod
En validerad kod är en glad kod! När man validerar sin XHTML och CSS kod kollar man om man har byggt upp koden korrekt efter den Doctype man har använt. Validering är inget nödvändigt så länge webbsidan fungerar men det är ett bra sätt att hålla koden i hög kvalitet, och om koden validerar är det större chans att webbsidan ser likadan ut i olika webbläsare. Dom som bestämmer om koden är validerad eller inte är så klart w3c
Det finns tre olika sätt att validera sin kod, första sättet och även det vanligaste är att posta sidan via en länk, vilket kräver att webbsidan är online. Andra sättet är att man laddar upp en fil och som sedan blir scannat och sedan beroende på koden, blir den förklarad som validerad eller inte validerad. Tredje och sista sättet är att man klistrar in koden i ett text formulär där man postar formuläret och dom kollar koden om den validerar. När man ska validera sin CSS kod gäller samma tre tillväga sätt.
Om din det skulle vara så att din kod inte validerar, kommer det listas punkter med din kod som visar vilket parti i koden som inte validerar, samt en förklaring om vad som är fel och hur det ska lösas. Dessa förklaringar kan vara lite svåra att tyda ibland men kan oftast tyda om man läser noga och har bra koll på sin kod.
Allt du behöver nu, är din kod samt länkarna till validering sidorna, och dom kommer här:
Föregående: Välj rätt program att skriva HTML i
Nästa: Ge dina Texter stil
Välj rätt program att skriva HTML i
Att bestämma sig för vilket program man ska använda för att koda XHTML är ganska enkelt, det ända du behöver tänka på är hur mycket XHTML kod du kan skriva själv och hur du trivs med programmet. Jag kommer att gå igenom 3 olika typer av program som riktar sig till olika gruppar av kunskap.
Det första är en så kallad WYSIWYG editor, som visar det man gör utan att man behöver fixa direkt med koden, det är bara att lägga till dom saker man vill ha och vart dom ska vara, så fixar programmet kodning automatiskt. Men man kan så klart fixa direkt i koden också.
Det andra använder man för att skära upp bilderna, och sedan genererar programmet koden så som du har skurit upp det. Detta är ett enkelt sätt att bygga upp en layout som du sedan kan bygga undersidor på. En nackdel är dock att koden oftast blir riktigt ful och omodern.
Sist och kanske minst är den råa text editor:n, denna väljer många att använda när man kan skriva XHTML kod helt på egen hand. Det blir oftast lättare att få exakt som man vill ha det. Kommer att ta upp 2 stycken olika program i denna kategori, en väldigt simpel och en med lite mer ”hjälpmedel”.
Adobe Dreamweaver
Är ett populärt verktyg för att skapa hemsidor, utan att det kräver så mycket kunskap om XHTML, det kräver mer att man har kunskap om programmet i fråga.
Att jobba i Dreamweaver är ungefär som att jobba i Word, man behöver bara rita upp tabeller, dra dit dom element som man vill ha, applicera css på det man vill.
Men man kan såklart jobba direkt med XHTML koden om man vill, Dreamweaver är ett stort program med mycket innehåll, vilket gör det ganska seg laddat. Det och att programmet är dyrt att köpa är dom nackdelar Dreamweaver har.
Adobe Imageready
Ännu ett Adobe program, men med detta program som är ett ”syskon” till Photoshop kan man göra en del saker med bilder. Men det vi ska koncentrera oss på nu är att man beskära en bild med den design man skapat i Photoshop. Man skär ut logo, meny, innehåll etc. sedan klickar man så att Imageready beskär bilderna så som man har markerat samt, bygger upp tabeller i XHTML kod. Voila, där har man sin design i XHTML kod.
Resultatet blir som det blir, helt ok. Men koden är inte optimal och sidan består av bilder och tabeller, man ser väldigt sällan att nyproducerade hemsidor består av just bilder och tabeller. För att använda divs och css är en bättre lösning både för att få bättre laddningshastighet men också för mer flexiblitet i kodningen.
Microsoft Anteckningar
För alla ”kodknackare” som jobbar i Windows miljö är nog detta program ingen nyhet. Detta program är för dom som kan skriva sin kod för hand, detta är en fördel (om man kan dvs.) för man får en frihet att skriva koden som man vill och få exakt det resultat man är ute efter.
Att inte få någon hjälp av ett program som t.ex. Dreamweacer kan ses som en nackdel, men kan även ses som en fördel av vissa personer. Men man använder såklart det program man trivs med och kan använda. En annan fördel som är en av anledningarna till att jag använt Anteckningar så pass länge, är att programmet laddar omedelbart. Vilket jag tycker är riktigt skönt, speciellt om man bara ska göra en snabb ändring koden.
Intype
Intype är en ny spelare i spelet och är ett Gratis programeringsprogram, som är en blandning av Anteckningar och Dreamweaver kan man säga.
Det är en Text editor, inte en WYSIWYG editor som Dreamweaver, men Intype är inte lika strippad som Anteckningar, den har radräknare, syntax highlighting och en del XHTML koder som man kan få hjälp att infoga.
Detta är anledningen till att jag nu använder Intype istället för Anteckningar, man får några hjälpmedel som rad räknare men samtidigt en snabbladdad text editor som faktiskt är Gratis.
Men, det finns såklart en nackdel. Denna nackdel är att Intype fortfarande är under utveckling, än så länge finns programmet bara som Alpha version. Teamet bakom programmet jobbar så gott det går, men det tar sin tid med tanke på att dom gör det ideellt på sin egen fritid.
Inget program lockade?
Om du inte tycker att något av programmen jag skrev om ovanför lockade, kan du ta och kolla på wikipedias lista med html editors. Om du inte hittar något program, då får du helt enkelt vänta på att det ska skapas först =)
Elatus Rekommenderar
En rekommendation såhär i slutet av artikeln är väl inte helt missplacerat. Jag tycker att ni ska lära er XHTML så ni har en bra grund, hur ni gör detta kan variera men det finns artiklar på Internet eller så fortsätter ni bara att följa HTML skolan här. Ni ska då även skaffa en text editor som ni känner er bekväm i, Anteckningar, Intype eller något annat program, det spelar ingen roll. Bara det är ett bekvämt program att skriva kod i för dig.
Skriv gärna era egna rekommendationer.
Föregående: Ett XHTML dokument
Nästa: Validera din kod
Ett XHTML dokument
För att få en klarare syn på vad XHTML är ska ni nu få se hur ett enkelt XHTML dokument ser ut. Efter koden kommer jag även förklara varje rad så det blir ännu mer solklart.
<!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="sv-SE">
<head>
<title>Titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>Rubrik</h1>
<p>En paragraf med text</p>
</body>
</html>
doctype - Det börjar med en Doctype, jag valde att använda en Doctype för XHTML 1.0 Strict.
html - I HTML Elementet finns attributet "xmlns" som står för XML NameSpace som ska finnas för att deklarera dokumentet som XHTML. xml-lang beskriver vad det är för språk på sidan.
head – Öppnar head, där lägger man sånt som inte ska visas i sidan, men ändå ska påverka sidan. Till exempel stilmallar, JavaScript etc.
title – Är ett Element som bestämmer titeln som visas längst upp i Webbläsar fönstret.
meta – Meta taggar kommer i olika utföranden och beskriver oftast sidan och dess innehåll. I detta fall beskriver meta taggen vad det är tecken på sidan. Iso-8859-1 informerar webbläsaren att sidan innehåller Västeuropeiska tecken, som å, ä, ö.
/head – Vi stänger head taggen.
body – Nu startar vi kroppen för webbsidan och inom body ska vi ha det vi vill visa på webbsidan.
h1 – Är ett rubrik Element, som vi sedan stänger.
p – Är en paragraf som man använder för att dela upp texter, som vi sedan stänger.
/body & /html – Sist men inte minst stänger vi body och html taggarna.
Föregående: Skillnaden mellan HTML och XHTML
Skillnaden mellan HTML och XHTML
XHTML som står för eXtensible HyperText Markup Text, är ett märkspråk och har samma djup med uttryck som HTML men är även anpassad för XML. Medans HTML kan vara ganska flexibel i sin syntax (uppbyggnad) så är XHTML väldigt strikt på att koden är väl formulerad.
Med enkla ord kan man säga att XHTML är en utbyggnad av HTML, som i utbyggnaden fått i sig lite av XML.
Om man ska koda i XHTML
Inget nästlande
När man kodade i HTML och använder sig av en massa olika taggar så kan det bli så att taggar stängs i fel ordning. Du öppnar en <p> tagg och i den taggen öppnar du en <span> tagg. Om du då stänger <p> taggen innan <span> taggen så har taggarna blivit nästlade och det är inget som gillas i XHTML.
Fel: <p><span>En liten text</p></span>
Rätt: <p><span>En liten text</span></p>
Allt ska stängas
Eftersom XHTML har mycket gemensamt med XML så ska även taggar som inte har någon stängningstagg stängas ordentligt. Detta gör man enkelt med att lägga till en / (snedstreck) i taggen.
Fel: <br>
Rätt: <br />
Värden ska vara i ett Attribut
I vissa Element när man arbetar med HTML, kan man skriva särskilda Värden utan att ha dem i ett attribut. Men i XHTML ska alla värden vara i ett attribut.
Fel: <option value="värde" selected>värde</option>
Rätt: <option value="värde" selected=”selected”>värde</option>
Värden måste även omslutas av ” (citationstecken).
Fel: <span class=vit>En vit text</span>
Rätt: <span class=”vit”>En vit text</span>
Smaksak
Om man ska välja att koda i HTML eller XHTML är så klart ett smakval, men jag föredrar XHTML så därför kodar jag i det, och därför kommer resterande artiklar i HTML skolan vara i XHTML.
Föregående: Vad är CSS?
Nästa: Ett XHTML dokument
Vad är CSS?
Css som står för Cascading Style Sheet är ett såkallat stilmallspråk och är till för att beskriva utseendet på dokument skrivna i märkspråk. Som till exempel HTML och XHTML, det går även att använda till XML. CSS styr helt enkelt utseendet på Elementen i HTML dokumentet som till exempel: färger, typsnitt, bakgrundsbilder, layout. Vad som helst i stort sett. Vilket innerbär att samma HTML dokument kan se olika ut med olika CSS mallar.
Syntax
CSS har en enkel uppbyggnad och använder sig av engelska nyckelord för att specificera olika stilar.
En stilmall består med en rad Reglemente, som har en eller flera Selectorer och en Declarations block, blocken omsluts av { } tecken. Inuti varje block har man en Egenskap, som följs utav ett : (kolon), sedan Värdet och till avslut ett ; (semikolon).
Selector { Egenskap : Värde ; }
Anropa en Selector
Om du vill att ett särskilt HTML Element ska ha en viss stil så ger man det Elementet Attributet ”class” eller ”id”. Det som skiljer sig mellan id och class är att id bara får användas en gång i samma HTML dokument medan class kan användas flera gånger om.
För att anropa en Selector i stilmallen ger du ditt class/id Attribut det namn på Selectoren som Värde.
Men om det är ett rent HTML element utan class eller id som du vill ge en viss stilmall döper du Selectoren till Elementnamnet, till exempel: body, a, p etc.
<html>
<head>
<style type="text/css">
<!--
body {
background-color: #ff0000;
}
-->
</style>
</head>
<body>
</body>
</html>
Om det är ett class som ska anropas så ska du ha en . (punkt) framför namnet på selectoren, till exempel: .vit
<style type="text/css">
<!--
.vit {
color: #ffffff;
}
-->
</style>
<span class="vit">texten som blir vit</span>
Och om det är ett id som ska anropas så ska du ha en # (fyrkant) framför namnet på selectoren, till exempel: #header
<style type="text/css">
<!--
#header {
width:300px
height:100px;
color: #ffffff;
background-color:#000000;
}
-->
</style>
<div id="header">Här visas texten i #header</div>
