HTML Basics

Readings

Tech Radar: HTML5: what is it? (Links to an external site.).

Adobe Understand the anatomy of a website (Links to an external site.).

W3C About (Links to an external site.). Read the mission and facts links as well.

W3Schools HTML5 Tutorial (Links to an external site.). Read and try out the examples, from the top through the section on paragraphs. Use the guideline to come up with your own 5 paged website.

Adobe: Preview in browsers and on mobile devices (Links to an external site.).

The most recent instructions on how to publish to MyDrive are listed here: http://novaonline.nvcc.edu/Descriptions/ite115common/mydrive_instructions.pdf (Links to an external site.)

PART I

It’s time to write up a plan for your class project. You will be uploading a Word or PDF file. For most students, this will be around three pages or more with the cover page (10 points).

It is best to plan for an informational website about a business, an organization, or an interest of yours. We don’t cover e-commerce here, so don’t plan for products and a shopping cart. You can showcase products, but you won’t be able to sell them on your website without full e-commerce functionality.

You can determine the format, but for full credit you should have the following:

• A cover page with your name, class, and the date .
• The following headings with narrative and/or pictures:

Purpose: Provide the purpose of your website in a few sentences (5 points).

Website Name: You don’t have to pick a URL, but what is the title of your website? Why did you choose that name? Write a few sentences (5 points).

Similar or Competitor Websites: Find at least one and analyze what they did well and what they didn’t. How can that apply to your website? Write at least a paragraph (5 points).

Demographics: Who would be interested spending some time on your website? College students? Retired people? People wanting to learn about your interest or ideas? Write at least a paragraph (5 points).

Pages: Plan on at least a home page, a feedback/contact page, and three additional pages that will be accessed from a navigation bar. Provide a title and summary sentence of what content will go on each page (5 points). If you wish to include more pages or have second-level pages, you may do that, but keep in mind that time is limited. Include a thumbnail (Links to an external site.) (5 points). It may be hand-drawn or electronic.

Wireframe: Review the site sections (Links to an external site.) on wireframes. Include your final wireframe. It may be hand-drawn or electronic. Include a few sentences explaining what you did (20 points).

PART II

The time has come!

Create your home page. You may modify an existing template if you wish. I like the ones here (Links to an external site.) because they are simple.

• Plan for a navigation area at the top.
• Your home page should make it clear what your website is about.
• Plan for components as shown in your book. Don’t do just a single area of text. Use tables to create sections of material. (5 points)
• Name your home page like this: home.html. (5 points)
• You need a title area and at least two paragraphs of text (10 points).

Take your home page and do the following.

1. Implement a navigation bar with links to at least five pages: home page, three additional pages, and a feedback/contact page. Plan what you will call each of the pages as you create the navigation. Each page will have the same navigation element. (10 points)

2. Open your home page and then save it with the name of each of your four other pages (10 points). So afterward you will have files something like this:

• home.html
• muffins.html
• cakes.html
• cookies.html
• feedback.html

3. Change the header on each of these pages so they are distinct. Include at least 2 paragraphs of content (10 points).

4. Upload your files onto on MyDrive. When you provide your MyDrive URL, it should look something like this: http://mydrive.nvcc.edu/student123/public/ITE 115/HTML Project/home.html (5 points).