Home   CGS 2820C
  Web Development 		#2 Grading Criteria for:
Your second Web page assignment using Notepad:
modify index.htm created in your first assignment.
Description: This is a continuation of your first assignment as you build a 4-page Business or Personal Web site for yourself or for a real or perspective client. Create a folder for your Web site and inside your Web site folder add an images folder. Open the simple index.htm file created in your last assignment, and using Notepad or a similar "Text Editor" add the tags and features listed below:
<img src"=...>, <hr>, <div>, <span>, <strong>, <em>, meta tags for author, description, keywords, <ol>, <ul>, href="images/favicon.ico".  FTP (File Transfer Protocol) or upload your file and image(s) to your Web site.

Before you begin this assignment, make a folder for your Web site on your USB/Thumb drive:
1. Open your USB/Thumb drive
2. Right-click inside your main folder, and choose New > Folder
3. Give the new folder the name of your Web site (no spaces), such as BarbsBoutique or WinchesterComputers
4. Drag (or copy) the index.htm file in your last assignment into the new folder.
5. Open the new folder and confirm index.htm is there.
6. Right-click inside your new folder, and choose New > Folder
7. Name the new folder images (all lower case)
Topic Directions Points
<img src"=...>
Adds an image to a Web page
Only use Notepad or a Text Editor		 Add a relevant image to your personal or business site.
The code to display this Arrow is shown below
<img src="images/arrow.gif" alt="Arrow" />		 10
<hr>
Horizontal Rule or a line.
(The <hr> tag renders or displays differently in various browsers.)		 Add a line <hr> (Horizontal Rule) in an appropriate place
The code for the Horizontal Rule above is:
<hr style="background-color:blue; width:50%; text-align:center; height:3px;" />		 10
<div>
Used to make settings to a division or section of a Web page.		 Use the <div> command to set separate section of your Web page with different formats. For example:
<div style="text-align:center; color:blue">... </div>		 10
<span>
Used to make settings to a few words or small section of a page		 Using the <span> tag add some color to a few words of text on your page. For example: This is a blue word.
This is a <span style="color:blue">blue</span> word		 10
<strong>, <em>
Bold and Italics (emphasis)		 <strong> has replaced the deprecated <b> or bold tag.
<em> has replaced the deprecated <i> or italics tag.
Example: <strong>bold</strong>		 10
<meta>
Meta tags and meta data store background information about a Web page or site, such as the description and keywords that are used by many search engines. These <meta> tags are usually found within the <head> tags, under the <title> tag. 		Add <meta> tags for Author, Description, and Keywords to the <head> section of your Web page.  For example:
<meta name="author" content="Floyd Winters">
<meta name="description" content="Web Development syllabus">
<meta name="keywords" content="HTML tags, Web code, web programming ">		 10
<ol>
Ordered List: 1,2,3 or I, II, III

Styles:
Default is 1, 2, 3, 4
upper-roman
lower-roman
upper-alpha
lower-alpha
decimal
 Use a relevant Ordered list on your page.

For example the code below:
<ol style="list-style-type: lower-roman">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

Produces the output below:
      
  1. List item 1
    2.   
  2. List item 2
    3.   
  3. List item 3
 10
<ul>
Unordered List, such as bullets
Styles:
Default is disc (a bullet)
square
circle		 Use a relevant Unordered list on your page.

For example the code below:
<ul style="list-style:square">
  <li>List item 1</li>
  <li>List item 2</li>
</ul>

Produces the output below:
      
  • List item 1
    •   
  • List item 2
 10
<link href="images/favicon.ico"
favicon is used to place your favorite icon in the URL/Address box next to your URL/Address.  Make sure your icon has a .ico extension and if you right-click > "Open with" it can open in your browser.

Notice this page has an icon of my dog in the left corner of the URL/Address box.

You can see a favicon by typing:
http://yourdomain/images/favicon.ico 		You can use an existing icon, or use certain art programs to custom create one (like PhotoFiltre) or download an icon maker to get your favorite icon.  It must be named favicon.ico. Most hosts store the favicon in the images folder. Some systems store it in the root folder.
Code for CGS2820 Syllabus favicon (in <head> tag):
<link href="images/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
Code for Google favicon (in <head> tag):
<link rel="shortcut icon" href=" http://www.google.com/favicon.ico" type="image/x-icon"/> 		5
Make this version of index.htm look attractive. Add relative content, color, images and styles. Make it look like a college student is working on this project. 5
1. Use a File Manager or FTP to transfer your index.htm file and other .htm files to your online Web site. Create an online images folder and upload your images to the images folder.
2. Confirm that everything works online, then copy the URL address.
3. Paste the complete URL address into the Message portion of the SCF Angel [Assignment Dropbox] for this assignment.		 Use either a File Manager to upload your file(s) or FTP it to your host.

See: ../../Common/FreeWebSpaceFTP.pdf

Paste the complete URL address of your project into the Message portion of the SCF Angel [Assignment Dropbox] for this assignment so that I can easily copy and paste it into my browser when I grade it.
 10