Internal Stylesheets and Divs

CGS 2820C
Web Development #05 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. All pages should have college level content. We are still adding to index.htm, which is the same file used for the first three assignments. Use realistic text, links, and images. Do not use sample or "lorem" filler text for your submission for a grade

This assignment must be online. See: GoDaddy_FileManager_and_FTP_clients.pdf

It is highly suggested that you have a folder called YourDomainName.com 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.

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. See Sample Div page with Wrapper ID.

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>
Syntax: Tag {property: value; property: value; }
Examples:
<style type="text/css"> /* this is an Internal stylesheet in the head tag */
   body {width:1000px; margin:auto} /* center page on screen (set between 800 to 1200px) */
   h1 {font-family:Arial, Helvetica, sans-serif; text-align:center; color:#036} /* dark blue */
   img {max-width:100%; height:auto} /* for Responsive Website Design, resize images */
   header {background-image:url(images/banner.jpg); background-color:#ccc} /* silver */
   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 header, nav, h1, h2, hr, p or img tags in the 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 #.
They should not be reused - that is only use a particular ID one time per page.
Syntax: ID {property: value; property: value; }
Examples:
   #wrapper {background-color:#FFF; border: 2px #009 solid} /* dark blue border */
   #social {background-color:#FF0; border: 2px #009 solid} /* yellow with dark blue border */

In the <body> the IDs are called with the syntax id="idName" as shown with the wrapper ID that surrounds the content in the body 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 with 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...
     Set in your stylesheet - background-image:url(images/banner.jpg)
   </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>

<footer>
   Footer info such as author and copyright goes here
   </footer>
</div> 

</body>

   Closing Comments are added after each closing Div

3. Class Selectors are custom named and defined styles that may be reused multiple times per page. 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

Interactive W3Schools Styles Tutorial
Interactive W3Schools Classes Tutorial
Interactive W3Schools ID Tutorial
Notepad Tutorials: Styles
Simple Div Page Demo with Wrapper ID
Simple HTML5 Element Demo with Nav
Win Web Tutor | HTML Tags | Favicon

Make sure you MEET ALL GRADING CRITERIA below.

Topic Directions Points

<style>
Start an Internal Stylesheet that is placed within the <head> tags, under the <title> tag, and usually follows the <meta> tags. External stylesheets are preferable and may be used instead, but this is only an intro assignment.

First, set at least 4 existing Tag Selector properties: such as body, header, 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 you typically only use one <style> tag per webpage. The <style> tag is placed within the opening and closing <head> tag.

The basic structure is:


		<html>
			
		<head>

		  <title>Page Title</title>

		  <meta name="description"... >

		  <style>internal styles</style>

		</head>

		<body>
			
		  <header> banner image </header>

		  <nav> Menu Navigation </nav>

		  <main> or <section>

		  Main page content. H1, P tags...

		  </main> or </section>
			
		<footer> © / phone </footer>

		</body>
			
		</html>

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.

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

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.

(p 236)

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">

(p 187)

Structure your site and use most of the following HTML5 elements on your page: <header> <nav> <main> <section> <footer> 10 pts
(p 432-533)

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)
<.class="...>

Define and set properties for at least 2 Class Selectors in the stylesheet and use both classes in the body.

(p 184)

.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

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

<div id="social">
Facebook | Twitter | YouTube ...
</div> 

Add Closing Comments after each closing Div

15 pts
<div>

Required:
Comment every closing div tag as shown. -3pts for each missing 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>

5 pts
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.

In place of the internal stylesheet you can link to an external stylesheet:
<link href="styles.css" rel="stylesheet" type="text/css">

Note: Using margin:auto with a body width will center your page on the screen. <!DOCTYPE html>
<html>
<head>
<title>Title here</title>
<meta name="description" content="Site Description">
<style>
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}

/* ***** IDs Below ***** */
#wrapper {border: 2px #009 solid}

/* ***** Classes ***** */
.important {color:#C00} /* darker red */
</style>
</head>

<body>
<div id="wrapper">
<header>
Logo and other info
</header>
<nav>
<a href="index.htm">Home</a> |
<a href="resume.htm">Resume</a>
</nav>
<main>
<h1>Heading here</h1>
<p>Paragraph content</p>
<p>More Paragraph content</p>
</main>
<footer>
Copyright and Footer info here
</footer>
</div> 
</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

See Photo to create:
images/PhotoFiltre-favicon.jpg

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

See Photo: images/PhotoFiltre-favicon.jpg

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.
VS Code spellchecks for you and underlines flagged words in blue. - 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.

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.

There are TWO GoDaddy usernames and PASSWORDS. One is for your GoDaddy account. The other set of credentials is for the cPanel for the GoDaddy File Manager or if you use another app like FileZilla.
To use the GoDaddy File Manager:
Login > My Products > Hosting > Manage > [cPanel] > File Manager > public_html
To see your cPanel settings for your FTP credentials needed for the free FileZilla:
Login > My Products > Hosting > Manage > under Setting you will see your cPanel/FTP login and also the Password textbox.

FileZilla, is a great drag and drop application to FTP (File Transfer Protocol) to upload files to the remote server or host. This free popular program will remember your UserName, Password and the local and remote folder locations.
A. Downloading FileZilla FTP client:
    https://filezilla-project.org/download.php
B. Configuring files with FileZilla:
    https://youtu.be/Jo-9l3ceo1I (1:55)
C. Uploading files with FileZilla:
    https://youtu.be/y-_BPfKclh8 (1:34)

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 it is not live, Online and, uploaded to your own website.

See:
FileManager & FTP.pdf

You will lose 3 points for each day late.

Consider testing it on your cell phone.

Test your site on multiple browsers: such as Edge, FireFox, Chrome, Safari and your cell phone. 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. -5 points for each error. (Later -10pts). Note: the html line in red may be OK, but it may be flagged due to an error above it.

Test your site on multiple browsers: such as Edge, FireFox, Chrome, Safari. Also test on your smart phone.

Make sure your finished resume is attractive and complete, fills a full page and will reflect well on your abilities.

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)