CABT160 - Website Project

Website Project

Making a Simple Web Page With HTML; Edit 7 add Web Pages in Composer

Directions for the Website Project - In Class

To Be Completed In Class the Day of the Final Under Instructor Guidance.
Click Here for Printable Version

Part 1 - Making a Simple Web Page With HTML Coding in Notepad

Step 1 - Find Notepad On Your Computer

Make a folder on your desktop titled "FinalYourName".
Put all your web assets from the root folder you made in Assignment 6 into this new folder (copy them)
Find Notepad on your computer and open it by clicking on "Start":
left click Start-->Programs-->Accessories-->Notepad
Notepad will open to a blank page.

Step 2 - HTML: Create a Page Using unformatted Text & Container Tags

An HTML document has two sections or parts, the Head and the Body. The minimal tags you need for a simple Web Page are:

<html>

<head>
<title>insert a page title here</title>
</head>

<body>

Insert some content here

</body>
</html>

Type the html tags above onto the blank page in Notepad.

Save the page to your folder as: index.html

Preview in a browser according to my instructions now in-class.

Add the following code tag to any one word:

<font color="#FF0000">word</font>

Add the following code tag to any one word:

<b>word</b>

Save the page. Preview in a browser according to my instructions now in-class.

Close notepad.

Step 3 - Edit the Web Page in Composer

Follow the instructor's directions and do the following:
NOTE: Be sure to Save the page.

Open Composer as we did last week (remember SeaMonkey?)
Use either File > Open File on the Composer Menu bar or the Open button on the tools bar to open your FinalYourName folder and open the index.html page you made in Notepad.
Add a Table that is one row 600 pixels wide and one column long (width = "pixels" setting, not "% of Window"), turn the border off and put all your content into the table as well as all content we add to the page.
Add some text
Add an absolute link to a site of your choice (an http:// link)
Add a few graphics and Resize at least one of them
Change the text font
Change the page background color
Change the table background color or at least the color of one or more cells
Make a 2nd page quickly with just the words "Page 2" on it and make a relative link from each page to the other. (maybe a 2 item "menu bar")
If you are doing the Web Assets Extra Credit from Assignment 7, then do the following for an additional 5 points each of extra credit:
- Use the Logo on each page if you made one
- Use the the Text or Icon NavBar on each page and have at least 3 pages or more if necessary
- Use the Page template for at least one page
Re title the pages with the word "New:" then your title
Save everything

Extra Credit - 20 points

Step 4 - Test the Site in Your Browser and Using CORE FTP client (software), upload your HTML files and Graphic files to a Webpage server

Open your folder and double click your file titled "index.html" to see if your web page works.

For this class, we will use a FTP client called CORE, the HTML server called "webhawks", and a directory for your files called public_html. CORE is a free download. http://www.coreftp.com/

We will upload our website files to the server and be able to view them through any browser connected to the Internet, anywhere. In other words, your website will be published on the Internet...but almost no one will know it is there or what the URL is to view it because the world hasn't heard about it.
Click here for the Bus89 FTP lesson

Class Demo

These instructions will help you configure and use a campus computer or any computer that has CORE installed on it to upload your website files to our student server called "webhawks".

Site Name = webhawks
Host/IP/URL = webhawks.org
User Name = cabt160 + first 2 letters of first +first 4 letters of last name + last 4 digits of your student ID#: (Your network Account name) For example cabt160daambr1234 for me.
Password = your birthday in the form of MMDDYY (110750 for November 7th, 1950)
In the Connections Box drop down menu choose SSH/SFTP
Click the "Advanced" button then choose the "Directory/Folder" tab
- in Remote Folder box type: public_html
- in the Local Start Folder box type: Y:\Desktop (At home it would be something like C:\Documents and Settings\Desktop OR C:\Documents and Settings\daambros\Desktop)

The URL = http://webhawks.org/~cabt160daambr1234

If you are unable to do this, THEN Be Sure To copy the folder and its contents into My Faculty Turn in folder inside the CABT160 > Turnin > anyway.