Radio Show


Multimedia Fusion2

MMF2 Help


Graphic Design Assignments

Photoshop Tips and Tricks


Website Assignments

Website Tips and Tricks





Website Workbook


Make a shell

This is a website skeleton. The document begins and ends with <html>. The document has a "Head" where the important information about the page is stored. And it has a "Body" where everything you want to display is put.

<html>
   <head>
      <title>FirstName LastName</title>
   </head>
   <body>
   
   Hello World!
   
   </body>
</html>

Saving it is very important. I recommend that you make a www folder somewhere on your computer and keep all your website file there. If you are using Notepad to type your html code (which I recommend) when you save it, you MUST be sure to add ".html" at the end of the name you give it. When it is saved then open it up in InternetExplorer or Firefox and make sure it worked. You should find your name at the top of the screen, and "Hello World!" at the top right of the white space.


Adding a header

The tag for a header is <h1> The top of this page has a header, and the title right above this is one too. When you have two tags that match, the latter one with a "/" then whatever is between those tags is made into a header.

<h1>My First Website Ever</h1>

Adding a list

Add your class schedule to the list next. "ol" means ordered list (numbered). "ul" means unordered list (bulleted). "li" means list item.

<ol>
   <li>A1 - Communications</li>
   <li>A2 - Gateway to Technology</li>
   <li>A3 - English</li>
   <li>A4 - Algebra II</li>
</ol>

Note: If you want to change your list from numbers to bullets- its actually really easy, change the two "ol" tags to "ul" tags and everything is done!


Adding a table

Turns out that maybe a table would be better to show a class schedule than a list would be. We will have one class for each row, and we will have columns for period, class name, and teacher. Table begin and end with "table" tags. We build tables one row at a time, each row begins and ends with "tr." In each row, we add each table cell, these begin and end with "td."

<table>
  <tr>
     <td>A1</td>
     <td>Communications</td>
     <td>Your Teacher!</td>
  </tr>
  <tr>
     <td>A2</td>
     <td>Gateway to Technology</td>
     <td>Mr. Adams</td>
  </tr>
  <tr>
     <td>A3</td>
     <td>English</td>
     <td>Mrs. Lee</td>
  </tr>
  <tr>
     <td>A4</td>
     <td>Algebra II</td>
     <td>Mr. Schmidt</td>
  </tr>
<table>

Note: please dont write all of these td's and tr's, you have better things to do than type all that out. When you have one row done, copy and paste that row to make everything else. This way if you ever need to add rows in the future its really easy, you just have to change the text in the middle.


Adding a link

Our page is starting to look pretty good, but its getting full. Its time to make a second page. For example we can have a seperate page for each of the classes in our schedule. We are going to make the link first, and them make the second page. This is what a link looks like in HTML:

<a href="page_to_open.html">WORDS TO CLICK ON</a>

The good news is that you can make ANYTHING a link; a image, a header, a word, anything. You just have to wrap the <a> around it. In our example we are gonig to change the words in our table to make a link. We put the A tag between the word and the TD tag. The next three lines show how our lines changes.

<td>Communications</td>
<td><a>Communications</a></td>
<td><a href="comm.html">Communications</a></td>

Making a second page

While making links the important thing to remember is that you need to help the HTML to be able to find our files easily. When you click on a link, it knows to look at the A tag and load up the file that you named in the HREF attribute. We just barely said that when we click on the word 'communications' we want to load a new page called 'comm.html.

Our problem now is that there ISN'T a file called comm.html, so we're going to make one. Make a new blank notepad, and put in the shell. The body will have a header saying "Communications" nice and big, and it will have one line saying how much you love the class.

If you load up your homepage and try it out, there are a few reasons it will not work:

  • The two HTML files aren't saved in the same place
  • You didn't save it '.html'
  • the href doesn't match what you saved your second page as


Making everything work

This is an easy step. We are going to put a link on our second page to go back to the first page. Essentially, we are doing the opposite of the first link we made. You saved your first page, you gave it a name and choose where to save it. When you link back to the first page, you will have to type in whatever its name is. In THIS example we saved our first page "home.html" so thats what we'll type in.

<a href="home.html">Go Back Home</a>

Styling the pages

Now comes the fun and powerful part. By adding a single line in our HTML we will change all the colors and positioning and whatever else we would like to change from the defaut (boring).

First open up a blank notepad, we have some CSS to write. CSS is a different language from HTML, it'll look different. The basic idea is that you first write the name of a tag you want to change. Then in { } you will change any part you wish. This is the CSS that I wrote:

body{
	background-color:#c3ddee;
	font-family:verdana;
	color:#3b2119;
	margin-top:40px;
}

h1{
	color:#fff;
	font-size:50px;
	text-align:center;
	letter-spacing:8px;
}

td{
	border:1px solid black;
	background-color:e5f6dc;
	padding:10px;
}

a{
	color:#cc7a5d;
	text-decoration:underline;
}

So in this example, whenever we have an h1, istead of how they USUALLY look, they will now be white, much bigger, in the middle of the screen, and have the letters spread appart

Now we have to save our CSS file. I like simple things, so I'm going to save it "Style.css" because that makes sense.

Now, we have the one line to add to our HTML to make it link together.

<link rel="stylesheet" type="text/css" href="style.css">

Add this line inside the HEAD right after the TITLE. This line says that we are going to link to another file, its a stylesheet, its written in the CSS language, and it can be found at that location. As long as they are in the same file location, the names match, and it was saved '.css' then it should work. Add the same line to your second (or more) pages to make all of them look the same and match! Isn't that easy to make all the pages look the same? All that style and you only had to do the work once.