Mdst 3559-02-01-html

transcript

(x)HTML

MDST 3559: DataestheticsProf. Alvarado

02/01/2011

Review: Working with CSV

• Process– Grab data from some source– Clean, convert, combine– Visualize– Contextualize ...

• Purpose– Tell a story ... this is where we take up today.

Overview: HTML

• Introduce HTML as a language for encoding compound documents– Effectively, a language to create stories around embed data islands

• Requires that we view documents as data structures– Just as data can be viewed as a kind of document– Documents can be queried and filtered too

• Then we define– Markup languages– XML– (X)HTML

• And learn basic HTML elements

What is contextualization?

To contextualize is literally to surround with text

Texts come packaged as documents

We are used to creating documents with word processors

But there are problems with this approach ...

Against Word Processing

• Hard to control programmatically– Although it is possible, e.g. through Visual Basic

• Word processors are designed for paper printing, not web publishing– Not natively networked

• Word processors conflate the process of writing with that of styling and presentation– Text and layout are independent variables

How can we characterize the structure of a document?

See example ...

Document Elements and Structures

Play– Act +

• Scene +– Line +

Book– Chapter +

• Verse +

Letter

– Heading• Return Address• Date• Recipient Info

– Name– Title– Address

– Content• Salutation• Paragraph +• Closing

Structure consists of elements and relations

Relations can be modeled as trees, networks, or other structures

Markup Languages

• Markup languages allow us to define structure of documents for computational purposes

• All documents have at least three levels:– Text Words, images, embedded data, etc.– Structure Books, chapters, verses, paragraphs,

etc.– Layout font style, colors, space, etc.

• XML is a way to define the abstract structure of a document by means of embedded signs

• It uses tags to signify elements– Tags are not elements!

• For example ...

XML• Three kinds of tag– Start and End, e.g <p> and </p>– Singleton, e.g <br />

• Start and singleton tags can have attributes– Simple key/value pairs– <div class="stanza" style="color:red;">

• Basic rules– All attributes must be quoted– All tags must nest (no overlaps!)

XML• A Document Type Definition (DTD)– Defines elements, attributes, and possible

combinations– Examples: XHTML, TEI, RSS, FBML– E.g. in XHTML, the ol and ul elements must

contain li elements• DTDs expose the data models implicit in texts– TEI is a powerful way of describing primary source

materials for scholars

• aka XHTML– And now becoming HTML5

• An instance of XML (formerly SGML) • An interface language• Language of the World Wide Web• Everything is a tag

– <p>This is a paragraph</p>• Tags have attributes

– <a href="http://some.website.com">Click me to go to the web site</a>

• Tags represent document elements

HTML Document Structure

• Head– Title– [Directives]

• Body– H1+– H2+• P+• UL

– LI

Basic Elements with associated TagsElement Tags Attributes

Paragraph <p> ... </p>

Numbered List <ol> <li> ... </li></ol>

Bulleted List <ul> <li> ... </li></ul>

Table <table> <tr> <td> ... </td> </tr></table>

Anchor <a> ... </a> href, target

Image <img/> src, border

Object <object> ... </object>

Exercise

• Use W3Schools interactive editor• Embed a Google Doc and a ManyEyes object• Create Home Directory Accounts• Create HTML document that contexutalizes

the objects you worked on last Thursday

Create a file in Home Directory

• Set up Home Directory Service• Save a file called “index.html” in the

public_html directory• View on the web at – http://www.people.virginia.edu/~userid

• “Cascading Style Sheets”• Allows you to add styles to HTML • Styles include:– Font characteristics– Line characteristics– Text block – Background colors and images– Etc.

<title>I’m an HTML document</title></head><body>

<h1>Here is the first header</h1><p>Here is some conent</p>

</body></html>

Standard HTML Doc

<h1>Here is the first header</h1><p>Here is some content:</p><h1><p>Some Text I want to

emphasize.</p></h1>

</body></html> What not to do!

<h1>Here is the first header</h1><p>Here is some conent</p><div style=“font-size:14pt;"><p>Some Text I want to

emphasize.</p></div>

</body></html> Instead, use CSS

<title>I’m an HTML document</title><style type="text/css">div {

font-size:14pt;font-weight:bold;

}</style>

</head><body>

<h1>Here is the first header</h1><p>Here is some conent</p><div>

<p>Some Text I want to emphasize.</p></div>

</body></html>

Better yet, put CSS here

<title>I’m an HTML document</title><style type="text/css">.foo {

font-size:14pt;font-weight:bold;

}</style>

</head><body>

<h1>Here is the first header</h1><p>Here is some conent</p><div class=“foo”><p>Some Text I want to

emphasize.</p></div>

</body></html>

with CSS in header using

class attribute

<title>I’m an HTML document</title><link rel=“stylesheet”

type=“text/css” href=“default.css” /></head><body>

<h1>Here is the first header</h1><p>Here is some conent</p><div><p>Some Text I want to emphasize.</p></div>

</body></html> Even better: CSS in linked file

default.css

.foo {font-size:14pt;font-weight:bold;

This is what the content of the default.css file would look like.

CSS Syntax: Selectors

The “selector” indicates what elements the styles apply to. Can address element names, classes, and ID.

CSS Syntax: Selectors

#foo {font-size:14pt;font-weight:bold;

Here the selector finds an element with an ID attribute with the value “foo” …

e.g. <div id=“foo”>Hey.</div>

Example selectors

p Any p elementp.fooAny p element with a class of foo.foo Any element with a class of foo#foo The element with an id of foo

CSS Syntax: Declarations

The “declarations” specify properties and values to apply to the element.

Form = property-name: value;

Example Directives

font-family: Georgia, Garamond, serif;color: blue;color: #eeff99;background-color: gray;border: 1px solid black;

Basic Idea• A CSS file is just a series of “rules”• A CSS rule has two parts– A selector to identify elements (tag name, class,

id)– One or more declarations of style

• CSS rules have a simple syntax– Selectors followed by curly braces– Key/value pairs separated by colons– Rules separated by semi-colons

Basic idea

• You can apply any number of rules to a document

• Rules may appear in attributes, headers, or external files

• Rules are “cascaded”– Later ones inherit previous ones– Later ones have precedence (can overwrite)

earlier ones

Mdst 3559-02-01-html

Technology