Getting Started : HTML Tutorial - Web 237 Individual Assignment Week 2

Getting Started…
HTML Tutorial – Web 237

Individual Assignment
Week 2
Overview
1. Choose a text editor

2. Review plan for site (from Week 1)
3. Review picture of site layout (from Week 1)
4. Start html page with basic outline of code from
lecture 1
5. Add html code to complete site layout from design
6. Save page as index.htm or index.html
7. FTP page to web server and post a copy to your
individual folder.
Step 1 – Choose a text editor
• Do not use “What You See is What You Get”

(WYSIWYG) tools
• You should be typing in code directly – not using
tools that create the code for you
• Samples in this tutorial will be created with
notepad – a text editor that is free with Windows
• You can use any text editor you wish – as long as
you are creating the code by keying it in
Step 2 – Review Plan for Site
• There should be consistency between the plan you

created and the site you develop
• You are free to change your plan if you wish to go
with a different topic for your site
• In week 2 focus on developing a good working
template for your site pages (not the cool bells and
whistles in your feature list)
Step 3 – Review Site Layout
• Keep the design simple. A simple design will help you to:
– Complete the assignment
– Avoid becoming overwhelmed
– Work with the code if & when errors arise
• If your design from last week is too complex to code, feel
free to simplify it
• Keep in mind that this is just a beginning layout that can
be changed later
• Make sure your site layout includes navigation to the
other pages of the site (usually found across the top or
along the left side of the page)
Step 3 – Design a Site Layout
Layout for my sample site:

I know the site is very
Banner for Site simple.
Home Week 2 Week 3 Week 4 Week 5

It is simple because I want to
master walking before I learn
to run.
I can always start with a

simple site and make it more
complex as I learn new
features.
It is much more difficult to

start with a complex site and
make it simpler if I get lost or
Copyright Info
confused along the way.
Step 4 – Start HTML Page
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">

• Begin with the text
<html xmlns="http://www.w3.org/1999/xhtml" editor you selected
xml:lang="en" lang="en">
 and add the basic
<head>

<title>This is the page title</title>
lecture 1

• Make sure you are
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1"/>
using a text editor and
 not a word processor
</head>
 • The lines starting with
<body>

 which are ignored by
</body>

the browser
</html>
Step 4 – Start HTML Page
DocType statement tells the
<!DOCTYPE html browser what version of html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" you are using
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">

<head>
 Head section is used to
<title>This is the page title</title> set up certain features of
the page – such as the

<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1"/> Beginning and ending
 html tags indicate
</head> where html code
 begins and ends
<body>
Everything that
 included between the
 beginning and ending
</body> body tags

</html>
Step 5 – Add HTML code
Complete site layout from design
• With the basic HTML structure in place it is time to

add the html that will define the site design
• The basic HTML structure adds no content to the
page since there is nothing (except a comment)
between the body tags
• All content to be displayed will be added between
the beginning and ending body tags
Step 5 – Complete Site Layout
Code for my sample site:

I am going to code this site
Banner for Site as a table with 4 rows.
Home Week 2 Week 3 Week 4 Week 5

The first row has 1 column
and houses the banner.
The second row has 5

columns and houses the
navigation bar.
The third row has 1 column

and will display the content.
The fourth row has 1 column

and will display the
Copyright Info
copyright information.
<body>
Code for my sample site 

<table style="width:100%">

(goes between body tags) <tr>
<td colspan="5"
style="background-color:lightblue;
text-align:center">
Banner for Site
Banner for Site </td>
</tr>

<tr>
Home Week 2 Week 3 Week 4 Week 5 <td style="text-align:center">Home</td>
<td style="text-align:center">Week 2</td>
</tr>

<tr>
<td colspan="5"> </td>
</tr>

<tr>
<td colspan="5"
style="background-color:lightblue;
text-align:center">
Copyright Info
</td>
Copyright Info </tr>
</table>
</body>
Code looks like this on sample site (in notepad):
<!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" xml:lang="en" lang="en">
<head>
<title>This is the page title</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
</head>
<body>
<table style="width:100%">
<tr>
<td colspan="5" style="background-color:lightblue;text-align:center">Banner for Site</td>
</tr>
<tr>
<td style="text-align:center">Home</td>
<td style="text-align:center">Week 3</td> Note: I took out the
<td style="text-align:center">Week 4</td> comments to fit the code
</tr>
on this slide
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5" style="background-color:lightblue; text-align:center">Copyright Info</td>
</tr>
</table>
</body>
</html>
Step 6 – Save the Page
• Save the home page as index.htm or index.html

• Save future pages with .htm or .html extensions
• Do not include spaces in any file names for your
web pages
• If your web page has a txt extension instead of
html it won’t work
– Go to Windows Explorer (or another file management
program) and rename the file as index.htm
Step 7 – FTP Page to Web Server
Go to http://www.kfandale.com/ftp/index.htm
• Click the Connect button at the bottom of the screen to connect to the class web site.
• In the Connect screen that

appears, type in your
Username and Password,
then click Connect.
Username:
web505
Password:
Lots2Learn
(Password is case
sensitive)
• On the left side of the screen locate the folder on your computer where your web files
are stored. You can double-click on the 2 dots outlined in red to go back up the file
hierarchy to the C drive. Double-click folders to open them.
• The right side of the screen shows the folders on the Web
Server. Double-click the folder with your first name.
• Select the index.htm or index.html file on the left that you want to send over
to your web folder. Click the arrow button in the middle of the screen outlined
in red to transfer them. Then click Disconnect.
You will be able to see your site at (your folder name is your first
name and possibly your last initial if there are 2 or more with the
same first name in the class):
http://www.kfandale.com/web505/yourfoldername
Here are the folder names for this class:

Andrew Kahrman Susan
David Lateef Trent
Gisel MarkC Wesley
Guillermo MarkR Zack
Jason Michael
Jeff Sacha
John Stephen

Getting Started : HTML Tutorial - Web 237 Individual Assignment Week 2

Uploaded by

Copyright:

Available Formats

You might also like

Getting Started : HTML Tutorial - Web 237 Individual Assignment Week 2

Uploaded by

Document Information

Original Title

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

Getting Started : HTML Tutorial - Web 237 Individual Assignment Week 2

Uploaded by

Copyright:

Available Formats

Getting Started…

HTML Tutorial – Web 237

1. Choose a text editor

• Do not use “What You See is What You Get”

• There should be consistency between the plan you

Layout for my sample site:

Home Week 2 Week 3 Week 4 Week 5

I can always start with a

It is much more difficult to

• With the basic HTML structure in place it is time to

Code for my sample site:

Home Week 2 Week 3 Week 4 Week 5

The second row has 5

The third row has 1 column

The fourth row has 1 column

Code for my sample site

• Save the home page as index.htm or index.html

• In the Connect screen that

Here are the folder names for this class:

You might also like