Draft Website

In this assignment, you will use HTML to create a draft website portfolio. In the next assignment you will personalize it and stylize it.

Here is an example portfolio web site like you will do in the next assignment:

The web sites you make in this current assignment will be similar to these, but more basic. We show you the above final products so you know what you will have after this current assignment and the next assignment.

Step 1: Do Khan and W3CSchools Material In The Lesson For The Week

Complete the Lesson for this Week. This assignment assumes you have completed the lesson that takes you through the Khan Academy introduction to HTML programming and that you were logged into the Khan with your gmail address as instructed in the lesson. It further assumes that you have added yourself the Khan Academy "class" as specified by your instructor. There are points in this assignment that are allocated for you having done the assigned Khan material by the assigned deadline.

Step 2: Create a Web Server Account On Github Pages

Github is the most popular portal for software source code management in the world. It provides access control and several collaboration features such as bug tracking, feature requests, task management, and wikis for every project. Github reports having over 28 million users and 57 million repositories, all of them free for you to browse. You will create a free Github account that provides you with unlimited repositories and storage space. Part of this account is Github Pages, which is a web server that allows you to publish web pages on the Internet.

Follow the steps in this tutorial to create a GitHub account and create index.html and javascripts.html starter web pages on Github Pages.

Step 3: Create a Draft HTML Website

Make the following changes to your index.html default web page. This will be your website's Home page.

Title. Give the document a title (title appears in browser tab, not on web page).

Banner. Add a banner image. Download this banner image (right click and save it), then upload it to your web server.
Use this banner in this assignment. You will make your own banner in the next assignment. .

Navigation Buttons. Add a table below the banner that contains button images Each button should be in its own table cell. You will link these buttons to their respective web pages later in this assignment. Download these button images and upload them to your web server.

Headline. Add a headline (e.g. Welcome to my Page!) using a heading tag.

Paragraph. Write one or more paragraphs describing the website.

Create Additional Web Pages. The additional web pages must each contain a title, the banner, the navigation buttons, a headline, and a descriptive paragraph. *HINT: Copy the code from your index.html page and modify it to create the additional pages.

Create an additional web page for each of the following:
- Javascripts. This is where you will insert links to your Javascript programs. Leave this page blank except for the required items (title, banner, navigation, etc.). Save this page as javascripts.html.
- Apps. This is where you will insert links to the Apps that you write in this course. Leave this page mostly blank except for the required items. Save this page as apps.html.
- About Me. This page will contain information about you. Leave this page mostly blank except for the required items. Save this page as about.html.

Hyperlink the Navigation Buttons. Now that you have created all four web pages that will make up your website, go back to make the Navigation Buttons (i.e. Home, Javascripts, Apps, and About Me) hyperlinks to their respective web pages. For example, the home.png button should be a hyperlink to the index.html page. The javascripts.png button should be a hyperlink to the javascripts.html page, and so on.