Building Web Pages with HTML and CSS

This tutorial presents an introduction to building web pages using HTML 4 and CSS. It is not
meant to be a complete guide or reference, but rather it serves as a basic introduction to
creating web pages. The Biomedical Informatics Technical Support team (BITS) put this tutorial
together to assist new students.

A Very Brief History of the World Wide Web and HTML

We will not spend too much time going over the history of the Internet or the World Wide Web,
however, it may be useful to trace a quick history and describe the original intent behind this
Internet service. The history of the World Wide Web or the Web begins with the work of Tim
Berners-Lee. The Web grew out of work that Berners-Lee was doing while at CERN during the
1980s. One of his early achievements was the creation of a notebook program ENQUIRE,
which allowed for links between arbitrary nodes. Building upon this work, in March of 1989,
Berners-Lee submitted the original proposal for an Information Management system. The goal
was to build a linked information system to preserve and easily retreive information.

To make this new system work, Berners-Lee proposed that this new system would make
extensive use of Hypertext to link information across a web of information. The original
proposal noted the importance of working within heterogeneous environments, emphasizing
shared information by users of various systems using different browsers. In his conclusion to
the original proposal, Berners-Lee noted “We should work toward a universal linked information
system, in which generality and portability are more important than fancy graphics techniques
and complex extra facilities.”

In a short period of time, the Web as an information and commerce tool has exploded to what
one author describes as the Gutenberg press of our time.

HTML: The Language of the Web

HTML is the language that allows the web to work. HTML works because it does exactly what
Berners-Lee argued for. It is platform independent and will work on any system that can read a
text file. The support for links via the use of hypertext means that you can connect a visitor to
any web page or other supported information on the Internet.

Not all is perfect however. Heterogeneous environments mean that platforms are still unique,
not everything will display in the same way on every system. Some of this is by design; your
computer monitor can display much more detail than the small screen of a PDA or cell phone.
Some of this is due to the choices made by various vendors looking to control how the World
Wide Web works.

Dealing with these imperfections over the past few years has been quite difficult. Complex
pages usually have to be tested on many browsers to ensure proper compatibility. Standards
exist, but vendor support is sometimes sketchy at best, particularly if you are stuck with an older
browser. The choices you make in your design can minimize headaches by allowing older
browsers to handle new features gracefully. The key is to balance the cutting edge technology
with enough sound design choices to produce a page that is more than a simple set of
compromises.
The goal of this tutorial is to help you design a transitional web page. A transitional page will
make use of enough standards to make development simple across multiple web pages on your
site, while taking into consideration the existence older browsers that do not properly support
the latest standards.

We will focus on using HTML 4 over XHTML and using Cascading Style Sheets to handle
certain aspects of design, aspects that stop short of page layouts. We encourage you to use
styles for layouts; it is a better choice in the long run. However, our goal here, in keeping with
the original intent of the Web, is to link information and allow users to access that information.

Tutorial Part 1: Site Design and Page Layout

Lets start by not building a Hello World page. Rather, lets get right into designing your personal
DBMI web site. Before we start writing any HTML, we will step back for a moment and sketch
out our site on paper.

The site design is very simple, four pages that link to each other and depending on the content
may link to various sites in the department or around the world. We are not spending much
time on the details of proper site design that is for another course. But is important to keep such
things in mind, if simply to help organize your thoughts.

The next step is to conceptualize some type of page layout design. The goal here is to provide
a consistent interface between the end-user and the information contained on your website. For
the tutorial, the page layout will be a very simple design with a menu on the left side and the
content on the right.

Menu Content

The menu page will be repeated throughout the four pages providing navigation to all pages in
your site.

2
Tutorial Part 2: Your Home Page

With your site design and the page layout complete, we can turn to authoring your home page.
The home page will be the anchor for the rest of the site and will be the default page when
someone visits your site. In addition, since you will use the same layout throughout your
website, creating the three other pages will simply involve copying the home page and updating
the content accordingly.

When creating a web page, you can use various tools to aid in authoring your page. Tools can
be as simple as a basic text editor (notepad.exe, emacs, vi, text-edit) or as complex as a full-
feature html editor (HomeSite, Dreamweaver, Front Page). The key requirement is that the
editor must save the files in a text format.

Note:
Microsoft Word has the ability to save files in HTML format. However, there are some problems
with using Word to author your web pages. One, any HTML markup that you put into your
document will be converted to plain text using special symbols, as a result, the formatting won’t
be rendered as you want. Second, when saving as HTML in Word, an incredible amount of
really bad code is put into your page. A simple page will converted in to a large amount of extra
text that will be extremely difficult to edit.

Creating your Home Page

In an editor of your choice, we want to create a new page, the file name for this page will be
“index.html”. In your text editor, enter the following information without the line numbers:

1: <!DOCTYPE HTML PUBLIC “-//W3W//DTD HTML 4.01

Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
2: <html>
3: <head>
4: <title>My Home Page</title>
5: </head>
6: <body>
7: <table>
8: <tr>
9: <!--Begin Main Menu Section-->
10: <td valign=”top”>
11: <p>Menu</p>
12: About<br>
13: My Vitae<br>
14: Hobbies<br>
15: </td>
16: <!--End Main Menu Section-->
17:
18: <td>&nbsp;&nbsp;</td>
19:
20: <!--Begin Content Section-->
21: <td valign=”top”>
22: <p>My Home Page</p>

3
 23: Put content here...
24: </td>
25: <!--End Content Section-->
26: </tr>
27: </table>
28: </body>
29: </html>

The resulting page is not that spectacular, but this serves as the foundation for our site.

In the next section we will introduce Cascading Style Sheets to add a style treatments to our
page. For now, we will look a little closer at some of the tags.

Line 1: The DOCTYPE tag lets the browser know what to expect and instructs validators on the
rules to judge your code. HTML is fairly loose in requiring the DOCTYPE tag. It is a
good habit to get into using (if you use an HTML editor, most include the tag
automatically), particularly if you want to move to using XHTML.
Line 2: All web pages will begin and end with the opening and closing <html></html> tags.
Line 3: Directly after the <html> tag is the <head> tag. The <head> is also closed by the
</head> tag.
Line 4: The <title></title> tag sets the page title.
Line 6: The <body> indicates the start of the body of your page. This is where your content
will be located. The <body> tag is closed later in the page with the </body> tag.
Line 7: Here begins a <table>, we are using the table for layout purposes. Though this is no
longer considered best practices, Style Sheets do a better job of layout and will result in
pages that load and render faster. However, Style Sheet layouts are not supported in
all browsers. For full compatibility, we will stick with using tables for now.

Some tags that are associated with tables include:

• <tr>: table row
• <td>: table cell
• <th>: table header cells
• <tbody>: identifies the body of the table
Line 9: Comments tags start with <!-- and end with -->. Comments can extend over a
number of lines.

4
Line 10: The <td valign=”top”> tag is the first example of the use of an attribute/value pair
to modify the behavior of the tag.

Other tags:
Tag Description
<p></p> Start and end a paragraph
<br> Line break
&nbsp; Space

Tip:
1: HTML is fairly loose with respect to the case of your tags. In this tutorial, we use lower case
for all text and quote all the tag attributes.
2: Though the use of tables for layout purposes has been replaced by the use of Style Sheets,
not all browsers support this feature. However, you can anticipate this and design your
pages to gracefully handle such instances.
3: With tags that provide attribute/value support, double-quote the values. Though HTML is
fairly flexible with quoting values, it is a good habit to get into and fewer problems will arise
when you decide to switch over to XHTML.

Tutorial Part 3: Cascading Style Sheets

With the basic structure of your page in place, it is time to format your document and improve
the overall look of your page. To accomplish this we will use a separate Cascading Style Sheet
that contains format information. You can apply styles in-line, however by doing so, the
formatting is localized to the page. Using a separate sheet allows you to link to the formatting
information from a number of pages.

To create a CSS for this tutorial project, you will need to use a text or web editor to create a the
appropriate file. As with HTML pages, the same rules apply, the file must be saved as a plain
vanilla text file.

In your style sheet, you will add various style rules that are made up of two parts, the selector
and the declaration. The selector determines with element or tag will be affected and the
declaration specifies what should be done. We will use the following rules:

1: body {background-color:#ffffff; font-family:Verdana,Arial,sans-

serif}
2: p {font-size: 10pt; font-family:Verdana,Arial,Helvetica,sans-serif}
3: tr {font-size: 10pt; font-family:Verdana,Arial,Helvetica,sans-serif}
4: td {font-size: 09pt; font-family:Verdana,Arial,Helvetica,sans-serif}
5: th {font-size: 09pt; font-family:Verdana,Arial,Helvetica,sans-serif}

The first five lines of our page, provides format rules for some major tags.
Line 1: This rule will apply to the <body> tag and declares the background color and the
default font.
Line 2: This rule specifies how the <p> tag should be rendered.

5
We can add more rules to our style sheet. The rules can apply to the element or tag, or can be
customized and applied to other elements. Some additional rules we will add to our style sheet

a:link {color:#15546C; background-color:transparent}

a:visited {color:#15546C; background-color:transparent}
a:active {color:#15546C; background-color:transparent}
a:hover {color:#900B09; background-color:transparent}

/*++++++++++++++++++++*/
/* Menu Face Type */
/*++++++++++++++++++++*/
.m08 { font-size: 8pt; color: #336699; font-weight: bold}
.m09 { font-size: 9pt; color: #336699; font-weight: bold}
.m10 { font-size: 10pt; color: #336699; font-weight: bold}
.m11 { font-size: 11pt; color: #336699; font-weight: bold}
.m12 { font-size: 12pt; color: #336699; font-weight: bold}

Save the file as “tutorial.css” and then open the default home page “index.html” and we will
update our page to use the style sheet.

We want to link our default page to our newly created style sheet. You will use the <link...
tag to import this page. Enter a break after the closing </title> tag on line 4 and paste in the
following tag.

<link rel="STYLE SHEET" type="text/css" href="tutorial.css">

Note the href attribute, the style sheet should be located in the same directory as your default
page.

Now we will add a little formatting to our Menu title. On line 12, change the element to look like
the following:

<p class=m11>Menu</p>

The tag as modified will change look of the word Menu on the page. Repeat this for the “My
Home Page” down below

<p class=m11>My Home Page</p>

Now reload the page, you should get something that looks like the following:

6
The benefit of using the style sheet is how it allows you to change the formatting of a page or
set of pages without having to edit the actual page. By editing the style sheet, you can change
the pages default font, the title font with very little effort.

Tutorial Part 4: Putting Things Together

We have created our initial web page, added in some styles to make things look nice. Now we
want to begin to create the rest of our pages and complete our site. Before we start creating
copies of our first page, we want to make our menu active with links to our other pages. Realize
this may seem like we are putting the cart before the horse, but there is a method to our
madness.

Open up your default home page in your text editor and scroll down to the menu section. We
will update our default menu by wrapping our menu entries with link or anchor tags. Edit the
Menu entries by wrapping each of them with anchor tags. The finished HTML should match the
following:

<a href=”index.html”>Home</a><br>
<a href=”about.html”>About</a><br>
<a href=”vitae.html”>My Vitae</a><br>
<a href=”hobbies.html”>Hobbies</a><br>

In this case, our anchor tags use relative URLs, normally these are links are local to your
directory. Use absolute URLs link to pages on different sites. Notice, we have also added a link
that will return us back to your home page. Reload the web page and you will note the menu is
now enabled. Clicking the three links below “Home” will return an “Page Not Found” error, we
will fix this next.

To create the remaining three pages, since the layout will be the same across our pages, we
can do this by simply copying our “index.html” and naming them according to our menu
entries.

Once we copy our pages, the next step is to edit the content in each pages and if you desire,
change the <title> text.

7
Tips:
1) The methodology works described above works best for small sites. In this case we are
only managing four pages. Each time we add an entry to our menu, we would have to
edit every page in our site to add the new Menu entry. To improve on our efficiency and
make things easier to manage, we can create a separate page with only the menu
information. To move to this design methodology, requires that we use some feature
beyond simple HTML (e.g. JavaScript, Server Side Includes, CGI, PHP, JSP) to include
that menu file.
2) If you want to use have a link connected to an image tag, simply wrap the anchor
around the image tag (discussed below).

Tutorial Part 5: Adding Images

The final piece of our tutorial covers the method of adding an image to one of your pages.
Creating and manipulating images is beyond the scope of this tutorial, we will only focus on
using the <img></img> tag to place images on your page.

Using the index.html page, we will begin to edit the content section. Edit the line “Put
content here...”, change it to the following:

Put content here...<br>

<img src="pmac.jpg" alt="Some Text" width="250" height="105"
border="0">

Examining the <img> tag, we note the following attributes:

Attribute Description
src The URL to the image. The URL can be absolute or
relative.
alt Alternate text allows for information to be included in
the event that your image does not load or if the page is
accessed via a PDA/mobile phone or to support
browsers for the blind.
width Sets the dimension of the image
height Sets the dimension of the image

Reload the page and you should see the following

8
The End and Some Useful Resources

This finishes this tutorial. Clearly we have only covered the very rudiments of creating your web
site and designing your web page. There are a number of books available to help you expand
on this very basic knowledge.

HTML for the World Wide Web, Elizabeth Castro

A great introduction to HTML, XHTML, CSS. This is the book you should by to help you
with learning building Web Pages

Eric Meyer on CSS: Mastering the Language of Web Design. A great resource on using
Cascading Style Sheets.

Cascading Style Sheets: The Definitive Guide, 2nd Edition, Eric Meyer. Another resource from
Eric. Great resource after you have played a bit with CSS.

Dynamic HTML: The Definitive Guide, 2nd Edition, Danny Goodman. A great resource covering
both static and dynamic html.