Web Page Design I and II

~York Adult Ed Class~

Fall 2009

URL of this page: http://wboardman.com/webdesign/
Instructor email: wayne31r [at] gmail dot com

Creating your own practice web page online

From the second class on, you will be working on a free online web hosting site (www.150m.com). Signing up is fairly quick and easy, but, if you need some help, I have created a slideshow that takes you through each of the screens that you will be encountering. Try it.

Resources

Basic HTML

W3 Schools
One of the best collections of free Web-building tutorials and try-it-yourself examples.
http://www.w3schools.com/

HTML.net
Another excellent site that gives step-by-step instruction for learning HTML and CSS.
http://www.html.net/

HTML – An Interactive Tutorial
The basics of HyperText Markup Language
http://www.davesite.com/webstation/html/

Some Basic Computing Skills
Instruction and practice on how to Copy and Paste and how to quickly switch between windows.
Basic Skills

Sizing Fonts
Some of the choices available for modifying the size of fonts.
Points and Pixels

Why not use MS Word to create a Web page?
Compare two similar HTML files created with and without MS Word.
Web page #1 created by MS Word.
Web page #2 created in plain HTML.

Colors and images

Colors and their Hexcode numbers
Go to “The Original Color Chart” to chose colors by name or code.
http://cedesign.net/colors.htm

Image Tag Basics
See how images can be added to a web page and follow the steps to add an image to your own web page.
http://wboardman.com/basicimages.html

More advanced topics

Web Style Guide
A thorough review of basic design principles as well as tricks of the trade; shows how to use fonts, colors, and layout in order to create effective Web pages.
http://www.webstyleguide.com/

Tables
Making tables with HTML can be a useful skill, even though newer standards advise using CSS instead of tables for positioning. Start here to access a bunch of tutorials and how-tos:
http://webdesign.about.com/od/tables/

Cascading Style Sheets
Some very basic examples of css, including an exercise.
http://wboardman.com/basic-css.html

Web page template
The template-builder page gives an example of a two-column web page with header and footer, all created with the help of CSS.

Getting listed on Google
Here are some basic tips for improving your search engine rankings.

Creating a blog of your own

Introduction to WordPress.com
Basic overview of what a blog is and how it works.
http://en.support.wordpress.com/introduction/

Signing up for a WordPress.com blog
Review this basic instructional video for signing up for a free blog through WordPress.com.
http://wordpress.tv/2009/01/05/signing-up-with-wordpresscom/

Post and pages
Learn the difference between a blog post and a blog page.

Example
Here is an example of (another) WordPress blog devoted to web design.
http://mayuriwebdesign.wordpress.com/