MDST 3703 F10 Studio 4
-
Upload
rafael-alvarado -
Category
Documents
-
view
351 -
download
2
description
Transcript of MDST 3703 F10 Studio 4
![Page 1: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/1.jpg)
Studio 4 XML and HTML
Introduction to the Digital Liberal ArtsMDST 3703 / 7703
Fall 2010
![Page 2: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/2.jpg)
Business
• Quiz 1 – next week (sorry!)– Wanted to include WWW and HTML
• WordPress sites with missing plugins – working on this– Ellie Stanton, Kathryn Corcoran, and Jonathan
Guerra• Questions about the new synthetic post
system?
![Page 3: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/3.jpg)
Overview
• Gentle introduction to XML and HTML• Some historical background• Exercise on using HTML in WordPress
![Page 4: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/4.jpg)
What is text?
![Page 5: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/5.jpg)
page o’ text
Real world text comes packaged in documents
![Page 6: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/6.jpg)
How is meaning conveyed in a document?
A document is a material artifact
![Page 7: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/7.jpg)
![Page 8: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/8.jpg)
What is text?
![Page 9: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/9.jpg)
Visual Signifiers
• Small caps• Indentation• Alignment• Italics• Space
All used to signify aspects of text
![Page 10: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/10.jpg)
3 Levels: Text, Structure, Layout
• Text = characters, e.g. /A/ – Not to be confused with any particular
representation– Exists only as a category
• Structure = units, e.g. paragraphs, and other elements (e.g. titles, foreign words, etc.)
• Layout = size, color, space, shape, etc.
![Page 11: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/11.jpg)
XML is a language to describe the structure of
documents
![Page 12: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/12.jpg)
So, how are docs structured?
![Page 13: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/13.jpg)
Hierarchically …
(theoretically)
![Page 14: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/14.jpg)
XML looks like this
![Page 15: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/15.jpg)
also in-line mark-up
![Page 16: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/16.jpg)
Two kinds of elements
• Divisions – blocks of text• Spans – inline elements
spans don’t always nest
![Page 17: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/17.jpg)
XML
• Stands for eXtensible Markup Language– Actually invented after the web– A simplification of SGML, the language used to
create HTML• HTML (now XHTML) is written in XML• Based on some premises about what a
document is …
![Page 18: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/18.jpg)
![Page 19: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/19.jpg)
XML Premises
1. All documents are comprised of elements.2. Elements contain content.3. Elements have no layout.4. Elements are hierarchical.5. Elements are to be indicated by “markup” –
tags that define the beginning and end of an element
![Page 20: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/20.jpg)
XML Markup Rules
• All elements have a start tag and an end tag• Start tags look like this:
<stanza>
• End tags look like this:</stanza>
• Tags can have attributes<stanza type="tercina"> … </stanza>
![Page 21: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/21.jpg)
XML Rules
• Tags cannot overlap<header> This is not <para>cool</header> at
all.</para>• Attributes must be quoted
<stanza type=whoa>
![Page 22: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/22.jpg)
XML is used everywhere
• HTML– Embed codes
• TEI (Text Encoding Initiative)• RSS• Civilization IV• Playlists (e.g. XSPF or “spiff”)
![Page 23: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/23.jpg)
TEI
• Represents an alternative strand in the history of digital text– Focused on recovering the past– Core of “humanities computing”
• Tutorial:www.tei-c.org/Guidelines/Customization/Lite/U5-eg.html
• Resources for scholars:www.rilune.org/europelitteraire/database.htm
![Page 24: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/24.jpg)
HTML
![Page 25: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/25.jpg)
HTML
• Paragraphs = <p> … </p>• Headers = <h1> … </h1>• Images =
<img src=“http://foo.com/img.gif”></img>
• Links = <a href=“http://foo.com/page.html”>Label of link</a>
• Other elements– Lists, tables, etc.– See http://www.w3schools.com/html/default.asp
![Page 26: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/26.jpg)
Exercise: Create a WordPress post in HTML mode using content from the Web
1. Start a new post in your blog.2. Put the editor in HTML mode.3. Go to the following URL and copy the text with your
mouse http://hd.housedivided.dickinson.edu/node/1937
4. Paste the text into your editor5. Go through the text and mark up text for emphases6. Add at least one
1. Block quote2. External link to an article illuminating the subject linked
7. Flip back and forth between Visual and HTML modes
![Page 27: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/27.jpg)
![Page 28: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/28.jpg)
![Page 29: MDST 3703 F10 Studio 4](https://reader033.fdocuments.net/reader033/viewer/2022042601/5487abd1b4af9f8c0d8b54d3/html5/thumbnails/29.jpg)
WordPress Quirks
• Does not use paragraph tags• Strips out advanced HTML (such as embed)• Will accept things not listed in the toolbar