1. No category

Creating A Web Page

Creating A Web Page
Computer Concepts I and II
Sue Norris
Agenda






What is HTML
HTML and XHTML Tags
Required HTML and XHTML Tags
Using Notepad to Create a Simple
Web Page
Viewing Your Web Page in a Browser
Submitting Your Project
Slide Menu
HTML
XHTML
Required HTML Tags
XHTML Requirements
Creating a Web Page
with Notepad
Formatting Tags
Paragraph Tag
Page Background
Color
Anchor Tag for Links
Lists
Header Tags
Further HTML
Training
XHTML Addition
DOCTYPE Statement
Further XHTML
Training
XHTML Validation
Viewing HTML Source
Transfer Files to Web
Server
Tables
Hyper Text Markup Language




Every Web Page is Formatted with HTML
markup tags
HTML Markup tags Tell a Browser How to
Display a Web Page
A Web Page ALWAYS has a File Extension
of htm or html
The Browser (ie Internet Explorer,
Netscape, Firefox) Reads the HTML tags
Sequentially From Top to Bottom and
Formats the Page Based On What the Tags
Say
XHTML



Extensible HyperText Markup
Language
Almost Identical to HTML 4.01
Stricter and Cleaner Version of HTML
What Do HTML Tags Look
Like?

HTML Tags Look Like:
<p> </p>
<b> </b>
<ul> </ul>
<li> </li>

paragraph tag
bold tag
unordered list tag
list item tag
What is Common About HTML Tags?
• Starting and Ending Tags
• Data Between the Tags will be Formatted
According to the Tag
• The Starting Tag Starts the Type of Format;
the Ending Tag Stops the Type of Format
Required HTML Tags
The Following HTML Tags are Required/Recommended for
Every We Pages
<html>
Every Web Page Starts with the
<html> tag
<head>
The Starting <head> tag always
follows the <html> tag
<title>My First Web Page</title>
The title tags encompass the title
of your page
</head>
<body>
The Ending </head> tag
always follows the ending
</title> tag
Starting body tag
Everything that appears on a
web page goes between the
<body> and </body> tags
</body>
Ending body tag
</html>
Ends every web page
XHTML Additional Requirements






All HTML Tags and Tag Elements Must be
in lower-case
Every HTML Tag Must have a Starting Tag
AND an Ending Tag
HTML Tags Must be Properly Nested
HTML Tag Attributes Must be in Quotes
The Id attribute replaces the Name
Attribute
The DOCTYPE Declaration Should be the
First Line in a XHTML Document
Slide Menu
Starting a Simple Web Page

Open Notepad
Click Start Button, Click on All Programs,
Click on Accessories, Click on Notepad
Slide Menu

Notepad Opens

Save Your Web Page
• Click File on the Menu Bar, Click Save, Choose
Desktop for Save in, type in Example1.htm in
File Name and Click Save
• NOTE: We are Saving to the Desktop to Make
This Easy; You Would Normally Save to a
Folder of Choice
Slide Menu



Type the Following HTML Tags into your Example1.htm
document.
Type in the Tags Exactly as You See Them Above
To Comply with XHTML coding standards:
• ALL xHTML tags MUST be in lower case
• ALL tags MUST have a starting tag and an ending tag

Save Your Web Page
Click File on the Menu Bar, Click Save

Minimize the Notepad Window; We Will Come Back to It
Slide Menu

Go to your Desktop
• You Should See the Example1.htm ICON on your
Desktop, Similar to that Below
• If you Don’t, Go Back to Slide 6 and Start Over

Double-Click on the Example1.htm ICON
Slide Menu
View Your Lovely Work


Your Browser Window Should Open with
Your Web Page Loaded in It.
It if Doesn’t, Go Back to Slide 7 and Make
Sure You Saved Your Page Correctly
Slide Menu
Add Formatting to Text




Maximize Your Notepad Window
Change Your HTML Code To Add the Bold Tag or Other Text
Formatting Tag, and So It Looks Similar to the Following
NOTE: The Yellow Background is Only to Highlight the
Inserted Tag
When Done, Save Your Web Page and Minimize the Notepad
Window
Slide Menu


Go to your Desktop
Double-Click on the Example1.html
ICON
Slide Menu
View Your Work

If You Did Everything Correctly, Your Web Page
Should Look Similar to the Following and My
First should be in Bold:
Slide Menu
Continuing With Your Web Page

Create Two Paragraphs with the Paragraph Tag
• Edit Your Example1.htm file in Notepad to add the two
Paragraph Tags that you See Below.
• Also add the <u></u> and <i></i> tags for Underline and
Italics formatting.
• XHTML RULE: Tags MUST BE Properly Nested. If formatting
Starts with <i><u>, the Order of the Ending Tags Must Be:
</u></i>.
• Save Your File and Minimize the Notepad Window
Slide Menu
View Your Page


Go to Your Desktop and Double-Click the
Example1.htm ICON. Your Webpage Should Look
Similar to That Shown in the Image Below.
If it Doesn’t Go Back to Slide 14 and Make
Corrections
Slide Menu
Add a Background Color





A Webpage Background Color is Added with the bgcolor parameter
of the Body Tag
Colors are Entered as 6 character hexadecimal numbers
Code Must Start with # and be enclosed in “”
Go to the Webmonkey site and pick a color that you like and jot
down the 6 character hexadecimal code associated with it.
Save Your File and Minimize Your Notepad Window
Slide Menu
View Your Web Page


Go to Your Desktop and Double-Click the
Example1.htm ICON. Your Webpage
Should Look Similar to That Shown in the
Image Below.
If it Doesn’t Go Back to Slide 16 and Make
Corrections
Slide Menu
Add a Link


Links Are Created with the Anchor Tag: <a></a>
A Link to the Microsoft web site would look like:
<a href=“http://www.microsoft.com/”>Click here</a>
to go to the Microsoft Site.
• This Represents a Link to an External Web Site
• The Information Between the “ ” s is the Address of the Linked
to Page
• The Information in Yellow and Between the > and </a> is
What Appears on the Web Page for the User to Click

A Link to Another Page Within the Same Web Site Might
Look Like:
<a href=“computers.htm”>Computers Page</a>
• Name of Page is computers.htm
• No Path is Specified if page is within the same folder as calling
Web Page
• Computers Page is What Will Display on Calling Page for User
to Click
Slide Menu
Try It



Maximize Your Notepad Window with
Example1.htm Open in It
Edit your HTML Code So That It Looks as Pictured
Below.
Save Your File and Minimize the Notepad Window
Slide Menu
View Your Web Page



Go to Your Desktop and Double-Click the Example1.htm
ICON. Your Webpage Should Look Similar to That Shown in
the Image Below.
Try Your Link. Does It Go to the Microsoft Site?
If it Doesn’t Go Back to Slide 18, Make Corrections, and Try
Again
Slide Menu
Creating A List

Ordered Lists (numbered) are Created with the
OL and LI tags
• Example of Two Item Unordered List
<p>Rivers</p>
<ul>
<li>Mississippi</li>
<li>Missouri</li>
</ul>

Unordered Lists (bulleted) are Created with the
UL and LI tags
• Example of Two Item Ordered List
<p>Rivers</p>
<ol>
<li>Mississippi</li>
<li>Missouri</li>
</ol>
Slide Menu
Try It


Maximize Your Example1.htm Notepad Window and Edit Your
HTML Source Code so That it Looks as Below.
Save Your File and Minimize Your Notepad Window
Slide Menu
View Your Page



Go to Your Desktop
and Double-Click
the Example1.htm
ICON. Your
Webpage Should
Look Similar to
That Shown in the
Image Below.
Do your Lists Look
Similar?
If They Don’t Go
Back to Slide 22,
Make Corrections,
and Try Again
Slide Menu
Adding a Header Tag



Header Tags are Used to Emphasize
Web Page Sections and Subsections
in an Outline Fashion
Header Tags Range From H1 to H6
with H1 Being the Largest and H6
the Smallest
Examples:



<h1>Main Section</h1>
<h2>Sub-section</h2>
<h3>Sub-sub-section</h3>
Slide Menu
Try It



Maximize your Example1.htm Notepad Window
Edit Your HTML Code To Look as Below
Save Your File and Minimize the Window
Slide Menu
View Your Work



Go to Your Desktop and Double-Click the Example1.htm
ICON. Your Webpage Should Look Similar to That Shown in
the Image Below.
Do You Notice the Heading Difference?
If it Doesn’t Go Back to Slide 25, Make Corrections, and Try
Again
Slide Menu
Tables





Tables are Created with the
following tags:
•
•
•
Table
TR for table Rows
TD for Table Cells
•
•
The Table is 500 pixels wide
The Table has a border that is
1 pixel wide.
In the Example to the Right, a
3 Row, 3 Column Table is
Created
Note: The Information
Between the <td> & </td> is
Just Padding; You Can Have
Anything You Like
Open Your Example1.htm file
and add the tags for a table.
Put whatever data you want
into the Cells. Save Your File.
See the W3Schools Tutorial
Site for Additional
Information on Creating
Tables
Slide Menu
View Your Table



Double-click on the Desktop ICON for Example1.htm to View Your
Work
It Should Look Similar to the Following
If It Doesn’t, Go Back and Review Your Tags
Slide Menu
Further HTML Training
Continue Training at the W3Schools HTML Tutorial Site:
http://www.w3schools.com/html/default.asp
Slide Menu
XHTML Finishing Touches

DOCTYPE Statement Required
• First Statement in XHTML Source Code
• Three Document Type Definitions (DTD) Supported



Strict
Transitional
Frames
• Transitional is Most Common



Fine for This Class
If Cascading Style Sheets (CSS) are Used, Strict DTD
Should be Used
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
Slide Menu
Add DOCTYPE Statement


Open Your Example1.htm Notepad Window and
Edit Your HTML Code so That it Looks as Below
Save Your Page, Minimize the Window, then
Check Your Web Page to Make Sure it Opens
Slide Menu
Further XHTML Training


Continue Your XHTML Training at:
http://www.w3schools.com/xhtml/default.asp
Tutorials From Introduction to Validation are Required
Slide Menu
XHTML Validation

Validate HTML Source
Code
• Verifies If Source Code
Conforms to XHTML
Standards
• Pinpoints Errors
• Offers
Recommendations

Several Web Sites
Available
• Try:
http://validator.aborla.n
et/

See Web Page Notes
for Further
Information
Slide Menu
Viewing the HTML Source Code of
a Web Page



The HTML Code of any Web Page Can
Easily be Viewed in a Browser
In IE, click View on the Menu Bar
and Select Source
In Mozilla Firefox, click View on the
Menu Bar and Select Page Source
Slide Menu
Transfer Files to Web Server

Use a FTP Program To Transfer Student
Web Pages and Files to the Web Server
• IE FTP Client
• WS_FTPLE
• Fetch

Most Assignments Also Need to be Posted
to the Assignment Dropbox in WebCT
• Make Sure Your Page Has All Requirements
• Make Sure Your Link Works

That Wasn’t So Hard, Was It
Slide Menu
Summary






What is HTML
HTML Tags
Required HTML Tags
Creating a Web Page in Notepad
Viewing a Web Page in the Browser
Submitting Your Web Page
Slide Menu

 Download  Report

Paperzz.com

Your Paperzz

© Copyright 2026 Paperzz