Student Pages | Weeks 1 & 2 |Weeks 3 & 4 | Weeks 5 & 6


ketchup and mustard bottles

Here is your fun Friday website to check out.Gravity Points

Today is a Ketchup & Mustard Day. This just means that you have this time to work on your pages, make sure your links are working, add some text and pictures.


More about links.
The target attribute specifies where to open the linked document. By default when a link is clicked it opens in the same tab, but you can set the link to open in a new window by setting the target _blank. You will try this by coding the Twin Valley MS/HS website to open in a new window.

Images can be turned into links. Add a small image to the assign.html page. Add a link that goes back to your home page when someone clicks on the picture.
Click on the Cookie Monster to get the directions on how to do this.
Please save your work and upload it to the server.


Today, styling links.
URL stands for Uniform Resource Locator.

Links are found in nearly all web pages. Links allow users to click their way from page to page. HTML links are hyperlinks. You can click on a link and jump to another document. In HTML, links are defined with the <a> tag.
The href attribute specifies the destination address.
The link text is the visible part. Clicking on the link text will send you to the specified address.

Absolute URL links include a full web address. These are used to link to websites outside of your website. You will use the full web address to link your page to the Twin Valley MS/HS website.

A local link (link to the same web site) is specified with a relative URL (without http://www....).

HTML Link Colors

color wheel

By default, a link will appear like this (in all browsers): An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

You can change the default colors, by using CSS. Click here to see the code for your style sheet.

Note: A link does not have to be text. It can be an image or any other HTML element. More about that tomorrow.


It seems that the biggest problem is file names not matching. Please use all lower case letters for your folders and when naming and saving pictures, html pages, and css. Then you do not have to remember how you saved it and can rule that out when things are not working as they should.

Today we will create 2 more divs to style the whole page.

Click here for the code that you will need. Be sure to save all your work and upload to the server.


Create a Footer

The footer is found at the bottom of a web page. It usually has some contact information and a date when the page was last updated. You will create a footer using your school email and today's date.
Click here for directions.

When you are finished with the footer go back and work on adding some content to your pages.


Your fun Friday website: The Tone Matrix

Today you will have a chance to continue working on your personal pages.


thinking person

Finally you will have some pages and images to upload to the server. You should have a folder named with your first initial and last name. Amy Smith would be asmith. This is the main folder for everything that you want to put on your website.
Inside this folder you have 2 more folders. One labeled images and one labeled assign.
Your first page (saved as index.html) a css page, a hobby page, and an assignment page - all html files will be in the main folder.
Your image folder should contain your banner and any other pictures that you use.


Navigation Bars
You have a top navagation bar that you created and saved as sample.html. Today you will take that and create a navigation bar for your first site. You will need 4 links - one for Home Page (this needs to be saved as index.html), one for your hobbies or pets, one for Assignments and an outside link to the TVMHS Website.

If you want a side bar navigation please try this in your CSS page to start with. Left Menu

Add your banner to the page and save everything in your folder.
If there is enough time I will show you how to upload to the server.

Week 3 Monday and Tuesday

Time to try a different tutorial. Please go to Code Cademy

This will give you more practice using HTML.


amazed person

It is important to format photos for your site before you add them to the site. Smaller file sizes (pixels) load quicker and take less space on the server. You can do this in Photoshop or any photo editing program. Download this picture and resize it as a smaller image. Then save that image as amazed.jpg in your assign folder. Click here for directions.