Markup: HTML en CSS Hoorcollege Webdesign 3 2 mei 2014 Frans Wiering

1

Inhoud



XHTML XML en toepassingen basis CSS



aantal slides ontleend aan:

 

 

Anders Møller & Michael I. Schwartzbach. An Introduction to XML and Web Technologies. Addison-Wesley, 2006 Web Technologie slides van Lennart Herlaar 

http://www.cs.uu.nl/docs/vakken/b2wt/

2

Ter herinnering 

Vak Webdesign kent 3 dimensies   



ontwerp implementatie gebruik

voorgeschiedenis  

gedistribueerde netwerken sinds jaren ‘60 Internet stamt uit de jaren ‘70 



context: defensie en universiteiten

World Wide Web   

Tim Berners-Lee, 1989 verbindt documenttechnologie, hypertext en Internet nieuw: HTTP, HTML 3

Fases van ontwikkeling 

Web 1.0 (1989–2003), HTML bovenop HTTP   



Web 2.0 (2004–2010), Web 1.0 + DHTML, AJAX   



statisch, geconsumeerd door menselijke gebruikers relatief weinig auteurs Browser Wars en standaardisatie geconsumeerd door mens en machine user generated content dynamiek, interactiviteit, communities, social media

Modern Web (2011–), Web 2.0 + HTML5  

mobile, cloud computing, real-time desktop paradigma

Web 1.0: standaardisatie 

hoofdpunten 

duidelijk onderscheid tussen structuur en presentatie  



opschonen HTML vocabulaire   



ongewenste elementen en attributen worden ‘deprecated’ voorbeelden: , , , meeste betreffen vormgeving, hoort in stylesheet (CSS)

XML syntaxis  



XHTML: structuur (en daarin content) CSS: presentatie

eXtensible Markup Language XHTML 1.0 = HTML 4.01 met XML syntaxis

standaardisatieproces gestuurd door World Wide Web Consortium (W3C)

11

Structuur versus Presentatie

Logical structure

Physical layout (‘presentatie’)

•Wat is het?

•Hoe ziet het eruit?

•the page starts with a header •the entries are written in a list •numbers are emphasized

•headers are centered, huge, and grey •lists have square bullets •emphasis is rendered in bold-style italics

•‘descriptive markup’ XHTML

•‘procedural markup’  CSS 12

Waarom dit onderscheid? 

Denk aan de ‘planes’ van Garrett (college 2) 



Argumenten Eric Meyer (CSS guru, http://meyerweb.com/)    



skeleton en surface

gemakkelijker onderhoud (1 stijl voor alle pagina’s op site) betere indexering content. Search engines hebben wat aan structuur, niet aan vormgeving voor geavanceerde presentatie moet documentstructuur bekend zijn accessibility: vormgeving kan aan persoonlijke behoeften worden aangepast, op basis structuur

en verder nuttig voor:  

aggregeren van content uit verschillende bronnen & databases automatische verwerking / transformatie content door software

13

Survivor’s Guide to XHTML

14

Waaruit bestaat markup? start tag

attribuut

end tag



elementen  



empty tag

content gemarkeerd door ‘tags’: start tag en end tag: en empty elements (let op afsluiting): <script/>

attributen   

eigenschappen van elementen, bv target van een link gekoppeld aan start tag of empty tag elk attribuut heeft naam en waarde: class=“head” 15

Markup heeft een boomstructuur start tag

attribuut

empty tag

end tag

html head meta

title

body link

script

boomstructuur komt terug in Document Object Model (DOM) belangrijk voor JavaScript

div

div

div

p

16

Minimale XHTML-file (strict) <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>  

DOCTYPE declaratie: verwijst naar DTD (‘grammatica’) van XHTML drie DTDs voor drie tagsets:   

XHTML Strict: alle deprecated onderdelen verwijderd XHTML Transitional: bevat deprecated onderdelen HTML XHTML Frameset: staat deprecated en frames toe



<meta> tag specificeert o.a. character set: hier utf-8



deze file is valide tegen officiële validator 



http://validator.w3.org/check

let op benodigde overhead in rood 

essentieel, neem over 17

CSS en JavaScript aanroepen <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="images/vakscript.js"/>



scheiding structuur, presentatie en interactiviteit 



JavaScript en CSS in aparte files

ook mogelijk, maar geen goed gebruik  

CSS en JavaScript in attributen in aparte secties in 18

Voornaamste content-elementen 

werkpaarden       



container elementen (geen expliciete semantiek)    



lopende tekst: h1-h6; p tabellen: table, tr, td, th lijsten: ul, ol, li nadruk: em, strong (in plaats van i, b) hyperlink: a afbeelding: img formulieren: form, input, select, option block: div inline: span content van andere site: iframe belangrijk voor moderne layout

compleet overzicht: http://xhtml.com/en/xhtml/reference/ 19

h1-h6 en p

20

Tabel

21

Lijsten en nadruk

22

Afbeelding

23

Markup voor formulieren

    

: het hele formulier, met hieraan gekoppeld een of andere actie : verschillende typen input (text, checkbox, radio button etc. <select> en : keuzelijst (spreekt voor zich)

: berekening (HTML5)

24

Formulier

---

Small Medium Large

---

Cheese Pepperoni Anchovies

---

<select name="bar"> Small Medium Large

---

<select name="baz" multiple="multiple"> Cheese Pepperoni Anchovies

---

Write something here...

---

---

---

---

---

---

25

Block level versus inline 

gaat over de flow van de content 

Block level elementen forceren een line break en introduceren vaak ook verticale whitespace



Inline elementen onderbreken de flow niet



Block level:

,

,

, ,

, …



Inline: , <strong>, , ,
, …

div en span

27

Pagina met meerdere blokken  

opbouw uit drie blokken deprecated zijn:  



werken met werken met

geaccepteerd is   



werken met

positioneren met CSS let op id attribuut: om elementen uniek te maken gebruikattribuut id class attribuut om elementen te categoriseren



Webdesign

Laatste Nieuws



28



: structuur & presentatie



pagina met meerdere blokken, let op class en id attributen

Hyperlinking  

startpunt (source anchor) eindpunt (destination anchor)  

absolute/relatieve URL en/of fragment identifier  



element met id attribuut (dus uniek) deprecated:

links gaan in één richting 

backlinking is functionaliteit browser



• Hoorcolleges
• Literatuur





Hoorcolleges

Hieronder vind je links naar de slides van de hoorcolleges. De links worden in de loop van de cursus geactiveerd, na afloop van de betreffende hoorcolleges.

Literatuur

Leerstof



30

31

de X van XHTML 

XHTML is een ‘markup language’



er is een hele familie van dergelijke XML-talen    



boomstructuur descriptive markup, logische structuur informatie formele definitie van de markup (DTD of schema) methoden om de markup te valideren.

XML is een metataal waarin je een markuptaal kunt beschrijven 

en al die talen kun je (in principe) met dezelfde tools verwerken

32

Je kunt je eigen XML-taal verzinnen book

author

title

chapter

chapter

title

p

title

p

link

#PCDATA

#PCDATA

#PCDATA

#PCDATA

#PCDATA

#PCDATA

#PCDATA

#PCDATA: Parsed Character Data, ‘lopende tekst’

33

Hoe solide is je taal? 

welgevormd XML   



elementen moeten een boomstructuur vormen syntaxis van elementen en attributen moet kloppen namen van elementen en attributen zijn vrij

valide XML 

  

je legt je documentmodel vast in Document Type Declaration (DTD) namen elementen en attributen hiërarchische relaties controleerbaar door validating parser 

ingebouwd in meeste XML software, bv in 34

DTD: formele beschrijving van XML-taal book

author

title

chapter

chapter

title

p

title

p

link

#PCDATA

#PCDATA

#PCDATA

#PCDATA

#PCDATA

#PCDATA

#PCDATA

#PCDATA: Parsed Character Data, ‘lopende tekst’

voor DTDs van XHTML zie http://www.w3.org/TR/xhtml1/dtds.html

35

Realiteit: XML heeft HTML niet verdrongen

maar wordt ‘onder de motorkap’ veel toegepast

44

Microsoft Office  





Office Open XML ZIP compatibel file formaat  verander extensie en open bevat XML files en andere content niet te verwarren met OpenDocument formaat (Open Office) 45

RSS newsfeeds (Really Simple Syndication?)

46

iTunes



iTunes Music Library.xml 



kern: reeks elementen met waarden

zelf hacken met XSLT?  

http://www.xml.com/pub/a/2004/11/03/itunes.html http://www.movable-type.co.uk/scripts/itunes-albumlist.html (met bugs...)

47

MusicXML 

doel: uitwisseling tussen muzieknotatieprogramma’s  

 

zijn er heel veel elk eigen datastructuur

muziek publiceren op Internet www.makemusic.com/musicxml

48

Scalable Vector Graphics    

2D graphics voor WWW, mobiel plugin voor IE /www.w3.org/Gr aphics/SVG/

49

Semantic web, Linked Data 





vastleggen semantiek van het Internet ondersteunt automatische processen verschillende XMLtalen, w.o. RDF 



World Wide Web Consortium

Resource Description Framework gebruikt triples: subject, predicaat, object 50

Web Services

SERVICE REGISTRY find







publish

’software that makes SERVICE services available on SERVICE USER messages PROVIDER a network’ Server Oriented HTTP/1.1 200 OK application/soap+xml; charset="utf-8" Architecture (SOA) Content-Type: Content-Length: 273 XML talen: <env:Envelope   

SOAP (messages) WSDL (publish) UDDI (find)

xmlns:env="http://www.w3.org/2003/05/soap-envelope" xmlns:rs="http://www.brics.dk/ixwt/recipeserver"> <env:Body>

51

XBRL    

eXtensible Business Reporting Language business, financiële gegevens open standaard gebruikt door o.a. Belastingdienst

52

Text Encoding Initiative (TEI) 

literaire werken en historische bronnen 

 

publicatie op Internet voorzieningen voor     



www.tei-c.org

normalisatie correctie versies annotatie etc.

zeer complexe XML applicatie 53

Samenvatting XML-applicaties    

applicaties hebben eigen vocabulair (DTD of schema) zelfde (XML) syntaxis maakt het mogelijk verschillende content met zelfde tools te bewerken XML is nuttig bij o.a.    



uitwisseling tussen applicaties content voor veel verschillende toepassingen content die automatisch verwerkt moet worden content die kostbaar of belangrijk is

XML is niet nuttig bij   

content die met maar één (type) applicatie verwerkt wordt content die snel waarde verliest of verdwijnt content met een regelmatige structuur ( database)

54

CSS sheets  

CSS: Cascading Style Sheets geeft regels voor stijl in intuïtief formaat selector { eigenschap : waarde ; … meer eigenschappen … ; }



toepassen op  



XHTML XML

CSS is vooral een kwestie van vaardigheid, oefening en opzoeken 

zelfstandig opdoen   

onze practicumoefeningen (basics) http://www.w3.org/Style/Examples/011/firstcss www.w3schools.com (maar zie ook www.w3fools.com)

55

Eigenschappen en waarden color

red, yellow, rgb(212,120,20), #330033

font-style

normal, italics, oblique

font-size

12pt, larger, 150%, 1.5em

text-align

left, right, center, justify

line-height

normal, 1.2em, 120%

display

block, inline, list-item, none

56

Selectors  

a selector is a list of tag names for each selector, some properties are assigned values: b {color: red; font-size: 12pt} i {color: green}



longer selectors give context sensitivity: table b {color: red; font-size: 12pt} form b {color: yellow; font-size: 12pt} i {color: green}



the most specific selector is chosen to apply 57

Cascading Style Sheets 

‘cascading’: overerven eigenschappen 





eigenschappen van ancestors (hoger in documentboom) erven over op descendants (lager in documentboom) totdat er voor de descendant een andere waarde van de CSS-eigenschap wordt gespecificeerd

goede gewoonten 

algemene eigenschappen aan element 



bv. font, marge

veranderingen relatief ten opzichte van basisformattering

body { color: #330033; font-family: Arial,Helvetica; padding: 0; margin: 0; } h1 { text-align: center; color: #CC0000; }

58

Specificity in Action b { color: b b { color: b.foo { color: b b.foo { color: b.bar { color:

red;} blue;} green;} yellow;} maroon;}

Hey! Wow! Amazing! Impressive! k00l! Fantastic!

Hey! Wow! Amazing! Impressive! k00l! Fantastic!

59

Selectors 

meest voorkomende      



a.b *.b a#b a, b ab a>b

a met class attribute b alle elementen met class attribute b a met id attribute b a of b b met ancestor a b met parent a

er zijn ook pseudo-classes, bij voorbeeld  

first-letter visited (voor links)

60

Box model



algemeen model voor HTML elementen    

 

vier zones voor padding, border en margin 1 of 4 waarden default waarden zijn ongelijk 0 eenheden: px, em, pt, cm (gooi ze niet door elkaar)

tools als Firebug laten box-eigenschappen duidelijk zien boxen (speciaal die voor block elements) kun je positioneren 61

Nogmaals de vaksite div#head { background-image: url(titel.gif); height: 70px; background-repeat: no-repeat; } div#body { position: absolute; left: 190px; margin: 0 1em 0 0; } div#menu { font-size: 13px; line-height: 19px; position: absolute; width: 190px; background-image: url(menu.gif); height: 953px; background-repeat: no-repeat; }



Webdesign

Laatste Nieuws



62



http://www.barelyfitz.com/screencast/html-training/css/positioning/ 63

CSS aan HTML koppelen

stylesheet aanroep



via link element in head:  



meerdere link elementen toegestaan

andere methoden sterk afgeraden  

CSS in head element style attribuut in HTML markup 64

Hoofdpunten  

structuur en presentatie (X)HTML markup  



XML en DTD  



elementen, attributen block en inline elementen toepassingen van XML DTD

CSS   

rules, selectors, properties box model overerving eigenschappen 65



×

Report "Markup: HTML en CSS. Hoorcollege Webdesign 3 2 mei 2014 Frans Wiering"

Your name

Email

Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint

Description

Close Send

×

Sign In

Email

Password

Remember me Forgot password?

Sign In

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close