Mdst 3559-02-01-html
-
Upload
rafael-alvarado -
Category
Technology
-
view
633 -
download
0
description
Transcript of Mdst 3559-02-01-html
![Page 1: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/1.jpg)
(x)HTML
MDST 3559: DataestheticsProf. Alvarado
02/01/2011
![Page 2: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/2.jpg)
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.
![Page 3: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/3.jpg)
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
![Page 4: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/4.jpg)
What is contextualization?
![Page 5: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/5.jpg)
To contextualize is literally to surround with text
![Page 6: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/6.jpg)
Texts come packaged as documents
![Page 7: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/7.jpg)
We are used to creating documents with word processors
But there are problems with this approach ...
![Page 8: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/8.jpg)
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
![Page 9: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/9.jpg)
How can we characterize the structure of a document?
See example ...
![Page 10: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/10.jpg)
![Page 11: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/11.jpg)
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
![Page 12: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/12.jpg)
![Page 13: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/13.jpg)
![Page 14: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/14.jpg)
Structure consists of elements and relations
Relations can be modeled as trees, networks, or other structures
![Page 15: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/15.jpg)
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.
![Page 16: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/16.jpg)
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 ...
![Page 17: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/17.jpg)
![Page 18: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/18.jpg)
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!)
![Page 19: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/19.jpg)
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
![Page 20: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/20.jpg)
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
![Page 21: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/21.jpg)
![Page 22: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/22.jpg)
HTML Document Structure
• Head– Title– [Directives]
• Body– H1+– H2+• P+• UL
– LI
![Page 23: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/23.jpg)
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>
![Page 24: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/24.jpg)
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
![Page 25: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/25.jpg)
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
![Page 26: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/26.jpg)
CSS
• “Cascading Style Sheets”• Allows you to add styles to HTML • Styles include:– Font characteristics– Line characteristics– Text block – Background colors and images– Etc.
![Page 27: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/27.jpg)
<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
![Page 28: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/28.jpg)
<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!
![Page 29: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/29.jpg)
<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
![Page 30: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/30.jpg)
<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
![Page 31: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/31.jpg)
<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
![Page 32: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/32.jpg)
<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
![Page 33: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/33.jpg)
default.css
.foo {font-size:14pt;font-weight:bold;
}
This is what the content of the default.css file would look like.
![Page 34: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/34.jpg)
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.
![Page 35: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/35.jpg)
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>
![Page 36: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/36.jpg)
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
![Page 37: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/37.jpg)
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;
![Page 38: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/38.jpg)
Example Directives
font-family: Georgia, Garamond, serif;color: blue;color: #eeff99;background-color: gray;border: 1px solid black;
![Page 39: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/39.jpg)
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
![Page 40: Mdst 3559-02-01-html](https://reader036.fdocuments.in/reader036/viewer/2022062615/54844259b4af9f83478b48c7/html5/thumbnails/40.jpg)
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