Useful Links:
        
        Planning a Web Page
        Web Site Analysis

Days 2-3
Day 4
Day 5
Days 6 & 7
Day 8
       

2007 HTML Web Site Assignment
        This web site may be done on one of 3 types of approved topics, and will be done using HTML.  The site will be due approximately Dec. 6, 2007.  (That leaves you about 8 class days to create this web site.)  I expect emphasis on original information and graphics, and creative layout, using many of the tags and attributes you have learned this year.  (If you use new tags or attributes not taught, or styles, you must use comments to explain them.  If you cannot explain it, you cannot use it.)  The site should be linked well, and should give credit to resources, cited in the correct format (both Internet sites and (if applicable) books or other sources)  Be sure to create hyperlinks to Internet resources.  Use accepted design principals:  consistency, repetition, alignment, proximity, ratio of text to white space, and make sure text is readable.  To see grading scale, click here.

Design Principles Explained:

Approved Topics:  Since you still have a lot more to learn, this is going to be an informational Web site, and not the topic you might choose at the end of the year when you do your Greatest Web Site.  For this informational HTML site, you may choose one of the following types of topics:

Why These are Your Choices:  If you pick something you know something about, you will have less need to research and may have pictures you can scan and or bring in digitally.  I want the focus to be on applying HTML skills and Design Principles, not finding information.  Also, save that topic you really want to do a fantastic job on for later in spring!  So, choose something in one of these areas that you know something about!

Details of assignment by day:

2007 HTML Web Site, Days 1-2

This will be a project made up of several web pages, which together will create a web.  The web site will be done entirely in HTML.  Your web page will be on some type of pet, hobby or a place you have traveled to.  That includes a breed of dog, cat, snake, bird, fish, etc., or a city you have pictures of and know about tourist attractions, or a hobby you can explain and show photos of.  No more than 4 people may do the same specific topic in a class.  Before choosing a topic for your web site, make sure there are many web sites out there for you to use as resources (not blocked by the filter). 

Step 1:  Now that you’ve picked a topic, you will plan the web, and make a neat drawing of the hierarchy of the site (4 page minimum).  You must create a home page, (index.html), a credits page with links to sources (credits.html), and an information page on the breed, hobby or city (info.html).  The last required page will be your choice.  (You may choose to do a photo gallery, or tell how to care for the type of animal, or explain the history of this hobby, for example.)  Imagine how you want the pages to look and where you will place pictures, text, or tables.  You may wish to look at the grading rubric when planning your site.  Required items in your plan include:

(1) a neat drawing of your layout ideas for the main page (index.html),

(2) layout drawings for other pages you will create (tell me what the file names will be),

(3) where the title or banner will be on each page, and

(4) show location for navigation on all pages (draw small rectangles for buttons for plan),

(5) some idea of where you intend to put pictures and information on these pages.  (not just straight text, so break information up with some pictures and possibly bullets or other lists.)

(6) At the top, write your heading and topic for the site.  This plan is due by the beginning of Nov. 16/19 class (2007).  Also, keep a copy for yourself, and let me know if you need to make some revisions later. 

Step 2:  On your Z drive, inside the WebMastering_YourName folder, create a new folder called Class_HTML_YourName.  (Class means A1 or B2, for example.  B4, please use B4H or B4G for Hubert or Gilbert.)  Inside that, create a folder called images for images you use or create for this project.  Create a Word file, saved to your Z drive (inside the Class_HTML_YourName folder) as WebNotes.doc.  Keep this open while you research and work on your site.  Use it to take notes and keep up with Web Resources.

Step 3:  Now it is time to surf around looking for information on the chosen topic.  Use search engines to look for information on the subject you chose: Breed Information for a (chosen type of pet), or How to Information on (a type of hobby), or What to Do/ Recommendations on (city of choice).   As you find information, copy and paste information into the WebNotes.doc file, and be sure to paste the URL, author, title and date into your Word file.  (You will need it later!)  Remember that you will need to reword the text in your own words (below your copied information) (or you will be guilty of plagiarism).  As you find pictures that you might want to use, right-click them and save to the images folder inside Class_HTML_YourName folder.  As you find the pictures, also paste the URL & author of the site where you found them, file name and date in your Word file.  See Citing Sources handout for the information you will need later.  (Do not paste the pictures into your Word file.)  You will turn in this Word file soon, so make sure you make progress here.

Step 4:  Using Notepad, create the home page with basic tags in your Class_HTML_YourName folder.  The main page will be saved as index.html.  (Not home, not main, and not the name of your pet, hobby or city)  With the creation of your first page, choose the background image or background color you want as well as font(s) and colors.  The site should have a consistent look and color scheme.  As you decide on your color scheme, know that I want you to use original graphic buttons and graphic banners at the top of each page, if time permits, so plan these colors, too.   Once you do the code for your colors and background, save the file, and then File, Save as info.html and credits.html.  Now you have created 3 pages with the basic tags and colors.  Don't forget to change the titles on each to something appropriate.  The last required page will vary according to your plans, and you may do more pages than four, but don't plan 7 or more, because you won't get that far.  If you plan to do a frameset, create pages on day 2, asking for help as needed.  (This will help when we start doing navigation.)

HTML Web Site, Days 2-3  (Day 2-taking notes, keeping sources, rewording)

By the end of Day 2, make sure you have done your plan, created folders and files, and saved a Word file called WebNotes.doc.  If you have not already created all needed pages, it is time to do so.  Read step 4 of Day 1.  Research more today, as needed.

By day, 3, move on to navigation for your site: )Day 3 - how to create graphic navigation and get it linking to other pages)

Before we progress far on developing this site, many of you want to start connecting the pages with hyperlinks.  The navigation for your web site is related to your overall layout, so hopefully, you decided this in your plans.  One possibility is to simply make a table, with one row, and many cells, adding linking text (with hyperlinks) to the various pages you have made.  I suggest you create some graphic buttons and add text to them, putting the buttons in a table, and making each graphic button link to appropriate pages.  Text links will earn a lower score, unless you have extenuating circumstances.

Designing a graphic button:  You can create a basic button in Photoshop; I advise no wider than 100 pixels. I suggest you save the first button as a PSD, with the longest text you need on it.  That way, if you think of another button you want (or you misspell one), you can still create another one.  Save the file (as PSD) with this text there.  Then, choose File, Save for Web, and save the actual graphics for your buttons as JPGs or GIFs.  For example, you may have a button with transparent edges so it has to be a GIF.  After you save the first button, you can double-click the T icon in your layers palette and type in text for another button.  File, Save for Web and choose an appropriate file name.  Repeat until you make all needed buttons.  Create buttons for pages such as Information, Credits, Home, and the other page(s) you have planned at the moment.  You might Save for Web as info.gif or info_button.gif.  (Choose file names that make sense to you.) You will be creating 4 pages or more.

Next are some suggestions on how to insert these images in your page and make them hyperlinks.  The basic format is (assuming a lot of file names, so substitute your own file names):

<a href=”credits.html”><img src=”images/credits_button.gif”></a>  Use shortest relative references!!!

Now, to put this tag set in a horizontal table, you will create the table, row and cells, and put this in a cell.  

<table>
  <tr>
     <td> <a href=”credits.html”><img src=”images/credits_button.gif”></a> </td>
     <td> another link here </td>   etc…….

</tr></table>

Now, to put these images in a vertical column on the left side, you will create the table, with 1 row and 2 cells, and insert the images in the left cell, separated by BR tags or P tags.   

Remember to center align your table for better balance, and you may need to center the buttons in the cells.  I recommend designing tables with a border of 1, and then changing it to a border of 0 later, if you don't wish to see the border.

The next problem is that you will get a bright blue border around the graphic button, and you may not want this.  This may be solved by adding border="0" to the image attributes.

After you get the images created, insert them in your page layout (img src=), adding links (a href=)to appropriate files, alt text, width or anything else, background color or images, etc. 

You can then File, Save as and save your Notepad file to create other needed files.  Be sure you change the titles and some other information to make the page unique.  Once all pages are created, check your links to all pages.  Print a web page with your navigation on it & print the HTML.  This is the next grade.

When navigation is finished, continue to research so you can develop your information page soon.  Your Word file needs web resources, dates, and reworded information.  You must print this with a good deal of information in your own words on or before Day 5. (See Day 4 for more information on developing this web page.)  That is the next web page you will be turning in.

HTML Web Site, Day 4  (Finish getting all pages with graphic navigation and links that work.  Info page will be due next.)

If you have not finished inserting navigation and creating links to all pages, read Day 3 and finish this.  Today, your new goal is that you will use your reworded information to work on info.html (or whatever you are naming your page with information) – This should have information about your subject, and graphics (such as size, weight, food, habitat for a pet, such as major tourist attractions for a city, or such as materials needed for a hobby).  This is a good page for an Ordered/Unordered list and/or table(s).  If necessary, you may use a temporary H1 heading at the top, which you will later replace with a graphic banner, unless you run out of time.

Bullets and/or numbered lists should be left-aligned.  Don’t center them!  However, if you want to do something next to a bulleted or numbered list, use a table.  You can put the list in the left cell and a graphic in the right cell, for example.  This would definitely make your web page more interesting to look at, and balance the layout, so it is not “left-heavy.” 

Don’t just give lots of information about dachshunds or coin collecting in an unbroken, unorganized stream of text.  That's boring, and no one will want to read the large blob of information.  Break the information up into smaller chunks by subtopics, and use subheadings.  You can put them in cells of a table, and add some graphics.  Or, you can put your larger bold topic in the thin left cell, with related information in the right cell (next to it.)  You could bookmark the topics and hyperlink to them from the top of the page, making it easier for the viewer to find what they are looking for.  Remember to summarize and reword the information you find in your own words.  I will check out your sources, and if you don't give me specific links to your sources, I will assume plagiarism.

Now that you have probably added colors to some of your pages, you may want to make sure you've done the same as you develop this page.  The site needs to have a pretty consistent look throughout, so a visitor does not think they have left the site when they take a link.  You may wish to add pictures that fit the subject of this page, such as pictures of different types of dachshunds, stamps (for stamp collecting hobby) or tourist attractions.  If you use a table, you can add a label directly below the picture (giving a caption), by adding a <br> tag after the <img> tag, adding some text, and centering all of this. 

Remember, save all images in the images folder for the HTML web site.  That means that you will insert images with tags, such as <img src=”images/filename.gif”> Use relative references when inserting  images and linking to other web pages!  We should not see references in your HTML to Z:, to Class_HTML_YourName, or any other folder outside of Class_HTML_YourName folder.  All graphics should be .jpg or .gif format, and should be cropped as needed.  Add the source page URL to your list of web pages to use in Credits.html, with a description of the graphic, as well as the date you found it, for any images found on the Web.

Work with layout and experiment with layout until you get the look you like.  Be creative!!!

HTML Web Site, Day 5  (info page due, start home page)

Today, you will finish up work from previous days, and if time allows, work on the creation of a dynamic home page (index.html).  Many experts recommend that home pages should not require much, if any, vertical scrolling.  This page must provide navigation to other pages in the site, and should “tell ‘em what you’re gonna tell ‘em” in a very brief format.  At least, state the purpose of your site, and/or what the site visitor will find there.  Do not just put a banner at the top, a picture centered below it and a navigation bar centered below that!  Think of more interesting ways to use the space!  Be original!  Entice your audience to want to see the rest of your site.  A spelling error on the main page would not make us want to see the rest.

Hopefully you will have extra time, so see Days 6-8.

HTML Web Site, Day 6  (finish home page, graphic banners?)

Today, what you do will vary.  If you have not started on your home page (index.html), it is time to get this done.  See page 5 directions.  Once finished, you should be creating the other page(s) that you chose in your plan.  If you need to go back and finish Days 4 or 5, then do so, but look at the rubric to see what has the most points if you are running out of time.  

If you wish to create graphic banners (skip this if you are behind!), you might wish to use Photoshop to create a graphic banner. (Save the PSD!)  Save (for web) the basic graphic with different text for each page.  Or, you may want to search for free banners, or use such sites as FlamingText.com or CoolText.com.  Remember not to overstimulate with animation.  There should be no more than 2 moving things on a screen at a time.  Stay with your color and design scheme.

HTML Web Site, Days 7-8  (day 7, other page(s), day 8, site sources and tweek site)

On day 7, if you have pages other than your credits page to do, work on these.  Towards the end of class, it would be best to move on to your credits page.  Get out your handout called Citing Internet Resources.  This, as well as your Practice 6, will guide you in citing your sources in the correct format and making links to the web pages that your found information and graphics to use.  You should have this information in your Word file. 

The correct format for an image will basically follow this pattern:

Author of site, or graphic, if known (if not, give the root directory of the site).  "Description or name of graphic(s)."  [online image(s)].  Date image(s) harvested.  <a href="http://url of site"> Some linking text (should be URL, unless it is really long) </a>.  Reminder:  The link must go to specific source of information or graphic.  If I don't find it, I assume plagiarism.

If you have time, make it look nice by working with layout, adding pictures, etc.  This is a critical page.  It is important that your links are accurate and link to the correct source.

Open Internet Explorer (again) and take the link to http://www.ratz.com/features.html which points out good and bad features of web sites.  Do you have any of the bad qualities in yours?

Day 8 is the day to finish and tweak your site, so read the rubric that you will be graded with, and check the following:

This web site is for use of the Brazoswood Web Mastering classes.  If you have questions,  you may contact Pat Hubert. 

GIF Source: BestAnimations.com. "Dog animation." [online image] 9-15-1999. http://www.bestanimations.com/Animals/Mammals/Dogs/Dogs.html .