Web (html+xhtml), CSS 2D1553 Mediaproduktion http://www.nada.kth.se/kurser/kth/2d1553/ 2003-11-04 Björn Hedin, NADA/KTH 2003 1 Dagens föreläsning Syfte Ge er grunderna för att skapa och publicera websidor. Mål Lära ut grunderna i html (utan grafiska editorer) Lära ut hur man bör skilja på innehåll och layout med hjälp av CSS Visa på skillnaderna mellan det gamla formatet html och det nya formatet xhtml 2003-11-04 Björn Hedin, NADA/KTH 2003 2 Web - grundprinciper Webben består i sin ursprungliga form av två huvudkomponenter. http - Hypertext Transfer Protocol Ett protokoll för att föra över små dokument över internet. Mer om detta om två föreläsningar html - Hypertext Markup Languate Ett märkspråk för att koda hypertextdokument, dvs textdokument med länkar till andra textdokument 2003-11-04 Björn Hedin, NADA/KTH 2003 3 1
Märkspråk Märkspråk är en familj av språk där olika informationselement omslutes av en tag med en semantisk betydelse. T.ex. <title>a Midsummer Night s Dream</title> Mängder med olika märkspråk finns med olika syften Html för websidor Wml för wap-sidor SVG för vektorgrafik SMIL för multimediapresentationer JDF för job tickets 2003-11-04 Björn Hedin, NADA/KTH 2003 4 Hello World Först ett mycket enkelt exempel. Element inleds med <elementnamn> och avslutas med </elementnamn> Olika märkspråk har olika element <html> <head> <title> A Title </title> </head> <body> <h1>hello World</h1> </body> </html> 2003-11-04 Björn Hedin, NADA/KTH 2003 5 Hierarkisk struktur <html> <head> <title> A Title </title> </head> <body> <h1>hello World</h1> </body> </html> html head body title h1 A Title Hello World Elementinnehåll Textinnehåll 2003-11-04 Björn Hedin, NADA/KTH 2003 6 2
Tomma element De flesta element har ett innehåll, antingen elementinnehåll eller textinnehåll Några element har dock inget innehåll, utan själva elementet har en betydelse i sig. Elementinnehåll <head> <title>tjohoo</title> </head> Textinnehåll <title>tjohoo</title> Tomt innehåll <br></br>, <hr></hr> eller kortformen <br/>, <hr/> 2003-11-04 Björn Hedin, NADA/KTH 2003 7 Attribut Några element kan även ha attribut, dvs någon information bunden till sig som beskriver/bestämmer ytterligare någon aspekt på elementet <img src="grt_sv.gif" alt="imagemap - turn on images! /> Tomt element med två attribut, src och alt Syntaxten är alltid attributnamn = attributvärde Det går lika bra med attributnamn = attributvärde Obs! Det måste vara vanliga citattecken ( ), inte typografiska citattecken ( ). 2003-11-04 Björn Hedin, NADA/KTH 2003 8 Länkar Hypertextdokument kan innehålla länkar till andra hypertextdokument (och andra filer mm). Länkar görs med elementet <a> som har ett attribut href vars attributvärde pekar ut resursen ifråga. Elementets textinnehåll är själva den klickbara texten. <a href= file2.html >Klicka till fil2</a> 2003-11-04 Björn Hedin, NADA/KTH 2003 9 3
Länkar (2) Länkar till filer i samma filsystem där den aktiva websidan ligger kan vara antingen relativa (utgående från den aktiva sidan) eller absoluta (utgående från roten på filsystemet). Länkar till externa webplatser är alltid absoluta 2003-11-04 Björn Hedin, NADA/KTH 2003 10 Relativa länkar Relativa länkar utgår från den mapp där den aktiva filen ligger. Filer i samma katalog anges med filnamn <a href= banan.html >samma katalog</a> Filer i underliggande kataloger anges med underkatalognamn/filnamn <a href= frukter/banan.html >underkatalog</a> Filer i överliggande katalog anges med../filnamn <a href=../banan.html > 2003-11-04 Björn Hedin, NADA/KTH 2003 11 Absoluta länkar Absoluta länkar kan ligga på den lokala webservern eller på en extern webserver. Extern länk <a href= http://www.nada.kth.se/kurser/kth/2d1553/index.html >extern</a> samma länk refererad från en annan fil på www.nada.kth.se <a href= /kurser/kth/2d1553/index.html >absolut lokal</a> och refererad som en relativ länk utgående från filen som ligger på http://www.nada.kth.se/kurser/kth/index.html <a href= 2D1553/index.html >relativ</a> 2003-11-04 Björn Hedin, NADA/KTH 2003 12 4
Bilder Bilder infogas med elementet <img> som har ett attribut src vars värde är en referens till en bildfil. Extern bild <img src= http://www.gt.kth.se/logos/grt_small.gif /> Lokal relativt länkad bild <img src=../banan.gif /> Lokal absolut länkad bild <img src= /logos/grt_small.gif /> 2003-11-04 Björn Hedin, NADA/KTH 2003 13 <html>, <head> och <body> Toppelementet heter <html> (ett html-dokument (eller XML-dokument) kan endast ha ett toppelement) Det har två, och exakt två barnelement: <head> och <body> <head> innehåller information om själva dokumentet, såsom titel och olika typer av metadata <body> innehåller själva innehållet: textstycken, bilder mm. 2003-11-04 Björn Hedin, NADA/KTH 2003 14 <p>, <h1> - <h6>, <title> <p> används för stycken (paragraphs) <p>ett stycke</p> <h1> till <h6> är olika rubriknivåer <h1>en rubrik på nivå 1</h1> <title> anväds för dokumenttiteln och är ett barnelement till <head> <title>rubriken</title> 2003-11-04 Björn Hedin, NADA/KTH 2003 15 5
Tabeller Tabeller används ofta i diverse sammanhang. Består huvudsakligen av tre sorters element <table> - själva tabellen <tr> - table row <td> - table data, själva cellerna där data placeras <table> <tr> <td>rad 1, cell 1</td> <td>rad 2, cell 2</td> </tr> <tr> <td>rad 2, cell 1</td> <td>rad 2, cell 2</td> </tr> </table> 2003-11-04 Björn Hedin, NADA/KTH 2003 16 Svenska tecken Som vanligt är inte stödet för icke-amerikanska tecken helt tillfredsställande. Å, ä, ö kan lagras som å, ä och ö ifall själva filen använder teckenkodningen unicode Annars kan de kodas ö å och liknande något kryptiska förkortningar. Då siffror är svåra att komma ihåg finns även ett antal mnemoniska förkortningar: ö Ä å motsvarar ö, Ä och å 2003-11-04 Björn Hedin, NADA/KTH 2003 17 Kommentarer Det går att stoppa in kommentarer i html-dokument precis på samma sätt som i xml-dokument och sgmldokument <!-- detta är en kommentar --> 2003-11-04 Björn Hedin, NADA/KTH 2003 18 6
html och xhtml Den senaste versionen av html heter xhtml och är till skillnad från html baserad på XML istället för SGML. Alla xhtml-dokument är alltså även xml-dokument, vilket innebär att man får tillgång till en mängd tekniker och mjukvaror som finns för xml (se t.ex. senare om CSS) Några viktiga skillnader gentemot html Alla tags måste avslutas, t.ex. <br></br> istället för <br> som det är/var i html Alla tagnamn och attributnamn ska vara med gemener. 2003-11-04 Björn Hedin, NADA/KTH 2003 19 Logiska mot fysiska tags I xhtml har man också gått längre i att separera innehåll från layout Tags såsom <font> och attribut som bgcolor är inte längre tillåtna, allt layoutinformation ska ligga i separata stilmallar, CSS. Bra separation av layout och innehåll underlättar vid rendrering när mottagaren inte är en grafisk webläsare, utan t.ex. en textbaserad webläsare eller en röstsynth. Hjälper även om ett program vill söka information i dokumentet, t.ex. för att skapa en innehållsförteckning. 2003-11-04 Björn Hedin, NADA/KTH 2003 20 Validering För att kontrollera om den xhtmlkod man genererat är korrekt kan man använda en teknik som kallas validering. Då kontrolleras att endast element som finns definierade i xhtmlvokabulären används, och att de används på rätt sätt. Valideringstjänst finns på http://validator.w3.org/ För att kunna validera en websida krävs att man lägger in en speciell inledning i html-dokumentet, där det talas om vilken html-version mm som används. <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> 2003-11-04 Björn Hedin, NADA/KTH 2003 21 7
Statiskt eller dynamiskt innehåll Det vi gör i detta moment av kursen är att skapa statiska sidor, dvs sitta med en texteditor och skapa sidor som inte ändras om inte själva sidan modifieras. Intressantare men svårare är att skapa innehållet dynamiskt, dvs ha ett program som genererar en ny html-sida vid varje access. 2003-11-04 Björn Hedin, NADA/KTH 2003 22 Den enklaste eller åtminstone äldsta tekniken för dynamiskt innehåll är cgi-script Cgi = common gateway interface Måste av säkerhetsskäl ligga på vissa fördefinierade platser på webservern. Dynamiskt innehåll med cgi-script Filen simplescript.cgi #!/bin/sh echo "Content-type:text/html" echo echo "<html>" echo " <head>" echo " <title> " echo " echo " <title> " echo " </head>" echo " <body>" echo " <h1>dagens datum =" date echo "</h1>" echo " </body>" echo "</html>" Ett enkelt script</title>" 2003-11-04 Björn Hedin, NADA/KTH 2003 23 Mer avancerade dynamiska dokument Exempeldokumentet var inte speciellt dynamiskt, det enda som ändras är datumet. Högre interaktivitetsnivå kan uppnås t.ex. genom att använda formulär där användaren kan mata in data. Detta kommer dock senare i Infsys/PHP-avsnittet. 2003-11-04 Björn Hedin, NADA/KTH 2003 24 8
Var läggs filerna Så länge man jobbar med statiska sidor går det utmärkt att jobba lokalt, dvs lägga sidorna på sin hårrdisk. Om man gör cgi-script måste sidorna dock läggas på en webserver Likaså måste sidorna läggas på en webserver när man vill att de ska göras åtkomliga för andra från internet. I unixsystem lägger man oftast sina privata websidor i en katalog som heter public_html som ska ligga direkt där man loggar in. 2003-11-04 Björn Hedin, NADA/KTH 2003 25 CSS- Cascading Stylesheets 2003-11-04 Björn Hedin, NADA/KTH 2003 26 Cascading Stylesheets Ett språk för att definiera hur XML-dokumen, html-dokument och xhtml-dokument ska rendreras på web, papper, TV, ljud etc. Rekommendation från W3C Är i sig inte XML-baserad, men opererar på XML-strukturer 2003-11-04 Björn Hedin, NADA/KTH 2003 27 9
CSS - Historiskt perspektiv html är byggt för att strukturera textdokument med textlänkar, oavsett presentationsmedium. Den kommersiella framgången för www drev på för att kunna göra mer estetiskt tilltalande dokument. Logiska element (t.ex. <h3>) används för att få en viss grafisk effekt, istället för att ange ett logiskt innehåll. Netscape & Microsoft startade tag-kriget där de lade till nya tags (<blink>,<font>) för att uppnå visuella resultat. Lösningen: Gör ett helt nytt språk för layout: CSS 2003-11-04 Björn Hedin, NADA/KTH 2003 28 Exempel Exempel: Förr Filen a.html [ ] <p> <font face= Helvetica > Text visas med helvetica </font> </p> [ ] Exempel: Nu Filen b.css p { font-family: Helvetica, sans-serif; Filen b.html <?xml-stylesheet type= text/css href= b.css?> [ ] <p> Text visas med helvetica </p> [ ] 2003-11-04 Björn Hedin, NADA/KTH 2003 29 Internt eller externt CSS Ett CSS kan antingen läggas i själva xml/html-dokumentet eller som en extern fil. Interna CSS har fördelen att de endast kräver en http-överföring. Nackdelen är att man behöver skriva samma CSS-kod i flera dokument -> svårare att göra förändringar. 2003-11-04 Björn Hedin, NADA/KTH 2003 30 10
Associering XML-dokument ->CSS För att associera ett CSS till ett XML-dokument lägger man in en process-instruktion i XMLdokumentet. Processintruktion i en XML-fil <?xml-stylesheet type= text/css href= b.css charset= ISO8859-1 title= Mitt Stylesheet media= screen?> type: MIME-typen text/css href: URI till css-filen charset: Teckenuppsättning title: Titel media: För vilket medium stylesheetet ska användas. Ett XML-dokument kan ha flera stylesheets associerade med sig, men väljer vilket det ska använda beroende på outputmedium. Media som finns är: screen -tty tv - projection handheld - print braille - aural All 2003-11-04 Björn Hedin, NADA/KTH 2003 31 Associering HTML-dokument ->CSS För att associera ett externt CSS till ett HTML-dokument lägger man vanligtvis in ett link-element i elementet head. Externt CSS + HTML.-fil <html> <head> </head> <body> </html> <link rel= stylesheet </link> </body> type= text/css href= test.css > För att associera ett internt CSS till ett HTML-dokument lägger man in ett style-element i elementet head. Internt CSS i en HTML.-fil <html> <head> <style type="text/css"> body { background-color: #ffffff; </style> </head> <body> </html> </body> 2003-11-04 Björn Hedin, NADA/KTH 2003 32 Grundprincipen är att hitta olika mönster med selectors i XMLdokumentet, och till detta sätta värdet på en egenskap, property. Mönster är exempelvis tagnamn. Egenskaper kan vara font-storlek. Grundprincipen: Mönster -> Beteende Exempel: Selector: Alla p-element p { font-family: Helvetica, sans-serif; Egenskap Egenskapsvärde 2003-11-04 Björn Hedin, NADA/KTH 2003 33 11
Olika selektorer Det finns en mängd olika selektorer med vilka man kan upptäcka olika typer av strukturer i XMLdokument. Exempelvis kan man finna ättlingar, barn, direkta barn, syskon och attribut. Exempel: * { font-size: Medium p a { font-size: Medium Matchar alla element Matchar alla a- element som är ättlingar till p- element 2003-11-04 Björn Hedin, NADA/KTH 2003 34 Olika selektorer Exempel: <p> <a></a> </p> Matchar Exempel: Matchar a-element som är omedelbara barn till p > a { p-element. font-size: Medium <p> <strong> <a>hej</a> </strong> </p> Matchar inte p + a { font-size: Medium Matchar alla a- element som följer direkt efter ett p- element (syskon) 2003-11-04 Björn Hedin, NADA/KTH 2003 35 Matchning på attribut Det går att matcha på attributs värde, om attributet har ett värde över huvud taget, delsträngar av attributvärden och ID-värden Exempel: a-element med href= a.html a[href= a.html ] {font-size: Medium a-element som har ett href-attribut a[href] {font-size: Medium a-element vars href innehåller delsträngen html a[href~= html ] {font-size: Medium 2003-11-04 Björn Hedin, NADA/KTH 2003 36 12
Pseudo-klasser och pseudo-element Pseudo-klasser och pseudo-element matchar på olika typer av metainformation i XMLdokumentet. De separeras från element/attribut med ett kolon. Exempel: Första barnelementen till p-element p:first-child {font-size: Medium Första bokstaven i banan-element banan:first-letter {font-size: Medium Första raden i banan-element banan:first-child {font-size: Medium Före (efter) ett banan-element banan:before {content: En banan! 2003-11-04 Björn Hedin, NADA/KTH 2003 37 Properties: Höjd/längd/storlek Det finns flera properties för att ange höjd/längd/storlek. border-width font-size line-height margin-left, margin-top, marginright, margin-bottom left, top height, width Det går att använda de flesta enheter som används i typografiska sammanhang. Absoluta, t.ex. cm, in, pt Relativat.ex. em, ex, px Exempel banan {line-height: 2.2em tomat {font-size:14pt; line-height:3ex Obs! Två properties till samma selektor, separerat med semikolon 2003-11-04 Björn Hedin, NADA/KTH 2003 38 Properties:Fonter För fonthantering finns ett antal properties. font-family: t.ex Helvetica, sansserif font-style: t.ex. italic, slanted font-size: absoluta värden som 12pt eller relativa värden som x-small font-variant: small-caps för kapitäler font-weight: bold, bolder, lighter eller på en skala från 100-900 font-stretch:wider, ultra-expanded, semi-condensed etc. m.fl. 2003-11-04 Björn Hedin, NADA/KTH 2003 39 13
Properties:Texter Text-properties hanterar sådant som indrag, justering och enkla transformer. text-indent: applicerbar endast på element med block-display. text-align: left, right, center, justify text-decoration: underline, overline, linethrough text-transform: capitalize, uppercase, lowercase white-space: pre för att bevara radbrydningar och whitespace. 2003-11-04 Björn Hedin, NADA/KTH 2003 40 Properties:Färger De tre viktigaste properties för färger som finns är Color (observera: amerikansk stavning) Background-color Border-color Fördefinierade färger Aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow Eller som hexadecimala färgrepresentationer p {color: #FFFFCC Eller P {color:rgb(100%,100%,70% 2003-11-04 Björn Hedin, NADA/KTH 2003 41 Avancerat 1: Räknare Det finns också möjligheter att använda variabler som räknare, och därefter använda räknarens värde. p:before { content: counter(banan). ; counter-increment: banan h1 { counter-reset: banan 2003-11-04 Björn Hedin, NADA/KTH 2003 42 14
Avancerat 2: Klasser Om man vill ha en specifik effekt på ett visst element, och vill att det ska gälla just det elementet och inget annat finns möjligheten att ange en klass för elementet ifråga. p.tomat { font-size:14pt <p class= tomat > Hej </p> 2003-11-04 Björn Hedin, NADA/KTH 2003 43 Avancerat 3: Pseudoklasser för länkar Det är vanligt att man vill ha olika färger på länkar beroende på om de är besökta eller ej. a:link {color: #FF0000 /* unvisited link */ a:visited {color: #00FF00 /* visited link */ a:hover {color: #FF00FF /* mouse over link */ a:active {color: #0000FF /* selected link */ 2003-11-04 Björn Hedin, NADA/KTH 2003 44 Avancerat 4: mediatyper Det går att specifiera olika egenskaper som ska gälla för olika mediatyper, t.ex. print, screen och aural. <html> <head> <style> @media screen { p.test {font-family:verdana,sans-serif; font-size:14px @media print{ p.test {font-family:times,serif; font-size:10px @media screen,print { p.test {font-weight:bold </style> </head> <body> <p class= test >Hejsan</p> </body> </html> 2003-11-04 Björn Hedin, NADA/KTH 2003 45 15
Avancerat 5: mediatypen print Flera egenskaper finns, som gäller endast för mediatypen print. De som är implementerade är page-break-after page-break-before För mer info se http://www.w3schools.com/css/css_ref_print.asp 2003-11-04 Björn Hedin, NADA/KTH 2003 46 Avancerat 6: mediatypen aural Bland de mer spännande möjligheterna är de att styra ljudet från en röst-synth. Inga implementationer finns dock än som jag känner till, men exempel på vad som finns i specifikationen är: h1, h2, h3, h4 { voice-family: male; richness: 80; cue-before: url("beep.au") För mer info se http://www.w3schools.com/css/css_ref_aural.asp 2003-11-04 Björn Hedin, NADA/KTH 2003 47 Browsersupport Historiskt sett har stöd i browsers varit mycket bristfälligt. Detta har gjort att många undvikit stylesheets. Idag är stödet bättre. Bra stöd i Opera (bäst), Mozilla och IE5+. Uselt stöd i Netscape 4.7 2003-11-04 Björn Hedin, NADA/KTH 2003 48 16
Begränsningar och möjligheter I CSS1 stöds endast html-taggar I CSS2 stöds alla XML-dokument vilket är mycket bra då innehåll blir fullständigt skiljt från presentation. I CSS3 kommer stöd finnas för t.ex. kolumner, paginering, kraftfullare selektorer och bättre stöd för icke-europeiska teckenuppsättningar. 2003-11-04 Björn Hedin, NADA/KTH 2003 49 Begränsningar och möjligheter Ett stort problem är att det inte går att ändra ordningen på element, utan deras innehåll visas (eller visas inte) sekventiellt. Detta kan dock hanteras med XSLT (mer om det nästa tillfälle). XSL-FO är ett mycket exaktare layoutspråk med vilket man kan göra mycket exakt layout. XSLT och XSL-FO är båda XML-baserade. 2003-11-04 Björn Hedin, NADA/KTH 2003 50 Framtiden I XHTML är layout-tags förbjudna, istället ska CSS användas. Några tänkbara scenarios för framtidens webproduktion. Enkla, statiska sidor görs i XHTML + CSS Dokument där man har en mer innehållsrik xml-struktur i botten (t.ex. recept, pjäser etc) använder den XML-strukturen + CSS Datastrukturer som kräver omordning av element eller som ska publiceras i flera kanaler (som web och wap) använder först XSLT-transformer för att strukturera innehållet, därefter CSS för media som stöds av CSS. Slutligen sidor som kräver bättre layout än vad XHTML+CSS kan erbjuda använder XSL-FO för att transformera och göra layout. 2003-11-04 Björn Hedin, NADA/KTH 2003 51 17
Sammanfattning html är ett bland många så kallade märkspråk. Används för att skapa websidor Består av element (tags). Tags kan ha Teckendatainnehåll Andra element som innehåll Ett antal attribut Hierarkisk struktur med ett topp-element html ska endast användas för struktur. CSS ska användas för att ge strukturen ett visst utseende (om man vill ha ett visst utseende det vill säga). 2003-11-04 Björn Hedin, NADA/KTH 2003 52 18