HTML Project
WEB DESIGN—PROJECT 2: HTML SITES
For this project you will building a basic website using HTML code. You must use code only, an be able to show your code as part of the project. Prior to starting we will spend some time learning terminology an reviewing processes and design concepts.
PURPOSE: A basic understanding of HTML code is important to web development at any level to provide a foundation for understanding how browsers and data interact, as well as a tool for troubleshooting problems in sites.
Prior to beginning the project students will develop an understanding of and complete activities related to the following:
basic vocabulary relating to the internet and web design
html coding and testing principles
basic site planning
Once you have completed the introductory assignments and planning, you will complete the following project:
Using simple HTML code, build a website with 4 pages as follows:
- Home page with introductory information about your topic
- A picture page with at least 3 pictures and captions—be sure to credit as well
- A links page with 5 annotated links
- A fourth page that uses at least 3 elements different from the other pages that is your own original idea
EXTRA CREDIT—write your site in XHTML
Here are some great resources:
Interactive HTML Tutorial: you will use this the most as a guide for this project.
HTML BASICS: another tutorial site—use the one you like best, or both!!
HTML Dog: Practice guide and resources for HTML and CSS
Webmonkey: this cheat sheet can be used to find more tags
XHTML Resources
W3C XHTML Tutorial: the most comprehensive resource for web developers, but a bit difficult to follow
HTML Reference: lists of required and common tags for use in coding
INSTRUCTIONS FOR THE PROJECT
1. SET UP YOUR SITE FOLDER You need to be sure you have a website folder that you save all your pages with a subfolder for pictures and images. Never rename, delete, or move any parts of your site once links are established, or it won’t work!!
2. MAKE A TEMPLATE PAGE WITH NOTEPAD Having a simple page with the basics is like using a template—in web design it is called a shell. Save as template.txt or shell.txt. This page should be where you determine the colors for your background and text and have the basic code saved for quicker page editing on future pages.
3. MAKE YOUR HOME PAGE Your home page must have a title and some basic text. It should also have links to the other pages, we will add this after the pages have been created. For now, just Remember 2 or more paragraphs. Save as index.htm and test in IE.
4. MAKE YOUR LINKS PAGE Make a page with 5 annotated links to other websites that are related to your chosen topic. Save as links.htm and test in IE.
5. ADD YOUR PICTURES PAGE First make sure that you have you pictures saved and named properly in your site folder. Make a page that has at least three pictures. Be sure there is text describing the picture as well as credit. Save as pictures.htm and test in IE.
6. CREATE AT LEAST ONE MORE PAGE Come up with an idea for additional content and make your 4th page. Save and test it with an appropriate name. This page must use at least 3 tags that we have not previously talked about in class and applied to the other pages.
8. MAKE A DIRECTORY ON EACH PAGE Make a table or list on you index page with hyperlinks to the other 3 pages. Copy and paste the code into each of your other pages and modify as needed.
Remember to test often and follow guidelines for naming files.