Web Page

Place Your Files in a New Folder
Place Your Files in a New Folder

Jennifer Kyrnin
The first thing you should do when creating a new Web site is to
create a separate folder to store it in. I like to store my Web
pages off a folder called HTML in my "My Documents" folder, but
you can store them where you like.
1. Open your My Documents window

2. Click File > New > Folder
3. Name the folder my_website
Important
Always name your Web folders and files using all lowercase and
without any spaces or punctuation. While Windows allows you to
use spaces, many Web hosting providers do not, and you'll save
yourself some time and trouble if you name your files and folders
well from the beginning.
Open a New Web Page
Open a New Web Page

Jennifer Kyrnin
Since a Web page is just a text file, you can use a text editor such
as Notepad to write your HTML. Make sure you're in a blank page
by choosing File > New...
Save Your Page as HTML
Save Your Page as HTML

Jennifer Kyrnin
The first thing you should do when working in Notepad is save

your page as HTML. This will save you time and trouble later.
1. Click on "File" and then "Save As"

2. Navigate to the folder you want to save in
3. Change the "Save As Type" drop-down menu to "All
Files (*.*)"
4. Name your file pets.htm
As with the directory name, always use all lowercase letters and
no spaces or special characters in your filename.
Start Your Web Page
Start Your Web Page

Jennifer Kyrnin
DOCTYPE
The first thing you should type in your HTML document is the
DOCTYPE. This tells the browsers what type of HTML to expect.
For this Web site, we're going to write it in transitional XHTML, so
use the following DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Just type that in exactly as the code sample reads. If you want to
learn more about DOCTYPE, there are several articles about
DOCTYPE on this site for more information.
HTML
Once you have the DOCTYPE, you can start your HTML with the
<html> </html> element. Type both the beginning tag and the
end tag and leave some space for your Web page contents, as in
the picture.
<html>
</html>
Create a Head for Your Web Page
Create a Head for Your Web Page

Jennifer Kyrnin
The head of an HTML document is where basic information about

your Web page is stored. Things like the page title, and possibly
meta tags for search engine optimization. To create a head
section, add the following tags inside the <html> tags in your
Web page:
<head>
</head>
As with the <html> tags, leave some space between them so

that you have room to add the head elements.
Add a Page Title
Add a Page Title

Jennifer Kyrnin
The title of your Web page is the text that displays in the
browser's window. It is also what is written in bookmarks and
favorites when someone saves your site. Store your title text
between <title> </title> tags. For this page, I titled it "McKinley,
Shasta, and Other Pets":
<title>McKinley, Shasta, and Other Pets</title>
It doesn't matter how long your title is or if it spans multiple lines

in your HTML, but shorter titles are easier to read, and some
browsers cut off longer ones in the browser window.
The Main Body of Your Web Page
The Main Body of Your Web Page

Jennifer Kyrnin
The body of your Web page is stored within the <body> </body>
element. It should come after the </head> but before the
</html> As usual, leave extra space between the starting and
ending body tags:
<body>
</body>
Dividing Your Web Page into Sections
Dividing Your Web Page into Sections

Jennifer Kyrnin
The page we are building has two distinct sections or divisions.

Before we can easily define what they should look like, it helps to
create the divisions and add some content to them. Since we're
using Style Sheets to define how the page will look, including the
layout, the divisions won't look exactly like my final page until
later.
First add the two div elements. Give them both a unique id using
the id attribute. I like to identify my divisions based on the
location or function. So a column on the right might have the id
"right". Or a navigation header division might have the id
"header". Add two div elements to your document and label them
"nav" for the navigation column and "main" for the main column.
<div id="nav">
</div>
<div id="main">
</div>
Creating an Images Folder
Creating an Images Folder

Jennifer Kyrnin
Once you have your Web page nearly ready to add content, you'll
need to get your directories set up so that you have a folder to
put your images in. If you think you'll have a lot of stylesheets or
javascripts, you might want to create separate folders for them
as well.
1. Open your My Documents window

2. Change to the my_website folder
3. Click File > New > Folder
4. Name the folder images
You should store all your images for this Web site in the images
folder so that you can find them later and it's easy to upload
them all whenever you need to.
Part 3: Adding Content to a Notepad Created Web Page
Writing the Navigation Section
Writing the Navigation Section

Jennifer Kyrnin
The navigation division will be on every page of your Web site, so

it's a good idea to make sure that you have all the separate files
you might need, such as the image I have of Shasta and
McKinley, already in your images folder. Then you can reference
those files with the relative path "images/filename.gif".
Copy the following HTML into the <div id="nav"> </div>

element:
<img src="images/header_shasta_mckinley.jpg" width="225"

height="400" alt="Shasta and McKinley" />
This will place a narrow image at the top of the navigation
section. More about the img element. To add in your navigation
links, add in:
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="shed.html">Painting a Shed</a></li>
<li><a href="house.html">Our House</a></li>
<li><a href="pets.html">McKinley and Other Pets</a></li>
</ul>
Note that I'm using an unordered list to define the different
elements. This allows me to style the list however I want. More
about the unordered list element. Finally, don't forget to add in a
copyright notice:
<p class="footer">
© 2005 <a href="http://www.kyrnin.com/">Kyrnin Design</a>
</p>
This paragraph is stored in a <p> </p> element. This is the
element you will use most often to define the different
paragraphs of your text. This paragraph I gave a special style of
"footer" so that I could make it look different from the
surrounding text. More about the paragraph element.
Note that I used the code © to display the copyright
symbol. More about special characters.
Saving the Navigation to a Template File
Saving the Navigation to a Template File

Jennifer Kyrnin
Because we're going to use the navigation over and over, it's
easier if it's stored in a separate file, so that you can just copy
and paste it into your documents when you're ready to add it.
Unfortunately, if you change the HTML for your navigation, you'll
have to go in and change it on all the pages. So it's a good idea
to make certain of your navigation early so you don't have to
change all your files numerous times.
Open a new page in Notepad and save it as nav-template.htm.
Then copy the entire division into the file:
<div id="nav"><img src="images/header_shasta_mckinley.jpg"

width="225" height="400">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="shed.html">Painting a Shed</a></li>
<li><a href="house.html">Our House</a></li>
<li><a href="pets.html">McKinley and Other Pets</a></li>
</ul>
<p class="footer">
© 2005 <a href="http://www.kyrnin.com/">Kyrnin Design</a>
</p>
</div>
Please remember that any time you change this file you'll need to
update every other page in your site. This template is just to
make it easier to copy and paste your navigation into new pages.
Adding a Section Header
Adding a Section Header

Jennifer Kyrnin
Once you've got your navigation on the page, you'll need to add
a headline, so that your readers know what's going to be on the
page. You can use any header from <h1> through <h6>, but it's
best to stick to a hierarchy. In other words, use <h1> as your
main title, then <h2> as your sub-title, and <h3> as a section
title and so on.
For this site, label your page "My Pets", and put it in the <div
id="main"> section:
<div id="main">
<h1>McKinley, Shasta, and Other Pets</h1>
Adding an Image and Paragraph to the

Main Section
Adding an Image and Paragraph to the Main Section

Jennifer Kyrnin
The main portion of this page is a series of images left aligned

with a paragraph or two of text to the right of the images. You
can do this with just a few lines of HTML, and then duplicate each
image over and over for new images on the page.
For the first image on the page, copy the following HTML into
your <div id="main"> </div> element:
<p class="topline">
<img src="images/pets1_dogs.jpg" width="250" height="188"
alt="Shasta and McKinley" class="noborder">
Shasta and McKinley do seem to like each other.
</p>
<br clear="all" />
Add more paragraphs in the same fashion. Be sure to include the

<br clear="all" /> tag after each paragraph segment, so that the
next image isn't floating to the right of the one above it. Once
you've got your paragraphs and images loaded into the page,
you'll have all the content in the page and can start making it
look pretty.
Be Sure to Save Your HTML File
But My Page Doesn't Look Right!

But My Page Doesn't Look Right!
Jennifer Kyrnin
Don't worry if your page doesn't look correct, in the next section
you'll learn how to add a CSS stylesheet to your page so that it all
looks really nice.
Part 4: Styling a Notepad Created Web Page with CSS

Create the CSS Style Sheet
Create the CSS Style Sheet

Jennifer Kyrnin
The same way we created a separate text file for the HTML, you
will create a text file for the CSS. If you need visuals for this
process please see the first tutorial. Here are the steps to create
your CSS style sheet in Notepad:
1. Choose File > New in Notepad to get an empty window

2. Save the file as CSS by clicking File < Save As...
3. Navigate to the my_website folder on your hard drive
4. Change the "Save As Type:" to "All Files"
5. Name your file "styles.css" (leave off the quotes) and
click Save
Link the CSS Style Sheet to Your HTML
Link the CSS Style Sheet to Your HTML

Jennifer Kyrnin
Once you've got a style sheet for your Web site, you'll need to
associate it to the Web page itself. To do this you use
the link tag. Place the following link tag anywhere within the
<head> tags of your pets.htm document:
<link href="styles.css" rel="stylesheet" type="text/css">
Fix the Page Margins
Fix the Page Margins

Jennifer Kyrnin
When you're writing XHTML for different browsers, one thing you
will learn is that they all seem to have different margins and rules
for how they display things. The best way to be sure that your
site looks the same in most browsers is to not allow things like
margins to default to the browser choice.
I prefer to start my pages in the upper left corner, with no extra

padding or margin surrounding the text. Even if I'm going to pad
the contents, I set the margins to zero so that I'm starting with
the same blank slate. To do this, add the following to your
styles.css document:
html,body {
margin: 0px;
padding: 0px;
border: 0px;
left: 0px;
top: 0px;
}
Changing the Font on the Page
Changing the Font on the Page

Jennifer Kyrnin
The font is often the first thing that you'll want to change on a
Web page. The default font on a Web page can be ugly, and is
actually up the Web browser itself, so if you don't define the font,
you really won't know what your page will look like.
Typically, you would change the font on paragraphs, or

sometimes on the entire document itself. For this site we'll define
the font at the header and paragraph level. Add the following to
your styles.css document:
p, li {
font: 1em Arial, Helvetica, sans-serif;
}
h1 {
font: 2em Arial, Helvetica, sans-serif;
}
h2 {
font: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
font: 1.25em Arial, Helvetica, sans-serif;
}
I started with 1em as my base size for paragraphs and list items,
and then used that to set the size for my headlines. I don't expect
to use a headline deeper than h4, but if you plan to you'll want to
style it as well.
Making Your Links More Interesting
Making Your Links More Interesting

Jennifer Kyrnin
The default colors for links are blue and purple for unvisited and
visited links respectively. While this is standard, it might not fit
the color scheme of your pages, so let's change it. In your
styles.css file, add the following:
a:link {
font-family: Arial, Helvetica, sans-serif;
color: #FF9900;
text-decoration: underline;
}
a:visited {
color: #FFCC66;
}
a:hover {
background: #FFFFCC;
font-weight: bold;
}
I set up three link styles, the a:link as the default, a:visited for
when it's been visited, I change the color, and a:hover. With
a:hover I have the link get a background color and go bold to
emphasize it's a link to be clicked.
Styling the Navigation Section
Styling the Navigation Section

Jennifer Kyrnin
Since we put the navigation (id="nav") section first in the HTML,

let's style it first. We need to indicate how wide it should be and
put a wider margin on the right side so that the main text will not
bump up against it. I also put a border around it.
Add the following CSS to your styles.css document:
#nav {
width: 225px;
margin-right: 15px;
border: medium solid #000000;
}
#nav li {
list-style: none;
}
.footer {
font-size: .75em;
clear: both;
width: 100%;
text-align: center;
}
The list-style property sets up the list inside the navigation

section to have no bullets or numbers, and the .footer styles the
copyright section to be smaller and centered within the section.
Positioning the Main Section
Positioning the Main Section

Jennifer Kyrnin
By positioning your main section with absolute positioning you

can be sure that it will stay exactly where you want it to stay on
your Web page. I made mine 800px wide to accomodate larger
monitors, but if you have a smaller monitor, you might want to
make that narrower.
Place the following in your styles.css document:
#main {
width: 800px;
top: 0px;
position: absolute;
left: 250px;
}
Styling Your Paragraphs
Styling Your Paragraphs

Jennifer Kyrnin
Since I've already set the paragraph font above, I wanted to give
each paragraph a little extra "kick" to make it stand out better. I
did this by putting a border on the top that highlighted the
paragraph more than just the image alone.
.topline {
border-top: thick solid #FFCC00;
}
I decided to do it as a class called "topline" rather than just

defining all paragraphs in that way. This way, if I decide I want to
have a paragraph without a top yellow line, I can simply leave off
the class="topline" in the paragraph tag and it won't have the top
border.
Styling the Images
Styling the Images

Jennifer Kyrnin
Images typically have a border around them, this isn't always

visible unless the image is a link, but I like to have a class within
my CSS stylesheet that turns off the border automatically. For
this stylesheet, I created the "noborder" class, and most of the
images in the document are part of this class.
The other special part of these images is their location on the

page. I wanted them to be a part of the paragraph they were in
without using tables to align them. The simplest way to do this is
to use the float CSS property.
#main img {
float: left;
margin-right: 5px;
margin-bottom: 15px;
}
.noborder {
border: 0px none;
}
As you can see, there are also margin properties set on the
images, to make sure that they aren't smashed up against the
floated text that is beside them in the paragraphs.
Now Look at Your Completed Page
Now Look at Your Completed Page

Jennifer Kyrnin
Once you've saved your CSS you can reload the pets.htm page in
your Web browser. Your page should look similar to the one
shown in this picture, with images aligned and the navigation
placed correctly on the left side of the page.
Follow these same steps for all of your internal pages for this site.
You want to have one page for every page in your navigation.
The first thing you should be aware is that this site is not built
using these techniques. The Web Design site on About (and all
About sites) is built using tables, and until browsers that support
CSS Positioning are more widely used, will be for the foreseeable
future.
Browser Support
CSS Positioning (CSS-P) is the only way to create standards based

Web pages using XHTML. Why? Because XHTML requires that
tables only be used to define tabular data, and not be used for
layout. The problem is, until recently, most browsers only had
sketchy support of CSS-P. But now, the following browsers and
versions, have minimal to good support of CSS-P, among others:
• Microsoft Internet Explorer 6

• Microsoft Internet Explorer 5
• Netscape Navigator 7
• Netscape Navigator 6
• Opera 6
• Opera 5
• Mozilla 1
• Konqueror 3
• Konqueror 2
Rethinking How You Build a Page
When you build a site using tables, you have to think in a

"tabular" format. In other words, you're thinking in terms of cells
and rows and columns. And your Web pages will reflect that.
When you move to a CSS-P design, you'll start thinking of your
pages in terms of the content.
For example, the page for this article can be considered to have
five content parts:
1. the header
This is where my photo is, the top banner ad, and basic
navigation.
2. the left navigation
This is the left side of the page, with the subjects and
essentials.
3. the right navigation
This is where the tower ads and other information is.
4. the content
The text of this article.
5. the footer
The bottom navigation, copyright information, lower banner
ad, and so on.
Rather than putting those elements in a table, I can use the

<div></div> tag to define the different portions of the content,
and then use CSS-P to place the content elements on the page.
For the sake of this article, I'm going to pretend there are just
three columns on the page, and ignore the header and footer.
Identifying Your Sections
Once you've defined the different content areas of your site, you
need to write them in your HTML. While you can, generally, place
your sections in any order, it's a good idea to place first items
you'd like less advanced browsers to see first.
For my three column layout, I'm going to have three sections:

1. leftnavigation
2. rightnavigation
3. content
These will be defined using div tags with the id attribute.

Remember, when you use the id attribute, you need to have a
unique name for each id.
1. <div id="leftnavigation"></div>
2. <div id="rightnavigation"></div>
3. <div id="content"></div>
Positioning
This is the fun part. Using CSS you can define the position for
your id'ed divs. Store your position information in a style call like
this:
#content {
Content within a div tag will take up as much space as it can,

namely 100% of the width of the current location, or the page.
So, to affect the location of a section without forcing it to a fixed
width, you can change the padding or the margin elements.
For this layout, I set the two navigation columns to fixed widths
and then set their position absolute, so that they wouldn't be
impacted by where they are found in the HTML.
#leftnavigation {
position : absolute;
left : 0;
width : 150px;
margin-left : 10px;
margin-top : 20px;
color : #000000;
padding : 3px;
}
#rightnavigation {
position : absolute;
left : 80%;
top : 20px;
width : 140px;
padding-left : 10px;
z-index : 3;
color : #000000;
padding : 3px;
}
Then for the content row, I set the margins to be somewhat

relative to the outer columns.
#content {
top : 0px;
margin : 0px 25% 0 165px;
padding : 3px;
color : #000000;
}
While the page won't look wonderful in non-CSS-P browsers, as

you can see, it is possible to define how your page will look
without any table tags. See the HTML. See the CSS.
In a previous article, I discussed how to use CSS positioning to

create a tableless layout. Using CSS in this way will ensure that
your XHTML is valid - as it is incorrect to use tables for anything
other than displaying tabular data. But there is a way to play with
positioning and a CSS2 property called "overflow" to make your
pages resemble frames, not just tables.
What is it About Frames?

If we're setting out to emulate frames, we need to determine
what we want to emulate:
• page is divided into sections

• some sections scroll and some don't
It's easy to create a page that is divided into sections. We learned
how to do that in that previous article. But to make that page we
created look like a framed Web page, we need to add
scrolling. Here's my sample "fake framed" page. (Note: this page
was optimized for Mozilla 1 on Windows.) As you can see, I also
added borders to make it look more like a framed page that
hasn't had the borders turned off.
CSS overflow Property

The overflow property is the way I can get the page to scroll. This
property has five different styles:
• visible
This is the default, and it indicates that the content should be
displayed on the page as the browser normally would.
• hidden
This style indicates that any extra content that doesn't fit in
the box should remain hidden.
• scroll
With the overflow set to scroll will add scrollbars (both vertical
and horizontal) to the box property.
• inherit
The inherit style sets the overflow to be inherently the same
as the parent element.
• auto
This is the style we want. It specifies that if the content will
overflow the box, scrollbars should display, otherwise, they are
left off.
I put the overflow : auto; on both the left navigation element

(#leftnavigation) and the main content area (#content). That
ensures that if the browser window is really small, both the
navigation and the content will be scrollable.
As with the other page, this page might not look as nice in
browsers that don't support CSS positioning. See the HTML. See
the CSS. See it in Action.

Web Page

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Page

Uploaded by

Copyright:

Available Formats

Place Your Files in a New Folder

Place Your Files in a New Folder

1. Open your My Documents window

Open a New Web Page

Save Your Page as HTML

The first thing you should do when working in Notepad is save

1. Click on "File" and then "Save As"

Start Your Web Page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Create a Head for Your Web Page

The head of an HTML document is where basic information about

As with the <html> tags, leave some space between them so

Add a Page Title

<title>McKinley, Shasta, and Other Pets</title>

It doesn't matter how long your title is or if it spans multiple lines

The Main Body of Your Web Page

Dividing Your Web Page into Sections

The page we are building has two distinct sections or divisions.

Creating an Images Folder

Creating an Images Folder

1. Open your My Documents window

Part 3: Adding Content to a Notepad Created Web Page

Writing the Navigation Section

Writing the Navigation Section

The navigation division will be on every page of your Web site, so

Copy the following HTML into the <div id="nav"> </div>

<img src="images/header_shasta_mckinley.jpg" width="225"

Saving the Navigation to a Template File

<div id="nav"><img src="images/header_shasta_mckinley.jpg"

Adding a Section Header

Adding a Section Header

Adding an Image and Paragraph to the

Adding an Image and Paragraph to the Main Section

The main portion of this page is a series of images left aligned

Add more paragraphs in the same fashion. Be sure to include the

Be Sure to Save Your HTML File

But My Page Doesn't Look Right!

Part 4: Styling a Notepad Created Web Page with CSS

Create the CSS Style Sheet

1. Choose File > New in Notepad to get an empty window

Link the CSS Style Sheet to Your HTML

Fix the Page Margins

I prefer to start my pages in the upper left corner, with no extra

Changing the Font on the Page

Typically, you would change the font on paragraphs, or

Making Your Links More Interesting

Making Your Links More Interesting

Styling the Navigation Section

Styling the Navigation Section

Since we put the navigation (id="nav") section first in the HTML,

Add the following CSS to your styles.css document:

The list-style property sets up the list inside the navigation

Positioning the Main Section

Positioning the Main Section

By positioning your main section with absolute positioning you

Place the following in your styles.css document:

Styling Your Paragraphs

Styling Your Paragraphs

Place the following in your styles.css document:

I decided to do it as a class called "topline" rather than just

Styling the Images

Images typically have a border around them, this isn't always

The other special part of these images is their location on the