1. Personal Web Site
2. 100/80/60 Quizzes
3. Unit Test

1. ConText or Notepad++.
2. any web browser

1. In class you will be shown a hello world web page. Also explained: how HTML works, the elements of an HTML document, basic tags.
2. Learn HTML at www.w3schools.com/html

1. Valid HTML5 document
2. Explanation
3. Validate your code here: w3 Validator or nu Validator

• Html
• Head
• Body
• h1-h6
• p
• pre
• comments
• hr and br
• em
• strong
• Entities or Special Characters

In this exercise, you will expand your Hello World page by adding lists, links, images, audio, and video.

Ordered and Unordered Lists

1. Read -> the W3 Schools Lists Tutorial.
2. Add -> incorporate a relevant Ordered List and Unordered List to your Hello World page.
3. Validate your code

Anchors (Links)

1. Read -> the W3 Schools Links Tutorial.
2. Add -> a link to a relevant website to your About Me page. Test that the link works.
3. Read -> Create an anchor link at the bottom of the page that says "Back to Top" and jumps back to the top of the page.
4. Add -> a "back to top" link to the bottom of Hello World page. Test that the link works.
5. Validate your code

Images and Filepaths

1. Read -> the W3 Schools Filepaths Tutorial.
2. Read -> the W3 Schools Images Tutorial.
3. Create -> In your About Me folder, create a new folder called "images".
4. Download a relevant image from Pexels.com and save it in your new images folder
5. Add -> using a relative path, add the image you saved to your Hello World page. Test that the image works by viewing your page in a browser.
6. Validate your code

Audio

1. Watch: the Audio tag.
2. Download this song Busy City.mp3
3. Insert the song into your Hello World page and SAVE IT IN YOUR HTML FOLDER.
4. w3 Schools Reference Audio Tag
5. Validate your code

Video

1. Watch: the Video tag.
2. Download this video of the earth from Nasa Earth Video
3. Insert the video into your Hello Worldpage.
4. w3 Schools Reference Video Tag
5. Validate your code

1. W3 Color Codes Explanation
2. Additive and Subtractive Color Models
3. RRGGBB
4. W3 Color Names Chart
5. Play What the Hex?

• W3 Positioning Intro

• Read Copyright and Digital Media
• Read What happens when Web Sites break copyrights
• Read Fair Use
• Copyright Matters
• Creative Commons licenses
• Free Image Resources: IT Graphics Links

• Recall the img tag
• What is a Web Friendly Image?
  1. use a high quality image
  2. minimize byte size
  3. crop it, before downsizing
  4. make it the actual size it will appear in the webpage
  5. use jpg for images (85%), png for graphics with transparency, gif for animation
• More on Different Image Formats

• Beginner Graphic Design: Layout and Composition
• Creating your own layout.

1. Coolors.co - good options of your colour scheme.
2. Adobe Color Wheel - will generate a colour scheme from the color wheel.

• Beginner Graphic Design: Typography
• Web Safe Fonts
• w3 How to - Google Fonts, Google fonts
• In class demonstration of creating typography with CSS
• Typography examples #1
• Typography examples #2

Part 1: Tables

1. Read -> the W3 Schools Tables Tutorial.,
2. copy and paste the data below
3. put it in a HTML table that you have designed using the information from the tutorial.

   Rank	Horse Name	   Starts	1st	2nd	3rd	Earnings	Win%  Top3
   1	I'll Have Another	3	3	0	0	 $2,029,600	100%	3
   2	Bodemeister		5	2	3	0	 $1,104,800	40%	5
   3	Believe You Can		4	3	0	0	 $947,200	75%	3
   4	Dullahan		3	1	1	1	 $680,000	33%	3
   5	Secret Circle		4	2	2	0	 $670,000	50%	4
   6	Hero of Order		8	2	0	1	 $648,804	25%	3
   						

4. Validate your code
5. Use the W3 Schools CSS and Tables tutorial to add some code to styles.css to improve the look of your table.
6. Read this: Top 10 CSS Table Designs. Make your table even prettier.
7. Will be marked in class. Note: if the teacher does think it is pretty enough, you may have to redo it.

Part 2: Pseudo-Classes

1. Read up to "tool tips": Pseudo classes
2. Add the following to your html page:
   • a link with a hover effect
   • a div tag with a hover effect
   • a tool tip

The teacher will mark parts 1 and 2 as a completion exercise at the end of class

If you finish early, either learn more css or practice typing.

• What is an accessible website?
• Read thisw3 Web Accessibility Initiative page.

1. 9 Principles of Web Design
2. Seek inspiration: Web Design Galleries

1. Pick a topic.
2. Brain storm all of your ideas for site content.
3. Organize site content into 3 or 4 subtopics.
4. Flow chart the site.
5. Sketch a layout design on paper.
6. Build the layout with div tags and borders. This will become your template.
7. Validate HTML & CSS.
8. Decide how images will be used in the layout (logo, backgrounds, banners, content)
9. Get your images.
10. Pick a color scheme, perhaps from your images, and decide how it will be applied to text, logo, links, backgrounds etc.
11. Add the color scheme and images to your template.
12. Validate HTML & CSS.
13. Write your content.
14. Get your content pictures.
15. Duplicate your template for each page of your site. You will have one CSS file and many HTML files.
16. Put into site.
17. Validate HTML & CSS.

• using Icons for navigation
• how to use background images and tiles
• how to create banners

1. Backgrounds and Icons: Webtreats, bgPatterns
2. Banners: Cooltext.com, Flaming Text