This document provides instructions for creating a simple HTML page using Notepad. It explains how to add headings, text formatting, images, links, and other basic HTML tags. The steps guide the user to build a sample page with their name, favorite topics, a news item, and a quote. Formatting is demonstrated through changing colors and inserting horizontal rules.
HTML Lab ProjectTo create a simple web page you will need to use.docx
1. HTML Lab Project
To create a simple web page you will need to use a text
processor (Notepad) and HTML (hypertext markup language).
Do NOT use
Word which can create some problems by automatically
formatting your work as a web page.
The tags (items enclosed in < >) from HTML create the special
effects that are seen on web pages when using a browser like
Internet Explorer.
Note: some tags require a starting and ending tag. For example:
This is my home page
Also if multiple tags are used to format a single item,
ending tags must be written in reverse order from the starting
tags.
Example:
My First Home Page
tag1 tag2 endtag2 endtag1
After completing the steps in the tutorial, you should be able to:
1.
Create a Home Page using HTML
2.
Create headings
3.
Place text and graphics in an HTML document
2. 4.
Use attributes such as font color with tags
5.
Create links to other places or documents
Home Pages
The home page of a web site is the starting point that usually
describes the purpose of the web site and its categories. The
page typically includes hyperlinks which will take the viewer to
other web sites or other places within the same web site. In
planning a home page consider these items
Title – this text will appear on the blue title bar of your web
page
Headings – customarily the first heading is the same as the title;
it appears as the first line of your home page. Each browser
displays headings in a unique way, but they allow several levels
of headings from H1 to H6. Heading 1 would be the largest,
most noticeable, heading 6 the smallest. In the examples that
follow, the first line of each pair shows the HTML tags; the
second line is the effect produced.
H1 headings
H1 headings
H2 headings
H2 headings
H3 headings
H3 headings
H4 headings
H4 Headings
H5 headings
H5 Headings
H6 headings
3. H6 Headings
Content - Text that explains your home page or special
features of the page.
Create a Sample HTML Page
Step 1.
A.
Open Notepad (Click on Start, Programs, Accessories,
Notepad).
B.
Enter the following text:
Your Name Home Page
Your Name Home Page
C.
Choose File, Save As. For the file name, use
mysample_Lastname_Firstname.htm
in
Save As Type
, choose All Files, and save to your desktop, or other easy to
find location.
(CAUTION: if you neglect to choose All Files, this will be
saved as a text file, ending in txt, and will not be available for
opening in your browser
4. .
Step 2.
A.
Start your browser (Internet Explorer). It is
not
necessary to be online.
B.
From the menu bar, choose File, Open.
C.
Browse for the file you just saved on your desktop
(mysample_firstname_lastname.htm).
D.
Choose Open.
E.
You should see only the title bar and a heading on your newly
created homepage.
Step 3.
A.
From the menu bar, choose View, then Source.
B.
A window should appear showing your Notepad file with the
HTML coded text. You can edit your text for the next steps in
this window. Just remember to save the Notepad file each time
you make changes.
C.
Use the Refresh button in your browser to see the changes on
5. your web page.
Additional Headings
For your sample page, you’ll create headings for: My Favorites,
Headline News, Quote of the Day
Step 4.
A.
On the line following , enter the following
My Favorites
Headline News
Quote of the Day
Step 5.
A.
Choose File, Save.
B.
On the browser file menu, choose Refresh.
You should see the three level-2 headings which you
added in Step 1.
Content
To leave blank lines around a paragraph of text, use the tags
To start a new line without adding blank lines, use
(Note: no ending tag is needed for a line break)
To identify the body of your text enclose it in the tags
Tags which may be used to enhance your text:
bold
centers text
underline
6. moves text across the screen
Step 6.
A.
Add the tags shown below in your source file (shaded areas).
B.
Add the tags around your heading.
C.
Add the content after the headings. (
Edit your current lines to match what is below.
)
Your Name Student Page
>
Your Name Student Page
My Favorites
Food: pizza
Sport: football
Color: blue
Movie: Fellowship of the Ring
Headline News
I have a new __________
Quote of the Day
Minds are like parachutes; they function only when open.
7. Step 7
. Save the source file.
Step 8
. Refresh the browser.
Inserting images
To insert a graphic file, it should be one of two formats: either a
.gif or .jpg file.
Gif files may also be animated. These graphic files look more
like drawings or cartoons.
Jpg files are photographs, like the ones taken by digital
cameras.
The simplest way to use graphics is to store them all in the
same
folder as your Notepad source file.
I suggest you use google.com and then select Images from the
Upper left links.
The tags for inserting an image are
filename
” >. Substitute the name (including the extension: either gif or
jpg) of the file you select for
“filename”.
Step 9
. Add the following text after the line ending with
.
filename
.gif”>
Step 10
. Save your source file. Refresh the browser.
8. Colors
Colors can add (or detract) from your web page. Avoid
background colors like red or orange which are not easy on the
eyes. Also beware of blue backgrounds which can make link
text (also in blue by default) invisible.
Colors are referred to by code or by name, combining letters
and numbers as follows
Green #00FF00
Red #FF0000
Tan #DEB887
Turquoise #19CCDF
Magenta #FF00FF
Yellow #FFFF00
Blue #0000FF
To change the background color of your web page
colorcode
>
To change color of all text on your page
colorcode
>
Step 11
. Add the following code after the heading,
Add
before the last line
9. .
Step 12
. Save your source file. View it with the browser.
Horizontal Rule
Horizontal lines are used to off set or segment text on your web
page. They can be either a default grey color or you can
specify a color.
Inserts a horizontal rule
Sets size (height) of rule
Sets width of rule, in percentage or absolute value
Creates a rule without a shadow
Code example:
Inserts a horizontal rule
Sets size (height) of rule
Sets width of rule, in percentage or absolute value
Creates a rule without a shadow
Sets the rule color
This is just a sample of possible colors. A good online
reference for color is
http://hotwired.lycos.com/webmonkey/reference/color_codes/
Links
Hyperlinks allow the viewer to move to other places in your
10. document or on the web quickly.
To create a hyperlink (or link), enclose the URL of the web
page in
URL”> name of link
(Note: include all characters of the URL, including
http://)
Step 13
. Add the following after the text “Minds are like a ….”
Web sites: LSC-University Park
Step 14
. Save your source file. Refresh the browser.
Lists
You can add bulleted lists or numbered lists to your web page
with the following tags:
January
February
March
Or for bulleted lists use and at the start and end of the list
items.
Reference HTML Cheatsheet
---------------------------------------------------------------------------
-----
Basic Tags
Creates an HTML document
Sets off the title and other information that isn't displayed on
11. the Web page itself
Sets off the visible portion of the document
Header Tags
Puts the name of the document in the title bar
Body Attributes
Sets the background color, using name or hex value
Sets the text color, using name or hex value
Sets the color of links, using name or hex value
Sets the color of followed links, using name or hex value
Sets the color of links on click
Text Tags
Creates the largest headline
Creates the smallest headline
Creates bold text
Emphasizes a word (with italic or bold)
Emphasizes a word (with italic or bold)
Sets size of font, from 1 to 7)
Sets font color, using name or hex value
Links
12. Creates a hyperlink
Creates a mailto link
Creates a target location within a document
Links to that target location from elsewhere in the document
Formatting
Creates a new paragraph
Aligns a paragraph to the left, right, or center
Inserts a line break
Creates a numbered list
Precedes each list item, and adds a number
Creates a bulleted list
Graphical Elements
Adds an image
Aligns an image: left, right, center; bottom, top, middle
Horizontal Rule
Sets size of border around an image
Inserts a horizontal rule
Sets size (height) of rule
13. Sets width of rule, in percentage or absolute value
Creates a rule without a shadow
Completed Code and sample page:
Khavansky M.Johnson
Khavansky M. JOhnson Home Page
My Favorites
Food: Rice and peas
Sport: Soccer(football),Basketball, CrossCountry, Tracks, and
cricket
Color: Green and Blue
Movie: The last samaria
Headline NewsI have a new rating on monoploy
Quite of the Day"Just give the G's and we'll be burning ahh"
