Mdst3703 2013-09-12-semantic-html
- 1. Studio 3: Semantic HTML Prof. Alvarado MDST 3703 12 September 2013
- 2. Business • About the Readings – Primary sources, not digested – Coming from many directions – Not required to know everything! – Salient points discussed in class • Exercises – Not graded directly – Not highly structured on purpose
- 3. Review • What is an "Interface”?
- 4. Text interface (aka command-line interface)
- 5. A window from a Graphical User Interface (aka GUI)
- 7. The IBM 7090 had an interface of switches and lights
- 8. Review • I have used the word “interface” in contrast with source code – As in “web interface” • But source code is accessed through an interface too – E.g. JEdit – Key contrast is between that which is source and product of interpretation – Sometimes, we think the product of interpretation (structuralism) is closer to the original
- 9. Review • Is Text shadow or puppet?
- 10. Review • Text is shadow and puppet – Shadow in that is it created by an author to produce effects – Puppet in that writing is a powerful form of representation that can express both rules and patterns (O'Shea's point) – What's a puppet and what's a shadow has more to do with context – One's man's shadow is another man's puppet
- 11. Semantic HTML
- 12. Semantic HTML • Elements should stand for meaningful units, not layout instructions – E.g. <i>The Name of the Rose</i> is not semantic • So, two new elements: – DIV: Defines and arbitrary block of text – SPAN: Defines and arbitrary segment of text (i.e. no implied hard return) • And two new attributes: – CLASS: Associates a DIV or SPAN with a category – ID: Identifies a unique DIV or SPAN in a document
- 13. Semantic HTML • So, we do things like this instead: <span class=“book-title”>The Name of the Rose</span> <div id=“abstract”><p>Blah, blah, blah. Blah? Of course, blah.</div> • We can make up our own class and id names as we go along
- 14. Applying CSS • Why do we do this? – So we can use HTML to define structure and CSS to define style – We want our code to map onto the levels of text – Principle of “separation of concerns” • The CSS looks like this: .book-title { font-style: italic; } #abstract { font-size: 90%; }
- 15. Example of a CSS directive .foo { font-size:14pt; font-weight:bold; }
- 16. CSS Syntax: Selectors .important { background-color: yellow; } The “selector” indicates what elements the styles apply to. Can address element names, classes, and ID.
- 17. CSS Syntax: Selectors #abstract { font-size:11pt; font-weight:bold; } Here the selector finds an element with an ID attribute with the value “foo” … e.g. <div id=“foo”>Hey.</div>
- 18. Example selectors div Any DIV element span#important Any SPAN element with a class of important .importatn Any element with a class of important #abstract The one element with an id of abstract
- 19. CSS Syntax: Declarations .important { font-size:14pt; font-weight:bold; } The “declarations” specify properties and values to apply to the element. Format = property-name: value;
- 20. Example Directives font-family: Georgia, Garamond, serif; color: blue; color: #eeff99; background-color: gray; border: 1px solid black;
- 21. CSS Box Model
- 22. Basic Idea • A CSS file is just a series of “rules” that associated styles with elements • 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
- 23. Exercises
- 24. Exercise 1: Add semantic markup to the Poetics 1. Create a folder for this week (09-12) 2. Make a copy of the poetics.html file you created last week and paste it into today’s folder 3. Add some semantic HTML to the document and add a style – E.g. mark up some people’s names in the text and give them the class “person”
- 25. Exercise 2: Mark up Oedipus • Create an empty HTML document (with the four basic elements) – Call it “oedipus.html” • Go to the Oedipus link provided in today’s blog post • Grab the source and paste it into your new document
- 26. Exercise 3: Inspect the source code • Form into groups of 5 and discuss the question: Does it use semantic html? – 5 minutes of discussion – 1 respondent from each group
- 27. Exercise 4: Markup Challenge • Stay in your groups and respond to the following challenge as a group – Using the page anchors as clues, how would you go about visually representing page breaks? – Based on your answer, implement your solution • Scribes: describe what was done – What are the problems that you see in terms of the structure? – Why would you want to show pages?