40
(x)HTML MDST 3559: Dataesthetics Prof. Alvarado 02/01/2011
| Date post: | 07-Dec-2014 |
| Category: |
Technology |
| Upload: | rafael-alvarado |
| View: | 630 times |
| Download: | 0 times |
(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
• 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
HTML
• 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
CSS
• “Cascading Style Sheets”• Allows you to add styles to HTML • Styles include:– Font characteristics– Line characteristics– Text block – Background colors and images– Etc.
<html><head>
<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
<html><head>
<title>I’m an HTML document</title></head><body>
<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!
<html><head>
<title>I’m an HTML document</title></head><body>
<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
<html><head>
<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
<html><head>
<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
<html><head>
<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
.foo {font-size:14pt;font-weight:bold;
}
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
.foo {font-size:14pt;font-weight:bold;
}
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
