Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (17)
Similar a Mdst 3559-02-01-html
Similar a Mdst 3559-02-01-html (20)
Más de Rafael Alvarado
Más de Rafael Alvarado (20)
Último
Último (20)
Mdst 3559-02-01-html
- 1. (x)HTML MDST 3559: DataestheticsProf. Alvarado02/01/2011
- 2. 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.
- 3. 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
- 5. To contextualize is literally to surround with text
- 6. Texts come packaged as documents
- 7. We are used to creating documents with word processors But there are problems with this approach ...
- 8. 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
- 9. How can we characterize the structure of a document? See example ...
- 11. 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
- 14. Structure consists of elements and relations Relations can be modeled as trees, networks, or other structures
- 15. 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.
- 16. 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 ...
- 18. 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!)
- 19. 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
- 20. 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
- 22. HTML Document Structure Head Title [Directives] Body H1+ H2+ P+ UL LI
- 23. Basic Elements with associated Tags
- 24. 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
- 25. 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
- 26. CSS “Cascading Style Sheets” Allows you to add styles to HTML Styles include: Font characteristics Line characteristics Text block Background colors and images Etc.
- 27. <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
- 28. <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!
- 29. <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
- 30. <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
- 31. <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
- 32. <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
- 33. default.css .foo { font-size:14pt; font-weight:bold; } This is what the content of the default.css file would look like.
- 34. 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.
- 35. 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>
- 36. Example selectors p Any p element p.foo Any p element with a class of foo .foo Any element with a class of foo #foo The element with an id of foo
- 37. 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;
- 38. Example Directives font-family: Georgia, Garamond, serif; color: blue; color: #eeff99; background-color: gray; border: 1px solid black;
- 39. 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
- 40. 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
Notas del editor
- Test comes in the form of documents