Create a webpage.
Your webpage should include passages about you: What makes you, you? What are your favorite activities? What do you like about those activities? Who makes up the members of your family? What do you do with your family? What makes your family unique? Who are your friends? What do you have in common with your friends? What activities do you do with your friends? Etcetera. Do NOT use any last names.
Your webpage should include a passage about this class. Your friends, family, and anyone else to whom you show your webpage will want to know a little bit about this class; so tell them about it.
Your webpage should include your projects. Remember to save your projects as GIFs. Each project should have its own description. How did you create the project? Etcetera.
Your webpage should use Unity, and Emphasis. Due Wednesday, January 6th, 2016
Vocabulary
Quiz: Friday, January 8th, 2016
Unity (Harmony): A principle of design related to the sense of wholeness that results from the successful combination of the component elements of an artwork.
Pattern: The repetition of elements or combinations of elements in a recognizable organization.
Variety: A principle of design concerned with the inclusion of differences in the elements of a composition to offset unity and add interest to an artwork.
Emphasis: A principle of design in which one element, or a combination of elements, create more attention than anything else in a composition. The dominant element is usually a focal point in a composition and contributes to unity by suggesting that other elements are subordinate to it.
Proportion: A design principle reflecting the size relationship of parts to one another and the whole.
Additional Notes for the Principles of Design Lecture:
Pattern: the repetition of a design (motif).
Geometric Period of Greek Art
Green Coke Bottles
Lizard
Numbers in Color
Ceiling of the Tomb of Hafez in Shiraz
Femme au manteaux violet
Exercises
1) Review the following webpages, and fill out this form. Using Notepad as an HTML editor, create and turn in a simple webpage that properly includes a <!DOCTYPE html> tag, an <html>element, <head> element, <title> element, <body> element, <p> elements, <br> elements, and at least two different types of heading elements. You may include other elements, if you wish. Due Wednesday, December 2nd, 2015
HTML Introduction
HTML Editors: Follow the instructions in the tutorial.
HTML Basic Examples
HTML Elements
HTML Attributes
HTML Headings
HTML Paragraphs
HTML(5) Style Guide and Coding Conventions
2) Review the following webpages, and fill out this form. Using Notepad as an HTML editor, create and turn in a simple webpage that properly uses both internal styling and inline styling to change the default background color of the webpage, and default color, font-family, font-size, and horizontal alignment of elements in the webpage. Additionally, please demonstrate your ability to properly use the class attribute. Due Friday, December 4th, 2015
HTML Styles
HTML Styles - CSS
CSS Selectors
CSS Colors
CSS Color Groups Use this as a reference.
3) Review the following webpages, and fill out this form. Using Notepad as an HTML editor, create and turn in a simple webpage that properly uses <div> elements and class attributes together, in order to create a consistant layout. Additionally, please demonstrate your ability to properly use the <span> element. Due Friday, December 4th, 2015
HTML Block and Inline Elements
HTML Classes
HTML Layouts
4) Review the following webpages, and fill out this form. Using Notepad as an HTML editor, create and turn in a simple webpage that properly uses the background-color, color, text-align, width, height, padding (padding-top, padding-right, padding-bottom, padding-left, and/or padding), float, and clear properties. Due Wednesday, December 9th, 2015
CSS Background
CSS Text
CSS Dimension
CSS width Property
CSS height Property
CSS Padding
CSS Layout - float and clear
Example: How the background-color, color, width, padding, float, and clear Properties Can Be Used with Block-Level Elements to Create Webpage Layouts
5) Review the following webpages, and fill out this form. Using Notepad as an HTML editor, create and turn in a simple webpage that properly includes at least two <a> elements. One of the <a>elements should link to a bookmark within the webpage, and the other should link to a different webpage. One of the <a> elements should have a _blank target value, and the other should have a_top target value. Additionally, properly use the <img>, and <object> elements to include images on your webpage. Due Wednesday, December 9th, 2015
HTML Links
HTML Images
HTML Plug-ins
6) Using Google Drive to Host Your Webpage: Complete this tutorial, and fill out this form.
Review: Creating and Saving Artwork to Be Used As a Web Graphic or For Print with Adobe Illustrator: Review the webpage, and this form.
Videos: How to save a file for output, and Save artwork for the web
<!DOCTYPE html>
<html>
<head>
<title>Mister Richards' Awesome Webpage Title</title>
<style>
body
{
background-color:lightblue;
color:darkblue;
}
img
{
float:right;
height:100px;
width:100px;
}
.container
{
height:1600px;
}
.heading
{
text-align: center;
font-family: sans-serif;
width: 600px;
clear: left;
padding-left: 100px;
}
.navigation
{
background-color:white;
float: left;
width: 100px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 50px;
padding-left: 10px;
}
.section
{
margin-left: 150px;
width: 500px;
}
.clear
{
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="heading">
<h1>Heading</h1>
</div>
<div class="navigation">
<a href="http://www.misterrichards.weebly.com/" target="_top">First Link</a>
<br />
<a href="#section2" target="_blank">Second Link</a>
</div>
<div class="section">
<h2 style="font-family: sans-serif;"><img src="http://fixnation.org/wordpress/wp-content/uploads/2014/03/cats-kittens_00379052.jpg" alt="kitten in a box" />Section Heading</h2>
<p class="clear">Paragraph Text <span style="font-size: 200%;">with a Span</span> in the middle.</p>
</div>
<div class="section" id="section2">
<h2 style="font-family: sans-serif;">Section Heading</h2>
<object data="http://cdn.meme.am/instances/37703026.jpg" height="490" width="490"></object>
</div>
</div>
</body>
</html>