Class hours: 9:40 – 2:05
- If you have not done so already, create a folder for Week 8
- Create a folder- called WebResources on your desktop
- Create a folder called images inside that folder
- Download the Files for today Download each image and place in your new images folder
9:40 Attendance & Article –
9:45 – 10:45 The Head Tag & Figure and Figcaption Elements
The <head> tag of your document is a busy place. Lots of great information can be housed in that section that provides information to your browser. Information that indexing browser bots and spiders can cache, keywords, character type, viewport information links to your style sheets and <meta> data. Here is a sample of what might go in a <head> element.
<head> <meta charset="utf-8"> <meta name="description" content="Write what this page is about"> <meta name="keywords" content="create a list of keywords here"> <meta name="author" content="Put the author's name here"> <link rel="stylesheet" type="text/css" href="css/style.css"> <title>Using Figures and Figcaptions</title> </head>
<figure> and <figcaption>
The figure element is intended to be used in conjunction with the figcaption element to mark up diagrams, illustrations, photos, and code examples (among other things).
Today we are going to practice using figure and figcaption. When it comes to accessibility, figure and figcaption are best practice when handling images, diagrams and illustrations.
Activity: Follow the instructions on the handout. Practice inserting images and using the <figure> and <figcaption> elements for single and multiple images. Upload final document to your Week 8 folder in the WebResources folder. Filename: figureandfigcaption.html
10:45 Break (15 Minutes)
11:00 – 11:50 Physics – Stay in our Room!
Class meets in room m117 at 11am. Go to class immediately from break. When class is over, you will head to lunch.
11:50 – 12:20 Lunch (30 Minutes)
12:20 – 12:45 Literacy in Focus
Grab your book and chill. We’ll be reading today. No computers, no talking. Sit on the couch if you like or move your chair.
12:45 The HTML5 Resume
This afternoon your are going to build an HTML version of your resume. The process should be pretty easy considering you have a final version built in Google Docs. This resume will be part of a portfolio we will be building as a class. Use your completed final resume as your reference.
You should use exactly zero styling. This exercise is all about using raw HTML. We will make it look pretty later with CSS.
Remember your markup should be structured semantically using proper tags and indentation levels.
- Create a
headerwith a big ol’
h1stating your name
- Add an
addresstag with your address
- Add an anchor tag with your email and an
- Add an
hrtag below to give your header a nice big underline for emphasis!
- Create and use the
sectionelement for each section of your resume (Goals, Work Experience, Skills)
- Deploy the best heading elements that match your resume, bulleted lists, bold, italics, etc…
- Add a
footerto the bottom of your resume
Put similar information in the footer as you did the header only make it smaller by using tags that print normale sized text.
Don’t forget to make your email link clickable with a
Upload to your Week 8 Folder. Filename: htmlresume.html