Basic HTML Assignment

Hello Students,

Your Basic HTML Assignment is to create a simple 4 page website that is a biography. You will create a menu for navigation on a home page, and 3 other pages. These can be About Me, Contact and Sites of Interest. Each page should have a menu for navigation plus content. Each page should have an image or photo and text, links, lists etc. A full page is not necessary, the focus here is creating navigation, links and using color.

For help: Refer to yesterdays links, google it or ask your neighbor before asking your instructor. Below are notes about the tags we discussed in class as well as extra's.

REQUIREMENTS:

• You must code this project in HTML from scratch.
• You must use text edit to insert the proper HTML tags, Use appropriate headings to structure each of  your pages.
• Each page must contain a simple menu at the top for navigation, and a signature at the bottom to end the page such as your name, a quote or something else unique.
• Must have a total of  4 pages, more is allowed for extra credit. Page titles can be "Home, About Me, Contact, Favorite Websites".
• Include 1 image or photo on each page.
• Include at least 2 lists (ordered or unordered)
• Include at least 3 links to external websites (for instance your blog, the class blog etc...).
• You must include your email address either on your contact page or in your menu.
• Each page must have a background image or color
• Make sure all pages have the .htm or .html extension and all images or photos are formatted for web correctly (jpg, gif, png).


HTML NOTES:
Tags are used to format your text, text can be a link, a list, a paragraph, big, small, red, blue etc. In html tags are made like this:
<></>

You must always begin and end your tag, tags effect everything in between them. If you forget to end a tag it will effect everything after it. So to make some text look bold I would write my HTML like this:
Here is some <b>bold</b> text

And it would be rendered like this:
Here is some bold text


Remember that your document must be formatted, it has an html tag, plus a head and a body. Most of the content your site goes in the body. It basically looks like this:
<html>
      <head>
      </head>
             <body>
             </body>
</html>

You can also make the title of your document show up in the window. The title tag is:
<title>this is my website isn't it cool</title>

Other tags change the way text looks, like bold or italic. Try some of these others:
<i></i> makes text italic
<tt></tt> makes text teletype
<h1></h1> makes text into a header, 1 is the largest, 6 is the smallest
<hr></hr> puts a horizontal line on your page
<center></center> makes text align center
<blockquote></blockquote> makes the text indented

You can also format large pieces of text like a paragraph with the p tag:
<p></p>

If you want that paragraph oriented, you can add the align command:
align="center"
align="right"
align="left"

So if you want a paragraph that is left oriented, then your tag looks like this:
<p align="left"></p>

To make text into a link you can use the a tag. To link to a local document you can
write your html like this:
<a href="aboutme.html">About Me"</a>

If your link goes to an external site then you must include the entire URL like this:
<a href="http://www.myblogwebsite.com">My Blog"</a>

You can set the color of several different things in HTML. In the <body> tag, the bgcolor, text, link, vlink, and alink attributes define the colors for the page background, text, unvisited links, visited links, and active links (i.e. the moment the link is being clicked on).

To change text color for part of a page, use the <font> container tag with a color attribute.

Color attribute values take one of the following forms:
"#RRGGBB", where RR, GG, and BB are the red, green, and blue components of the color, in hex, ranging from 00 to FF.

One of sixteen "widely understood color names": aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (white), or yellow (yellow)

Link: Color Values in HTML

More tags and other basic elements in HTML

Ok have fun!

Basic HTML Lesson

Hello Students,

Today we will work on a basic HTML webpage, creating it from scratch. HTML is easy to learn and very valuable. I will be walking you through our exercise, but look at these links below for more information:

Basic HTML Video

Barebones Guide to HTML

Adding Color to HTML

HTML Made Extra Easy

El HTML Hecho Realmente Fácil

For our exercise today I will show you how to begin creating HTML pages from nothing more than notepad.

 - SW

Illustrator Assignment: Vector Sugar Skull

Follow this Multi-Step Tutorial to create your own Sugar Skull design. This tutorial will teach you how to make geometric patterns, how to use masks, color and patterns. Use the skills you have developed in Illustrator to make your Skull design unique and eye catching. Read the requirements below:

- Your design must be created in Illustrator on Letter size (8 1/2 inches wide by 11 inches tall).

- Your design must be colored using limited colors, 3 colors maximum (black and white count, my skull below uses blue, orange and white only).

You will have 3 days of lab time to complete this tutorial. Any work turned in late will have points deducted. Failure to meet the above specifications will result in point deduction. The deadline is Tuesday at end of class.

CLICK TO SEE SUGAR SKULL TUTORIAL

Below is my own sugar skull design, I followed the tutorial but made subtle changes to the shapes. Think of all the different themes we can draw shapes from. I used diamonds instead of teardrops for instance. Make your skull look unique.

Have fun! - SW

Continuing Pen Skills in Illustrator

Hello Students,

Continue working on yesterdays tutorial. Hone your Pen Tool skills by tracing the shapes below. Post your results to your blog. Right click the image and "save as" to your folder. In Illustrator, go to the File Menu and use the Place function to import the images.

- SW

Understanding Vector Graphics

Hello Students,

Today begins our work with the Adobe program Illustrator, perhaps my favorite program of all time. Vector graphics use geometrical primitives such as points, lines, curves and shapes or polygons, which are all based on mathematical equations, to represent images in computer graphics.

Illustrator relies heavily on using the Pen tool, which is used to draw lines between nodes to create shapes. Shapes in AI (Adobe Illustrator) can have a fill, or stroke or both. Today we begin practice by working through the short tutorial below:

Tutorial: Drawing with the Pen Tool

Work through this tutorial today and post the results to your blog.


Hello Advanced Students,

Choose from one of the advanced Illustrator tutorials below and begin work. Results are expected by the end of this week:

Tutorial: Vector Portrait from Photo

Tutorial: Draw a Bouquet of Flowers

Tutorial: 3D Text Technique

- SW

New Assignment: Icons!

Students, you new assignment is to create 2 icons. You may use photos or draw freehand. I recommend using the pencil tool and paintbucket tool for this assignment.

Your assignment specifications:
 - 1 icon created at 64X64 pixels
 - 1 icon created at 32x32 pixels

When you are complete you may post your results to your blog. Check out the icon art from last semester: This is due at end of class on thursday.

Ok, Have fun!

Understanding Pixels

Hello Students, here are some notes on understanding pixels in photoshop. This is important to understand for our next assignment, drawing an icon/avatar.

Alias vs Anti-Alias:

In Photoshop and other bitmap/pixel based programs, Anti-Aliasing is used to give objects a smooth appearance when viewed on screen, it averages the pixel colors to create a smooth transition.

Aliasing is when graphics lack that smoothing, and we can see jagged edges to the object, or "Jaggies".

Contiguous vs Non-Contiguous:

It is important to understand the difference between contiguous and non-contiguous imagery, because different image compression formats are best used for certain types of images.

Contiguous images have subtle color changes from one pixel to another, such as photograph's, paintings, hand drawn sketches or any graphics with a lot of gradients. The JPEG compression codec is best for these kinds of images, that is why most digital camera's save images in the .JPG format.

Non-Contiguous Images have large areas of flat color, shapes and lines. These can be photo's that have been converted to 8-bits, or graphics drawn without anti-aliasing.

New Photoshop Assignment: Text Effect Tutorial

Hello Students,

Your newest assignment is to create a Banner Graphic to customize your blog with one of the text effects below. Find out the image of the banner at the top of your blog and choose one of the tutorials below to work through. Due at end of day on Monday.

Text Effect: Gold

Text Effect: Jelly Style

Text Effect: Light and Shadow

 - SW

New Assignment for Advanced Students - PSD Tutorial

Hello advanced web students,

Your new assignment is to complete a photoshop tutorial from the following link:

50 Great PSD Tutorials for Clever Beginners

These tutorials are geared for intermediate photoshop users and should be educational and challenging. I encourage you to customize your artwork to create a unique image for your portfolio. You are expected to produce results so make sure you focus. If you become stuck on a tutorial step or don't understand a term or tool, you are expected to research the issue to find a solution. Begin work asap and I will check on your progress on friday. Good luck!

- SW