Web (html+xhtml), CSS. Dagens föreläsning. Web - grundprinciper. Syfte Ge er grunderna för att skapa och publicera websidor.

Transkript

1 Web (html+xhtml), CSS 2D1553 Mediaproduktion Björn Hedin, NADA/KTH 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 Björn Hedin, NADA/KTH 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 Björn Hedin, NADA/KTH

2 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 Björn Hedin, NADA/KTH 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> Björn Hedin, NADA/KTH 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 Björn Hedin, NADA/KTH

3 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/> Björn Hedin, NADA/KTH 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 ( ) Björn Hedin, NADA/KTH 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> Björn Hedin, NADA/KTH

4 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 Björn Hedin, NADA/KTH 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 > Björn Hedin, NADA/KTH Absoluta länkar Absoluta länkar kan ligga på den lokala webservern eller på en extern webserver. Extern länk <a href= >extern</a> samma länk refererad från en annan fil på <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å <a href= 2D1553/index.html >relativ</a> Björn Hedin, NADA/KTH

5 Bilder Bilder infogas med elementet <img> som har ett attribut src vars värde är en referens till en bildfil. Extern bild <img src= /> Lokal relativt länkad bild <img src=../banan.gif /> Lokal absolut länkad bild <img src= /logos/grt_small.gif /> Björn Hedin, NADA/KTH <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 Björn Hedin, NADA/KTH <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> Björn Hedin, NADA/KTH

6 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> Björn Hedin, NADA/KTH 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 å Björn Hedin, NADA/KTH Kommentarer Det går att stoppa in kommentarer i html-dokument precis på samma sätt som i xml-dokument och sgmldokument  Björn Hedin, NADA/KTH

7 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 Björn Hedin, NADA/KTH 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 Björn Hedin, NADA/KTH 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å 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" " Björn Hedin, NADA/KTH

8 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 Björn Hedin, NADA/KTH 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>" Björn Hedin, NADA/KTH 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 Björn Hedin, NADA/KTH

9 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 Björn Hedin, NADA/KTH CSS- Cascading Stylesheets Björn Hedin, NADA/KTH 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 Björn Hedin, NADA/KTH

10 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 Björn Hedin, NADA/KTH 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> [ ] Björn Hedin, NADA/KTH 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 Björn Hedin, NADA/KTH

11 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= ISO 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 Björn Hedin, NADA/KTH 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> Björn Hedin, NADA/KTH 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 Björn Hedin, NADA/KTH

12 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 Björn Hedin, NADA/KTH 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) Björn Hedin, NADA/KTH 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 Björn Hedin, NADA/KTH

13 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! Björn Hedin, NADA/KTH 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 Björn Hedin, NADA/KTH 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 font-stretch:wider, ultra-expanded, semi-condensed etc. m.fl Björn Hedin, NADA/KTH

14 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 Björn Hedin, NADA/KTH 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% Björn Hedin, NADA/KTH 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 Björn Hedin, NADA/KTH

15 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> Björn Hedin, NADA/KTH 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 */ Björn Hedin, NADA/KTH 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> screen { p.test {font-family:verdana,sans-serif; print{ p.test {font-family:times,serif; screen,print { p.test {font-weight:bold </style> </head> <body> <p class= test >Hejsan</p> </body> </html> Björn Hedin, NADA/KTH

16 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 Björn Hedin, NADA/KTH 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 Björn Hedin, NADA/KTH 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 Björn Hedin, NADA/KTH

17 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 Björn Hedin, NADA/KTH 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 Björn Hedin, NADA/KTH 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 Björn Hedin, NADA/KTH

18 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) Björn Hedin, NADA/KTH