(Updated: 2005/09/19 7:55 )

HTML: Web Page Design

 

Created by: Shelly Zhao          

Updated by: Tanya Ellchuk

Updated by: Holger Hoos   

Comments to: Holger Hoos

 

 


Sources: much of the lab was taken from UBC Roadmap for HTML Web Page Design

 



Contents

 



Objectives

In this lab you will learn how to create your own web page using basic HTML tools, how to edit and format text, how to insert pictures, how to format the head and background of your web page, and how to link multiple pages together. 

You will get a basic idea of what is behind a web page, and create a simple web page of your own.  You will be able to create a web page like this sample after the lab. 

Interested in creating your own page? Here are the topics you need to get started:

  1. HTML Overview
  2. HTML Basics
  3. Basic Formatting
  4. Character Formatting
  5. Links
  6. Images
  7. Color
  8. Tables
  9. Using HTML From Other Files
  10. End of the Lab
  11. Handing in


Lab Overview

This lab will guide you through basic HTML to enable you to create Web-based publications.

You will learn fundamental HTML skills to create  a web page. The next lab will cover basic JavaScript that you can use to create more dynamic pages.



Before the Lab

Before the lab you should be familiar with basic computer operation skills, such as how to open a file, create a file, save and close a file, and how to use a text editor, such as Notepad or WordPad, to type and edit a text file.  (Both Notepad and WordPad can be found under the Accessories menu:  click on the Start button  -  select Programs  -   select Accessories  -  select either Notepad or WordPad )

You should also be familiar with the basic features of Internet browsers such as Firefox, Internet Explorer or Netscape. You should also know how to open local files in your Web browser (in Firefox, select Open File from the File menu, then select your file using the dialog box).

Be sure to read all sections of this lab - in particular the During the Lab section - prior to your lab session to familiarise yourself with the HTML you will be learning.  Your TA will be evaluating your work at the end of your lab session.



During the Lab   

1. HTML Overview  

HTML (HyperText Markup Language) is the language used to lay out documents on the World Wide Web (WWW).

The "HyperText" part of HTML refers to the way that pages can link to other pages elsewhere on the WWW.  There are certain words (called "hyperlinks" or just "links") in the document that, when clicked, take you to a new page.

"Markup" means that there are special character codes embedded in the document to define page layout.  In HTML, these special codes are called "tags".  There are tags used for placing images in a document, making headers, creating links, and much more.  HTML tags consist of a "less than" sign (<), the tag name, and a "greater than" (>) sign. Most tags have an "end tag", which is similar to the start tag except for a forward slash (/) preceding the tag name.

HTML tags are case-insensitive. Thus, <BODY>, <body>, and <BoDy> are all considered equivalent. Still, when you write your own HTML files, it is a good idea to be consistent in the capitalisation of tags.

A common issue in HTML layout is that the page may look different on different computers.  The problem is that HTML is a "logical" layout language rather than "absolute"; there's no exact specification of what a "Header 1" should look like.  People explore the Web with many different programs on many different computer platforms, each of which has a different idea of how things should look.  Even users using the same program may use different settings (for example, 12 point font as compared with 10 point), which will produce different results.  Keep in mind that what looks nice on your computer may not look so nice on someone else's.  

An HTML file can be edited by any text editor. The benefit of using simple text editors, such as Notepad, are:

If you are using a word processor such as Microsoft Word as your text editor, be sure to save your HTML file as "Plain text" or "Text only with line breaks".

Viewing Your HTML

During this lab, you will create two web pages. One will provide general information about yourself, and will be the main page of your website. The other one will be a subpage that has a list of the courses you have taken at UBC. To ensure your work is correct, open up another web browser and load the file you created into it. Your HTML will not be viewable by others on the WWW while it's on your computer (unless you have a Web server set up).     

2. HTML Basics  

There are three required sections in an HTML document.  While some browsers may be able to display pages even without these sections, it is a very good idea to include them.  These necessary elements are:

Now type the following in your text editor:

<html>
<head>
<title>Your name Web Page</title>
</head>
<body>
Welcome to Your name's Web Page
</body>
</html>

where Your name is replaced by your own name. 

This document has a title "Your name Web Page", and a body reading "Welcome to Your name's Web Page." Create a new directory called "HTML"; all the files in this lab should be saved in this HTML directory.  Save the text file you have just created as "main.html" in your HTML directory. When you are finished, open that file in another web browser and compare it with this

3. Basic Formatting  

3.1 Line Breaks: 

Right now, our body only has one line. Try to add a paragraph starting with General Interests to address your interests in any area. The paragraph should have at least four sentences. Put this new paragraph between the  <body> and </body> tags after the first line of the text.  Leave a blank line between the two paragraphs. Be sure to save your file before loading the new file. Now the file should look like this in the browser. You will notice that although the two paragraphs are on different lines in the source file, they appear on the same line when viewed with a browser. We should use tags to denote line breaks in HTML.    There are two "line break" tags: <P> and <BR>.

The <P> tag is usually used to denote the beginning of a paragraph.  There is a matching </P> tag which is optional.

The <BR> tag is used to drop to the next line without starting a new paragraph.  This is useful any time you wish to start a new line without starting a new paragraph, such as when writing an address.

Now put a <P> tag between the two paragraphs in our file. Here is what the file should look like now. 

You can also center a paragraph in the following two ways: 

Now put <CENTER> just before the text of your first paragraph and </CENTER> after the paragraph. And this is what the page should book like now. 

3.2 Headings

Headings are useful to break your document into sections.

HTML has six levels of headings, <H1> through <H6>; <H1> is for main section headings, <H2> is for subsections, and so on. Headings are ended using the corresponding </H1> through </H6> tags.

Now, add a heading to your welcome sentence 

<H1><center>Welcome to [your name] Web Page</center></H1>

See here to display what the file should look like. 

3.3 Preformatted Text

As stated previously, browsers ignore the original formatting of the document.  In cases where the formatting is important, such as when citing sections of computer code, it is possible to maintain the original formatting of the text.  This is done through the <PRE> tag.

Anything between the <PRE> and </PRE> tags will maintain its original formatting when viewed, including any spaces or carriage returns.

Put the following at the end of the body, starting with a new paragraph:

<PRE>
Copyright 2005 [Your name]. All rights reserved.
</PRE>

 Check here to display what the file should look like.

3.4 Horizontal Rules

Horizontal rules are helpful in splitting a document into sections. Put the <HR> tag wherever you want a horizontal rule to appear.

Here is what a horizontal rule looks like:


It is possible to change the height and width of the rule, or to get rid of the shadow. There are three attributes that can be used to alter the appearance of the rule:

These attributes are contained within the <HR> tag. For example, to create a rule 8 pixels high that stretches halfway across the screen and has no shadow, use the tag <HR size="8" width="50%" noshade>.

This is what <HR size="8" width="50%" noshade> looks like:


It's often nice to add <P> tags before and after the rule to space it out a little from the surrounding text. 

Add the following between the first and second paragraph of the body: 

<P>
<HR>
<P>
check here to display what the file should look like.

4. Character Formatting. 

4.1 Character Formatting Basics

There are four main character formatting tags used:

These tags can be embedded in each other to get combinations of the different typefaces. 

Make "General Interests" in the second paragraph to be bold by putting a  <b> tag in front of it and </b> after.

Click here to  display what the file should look like.

4.2 The <FONT> Tag

The <FONT> tag can be used to change font size or font color. Changing font color is discussed in the upcoming "Color" tutorial.

The font tag has an attribute size=string which can be used to increase or decrease the size of the font. The value of string can be either:

Add <FONT size="-1"> to the last paragraph of the file. Don't forget </FONT> after the paragraph. Now your file should be look like this

4.3 Special Characters

There are several special characters in HTML: < and >, which are used to denote tags, and &, which is used for special characters. These characters will not normally appear in the viewed document. As well, there are some symbols, such as , which have no keyboard equivalent. You can place these special characters in HTML documents using so-called character entity references, or short: entities.

Here is a entilist of some common special characters, and their corresponding entities.  For each, either a reference number or name can be used. For example, both &amp; and &#038; will both appear as "&".

 
Symbol    Reference Number    Name   
& &#038; &amp;
< &#060; &lt;
> &#062; &gt;
&#169; &copy;
&#162; &cent;
&#189; &frac12;
&#233; &eacute;
&#8364; &euro;

Put a  "" symbol after the "copyright" in your last paragraph, by adding &copy;. The line should now contain

 ....<FONT size="-1">Copyright &copy; 2005 [Your name]. All rights reserved.</FONT>....

Click here to display what the file should look like.

5. Links

Links (anchors) allow you to link your page to other pages.

5.1 The <A> Tag

The <A> tag is used to create anchors. Linking to other documents is achieved using the attribute href="filename". This attribute tells the browser which page to load when the link is clicked. Remember that file names within this attribute are case sensitive.

The text that you wish to act as the link appears after the <A href="filename"> tag.  The <A> tag is closed off by the matching </A>

You can find an example of a link in the sample file shown at the beginning of this lab. 

Create a new file in the same directory as "main.html". Call this new file "courses.html". Type the following HTML into "courses.html":

<HTML>
<HEAD>
<TITLE>UBC Courses</TITLE>
</HEAD>
<BODY>
<a href="main.html"> back to personal page.</a>
</BODY>
</HTML>

We will try to create a table in this file later, so we will leave the body empty for now. When you are finished, save "courses.html". Open the "courses.html" in the browser, the file should be like this.  Clicking on the words "back to personal page." should bring you to the "main.html" file you completed previously. 

5.2 Pathnames

When referring to other documents, such as specifying a filename in an anchor, it is important to understand some things about paths.

In HTML, it is assumed that you are referring to files on your local computer, unless explicitly stated otherwise. As well, all local references use the current directory as a base. In the previous tutorial, we referred to "main.html" using only the file name. This was possible since both the referring document ("courses.html") and the target document ("main.html") appeared in the same directory. In general, using these relative pathnames is a good idea for several reasons:

  1. There is less to type.
  2. It's easier to move your HTML documents to another location, since the relative pathnames will still be valid.
  3. It allows for more efficient document retrieval by the server.

However, when referring to documents that are largely independent, it is usually a good idea to use absolute pathnames.

When referring to documents that are not on your local computer, you need to use a URL. URLs have the following structure:

protocol://host.domain/path/filename

where

protocol is one of

We'll add a link to the UBC Department of Computer Science webpage. Add the following to the body of "main.html" right before the "copyright" (last) paragraph:

<P>
Click here for more information about 
<A HREF="http://www.cs.ubc.ca">
UBC's Computer Science Department</A>.
And separate this from the "General Interests" paragraph with a horizontal rule.  Click here to display what the file should look like.

5.3 E-mail address

To let people mail you, put the following before the horizontal rule above the "General Interests" in "main.html":

<P>
e-mail: Your e-mail address
Click here to display what the file should look like. Rather than putting your e-mail address exactly, we suggest that you use the word "at" instead of the @ symbol.

6. Images

For this lab, you should bring an electronic picture of yourself (or any other picture of your choice) and put it in your "HTML" directory. Save the file as "mypicture.jpg". Also download this image into the same directory with the name "logoUBC.jpg" Nothing brings your Web document to life quite like an image. However, be sure to resist the urge to put many images on the same page. Remember that most people visiting your page  will be doing so by modem, and probably will not want to wait 10 minutes for 500K of image files to load.

6.1 The <IMG> Tag

The <IMG> tag allows you to place an image in your document. The <IMG> tag has an attribute src="filename", which specifies the image file to insert into your document. Remember that, as with the <A> tag, file names within this attribute are case sensitive.

Put the following code before your "e-mail" paragraph in "main.html", 

<IMG SRC="mypicture.jpg" height="100">
Now the "main.html" should look like  this. 

6.2 Linking Images

You can link to other pages using an image as an anchor rather than text. This is done in the same way as you have seen previously; you just need to place an <A> tag around the <IMG> tag.

Add another line in your link section, before the copyright notice, with the following:

<A href="http://www.ubc.ca/"><IMG SRC="logoUBC.jpg"></A>
Click here to display what the file should look like.

The image should now have a colored border around it. This is to show that the graphic is acting as a link. You can change the border width with BORDER=number attribute of the <IMG> tag. You may remove it completely with BORDER=0. However, removing this border is usually not a very good idea; people visiting your page will not know that the image is also a link.

6.3 Image Alignment

You can align images on the page using the align=alignment attribute of the <IMG> tag.

There are five alignment possibilities for your image:

When using align=center or align=top, be aware that only the first line of text will be aligned; the next line appears under the image. 

Add the "align=left" within <IMG> tag of the "mypicture" in the "main.html". To prevent the image from going to the next section, add a <BR clear=all> in front of the first Horizontal Rule. Here is what the file should look like. 

6.4 Height & Width

When a browser is laying out a page, it must wait until it knows the height and width of any images in order to place the text around it correctly. Normally, the browser must load the image before it can find out the dimensions; this causes the page to load slowly. However, by adding HEIGHT and WIDTH attributes to all your images, you can greatly speed up this process.

Giving a height and width different from the actual height and width of the image will cause the browser to scale the image.

Add HEIGHT and WIDTH attributes to mypicture.jpg (width="95" height="150"). Click here to display what the file should look like.

6.5 Alternate Text

The use of alternate text in images was very common when the Web was in its infancy. Many users navigated the Web using text-only browsers, making textual information necessary. Users with slow connections may turn images off to load pages faster. As well, new browsers such as Microsoft's Internet Explorer will display the alternate text when somebody moves their cursor over the image.

To add alternate text to an image, the alt="string" attribute is used.

Add alt="UBC home page" to the logoUBC.jpg tag. 

Click here to display what the file should look like.

7. Color

Adding color to a page can really improve its look.  When selecting a color scheme, be sure that the text is easily readable (if you have a dark background, use a light font color, or vice versa).

7.1 <BODY> Modifiers

There are four attributes in the <BODY> tag that can be used to change the color scheme of a page. These are:

Colors are specified using a sharp (#) followed by a 6-character RGB (red, green, blue) color code. The 6 characters are actually three 2-digit hexadecimal numbers in sequence, representing the amount of red, green and blue. For example, the color #0000FF is a vibrant blue color (no red, no green, full blue) and #909000 is a dingy brown-yellow (some red, some green, no blue).

As well, there are some predefined colors that you may use instead of the color codes described above. For example, rather than #000000, you can use the name "black". The RGB codes allow you to specify colors exactly, but you may find the names easier to use until you get used to the RGB system.

Change the back ground in the "main.html" to yellow by changing: <body> to <body bgcolor="#ffffc0">

Click here to display what the file should look like.

To find a colour you like, use Google (at www.google.ca) and search using the keywords "HTML" and "color". You should be able to find pages with colour codes.

7.2 <FONT> Modifiers

To change the font color for only a section of a document, you may use the color attribute of the <FONT> tag.

Colors are specified in the same way as in the <BODY> tag, either as a color name or as a 6-character color code.

Do the following change to the body of "main.html": 

Click here to display what the file should look like.

8. Tables

Tables are an extremely useful HTML construct. Tables are good for more than just putting data into a tabular format; they are also powerful layout tools. 

8.1 Table Basics

Tables are delimited by the <TABLE> and </TABLE> tags. Each row in the table is delimited by <TR> and </TR> tags, and data entries in the row are delimited by <TD> and </TD> tags.

Tables can have visible or invisible borders, specified by the border="number" attribute of the <TABLE> tag. By default, the table and cell borders will not be visible, which can be stated explicitly using border="0". The borders are made visible using a border value greater than or equal to 1, or just border. Larger values in the border tag will increase the width of the border around the table, but not the borders within the table.

As well, the distance between cells (cellspacing="number") and the distance between cell contents and the cell border (cellpadding="number") can be specified. In a table with visible borders, the cellspacing attribute will increase the border width.

8.2 Alignment within Cell

Data in cells can be aligned both horizontally and vertically, using the <TD> attributes align="alignment" and valign="valignment", respectively.

alignment can be one of:

valignment can be one of:

Now open your "courses.html" file, and add the following before your link in the body:

<body>
<table border="1">
<TR align="center"><h2><font color="black"><font size="+2"><b>
<TD> <h2><font color="black"><font size="+1"><b>Course Number</TD>
<TD> <h2><font color="black"><font size="+1"><b>Course Name</TD>
<TD> <h2><font color="black"><font size="+1"><b>Credit</TD>
<TD> <h2><font color="black"><font size="+1"><b>Year Taken</TD>
</b></font></font></h2>
</TR>
<TR>
<TD> <center>CPSC100</center>
</TD>
</TR>
</table>
.....
</body>

When you are finished, load up your file in your browser. Click here to display what the file should look like.

We now need to include the image "mypicture.jpg" in the link back to our main page. Add

<img height="60" width="45" src="mypicture.jpg" alt="mypicture" align="middle">
before the "back to personal page" text.
Click here to see what it should look like. 

 

9. Using HTML From Other Files

It is always a good way to benchmark what other people have written. To view the HTML code for a page, Right click your mouse on the page and choose View Source on the menu.  View the source of the sample main page, study the code carefully, copy the code of  the "Comments" paragraph, and paste it to your "main.html" file. 

Click here to see what your file should look like by now.  

10. End of the Lab

You now have constructed very basic web pages. To complete the lab, add more content to your pages, as follows:

Background graphics can really enhance the overall look of your page which we didn't talk during the lab. Adding a background image to your page is easy; there is a body attribute background=filename which is used to place an image into the background.

When selecting a background image, be sure to check that the text is readable.

To put aBackGround.gif in the background of your page, change the <BODY> tag  in "main.html" to <BODY background="aBackGround.gif">. Find an interesting background file on the web, and acknowledge your source.

11. Handing in (make sure you finish this part before you leave the lab)

You should publish your "main.html" and "courses.html" under your ugrad website so that everybody can see. Here is how to do it:

Create a new directory named "World" under your home directory (for example, if your login ID is a1a1, then the pathname to your new directory is a1a1/World), copy all the files under the your HTML directory to the new World directory.

By default, the files you store in your CS account are only accessible to you; they are hidden from all other users to ensure your privacy. However, to publish a web page, you need to grant everybody permission to view all your HTML and image files, as well as the directories they are located in. Only files contained within your "World" directory (note that this name is case sensitive) will be eligible for web publication. If you do not change the the access permissions of these files, users attempting to view them on the Internet will observe a 403: Forbidden message.

To change the permissions of the files you wish to publish, use the chmod command. chmod takes two arguments: the permission mode you wish to grant, and the file or directory you wish to affect. To publish files, set their permission modes to readable by using the permission mode a+r (meaning all users can read the files). To publish directories, set their permission modes to readable and executable by using the permission mode a+rx (meaning all users can read and execute--or open--the directories).

To accomplish this, log in to a Unix environment with SecureCRT (see here for help) and do the following: 

Check to see your page. It should be at, for example, "http://www.ugrad.cs.ubc.ca/~a1a1/main.html", where you should replace "a1a1" by your user account. You also need to ask the person next to you to browse your "main.html" page in his/her computer using the above link. If you have troubles to do so, ask your TA to help. 



Deliverables

Show your web page to your TA. 


Reference Links

1. The Complete Free Guide To HTML

2. Introduction to Web Design http://wdvl.internet.com/Authoring/HTML/Tutorial/

3. If you wish to work from home (since this lab is long...), look here for more information on how to set up your home computer for remote file transfer.