Week 01

Week 01 – syllabus/course outline, web domains, web hosting, the internet, naming conventions, HTML review, project file structure, web graphic formats, image compression in Photoshop, Assignment 1: create HTML page, Quiz 1.

Welcome to our first class!

Please be sure you have read through the Introduction page located on this site. (FYI: it is the same information as the Introduction section on the class smconline.org site).

Also, make sure you have read through the syllabus for this class. The syllabus is located in the “Syllabus” section in the main navigation of this site.

If you have any questions about the introduction information, the syllabus, or anything else regarding general class questions, please post the question in the discussion section of the smconline.org site. I will answer your questions so all students can benefit from the additional information.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

To start off our class, I’d like to give you information about the process for posting a web site live to a server. If your goal is to design, build, and post web sites for clients (or yourself), you must understand there are two main “services” you have to purchase in order to post a site live.

Here are the two “services” you’d need to purchase in order to post a site live:

1. Domain name registration: registration of domain name you’d use for your site. (i.e – yourname.com)
2. Web Hosting: purchase of server space at a web hosting company.

Domain Name Registration
The first step is to determine a name for your web site. You can check to see if a particular domain name is available using a “Find a Domain” feature on a web site like Network Solutions. The “Find a Domain” feature is on the left-hand side of the Network Solutions home page. Here you can input a potential domain name to check if it is available.

Note: In order to have access to a server you should register your own domain name and purchase a web hosting plan. This is a requirement for the class, I recommend students set up their own web site. I find many students are interested in doing so and, if you are interested in securing clients in the future and designing web sites professionally, you will need your own web site and server space.

I have provided the following information for students who are interested in securing a domain name.

• I recommend domain registration with an ICANN-Accredited Registrar. If you don’t want to sift through the hundreds of companies, you may want to consider Network Solutions or Go Daddy.
• The big difference between Network Solutions and Go Daddy is price and service.
• Registering a domain name with Network Solutions costs $34.95 for one year. (Or free if you sign up for a year of web hosting. A one year basic hosting plan is around $120). Network Solutions has excellent customer service and has been around a long time.
• GoDaddy is more economical. You can register a domain name for $1.99 for one year with the purchase of a 2 month plan (Two months is the minimum purchase length and costs $3.99 a month) GoDaddy’s customer service has been impressive recently. (I’ve been told they send both a follow-up email and call new customers to answer questions.)
• Feel free to register your domain name at a different company than the two given above. I’d recommend you make sure the registrar you’ve chosen is ICANN-Accredited and you know someone who’s had a good experience with the company.

Web Hosting
In additon to securing a domain name, you will need to purchase a web hosting plan so you have your own server space. Both Network Solutions and GoDaddy, (and other web hosting companies), may attempt to sign you up for additional add-on services. Rarely will you need to add additional services to your web hosting plan. All you’ll need is a domain name and a basic hosting package. Beware of the multiple attempts companies make to sell add-on services when you order your domain name and web hosting. If you want to get started slowly without committing to a 12-month hosting plan, the 2 month minimum plan through GoDaddy might be a good choice.

When you purchase your web hosting you’ll see a box to add a domain name to your order. If you specify a one year registration, you’ll be charged $1.99. I recommend you choose the Linux/Unix platform rather than Windows for your web hosting. (Unless you need language support for ASP.NET, then you should probably go with a Windows server).

Remember to stay clear of the multiple attempts companies will make to sell other add-on services when you order your domain name and web hosting.

Here are some other features you should be aware of:
Disk space:
Total amount of usable space that you are allotted on hosting company servers. You will only need 300 – 500 MB…. at GoDaddy you get 5 GB with the Economy Plan. If you plan to incorporate a lot of video in your site, it is good to have at least 1 GB of disk space.

Data Transfer/Bandwidth: This is the total amount of data that you can transfer to or from your web site. Below is an example of how many times a page would need to be viewed in order to reach 10 GB of transfer:

Page size 30 kb: 699,050 views
Page size 40 kb: 524,288 views
Page size 50 kb: 419,430 views
Page size 60 kb: 349,525 views

Therefore, most web hosting plans offer plenty of bandwidth.

When signing up for these services, you’ll be asked to specify a password and be given a login name. Please make note of all login and password information, You might be given a separate login and password for your domain registration and for web hosting. You’ll need this information to login onto your server. Please write everything down and keep any confirmation emails you receive from the companies in a place where you can find them.

Note: You are welcome to use any of my recommendations above. If you have someone you trust who has recommendations, or if you have purchased a web hosting plan already, or can do it by yourself, I encourage you to follow your own direction. It’s always good to do as much research as possible and to ask around. In no way are you required to follow any of my recommendations.

How the Internet Works

Take a look at the diagram below and read through the notes so you understand how the internet works. (Note that “Client” refers to the computer where the web page is viewed…)

Servers
The Server is where the web site files live. The web server software runs on the server machine, responding to client requests by sending files back to the client. The server also processes CGI (Common Gateway Interface) requests, runs programs, and accesses databases.

• Server software runs on the server machine
• The web site files are on a hard disk attached to the server
• The server software formats and delivers each web page element based on HTTP requests
• Elements are delivered to many clients at the same time
• A “hit” indicates that one element (not a page!) was delivered (e.g. an image)
• A web page is composed of many elements, therefore each page accessed generates many hits
• Hits vs. page visits vs. site visit

Clients
The client is the computer where the web page is viewed. The browser software runs on the Client computer and sends requests to the Server computer. When the client receives files from the server, the Client assembles the web page and displays it.
• The web browser runs on the client
• The client requests elements from the server
• It receives and “parses” the elements delivered by the server
• First reads the HTML
• Formats the page, and displays the text
• Gets additional elements (images, audio, etc.) specified in the HTML
• Displays additional elements
• Manages the interactions with the user (e.g. forms, scrolling, image maps, etc.), minimizing the amount of work the server has to do
• Runs client-side software (JavaScript, Java, plug-ins)

Composition of a web page
A web page is composed of the following elements:
• The HTML file, which describes the page layout, defines links to other web pages, and contains the text for the page
• Elements that come from the same server where the HTML files is, or from a different server
• Image files (.gif, .jpg, .png)
• Audio files (.mp3, .au, .ram, .mov)
• Other multimedia objects (QuickTime movies, Flash, Real, etc.)
• JavaScript

See the links to the directories below for examples. Take a look and note the various elements that comprise the web pages. Notice all the HTML files. (.htm and .shtml files are also HTML files).

• Can you find the .jpg and .gifs images? Where are they located?
• What about the Flash files… they end in .swf and only one of the directories below contain Flash files. Do you know which one?
• Do you know what a .css file is? A CSS file stands for”Cascading Style Sheet” and we will talk about these later in the semester.

Monterey Pop Web Site
Nike Annual Report Web Site

Additional Resources:
From the “How Stuff Works” web site- How Internet Infrastructure Work

Moving files between the Mac and PC
Files can be transferred easily from the Mac to PC, and from the PC to the Mac for almost all applications. But you must follow the below directions carefully.
1. Always use PC formatted compact discs on both platforms. The Mac can read PC compact discs, but the PC cannot read Mac formatted compact discs. (Same is true for Flash drives).
2. Always use the correct 3 character file suffixes (e.g. .psd for Photoshop, .doc for Word, .htm or .html for Dreamweaver). This is critical. Both PC and Mac won’t know what to do with your files if you don’t use the proper suffixes.

Web file naming conventions
When creating your web site, you must be very methodical when naming your files. First, never use spaces, uppercase letters, or any special characters in your file names. While your site may seem to work OK in Dreamweaver, on your local computer, once you put the web site on the server, violating these rules can cause you no end of problems.

For the web page file names, be sure you use “index.html” (or “index.htm”) for your first web page. Using this special name will tell the server to display this page as the default page for any directory of html files.

Other HTML files should have meaningful names such as products.html or about_us.html, rather than convenient names such as page1.html. Name your files as if you giving the web site to someone else to work on, and who won’t be able to ask you any questions about it (for example, you 6 months after the project is finished when you can’t remember anything about it).

Web file naming rules:
• No spaces in the filenames
• Use all lowercase letters
• No special characters in the filenames: For example none of the following are acceptable in web filenames: “!~:&(,
• The files MUST have the proper suffix (.html, .gif, .jpg)
• Be consistent in your naming of files, for example use the same prefix in a series of files. Also, to ensure that the files alphabetize correctly, always “zero-pad” your filenames when they have numbers in them. In other words, if you have a series of files numbered 1-20, the first file should be something like myfile01.jpg, and the last file should be named myfile20.jpg.

And again, it’s critical that you name your files correctly from the start. If you attempt to rename your files after you’ve created your site, you will, in all likelihood, break all the links in your web pages.

Sample project file structure:
One of the most important principles of web production is setting up the structure of your files correctly. (I’ll talk about this often since it is so important.) There is definitely a right way to set up your files and multiple wrong ways to do it. If you get in the practice of ALWAYS setting up your file structure correctly at the beginning of all your web projects you will eliminate the headache of fixing everything later. Note the structure below and that the images folder is located in the same folder (named “project_yourlastname”) as the HTML files. Your HTML files should never live inside your images folder. And your images should always be in your images folder– never loose.

Note: that the characters ” [] “represent a folder

[]project_yourlastname

about.html
[]images
index.html
links.html

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

HTML Review
You should be familiar with all the information below. If you are not, I suggest you take the prerequisite to this class GrDes 65. We will not cover the basics of HTML in this class although it is important for you to understand the basic principles.

Why learn HTML?
Given that tools such as Dreamweaver exist, and allow you to create web pages without knowing HTML, you might ask “why learn HTML?” There are several reasons:

• Dreamweaver does not always do what you want. To get the page to look right, you often need to hand code some HTML.
• You will become a better web designer. Learning HTML and how a web site is built will give you the advantage of understanding how to design a better site for your client.
• You will get paid more if you know HTML. It is a simple fact. Web design companies want people who can hand code HTML. This is because you will be a more flexible employee if you can do lots of things. In addition, larger web site projects often require that the pages have special HTML codes inserted into the web page, and tools like Dreamweaver won’t be able to do this.
• If you want to use JavaScript, you need to know HTML. The most interesting web pages often use JavaScript to make them interactive. Before you can learn JavaScript, you need to understand HTML and be comfortable coding.

Tags
HTML stands for Hypertext Markup Language, and uses the concept of tags. An HTML tag is always contained between a left angle bracket “<” and a right angle bracket “>”. These tags are special instructions designed to mark or “tag” a particular section of the web page, for example to identify a set of text as bold. The tags do not appear in the visual display of the web page. In general, HTML tags have a starting tag “<tag>” and an ending tag that has the same name as the starting tag but with a forward slash at the beginning “</tag>”. The text in between the starting and ending tags is the only text affected by the tags.For example, to make some text bold, the HTML would be written as follows:Here is some text, and <b>this text will show bold</b> when displayed in a browser.

HEAD & BODY Sections
An HTML web page is divided into to two major sections, the head and body. The head section is a description of the page, with its title, any meta tags, JavaScript, and other special information about the page. The head section does not contain any displayed content. The body section contains a description of how the page should look and work, including the text, text markup, links for in-line images, form descriptions, links to other pages, and page enhancements such as Flash, JavaScript, etc.

Basic HTML
A simple example of a web page

<html>
<head><title>HTML Example</title></head>

<body bgcolor=”#FFFFFF”>Some text for a web page that <b>demonstrates</b> the basic form of HTML in a web page.

</body>
</html>

HTML coding style
The format of your HTML code does not affect how the page will be displayed in a browser.

For example, this example of poor HTML style:

<html><head>
<title>a title
</title></head><body>
Example of BadHTML Coding style<ol type=”A”><li>item #1
</li><li>item #2</li>
</ol></body></html>

Displays exactly the same as this example of good HTML style.

<html>
<head><title>a title</title></head>
<body>
Example of Good coding style
<ol type=”A”>
<li>item #1</li>
<li>item #2</li>
</ol>
</body>
</html>

Addition Resources:
From the “How Stuff Works” web site- How Web Pages Work
HTML Cheatsheet on the webmonkey.com site. You may want to bookmark this page and keep it as a reference.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Project file structure

When building a web site, it’s essential to create a folder/directory structure on your computer to accommodate your whole project. This is extremely important and you need to make sure you create this file structure correctly at the very start of your project. Please note the following regarding the project file structure:
Inside the master directory structure (named final_project in the example to the left), you will keep two folders. The folder doesn’t need to be called final_project you should name it after the project you are working on such as midterm.
1) One folder will be named source_files and this is where you will keep all of your original design files (e.g. Photoshop and Illustrator files, Flash files, sound files, raw images downloaded from your camera, etc).
2) In addition, there will be a folder named final_web that contains all the html files for your web site, (eventually a .css file– we will cover css later in the semester) and an images folder with all your GIF files, and JPEG files that are part of the web pages–this final_web folder will mirror the structure on the web server. Please note fthat or your assignments in this class your “final_web” folder will be named midterm_yourlastname, final_yourlastname for the HTML project 1, the midterm, and final project.

You must keep your files separated into different folders so that files stay organized and easily accessed, and so that extraneous files do not get uploaded to the server. You will only upload your final_web folder and never your source_files folder. Source files like Photoshop and Illustrator should never be uploaded to the server.

To start the project, create a new folder, and then create several new folders inside this main project folder. Please refer to the example below. It is critical that you set up this empty directory structure before you start working on your web site. If you attempt to organize your files after you’ve made the site, you will, in all likelihood, break the links in your web pages.

The folder structure for your project 1 should be similar to the following (the brackets “[]” indicate a folder/directory):

• [] project1
  • [] proj1_yourlastname
    • index.html
    • bio.html
    • [] images
      • headshot.jpg
      • logo.gif
      • flower.gif
    • links.html
  • [] source_files
    • project1.psd

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Web Graphic Formats
Okay, now let’s talk about how to prepare images for the web. But before we get started below is some information about downloading files from this site. You will need to download a zip file to complete the exercise at the end of the class notes so please be sure you know how to download a file from this site.

Downloading files
The following is an explanation of how to download files from this site. The download files will typically be in a format called ZIP. The ZIP format allows multiple files to be grouped together into one file for a simpler downloading process. In addition, the ZIP format compresses the size of the files so the download takes less time. This means that you will download one compressed file with a “.zip” file extension. You then decompress the files and put them on your personal disk.

You can decompress these files on Macintosh computers with the Stuffit Expander program. If you have a PC or Macintosh at home or work, you can get the following utilities for working with ZIP files: StuffitExpander for the Mac or PC, or WinZip for the PC.

Downloading files

1. On the web page, click on the file to be downloaded.
2. On most Macintosh systems, the file will be downloaded to the desktop. It may be decompressed automatically, or you may have to double click on it to decompress it, or you may have to open Stuffit Expander to decompress it.
3. On the PC:
   1. When the dialog box comes up, click OK to “Save this file to disk”
   2. Then BROWSE your way to a directory on your Zip disk to SAVE the file
   3. Start WinZip and use FILE>OPEN (or the OPEN icon) and browse to the drive where you saved the file from the web browser.
   4. With the zip file opened in WinZip, select ACTION>EXTRACT (or the EXTRACT icon), browse to a directory on your disk where you want the files placed, and click on the EXTRACT button. Note that you do not have to select the files to be extracted.
   5. This will uncompress, separate all the files, and place them on your disk.

For practice, download and extract the compression_test.zip file here.

Okay, now before we get started let’s first talk a little about web-safe colors versus non web-safe colors.

Web-safe colors
Are they necessary? There is a standard set of 216 colors that are known as the “web safe” colors. In the past, web designers have used only colors in web safe palette. The reason for this is that many older computers could only display a total of 256 different colors, and there were only 216 common colors between the Mac and the PC. Using colors other than those in the web safe palette would cause those colors to be displayed with dithering. (i.e. a few of the 216 colors are mixed to create a substitute for the actual color.)

But these days, less than 1% of web users use computers that only display 256 colors–either because they have very old computers that “compresses” the images down to the web safe colors. These users can still view web pages, but non web-safe colors will look dithered.

Given that so few users have this problem, and what they see still works, there is simply no reason to worry about the web-safe colors anymore. You are free to use of the millions of colors available to you. (But this is my opinion, and others disagree).

To see a chart of all the web safe colors, see this page on the WebMonkey site

For more information about the percentage of users viewing the with with 256 colors, see Browser News

Basic image types

RGB images
RGB images are a “true color” format, in that the original colors of the image are preserved to a high degree. RGB format (vs. CMYK, JPEG, or GIF) images should be used for your master Photoshop files.

RGB – Each pixel can have any color, independent of all other pixels. Each pixel has a value for Red, Green, and Blue, and each color value has a range of 0-255 (or 00 to FF in hexadecimal).

Bit depth = The number of different colors available for each pixel

• 32bit = 16,777,216 colors + 256 shades of gray for the alpha channel
• 24bit = 16,777,216 colors
• 16bit = 65,536 colors

Indexed images
Indexed images are a limited palette image format that is used for the web, game machines and other situations where there is a need for reduced image size or hardware that supports a limited number of colors.

Indexed – Pixels in an image are limited to a small number of colors available for the entire image. Each pixel has value that points to an entry in a table of colors (also known as a palette or CLUT -Color LookUp Table).

Here is an example of the palette for the duck image below. Pixels in the image can only be one of the 8 colors in the image’s palette.

Bit depth = The number of different colors available for the entire image – i.e. number of colors in the palette. The fewer bits per pixel, the smaller the file.

• 8bit = 256 colors
• 6bit = 64 colors
• 4bit = 16 colors
• 2bit = 4 colors
• 1bit = 2 colors

Dithering
Dithering is a way to fool the eye into thinking there are more colors in the image than are actually there. Dithering works by scattering pixels of different colors over an area so that the eye averages them to a color that’s a combination of the colors used.

Non-dithered image (2382 bytes)	Dithered image (3598 bytes)

These are indexed images that use the same number of colors (8). The second image looks better through the use of dithering which creates the impression of gradients. The disadvantage of dithering is that it does not compress as well in the GIF format.

Web image types

GIF format
A compressed file format for indexed images. It uses run-length encoding, which compresses a series of pixels of the same value (in the horizontal direction) as a single entry (e.g. 30 pixels of red), which saves space over specifying each pixel. This means that large blocks of a single color compress very well. It also means that dithering (which reduces the runs of the same pixels) usually makes the image compress poorly.

• Best for - Graphic images with large areas of a single color, images with transparency, images with sharp edges, images with few colors.
• Transparency – Defines one color to be transparent
• Animations – Format supports multi-frame animations
• Interlacing – A way to encode the image so that when a small amount of the image has been downloaded, it can be displayed in rough form. The image becomes progressively more clear until the whole image is downloaded.

JPEG format
A “lossy” compressed file format for RGB images. Among other things, it eliminates hard edges to achieve compression. The loss of quality in the image is controlled by the quality setting when you save a JPEG image. The lower the number, the worse the quality.

• Best for – Photographic images, complex images, images with soft edges
• No transparency or animation
• Progressive – A format similar to interlacing for GIFs that displays the image with increasing quality as it downloads. The progressive format is not supported by some older browsers.

PNG format
A relatively new format that combines the best of GIF and JPEG. It supports both Indexed images and RGB images. It also supports a 256 color alpha channel for transparency. Not fully supported by older browsers.

• Recommended for certain uses
• PNG supported by: Mozilla for Windows, and Mozilla and Explorer 5.0 for the Mac
• Spring 2003: Explorer 6 for windows does not support PNG alpha channel

More information about the PNG format can be found here.

Making images
Download and extract compression_test.zip.

The primary goal in creating graphics for the web is to maintain high image quality, while creating files that are as small as possible. This is always a compromise, and requires a subjective judgement by the designer. The best approach is to experiment with different image settings to discover a good compromise appropriate for the image and web page.

GIFs
To make a GIF, do the following to an RGB image in Photoshop:

• Show and hide any layers to get the image you need
• Determine the color of the web page background that the image will be displayed against
• Select FILE>SAVE FOR WEB…
• Notice that the image is displayed in its compressed format. And at the bottom left of the screen, the size of the compressed image is shown. Keep track of both of these as you adjust the various settings. Keep in mind that, in general, the total size of a web page including all of its images should be less than 100K.
• Select GIF 32 No Dither from the Settings pull down. This will provide a good starting point for your settings.
• Select PERCEPTUAL, SELECTIVE, ADAPTIVE, OR WEB for the palette selection method. SELECTIVE is the default and will usually provide good results. Following are Photoshop’s definition of these methods, quoted from Adobe Photoshop Help:
  • Perceptual – Creates a custom color table by giving priority to colors for which the human eye has greater sensitivity.
  • Selective – Creates a color table similar to the Perceptual color table, but favoring broad areas of color and the preservation of Web colors. This color table usually produces images with the greatest color integrity. Selective is the default option.
  • Adaptive – Creates a custom color table by sampling colors from the spectrum appearing most commonly in the image. For example, an image with only the colors green and blue produces a color table made primarily of greens and blues. Most images concentrate colors in particular areas of the spectrum.
  • Web – Uses the standard 216-color color table common to the Windows and Mac OS 8-bit (256-color) palettes. This option ensures that no browser dither is applied to colors when the image is displayed using 8-bit color. (This palette is also called the Web-safe palette.) Using the Web palette can create larger files, and is recommended only when avoiding browser dither is a high priority.
• Select NO DITHER. This will produce the smallest files, while the other Dither options may improve the image quality. If Dither is needed, you may want to consider JPEG for the image format.
• Select the smallest number of colors that produces an acceptable looking image. You can reduce the color information if necessary by selecting the “color” pull down menu and with the right arrow reducing the color to 16, 8, 4 or perhaps even 2.
• If you want the image to display while downloading,
  select the INTERLACED checkbox.

Transparency in GIFs allows you to see through parts of the image to the background of the web page. Photoshop creates transparency in GIFs by using the mask transparency in the Photoshop file.

• Create the transparency in your photoshop file, and set your layers so that you can see the checkerboard transparency in the file before you select SAVE FOR WEB
• If you have created a mask for transparency, and want the background of the web page to show through the mask area, check
  the TRANSPARENCY box in the SAVE FOR WEB palette on the right side of the screen.
• Select a MATTE color. This color selection affects the color of the anti-aliasing fringe used at the boundary between the image and the transparent areas. E.g. if your image will be displayed on a white web page, select white as the MATTE color to make a clean, anti-aliased edge for the image.

JPEGs
To make a JPEG, do the following to an RGB image in Photoshop:

• Show and hide any layers to get the image you need
• Select FILE>SAVE FOR WEB…
• Notice that the image is displayed in its compressed format. And at the bottom left of the screen, the size of the compressed image is shown. Keep track of both of these as you adjust the various settings. Keep in mind that the total size of a web page including all of its images should be less than 100K.
• Select JPEG Medium from the Settings pull down. This will provide a good starting point for your settings.
• Check the OPTIMIZED checkbox. This makes the file size smaller, and is compatible with almost all browsers.
• Experiment with the QUALITY setting while checking the Optimized image for JPEG artifacts and looking at the resulting file size. Usually a setting between 40 – 60 works well. Choose the lowest quality setting acceptable so the file is the smallest.
• If you want the image to display while downloading, select the PROGRESSIVE checkbox.

Transparency is not available in JPEG images. But the MATTE feature described for GIFs can be used in JPEGS. If the photoshop image has transparency, the matte color you choose in SAVE FOR WEB will change the transparent areas of the image to that color. This is useful if you need to put an image against a particular color on a web page.

Please read the information below before completing the class exercise.

Required Reading (required):
Photoshop CS/ImageReady CS for the Web Hands-On Training: Optimization

Additional Resources (suggested):
iTunes: Lynda.com video- Photoshop CS3 Web Essentials
This is a good resource to walk through the beginning steps of saving an image with a transparent background using a matte color.

Exercise:
Working with the fern, graphic text, and temple images in the download, use Photoshop to convert them to web format with FILE>SAVE FOR WEB.

Do the following for each image:

1. Decide on the best format to use for this image: JPEG or GIF
2. Decide on the smallest file size possible without compromising image quality
3. Document the settings you use for your final versions of each image (e.g. number of colors in a GIF, compression setting for JPEG).
4. Note the size of each file you create.

Please be sure you understand how to optimize images for the web and let me know if you have any questions. I have added the topic “Web graphic format” to the Discussion area on the smconline.org site if you have any questions.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Assignment 1 (Must be posted to “Dropbox” on smconline.org site by noon on Tuesday, September 2)

Please create a simple HTML page with images and text. I’d like you to create a biography page that tells me a little about your self. The purpose of this assignment is to demonstrate your basic understanding of building an HTML page. You can use Notepad, TextEdit or Dreamweaver (if you have basic skills in this application.) When you have completed the assignment, please upload the folder as a zipped file to the Dropbox located in the smconline.org site. Please be sure to include your last name in the name of the file when you upload it to the DropBox.

Also, answer the question in the attached Quiz 1 and upload to the “Dropbox” on smconline.org site by noon on Tuesday, September 2. Again, please be sure to include your last name in the name of the file when you upload it to the DropBox.

copyright © 2006-2008, jamie cavanaugh