XHTML och CSS

Tillbaka till filarkivet

Filer

Verktyg

Kommentarer (1)
Utskriftsvänligt format

Betyg

markedunmaked 5

Vad är XHTML och CSS samt hur använder man det?

Navigation:

Text - Introduktion

Introduktion


Den här guiden är riktad till de som har designat hemsidor med vanlig HTML under en tid och kanske använt tabeller som designverktyg men vill veta mer om det nya sättet att designa hemsidor, nämligen XHTML och CSS. Det är inte en artikel som går igenom varje egenskap som elementen i XHTML kan ha, inte alls. Detta är en artikel som är tänkt att den ska väcka intresse för XHTML och CSS och ge en liten knuff på vägen till sidor med riktiga layouter som är lätta att ändra och som är riktigt kompatibla.




XHTML


XHTML står för EXtensible HyperText Markup Language och är väldigt likt HTML 4.01, skillnaden ligger i att XHTML är mer strikt och är således lättare att tolkas rätt i olika webbläsare. Det finns nämligen många hemsidor på Internet som har dålig HTML, det visas rätt i vissa webbläsare som tolkar koden på ett snällt sätt, t.ex. Microsofts Internet Explorer. Men med andra webbläsare som är mer korrekta i tolkningen av kod så ser sidorna inte alls bra ut, XHTML tillåter inte dålig kod som bara visas rätt i vissa webbläsare och på så sätt visas koden rätt i flera webbläsare. Man måste t.ex. nästla element rätt (man får t.ex. inte skriva <p><center>Test</p></center>) och alla element måste skrivas med små bokstäver.




CSS


För att få ett mer enhetligt utseende mellan olika undersidor på en hemsida och för att kunna få sidor där man skiljer mellan layout och innehåll så ska vi använda oss av CSS. Genom att använda CSS så slipper man skriva saker som detta:

  1.  
  2. <center><h1><font color=EUR#FFFFFFEUR>Rubrik</font></h1></center>
  3.


Man kan istället skriva såhär:

  1.  
  2. <h1>Rubrik</h1>
  3.


Man definierar sedan i en stylesheet vad h1 ska betyda, man kan då välja att den ska bli centrerad och ha en viss färg t.ex. På detta sätt slipper man ha all layoutinformation i innehållet på sidan, det blir då lättare att läsa koden både för människor och t.ex. sökrobotar som vill veta vad som finns på din sida.
CSS står för Cascading Style Sheets och är ett sätt att definiera hur HTML-element ska visas, t.ex. berätta att alla paragrafelement (<p>) ska ha färgen vit.




Ett första exempel


Nu tänkte jag göra en liten sida som använder XHTML och CSS och förklara lite hur man gör när man designar med hjälp av dessa tekniker.
Låt oss säga att vi vill ha en sida med en meny och en del med innehåll för den speciella undersidan. Vi börjar med förstasidan, såhär skulle den kunna se ut:

  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//SV" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv">
  5. <head>
  6. <title>XHTML och CSS</title> 
  7. <link href="style.css" rel="stylesheet" type="text/css">
  8. </head>
  9. <body>
  10. <div id=EURmenyEUR>
  11. 		<a href=EURindex.htmEUR>Startsidan</a>
  12. 	[/CODE]
  13. 	<div id=EURinnehållEUR>
  14. 		<h1>Startsidan</h1>
  15. 		<p>Välkommen till min första sida som är skapad med XHTML och CSS!</p>
  16. [/CODE]
  17. </body>
  18. </html>
  19.


Den första raden berättar vilken typ av dokument det är, i vårat fall är det ett XHTML 1.1 dokument, vill du ha en annan dokumenttyp kan du kolla på http://www.w3.org/ (World Wide Web Consortium, förkortas W3C)
,,ven i head-elementet måste vi förklara att det är ett XHTML-dokument och att det är på svenska, även här finns det fler alternativ som du kan läsa om på W3C.
Sedan kommer två helt vanliga rader som ser ut precis som i vanlig HTML, XHTML är ju som sagt väldigt likt HTML.
På den femte raden kommer någonting nytt, det är en rad som förklarar att vi använder oss av en stylesheet som heter style.css. Efter det kommer ännu några rader med vanlig HTML och inte förrän det första div-elementet har vi något nytt, om ens det är nytt. Div-elementet används här för att få det här stycket av koden att få vissa speciella egenskaper, i detta fallet ska vi få menyn att hamna i ett eget lager som vi lätt kan placera vart vi vill på sidan.
I div-elementet finns en länk och ett br-element. Som du ser så står det <br /> och inte <br> som i vanlig HTML. Detta är för att alla element måste avslutas, har de inget speciellt avslutningselement (som t.ex. </a>) så skriver man avslutningen inom samma taggar som början.ssss
Resten av dokumentet är bara upprepningar av vad som stod innan, vi har en div med innehållet på sidan i, precis som menyn.

Såhär skulle ett stylesheet till dokumentet kunna se ut:

  1.  
  2. #meny {
  3. 	position:absolute; 
  4. 	left:50px; 
  5. 	top:100px; 
  6. 	width:150px; 
  7. 	height:150px; 
  8. 	z-index:1; 
  9. 	padding: 5px; 
  10. 	background-color: #EEEEEE; 
  11. 	border: 1px solid #000000;
  12. }
  13. #innehåll {
  14. 	position:absolute; 
  15. 	left:250px; 
  16. 	top:50px; 
  17. 	width:500px; 
  18. 	z-index:1; 
  19. 	padding: 5px; 
  20. 	background-color: #EEEEEE; 
  21. 	border: 1px solid #000000;
  22. }
  23. p {
  24. font-family: Verdana, Arial, Helvetica, sans-serif;
  25. 	font-size: 14px;
  26. 	font-weight: bold;
  27. }
  28.


För divarna med id-attribut skriver man alltså #namn för att definiera vilka egenskaper de ska ha och för vanliga HTML-element så skriver man bara namnet på elementet. Egenskaperna skrivs i detta formatet:
attributets_namn: värde;
T.ex. left: 50px; som betyder att lagret ska börja 50 pixlar från vänsterkanten av sidan. Attributens namn borde vara ganska självförklarande, de enda som behöver mer förklaring borde vara position: absolute; som betyder att positionen av lagret ska vara exakt där man anger det och inte relativt till något annat och z-index som berättar vilken EURnivåEUR lagret ska ligga på så att säga, ett lager med högre z-index hamnar ovanför lager med lägre om de skulle ligga på varandra.




Jag vill lära mig mer, vart ska jag leta?


Du bör definitivt kolla på W3Cs hemsida, du hittar den på www.w3.org , de har även en site som heter W3C Schools som du hittar på http://www.w3schools.com/, där har de bland annat en CSS och en XHTML guide som beskriver det hela lite mer grundligt, där står om precis alla attribut och värdet och de har en massa exempel på hur man använder dem.
Detta http://www.westciv.com/style_master/academy/css_tutorial/ är också ett hett tips, jag har inte läst igenom den men den verkar gå igenom allt grundligt och bra.
,,r du inte övertygad om att XHTML och CSS är en bättre metod att utvecka hemsidor kanske du borde ta en titt här http://standardice.com/articles/seybold/.
Ni måste förstås också validera era sidor med W3Cs Validator, det är ett verktyg som kontrollerar att koden på era sidor är korrekt så att det säkert visas bra i alla webbläsare, här finner du den http://validator.w3.org/.
På http://www.alistapart.com och http://www.456bereastreet.com/lab/webbutveckling_med_standarder/ kan du också hitta en del information, den senare är på svenska.



Nu tackar jag för mig och hoppas att denna artikel har väckt erat intresse om XHTML och CSS för att göra sidor med fina layouter som är lätta att ändra och som är kompatibla med många webbläsare!

Slut

Navigation:

Till toppen