#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
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
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
Selectors are style names given to elements in a stylesheet. They use this syntax:
Masthead content, such as a banner image, logo, or website name goes here...
<a href="index.htm">Home</a> |
<a href="resume.htm">Resume</a> |
Main content goes here, such as paragraphs or images.
You could use the <section> instead of <main>
Start an Internal Stylesheet is placed within the
First, set at least 4 existing Tag Selector properties: such as body, h1, h2, p, hr
Note1: Content is not placed within the
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
The basic structure is:
For a live sample showing the html/css structure, see:
|Remove all the Inline styles from the previous assignments.
Create a single Internal Stylesheet within the
If your first line of code is
/* Width/Margin to center page on screen */
/* if Tahoma font not found, use Geneva */
Set your own attractive colors and fonts and styles.
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.
Second, define and set properties for at least 2 ID Selectors (#) that are used with
Use the newer HTML5 semantic elements instead
of creating many of your own ID.
|Define and set your own custom properties in the Internal Stylesheet for
/* Tags and Elements defined below */
/* IDs are defined below */
Define and set properties for at least 2 ID Selectors, such as
|Structure your site and use most of the following HTML5 elements on your page: <header> <nav> <main> <section> <footer>||10 pts|
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.
(10 pts each)
Define and set properties for at least 2 Class Selectors
Used to make settings to a division or section of a web page, such as a
(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>
Other divs and semantic elements go inside the wrapper
</div> <!-- / wrapper -->
Facebook | Twitter | YouTube ...
</div> <!-- / social -->
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.
Notice the class .important was defined above in the internal stylesheet.
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:
Below is an example of an HTML comment that is ignored by the browser and not displayed on the screen:
</div> <!-- / wrapper -->
Use at least 2 stylesheet comment: /*
1 pt each
|In the end your pages should be organized like the structure shown at
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.
<meta name="description" ...
<style> ... </style>
<link href="sytles.css" ...
Logo and other info
Nav links go here
<p>More Paragraph content<p>
Copyright and Footer info here
</div> <!-- /wrapper -->
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:
|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.)
Code for CGS2820 Syllabus favicon (in
See Notepad Tutorial: Favicon
1. open image
|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
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
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.
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])
|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.