Project
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.
Lastly, your webpage should look AWESOME! Part of your grade will come from the aesthetic design -- the pleasing look -- of your webpage. The other part of your grade will come from using HTML and CSS correctly; so, make sure you understand how to "code" with HTML and CSS. Please review the exercises, consult with your "elbow neighbors," or ask Mr. Richards if you don't understand how to "code" with HTML and CSS.
Exercises
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 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.
HTML Styles
HTML Styles - CSS
CSS Selectors
CSS Colors
CSS Color Groups Use this as a reference.
Colors Tutorial Use this as a reference.
3) Review the following webpages, and fill out this form. Using Notepad as an HTML editor, create 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.
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 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.
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 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.
HTML Links
HTML Images
HTML Plug-ins
6) 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