FND 132

Fundamentals of Web Design

This is a five and a half week online course to enable the student to explore and master web design functions using HTML, XHTML and CSS for page markup. Course content is protected under copyright laws. Undergraduate Credits earned: 3; Total contact hours: 44
The following links demonstrate content that will be discussed in this course.

Additional Examples:

Week One

Creating a basic file using HTML is explained in this tutorial.
This tutorial explains how to markup a basic file with content and html color.
File structure is very important and is explained here.

Download the source files I worked with here.

return to top

Week Two

The second week asks you to create a basic site with two page links. CSS is a great way to style the site and it is important to learn how to do this the right way from the beginning.
Here is a tutorial on how css controls style.
This is the continuation of the tutorial.
If you want to control images and stay current with web standards watch this tutorial.

Download the source files I worked with here.

return to top

Week Three

Using the div tag to design a site is explained in these two tutorials.
Part One
Part Two
Of course we all need navigation on our site. This is a short tutorial on how to mark up the page using the list tag.

Download the source files I worked with here.

return to top

Week Four

Week Four is when we put our site all together and concentrate on the final design. Here are two tutorials that explain the overall goal of CSS and XHTML.
Part One
Part Two

Download the source files I worked with here.

return to top

Week Five

During week 5 of the course we are asked to submit the final web site project and an assignment on image linking using the referenced material in the book.
Here is a tutorial on this assignment.

return to top

A Basic Page

This code demonstrates a basic page in HTML. Notice how the tags are ordered. This process is called nesting. You must always close a tag or the page may not display properly. The code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My World Sample</title>
</head>

<body>
<p>Welcome to my world</p>
</body>
</html>

return to top

A Basic Page with Style

When we use CSS styles in a basic page, there are three ways of accomplishing this. The first is an inline style which is placed in the line of code where it will affect that particular line of text. the second is internal styles, which are placed in the head section (as demonstrated here in this file). The third is an external style sheet that is a separate file that is called into the HTML file as in some examples below. Here is the sample code:

<body>
<div align="center">Welcome to my world
</div>
</body>
</html>

return to top

CSS in Action

This CSS file defines the presentation for the HTML content:
p {color:red}
p.group {color:blue}
p#one {color:green}
p#one {color:magenta}
This is the HTML code that references the CSS coded file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<link href="styletest.css" rel="stylesheet" type="text/css" />
</head>

<body>
<p>Here is a generic p element. It will be red.</p>
<p class="group"> Here is a group class p element. there are two rules that apply, but since the p.group rule is more specific, this paragraph will be blue.</p>
<p class="group" id="one">Here is a p element with an id of one. there are four rules that could apply here. The first two are overruled by the more specific last two. The position breaks the tie between the last two: the one that appears later wins, and thus this paragraph will be magenta.
</p>
</body>
</html>

Here is the HTML and CSS code in a zipped folder. styles.zip

return to top

How CSS and XHTML work together

The next two files demonstrate how CSS and XHTML work together to define the page via the <div> tag and CSS formating. Notice the columns that are defined. If you download the accompanying zip file you can play with the code in the CSS file to see how this file defines the XHTML content.

The CSS Code:

/* CSS definition - below is the definition for the pix id */

#who {
float:left;
width: 200px;
margin-left: 20px;
padding:15px 0;
}
#camp {
margin:0 auto;
width: 200px;
padding:15px 0;
}

The HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>sample div</title>
</head>

<body>
<div align="center">
<p>About Us</p>
</div>
<div id="who">
<p>
<h3>Who are we?</h3>

We are teachers, we are learners, and we are adventurers. We want to be a part of a community of competent and caring individuals, so that is how we live. We are experienced at what we teach because we teach what we live. We want to create an experience that will not only help you grow as a person, as a member of a community, but also on that will stick with you forever. We aren’t your average camp counselors; we bring our energy and our experience to you in a way that’ll stick with you once you’re gone. Come be a part of something amazing.
</p></div>
<div id="camp">
<p> <h3>What's this camp all about?</h3>

It’s about having fun, learning new things and meeting new people. Foraging in the woods and building a community. It’s about growth and adventure. Combining real life skills with imagination. We want you to learn from a master of martial arts and to storm a counselor compound all at the same camp. We want you to learn from yourself. We teach what we know and what we live. Summer camp will never be the same.</p></div>
</body>
</html>

Here is the HTML and CSS code in a zipped folder. two_column.zip

return to top

Create a Nav Bar

Creating a nav bar for your site is not that difficult using HTML and CSS. The following are two files (the HTML file and the CSS file) that demonstrate a basic top nav bar. Feel free to use the code and manipulate it.

The HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>nav bar sample</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul id="nav">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">pics</a></li>
<li><a href="#">more</a></li>
<li><a href="#">contact</a></li>
</ul>

</body>
</html>

The CSS file:

body
{
background: #666666
}

ul#nav
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
background: #36;
float: left;
width: 100%;
}

ul#nav li
{
display: inline;
}

ul#nav a
{
display: block;
float: left;
padding:.2em 1em;
text-decoration: none;
color: #fff;
background: #36;
border-right: 1px solid #fff;
}

ul#nav a:hover
{
color: #000;
background: #69c;
}

return to top

Create a Table

Tables used to be the default in HTML page design. CSS has made a major impact on site design. Although CSS does a better job with page layout, tables still have their uses. Common uses are tabular data such as price lists. The following code produces a table. I have included a row span and col span attribute in the code to demonstrate how to span columns and rows. The code:

<body>
<table width="450" border="1">
<caption>
My Table
</caption>
<tr>
<td> </td>
<td colspan="2">This cel is my col span</td>
</tr>
<tr>
<td rowspan="2"><p>This row is<br />
my row span</p></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

return to top

Page with Image

Inserting images in your site are easy once you know the code. Here is an example using a division in order to center the iamge on the page and conform to current web standards. The code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sample image on page</title>
</head>

return to top

Fundamentals of Web Design

Related Examples For Course Content:

Additional Examples:

Week One

Week Two

Week Three

Week Four

Week Five

A Basic Page

A Basic Page with Style

CSS in Action

How CSS and XHTML work together

Create a Nav Bar

Create a Table

Page with Image