Home   CGS 2820C
  Web Development
#02 Grading Criteria for:
Your First simple Web Page (index.htm).
Created in using Notepad on a PC or TextEdit on a Mac.

See 5:12 Minute YouTube Video: F J Winters: Your First web page in Notepad

Description: You will be building a 5 page "portfolio" Business or Personal website for yourself or for a real or perspective client. All pages should have college level content. With your future website in mind, start work on the first version of YOUR home page by using Notepad or a similar pure "Text Editor" to create a simple working web page using appropriate and realistic, college level text with YOUR content. Do not use "lorem" filler text.

HTML (HyperText Markup Language) is the language used by web browsers to display text and images on web pages. It uses Tags, such as <head> or <body> or <h1>, to display text and images in a web browser. Styles are used to format the appearance of text, images and layout. Tags have Attributes or Properties, such as color or width or font-size. And attributes have Values.
For instance: color:blue or width:200px or font-size:large.

Include each of the following tags in your web page:
<html>, <head>, <title>, <body>, <h1>, <p>, <br>, <b>, <i>
(Note: HTML5 allows <br>, <b>, & <i> in place of the older HTML4  <br />,<strong>, & <em>)

For this first assignment, use an Inline Style Attribute such as: <h1 style="color:blue"> or
<p style="font-size:14px; color:blue">
or <body style="background-color:yellow">
(In the very near future these inline styles will be replaced with one Stylesheet).

To start creating your first page, open Windows Notepad: click the Windows Start button and type Notepad
Notepad saves all files as "text files" - that is, unlike a word processor, Notepad does not add extra code for things like margins and printer definitions. Notepad does not allow you to set fonts or colors or even bold. Notepad files are very small. The default Notepad extension is .txt. However, you must save your web files created in Notepad 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.

Note: If you have an Apple Mac, you may use TextEdit instead. Choose "Make Plain Text" from the Format menu before you save the file. Then, choose File > Save As, type ".html " as the filename extension, and uncheck the box that reads "If no extension is provided, use .txt" and/or click the button that reads [Use .html] if TextEdit asks if you want to use the .txt extension.
See:  First Page Using Mac TextEdit

Go to the bottom of this page to see the code that you can copy for a short sample web page.

Free online HTML Tutorials:
Notepad Tutorials: FirstWebPage.htm | Styles
First web page Video Tutorial (YouTube 5:12)
Win Web Tutor
w3schools HTML Tutorials and sample Quizzes
Topic Directions Points
Only use Notepad or a text editor for this assignment. Open Windows Notepad:
In Windows 7: Start > All Programs > Accessories > Notepad
In Windows 10: Click the Windows Start button > type Notepad.
Be sure to meet all the criteria below.
<html> tag
Open and close an HTML file

<head> tag
The head contains HTML tags that provide info such as the document title, the web page description and keywords. With the exception of the title, which displays in the Titlebar, most of this info will not display in the browser.

<title> tag
Sets your web page title

Note: The reason for the red, green, and blue HTML tag colors shown at the right is so that you can see how the tags are "Nested" or how one tag is opened and closed within another.

Add <!DOCTYPE html> as your first line of code, so that the browsers recognize that you are coding in HTML5. The DOCTYPE declaration will help browsers display your documents consistently.

At the very top of the new Notepad file, 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 end your web page. Note that a slash (/) is used to "close" a tag such a </html> or </head> or </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:
<!DOCTYPE html>
   <title>Barb's Boutique</title>

See Notepad Tutorial: Your First Web Page
5 <html>

10 <head>
10 <title>

Be sure to open and close each tag.

<body> tag
Holds the text, images and content of your web page.

Use the Style attribute to set a background-color.
Use the <body> tag, and use at least one or more settings with the style attribute to set a background-color (see attribute and style below). Notice how the open and close <body> tags are placed and nested within the <html> tags:
<!DOCTYPE html>
   <title>Barb's Boutique</title>
<body style="background-color: yellow">
   <p>Barb's Boutique specializes in...</p>

See Notepad Tutorial: Web Page Colors
10 <body>


All pages should have college level content, with a realistic title, header, and YOUR real information inside the <p> tags. No "Lorem" filler text.

<h1> tag
Sets the main heading of a page.
Usually at the top of page after the <body> tag
Within the <body> tags include an appropriate heading for your website, 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:
<h1>Welcome to Barb's Boutique</h1>
10 <h1>

Use a realistic header and realistic text as you begin work on the first page of your own real website.
<h2> tag with a style to center
Sets the secondary heading of a page.

Use the Style attribute to set the <h2> text color.
Within the <body> tags include an appropriate and centered <h2> secondary heading for your website, such as Barb's Boutique or Winchester Computers. Use the Style attribute to assign it a color.

<h2 style="color:blue">Our Products</h2>
10 <h2>

style color
<p> tag
Starts a new paragraph
Note: a <p> tag will provide more vertical space than the <br> tag below.
Display at least a couple of realistic 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 for each paragraph.</p>
10 <p>
<p style="font-weight:bold"> Use a <p> tag and a style to set the font weight to bold for a short paragraph 5 <p>
<p style="font-size:14px"> Use a <p> tag to set a different font size for a paragraph 10 <p>
<p style="font-weight:bold; font-size:14px; font-family:arial; color:purple;"> will combine multiple attributes.
Note pattern of ="property: value; property: value; property: value; property: value;"
<p style="font:bold 14px arial; color:purple"> allows the font attribute to have multiple values.
Inserts a line break
XHTML4 only permits <br />
HTML5 allows <br> or <br />
The <br> tag is for line breaks. It uses less vertical space than the <p> tag. For Example:
Line one<br>
Line two<br>
5 <br>
<b>  (or <strong> HTML4)
Makes selected text bold
Use the <b> or <strong> tag to make one or two words bold within a paragraph:
<p>This word is <b>bold</b></p>
Notice how the <p> and <b> tags are nested.
5 <b> or <strong>
Use appropriate and realistic text,
not "lorem" filler text.
<i>   (or <em> HTML4)
Makes selected text emphasized or italics
Use the <i> tag to make one or two words italics within a paragraph:
<p>These words are <i>in italics</i></p>
Notice how the <p> and <i> tags are nested.
5 <i> or <em>
Note: the <center> tag is deprecated, or obsolete and no longer used.
Do NOT use <center> or <font> tags
Use the style method below to center something:
<h1 style="text-align:center">Centered</h1>
Save your file as index.htm (or .html)

Double-click on index.htm to open it in a browser.

Make sure you 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. The default name of most Home pages is index.htm. However, some home pages are named default.htm.

To edit an existing .htm file: Open Notepad and choose File > Open or right-click on your file and choose Open with Notepad.
Open in FireFox.
Right-click and view source.
Look for errors which are usually shown in red.
Note: the line in red may be OK, but is flagged due to an error above it.
Be sure to check the spelling on your Web pages. An easy way to do this is to preview your page. Choose Ctrl A to select All. Ctrl C to Copy. Open Microsoft Word and paste - Ctrl V. Word will underline spelling and grammar mistakes - just right-click the mistake to see suggested corrections. If I find a spelling mistake because you did not take the time to check your own page, you will lose points. -3 pts for each spelling mistake.
Helpful hint: If you preview your page in FireFox, and then right click and choose View Source, you will see any errors displayed in red. If you hover over the error, FireFox will often give you a further explanation of that error, which may be caused by something like a tag above the line which was not properly closed. You will lose at least 3 points for each error for the first assignments. At least -3 pts for each mistake.
A Simple Sample web page created in Notepad.

Notice how the tags are "Nested." See color patterns at right to see the pattern of how tags are opened and closed within another.

Notice how all the content that will appear on the page is between the <body> tags.

For practice only, 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.

But remember, you will submit your own college level page about yourself or your business.

Below is only a simple example. Do your own college level page, with full paragraphs, that is relevant to the site you will create and work with during the entire semester.
<!DOCTYPE html>
   <title>This is my Title</title>

   <h1>Add a real Heading here</h1>
   <p>Add your first real Paragraph here.</p>
   <p>Add more real text/content here.</p>
   <p>Use <b>bold</b> somewhere</p>
   <h2 style="color:blue">Our Products</h2>
   Start to build your own website.<br>
   Create your own college level content.<br>

   <p style="color: red">Good <i>Bye</i></p>
Upload your own relevant index.htm file about you to the SCF Canvas online [Assignment Dropbox].

No Zip files!
They are a virus risk.

You will lose 3 points for each day late.