Mdst 3559-02-01-html

541 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
541
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Test comes in the form of documents
  • Mdst 3559-02-01-html

    1. 1. (x)HTML<br />MDST 3559: DataestheticsProf. Alvarado02/01/2011<br />
    2. 2. Review: Working with CSV<br />Process<br />Grab data from some source<br />Clean, convert, combine<br />Visualize<br />Contextualize ... <br />Purpose<br />Tell a story ... this is where we take up today.<br />
    3. 3. Overview: HTML <br />Introduce HTML as a language for encoding compound documents<br />Effectively, a language to create stories around embed data islands<br />Requires that we view documents as data structures<br />Just as data can be viewed as a kind of document<br />Documents can be queried and filtered too<br />Then we define<br />Markup languages<br />XML<br />(X)HTML<br />And learn basic HTML elements<br />
    4. 4. What is contextualization?<br />
    5. 5. To contextualize is literally to surround with text<br />
    6. 6. Texts come packaged as documents<br />
    7. 7. We are used to creating documents with word processors<br />But there are problems with this approach ...<br />
    8. 8. Against Word Processing<br />Hard to control programmatically<br />Although it is possible, e.g. through Visual Basic<br />Word processors are designed for paper printing, not web publishing<br />Not natively networked<br />Word processors conflate the process of writing with that of styling and presentation<br />Text and layout are independent variables<br />
    9. 9. How can we characterize the structure of a document?<br />See example ...<br />
    10. 10.
    11. 11. Document Elements and Structures<br />Play<br />Act +<br />Scene +<br />Line +<br />Book<br />Chapter +<br />Verse +<br />Letter<br />Heading<br />Return Address<br />Date<br />Recipient Info<br />Name<br />Title<br />Address<br />Content<br />Salutation<br />Paragraph +<br />Closing<br />
    12. 12.
    13. 13.
    14. 14. Structure consists of elements and relations <br />Relations can be modeled as trees, networks, or other structures<br />
    15. 15. Markup Languages<br />Markup languages allow us to define structure of documents for computational purposes<br />All documents have at least three levels:<br />Text Words, images, embedded data, etc.<br />Structure Books, chapters, verses, paragraphs, etc.<br />Layout font style, colors, space, etc.<br />
    16. 16. XML<br />XML is a way to define the abstract structure of a document by means of embedded signs<br />It uses tags to signify elements<br />Tags are not elements!<br />For example ...<br />
    17. 17.
    18. 18. XML<br />Three kinds of tag<br />Start and End, e.g<p> and </p><br />Singleton, e.g<br /><br />Start and singleton tags can have attributes<br />Simple key/value pairs<br /><div class="stanza" style="color:red;"><br />Basic rules<br />All attributes must be quoted<br />All tags must nest (no overlaps!)<br />
    19. 19. XML<br />A Document Type Definition (DTD)<br />Defines elements, attributes, and possible combinations<br />Examples: XHTML, TEI, RSS, FBML<br />E.g. in XHTML, the ol and ul elements must contain li elements<br />DTDs expose the data models implicit in texts<br />TEI is a powerful way of describing primary source materials for scholars<br />
    20. 20. HTML<br />aka XHTML<br />And now becoming HTML5<br />An instance of XML (formerly SGML) <br />An interface language<br />Language of the World Wide Web<br />Everything is a tag<br /><p>This is a paragraph</p><br />Tags have attributes<br /><a href="http://some.website.com">Click me to go to the web site</a><br />Tags represent document elements<br />
    21. 21.
    22. 22. HTML Document Structure<br />Head<br />Title<br />[Directives]<br />Body<br />H1+<br />H2+<br />P+<br />UL<br />LI<br />
    23. 23. Basic Elements with associated Tags<br />
    24. 24. Exercise<br />Use W3Schools interactive editor<br />Embed a Google Doc and a ManyEyes object<br />Create Home Directory Accounts<br />Create HTML document that contexutalizes the objects you worked on last Thursday<br />
    25. 25. Create a file in Home Directory<br />Set up Home Directory Service<br />Save a file called “index.html” in the public_html directory<br />View on the web at <br />http://www.people.virginia.edu/~userid<br />
    26. 26. CSS<br />“Cascading Style Sheets”<br />Allows you to add styles to HTML <br />Styles include:<br />Font characteristics<br />Line characteristics<br />Text block <br />Background colors and images<br />Etc.<br />
    27. 27. <html><br /> <head><br /> <title>I’m an HTML document</title><br /> </head><br /> <body><br /> <h1>Here is the first header</h1><br /> <p>Here is some conent</p><br /> </body><br /></html><br />Standard HTML Doc<br />
    28. 28. <html><br /> <head><br /> <title>I’m an HTML document</title><br /> </head><br /> <body><br /> <h1>Here is the first header</h1><br /> <p>Here is some content:</p><br /><h1><br /><p>Some Text I want to emphasize.</p><br /></h1><br /> </body><br /></html><br />What not to do!<br />
    29. 29. <html><br /> <head><br /> <title>I’m an HTML document</title><br /> </head><br /> <body><br /> <h1>Here is the first header</h1><br /> <p>Here is some conent</p><br /> <div style=“font-size:14pt;"><br /><p>Some Text I want to emphasize.</p><br /></div><br /> </body><br /></html><br />Instead, use CSS<br />
    30. 30. <html><br /> <head><br /> <title>I’m an HTML document</title><br /><style type="text/css"><br /> div {<br />font-size:14pt;<br /> font-weight:bold;<br /> }<br /> </style><br /> </head><br /> <body><br /> <h1>Here is the first header</h1><br /> <p>Here is some conent</p><br /> <div><br /> <p>Some Text I want to emphasize.</p><br /></div><br /> </body><br /></html><br />Better yet, put CSS here<br />
    31. 31. <html><br /> <head><br /> <title>I’m an HTML document</title><br /><style type="text/css"><br /> .foo {<br />font-size:14pt;<br /> font-weight:bold;<br /> }<br /> </style><br /> </head><br /> <body><br /> <h1>Here is the first header</h1><br /> <p>Here is some conent</p><br /> <div class=“foo”><br /><p>Some Text I want to emphasize.</p><br /></div><br /> </body><br /></html><br />with CSS in header using class attribute<br />
    32. 32. <html><br /> <head><br /> <title>I’m an HTML document</title><br /><link rel=“stylesheet” type=“text/css” href=“default.css” /><br /> </head><br /> <body><br /> <h1>Here is the first header</h1><br /> <p>Here is some conent</p><br /> <div><br /><p>Some Text I want to emphasize.</p><br /></div><br /> </body><br /></html><br />Even better: CSS in linked file<br />
    33. 33. default.css<br />.foo {<br /> font-size:14pt;<br /> font-weight:bold;<br />}<br />This is what the content of the default.css file would look like.<br />
    34. 34. CSS Syntax: Selectors<br />.foo {<br /> font-size:14pt;<br /> font-weight:bold;<br />}<br />The “selector” indicates what elements the styles apply to. Can address element names, classes, and ID.<br />
    35. 35. CSS Syntax: Selectors<br />#foo {<br /> font-size:14pt;<br /> font-weight:bold;<br />}<br />Here the selector finds an element with an ID attribute with the value “foo” …<br />e.g. <div id=“foo”>Hey.</div><br />
    36. 36. Example selectors<br />p Any p element <br />p.foo Any p element with a class of foo<br />.foo Any element with a class of foo<br />#foo The element with an id of foo<br />
    37. 37. CSS Syntax: Declarations<br />.foo {<br /> font-size:14pt;<br /> font-weight:bold;<br />}<br />The “declarations” specify properties and values to apply to the element.<br />Form =property-name: value;<br />
    38. 38. Example Directives<br />font-family: Georgia, Garamond, serif;<br />color: blue;<br />color: #eeff99;<br />background-color: gray;<br />border: 1px solid black;<br />
    39. 39. Basic Idea<br />A CSS file is just a series of “rules”<br />A CSS rule has two parts <br />A selector to identify elements (tag name, class, id)<br />One or more declarations of style<br />CSS rules have a simple syntax<br />Selectors followed by curly braces<br />Key/value pairs separated by colons<br />Rules separated by semi-colons<br />
    40. 40. Basic idea<br />You can apply any number of rules to a document<br />Rules may appear in attributes, headers, or external files<br />Rules are “cascaded”<br />Later ones inherit previous ones<br />Later ones have precedence (can overwrite) earlier ones<br />

    ×