Lists and Characters

CGS 2820C
Web Development #07 Grading Criteria for: Lists and Special Characters
Name this page transcript.htm and upload it to your website. Link transcript.htm to your Nav or to 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 or your main Nav. The transcript.htm page will have the same <nav> navigation, <header> masthead/banner and External cascading stylesheet (.css) as your Home page and Resume.
Your <nav> for all pages will eventually contain:
Home | Resume | Portfolio | Newsletter | Contact
But because the transcript is not a main page, adding transcript.htm to your main <nav> is optional.

NotePad Tutorials: Lists | Special Characters

Short Interactive Tutorials:

W3Schools Lists Tutorial:

W3Schools Symbols Tutorial:

W3Schools Entities Tutorial:

W3Schools Characters Tutorial:

W3Schools Emojis Tutorial:

Try It Yourself

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. The navigation should be attractive and professional, with a hover effect. Consider a font size between 1.5 and 2em without underlined links.

Below is one way to save time and also make your pages consistent:

Save your refined index.htm as transcript.htm so it will have the same <header>, <footer>, <nav>, and css...
Delete the specific content from the index page.
Make sure the <title> tag, <meta> tags and <h1> are changed to be specific to the transcript page.
Place the transcript content within the <main> element inside the <body>.
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.

This is a Web Development class. By now you must have a live online website.
Your assignment will not be graded if it is not live, on your website.

Free Online HTML Tutorials

Interactive W3Schools Lists Tutorial
Notepad Tutorials: Lists | Special Characters
Also see Favicon Tutorial and Favicon Generator

For an example of HTML structure and a stylesheet:
CascadingStylesheetDemo.htm

Make sure you MEET ALL GRADING CRITERIA below.

Topic Directions Points

You still need
A unique <title> briefly describing your page
Meta Description: <meta name="description" content="Longer Page Description">
The same Stylesheet: <link href="SiteName.css" rel="stylesheet" type="text/css">
The same <nav>, <header> <footer> and stylesheet (.css) as your Home page and Resume
A comment for each closing </div> Example: </div> 
If you do not have a security certificate your URL/Web address is http://site.com, not https://site.com Points
-5
-5
-10
-10
-3
-1

<ul>
Unordered List, such as bullets or squares

List-Styles:
Default is disc (a bullet)
square
circle

In DreamWeaver: Insert | Unordered List

To REFRESH your browser to see changes:
Tap F5 or the Refresh icon to refresh your HTML code after you upload a revision.
But you also may have to refresh your CSS code.
To refresh your CSS code:
Right-click and choose View Source.
Look for the link to your Cascading Stylesheet in your HTML file. For instance:
<link href="yourSite.css" rel="stylesheet" type="text/css">
Click on the underlined link to open your CSS file online.
Tap F5 or Refresh to refresh your CSS file.

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:
<h2>The State College of Florida</h2>
<ul style="list-style:square">
<li>F2022 CGS 2820C Web Page Development (A)</li>
<li>F2022 COP 2170 Visual BASIC (B)</li>
</ul>

Produces the output below:

The State College of Florida

F2022 CGS 2820C Web Page Development (A)
F2022 COP 2170 Visual BASIC (B)

See Notepad Tutorial: Lists

20 pts

<ul> with list-style

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

(p 66-70)

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:
<h2>Professors who agreed to give me a recommendation</h2>
<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

10 pts

<ul> with list-style-image instead of a bullet

Add real and relative content

(p 334)

<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, (but do not use the default 1, 2, 3) on the bottom your page to display at least two personal or business References.

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

Produces the output below:

References

Cindy Cowen, Supervisor ABC Inc, 941 555-1456
Debra Doonan, Owner XYZ corp, 941 555-1234
Ernie Eiger, Manager Micky D's. 941-987-6543

See Notepad Tutorial: Lists

10 pts

<ol>
Not default 1, 2, 3

Add real and relative content

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

Find someway to use the start= atribute
2 points

(p 65)

Description lists are used to list terms and their descriptions <h2>Certifications</h2> <dl>
<dt>MOS</dt>
<dd>Microsoft Office Specialist (Word and Excel)</dd>
<dt>Net+</dt>
<dd>Certified Network Technician (CompTIA)</dd>
</dl> 10 pts
<dl>

(p 67)

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 Nav CSS:
display:block for mobile/phone
display:inline for PCs
Use a Media Query to display the nav appropriately for different devices.

View in your browser, then RESIZE THE WINDOW (drag the side so it is narrower/wider) after you use the code at right to see how it responds. If you correctly add the Viewport and code the Media Query, the Nav should be horizontal on a PC and vertical in portrait on a smart phone or a resized narrow window on a PC.

Modify the code at right by adding your own font styles, colors and background colors.

For Responsive Design, to set the width of the viewport to the width of the device, add to the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

In the stylesheet, define mobile devices first:


	nav {width:100%; text-align:center}

	nav a {display:block; width:30%;
text-decoration:none;}
/* 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>

Note: this is just one part of Responsive Web Design

10 pts
<ul> & <li> for <nav>

Add your color and your font styling to <nav> in the external css

Organize your external css and html for the current HTML5 elements:
<header>
<nav>
<main>
<footer>

10 pts:
Resize the window to confirm Nav is responsive: @media

The nav on a desktop will be horizontal. The nav on mobile device will be vertical

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 & %

(p 274)

<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 H₂O to make it wet

Use the <sup> tag to make some text superscripted

10 pts
<sub> <sup> <small>

(p 46)

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. For example: © 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

There is a ; at end of each special character

(p 193-194)

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 webpage, 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 <header> masthead, <footer>, <nav>, and linked css file as your home page and resume 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 a desktop, and 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.

Create your code according to current HTML 5 standards. 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

Organize your css and html for the current HTML5 elements:
<header>
<nav>
<main>
<footer>

Test on multiple browsers: such as Edge, FireFox, Chrome, Safari and on a smart phone.

Use a File Manager or FTP to transfer your .htm files to the public_html folder of your online website.

When done uploading, paste the complete URL website address (http://yourDomain/transcript.htm) 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 Stylesheet for all pages
Centered page on monitor, but 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 <meta name="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.

The root folder of your actual local 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 under the root folder. *All* images except possibly favicon.ico go here
favicon.ico	This is often in the images folder. See Favicon Tutorial and Favicon Generator
index.htm	Your Home page (usually must be in lower case)
resume.htm	Your resume in two columns
transcript.htm	A transcript page using an unordered, an ordered list and a description list
yourSiteName.css	Your external stylesheet linked from all three html files.