Home   CGS 2820C
  Web Development 		#1 Grading Criteria for:
Your first simple Web page - created in Notepad

Description: You will be building a 4-page Business or Personal Web site for yourself or for a real or perspective client. With your future Web site in mind, start work on the first version of your home page by using Notepad or a similar "Text Editor" to create a simple working Web page that includes the following tags:
<html>, <head>, <title>, <body>, <h1>, <p>, <br>
Use a Style Attribute such as: <span style="...> or <p style="...> or <h1 style="...> or <body style="...>
Add an External hyperlink: <a href="http://abc.com">abc</a>
Add a Local hyperlink: <a href="resume.htm">Resume</a>
An Internal link such as: <a href="Chapt2">Chapter 2</a> used with <div id="Chapt2">Chapter 2</div>
Add an Email link: <a href="mailto:myName@abc.com">Email Me</a>

To start Notepad: choose Start > Programs > Accessories > Notepad
Notepad saves all files as "text files" without any formatting. The default Notepad extension is .txt.
However, you must save your Web files with the extension .htm or .html.
To edit an existing .htm file: Open Notepad and choose File > Open  or right-click on your file and choose Open with Notepad.

Click here to see the code for a short sample Web page.
Topic Directions Points
<html> tag
Open and close an HTML file
Only use Notepad or a text editor for this assignment.		 Open Notepad:
Start > Programs > Accessories > Notepad

Use the <html> tag as your first line of code to start your Web page. Use the </html> tag as your last line of code to start your Web page. Notice how the slash (/) is used to "close" a tag such a </html> or </body> or </h1>.		  
<title> tag
Sets your Web page title		 The Title tag will appear on the taskbar or on a browser tab when the page is opened. It must be placed within the <head> tag. Use an appropriate title for your new site. For example:
<head>
   <title>Barb's Boutique</title>
</head>		 10
<body> tag
Holds the text, images and content of your Web page.
Set a background-color.		 Use the <body> tag, set a background-color and use at least one or more settings with the style attribute (see attribute and style below). Notice how the open and close <body> tags are placed within the <html> tags:
<html>
<body style="background-color: yellow">
   <p>Barb's Boutique specializes in...</p>
</body>
</html>		 10
<h1> tag
Sets the main heading of a page.		 Within the Body tags include an appropriate and centered heading, such as Barb's Boutique or Winchester Computers.
There are several Heading tags. <h1> is the main heading tag and is bigger than <h2>, which is bigger than the <h3> tag.  For example:
<body>
<h1 style="text-align:center">
Welcome to Barb's Boutique</h1>		 10
<p> tag
Starts a new paragraph		 Display at least a couple of paragraphs describing your Web page. Make sure at least one paragraph is a multiline and multi-sentence paragraph. Ex:
<p>Barb's Boutique specializes in....</p>
 <p>Use your own words each paragraph.</p>		 5
<br />
Inserts a line break		 The <br> tag is for line breaks. It uses less vertical space than the <p> tag. For Example:
Line one<br />
Line two		 5
An Attribute is a property of a tag. It is used inside of tags like
<span style="...> or <div style="...>
or <p style="...> or <h1 style="...>
or <body style="...>

The Style attribute can be used to change the color, font, font-size...		 <span style="font-size:18px; color:#0000FF">Blue </span>
Or
<p style="color: blue; font-size: large; font-family: Arial; font-weight: bold">Big, Blue and Bold</p>

Set at least two different colors and sizes.
Remember: roses are FF0000 and violets are 0000FF.		 10
An Absolute External hyperlink
(Absolute because the entire URL path, including http:// is needed.)		 Insert a link to a Web page on a different site. Example:
<a href="http://msn.com">MSN</a>		 10
A Relative Local hyperlink
(Relative because the entire path is not needed.)		 Insert a link to a Web page in the same folder, on the same site. Examples:
<a href="resume.htm">Owner's Resume</a>
<a href="Demo.htm">Demo Page </a>		 10
Add an Internal Anchor hyperlink (notice how you must use the # sign) to an ID (preferred) or an Anchor or Bookmark.
(Anchor because an "anchor" or bookmark or ID must be first set to mark the destination anchor on the same  page.)		 Insert a link to the internal id/anchor somewhere on the page other than "Top"
Newer Style:
This will name the ID:
<h1 id="SamplePage">Sample Page</h1>
This will link to the Chapt2 ID:
<a href="#SamplePage">Sample Page</a>

Older Style:
This will name the bookmark: <a name="Chapt2"></a>
This will link to the Chapt2 bookmark or anchor:
<a href="#Chapt2">Chapter 2</a>
 10
A working Email link
(If clicked it starts an email process)		 Include a working link to your Email address. Ex:
<a href="mailto:MyName@Host.com">Email Me</a>		 10
Save your file as index.htm
Double-click on index.htm to open it in a browser.
Edit your .htm file to make changes.
Make sure your bring this file to class each session. You will add tags and content to this file in your next few assignments.		 To Save in Notepad - choose File > Save as, and name your file index.htm You can use the extension .htm or .html, however notice the file name is all lower case.
(index.htm is the default name of most home pages.)

To edit an existing .htm file: Open Notepad and choose File > Open  or right-click on your file and choose Open with Notepad.		 10
A Simple Sample Web Page

Notice how the tags are "Nested"
(See colors at right to see the pattern of how tags are opened and closed.)

You can copy and paste the code to the right directly into Notepad. Save it as Sample.htm. Double-click on Sample.htm to open it in your browser to see how it works.		 <html>
<head>
   <title>This is my Title</title>
</head>

<body>
   <h1>This is my Heading</h1>
   <p>This is my first paragraph.</p>
   <a href="http://msn.com">MSN</a>
</body>
</html>		 Upload your .htm or .html file to the SCF Angel online site.