Home   CGS 2820C
  Web Development
#04 Grading Criteria for: Internal Stylesheet and Divs
Modify the file created in your first assignments, save it as index.htm and upload it to your website.

Description: This is a continuation of your first assignments as you build a 5-page "portfolio" Business or Personal website for yourself or for a real or perspective client. All pages should have college level content.

It is highly suggested that you have a folder called YourDomainName.com in both your USB thumb drive and in C:\Users\UserName\Documents\My Web Sites folder. Have an images folder in your YourDomainName.com folder. All your files - index.htm, portfolio.htm, resume.htm - will be stored in YourDomainName.com and each image is stored in the images folder. Later, you can drag a copy of this folder from your hard drive to your USB thumb drive as a backup to take to class.

The <span> tag formats a smaller section of a page. For example: This is a <span style="color:blue">blue</span> word.

The <div> tag defines a division or a section in a webpage, such as a wrapper div (to surround the main content so that it can have a consistent border or size) or a social div for Facebook, Twitter and YouTube, or a column1 and column2 div... The <div> tag is used to group block-elements to set their format properties in a stylesheet.

An Internal Stylesheet is used to set desired format properties for existing HTML tags or to define custom selectors. Internal Stylesheets are defined within the <head> section of a web page.

Selectors are style names given to elements in a stylesheet. They use this syntax: Selector {Property: Value}
Examples: body {width:900px; margin:auto} or .important {color:red} or #masthead {background-color:#9FC}
There are 3 main types of selectors used with cascading styles.
1. Type Selectors - Existing HTML tags. Such as: <body> or <h1> or <p> Examples:
 <style type="text/css"> /* this is an Internal stylesheet in the head tag */
   body {width:1000px; margin:auto} /* center page on screen */
   h1 {color:#036; font-family:Arial, Helvetica, sans-serif; text-align:center}
   img {max-width:100%; height:auto} /* for Responsive Website Design */
   header {color:#FFF; background-color:#369} /* dark blue on light yellow */
   nav {text-align:center; padding:12px; background-color:#CCF} /* light grey blue */
   main {color:#009; background-color:#FFC} /* dark blue on light yellow */
   footer {color:#FFF; background-color:#369; font-size:10px; height:30px; text-align:center}
 </style>
Unless there is an inline style or internal stylesheet to override the properties above, all h1, p or img tags in the web page or website will inherit the properties defined in the external cascading stylesheet.

2. ID Selectors are typically used in a stylesheet to define a division on a page. They start with a #. Examples:
   #wrapper {background-color:#FFF; border: 2px #009 solid} /* dark blue */
   #social {background-color:#FF0; border: 2px #009 solid}

In the <body> the IDs are called with the syntax id="idName" as shown with the wrapper ID that surrounds the content below. (You can copy and paste the styles above into the head section, and paste the divs below into the body section and easily test this code.) Structure your site and use the semantic HTML5 elements below (<header> <nav> <main> <section> <footer>) on your page.

<body>
   <div id="wrapper">
   <header>
     Masthead content, such as a banner image, logo, or website name goes here...
   </header>

   <nav>
     <a href="index.htm">Home</a> |
     <a href="resume.htm">Resume</a> |
     <a href="contact.htm">Contact</a>
   </nav>

   <main>
     <h1>Main Heading</h1>
     Main content goes here, such as paragraphs or images.
     You could use the <section> instead of <main>
   </main>

<div id="social>
   Facebook | Twitter | YouTube links may go here...
</div>  <!-- close social-->  

<footer>
   Footer info such as author and copyright goes here
   </footer>
 </div> <!-- close wrapper-->
</body>

3. Class Selectors are custom named and defined styles. They start with a period (.)  Examples:
   .chapterTitle {font-size:28px; font-weight:bold}
   .important {color:red; font-weight:bold}
   .highlight {background-color:#:#FF9} /* (yellow) */
In the actual HTML code classes are called in the following manner:
<span class="chapterTitle">Chapter 1</span> or <p class="important">Notes:</p>

Free online HTML Tutorials:
Notepad Tutorials:| Styles | Simple Div Demo with Nav
Win Web Tutor | HTML Tags | Favicon
w3schools HTML Tutorials and sample Quizzes
Topic Directions Points
<style>
Start an Internal Stylesheet is placed within the <head> tags, under the <title> tag, and usually follows the <meta> tags. External stylesheets are preferable, but this is only an intro assignment.

First, set at least 4 existing Tag Selector properties: such as body, h1, h2, p, hr

Note1: Content is not placed within the <head> section. However, info about the content or the way content is displayed (style) is placed within the <head>.

Note2: It does not look professional to center all the content on the page.

Note3: You may have multiple styles defined, but only use one <style> tag per webpage. The <style> tag is placed within the opening and closing <head> tag.

The basic structure is:
<header>
<nav>
<main> or <section>
<footer>

For a live sample showing the html/css structure, see:
.../DivDemo-VerySimpleNav.htm

Remove all the Inline styles from the previous assignments.
Create a single Internal Stylesheet within the <head> tags and set existing Tag Selector attributes for at least four (4) different HTML tags.
Set the <body>, <h1>, <img>, and <p> properties for such attributes as background-color, width and font... Also set the style properties for at least one other HTML tag, such as nav, footer, h2, h3, hr...

If your first line of code is <!DOCTYPE html> then setting a body width and a body margin attribute will center your webpage.

For example:
<style type="text/css">
/* Tags and Elements defined below */

 body {width:1000px; margin:auto; background-color:#FFC;}
/* Width/Margin to center page on screen */
 h1 {color:blue; font-family:Arial, sans-serif}
 p {font-size:14px; font-family:Tahoma, Geneva}
/* if Tahoma font not found, use Geneva */
 img {max-width:100%; height:auto}
 header {background-color:#369 }
 nav {text-align:center; padding:12px; background-color:#CCF} /* light grey blue */
 main {color:#009; background-color:#FFC} /* dark blue on light yellow */
 footer {color:#FFF; background-color:#369; font-size:10px; height:30px; text-align:center}
</style>
</head>
Set your own attractive colors and fonts and styles.
20 pts
<style>
Set tag attributes
No Inline styles

Set existing Tag Selector properties for 4 different tags.

Just use one internal stylesheet for all internal styles, which means only use the open <style> tag one time.

Center the page on the screen, but do not center all or even most of the page's content.

If you know how - feel free to use an external stylesheet instead of an internal stylesheet. We will cover external stylesheets shortly.

Continue Internal Stylesheet

Second, define and set properties for at least 2 ID Selectors (#) that are used with divs, such as wrapper (for everything), or column1, column2, or social for your Social Navigation, Navigation (menu), Content, LeftColumn, RightColumn, Footer...

Use the newer HTML5 semantic elements instead of creating many of your own ID. Such as:
<section> instead of #content
<aside> instead of #RightColumn
<footer> instead of #footer

See: NotePad_Tutorials/Html5.htm

Define and set your own custom properties in the Internal Stylesheet for #wrapper or #social and at least two other ID Selectors or HTML5 elements.
For example:
<style type="text/css">
<style type="text/css">
 /* Tags and Elements defined below */
...
...
 /* IDs are defined below */
#wrapper {background-color: #FFF; border: 2px #009 solid} /* dark blue */
#social {color:#FF0; background-color:#009}
#column1 {background-color:#FFC}
20 pts

Define and set properties for at least 2 ID Selectors, such as
<div id="wrapper">

Structure your site and use most of the following HTML5 elements on your page: <header> <nav> <main> <section> <footer> 10 pts
Continue Internal Stylesheet

Second, define and set properties for Class Selectors (#) that are used to define named custom styles such as .important, .signature, .keyterm, .caption, .box, .line., .chapter...

 

Define and set properties in the Internal Stylesheet for at least 2 custom user-defined Class Selectors, such as .important.
For example:
<style type="text/css">
 /* Tags and Elements defined below */
...
...
 /* IDs are defined below */
...
...
 /* Classes are defined below */
 .important {color:#C00} /* darker red */
 
.highlight {background-color:#:#FF9} /* (yellow) */
</style>
20 pts
(10 pts each)

Define and set properties for at least 2 Class Selectors
<div>
Used to make settings to a division or section of a web page, such as a wrapper or social or column1, column2 or ....

(Later your div tags will be used with section IDs defined in your external Cascading Stylesheet.)

Also structure your site using the semantic HTML5 elements:
<header> <nav> <main> <section> <footer>

<div> is for a big section, like a portfolio column or a wrapper
<span> is often for a few words, perhaps inside another tag.
Use the <div> command to set at least two (2) separate sections of your web page using each ID defined in the Internal Stylesheet.
For example:
<div id="wrapper">
   Other divs and semantic elements go inside the wrapper
</div> <!-- / wrapper -->

<div
id="social">
  
Facebook | Twitter | YouTube ...
</div> <!-- / social -->
15 pts
<div>

Required:
Comment every closing div tag as shown. -3ps for each missing comment.

.className
Use the .classNames in the body of your page. Classes are defined in stylesheets and begin with a period (.)
Use all of the user-defined classes in the body of your page.
Example:
<p class="important">Read this</p>.
or
Please <span class="important">read this</span> memo.
Notice the class .important was defined above in the internal stylesheet.
10 pts
<span class="...>

Use the .classNames defined in the Internal Stylesheet

Use at least one <span> tag
<!-- comment -->
A comment is a remark or note used to document how or when or why something was done within a web page. It is for documentation only, and is ignored by the browser and not displayed on the screen.
Below is an example of a stylesheet comment that is ignored by the browser and not displayed on the screen:
/* 2 lines above: center page on screen */
</style>


Below is an example of an HTML comment that is ignored by the browser and not displayed on the screen:
</div> <!-- / wrapper -->
5pt
Use at least 2 stylesheet comment: /*

1 pt each
Use at least 3 HTML comments: <!-- You need a comment for each closing Div.

In the end your pages should be organized like the structure shown at right.

This is very straight forward and logical.
Notice how tags are nested (see matching colors).
Notice there is no "Content" in the <head> tag, which is different from the <header> element in the body.

You can either create an internal stylesheet in the <head>, or if you know how, you can link to an external stylesheet from within the <head>.

You must understand this and have it down pat in order to successfully complete your hands-on midterm exam and hands-on final exam.

In the meantime, you can actually copy it as a template and fill in your real content as you set up your page.
<!doctype html>
<html>
<head>
  <title>Title here</title>
  <meta name="description" ...
  <style> ... </style>

  or
  <link href="sytles.css" ...
</head>
<body>
<div id="wrapper>
<header>
   Logo and other info
</header>
<nav>
   Nav links go here
</nav>
<main>
  <h1>
Heading</h1>
  <p>Paragraph content<p>
  <p>More Paragraph content<p>
</main>
<footer>
   Copyright and Footer info here
</footer>
</div> <!-- /wrapper -->
</body>
</html>
 
<link href="images/favicon.ico"

A 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 a spider web in the left corner of the URL/Address box and on its tab in most browsers.

You can see a favicon by typing:
http://yourdomain/images/favicon.ico

Create your own icon. You can use certain art programs to custom create one (like PhotoFiltre: Tools > Export as icon) or download an icon maker to create your favorite icon.  It must be named favicon.ico. Most hosts store the favicon in the images folder. (Some sites store it in the root folder, for instance the Web hosting company, GoDaddy, puts a default favicon.ico in the root folder.)
See: http://www.xiconeditor.com/
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">

See Notepad Tutorial: Favicon
Extra fun:
Favicon

1. open image
2. crop image
3. size as square
4. edit image
5. resize to 32x32
6. in PhotoFiltre:
Tools >
Export as icon

Make this version of index.htm look attractive with real content. This will be your real site in a short while. Add real and relative content, color, images and styles. Make it look like a college student is working on this project. (10)
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. You will lose at least 3 points for each error for the first assignments.
Continue to copy and paste your browser preview into Word to spellcheck.
- 5 points for each error or spelling mistake
Deprecated (outdated and replaced) tags will not be accepted in this course.
ALL tags should be in lower case.
Do NOT use deprecated or obsolete <center>, <font>, or the bgcolor attribute.
Use instead: <p style="text-align:center; font-family:arial; background-color:#FF0">
Almost all styles should really be defined in the stylesheet.
-5 for each use

ALL tags should be in lower case.
Note: 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.
Test on multiple browsers: such as IE, Edge, FireFox, Chrome, Safari and your cell phone.

1. Use a File Manager or FTP to transfer your index.htm file and other .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 into the Message portion of the SCF Canvas [Assignment Dropbox] for this assignment.

At this point, one of the easiest ways to upload your files to your website is to use a program like FileZilla to FTP it to your remote server.

(When using the GoDaddy cPanel, you may have to navigate to public_html on the remote site and set the Connection tab settings to [Use Current])

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.

Consider testing it on your cell phone.

For directions for how to use NotePad++ FTP click: nppFTP
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
The root folder of your actual local (USB thumb drive or C:\Users\UserName\Documents\My Web Sites\YourDomainName) 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)