- Personal Web Site
- 100/80/60 Quizzes
- Unit Test
- In class you will be shown a hello world web page. Also explained: how HTML works, the elements of an HTML document, basic tags.
- Learn HTML at www.w3schools.com/html
- Valid HTML5 document
- Explanation
- Validate your code here: w3 Validator or nu Validator
- Part 1
- Read -> the W3 Schools Lists Tutorial.
- Add -> an Ordered List and an Unordered List to your
helloworld.html
page. - Validate your code
- Part 2
- Read -> the W3 Schools Images Tutorial.
- Add -> two images to your
helloworld.html
page. - Validate your code
- Part 3
- Read -> the W3 Schools Links Tutorial.
- Add -> a link to mountdouglas.ca to your
helloworld.html
page. Test that the link works. - Add -> a "back to top" link to the bottom of your
helloworld.html
page. Test that the link works. - Validate your code
Now move on to the next exercise: Audio, Video and CSS
- Audio
- Show in class: the Audio tag.
- Download a song from Youtube Audio Library
- Insert the song into your webpage and SAVE IT IN YOUR HTML FOLDER.
- w3 Schools Reference Audio Tag
- Validate your code
- Video
- Show in class: the Video tag.
- Download this video of the earth from Nasa Earth Video
- Insert the video into your webpage.
- w3 Schools Reference Video Tag
- Validate your code
- Basic CSS
- Show in class: the basic CSS.
- Add some CSS to your webpage.
- w3 Schools Reference Intro to CSS
- 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
"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.
We will use CSS to control text formatting and body properties.
RGB Hexadecimal color codes.
No copyright laws may be broken in your Personal Website project.
- 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
Video: Image File Formats
- Recall the img tag
- What is a Web Friendly Image?
- use a high quality image
- minimize byte size
- crop it, before downsizing
- make it the actual size it will appear in the webpage
- 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.
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:
Use these sites to find colour schemes:
- Colour Scheme Generator - good preview options of your colour scheme.
- Adobe Kuler - will generate a colour scheme from a photograph.
- 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
- Read -> the W3 Schools Tables Tutorial.,
- copy and paste the data below
- 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
- Validate your code
- Use the W3 Schools CSS and Tables tutorial to add some code to styles.css to improve the look of your table.
- Read this: Top 10 CSS Table Designs. Make your table even prettier.
- 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
- Read up to "tool tips": Pseudo classes
- Add the following to your html page:
- a link with a hover effect
- a div tag with a hover effect
- a tool tip
- 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.
- Create web-friendly images.
- Follow the web accessibility initiative
- Use modern web design practices (see links below)
- 9 Principles of Web Design
- Seek inspiration: Web Design Galleries
How to go about planning your website:
- Pick a topic.
- Brain storm all of your ideas for site content.
- Organize site content into 3 or 4 subtopics.
- Flow chart the site.
- Sketch a layout design on paper.
- Build the layout with div tags and borders. This will become your template.
- Validate HTML & CSS.
- Decide how images will be used in the layout (logo, backgrounds, banners, content)
- Get your images.
- Pick a color scheme, perhaps from your images, and decide how it will be applied to text, logo, links, backgrounds etc.
- Add the color scheme and images to your template.
- Validate HTML & CSS.
- Write your content.
- Get your content pictures.
- Duplicate your template for each page of your site. You will have one CSS file and many HTML files.
- Put into site.
- 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
- Backgrounds and Icons: Webtreats, bgPatterns
- Banners: Cooltext.com, Flaming Text
Bring your digital camera to class and learn how to take better photographs.
Web Site Project: description
of the project, marking criteria, milestones and deadlines.
70 Multiple Choice Questions, open everything