Ulrik Söderström ulrik.soderstrom@tfe.umu.se 8 Dec 2008 Produktion för tryckta medier och webb XHTML 1
HTML Hypertext text som via hyperlänkar är förbunden med andra texter Uppmärkning sker med taggar 2
Uppdelning Struktur Utseende Beteende HTML 4.01 XHTML CSS JavaScript (ECMAscript) 3
HTML används för logisk formatering inte för utseende I HTML-dokumentet skall du formatera logiskt Dessa ord ska framhävas Detta är en tabell Detta är en länk Detta är en rubrik MEN du ska inte använda HTML för att styra utseendet hos sidan du ska inte ange kursiv stil, stilstorlek eller font i HTML Lämna detta till stilmallen CSS-dokumentet 4
Vad är XHTML? Omdefinition av HTML, från ett separat språk till en delmängd av XML Funnits sedan 1999 Kraftigt rationaliserat Total uppdelning av struktur, beteende och utseende 5
HTML 4.01 Tre versioner: Strict Strict är nästan samma sak som XHTML Transitional Transitional är för bakåtkompatibilitet Frameset Används för frames Standardiseringsorgan Document Type Definition 6
Standardisering W3C World Wide Web Consortium Över 500 medlemmar Industrier, forskningsinstitut, standardiseringsorgan, regeringar Standardiserar bland annat: HTML XHTML XML CSS 7
Grundläggande dokument <?xml version="1.0" encoding="utf-8"?> <!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>basdokument</title> </head> <body> <p>hello world</p> </body> </html> 8
En trädstruktur html > head > title > Min webbsida > body > h1 > Detta är en sida som > p > Inte för att det finns > a > Till TFE:s webbsida 9
XML version Deklarationen <?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="iso-8859-1"?> Skall alltid placeras överst i dokumentet före alla andra taggar 10
XHTML version <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> Anger vilken standard som dokumentet följer och var man kan hitta denna standard 11
Syntax Taggnamn Egenskap Värde body { background-color: #ddf; font-family: verdana, arial, sans-serif; margin-left: 30px; margin-top: 20px; } p { margin-bottom: 20px; } 12
HTML - taggen Sedan man angett DOCTYPE och XML standard så kommer det egentliga HTML dokumentet omgivet av starttaggen <html> och sluttaggen </html> html taggen innesluter taggarna <head> </head och <body> </body> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en > html taggen kan ha språkattribut XMLNS är referens till Extended Markup Language Name Space 13
Taggar utan innehåll I XHTML och HTML 4.01 Strict har alla taggar en starttagg och en sluttagg Det gäller även taggar som inte får ha något innehåll, t.ex. hr, br, img etc. Man kan deklarera en tagg som självavslutande i stället Man skriver alla taggar med små tecken Html-HTML, Meta-META, img-img 14
Taggar utan innehåll Gammal syntax Ny syntax <br> <br /> <img src= gubbe.gif > <img src= gubbe.gif /> <hr> <hr /> 15
Semantisk markup HTML ska hantera strukturer och innebörder, inte utseende Semantik = ordets betydelse Taggar som detaljstyr utseende hör inte hemma i modern HTML Bara fördelar: Lätt att byta utseende, bättre ranking i sökmotorer, underlättar för synskadade, fungerar i mobiltelefoner 16
Gammal HTML Modern HTML 17
Head Head-taggen markerar en sektion av dokumentet som innehåller overheadinformation titel, sökord, författarnamn med mera Mellan body-taggarna finns det egentliga dokumentet 18
Head Ligger alltid under taggen <html> Mellan starttaggen och sluttaggen kan dessa element finnas base link meta script style title 19
Head Doctype ska vara med <meta taggar> meta = information om informationen Infoga script, css m.m. i headern 20
Meta Meta elementet används för att specificera data kring dokumentet vem som är författare, nyckelord, övergripande beskrivningar av dokumentet med mera keywords nyckelord som kan användas av sökmotorer author - författarnamn Description kort beskrivning visas av sökmotorn som sammanfattning av dokumentet distribution - specificerar om dokumentet är globalt eller regionalt 21
Meta exempel <meta name="description" content= Grundkurs i hur man skriver XHTML-kod /> <meta name="keywords" content="xhtml, css" /> < meta name="author" content= Ulf Holmgren /> < meta name="copyright" content=" 2007 TFE. /> < meta name="date" content= 2007-11-10 /> 22
Meta - exempel <-- For speakers of US English --> < meta name="keywords" lang="en-us" content= color, New York"> <-- For speakers of British English --> < meta name="keywords" lang="en" content= colour, London"> 23
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/tr/xhtml-basic/xhtml-basic11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>meta-element</title> <meta name="autor" content="ulf Holmgren" /> <meta name="keywords" content="html, CSS, easy" /> <meta name="description" content="this is an easy course in XHTML" /> </head> <body> </body> </html> 24
Base Med elementet <base> kan man ange en basadress. Bilden som finns på adress http:/www.tfe.umu.se/courses/systemteknik/webteknik/xhtml/bil.jpg Kan enklare hittas med hjälp av basadressen http:/www.tfe.umu.se/courses/systemteknik/webteknik/xhtml/ och filnamnet bil.jpg 25
Exempel - base <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/tr/xhtml-basic/xhtml-basic11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <base href="http://www.tfe.umu.se/courses/systemteknik/xhtml/" ></base> <title>elementet BASE</title> </head> <body> <p>titta en bil</p> <p><img src="bil.jpg" alt="bil"/> </p> <p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/icons/valid-xhtml10" alt="valid XHTML 1.0 Strict" height="31" width="88" /></a> </p> </body> </html> 26
Body <h1> - <h6> = rubriker <p> = stycke <img> = bild <a> = länk <ul>, <ol>, <li> = listor <table> = tabeller 27
Body <br/> = radbrytning <hr/> = vågrätt streck <!--kommetar--> <! - - # include file = filnamn.html - -> Logiska taggar: <em> <strong> <abbr> <cite> <code> <q> m.fl. 28
Body Här kommer det som man också måste ha: <div> = division = avdelning <span> = avdelning inline (textradnivå) id= left class = red 29
Link Elementet link används för att referera till externa resurser Det kan finnas flera link-element i ett htmldokument En vanlig användning är att ge en referens till.css filer d.v.s filer som information om hur dokumentet skall se ut på skärmen 30
Link grundläggande Attribut href specificerar var resursen finns - href="stajl.css" Det finns ett antal typer av fördefinierade länkar Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help och Bookmark. 31
Link grundläggande Attribut Media specificerar målmedium screen är det som gäller om ingenting anges (default) - media="screen" andra media är t.x., tv, projection, handheld, print, braille, aural and all. type anger mediatyp type="text/css" Det kan exempelvis vara text/css eller text/javascript. 32
Link ett exempel <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/tr/xhtml-basic/xhtml-basic11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="stajl.css" media="screen" type="text/css" /> <title>elementet LINK</title> </head> <body> <h1>min BIL</h1> <p><img src="bil.jpg" alt="bil"/> </p> <p>titta en bil</p> </body> </html> 33
En länk åstadkommer att exempelvis en ny fil öppnas i det aktuella fönstret eller (eventuellt) i något annat fönster Länken består av En startpunkt ett ankare Ett mål en target och En destination När du klickar på länken kommer du att flyttas till en annan plats en annan fil, en annan plats i det aktuella dokumentet eller exempelvis till din mailhanterare. 34
Link - exempel p><a href="tfn_lista.html">telefonlista i separat dokument</a></p> <p><a onclick="window.open(this.href); return false;" href="tfn_lista.html">telefonlista i nytt fönster</a></p> <p><a href="#tfnlista">telefonlista i detta dokument</a></p> <div id="tfnlista"> <ul> <li> - Anders Andersson 090-12 35 67 </li> <li> - Bertil Bertislsson 080-23 45 67 </li> <li> - Caesar caesarsson 070 45 67 89</li> </ul></div> 35
Tre andra typer av länkar <body> <p> <a href="http://www.w3.org/tr/html401/sgml/entities. html">specialtecken</a><br/> <a href="mailto:nisse@gmail.com">skicka mail till Nisse</a> </p><br/> <a href="http://www.franzose.de/en/?gclid= CMbw2tuG0I8CFQRgMAodhWiZzA"><IMG SRC="bil6.jpg" ALT="bild på bil"></a><br/> <p> </body> 36
Ordnade listor, oordnade listor och definitionslistor Listans utseende styrs i CSS-filen 37
Listor Används till menyer Stil på menyn bestäms i CSS 38
Listor type=a: A B C type=1: siffror type=a: a b c type=i: romersk numrering, i ii iii Type=I: Stora romerska siffor, I II III start=x: x = startnummer i listan Byte av numrering inne i listan li value = önskad siffra. 39
Så här ser grundstrukturen ut för en tabell <table> <caption>tabellrubrik</caption> <tr> <th>kolumn <br/> rubrik 1</th> <th><h3>kolumn<br/>rubrik 2</h3></th> </tr> <tr> <td>cell 11</td> <td>cell 12</td> </tr> <tr> <td>cell 21</td> <td>cell 22</td> </tr> <tr> <td>cell 31</td> <td>cell 32</td> </tr> </table> 40
border Anger bredden på ramen runt varje element angivet i pixlar. cellpadding Anger hur mycket luft det skall vara mellan cellens innehåll och ramen cellspacing Anger hur mycket luft det ska vara mellan ramen och nästa cell. summary En text som beskriver tabellens innehåll texten är inte synlig på skärmen, men kan ev. finnas med om sidan presenteras i talade medier. width Anger tabellens totala bredd i pixlar eller som procent av det fönster där den ligger. 41
Addresser <address> Kontaktperson för XHTMLföreningen <br/> Eva Andersson<br/> Skogsstigen 8<br/> 903 45 Umeå </address> 42
Arbetsmetoder Läs på w3c eller w3cschools eller webbdesignskolan eller Jobba - gör - testa diskutera töj gränser Forum, webbplatser (Alistapart, EricMayerWebb), Blogga, Samla RSS:er etc. Surfa titta - analysera 43
Div och span är Containrar som används tillsammans med.css <?xml version="1.0" encoding="utf-8"?> <!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" xml:lang="en"> <head> <title>div and span ELEMENT</title> <link rel="stylesheet" href="stajl2.css" media="screen" type="text/css" /> </head> <body> <div class="kontainer1"> asd ssdlk ss sfk jkk aj s </div> <div class="kontainer2"> asd ssdlk ss sfk jkk aj s </div> <p> asd ssdlk <span>ss</span> sfk jkk aj s </p> body { background-color: #def; margin-left: 30px; margin-top: 20px; } p span {color: green}.kontainer1 {font-family: verdana, arial, sans-serif; color: black;}.kontainer2 {margin-left: 20px;color: yellow;color: blue;}.kontainer3 {margin-left: 30px;color: green;} <div class="kontainer3"> asd ssdlk ss sfk jkk aj s </div> </body> </html> 44
<h1>formattering som vi inte ska använda</h1> <h3>b (fet stil- andra raden)</h3> <p> ldf lsdfjk lf gslf slfk sfdl sfl slfkslfkslfslflskfslkfg<br/> <b>sdkl fjöglksdfjgsldfkjgöslgk</b> <p> <h3>big - andra raden</h3> <p> ldf lsdfjk lf gslf slfk sfdl sfl slfkslfkslfslflskfslkfg<br/> <big>sdkl fjöglksdfjgsldfkjgöslgk</big> <p> <h3>i - kursiv stil - andra raden</h3> <p> ldf lsdfjk lf gslf slfk sfdl sfl slfkslfkslfslflskfslkfg<br/> <i>sdkl fjöglksdfjgsldfkjgöslgk</i> <p> <h3>small - andra raden</h3> <p> ldf lsdfjk lf gslf slfk sfdl sfl slfkslfkslfslflskfslkfg<br/> <small>sdkl fjöglksdfjgsldfkjgöslgk</small> <p> <h3>sub - delar av raden</h3> <p> fjöglksdfjgs<sub>sdkl lgk</sub>ldfkjgös <p> <h3>sup - delar av raden</h3> <p> fjöglksdfjgs<sup>sdkl lgk</sup>ldfkjgös <p> <h3>tt - tele type - andra halvan av raden</h3> <p> ldf lsdfjk lf gslf slfk <tt>sdkl fjglksdfjgösldfkjgöslgk</tt> <p> 45
Resurser gfdw3schools CSS-skola: http://www.w3schools.com/css/default.asp DevGuru XHTML Tag Index: http://www.devguru.com/technologies/xhtml/quick ref/xhtml_index.html W3Schools XHTML-skola: http://www.w3schools.com/xhtml/default.asp Annika tigers hemsida: http://www.atiger.pp.se/sida.html 46