XHTML 1 Elektronisk publicering. Idag  Struktur och uppmärkning  Vad är (X)HTML?  Element, taggar och attribut  Klasser och.

Slides:



Advertisements
Liknande presentationer
Strukturerad dokumentation och XML
Advertisements

HTML - grunder. Program •Html kan skrivas i anteckningar, eller vilket annat textbehandlingsprogram som helst. Mitt tips: Notepad ++ Notepad ++ •Grafiska.
HTML – vad är det och varför ska vi använda det Och vad är XHTML.
G RUNDLÄGGANDE XML OCH CSS Mikael Gunnarsson och Helena Francke TLS, HyrData, Stockholm mars 2003.
II130V Konstruktion av webbsidor Välkommen till föreläsning 3 September 2007.
XHTML.
FTP, HTTP, HTML, XML och XHTML
1 MSPEL Föreläsning 1 DSV Peter Mozelius XML, XHTML, CSS och Java applets.
Mahmud Al Hakim Webmaster DAG 3 Mahmud Al Hakim
Mjukvara och nätverk Vad är det?.
Att bygga en fungerande webbplats
Textkodning: XML ”Having trouble de-coding the text, Albert?”
XHTML 1 Designa din egen webbsida. Idag  Struktur och uppmärkning  Vad är (X)HTML?  Element, taggar och attribut  Validering.
Programmering?. Förslag till innehåll programmeringens grundläggande teori webbredigering, webbprogrammering html xml wml (wap 1) xhtml css javascript.
DCV Idéskiss Design Jag tror att jag ska ha en mörk och stilren design på mitt DCV. Det ska finnas dynamisk funktionalitet där designen byts utan att sidan.
HEAD – HUVUDET I huvudet hittar du information om dokumentets titel, sökord, referenser till stildokument och annan information som normalt inte visas.
Programmeringteknik Webbdelen. HTML H yper T ext M arkup L anguage Märker upp sidans innehåll så att webbläsaren kan avgöra hur innehållet ska visas.
Webbteknik En kort introduktion. Innehåll Historisk återblick Tim Berners Lee 1992 Teknisk beskrivning Märkspråk Standardisering Trender.
HTML – vad är det och varför ska vi använda det
Webbutveckling grundkurs DA7710
XML i förhållande till HTML en kort jämförelse Ambjörn Naeve The Knowledge Management Research group Centrum för användarorienterad IT Design Kungliga.
Webbteknik lektion 3 Det handlar mer om stilmallar Per K, 2012.
Webbteknik lektion 2 Det handlar om stilmallar Per K, 2012.
XHTML och CSS En föreläsning om webbteknik , SK, PK TFE Umeå Universitet.
Webbteknik lektion 4 Det handlar mer om stilmallar Per K, 2012.
Webbteknik En kort introduktion. Innehåll Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender.
Webben – intro Första föreläsningen i kursen Webbutveckling.
Föreläsning 8 Appletprogram/fristående grafiska program Rita linjer, rektanglar mm Skriva text Byta färg Appletprogram html.
Stilark: CSS Digitalisering av text April 2005 Mats Dahlström.
Textkodning: XML ”What’s the matter, Albert? Having trouble decoding the text? ”
Först lite addenda till gårdagen …. (tomt element) eller (med elementinnehåll) attributet target för att identifiera ett mål Korsreferenser See especially.
Databaser i B2KUNO Johan Eklund. Hur går jag vidare? Avancerade tillämpningar:  Analysera data  Generera information Utveckla följande färdigheter:
WEBMASTER DAG 4 Mahmud Al Hakim
Textkodning 2 Dokumentrepresentation. Idag  Teckenuppsättningar  Validering  Metadata  Elementen div och span  Klasser och.
XSLT – en introduktion Digitalisering av kulturarvet.
DHTML Designa din egen webbsida.
XSLT – en introduktion Elektronisk publicering.
TEI Header Mats Dahlström Digitalisering av kulturarvet April 2007.
Online all the time, anywhere with anything Ytterligare ett alternativ är att gå via Inställningar för bibliotek. © NetIntegrate Sweden AB 1.Gå till bibliotek.
Arbeta med Arbortext Övningsuppgift DITA (PM01) 2 – KIT
(Cascading Style Sheets) Rebecca Landmér 2007 CSS.
CSS del 3 Kvarnbrinkx Medietyper En XHTML-sida kan ha olika CSS-filer för olika medier! Definieras med attributet “media” i link- taggen,
Webbutveckling Med fokus på grunder i html och css.
EXtensible Markup Language Digitalisering av kulturarvet
XHTML och något om CSS Produktion för tryckta Webbutveckling Kvarnbrink
XHTML & CSS Introduktion Erik Nahkala
TEXT – GRUNDERNA Det huvudsakliga innehållet i XHTML- dokument är text – brödtext, rubriker, avgränsande linjer.
Webbteknik En kort introduktion. Innehåll Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender.
Webbsidesutbildning Lennart Ek, Tel Stefan Fosseus,
XHTML Digitalisering av kulturarvet.
Dokumentarkitektur 29 augusti 2007 Standard, boring Mats Dahlström Kunskapsorganisation Dokumentrepresentation.
XHTML & CSS 2 del 2 Designa din egen webbsida. Idag  Boxmodellen  Bakgrundsbilder  Rubriker  Clear och float  Positionering.
© Björn Lindell, Datapedagogiskt Forum, SLU Hur kommer jag i gång med att göra web-sidor? Länkar “on line” på URL:
XHTML – Dokumentets grundstruktur Body - head. Grundläggande dokument
CopyRight Lars Valentin1 Strukturformat CSS Lars Valentin.
XSLT 2 Digitalisering av kulturarvet.
Föreläsning 13 Appletprogram/fristående grafiska program Arv Rita linjer, rektanglar mm Skriva text, byta färg Appletprogram & HTML Grafiska användargränssnitt.
XSLT 1 Digitalisering av kulturarvet.
1 2I1073 Föreläsning 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript.
CSS del 2 Kvarnbrink Mer elementreferens ID refererar man till med #-tecken #content { width: 600px; } Klassnamn har en punkt före.newsitem.
CSS del 1 Kvarnbrink I början… Bakgrunden var det enda man kunde byta färg på Allt var satt i Times Texten flödade över hela webbläsarfönstrets.
XHTML & CSS 2 del 1 Elektronisk publicering. Idag  Repetition  Teckenuppsättningar  Metadata  Mer om klasser och ID:n  CSS.
Textkodning 1 Dokumentrepresentation. Idag  Struktur och uppmärkning  Vad är (X)HTML?  Element, taggar och attribut  Standarder.
Webbteknik En kort introduktion. Innehåll Historisk återblick Tim Berners Lee 1992 Teknisk beskrivning Märkspråk Standardisering Trender.
Webbteknik En kort introduktion.
Om du jobbar i huset (ekero1)
IT Fördjupning Jon Wide
CSS del 1 Kvarnbrink
Internet A HTML Grunder
CSS del 1 Samuel Kvarnbrink
Presentationens avskrift:

XHTML 1 Elektronisk publicering

Idag  Struktur och uppmärkning  Vad är (X)HTML?  Element, taggar och attribut  Klasser och identifierare  Standarder  Inbäddade objekt  Hypertext

Var är vi? DATALOGIKGRÄNSSNITT XMLXSLTXHTML(+CSS)

XML, XSLT, XHTML och CSS XML XSLT CSS XHTML Omvandling

Strukturen i ett dokument Dokument Kapitel 1 Kapitel 2 Rubrik 1 Stycke 1 Stycke 2 Mening 1 Ord 1 Ord 2 Ord 3 Mening 2 Stycke 3 Kapitel 3

Uppmärkning  Uppmärkning = processen att bestämma (träd-) strukturen i ett dokument med hjälp av märken  Märken = taggar  Uppmärkning handlar inte om visuell formatering  Uppmärkning handlar alltså om strukturmässig design och inte layoutmässig dito

Visuell formatering SCENE III. A heath. Thunder. Enter the three witches. First Witch: Where hast thou been, sister? Second Witch: Killing swine. Third Witch: Sister, where thou? First Witch: A sailor's wife had chestnuts in her lap, and munch'd, and munch'd, and munch'd. "Give me!" quoth I: "Aroint thee, witch!" the rump-fed ronyon cries. Her husband's to Aleppo gone, master o' the Tiger: But in a sieve I'll thither sail, and, like a rat without a tail, I'll do, I'll do, and I'll do. Text lånad från

HTML  HyperText Markup Language  Skapades av Tim Berners-Lee  Resultatet av hopkopplingen mellan hypertext och TCP- och DNS-idéer  Definieras av SGML  Begränsad vokabulär

HTML  Tre typer av uppmärkning Struktur Presentation Referens  Strävan mot uppmärkning av struktur (innehåll) snarare än presentation (form)  För det senare används CSS

XHTML  En striktare variant av HTML  XML+HTML=XHTML  eXtensible HyperText Markup Language  Innehåller HTML-element  Skiljer på innehåll och presentation  Varför XHTML och inte HTML?

Uppmärkning med XHTML Scene III. A heath. Thunder. Enter the three witches. First Witch: Where hast thou been, sister? Second Witch: Killing swine. Third Witch: Sister, where thou? First Witch: A sailor's wife had chestnuts in her lap, and munch'd, and munch'd, and munch'd. "Give me!" quoth I: "Aroint thee, witch!" the rump-fed ronyon cries. Her husband's to Aleppo gone, master o' the Tiger: But in a sieve I'll thither sail, and, like a rat without a tail, I'll do, I'll do, and I'll do.

Element, taggar och attribut Macbeth Element Starttagg SluttaggInnehåll Attribut- värde Attribut Element- namn

Element  Vanliga element Start- och sluttagg Rubrik Stycke  Tomma element Stängs inom taggen

Jämför med trafikmärken

Attribut  Placeras i starttaggen  Kan vara obligatoriska… Högskolan i Borås  …eller valfria Det var en gång...

Jämför med trafikmärken

Strukturen i ett dokument html h1 div id="chapter1" h2 class="chapterHeading" p class="text" div id="chapter2" h2 class="chapterHeading" p class="text" span class="leader" span class="firstWord" span class="firstLetter" p class="legend"

Klasser  En klass är en grupp av element som identifieras av ett klassnamn  Elementen kan vara av samma typ men behöver inte vara det I XHTML-koden: Text I CSS-koden: p.text { color: blue; } Alternativt:.text { color: blue; }

Identifierare  En identifierare refererar till exakt ett element i ett dokument I XHTML-koden: A I CSS-koden: span#firstLetter { color: blue; font- size: 3em;} Alternativt: #firstLetter { color: blue; font-size: 3em;}

När ska vad användas?  Tumregel: använd id:n för sektioner (vanligtvis div-element)  id:n är också användbart för listor, särskilt länklistor  Använd klasser då flera element av samma typ ska ha samma visuella formatering  Tänk på att ett id alltid måste vara unikt!

Klasser och XML  Ett XML-element per klass i ontologin  Instanser av XML-element som förekommer mer än en gång i XML-dokumentet kan översättas till lämpligt HTML-element med tillhörande klassnamn

Receptsamlingens trädstruktur  recept namn ingrediens  namn  kategori  mängd enhet

Receptsamlingen uttryckt i XML Pasta Bolognese Vitlök Grönsak

XML, XSLT, XHTML och CSS XML XSLT CSS XHTML Omvandling

Receptsamlingen uttryckt i XHTML Receptsamling Pasta Bolognese Vitlök Grönsak 1-2 st... Notera att rubrik- elementen följer en hierarkisk ordning (jfr ett ordbehandlings- program)

div, h1, div, h2, div, p, span?  XHTML är i själva verket en DTD  DTD talar om… Vilka element och attribut som kan användas var och hur …vilket bland annat inbegriper vilka element som får finnas i vilka element  Block- och radelement

Block- och radelement  Blockelement Exempel: body, p, div, pre, ul, ol, dl, table, h1, h2 Ett blockelement kan innehålla andra block- element och samtliga radelement (samt text). p kan dock inte innehålla andra blockelement. body, ul, ol, dl och table kan inte innehålla text, de måste innehålla andra element. Ett blockelement innebär alltid en radbrytning före och efter elementet.

Block- och radelement  Radelement Exempel: span, img, strong, em, a Radelement kan enbart innehålla andra radelement samt text.

Regler för element  Gemener används för taggnamn och attributnamn Rätt: Fel:  Citationstecken omger attribut Rätt: Länk Fel: Länk

Regler för element  Överlapp är inte tillåtet Rätt: Fet text i ett stycke. Fel: Fet text i ett stycke.  Element måste stängas Rätt: Ett stycke text. Ett annat stycke text. Fel: Ett stycke text. Ett annat stycke text. Rätt: Fel:

Kommentarer  Med märkena kan man infoga kommentarer i koden  Exempel:  Kod kan även kommenteras bort för att webbläsaren inte ska tolka den  Exempel: Rubrik -->  Används ofta då JavaScript och CSS-kod ska döljas för äldre webbläsare

När ska vilket element användas?  p för uppmärkning av hela stycken  span för uppmärkning av enstaka ord och meningar (inom ett annat element)  div för uppmärkning av större sektioner  br för kontrollerade radbrytningar inom ett element  br ska aldrig användas som mellanrum mellan två element

Standarder  Standardiseringsorganet W3C World Wide Web Consortium  W3C skapar dokumenttypsdefinitionerna som man hänvisar till i elementet DOCTYPE  CSS, HTML, RDF, XHTML, XML är standarder utvecklade av W3C

Standarder  Olika versioner av HTML har utvecklats  4.01 är den senaste versionen  XHTML är den senaste standarden  HTML 4.01 är ett försök att skapa renare kod genom att skilja på innehåll och presentation  XHTML drar detta ett steg ytterligare

Strukturen i ett XHTML-dokument DOCTYPE Talar om vilken dokumenttypsdefinition som används HEAD Innehåller titel, metadata, eventuella skript och stilmallar BODY Sidans innehåll, det som visas i webbläsarfönstret

Obligatoriska delar Titel placeras här

DOCTYPE  Dokumenttypsdeklaration  Pekar på en dokumenttypsdefinition (DTD)  En DTD specificerar de element och attribut som är tillåtna  Flera DTD:er finns Strict Transitional Frameset

Strict  Skiljer helt på innehåll och presentation etc…

Transitional  Lite mer tillåtande etc…  Används ofta tillsammans med Content Management-system  Tillåter bland annat länkattributet target

Validering  Kontrollera att dokumentet är korrekt kodat enligt angiven DTD   Varför?

Strukturen i HEAD headHuvud titleTitel styleIntern eller importerad stilmall linkLänk till extern stilmall scriptInteraktivitet

Strukturen i BODY bodyKropp divSektion h1Rubrik h2Underrubrik pStycke ul, ol, dlLista preFörformatterad text

Hyperlänk  Länkar infogas i dokumentet  En länk består av: 1 – Länktext 2 – Destination (url) 3 – Mål (önskat webbläsarfönster, "_blank"=nytt fönster) 4 – Titel (en beskrivning på vart länken leder)  Högskolan i Borås (1)

Hyperlänk  En url kan vara relativ eller absolut  är exempel på en absolut url Högskolan i Borås  start.htm är exempel på en relativ url Till startsidan

Relativ url  En relativ url utgår från den mapp där det aktuella dokumentet befinner sig  Med hjälp av../ och mappnamn kan man navigera i mapphierarkin Exempel 1: Om filen befinner sig ett steg upp i hierarkin  Till startsidan Exempel 2: Om filen befinner sig i en annan mapp på samma nivå i hierarkin  Länk till bild.gif Exempel 3: Om filen befinner sig i samma mapp  Hem

Inbäddning av bilder  En bild infogas i ett dokument med hjälp av taggen  innehåller två obligatoriska uppgifter: 1 – Bildens url (src) 2 – Alternativ text (alt)  Exempel:

En bild som en del av en länk  Bilder kan användas som länkar

Tabeller  Skapades främst för att strukturera tabulära data (som i ett excel-ark)…  …men används ofta för layout där tabellen utgör ett rutnät i vilket HTML-elementen infogas

En tabell består av…  Själva tabellen  Tabellrad  Tabell-/kolumnrubrik  Cell

Exempel på en tabell Moment Tid Lokal XHTML A604, A608

Mer om tabeller  Med attributen colspan och rowspan kan man skapa celler som spänner över flera kolumner och rader  anger att cellen spänner över två kolumner  anger att cellen spänner över två rader

Exempel 1 Moment Tid Lokal XHTML A604, A608 Cell som spänner över hela tabellens bredd

Exempel 2 Moment Tid Lokal Cell som spänner över hela tabellens höjd XHTML A604, A608 Cell som spänner över tre kolumner

Listor - numrerad XHTML 1 CSS 1 XHTML 2 1. XHTML 1 2. CSS 1 3. XHTML 2

Listor - onumrerad XHTML 1 CSS 1 XHTML 2 XHTML 1 CSS 1 XHTML 2

Listor - definitionslista XHTML 1 Inledande föreläsning om XHTML CSS 1 Inledande föreläsning om CSS XHTML 2 Andra föreläsningen om XHTML XHTML 1 Inledande föreläsning om XHTML CSS 1 Inledande föreläsning om CSS XHTML 2 Andra föreläsningen om XHTML