Mdst3703 2013-09-12-semantic-html

413 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Mdst3703 2013-09-12-semantic-html

  1. 1. Studio 3: Semantic HTML Prof. Alvarado MDST 3703 12 September 2013
  2. 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. 3. Review • What is an "Interface”?
  4. 4. Text interface (aka command-line interface)
  5. 5. A window from a Graphical User Interface (aka GUI)
  6. 6. First Mac interface
  7. 7. The IBM 7090 had an interface of switches and lights
  8. 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. 9. Review • Is Text shadow or puppet?
  10. 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. 11. Semantic HTML
  12. 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. 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. 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. 15. Example of a CSS directive .foo { font-size:14pt; font-weight:bold; }
  16. 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. 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. 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. 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. 20. Example Directives font-family: Georgia, Garamond, serif; color: blue; color: #eeff99; background-color: gray; border: 1px solid black;
  21. 21. CSS Box Model
  22. 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. 23. Exercises
  24. 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. 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. 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. 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?

×