» Kategori: XHTML-CSS
Länkar
Att använda länkar på hemsidor är såklart en självklarhet, nu ska vi gå igenom hur enkelt det är att skapa länkar så du kan ha undersidor på din webbsida.
Vi börjar med den grundläggande koden:
<a href=”index.html” title=”Detta är index.html”>Index</a>
När man klickar på denna länk hamnar man på “index.html” och när man håller musen över länken kommer en ruta med texten “Detta är index.html”. Title attributet är inget krav men är bra att skriva en beskrivande text på länken med hjälp av Title för sökmotorerna. Den text som är klickbar är texten ”Index”.
Om man vill länka till en extern sida t.ex. google.com, måste man skriva ”http://” innan länken, så här:
<a href=”http://www.google.se” title=”En sökmotor”>Google</a>
För att länken ska öppnas i ett nytt fönster använder vi oss av target=”_blank”, att tänka på är att target=”_blank” inte är ett validerat argument i XHTML 1.0 Strict.
<a href=”http://www.google.se” title=”En sökmotor” target="_blank">Google</a>
Länkar med CSS
Som standard kommer länken presenteras såhär:
- En obesökt länk är blå och understruken
- En besökt länk är lila och understruken
- En aktiv länk är röd och understruken
Detta kanske inte är så passande om man har gjort en design i helt andra färger, så då vänder man sig till CSS och ändrar utseendet på dom.
a {
color: #53b100;
text-decoration: none;
}
a:hover {
color: #c5ff92;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: underline;
}
Med denna CSS kod har länkarna helt andra färger:
- En obesökt länk är moss-grön och inte understruken
- En besökt länk är ljusgrön och inte understruken
- En aktiv länk är svart och understruken
Om du vill ändra mer på länkarnas utseende ta en titt på Ge dina texter stil.
Föregående: Ge dina Texter stil
Ge dina Texter stil
I denna digital era där bloggar är så pass stort som det är, måste man som blogg ägare göra texten lättläst för sina besökare. För att läsa på en datorskärm är inte samma sak som att läsa i en gammal hederlig bok. Man måste tänka på att inte ha för liten text, tillräckligt med mellanrum mellan raderna och troligen det viktigaste, att styckeindela texten!
Men bara för att du kanske inte äger en blogg, betyder det inte att du kan strunta i att göra texten lättläst. På Internet läser oftast inte besökaren hela texten, utan man börjar oftast med att scanna texten. Därför kan det vara bra att strukturera och skriva texten så den är lätt att först scanna, men också för att sedan läsas.
Så hur strukturerar man en text kanske ni undrar? Jo man kan använda sig av taggen <p> som står för ”paragraph” på svenska: paragraf, vilket är ganska solklart att man använder <p> för att styckeindela sin text.
<p>En liten text här som ligger i en paragraf</p> <p>En till paragraf så att det bildar ett mellanrum mellan texterna</p>
Resultat:
En liten text här som ligger i en paragraf
En till paragraf så att det bildar ett mellanrum mellan texterna
Men om man inte vill ha ett mellanrum mellan texten utan bara vill byta rad, då måste man använda sig utav taggen <br /> för html är visar inte vanlig retur-byt-rad. <br /> står officiellt för ”BReak” men min inofficiella betydelse för <br /> är ”Byt Rad”, så kom ihåg vart ni hörde det först, om ingen annan har hunnit före mig.
Här har vi en text som kommer att bry<br />tas när man minst anar det.
Resultat:
Här har vi en text som kommer att bry
tas när man minst anar det.
Som ni ser så blir det inte samma mellanrum mellan raderna när man använder <br /> istället för <p>, vilket är <br />’s syfte att vara ett vanligt rad byte. Nu kanske ni tänker att man kan använda två <br /> efter varann för att få samma mellanrum. Svaret är Ja det kan man men det är inget att föredra då <p> skapar ”snyggare” indelningar samt att html strukturen blir etiskt snyggare också, det är även lättare att ändra mellanrummet mellan dom olika paragraferna med CSS då man använder <p>.
Det finns olika sätt för att betona och dra uppmärksamhet till vissa ord, detta kan vara bra att tänka på för besökarna som scannar texten. Betona dom ord med Tjock textstil som ger ett bra sammanhang och piggar upp läsarnas intresse.
Textstilar i XHTML
Kan tänka mig att det är många som känner till dom tre vanligaste textstilarna, tjock, itaclic, understruken. Dom två första kan man göra med två olika taggar vardera, antingen med en som är Presentationsmärkning och den andra är en Strukturmärkning.
Läs mer om detta i Vad är html?
En Tjock text
<strong> - Våran strukturmärkning för tjock text, definierar ett ord som har en stark betoning. Ett ord inom <strong> tolkas med större vikt av sökmotorer.
<strong>En strong text</strong>
<b> - Är då våran presentationsmärkning som bara gör texten tjock, i jämfört med <strong>.
<b>En bold text</b>
En Italic text
<em> - Börjar med strukturmärkningen, ett ord inom <em></em> är betonet, medans <strong> var starkt betonat. Tolkas något lättare än <strong> av sökmotorer.
<em>En betonad text</em>
<i> – Visar bara att texten är Italic och är därför en presentationsmärkning.
<i>En italic text</i>
Detta är bra att veta så man vet vilket element man ska använda om man vill betona ett ord, eller bara göra den tjock eller italic för besökarna.
En understruken text
<u> - <u> är en presentationsmärkning och gör texten understruken för besökarna.
<u>En understruken text</u>
Andra presentationsmärkningar som kan vara bra att veta är element som <big></big> och <small></small>. Dom gör texten som dom omsluter stor och liten.
<big>Stor text</big>
<small>Liten text</small>
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
