Web Design Tutorial - Lesson 2, Part 1

Lesson 2, Part 1

Setting a Goal

Before we can begin writing a web site, we have to have a goal in mind. What is the purpose of our web page? Who will be viewing it? What kind of information will we need to display, and how will we need to display it?

Let’s Do Some Role-playing

A Biology professor has contacted you because she is in need of a web page for a course she is teaching. She has heard that you have experience in building websites, and wants to employ your services. You meet with her in her office and discuss what she wants so far:

A heading banner at the top of the page, and the same text in the browser’s title bar
An introductory paragraph under the heading
A list of the teacher’s contact information

You tell her you’ll get to work on it right away, shake hands, and leave.

We’ve Got a Client, Let’s Get to Work!

First off let’s create a folder for our project. This will allow us to keep our files organized. Create a New Folder called “biosite” either on your desktop or in your C: drive, or in whatever directory you want this project to be located.

Next, open your editor of choice (Notepad, Notepad++, Dreamweaver, etc.) and start a blank document. Just as in Lesson 1, Part 5, we will begin our document with the html tag, open the document header, insert a title, close the header, and open the body. Our title text should be “BIO101 – Introduction to Biology”. Try that out yourself. Don’t worry. If you’re not sure you got it right, the code is available in the next section.

Once you’re done with that, you should be inside an open body tag. Now let’s begin our content.

Making a Statement

We’ll begin the content by adding a heading element to the document. Element is the term used for an opening tag, the text included after that tag, and the opening tag’s corresponding closing tag.

Element is the term used for an opening tag, the text included after that tag, and the opening tag’s corresponding closing tag.

In XHTML, heading tags are one of the options available for emphasizing text. They make the text bold, and change its size. The tag for a heading is <h#>, where # is a number from 1 to 6, inclusive. The lower the number, the bigger the heading. So an <h1> tag’s text will be much bigger than an <h6> tag’s. You can click here to view what different heading tags look like, and what a paragraph looks like in comparison.

So, as per the professor’s request, let’s slap a big fat heading on the top of that page. After inserting the heading, your code should look like this:

<html>
<head>
	<title>BIO101 - Introduction to Biology</title>
</head>
<body>
	<h1>BIO101 - Introduction to Biology</h1>

Next we’ll throw in the introductory paragraph that the professor requested. Go to a new line, and then copy in the following text, and throw a <p> tag in front of it, and a </p> tag at the end of it:

Welcome to the course page for your BIO101 class. My name is Professor Anna Tommy. Here you will find all the information you need regarding your semester in this class. Below you will find my contact information.

Alright, two down, one to go! Next we have to insert a list of the professor’s contact info. Before we do that, though, we should let viewers know that what’s coming up is contact information. Throw in a level 2 heading (<h2>) saying “Professor’s Information:”. Now, to the lists. There are three different HTML lists: <ol>, <ul>, and <dl>.

Ordered Lists: The <ol> tag is for ordered lists. These are lists with numbers in front of each item. The list begins with an <ol> tag and terminates with a </ol> tag. Each item in the list begins with an <li> tag and ends in a </li> tag.
Unordered Lists: The <ul> tag is for unordered lists. These are lists with bullets in front of each item. The list begins with a <ul> tag and terminates with a </ul> tag. Also like in an ordered list, each item in the list begins with an <li> tag and ends in a </li> tag.
Definition Lists: The <dl> tag is for definition lists. These lists contain items with definitions. The list begins with a <dl> tag and terminates with a </dl> tag. Since this list contains terms and their definitions, there must be a way to separate a term from its definition. Each term is surrounded by a <dt> tag and its respective closing tag. Each definition comes right after the corresponding term’s closing tag, and begins with a <dd> tag and ends with a </dd> tag.

The list above is a definition list. If you want to see how it works, just click here.

For the professor’s contact info, it makes most sense to use an unordered list, since we are not listing items in order of precedence, nor are we defining terms. Insert the professor’s information as follows:

<ul>
	<li>Office: Biological Sciences Building, Room 213</li>
	<li>Office Hours:</li>
	<li>Monday: 1:00PM - 3:00PM</li>
	<li>Wednesday: 2:30PM - 4:45PM<li>
	<li>Office Extension: 0213</li>
	<li>E-mail: atommy@afakeuniv.edu</li>
</ul>

The code above produces a list that looks like this:

Office: Biological Sciences Building, Room 213
Office Hours:
Monday: 1:00PM - 3:00PM
Wednesday: 2:30PM - 4:45PM
Office Extension: 0213
E-mail: atommy@afakeuniv.edu

That’s all well and good, but doesn’t it look a little silly having the Monday and Wednesday office hours lined up with the rest of the list? It seems that they should be more like sub-items, indented further so that it is obvious that they belong to the “Office Hours” item. We can accomplish this by “nesting” our lists.

Nesting

Generally in programming, the term “nesting” refers to placing one element inside of another instance of the same element. And that’s exactly what we’re going to do. Go to the end of the line with the “Office Hours:” item on it, and remove the closing </li> tag. Skip to the next line, and type in <ul> to open an unordered list within the currently open list item. Now the list items below this <ul> tag will all be indented further, as they will belong to the second list. Since we only want this for the “Monday…” and “Wednesday…” items, we’ll have to close this list within the “Office Hours:” list item. Go to the end of the “Wednesday…” line, and hit ENTER. On the new line, type in </ul>. Now the nested list is closed. However, we are still inside the “Office Hours:” list item. Remember how we deleted the </li> off the end of that line before? We must now insert that closing tag here instead, right after the </ul>, but before the next <li>. Your code should now look like this:

<ul>
	<li>Office: Biological Sciences Building, Room 213</li>
	<li>Office Hours:
	<ul>
		<li>Monday: 1:00PM - 3:00PM</li>
		<li>Wednesday: 2:30PM – 4:45PM<li>
	</ul></li>
	<li>Office Extension: 0213</li>
	<li>E-mail: atommy@afakeuniv.edu</li>
</ul>

Notice how I also indented the nested list’s items, so that it would be easier for the eye to see that the Monday and Wednesday items belong to a nested list. Our list now looks like so:

Office: Biological Sciences Building, Room 213
Office Hours:
- Monday: 1:00PM - 3:00PM
- Wednesday: 2:30PM – 4:45PM
Office Extension: 0213
E-mail: atommy@afakeuniv.edu

Much better, don’t you think?

Step 1 Complete!

We’ve accomplished the 3 tasks requested by the professor. We’ve created a page with a title, a heading banner, an introductory paragraph, and a list (well, technically two lists) of contact information. Good job! Let’s close up this page for now by adding our closing body and html tags. I hope you didn’t forget about them!

Save the page as “index.html” to your “biosite” directory. By default, web browsers display an “index.*” page first when told to go to a web directory. So when your browser loads “http://www.google.com”, it’s actually loading “http://www.google.com/index.html”. When you go to “http://blog.zivkarmi.com”, you are actually loading “http://blog.zivkarmi.com/index.php” (.php is a file extension for PHP files). Now go to your biosite directory and double-click your html file. It should open in your default browser, and your page should look like this. Your source code should look like this:

<html>
<head>
        <title>BIO101 - Introduction to Biology</title>
</head>
<body>
        <h1>BIO101 - Introduction to Biology</h1>
        <p>Welcome to the course page for your BIO101 class.
        My name is Professor Anna Tommy. Here you will find all the information you need regarding your
        semester in this class. Below you will find my contact information.</p>

        <h2>Professor's Information:</h2>
        <ul>
                <li>Office: Biological Sciences Building, Room 213</li>
                <li>Office Hours:
                        <ul>
                                <li>Monday: 1:00PM - 3:00PM</li>
                                <li>Wednesday: 2:30PM - 4:45PM</li>
                        </ul>
                </li>
                <li>Office Extension: 0213</li>
                <li>E-mail: atommy@afakeuniv.edu</li>
        </ul>
</body>
</html>

And that’s it. Professor Tommy is happy to hear you’re done already, because she’s got some updates for you to make. It looks like you’re going to need to use tables, and she’s heard that implementing navigation using hyperlinks is a good idea too…

Enjoyed the lesson? Keep your eyes open for Lesson 2, Part 2.
Subscribe to my RSS feed to get updates in your favorite RSS reader, or subscribe by E-mail!

<< Go back to Lesson 1, Part 5 Table of Contents Continue on to Lesson 2, Part 2 >>

Filed under: (X)HTML, Tutorials, Web Design by Ziv

S	M	T	W	T	F	S

				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

XHTML, CSS, JavaScript, PHP, MySQL at
blog.zivkarmi.com