More HTML Elements
- Inline
- <abbr> abbreviation <abbr title="Maryland">MD</abbr>
- <acronym> acronym <acronym title="World Wide Web"> WWW</acronym>
- <address> address
- <em> italic text
- <strong> bold text
- <big> increase relative text size
- <small> decrease relative text size
- <sub> subscript
- <sup> superscript
- <q> inline quote
- Block
- <hr> horizontal rule <hr align="center" size="4" width="80%" color="gray" noshade="noshade">
- <blockquote> indented block of text
- <div> division <div align="center" id="navbar">
- Key Attributes
- <body text="white" bgcolor="purple" vlink="gray" alink="blue">
- Special Characters
- non-breaking space
- © © copyright
- ™ ™ trade mark
- ® ® registered trade mark
- < < less than
- > > greater than
- £ £ Pound
- ¥ ¥ Yen
- € € Euro
Exercise 1: Adding the Structural Layer - HTML
Four Layers of a Web Page
- Content - text and images
- Structural - HTML
- Presentation - CSS
- Behaviors - JavaScript
Let's open ex5-3_menu.txt (exercise 5-3) from your textbook files and start marking it up together. Download it and save it to your desktop as summer_menu.html. Use <dl> for menu items.
Two Generic Elements (for defining the structure of your document)
- div (block-level) used to define a "division," or section, of text and produces a carriage return at the end.
- span (inline) used to mark-up information when you do not want to interrupt the flow of your text (no carriage returns are produced)
Two Element Identifiers (for labeling content in your document)
- id used to uniquely identify information on a page
- class use to group information together, i.e., <span class="phone">240.676.9902</span>
Challenge Question! Can a div have both id and class identifiers? How about a span? How about a <p> tag?
Enter HTML5!
New Structural/Semantic Elements
- was: <div> <span>
- HTML5
| Element/ Attribute Value |
Where is it? | What's in it? |
|---|---|---|
| <section> | primary container, thematic group of content | typically contains one or more articles - replaces <div> tag! |
| <article> | self contained, reusable content | magazine artiles, blog posts, comments...anything that could be reused on another site. |
| <header> | top of page or container | introductory info for page, section or article - company logo, TOC, search box, etc. NOT h1, h2, h3, etc |
| <footer> | bottom of page or container | ending info for page, section or article - copyright, authorship/ownership, date/time, etc |
| <aside> | secondary content related to a specific section or article | quotes, diagrams, additional thoughts related to a section or article |
| <sidebar> * | info not directly related to a specific article | archive navigation, tips, extra information |
| <nav> | top, side right, side left | navigation links |
Homework 2 - Resume
- Header - Name and contact info. Feel free to use faux contact info if you aren't comfortable sharing it on our server.
- Education - Montgomery College, then high school. Include major, dates attended, and GPA. Always work backwards chronologically for resumes.
- Skills - List of all the programming languages, software, and operating systems you are familiar with. Foreign languages should be listed here too.
- Experience - Any work and/or volunteer experience. Project work is appropriate here too. Two to three entries is fine for this section. Again, list backwards chronologically. Give the name of organization, your position, and month/year(s).
- Honors - This section is optional. List any awards or honors you have received and the month and year received.
- HW1: Homepage (link to your homepage..which is the current page...index.html, right?)
- HW2: Resume (link to your marked-up resume)
Try marking up your own resume. Start with the raw text, then add your structural HTML layer. Don't forget to use lists (including <dl>) where appropriate. At a minimum, you're resume will need to contain the following content.
Be sure to manipulate, at a minimum, the documents margins, text color, centering, font size and font style.Â
Link your resume to your homepage using an ordered list titled Homework with the clickable text to your resume reading HW2 Resume. Add homework one and two like the following...