Home   CGS 2820C
  Web Page Development 		#01 Grading Criteria for:
Your First simple Web Page (index.htm).
Created in using Notepad or VS Code.

Description: During this course, you will be building a 5-page "portfolio" Business or Personal website for yourself. With your future website in mind, start work on the first version of YOUR home page, named index.htm (all lower case). Use Notepad or VS Code (See Murach's pages 53 to 63) (https://code.visualstudio.com/) to create a simple working web page with at least two full paragraphs using appropriate, realistic, and college level text with YOUR content. Do not use sample or "lorem" filler text for your submission for a grade. Although this is just an intro assignment, it will be your website, about you. So try to make it look professional; in a few weeks you want to create something you would feel good about showing to a potential employer.

See 1:40 Minute YouTube Video: HTML in 100 seconds
See 5:12 Minute YouTube Video: F J Winters: Your First web page in Notepad
See pages 29, 43 to 51 Duckett

Short Interactive Tutorials:

W3Schools Intro Tutorial:

W3Schools Title Tutorial:

W3Schools Headings Tutorial:

W3Schools Paragraphs Tutorial:

W3Schools Editors Tutorial:

Try It Yourself

Try It Yourself

Try It Yourself

Try It Yourself

Try It Yourself

HTML (HyperText Markup Language) is the language used by web browsers to display text and images on web pages.
HTML uses Tags, such as <head> or <body> or <h1> or <p> to display text and images in a web browser.
Tags have Attributes (p 42-43, assigned with an equal sign. Example: class="important" or href="https://scf.edu")
Styles (p 46-49) are used to format the appearance of text, images and layout.
Styles have Properties, (p 47, assigned with colons. Example: color:red).
Properties have Values. For instance: color:blue or width:200px or font-size:18px.

Include each of the following tags in your first draft of your Home web page, named index.htm:
<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, go to https://code.visualstudio.com/ and click the [Download for Mac] button.

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

Interactive W3Schools Intro to HTML Tutorial
Interactive W3Schools HTML Headings Tutorial
Notepad Tutorials: FirstWebPage.htm | Styles
First web page Video Tutorial (YouTube 5:12)
Win Web Tutor
w3schools HTML Tutorials and sample Quizzes

Make sure you MEET ALL GRADING CRITERIA below.
Topic Directions Points
See bottom of this page for code you can copy for a short sample web page.

Only use Notepad or VS Code for this assignment.

 Open Windows Notepad:
In Windows 10: Click the Windows Start button > type Notepad.
I supplied you with online tutorials, examples, and page numbers.
If you need more help: Google :-) 		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>
<html>
<head>
   <title>Barb's Boutique</title>
</head>
</html>

See Notepad Tutorial: Your First Web Page 		5pts <!DOCTYPE
(p 181)
5pts <html>
10pts <head>
10pts <title>
Be sure to open and close each tag.
(p 27)

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

Use the Style attribute to set a background-color.

Note: Just like humans only have one head and one body, a webpage only has one opening <head> tag and one opening <body> tag.

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>
<html>
<head>
   <title>Barb's Boutique</title>
</head>
<body style="background-color: yellow">
   <p>Barb's Boutique specializes in...</p>
</body>
</html>

See Notepad Tutorial: Web Page Colors
 10pts <body>
style
background-color
All pages should have college level content, with a realistic title, header, and YOUR real information inside the <p> tags. No "Lorem" filler text.
(p 27)

<h1> tag
Sets the main heading of a page.
Usually at the top of page after the <body> tag

In DreamWeaver: Insert | Heading

Note: There is an <h1>, <h2> and <h3> tag. But there is no p1 or p2 tag. Only a <p> 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:
<body>
<h1>Welcome to Barb's Boutique</h1>		 10pts <h1>
Use a realistic header and realistic text as you begin work on the first page of your own real website.
(p 43)
<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>		 10pts <h2>
style color
(p 43)
<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>		 10pts <p>
(p 44)
<p style="font-weight:bold"> Use a <p> tag and a style to set the font weight to bold for a short paragraph 5pts <p>
font-weight
<p style="font-size:14px"> Use a <p> tag to set a different font size for a paragraph 10pts <p>
font-size
<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;"
or
<p style="font:bold 14px arial; color:purple"> allows the font attribute to have multiple values.
<br>
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>
 5pts <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.		 5pts <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.		 5pts <i> or <em>
(p 51)
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>		 optional
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 must be all lower casefor it to work online. 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.		 Preview your page in FireFox, then right click and choose View Source, and look for any errors displayed in red. Hover over flagged errors for hints. 
Note: the line in red may be OK, but it may be 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 of an index.htm file. 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>
<html>
<head>
   <title>This is my Title</title>
</head>

<body>
   <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>
</body>
</html> 		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.