Web Page Foundations

Overview

This lab walks you through creating and deploying a simple web page. The web page you create in this lab will have no functionality yet. It just contains many of the html elements you will see on most web pages today. We will turn this web page into a working web application next week. A text editor will be used to create the web page. You are welcome to use an html editor or Integrated Development Environment (IDE) to help you generate the web pages if you like. Please be sure you have read the "Creating Web Pages" competencies prior to completing this Lab. The online textbook has many html code examples that will help you become comfortable with the most popular html tags.

Learning Outcomes:

At the completion of the lab you should be able to:

1. Create a web page comprised of formatted text, images, lists, tables, hyperlinks and forms.
2. Review and analyze Apache Web server logs notating http access, http methods and http error codes

Lab Submission Requirements:

After completing this lab, you will submit a word (or PDF) document that meets all of the requirements in the description at the end of this document. In addition several html and image files along with the Apache2 access.log file will be submitted. You can submit all files in a zip file.

Virtual Machine Account Information

Your Virtual Machine has been preconfigured with all of the software you will need for this class. The default username and password are:
Username : umucsdev Password: umuc$d8v

Part 1 - Create a Web page

We will use the gedit text editor to create the web page. The web page will resemble a company home page with an introduction, some formatted text, links to other web pages, images and a form designed to gather customer information.

1. Assuming you have already launched and logged into your SDEV32Bit Virtual Machine (VM) from the Oracle VirtualBox, click on the gedit icon found on the left side of the screen of your VM.

2. After clicking the terminal icon a terminal will appear

3. To create a new document just begin typing or copying and pasting the html code from the examples. We will create the web page in several steps adding a few paragraphs and sections at time. Viewing the web page between each step will help minimize errors in the html code. To add the first section of the html web page copy and paste the following html code into the gedit editor:

Save the file in the /var/www/html/week2 folder in a file named CNShome.html. Note, you may need to create a folder named week2. Recall the /var/www/html is the location of the Apache2 web server html files. Creating separate folders for each week or application will help organize the server.

Launch the Firefox browser and run your home page by entering the following URL: localhost/CNShome.html

4. Continue to add more html code to the html file. The following code will add a table of hyperlinks to popular vendor websites:

Be sure you place this code before the end tag. When you add this, save the file and refresh the browser, the web page will take this appearance. Test the hyperlinks to verify the reach the expected websites.

5. Adding the following html code will provide images formatted in a table.

Saving and refreshing the file results in the following web page:

6. Unordered lists can be added with the following code:

7. Finally, we can add a form to collect information about the visitors to site. Keep in mind, we haven't implemented any functionality for saving or processing the form data yet. We will do that next week.

https://www.dropbox.com/s/kvyfyj0lyj6pth6/Lab_Web_Page_Foundations.rar?dl=0