Mb387 - web design management - create an html page about

Question

Refer to the posted class notes, code from projects done in class, the course bookmarks and your textbook for help with this project. Please double-check all of your HTML code before uploading your files to your FTP account, and test your pages using Firefox and either Chrome or Safari after they have been uploaded to the server. Please read the Project Guidelines beginning on p. 4 before beginning any work on this project.

Create a folder on your Desktop named midterm. All of the files that you create and use for this project should be saved inside of this folder. Please review the Project Guidelines included at the end of these instructions before you begin to be sure that your choice of topic and content meets these requirements!

Aside from logos and navigation buttons, the text, images and any other content must be different on each page.

Create the first page

1. Create an HTML page about a topic of your choice. This page must contain a header (or logo) and three or more paragraphs of original text related to your topic.

This must be "real" text content. Lorem Ipsum text will not be accepted. The majority of this text should be original text of your own - not copied from another web site or other source. If you do use any text or images from an existing web site, please include links back to the original web page.

2. Replace any styled quotes, apostrophes and/or dashes that may be present in this text. Replace any special characters in the text with HTML Character Entity Codes. Double-check all spelling, punctuation, and capitalization in the text.

3. Set the margin attributes in the tag to something other than the defaults.

4. Add any related links and/or other applicable text tags (bold, italic, blockquotes, lists, etc.) to this text to make it more interactive. Your midterm project should include a total of three or more links to different outside web sites related to your topic using words included in the text on your pages. Though you are welcome to use them, links to social media web sites will not count for this requirement. These links should open in new browser windows or tabs. Save and test these links.

5. Select a color scheme of 3 - 5 colors that will be used on all pages to tie them together with a consistent look. No default colors may be used for text (black), links (blue), or visited links (purplish/pink). The only exception is if you want to use a white background*.

IMPORTANT: Be sure to test these colors and make any necessary adjustments so that all text, links and visited links are easy to read on the background color or image.

*Backgrounds may be solid colors, tiled background images as done in class, or background images that have been optimized for the web (resolution, file size, etc.). Refer to the posted Bookmarks for links to download free images and online tools for creating and editing backgrounds and other images.

Avoid color combinations such as red backgrounds with blue text that can make the text, links, or visited links difficult to read. Visited link colors should always be considered in your chosen color scheme as the default color can be difficult to read on some backgrounds and may clash with your overall color scheme. Don't be afraid to venture beyond primary colors! For help selecting colors, use one of the color scheme generators included in the posted Bookmarks.

6. Set the font for all text to something other than the default Times New Roman font. You may use more than one font on the page, but always include a Web-safe font as an option in all font typeface declarations.

7. Find three or more full-sized images related to your topic and save them to your Desktop. These images should be at least 500 pixels in width or height, depending on whether the image is vertical or horizontal.

8. Use the Preview application or one of the image-related applications in the posted Bookmarks to optimize these images for the Web as specified in the posted class notes for Images 1. This requires consideration regarding image file types, dimensions, resolution, and overall image file size. Save the optimized versions of the image files inside of your midterm folder.

9. Create thumbnail versions (usually 80-100 pixels in width by 80-100 pixels in height) of the full-sized images. Save these in your midterm folder, then add the required HTML to display these on your page after the header (or logo). Be sure to include all of the required attributes inside of each image tag.

10. Add the thumbnail images to the HTML page and set them up to open the optimized, full-sized versions of the related images in new browser windows or tabs when they are clicked. You may use the Preview application or one of the image-related applications in the posted Bookmarks to help you to create the thumbnail images.

Your completed first page should look something like this image (except that you have not added the navigation header yet):

Create the second page

11. Create a second HTML page that uses the same background, colors, margins, etc. as the first page, but the content should include: a header (or logo), three or more paragraphs of text, and an image with text wrapping around it (as explained in the steps below).

12. Replace any styled quotes, apostrophes and/or dashes that may be present in the text, and replace any special characters in the text with HTML Character Entity Codes. Double-check all spelling, punctuation, and capitalization in the text.

13. Set the margin attributes in the tag to match the first page. Set the fonts for all text to match the first page.

14. Find one more image related to your topic, and optimize it for the Web.
Resize the image so it is between 200 - 300 pixels in width. Save the optimized version of the image inside of your midterm folder.

15. Add the optimized image to the second page immediately before the three or more paragraphs of text.
To force the text to wrap around the image, add the required attribute to the image tag to force the text to wrap around it on the left or right. If needed, add the optional attributes to the image tag to move the text away from the edges of the image.

16. Add any related links and/or other applicable text tags (bold, italic, blockquotes, lists, etc.) to this text to make it more interactive. Your midterm project should include a total of three or more links to different outside web sites related to your topic using words included in the text on your pages. Though you are welcome to include them, links to social media web sites will not count for this requirement. These links should open in new browser windows or tabs. Save and test these links.

Your completed second page should look similar to the image at the top of the next page (except that you will have 3 or more paragraphs of text and you have not added the navigation yet).:

17. Before moving on, make sure that all of your optimized image files and both of your HTML pages are inside of your midterm folder, all of the images are displaying, the thumbnail image links and other links are working, fonts are displaying, etc.

Create the third page

18. Create a third HTML page containing content of your choice. This page must contain more than two images and two paragraphs of text.

19. Set the colors, fonts, margins, etc. to match the first two pages.

20. Replace any styled quotes, apostrophes and/or dashes that may be present in the text. Replace any other special characters in the text with HTML Character Entity Codes. Double-check all spelling, punctuation, and capitalization in this text.

Add the navigation links

21. Starting with the first HTML page, add navigation links after the header (or logo) on all three HTML pages. These links should open in the same browser window or tab. All three links should be included on all pages.

You may create text links for this purpose, or create navigation buttons using Pixlr or one of the graphics or button builder tools included in the course Bookmarks. Photoshop is also available in the 404 Computer Lab.

If you use text links, include HTML Character Entity Codes to separate the links so they do not appear right next to one another. ex. non-breaking spaces, dashes, pipe characters, etc.

To set up the navigation links on the first page: *link names should be descriptive of the content on each page

- The value for the href attribute for the first navigation link on the first page should be set to "#" (as demonstrated in class). This will force any text to display using the specified link and vlink colors, but will not go anywhere when it is clicked. This will tell the user that this link is for the page that they are currently viewing

- The second link should be set up to take the user to the second page.

- The third link should be set up to take the user to the third page.

22. Add navigation links to the second HTML page that are displayed in the same order as those that you just created on the first page, but set them up so the first link will take the user back to the first page, and the second link will function as the "current page" link. The third link should take the user to the third page.

Follow these same steps to set up the navigation on the third page.

23. Test the navigation links on all pages to make sure that they are working correctly.

24. If you haven't already done so, add links to at least three different outside web sites related to your topic using words/topics included in the text the pages. Though you are welcome to use them, links to social media web sites will not count for this requirement. These links should open in new browser windows or tabs. Save and test these links.

25. Double-check that the Transitional HTML 4.01 doc type is included at the top of all three HTML pages, and that you have included a unique title between the