Studio 3: Semantic HTML Prof. Alvarado MDST 3703 12 September 2013
Mdst3703 2013-09-12-semantic-html
Nov 07, 2014
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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. The Name of the Rose 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: The Name
of the Rose
We can make up our own class and id names as we go along
Blah, blah, blah. Blah? Of course, blah.
- 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.
Hey.
- 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 todays folder 3. Add some semantic HTML to the document and add a style E.g. mark up some peoples 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 todays 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?
Related Documents
