Home   CGS 2820C
  Web Development
#06 Grading Criteria for: Lists and Special Characters
Created with Notepad on a PC or TextEdit on a Mac.
Save your home page and give it the new name transcript.htm which you will upload to your website.
Link transcript.htm to the bottom of resume.htm

Description: This is a continuation of your first assignments as you build a 5-page Business or Personal website for yourself or for a real or perspective client. You will make a Transcript and References page that is linked to your resume.htm page. The Transcript page will have the same navigation, masthead and cascading stylesheet as your Home page and Resume. As you work on your navigation using the <ul> and <li> tags shown below, be sure to add the same Nav code to your Home page.

Use an Unordered List to display all your college courses and your grade for each course.  Then on the bottom of the same page you will use an Ordered List to display at least two personal or business References. Finally, you will add some special characters. Everything for this assignment will be on the same page.

Make transcript.htm look attractive with real content. It will have the same masthead, styles and navigation as your home page.

Below is one way to save time and also make your pages consistent:
  1. Save your refined index.htm or resume.htm as transcript.htm.
  2. Delete the specific content from the index or resume page.
  3. Make sure the <title> tag, <meta> tags and <h1> are changed to be specific to the transcript page.
  4. Place the transcript content within the <main> element or within a <section> element inside the <body>.
  5. Use the same External Cascading Stylesheet, same masthead, and same navigation inside the <nav> element for your home page, resume, transcript, portfolio, newsletter, and contact page.
  6. Later you may choose to add a hyperlink on your resume.htm page which will link to transcript.htm. Or you can add the link to your main navigation.
Free online HTML Tutorials:
Notepad Tutorials: Lists | Special Characters
Win Web Tutor
w3schools HTML Tutorials and sample Quizzes
Topic Directions Points
<ul>
Unordered List, such as bullets or squares

List-Styles:
Default is disc (a bullet)
square
circle
Add an Unordered list to your new transcript.htm page that will list the semester, each of your college courses, and the (grade) received. This is designed to be both a assignment on Lists and also something that will be personally beneficial to you. If you have 20 courses, and you do not feel like listing all of them, perhaps just list the most important ones.

For example, the code below:
<h3>The State College of Florida</h3>
<ul style="list-style:square">
  <li>F2017 CGS 2820C Web Page Development (A)</li>
  <li>F2017 COP 2170 Visual BASIC (B)</li>
</ul>

Produces the output below:

The State College of Florida

  • F2017 CGS 2820C Web Page Development (A)
  • F2017 COP 2170 Visual BASIC (B)
See Notepad Tutorial: Lists
20 pts

<ul>

Add real and relative content

If you know how - it is best to use an external stylesheet to define all <ul> tag styles for a site. We will cover external stylesheets shortly

list-style-image:url
This variation of the <ul> tag uses a small image instead of bullets or squares or circles.

Note: This Transcript and References assignment is designed to be both instructive and potentially of personal value to you. If for some reason you currently do not have professors who would recommend you consider stating:

  • To Be Provided Later
    Or
  • Future Name to be Announced
Add an Unordered list to the middle of on your Transcript page that uses a list-style-image:url and displays professors who have agreed to give you letters of recommendation. Find and be sure to upload an appropriate image, but do not use the pointing image shown below.

For example, the code below:
<h4>Professors who agreed to give me a recommendation</h4>
<ul style="list-style-image:url(images/point.gif)">
  <li> Professor Allan Adams, Art Department</li>
  <li> Professor Ben Baker, Biology Department</li>
</ul>

Produces the output below:

Professors who agreed to give me a recommendation

  •   Professor Allan Adams, Art Department
  •   Professor Ben Baker, Biology Department
20 pts

<ul> url for an image instead of a bullet

Add real and relative content

<ol>
Ordered List:
1, 2, 3 or I, II, III or A, B, C

Styles:
Default is 1, 2, 3, 4
upper-roman
lower-roman
upper-alpha
lower-alpha
decimal
Add an Ordered list, with your choice of a list-style type, on the bottom your page to display at least two personal or business References.

For example, the code below:
<h4>References</h4>
<ol style="list-style-type: lower-roman">
  <li>Cindy Calloway, Supervisor ABC Inc, 941 555-1456</li>
  <li>Debra Doonan, Owner XYZ corp, 941 555-1243</li>
  <li>Ernie Eiger, Manager Micky D's. 941-9876</li>
</ol>

Produces the output below:

References

  1. Cindy Calloway, Supervisor ABC Inc, 941 555-1456
  2. Debra Doonan, Owner XYZ corp, 941 555-1243
  3. Ernie Eiger, Manager Micky D's. 941-9876
See Notepad Tutorial: Lists
20 pts

<ol>

Add real and relative content

Do not just "do" this assignment. Do it well.

Unordered Lists are commonly used with the <nav> tag element to facilitate responsive web designs for mobile devices, tablets and desktop PCs. The code below will produce a simple responsive navigation displaying vertical block navigation for smartphones and horizontal inline navigation display for larger screens. It uses a media query in the stylesheet.

Note the Responsive CSS:
display:block for mobile
display:inline for PCs
Note the Media Query to modify display for different devices.
View in your browser, then resize the window after you use the code at right to see how it responds.
Modify the code at right by adding your own font styles, colors and background colors.
In the stylesheet, define mobile devices first:
nav {width:100%; text-align:center}
nav a {display:block; width:20%}
/* display:block = top to bottom */
nav li {list-style:none}
nav li a {border:2px #AAA solid; padding:6px}
@media only screen and (min-width:640px){
nav a {display:inline}
/* display:inline = left to right */
nav li {display:inline; padding:0 18px}
} /* Close 640 Media Query for larger screens */


In the body:
<nav>
<ul>
 <li><a href="index.htm">
Home</a></li>
 <li><a href="resume.htm">
Resume</a></li>
 <li><a href="contact.htm">
Contact</a></li>
</ul>
</nav>
10 pts
<ul> & <li> for <nav>

Add your color and your font styling to <nav> in css
Use px, em, %
somewhere on the Transcript page.
Sizes
px: (pixel) the default size. Ex: width:780px; or padding:4px; or border:2px;
pt: (points) There are 72 points to an inch. A typical font size is 12pt, a heading may be 24pt.
em: (size of the capital letter M)  provides better relative sizing. Ex: font-size:1.3em
%: (percent) Ex: width: 80%;
10 pts
px & em & %
<sub>
Make text subscript
<sup>
Make text superscript
<small>
Make text small, kind of like legal print
Use the <sub> tag to make some text subscripted
<p>Add H<sub>2</sub>O to make it wet</p>

Add H2O to make it wet

Use the <sup> tag to make some text superscripted
10 pts
<sub> <sup> <small>
Special characters are characters and symbols that are not on the typical keyboard such as the cent sign or degree symbol or copyright symbol.

 

Add at least two (2) different special characters on your home page. For example: &copy; displays the copyright symbol.
Copyrighted © by Floyd Jay Winters
Use a span around the special characters to make them purple, bold and 1.3 times their normal size, so that I can easily find them, and you will feel comfortable with the <span> tag. See above and below:
color:purple; font-weight:bold; font-size:1.3em
See Notepad Tutorial: Special Characters
10 pts (5 pts each)

Special Characters, Examples:
&amp; &
&copy; ©
&nbsp;

Note the ; at end of each special character
Note 1: Once the grade for this project has been recorded in the assignment dropbox you can delete the items that you may not want on your home pages, such as the lists, or the subscript, superscript, or the special characters.
Note 2: A wise person will keep multiple backups of their files. Ctrl + C (copy) and Ctrl + V (paste) is very easy. You can back up your individual files that way, or even an entire folder.
Make transcript.htm look attractive with real content. It will have the same masthead, styles and navigation as your home page.
Add real and relative content, color, images and styles. Make it look like a college student is working on this project.
Link transcript.htm to the bottom of resume.htm
Upload to the canvas dropbox Subject box the full address path,
such as: http://YourSiteName.com/transcript.htm
(10)

Make sure it works. Test it on your cell phone and multiple browsers.
Deprecated (outdated and replaced) tags will not be accepted in this course.
ALL tags should be in lower case.
Do NOT use: <center>, <font>, or the bgcolor attribute.
Use instead: <h3 style="text-align:center; font-family:arial; background-color:#FF0">
Or even better, add the following to your stylesheet:
h3 {text-align:center; font-family:arial; background-color:#FF0}
-5 for each use
Test on multiple browsers: such as IE, FireFox, Chrome, Safari.

1. Use a File Manager or FTP to transfer your .htm files to the public_html folder of your online website. 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 (http://yourDomain/transcript.htm) into the Message portion of the SCF Canvas [Assignment Dropbox] for this assignment.

You can use your hosting company's File Manager to upload your files. However, it is far easier for you to use a program like FileZilla, and it is even better to use an HTML editor like Expression Web, or Dreamweaver to FTP it to your remote server.

I suggest using the Free version of Expression Web and Site Setup. You will use the cPanel UserName and Password with the Site Setup Publishing tab.

When done unploading, paste the complete URL address of your project into the Title and Message portion of the SCF Canvas [Assignment Dropbox] for this assignment so that I can easily copy and paste it into my browser when I grade it.
-This project will not be graded if is is not live
Online and, uploaded to your own website.

You will lose 3 points for each day late.

General Check List:
HTML 5 DOCTYPE
Same Masthead for all pages
Same Nav for all pages
Same Styles for all pages
Centered page on monitor, (do not center all content)
Upload the entire URL, i.e.:
http://yourdomain.com/transcript.htm
General Check List:
Unique page specific <title> for Transcript
Unique page specific Meta Description for Transcript
Unique page specific <h1> for Transcript heading
Comment for all closing </divs>
No deprecated tags like <center> or <font>
No spaces for file or image names.
To check your code: Right-click and View Source in FireFox. Errors will show in red. at least -5 points for each error.
You will lose between 3 to 10 points for any of the items to the left that you overlook.
There is an entire chapter in one of the online eBooks on Domain names, FTP, uploading and hosting.
See http://faculty.scf.edu/winterf/0ClassFolders/2820Web/eBook-Springer/HTML/Murphy07Hosting.pdf
But for a short pictorial tutorial and video see: FireFTP
The root folder of your actual local (USB thumb drive or C:\Users\UserName\Documents\My Web Sites\YourDomainName) and the pubic_html folder in the remote (webserver) website should look now like this:
 images      [Dir] This is a subFolder - All images except possibly favicon.ico go here 
   favicon.ico This is often in the images folder
   index.htm Your Home page (usually must be in lower case)
   resume.htm  
   transcript.htm A transcript page using unordered and ordered list.
   yourSiteName.css Your external stylesheet