Chris Dunn - [Advanced HTML]

In this section we are going to take the web page you have created and add some more complex features to it.

The code you have in your web page file should now look the same as that below. You do not have to space each element on a different line as I have HOWEVER it is a good idea. Firstly because it enables you to easily see what you have done and see your mistakes and it also enables someone else to look over your code and see what you did and how. This becomes important when we start adding more complex elements.

<html>
<head>
<title>Chris Dunn</title>
</head>
<body>
UNSW Science Communication is a great degree.
</body>
</html>

Have a look at these tags and see if you can understand them. Are they the same?

Check out my tags!! or
Check out my tags!!

These tags are no more complicated than what you have already used they just have more attributes. That is not only do they change the font but they change the size and color. You do not have to include all attributes in the tag and you can easily chop and change the attributes to allow you to get different effects.

One important thing to remember is that you are creating a text file that only describes how you would like the information to look when it is viewed. Yes, that tag would work and it works, on MY computer, but it probably won't look correct on your computer. Unless the person viewing the page has the font called '20th Century Font' on THEIR computer their browser will just display it in the default font, which in most cases is Times New Roman. This is one problem with using really fancy fonts. Fonts like Arial, Helvetica, Times New Roman or Tahoma are very common and hence are used more widely.

One tag we used earlier which has a lot of attributes is the <body> tag. The following tag changes the color of the background and the text.

The following tag will even add a picture to the background. We will look at images later.

The following standard web colors are available: Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow and Aqua.

All other colors are made using a combination of Red, Green & Blue. These are written in the format #RRGGBB where each color is one of 256 made up of Hexadecimal numbers from 00 to FF.

As you will have noticed everything in our page so far is appearing in the top left corner. This is because we haven't added any tags describing where on the page we would like things layed out. The following tags are all associated with page layout.

Line Break	<br>
Paragraph	<p> & </p>
Division	<div> & </div>
Table	<table> & </table>, <tr> & </tr>, <td> & </td>

Division is a tag used to give other attributes to a selected are of text.
If I create a paragraph and I want the text aligned to the center of the page I can use;

If I don't want a paragraph however I can use Div to perform a similiar function.

As you can see though it would be difficult to layout information on a page like you could in Microsoft Word. Fortunately web developers use a few tricks to achieve good looking layouts. The most common of these is tables.

Have a look at this code and the table beside it. Can you see the relationships?

Cell 1	Cell 2
Cell 3	Cell 4

An invisible table (border="0") can be used much like Excel to lay information out on the page. To create the above example I used an invisible one row, two cell table with the code in the left cell and the visible table in the right cell. I have used this feature a number of times throughout this course. Have a look at sites like Hotmail, Yahoo or Excite at home and see if you can identify where they have used invisible tables to help line up information on the page into neat sections.

Put the original sentence we wrote in the middle of your page. Use all of the above tags in your own page (be creative) & save it.
BONUS - Can you change the color of the text in one cell?

What makes the web the web is the links between all of the pages. You have your page but now you need to link it to other pages. Have a look at the link below:

Which looks like My Email. One commonly used change allow you to choose whether this link will open in the same window as the current page or whether it will open a new window. Have a look at the two links below.

<a href = "www.hotmail.com" target = "_blank">My Email</a> This will open in a new window.
<a href = "www.hotmail.com" target = "_top">My Email</a> This will open in the same window.

Can you see the difference? Add a few links to your page. Try making some open in a new window. Do they work?

Now you can see why I suggested that you space each element on a different line. The more features we have to our page the more extensive the HTML code gets and the more we try to change fonts, colors and sizes the more complex it gets. This is why most designers today don't use notepad for creating web pages. Programs, like those mentioned at the start, make this job easy by automatically creating the code and tags for you. WARNING: Yes, Microsoft Word & Excel will let you save a page as HTML however they make a very messy job of it. For this reason you are better to use a program dedicated to web design.

As we discussed briefly at the start, different browsers approach HTML differently. If you have a look at the design guide, http://www.ncdesign.org/html/index.htm, you will notice that for each tag they have listed compatible browsers. This is a really important consideration. Most programs do not even get this right depending on who created them and who they have been working with. The best suggestion is to test your page in both internet explorer and netscape (or mozilla - they run on the same base) then you can ensure that your page will work for at least 90% of your audience.