[ Document created in class 1 - Jun 14 ]

[download the class1 folder as a zip]

Introduction
Document Type Definitions: http://www.w3schools.com/xhtml/xhtml_dtd.asp
HTML 4.01 / XHTML 1.0 Reference
Working with XHTML Files

Homework:
Start reading/practicing the XHTML tutorial. Follow as much as you feel comfortable with:
XHTML Basics - http://www.w3schools.com/xhtml/default.asp

Related Links:

1. Basic XHTML - Basic XHTML Formatting
   
2. XHTML Basics - http://www.w3schools.com/xhtml/default.asp
3. Learn CSS - http://www.w3schools.com/css/default.asp
4. CSS Color Codes - http://www.w3schools.com/css/css_colors.asp
5. Color Codes from webmonkey site

1. [ Document created in class 1 - Jun 14 ]
   [download the class1 folder as a zip]
   
   
2. Organizing folders in your FLASH drive
   
   
   
3. Basic XHTML tags review
   HTML 4.01 / XHTML 1.0 Reference
   
   
4. Introduction to CSS
   Adding a gradient background image to your page with CSS
   
   Generating the gradient image online at:
   http://tools.dynamicdrive.com/gradient/
   
   
5. Example of documet to be created in class [ class2.html ]
   
   
6. Images to borrow: image 1, image 2

Related Links:

1. http://colorschemedesigner.com/ <-- CHECK THIS OUT FOR COLORS
2. http://kuler.adobe.com
   
   
3. *Relative vs. Absolute Links
   When and How to Use Them
   
   
4. TreeHugger website: (YOU MAY PICK YOUR SITE TOPIC FROM HERE)
   http://www.treehugger.com/gogreen.php
   
   
5. Basic XHTML
   Basic XHTML Formatting
   
   
6. Markup Validation Service
   http://validator.w3.org/
   
   
7. WEB DEVELOPER TOOL BAR FOR FIREFOX:
   https://addons.mozilla.org/firefox/60/

Homework:

1. CONTINUE with the XHTML tutorial. Follow as much as you feel comfortable with: XHTML Basics - http://www.w3schools.com/xhtml/default.asp
   
   
2. Follow the introduction to CSS on W3schools.com
   
   
3. In html format create a content list or site tree of the topic you like to cover for your midterm project.
   Feel free to pick a topic from TreeHugger website:
   http://www.treehugger.com/gogreen.php
   
   EXAMPLE:
   hw_class2.html (you are welcome to use the source of this example for your homework)
   Email your homework as an attachment to:
   yourdesigner@livianieves.com
   

Class Project:
We want to recreate this document:
Project 1 - Example of midterm page

1. Document developed in class 2 zip.
   Preview file
   
   
2. Basic XHTML tags review
   HTML 4.01 / XHTML 1.0 Reference
   
   
3. Introduction to CSS
   Adding a gradient background image to your page with CSS
   
   Generating the gradient image online at:
   http://tools.dynamicdrive.com/gradient/
   
   
   

Related Links:

HTML Lists

INTRO to CSS

Color Schemes
http://colorschemedesigner.com/
Background image gradient generator:
http://tools.dynamicdrive.com/gradient/

CSS Tutorial

Homework:

1. Start reading the CSS tutorial. Follow as much as you feel comfortable with: CSS Basics -http://www.w3schools.com/css/default.asp
   
   
2. The following two parts of your homework depends on how much we get to cover in class today. Just follow as much as you can with what was practice in class.
   
   Change/customized the colors of the document created in class using colorschemedesigner.com. Change the background colors for the container, the label, the content, navigation and footer.
   Document create in class 3 - View source for code.
   
   
   
3. Populate the content area with the text for your future midterm project. Apply headers for each of the sections along with its paragraphs.
   We ll use these headers to develop the links for the navigation tool next class.
   
   
   
   
   

Class Project

CSS REVIEW

1. We will use the file created last class or your homework document to re-create the following layout:
   http://livianieves.com/115/examples/purple_page.html
   
   
2. Developing/Finishing your midterm project
   
   
   
   
   My homework examples with new color schemes:
   
   Class 3 - Introduction to CSS - EDP 115 - Homework 1
   
   Class 3 - Introduction to CSS - EDP 115 - Homework 2
   
   Text infomation for my site
   
   
   

Important Color Links:

1. Color Schemes
   http://colorschemedesigner.com/
   
2. Background image gradient generator:
   http://tools.dynamicdrive.com/gradient/
3. Generate a color palette based on an image
4. Easy RGB
5. Creating color schemes
   

HOMEWORK:
Work on your midterm project at home.
Few things to pay attention to:

1. Make sure that the links of your navigation tool are all functional
   
   
2. Make sure to include a "top" link at the end of your sections that brings the user to the top of your page.
   
   
3. Customize the title of your page to display the topic of your page.
   
   
4. Email me the page as an attachment: yourdesigner@livianieves.com
   Make sure to include your full name in the subject and the course name as well.
   

Related Links:
CSS Tutorial - http://www.w3schools.com/css/default.asp
CSS Basics - http://www.mako4css.com/Basics.htm

Class Project:
We will take care of the last details for the midterm page.
File created in the previous class:
class4.html
You will use your html document created/edited in class four.

1. Updating the style/look of the navigation tool
2. Customizing the colors text and headers
3. Adding simple images to your document.
   
4. I'd like us to finish the document in the following matter:
   class5.html - finished example.
   
   [ FINISHED Midterm page example SUMMER 2011]
   
   

Homework:
* Finish your midterm page and email it to: yourdesigner@livianieves.com

We will use this same file to start the final website project.

1. Creating a copy of your index page inside a new folder name: final
   
   
2. Making your CSS an external file
   
   
3. Customizing the links of your navigation tool
   
   
4. Creating a template document to utilize to create each of the 2nd level pages of your future final website
   
   
5. Generating a seamless background image to use on the header area:
   
   Free Seamless-Pattern-Background -
   http://www.patterncooler.com/index.php
   
   Background image gradient generator:
   http://tools.dynamicdrive.com/gradient/

Related Links:

1. Color Schemes
   http://colorschemedesigner.com/
   
   
   
2. Free Seamless-Pattern-Background
   http://www.patterncooler.com/index.php

Finishing your final project
I will request a copy of your project to be save in my flash drive
but you are also welcome to email me your updated website project within a week.