CS12 Day One
Basic HTML / XHTML
- Introduction to HTML / XHTML
- Link and Image Tags
- Page Validity and Accessibility
- Adv. Block Level Elements
Daily Objective
Participants will be able to:
- Identify the components of HTML / XHTML.
- Manage files and folders.
- Create links with various attributes.
- Identify the differences between absolute and relative links.
- Insert images with various attributes.
- Explain what it means to make a page accessible and valid.
- Explain the use and importance of heading tags.
- Describe the differences between span and div elements.
Presentation(s):
Instructor Led Project: Files Needed
Day One Files (.zip) | XHTML Template
Participant Project 1: Lab 1 Requirements
Participants will need to complete the following items for their lab project:
Portfolio Page
- 1 page.
- Heading tags used to logically separate page.
- 2 external links, include title attribute.
- 1 internal link to vacation project (see below) with title attribute.
- Page has a minimum of one image with alt and title attributes.
- Folders used for organization.
- All pages validate. (XHTML 1.0 strict or XHTML 1.0 transitional)
Vacation Page
- 2 pages.
- Heading tags used to logically separate page.
- 2 external links, include title attribute.
- Navigation between pages (internal links)
- Page has a minimum of one image with alt and title attributes.
- Folders used for organization.
- All pages validate. (XHTML 1.0 strict or XHTML 1.0 transitional)
Personal Project
- Determine topic by next class
Resources
- XHTML: http://www.modularmedia.com/xhtml_standards/xhtmlcheatsheet.html
- XHTML: http://www.w3schools.com/xhtml/
- XHTML Template: http://particletree.com/files/xhtmltemplates/xhtml-template-1.txt
- Doctypes: http://www.alistapart.com/stories/doctype/
- HTML / XHTML Validation: http://validator.w3.org/
- W3C Link Checker: http://validator.w3.org/checklink/
- Section 508: http://www.happycog.com/lectures/access/
- Section 508 Compliancy Checker: http://www.contentquality.com/
- Alt Text: http://www.jimthatcher.com/webcourse2.htm/
Readings
- Head First: 4-8, 22-26, 43-55, 104-105, 109-111, 144-145, 173, 176, 229-231 , 240-241, 270-275
- Quick Start: 25-40, 59-72, 104-108
Assignment(s): Due next class @ 5:00pm
- Complete Lab 1 Requirements
- Take Home Assignment #1a: Good Design Practices - Colors for Web Design (optional)
Bonus
- Free Images: http://www.morguefile.com/ | http://www.sxc.hu/
- Free Web Editor: http://www.download.com/3000-2048-4687625.html
- Adobe Dreamweaver Trial: http://www.adobe.com/products/dreamweaver/
- Adobe Fireworks Trial: http://www.adobe.com/products/fireworks/
Exit Card
- PLUS/DELTA/NEGATIVE - Please complete class evalutaion before leaving tonight