Project #2 - HTML5 Hyperlinks

If you have no experience creating web pages using manual coding, you will need to allow yourself extra study time. Make sure you fully understand the SFTP proceedure to upload all your documents to the server and if you are needing help ask now and do not wait. Every student must have these basic skills from the beginning and I expect each of you to follow the proper proceedure to submit your homework to cobra.
Ask me for help early to allow yourself plenty of time to get the answers you need.

For students who have decided to continue as a CIS 152 student this semester, it is important to become familiar with the w3schools.com website. Practice navigating around the website to learn as much about coding rules as possible. You may need more practice with coding than is required for this project. It is your responsibility to take the time necessary to become comfortable with the terminology and rules that follow standards to produce clean, valid coding. Use W3Schools, the lecture notes and your reference book about coding (if you have one) to learn the concepts presented in this project. By the end of this project you should understand:

Links to Lecture Notes

(If you are reading these instructions from hard copy, visit the class web page for the links.)


LAB Activities

Create a new web page

(While viewing the project instructions online)
Download the images that you see displaying below into the webcoding folder you used in the previous project.

image csit   image home button   image next button  

Using a text editor (Notepad/TextWrangler), open the web page that you created for Project 1. Use the SAVE AS command to save the document as project2.html using the new file as a starting point for project 2. Be sure to save this file into the webcoding folder that you created for project 1. Remember to use all lowercase in the filename and folder names for this course. Since this page will be about an internship offer at a local business, Green Purpose, change the content between the <title> </title> tags so that it reads: Green Purpose Internship.

In the project2.html code, delete all of the code and content that is BETWEEN the <body> and </body> tags. (Keep the <body> </body> and </html> tags.) This gives you the structure codes to start a new web page.

Download text content for project2.html page:

The text content for the <body> section of the project2.html page (without coding) is available to copy and paste from a text file online at:

http://www.csit.parkland.edu/~ddallas/cis152/webdesign/projects/project2.txt

While viewing the text content online, select all of the text, choose the copy command, open the document you have created called project2.html and paste the content into the page AFTER the <body> tag.

Add coding to the elements in the body of the page so that it looks like the screenshot below. Instructions continue after the screenshot to give you hints about what coding is necessary.

Your page should have the formatting for headings, paragraphs, lists and links as shown in the screenshot.
The screenshot is provided so you know approximately what your page should look like when it is done.
You should not make any changes to the images. The size of the images may look slightly different when viewed on your monitor.
The lines of the paragraphs will end at a different place based on the size of your monitor and screen resolution. Do not force lines to end exactly as the screenshot.
The project2.html page should look similar to this:

image screen shot of webpage

Some hints to help you with the coding:


HTML 5 page

http://www.w3schools.com/html/html5_intro.asp

After completing the project2.html page, use the SAVE AS command to save the document as html5.html. Be sure to save this file into the webcoding folder that you used for project1.html and project2.html files. This page will have the same content as the project2.html page but will have a single image as a link back to the home page.

Use the instructions that follow to create the content for the HTML 5 page:

With the html5.html page open in Notepad you can delete the link and image for the HTML 5 button. The "Home" button is all that is needed for this page.

Go online and find a suitable image to replace the current computer on desktop image. Make sure the image size remains similar and appropriate for the page. Add the appropriate attributes for title, alt, width, and height but use a url for the image instead of one kept within your webcoding folder. Use w3 schools for help: http://www.w3schools.com/tags/att_img_src.asp


Edit the web page that you created for the previous project:

When you view the Project 1 page, there should be a Next button (and a copyright notice) at the end of the page. When you click on the Next button, it should take you to the project2.html page.

Screenshot for project1.html page that has been edited.

image red arrow
Edit, if necessary. Save changes.


On all three pages:

To make code more "readable", start each new block element of your page on a new line with a blank line between elements. The vertical space will not show in the browser, but putting new elements on a new line in code makes it much easier to proofread the code, edit it and grade it! (Headings and paragraphs are "block" elements so whenever you start a heading or a paragraph, it will start a new line with a blank line before it. It is important to remember that the blank line appears in the browser view because of the type of element, NOT because you may have hit the ENTER key on the keyboard to put the code for the element on a new line in the code....)

Please do not add extra elements, color, tables, scripts, etc. to your pages.  They are supposed to be PLAIN!  Adding extra elements creates more code for me to check through, adds to download time, and uses more storage space.  We will add more later.  Keep these very simple! 

Save the files. Use a browser to view the page. Test the hyperlinks.
When you click on the Home button on the project2.html page, it should take you to the page you created for Project 1.
When you click on the HTML 5 button, it should take you to the page you created called html5.html.

The html5.html page will look just like the project2.html page except the HTML5 button at the bottom of the page should be removed and a url linked image replaces the computer on desktop image used on project2 page.


Validate and proofread your code

Any web pages with validation errors will result in an automatic 10 point reduction in your score on projects. Why? If you have not resolved validation errors for your project, the project is incomplete. If you need help with validation errors, you must report them one at a time. Look at the first validation error given. Report what the validator gives you as an error message. Make your web pages available for me to see by uploading your folder to the Parkland server and sending the URL for the project2.html for me to view. (I can view your other pages by using your hyperlinks on the pages.)



Uploading files

For this project, you should upload your webcoding folder to the Parkland server using WinScp (or an equivalent program if you are using a Mac). Be sure to open the public_html folder before uploading your webcoding folder. Do NOT drop your webcoding folder on top of the existing webcoding folder. Drop it in a BLANK area in the right pane. You will be given a prompt asking if you want to overwrite the existing files on the server. You do! This updates the files on the server to match what you have on your storage device. In your webcoding folder, there should be seven files related to this project:

If you have followed the project instructions completely, the public URL for the file you create with this project should be similar to:
http://www.csit.parkland.edu/~yourlogin#/webcoding/project2.html



Submit Project

Lab:

Use the Drop Box in Cobra to submit your URL for your project2.html page. The best way to be sure that you are submitting an accurate URL is to view your page in a browser after publishing it to the CSIT server. When your page is viewing as a published web page, the URL will be in the address bar of the browser window. Copy and paste the URL from the address bar to the "Comments" area of the drop box using the Insert Quicklink toolbar button. Use the instructions given with the Dropbox to be sure your URL is submitted properly. When you paste your URL into the URL textbox of the Insert Quicklink dialog box, it may duplicate the http text at the beginning of the URL or at the end. After you have pasted your URL into the textbox, view the beginning and end of the URL to make sure there is only one http:// included.

Please send the Notepad file of your code for the project2.html page as an attachment in the Drop Box.

The URL will be used to view your published web pages for grading. You will lose points for not uploading your web page properly or sending a URL that does not open your page. If you are having difficulty with the uploading procedure, you must make an appointment or stop by during office hours to get help.

Quiz:

Take the quiz 2 using your Cobra account for this course.It is open notes. You are allowed multiple attempts to take the quiz. Your time starts as soon as the quiz loads. You cannot save your answers and return to take the remainder of the quiz at a later time. Once the quiz starts, you must submit all of your answers.


Reminder: Late projects will receive no points unless you discuss why your project will be late before the due date.