mdinfotech.net  



  1. Personal Web Site
  2. 100/80/60 Quizzes
  3. Unit Test
It is recommended that you install the following software on your Windows machine at home for this unit:
  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
Part 1
  1. Read -> the W3 Schools Lists Tutorial.
  2. Add -> an Ordered List and an Unordered List to your helloworld.html page.
  3. Validate your code
Part 2
  1. Read -> the W3 Schools Images Tutorial.
  2. Add -> two images to your helloworld.htmlpage.
  3. Validate your code
Part 3
  1. Read -> the W3 Schools Links Tutorial.
  2. Add -> a link to mountdouglas.ca to your helloworld.htmlpage. Test that the link works.
  3. Add -> a "back to top" link to the bottom of your helloworld.htmlpage. Test that the link works.
  4. Validate your code

Now move on to the next exercise: Audio, Video and CSS

Audio
  1. Show in class: the Audio tag.
  2. Download a song from Youtube Audio Library
  3. Insert the song into your webpage and SAVE IT IN YOUR HTML FOLDER.
  4. w3 Schools Reference Audio Tag
  5. Validate your code
Video
  1. Show in class: the Video tag.
  2. Download this video of the earth from Nasa Earth Video
  3. Insert the video into your webpage.
  4. w3 Schools Reference Video Tag
  5. Validate your code
Basic CSS
  1. Show in class: the basic CSS.
  2. Add some CSS to your webpage.
  3. w3 Schools Reference Intro to CSS
  4. Validate your code
Learn how to add these things to your site using a:
  • links to other web pages
  • links to other web sites
  • links to another location in a page - Update: name attribute deprecated in HTML5, use id on any element instead.
  • image links
Check out Cooltext.com.
"CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once." w3c

We will use CSS to control text formatting and body properties.
No copyright laws may be broken in your Personal Website project.
Video: Image File Formats
  • 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
How to a colour scheme for your website.
  • Watch Beginner Graphic Design: Color
  • Additional reading: Web Developer's Guide to Colour

  • Use these sites to find colour schemes:
    1. Colour Scheme Generator - good preview options of your colour scheme.
    2. Adobe Kuler - will generate a colour scheme from a photograph.

    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.

    Resources
    1. 9 Principles of Web Design
    2. Seek inspiration: Web Design Galleries
    How to go about planning your website:
    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.
    As a class, we will pick a layout to build together.
    • using Icons for navigation
    • how to use background images and tiles
    • how to create banners
    Resources
    1. Backgrounds and Icons: Webtreats, bgPatterns
    2. Banners: Cooltext.com, Flaming Text
    Bring your digital camera to class and learn how to take better photographs.
    Zymic.com and byet.host provide free hosting with FTP access which is what you want if you wish to upload a site you have created from scratch.
    Web Site Project: description of the project, marking criteria, milestones and deadlines.
    70 Multiple Choice Questions, open everything