Title-HTML.jpg
intro | tags | color | attributes | images | embedding | tables | links | | Exercises: 1.Homepage 2. Website
Need more help? Consult the w3schools.com tutorials

Table of Contents


A WEBSITE is simply a collection of PAGES linked together logically.
A good website can be made VERY quickly if you learn to work smart in html.

Exercise2
Create a Portfolio Website
Create a website that has a home page (index.htm) that also links to
  • Pictures - Photoshop work that YOU'VE created in class
  • Videos - The Video Slideshows (WMV) you made in class
  • Links that you - Links to any published websites you might have made, or organizations you're a part of. At the least, have a link to schools that you've attended

Steps:
1. Create a MENU

Create a "menu" at the very top of your "index.htm" webpage that looks something like this:
HOME | PICTURES | VIDEOS | LINKS
<HR>


<HR> can add "rulers" around your menu

Add <AHREF> tags to each of the four main pages. Can refer to pages that DON'T exist yet - once you've made the master "template", you'll build these clone pages.

Use BODY attributes of BGCOLOR, TEXT, LINK, VLINK and ALINK to control the readiblity of your menu
HTML_Menus01.png
2. Create a TEMPLATE and cloned pages

  • SAVE the index.htm document that you're working on
  • Use SAVE AS and rename the file to "Pictures.htm"
  • Remove any content (beyond the menu) that isn't relevant to the pictures webpage and SAVE
  • Use SAVE AS and rename the template to "Videos.htm", then "Links.htm"

Your menu should now successfully link to each of the main four webpages without any broken links (so long as you named the links and files properly)

A "Template" is a basic, empty webpage with all the <BODY> formatting and
menus already put in. It becomes a "mold" that you can make copies of
and fill up with content to quickly create all the pages in your website

  1. BODY formats like background colour, text colour, link colours
  2. The location of the menu
  3. The format for the title and any subtitles

3. Populate your pages with CONTENT
You can now customize the BODY with appropriate titles and content for each page.
  • PICTURES will get a thumbnail gallery of images and descriptions of the projects you've done
  • VIDEOS should get a representative thumbnail image and description, and then link to an embedded video on another page
  • LINKS could use thumbnails for each site, and then link to the actual page. To get a thumbnail of a website, use ALT-PRINTSCREEN to "grab" an image of the web browser, then open a NEW canvas in Photoshop and CTRL-V (Paste) the image. Resize it to thumbnail size (150 pixels).