Please enable JavaScript.
Coggle requires JavaScript to display documents.
Web Architecture Week 2 Lecture 5 Formats: HTML and XML (HTML5 (Drawing …
Web Architecture
Week 2 Lecture 5 Formats: HTML and XML
HTML
Is about making documents
Beginning
a language for encoding simple document semantics
Later
Allowing more design precision and visual effects
Simplicity through style until precise style specification was added
Tags did not only dictate style, but also contained data, such as what type of content is displayed. XML grew out of this.
HTML5
Adds semantics to webpages
Recognises major new structure that are useful for
Search engines
usability for people with disabilities, screen readers, etc.
Came about because gradually generic structure took over, such as <div> and <span>
Navigation support <nav>
Represents a major navigation block
e.g. part of page which is simply navigation.
Headers and footers <Header> <footer>
Articles <article>
Articles and blog entries
alternative to <div class="article">
Asides <asides>
section that is somehow related to main content, but it can be separate from that content
Audio & Video
<video src="movie.webm"></video>
<audio src=”music.mp3"></audio>
only understands a limited set of formats
Drawing - Canvas
<canvas id=“myCanvas”>
</canvas>
provides surface for programs to draw on using standard API
Avoids the need to download pre-generated images from the network
Lines, Arcs, Text, Gradients, Patterns, image and pixel manipulation
XML
Like HTML, but tags indicate type of content, not style
Components
Elements
Hierarchical decomposition
Element structure in form of a tree
Attributes
Attributes label elements
Entities
Entities contain document fragments
Declarations
Markup declaration defines entities,
elements, attributes, DTDs, comments,
marked sections.
Processing instructions
Processing instructions interpret elements
and content
Document Type Definitions (DTDs)
DTDs constrain elements, attributes and
content.
DTDs provide a simple grammar.
Syntax
Elements
Surrounded by start and end tags
<foo> Hello </foo>
empty element tag for no data
<foo/> same as <foo></foo>
names are case sensitive
content
data
mixed
no content; element only
< and > and some others are forbidden and replaced by e.g. <
Attributes
<para security="restricted">
provide extra information
both names and values are case sensitive
values must be denoted with " or '