Cosmonauts working on the ISS - Image Credit: NASA
Assignment 1 Page Setup and Basic Tags
Assigned: January 17, 2017
Due: January 27, 2017
Below is an image of a web page. Using the tags you learned about in the video ( click here to watch the Page Setup and Basic Tags Video), build a new web page that has all of the appropriate set up tags and whatever format tags are needed to recreate that web page. When you are finished your page should look like the one in the image.
Your page should be named assignment1_YOURINITIALS.htm where you substitute in your initials. For example, if this were Bill Bailey's assignment he would name the document assignment1_bb.htm.
Use Heading 3 tags for the heading.
Your document needs to be e-mailed to Mr. Gwin (jgwin@mvcsonline.com) no later than Friday, January 27, at midnight. Be sure to use your class e-mail account to send the file.
Due: January 27, 2017
Below is an image of a web page. Using the tags you learned about in the video ( click here to watch the Page Setup and Basic Tags Video), build a new web page that has all of the appropriate set up tags and whatever format tags are needed to recreate that web page. When you are finished your page should look like the one in the image.
Your page should be named assignment1_YOURINITIALS.htm where you substitute in your initials. For example, if this were Bill Bailey's assignment he would name the document assignment1_bb.htm.
Use Heading 3 tags for the heading.
Your document needs to be e-mailed to Mr. Gwin (jgwin@mvcsonline.com) no later than Friday, January 27, at midnight. Be sure to use your class e-mail account to send the file.
Assignment 2 Setting the Table
Assigned: January 17, 2017
Due: January 27, 2017
Using the tags you learned about in the video ( click here to watch the Setting The Table video), build a table that shows YOUR class schedule for this semester. It should have a top row that labels the information in each column, and one additional row for every period of the day. There is an image below to serve as an example.
The column information should be as follows:
Your page should be named 'assignment2_YOURINITIALS.htm' where you substitute in your initials.
Double check your document for proper code and correct spelling!
Your document needs to be e-mailed to Mr. Gwin (jgwin@mvcsonline.com) no later than Friday, January 27, at midnight. Be sure to use your class e-mail account to send the file.
Due: January 27, 2017
Using the tags you learned about in the video ( click here to watch the Setting The Table video), build a table that shows YOUR class schedule for this semester. It should have a top row that labels the information in each column, and one additional row for every period of the day. There is an image below to serve as an example.
The column information should be as follows:
- Column 1 - Period
- Column 2 - Time for Class (use regular day schedule, not chapel schedule)
- Column 3 - Class Name (be sure to include all periods, even if you have teacher assistant or study hall).
Your page should be named 'assignment2_YOURINITIALS.htm' where you substitute in your initials.
Double check your document for proper code and correct spelling!
Your document needs to be e-mailed to Mr. Gwin (jgwin@mvcsonline.com) no later than Friday, January 27, at midnight. Be sure to use your class e-mail account to send the file.
Assignment 3 Setting the Table - Part 2
Assigned: January 23, 2017
Due: February 3, 2017
Using the tags and style attributes/definitions you learned about in the video (click here to watch the Setting The Table - Part 2 video), build a table that looks like the one in the image. Create a three by three table with data cells that all have heights and widths of 125 pixels. Put in the appropriate text for each data cell and then align the text properly to match the image.
Put "Your Name - Formatting Tables" as the title in the header tags (putting your name in) and save the file as assignment3_[your initials].htm.
Double check your document for proper code and correct spelling!
Your document needs to be e-mailed to Mr. Gwin (jgwin@mvcsonline.com) no later than Friday, February 3, at midnight. Be sure to use your class e-mail account to send the file.
Due: February 3, 2017
Using the tags and style attributes/definitions you learned about in the video (click here to watch the Setting The Table - Part 2 video), build a table that looks like the one in the image. Create a three by three table with data cells that all have heights and widths of 125 pixels. Put in the appropriate text for each data cell and then align the text properly to match the image.
Put "Your Name - Formatting Tables" as the title in the header tags (putting your name in) and save the file as assignment3_[your initials].htm.
Double check your document for proper code and correct spelling!
Your document needs to be e-mailed to Mr. Gwin (jgwin@mvcsonline.com) no later than Friday, February 3, at midnight. Be sure to use your class e-mail account to send the file.
Assignment 4 Color Combinations
Assigned: January 30, 2017
Due: February 10, 2017
Using color is an important part of designing web pages. One important part of using color is knowing how to select good combinations of colors for text and background and avoiding bad ones.
First, it's important to understand how to call out colors in HTML. Begin by reviewing the W3 Schools tutorial on color ( Click here to view the page ). Be sure to try out the "Try It Yourself"! Please read the section on Hexadecimal, but if you don't completely understand it, that's OK. We'll be going over it more later.
Next, watch the following videos on color:
The table should be two columns by eleven rows. Use a border of 0 and a cellpadding of 10.
The top row will serve as titles with black text on a white background. The text should be bold. The cells should be 300 pixels wide and 100 pixels high. Text should be aligned center both vertically and horizontally.
The next ten rows will be ten examples of good and bad color combinations. Each cell should have a different color text and background. The text inside should be one or two sentences explaining why the combination is either good or bad. Text should be aligned center both vertically and horizontally.
Put "Color Combinations" as the title in the header tags (putting your name in) and save the file as assignment4_[your initials].htm.
Double check your document for proper code and correct spelling!
Your document needs to be e-mailed to Mr. Gwin (jgwin@mvcsonline.com) no later than Friday, February 10, at midnight. Be sure to use your class e-mail account to send the file.
Due: February 10, 2017
Using color is an important part of designing web pages. One important part of using color is knowing how to select good combinations of colors for text and background and avoiding bad ones.
First, it's important to understand how to call out colors in HTML. Begin by reviewing the W3 Schools tutorial on color ( Click here to view the page ). Be sure to try out the "Try It Yourself"! Please read the section on Hexadecimal, but if you don't completely understand it, that's OK. We'll be going over it more later.
Next, watch the following videos on color:
- Click here to watch the video "What Is Color?"
- Click here to watch the video "How We See Color."
- Click here to watch the video "RGB Color Styles."
- Click here to watch the video "Thinking About Color Combinations."
The table should be two columns by eleven rows. Use a border of 0 and a cellpadding of 10.
The top row will serve as titles with black text on a white background. The text should be bold. The cells should be 300 pixels wide and 100 pixels high. Text should be aligned center both vertically and horizontally.
The next ten rows will be ten examples of good and bad color combinations. Each cell should have a different color text and background. The text inside should be one or two sentences explaining why the combination is either good or bad. Text should be aligned center both vertically and horizontally.
Put "Color Combinations" as the title in the header tags (putting your name in) and save the file as assignment4_[your initials].htm.
Double check your document for proper code and correct spelling!
Your document needs to be e-mailed to Mr. Gwin (jgwin@mvcsonline.com) no later than Friday, February 10, at midnight. Be sure to use your class e-mail account to send the file.
Assignment 5 Lists
Assigned: February 6, 2017
Due: February 17, 2017 HTML comes with a handy built-in system of tags for making lists and outlines. For this assignment you will study how these tags work through W3 Schools.
Read through the page from the link given and use the "Try It Yourself" examples to see how the tags are used.
Click here to view the W3 Schools page on lists .
Next you will build a web page that includes a list like the one shown in the image below. Your page should look the same (take note of bullet types and outline letters/numbers). In the undordered list, subsitute your favorites instead of the ones shown, (for example, if your favorite fruits are apples, strawberries and tomotos, list those insted of 'First Fruit, Second Fruit, etc.) Some text in the image is smaller than the rest, but don't worry about that on your outline. Use H2 tags for the two headings on the page and don't forget to use bold formatting where shown in the image.
Set the title of page to include your name.
Save the file as "assignment5_[your initials].htm".
Your document needs to be E-MAILED to jgwin@mvcsonline.com no later than Friday, February 17, at midnight.
Due: February 17, 2017 HTML comes with a handy built-in system of tags for making lists and outlines. For this assignment you will study how these tags work through W3 Schools.
Read through the page from the link given and use the "Try It Yourself" examples to see how the tags are used.
Click here to view the W3 Schools page on lists .
Next you will build a web page that includes a list like the one shown in the image below. Your page should look the same (take note of bullet types and outline letters/numbers). In the undordered list, subsitute your favorites instead of the ones shown, (for example, if your favorite fruits are apples, strawberries and tomotos, list those insted of 'First Fruit, Second Fruit, etc.) Some text in the image is smaller than the rest, but don't worry about that on your outline. Use H2 tags for the two headings on the page and don't forget to use bold formatting where shown in the image.
Set the title of page to include your name.
Save the file as "assignment5_[your initials].htm".
Your document needs to be E-MAILED to jgwin@mvcsonline.com no later than Friday, February 17, at midnight.
Assignment 6 Fonts
Assigned: February 6, 2017
Due: February 17, 2017
Fonts are a key part of a web site's appearance. They can communicate things about the tone of your site (funny, serious, artistic, technical, etc.), but it's also important to pick a font that is easy to read.
Below are two videos to review before beginning the assignment:
Next, watch the video on the History of Typography again, but this time as you go through make note of four things about fonts that you didn't know before.
Now, take those four things and turn them into questions that you might put on a quiz about fonts! A great way to learn something is to think about questions you might ask someone else about it. That process of considering the information and making questions about it can help you begin to think more carefully about the subject. Type those questions and answers into your page.
Put "Font Quiz Questions" as the title in the head tags and save the file as assignment6_[your initials].htm.
Double check your document for proper code and correct spelling!
Your document needs to be e-mailed to Mr. Gwin (jgwin@mvcsonline.com) no later than Friday, February 17, at midnight.
Due: February 17, 2017
Fonts are a key part of a web site's appearance. They can communicate things about the tone of your site (funny, serious, artistic, technical, etc.), but it's also important to pick a font that is easy to read.
Below are two videos to review before beginning the assignment:
- Click here to watch the video "History of Typography"
- Click here to watch the video "Using Fonts in Web Pages"
Next, watch the video on the History of Typography again, but this time as you go through make note of four things about fonts that you didn't know before.
Now, take those four things and turn them into questions that you might put on a quiz about fonts! A great way to learn something is to think about questions you might ask someone else about it. That process of considering the information and making questions about it can help you begin to think more carefully about the subject. Type those questions and answers into your page.
Put "Font Quiz Questions" as the title in the head tags and save the file as assignment6_[your initials].htm.
Double check your document for proper code and correct spelling!
Your document needs to be e-mailed to Mr. Gwin (jgwin@mvcsonline.com) no later than Friday, February 17, at midnight.
Assignment 7 Hexadecimal Color and CSS
Assigned: February 13, 2017
Due: February 23, 2017
We're going to depart a little bit from design to talk a bit about the beauty of numbers and how different number systems are used by computers. Below are a few videos to review before beginning the assignment:
When you have finished, and before you e-mail your file, arrange to talk to Mr. Gwin in a GoToMeeting session to review your work.
Put "My Class Schedule - Your Name" as the title in the head tags and save the file as assignment7_[your initials].htm.
Double check your document for proper code and correct spelling!
Your document needs to be e-mailed to Mr. Gwin (jgwin@mvcsonline.com) no later than Friday, February 23, at midnight.
Due: February 23, 2017
We're going to depart a little bit from design to talk a bit about the beauty of numbers and how different number systems are used by computers. Below are a few videos to review before beginning the assignment:
- Click here to watch the video "Binary, Decimal and Hexadecimal"
- Click here to watch the video "The Hexadecimal System"
- Click here to watch the video "CSS"
- Change text color using hexadecimal
- Change background color using hexadecimal
- Change font
- Change font weight (bold) and font style (italics) if necessary. (Read the W3 Schools pages on font weight and font style if you need additional help with these.
When you have finished, and before you e-mail your file, arrange to talk to Mr. Gwin in a GoToMeeting session to review your work.
Put "My Class Schedule - Your Name" as the title in the head tags and save the file as assignment7_[your initials].htm.
Double check your document for proper code and correct spelling!
Your document needs to be e-mailed to Mr. Gwin (jgwin@mvcsonline.com) no later than Friday, February 23, at midnight.
Assignment 8 Calendar
Assigned: February 28, 2017
Due: March 10, 2017 READ ALL DIRECTIONS BEFORE YOU BEGIN!
Begin building a web page that contains a calendar for the month of March, 2017.
As a first step, draw a diagram of what the calendar might look like (you may have already completed this in class -- if you missed this discussion in class, ask a fellow student!) and use it to identify six types of data cells: month/year name, day names, weekday cells, weekend cells, special day (holiday, birthday, etc.) and unused days (cells for days that come before or after the month). Build a table in HTML with the necessary data cells and assign them class names (class=______) based on what kind of cell each one will be. Select one or two days to be special days.
Second, set up an in-sheet style section in the head of the document and create a definition set for each of the six class names. Apply the following styles to those six classes:
Put "Calendar - Your Name" as the title in the head tags and save the file as assignment8_[your initials].htm.
Double check your document for proper code and correct spelling!
Your document needs to be e-mailed to Mr. Gwin (jgwin@mvcsonline.com) no later than Friday, March 10, at midnight.
Due: March 10, 2017 READ ALL DIRECTIONS BEFORE YOU BEGIN!
Begin building a web page that contains a calendar for the month of March, 2017.
As a first step, draw a diagram of what the calendar might look like (you may have already completed this in class -- if you missed this discussion in class, ask a fellow student!) and use it to identify six types of data cells: month/year name, day names, weekday cells, weekend cells, special day (holiday, birthday, etc.) and unused days (cells for days that come before or after the month). Build a table in HTML with the necessary data cells and assign them class names (class=______) based on what kind of cell each one will be. Select one or two days to be special days.
Second, set up an in-sheet style section in the head of the document and create a definition set for each of the six class names. Apply the following styles to those six classes:
Styles for MONTH NAME
color:#000099;
font-size:50px;
text-align:center;
vertical-align:middle;
height:75px;
Styles for NAMES OF DAYS OF THE WEEK
color:#000088;
text-align:center;
font-size:16px;
width:100px;
Styles for WEEKDAY CELLS
color:#000099;
background-color:#eeeeff;
width:100px;
height:100px;
text-align:left;
vertical-align:top;
Styles for WEEKEND CELLS
color:#000099;
background-color:#ccccff;
width:100px;
height:100px;
text-align:left;
vertical-align:top;
Styles for EMPTY DAYS
background-color:#cccccc;
width:100px;
height:100px;
Styles for SPECIAL DAYS
Your choice!
Put "Calendar - Your Name" as the title in the head tags and save the file as assignment8_[your initials].htm.
Double check your document for proper code and correct spelling!
Your document needs to be e-mailed to Mr. Gwin (jgwin@mvcsonline.com) no later than Friday, March 10, at midnight.
Assignment 9 Links
Assigned: March 6, 2017
Due: March 17, 2017
Before you begin, watch the following video: This assignment is easy and quick! Create two documents, one named page_one_[yourinitials].htm and the other page_two_[yourinitials].htm. Each page should include a local link to the other (page one links to page two and vice versa). You can put whatever text you would like for the link. Each page should also include a global link. No style is necessary for this assignment. Simply demonstrate that you can make working global and local links!
Double check your documents for proper code and put some text of your choice in the title. Your documents need to be e-mailed to Mr. Gwin (jgwin@mvcsonline.com) no later than Friday, March 17, at midnight.
Due: March 17, 2017
Before you begin, watch the following video: This assignment is easy and quick! Create two documents, one named page_one_[yourinitials].htm and the other page_two_[yourinitials].htm. Each page should include a local link to the other (page one links to page two and vice versa). You can put whatever text you would like for the link. Each page should also include a global link. No style is necessary for this assignment. Simply demonstrate that you can make working global and local links!
Double check your documents for proper code and put some text of your choice in the title. Your documents need to be e-mailed to Mr. Gwin (jgwin@mvcsonline.com) no later than Friday, March 17, at midnight.
Quarter 3 Project 3 Part Calendar
Assigned: March 5, 2017
Due: March 17, 2017
OVERALL PROJECT DESCRIPTION: You will design a small web site consisting of 3 web pages. Each page will be a separate calendar for the months of April, May and June 2017.
Your three page site must meet the following basic requirements:
A project will receive 60% credit (D-F) or lower depending on the degree to which is meets the basic requirements.
A project will receive 70% credit (C) if it fulfills all of the basic requirements.
A project will receive 80% credit (B) if it fulfills all of the basic requirements and also demonstrates use of other styles including color, background-color, font-size.
A project will receive 90% credit (A) if it fulfills all of the basic requirements and also demonstrates use of styles including color, background-color, font-size to design layouts that are comfortable to look at (good color combinations, good use of space between within the cells, etc.).
A project will receive 100% credit (A+) if it fulfills all of the basic requirements and also demonstrates use of styles layouts that are creative and pleasing to look at.
Your documents needs to be uploaded to the Sonblazer server no later than Friday, March 17 at midnight. (We will be discussing server uploading in class, so don't worry about it just yet!)
Due: March 17, 2017
OVERALL PROJECT DESCRIPTION: You will design a small web site consisting of 3 web pages. Each page will be a separate calendar for the months of April, May and June 2017.
Your three page site must meet the following basic requirements:
- Use proper code, including all the basic tags in the correct locations!
- Each page must have a link to the neighboring months. For example, your April calendar should have a link to May, and May should have a link back to April and forward to June.
- Each page must look similar in dimension, using table tags for layout.
- Select one or two fonts to use for your site, and use the same font(s) in the same way on all three pages.
- Your calendar cells should be square or close to square with all of the numbers in the same corner (whichever corner is up to you).
- Weekdays should look different from weekends. Empty days should look different as well.
- Label the following days on your calendars: Earth Day, Start of Passover, End of Passover, Cinco de Mayo, Mother's Day, Father's Day and any other days you'd like to mark.
- Name the three pages as follows: april_[yourinitials].htm, may_[yourinitials].htm and june_[yourinitials].htm.
A project will receive 60% credit (D-F) or lower depending on the degree to which is meets the basic requirements.
A project will receive 70% credit (C) if it fulfills all of the basic requirements.
A project will receive 80% credit (B) if it fulfills all of the basic requirements and also demonstrates use of other styles including color, background-color, font-size.
A project will receive 90% credit (A) if it fulfills all of the basic requirements and also demonstrates use of styles including color, background-color, font-size to design layouts that are comfortable to look at (good color combinations, good use of space between within the cells, etc.).
A project will receive 100% credit (A+) if it fulfills all of the basic requirements and also demonstrates use of styles layouts that are creative and pleasing to look at.
Your documents needs to be uploaded to the Sonblazer server no later than Friday, March 17 at midnight. (We will be discussing server uploading in class, so don't worry about it just yet!)