Embed Size (px)
DESCRIPTION
XHTML & CSS Introduktion. Erik Nahkala [email protected]. Några uttalanden om nätet…. ”Internet är en fluga som kanske blåser förbi. Jag tror inte att folk i längden kommer att vilja ägna så mycket tid, som det faktiskt tar, åt att surfa på nätet.” - PowerPoint PPT Presentation
Citation preview
Några uttalanden om nätet…
”Internet är en fluga som kanske blåser förbi. Jag tror inte att folk i längden kommer att vilja ägna så mycket tid, som det faktiskt tar, åt att surfa på nätet.”
12 maj 1996. Ines Uusman, IT-ansvarig minister
“Om två år ska 98 procent av hushållen ha tillgång till bredband”
Björn Rosengren, näringsminister, 2000
XHTML(Extensible HyperText Markup Language)
Vad är XHTML?
Markup languages
• SGML, Standard Generalized Markup Language– HTML, HyperText Markup Language– XML, eXtensible Markup Language • XHTML, eXtensible HyperText Markup Language• SVG, Scalable Vector Graphics• Atom• RSS, Really Simple Syndication (osv)
XHTML vs. HTML
XHTML …• Är XML kompatibelt• Kräver välformaterade dokument• Är Case sensitive• Stöder Namespaces• Är Semantiskt• Relativt bakåtkompatibelt med HTML
XHTML versioner
• XHTML 1.0– Strict– Transitional– Framesets
• XHTML 1.1• XHTML Mobile Profile• XHTML 2.0 (”kommer snart”)
XHTML 2.0
• Påbörjades 2002• Inte klart ännu• Kommer inte vara bakåtkompatibelt
Att skapa XHTML dokument
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang=”en" lang=”en"><head>
<title>Sidans titel</title></head><body>
</body></html>
XHTML uppbyggnad
• Element• Attribut
Element
• Element används för att strukturera upp information
• Exempel:– <table>– <p>– <strong>
Attribut
• Attribut används för att sätta egenskaper på element
• Exempel:– <div id=”minDiv”>– <p class=”intro”>– <img alt=”bildbeskrivning” />
Uppgift: http://www.w3schools.com
Demo
Uppgift: Personlig sida• Lite kort om dig själv• En bild• En top-fem lista• En lista över rekommenderade
glassar/filmer/skivor/böcker eller liknande.• En tabell• En länk
Extra om du redan kan:Defenitionslista, Ankarpunkter, formulär (utan funktion)
CSSCascading Style Sheets
Vad är CSS?
Beskriver för webbläsaren hur HTML/XHTML kod ska presenteras visuellt.
CSS Demo
http://w3schools.com/css/demo_default.htm
Historia
• HTML skapades för att beskriva struktur och semantik i text på webben.
• Netscape och Internet Explorer konkurerade om webben– Skapade egna taggar för att sätta färg och form på
webbsidor.
• W3C tog fram CSS och lanserade det som ett tillägg till HTML 4.0 för att lösa problemet
Fördelar med CSS
• Separerar design från information• Gör det enkelt att ändra design på alla sidor i
en webbplats
3 olika sätt att implementera
• Inline• Per fil• Extern fil
Inline - CSS
• Skrivs i style attributet• Föredelar– Enkelt för att testa
• Nackdelar– Går inte att återanvända enkelt– Blir mycket kod
• <p style=”color:red
Per fil - CSS
• Strivs i <style></style> taggen i <head></head> taggen.
• Existerar bara i den filen den finns i.• Fördelar– Kan definiera class, id och andra globala stilar
• Nackdelar– Måste skrivas i varje fil
<style> taggen
<style type="text/css" media="screen">
</style>
Extern fil - CSS
• Hämtas hem på ett av dessa sätt:– @import url(style.css) i <style> taggen– <link href=“style.css" rel="stylesheet"
type="text/css" /> i <head> taggen
Peka ut element
• En sorts element– Ex: <p>, <table>,<h1>
• En class• Ett id
Syntax
• selector {property: value;}
• Ex: p{color: blue;}• Ex 2:
table{color: blue;font-family: ”Times new roman”;
• }
Demo
Gruppering
h1,h2,h3 {color: red;
}
Genom att gruppera ihop element får alla samma utseende.
Klasser och Id
Klasser markeras med en . i CSS.HTML: <p class=’intro’></p>CSS: p.intro { color: red; }
Id markeras med ett # i CSS.HTML: <p id=’unik’></p>CSS: p#unik{ color: red; }
Multipla klasser
• Ett element i HTML koden kan ha flera klasser samtidigt.
Ex:<p class=’intro big’></p>Elementet ovan får då alla egenskaper för både intro och big klassen
Attribut
• input[type=”text”] { color: red; }
• Pekar ut alla input element som har text som värde i attributet type
• Ex: <input type=”text”></input>
”Sökvägar” i CSS
• Det är möjligt att genom CSS komma åt till exempel alla <p> som finns i en <div> på sidan.
CSS:div p {
color: red;}
Kommentera CSS
• Kommentarer i CSS skrivs mellan /* och */• Kommentarer läses inte av webbläsaren
Försköna era sidor
• Färger på text• Typsnitt• Bakgrund
• http://www.blooberry.com/indexdot/css/propindex/text.htm
Övning
Skapa en sida med en mittcentrerad kolumn. Texten ska dock vara vänstercentrerad.
Den ska fungera i både IE och FF.
Övning
Skapa en sida som innehåller det som syns i bilden till höger.
Den enda HTML koden du får ha i <body> är:
<div id='ett'></div><div id='tva'></div><div id='tre'></div><div id='fyra'></div>
Tips: Använd float.
CSS - Fusklapp
http://www.ilovejackdaniels.com/cheat-sheets/css-cheat-sheet/
LaborationWebbsidan CSS Zen Garden skapades för att folk skulle
kunna visa vad som är möjligt att skapa med enbart CSS.På sidan finns ett gigantiskt arkiv av olika designer på
samma sida. Ingen av designerna har haft möjlighet att påverka HTML koden utan enbart arbetat med CSS.
Er laboration går ut på att skapa en egen CSS till just sidan CSS Zen Garden. Instruktioner finns på deras sida.
Det är helt okej att arbeta i grupp men alla ska skapa en egen unik design. Tänk på att uppgiften går ut på att utmana sig själv i CSS och inte i design.
Webbsidans adress: http://www.csszengarden.com/
