Your SlideShare is downloading. ×
0
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Mdst3703 2013-09-12-semantic-html
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mdst3703 2013-09-12-semantic-html

212

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
212
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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)
  • 6. First Mac interface
  • 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?

×