Wednesday, January 23, 2013

POSH and PROUD Part 2


Agenda:
  1. Semantic Markup (and some new tags) Semantic refers to what words mean, not how they are presented or "designed. Semantic Markup is the organizing of information (text) on a page into a hierarchy of importance.
  2. Marking up content on your own.



2) Remember that HTML was designed for semantic markup. In other words, HTML is used to mark up words for clarity of meaning, not for design purposes. Think of HTML as a language for making an outline for a paper.

3) Some tags to know are h1, h2, ...h6
     p
    ul
     ol
     li   (both ul and ol need li)
em
comment

Assignment:
a) Download the text file on Ms. Baker and use HTML to semantically mark up the page.
http://websitesthatwork.sehsapps.net/textfiles/missbaker.txt

b) Use the XHTML template I prepared for you (to get started) or retrieve it from the FTP folder.
http://websitesthatwork.sehsapps.net/templates/XHTMLstrict_template.html

c) Make sure your page has a title, paragraphs, h1, h2, an unordered list, an em tags for important words.

d) Validate your code using the W3C code validator
You may compare your code to the "Cornelius Page" here:
http://webstandardistas.com/03/cornelius.html

e) Show me on your screen when you are finished. Homework: read these pages:

http://www.websitesthatwork.sehsapps.net/screenshots/
Here's a study guide:

  • What are the advantages/characteristics of HTML?
  • (X)HTML is HTML that uses the strict rules of the data language ________________.
  • What are web standards? Why use them? In other words, name 3 advantages of using standards.
  • What does it mean to separate CONTENT from PRESENTATION? (hint-- think: DON'T use HTML to make the page pretty! (colors, backgrounds, borders, etc.)
  • What is Tag Soup?
  • What is Forward Compatibility?

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.