midwest web design

Basics

This article will teach you how to build a structurally web page, introduce you to CSS to change fonts, font families, colors. We’ll also learn to place a graphic and a background image on our web page. You’ll learn how to link to other web pages on your hard drive or another web site. You’ll be introduced to tables for laying out tabular data and then style it using CSS. Finally, you’ll learn how to "jump" visitors from the bottom of the page to the top of the page.

See Finished Page

Printable Version
Word	PDF
Download Project Files
Zip

Create your folder

On the Desktop, double click My Computer

In this window, double click on Local Disk(C :)

In this window, click on File>New>Folder

Type in your first name, press enter

Keep this window open but minimize it

Create the file

Start>Programs>Accessories>Notepad

Note: You may use Crimson Editor or another text editor of your preference.

Maximize Notepad (middle square button at top right corner)

Go to File>Save

Save Dialog box pops up

Navigate to the folder you just created (C:\YourName\)

In the file name box of Notepad’s Save Dialog box, type index.html

Note: You have to specify index.html otherwise you will get index.txt which will NOT work!

Click Save

Keep Notepad open but minimize it

Open Internet Explorer

Start>Programs>Microsoft Internet>Internet Explorer

Maximize it if it isn’t already

Go to File>Open. Browse dialog box pops up. Click Browse, and navigate to your folder and select index.html. Click ok and you will see nothing, this is normal.

Keep Internet Explorer open, but minimize it

Create your basic HTML structure

In Notepad, start index.html with the following markup:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>

<body>

</body>
</html>

Note: The blank space between the closing head, opening body & closing body tags is not necessary. Personal preference is all.

This is the basic structure required for all HTML files, without these tags (html, head, body & their corresponding end tags) your file will not work. See below illustration if the above did not clarify.

HTML Structure

Tags

When I refer to tags, that is what hypertext markup language (HTML) is comprised of, meaning <html> is the opening tag and </html> is the closing tag. The closing tag is signified by the forward slash. All HTML does is format the appearance of text, images and tables to the browser. But as you will find out, leave HTML to the structure of the page and allow Cascading Style Sheets (CSS) to do the formatting of text and tables.

DOCTYPE

A DOCTYPE is essential when dealing with Cascading Style Sheets. Without a FULL DOCTYPE (FULL URL PROVIDED), your CSS will be rendered incorrectly to all modern browsers (Internet Explorer, Opera, and Mozilla Firefox.) Plain and simple, put it in there!

Title Tag

Giving your page a title is simple. If your company name was Widgets ABC, you would use this as your title. For our purposes, we’ll stick with "My first web page"; in HTML we use the <title> tag. Full code is shown below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My first web page</title>
</head>

<body>
</body>
</html>

Simply change the text inside the opening and closing <title> tags to reflect whatever you want. When you refresh your browser, you will see this text in the upper left hand corner of the screen.

See Title

Body

In between the opening and closing body tag is where 90% of your presentation will go, i.e., headings, paragraphs, tables, unordered & ordered lists, etc.

Heading Tags

HTML supports six headings, one through six, with one being the most prominent and six being the least prominent. The mark up for the heading tag is shown below:

I picked a heading three because the general trend now is to use a heading three to help identify pages, such as an about us, contact, product pages, etc. To change it to say "Your Page", simply edit the text within the opening and closing tags. Right now, the heading three tag is at the left side of the screen where it should be. All elements in HTML start from the top left of the screen. What if I wanted the heading three tag centered within the page? Here’s where CSS comes into play, let’s talk about CSS first though.

Cascading Style Sheets

I thought long and hard about this and came to the conclusion that I should not be teaching you invalid ways to change font colors, font families, alignment, etc. The font tag (<font>) is being depreciated (no longer supported) by the W3C so we’re going to go the much better way with CSS. In this document we will change all font families, colors, etc via CSS in embedded rules.

Note: There are three ways to include CSS in your page, inline, embedded or external. Inline is just as bad as using the <font> tag, embedded is slightly better, and then external is the best, gives you the most power. For our purposes, we’ll stick with embedded. The zip file contains a file named index_external_css.html & styles.css that shows how external works.

Cascading Style Sheets demystified is a way that gives web developers more control over the presentation of the information in the browser. CSS for the most part is fully compatible in all major browsers (Internet Explorer, Opera and Firefox), so there’s no reason NOT to use it. Cascading Style Sheets syntax is not difficult, it’s understanding the relationships and how the cascade, inheritance and specificity come into play. We’ll attempt to identify some of these issues in this article. Here’s the basic start of CSS embedded within a page (from this point forward, for code brevity, you will notice I have only included the new markup in red and omitted some extraneous markup. This is for readability; you still MUST have the entire document structure present):

<title>My first web page</title>
<style type="text/css">

</style>
</head>
<body>
</body>
</html>

Notice the changes in red. To tell the browser we’re using CSS within the page itself, we use the style type tag inside the opening and closing head tags. We MUST specify type="text/css", otherwise, the browser will NOT know we’re using CSS. Also notice in between the <style> tag we’re using HTML comment tags. This is here in case the visitor’s browser does not support CSS, in which case, the style rules will be completely ignored. For starters, CSS syntax is written like this:

p{property:value;}

This is known as a CSS rule. Inside the squiggly brackets are declaration(s) which are ways to tell the browser what we wish to style. In the above, "p" is our selector, which are the elements we wish to style, followed by an opening curly brace, then a property, such examples include text-align, font-family, color, etc., then a colon, then the value, which matches up with one of the properties, such as text-align: center, then you have a semi-colon follow by a closing curly brace. See I told you, syntax is not hard!

Now, to make our name centered in the page, we do this:

<head>
<style type="text/css">
h3{
text-align:center;
}
</style>
</head>
<body>
<h3>Ryan's Page</h3>
</body>
</html>

Note: Indention of CSS property-value pairs is not necessary. I write it this way all the time for readability.

In this case, h3 is our selector. When using an HTML tag in CSS as we did above we call that redefining a tag. Its redefined because we overrode the default appearance. Save your file and preview.

See heading three and embedded styles

What about to change the font color to a dark red? We use the color property from CSS and assign a value of dark red using hexadecimal notation. Observe the following code:

<head>
<style type="text/css">
h3{
text-align:center;
color:#600;
}
</style>
</head>
<body>
<h3>Ryan's Page</h3>
</body>
</html>

Save your file and the heading three should now be a dark red. Do note that since the six digit number was six in a matching pattern I can use short hand and simply say "#600". For example, if the number is aabbcc, then you can use abc. If the number is 44BBBB you must type the full number.

See heading three color change

What if I wanted to change the font to something different (Arial for instance) and increase the font size? Observe the following:

<head>
<style type="text/css">
h3{ text-align:center;
color:#600;
font-size:1.5em;
font-family:Arial, "Courier New", serif;
}
</style>
</head>
<body>
<h3>Ryan's Page</h3>
</body>
</html>

Save your file and everything should work fine. If not, make sure all your CSS is exactly as shown above.

See heading three font family and size

Now when dealing with font sizes you may either declare them using a fixed or relative measurement. Using "em" is a relative font and will allow a visitor to resize the text in their browser if they desire. Using "px" or "pt" is a fixed font and will not let them have this ability to resize their text in Internet Explorer 6, Mozilla Firefox and Opera are fine. Generally, stick to relative values for cross browser compatibility.

Note: NEVER use points (pt) for font sizes on the web. Only use points when developing a print style sheet for your web page.

Let me explain how fonts work. When a visitor loads your page, the browser reads the above font-family rule and first looks for the Arial font on the visitor’s computer. If it does not find the font, it searches for Courier New, if this is not present; it searches for the nearest serif font available. The reason you specify at least three is because different computers come with different packaged or pre-installed fonts.

Note: Whenever you deal with a font that is made up of two words like Courier New, you MUST enclose this font family in double quotes.

Paragraphs

Arguably the most used tag in HTML is the paragraph tag. The paragraph tag is specified using <p> </p>, or observe the following code:

To save on typing, go out to http://www.otc.edu and highlight (left click the left mouse button and hold) the first block of text, then go to Edit>Copy and then inside your file left click inside the <p></p> tags, and go to Edit>Paste. The file should now look like this:

<body>
<h3>Ryan's Page</h3>
<p>Prospective students may visit our online campus tour. When you are through you may want to take a look at the many different Degree Programs that are offered. OTC also has a variety of scholarship that is available. Finally, visit our Admissions section, apply online, and learn how to get started!</p>
</body>
</html>

It would be neat if we could make some part of the above paragraph stand out from the rest, maybe a few words. Well, we can using the <span> tag. The span tag is an inline element that you can use in quite a few places. By surrounding certain text in a span tag, you can virtually make a short phrase come alive! Examples of other inline elements are images & hyperlinks. We’ll use a combination of the span tag and CSS to achieve our effect. We want to change the appearance of the phrase "may visit our" to a blue color, give it a much larger font size than the rest of the paragraph and a different font family; observe the following:

<head>
<style type="text/css">
span.special{
font-size:2em;
font-family:Arial, Helvetica, sans-serif;
color:#0000ff;
}
</style>
</head>
<body>
</body>
</html>

How span.special works

This is the first time in which we didn’t style an HTML selector, i.e., a paragraph, table, unordered or ordered list. We need to be more specific in our CSS rule. Remember CSS specificity plays a key role. First, we added a new rule to the CSS styles with this:

span.special{
font-size:2em;
font-family:Arial, Helvetica, sans-serif;
color:#0000ff;
}

Now, this type of rule is called a custom class selector. It’s given this name because we created the class ourselves. The syntax for class selectors is this:

.myclass{property:value;}

When writing class selectors you always precede the name of the class with a period, then the class name, i.e., .myclass. The class name in our case is "special", with the appropriate property-value pair applied. Then in HTML we do this:

<p>Prospective students <span class="special">may visit our</span>…

By surrounding "may visit our" phrase inside a span tag with a class of "special" when the browser reads this rule here’s the English translation:

"Look for any span tag that has a class of special and apply the following styles to it"

If for some reason this doesn’t work for you, check to make sure your class is written correctly within the CSS and you have written the equivalent in HTML to hook up the plumbing.

See span class and span tag in HTML

Note: In the above style rule, you could leave off the preceding span selector and simply use .special, but whenever you have 50+ rules, I find it helpful to specify what my intended purpose was.

Closing your tags

Short side note, make sure you close your tags in the same order as you opened them. For example, if you have multiple HTML tags present, open and close them like this:

I have opened the paragraph tag first, then the span tag, therefore, I close the span tag first and the paragraph second.

Anchor Tags

The chief power of HTML comes from its ability to link to any internal document (on your web site) or externally (another web site, like Yahoo). The anchor tag takes on the following syntax:

<a href="http://www.yahoo.com">Descriptive Text Here</a>

How anchor tags work

First start with <a href="path_to_file"> where "path_to_file" is the page or site you are linking to. In the above example we are linking externally from our site to Yahoo so we need the HTTP protocol. Enter some descriptive text to describe the link, such as "Click here to find out more", then finally, close the tag off with </a>.

It would be nice on our web page if we could link directly to the Degree Programs page on OTC’s site since we have this text in our first paragraph. Well we can surround the phrase "Degree Programs" inside an anchor tag and change the address as follows:

<p>Prospective students <span class="special">may visit our</span> online campus tour. When you are through you may want to take a look at the many different
<a href="http://www.otc.edu/degrees/index.htm">Degree Programs</a>…

Save your file and preview in your browser. Clicking the Degree Programs will send you to OTC’s site. If it does not, double check your code.

See anchor tag

Internally vs. Externally

I have been asked this question before, how do I know which path to use when linking? Good question and simple answer, which is below:

Internally (on your site): Use this: <a href="scholarships.html">Scholarships</a>

Where "scholarships.html" is a file locally on your computer.

Externally (another web site): Use this:

<a href="http://www.otc.edu/degrees/index.htm">Degree Programs</a>

The key here is the HTTP. HTTP is what makes web pages work, stands for Hyper text Transfer Protocol, when using the HTTP protocol you are always going to go to another web site.

Note: You can technically use an external path for a file locally on your machine but I feel it’s a bit silly, plus you HAVE to be online for it to work.

We will continue with this article in part 2.

top of page