Medieteknik
Södertörns högskola
Xhtml – hjälp
Xhtml – hjälp _____________________________________________________________________ 1
Ett minimalt XHTML-dokument xhtml 1.0______________________________________________ 2
En sista tagg ska med för att berätta vilken teckenkodning vi använder __________________________2
Nu är mallen för ett xhtml-dokument klar ___________________________________________________3
Att öppna sin sida i webbläsaren (eller Notepad/Anteckningar) _________________________________4
Hämta och spara bilder __________________________________________________________________4
Modell för hur kod-taggar skrivs och avslutas ___________________________________________ 5
Exempel på koder __________________________________________________________________ 5
Block-element - ger automatisk styckeindelning, börjar alltid på ny rad __________________________5
Rubrik heading <h…>___________________________________________________________________________5
Stycke paragraph <p> ___________________________________________________________________________5
"Styckeavdelare" division <div> ___________________________________________________________________5
Listor ________________________________________________________________________________________6
Horisontell linje Horisontal ruler___________________________________________________________________6
table, form, address …___________________________________________________________________________6
Inline-element - påverkar inte radbrytning, påverkar enstaka ord eller innehåll direkt i texten utan att
hamna på ny rad ________________________________________________________________________7
Betonad text emphasize __________________________________________________________________________7
<em> texten brukar visas som kursiv </em> _________________________________________________________7
Starkt betonad text <strong> ______________________________________________________________________7
Radbrytning utan tom rad break ___________________________________________________________________7
"Ord-avdelare" <span> __________________________________________________________________________7
Osynlig kommentar _____________________________________________________________________________7
Bilder <img />_____________________________________________________________________ 8
Länkar <a> </a> __________________________________________________________________ 8
Mer om olika sorters länkar och sökvägar ______________________________________________ 9
Mer om relativa länkar: __________________________________________________________________________9
Fler attribut till <a>-taggen _______________________________________________________________________9
Specialtecken/Teckenkoder/Entities _______________________________________________________10
Validering ____________________________________________________________________________10
Nästling och inbördes ordning ____________________________________________________________11
Läs mer om HTML och xhtml____________________________________________________________________12
xhtml_help
3/28/2010
1(12)
Medieteknik
Södertörns högskola
Ett minimalt XHTML-dokument xhtml 1.0
med de fem obligatoriska grundtaggarna
<!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">
<head>
<title> Här skrivs "osynlig" titel,
blir t.ex. bokmärke/favorit,
visas i webbläsarens namnlist </title>
</head>
<body>
Här finns sidans hela synliga innehåll
</body>
</html>
<!DOCTYPE> berättar för
webbläsaren vilken standard vi
följer
html definierar hela sidan och
attributet xmlns berättar för en ev.
xml-läsare vilka taggar vi använder
head innehåller bara instruktioner
till webbläsaren och information om
sidan, inget skrivs ut i själva
webbläsarfönstret.
title innehåller sidans ”osynliga
namn”, blir t.ex. bokmärke
Det finns flera olika varianter av
XHTML1.0
body ska innehålla allt synligt
innehåll på sidan: text, bilder,
länkar m.m.
Om du använder övergångsversionen som accepterar "omoderna" (eng. deprecated)
taggar, använd istället denna Doctype-tagg:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
En sista tagg ska med för att berätta vilken teckenkodning vi använder
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Om du vill skriva med t.ex. polska eller ryska bokstäver behöver du hitta en mer
omfattande standard, läs mer om det i boken i så fall.
xhtml_help
3/28/2010
2(12)
Medieteknik
Södertörns högskola
Nu är mallen för ett xhtml-dokument klar
<!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">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>
Skriv in detta i ett dokument och spara som mall
för framtida xhtml-dokument
Tänk på att du alltid måste ge dina filer ändelsen .htm eller .html för att:
•
de ska öppnas av webbläsaren och tolkas enligt din uppmärkning
•
inte öppnas av texteditorn och läsas "ordagrannt"
Därför kan du gärna spara ovanstående mall med ändelsen .txt så att den:
•
öppnas av editorn så du kan skriva vidare och spara med ny filändelse
•
istället för att öppnas som ett "tomt" dokument i webbläsaren
xhtml_help
3/28/2010
3(12)
Medieteknik
Södertörns högskola
Att öppna sin sida i webbläsaren (eller Notepad/Anteckningar)
När vi skriver html-kod tittar vi på samma fil i två olika program.
Vilket program som öppnas när du dubbelklickar på filens ikon bestäms av filändelsen.
Vill vi själva bestämma i vilket program filen ska öppnas, så startar vi först programmet
och väljer sedan t.ex. File > Open
Öppna Firefox eller Internet Explorer
File/Arkiv > Open/Öppna (page) > Bläddra (browse/choose file) till din sparade fil.
Om du vill öppna din "index.html" som text och inte som webbsida igen,
måste du först öppna din ordbehandlare/texteditor t.ex. Notepad och välja File > Open.
Detta beror på att du gett din textfil ändelsen/suffixet .html eller .htm
Din dator kommer hädanefter alltid att öppna filen i din förvalda webbläsare när du bara dubbelklickar
på den, eftersom detta styrs av just filändelsen.
Hämta och spara bilder
För att spara en bild från webben: högerklicka på bilden, välj "save image as…"
Spara tillsvidare i samma katalog/mapp som din övningssida. Se upp med rättigheter, använd inte
bilder som du inte har rätt till.
Du kan hitta bilder som du kan använda för icke kommersiellt bruk t.ex. via
http://www.flickr.com eller http://www.sxc.hu
men observera att bara vissa av bilderna tillåter användning. Läs licensvillkoren.
xhtml_help
3/28/2010
4(12)
Medieteknik
Södertörns högskola
Modell för hur kod-taggar skrivs och avslutas
<kod attribut="värde" nästa_attribut="nästa_värde">Det
innehåll som ska påverkas av koden </kod>
På engelska så här: <element name attribute="value"> </element name>
t.ex. <a href="http://www.sh.se" title="SHs webbplats"> Till SH </a>
I html kan koderna skrivas med VERSALER <A> eller gemener <a>.
I xhtml är endast gemener tillåtna, därför använder vi det i fortsättningen.
Citationstecken kring attributets värde är nödvändigt bara om det innehåller mellanslag eller konstiga
tecken enligt nuvarande html-standard. I xhtml-standard är de obligatoriska. Därför använder vi det i
fortsättningen.
Se upp för att bara råka skriva in ett av citationstecknen! Det ger konstiga fel på sidan i webbläsaren!
Exempel på koder
Block-element - ger automatisk styckeindelning, börjar alltid på ny rad
Rubrik heading
<h1>Rubrik </h1>
h1, h2, h3, h4, h5, h6 (h6 är minst och "minst viktig")
Stycke paragraph
<p>
</p>
= radbrytning med en tomrad mellan raderna
"Styckeavdelare" division
Används för att märka ut ett avsnitt som ska påverkas t.ex. av css.
Ger också nytt stycke eftersom det är ett s.k. blockelement
<div> Avsnittet som ska påverkas på något sätt </div>
<div id="meny"> Min meny som ska påverkas</div>
jfr. span som du hittar under inline-element
xhtml_help
3/28/2010
5(12)
Medieteknik
Södertörns högskola
Listor
<ul> punktlista unordered list
eller
varje post i listan ska omges med <li>
<ol> numrerad lista ordered list
</li> list item
Exempel på punktlista:
<ul>
<li>alfa</li>
<li>beta</li>
<li>gamma</li>
</ul>
Exempel på "ordnad" lista:
<ol type="a">
<li>alfa</li>
<li>beta</li>
<li>gamma</li>
</ol>
Attributet type avgör vilken typ av "numrering" listan får. Förvalt (default) värde är vanliga siffror.
Du kan även använda i eller I för att få romerska siffror.
Horisontell linje Horisontal ruler
<hr /> (slut-tagg saknas)
Rekommenderas ej
Använd css istället för att indela sidan visuellt
table, form, address …
Fler block-element finns i boken
xhtml_help
3/28/2010
6(12)
Medieteknik
Södertörns högskola
Inline-element
påverkar inte radbrytning, påverkar enstaka ord eller innehåll direkt i
texten utan att hamna på ny rad
använd istället för Kursiv text italic
Betonad text emphasize
<em> texten brukar visas som kursiv </em>
<i> text som blir kursiv </i>
använd istället för Fet text bold
Starkt betonad text strong
<strong>texten brukar visas som fet</strong>
<b> text som blir fet </b>
Radbrytning utan tom rad break
<br />
Saknar sluttagg, därför ska man ta med ett snedstreck sist i taggen. Mellanslag före snedstrecket
underlättar för äldre webbläsare.
"Ord-avdelare" span
<span> några ord som ska påverkas på något sätt </span>
används för att "dela av" mitt i löpande text. Eftersom <span> är ett s.k. inline-element så ger det ingen
radbrytning utan kan användas för att ändra t.ex. ett enda ord eller en bokstav mitt på en rad. Används
sällan utom som avdelare ihop med stylesheets
jfr. <div> som du hittar under block-element.
Osynlig kommentar
<!--Osynlig kommentar--> som man kan lämna i koden med egna komihåg eller instruktioner
till andra kodare t.ex. Kan användas både i head-delen och body-delen av sidan. Skrivs inte ut på sidan
av webbläsaren.
xhtml_help
3/28/2010
7(12)
Medieteknik
Södertörns högskola
Bilder <img />
Är också exempel på ett inline-element.
Kod som säger åt webbläsaren att hämta en bild och att "infoga" den på sidan när den "skrivs ut" på
skärmen:
<img src="minbild.gif" /> Image Source (slut-tagg saknas, glöm ej snedstreck direkt i
taggen)
Ett exempel med flera attribut:
<img src ="minbild.gif" width="220" height="135" alt="Foto av Moas
b&aring;ge" />
Läs mer om hur du skriver sökvägen till bildfiler under "Länkar"
Länkar <a> </a>
Är också exempel på ett inline-element
Exempel på Absolut länk:
<a href="http://www.sh.se/medieteknik/personal.htm"> synlig länktext </a>
(Anchor Hypertext REFerence) (går till en unik plats på Internet)
Exempel på Relativ länk:
<a href="personal.htm"> synlig länktext</a>
länkar till en fil med namnet personal.htm i samma katalog.
(kan leda till samma adress som exemplet ovanför, om sidan man länkar ifrån ligger i katalogen
medieteknik, på sh:s server www)
Sökvägen är alltid relativ till den sida som koden skrivs in på.
xhtml_help
3/28/2010
8(12)
Medieteknik
Södertörns högskola
Mer om olika sorters länkar och sökvägar
<a href="http://www.sh.se/telge/publicera.htm">Absolut länk</a>
<a href ="../publicera.htm">Relativ länk</a>
<a href ="mailto:[email protected]">E-postlänk</a>
<a href ="mailto:[email protected]?subject=Hejsan">E-postlänk med ifyllt
ämne</a>
<a href ="#kapitel2">Länk till en viss plats på en lång sida</a>
<a id="kapitel2"></a> Här är en viss plats på en lång sida (det behöver inte finns text
inuti taggen, men glöm inte sluttaggen, den ska vara med ändå)
Mer om relativa länkar:
Hur man tar sig upp och ner i katalogstrukturen på sin sajt
../filnamn.htm betyder “gå en katalog uppåt och välj filen filnamn.htm"
filnamn.htm betyder "i samma katalog"
katalognamn/filnamn.htm betyder "gå till katalogen katalognamn i samma katalog och välj
sedan filen filnamn.htm
../../katalognamn/filnamn.htm betyder "gå först två steg upp i katalogstrukturen, där
finns katalogen katalognamn och i den ligger filen filnamn.htm
/katalognamn betyder "gå till sajtens rot, välj katalogen katalognamn och börja leta efter filen
index.htm" s.k. rotrelativ länk, används med försiktighet, blir lätt fel när sajten flyttas
Fler attribut till <a>-taggen
<a href ="../publicera.htm" title="Förklarande
text">Klicka här!</a>
Texten kommer fram när man för musen över länken
<a href ="../publicera.htm" target="_blank">Klicka
här!</a>
Länken öppnas i ett nytt fönster. Använd med försiktighet
xhtml_help
3/28/2010
9(12)
Medieteknik
Södertörns högskola
Specialtecken/Teckenkoder/Entities
börjar med &
slutar med ;
skrivs direkt i texten, inte inuti en kodtagg
På en PC kan man ofta strunta i att skriva om de svenska tecknen om sidorna aldrig kommer att redigeras på en
dator med annan plattform t.ex. en Mac, men man använder ofta vissa andra specialtecken för att få fler
möjligheter än vad som finns i 8 bitars ASCII-kod.
T.ex. &nbsp; som betyder "fast mellanslag" t.ex. 200&nbsp;000 för att skriva 200 000 som ej riskerar att
radbrytas. &nbsp; kan också användas för att hålla en tabellcell "öppen"
Exempel svenska tecken:
Å
&Aring;
å
&aring;
Ö
&Ouml;
ö
&ouml; Ä
&Auml; ä
&auml;
Fler exempel:
é
icke radbrytande mellanslag
mjukt bindstreck
&
©
&eacute;
&nbsp;
&shy; (stödet för detta är inte heltäckande)
&amp;
&copy;
Lista over specialtecken: http://www.w3schools.com/tags/ref_entities.asp
För att säkerställa att koden vi skrivit fungerar och validerar även om vi missat att skriva specialtecken
för å, ä och ö bör vi också lägga till denna kod i inuti head (finns med i mallen i början av detta
dokument)
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Validering
När vi arbetar med xhtml anger vi som bekant en dokumenttypsdeklaration, alltså vilken standard vi
valt att följa (xhtml -strict, -transitional, -frameset). För att detta inte ska bli en angivelse utan värde är
det viktigt att vi följer den standard vi säger oss följa i vår deklaration.
Validering gör vi hos W3C (World Wide Web Consortium) som finns på adressen
http://validator.w3.org/ . Alternativt kan du surfa in på www.w3.org och leta upp länken till html
validator.
Väl på plats kan du välja om du vill validera via:
URL (då måste sidan finnas på webben)
File Upload (då laddar du upp din fil från din dator)
Direct Input (då klistrar du in din text direkt i rutan)
xhtml_help
3/28/2010
10(12)
Medieteknik
Södertörns högskola
När du sedan validerar din kod får du resultatet för din sida presenterat för dig. Bli inte förskräckt om
du har många fel på sidan, ett litet fel kan generera många följdfel. Därför bör du alltid beta av felen ett
och ett uppifrån och ned. När du korrigerat ett fel validerar du om sidan och korrigerar sedan nästa.
Många fel beror på fel turordning på taggarna, se nästa avsnitt om nästling.
Nästling och inbördes ordning
När man arbetar med XHTML är det viktigt att koderna kommer i rätt ordning i förhållande till
varandra och det är här begreppet nästling kommer in.
Koderna måste följa samma mönster i stängningen som i öppningen. En kod som öppnas inuti en annan
kod måste stängas innan den omslutande koden stängs.
Exempel på "Först in, sist ut":
Rätt
<p> <em> Hej och välkommen </em> </p>
Fel
<p> <em> Hej och välkommen </p> </em>
En annan viktig sak att komma ihåg med XHTML är att vissa element är "större/tyngre" (block) än
andra element (inline) och att vissa element bara får finnas i en specifik kontext. För att följa xhtmlstandarden måste vi lära oss att arbeta efter detta. Detta är något man lär sig genom erfarenhet och
genom att validera sidorna noggrant.
Exempel på att ett block-element inte får finnas på insidan av ett inline-element:
Rätt
<p> <em> Hej och välkommen </em> </p>
Fel
<em> <p> Hej och välkommen </p> </em>
Exempel på att ett visst block-element (i detta fall rubrik) inte får finnas inuti ett annat visst
xhtml_help
3/28/2010
11(12)
Medieteknik
Södertörns högskola
block-element (i detta fall ett vanligt stycke):
Rätt
<h1> Rubriken </h1>
<p> Stycket </p>
Fel
<p><h1> Rubriken </h1>Stycket</p>
men
<div>
Rätt
<h1> Rubriken </h1>
<p> Stycket </p>
</div>
Dvs
Ett vanligt stycke p kan aldrig innehålla en rubrik h1-h6,
men t.ex. en div kan innehålla en rubrik, och ett stycke och en annan div och ….
Läs mer om HTML och xhtml
Utmärkt referens- och övningsmaterial kring bl.a. xhtml finns hos w3schools
http://www.w3schools.com/
Validator och urkunder och mycket annat hos World Wide Web Consortium w3.org
Bra hjälp att jobba enligt webbstandarder hos A list apart
http://www.alistapart.com/
xhtml_help
3/28/2010
12(12)
