Lab 1 – Creating a Web Page



Lab 1 – Creating a Web Page

CSCE 102

General information

Read the entire assignment before you start. You will need to save the file in the correct directory (folder) as soon as you type the first few tags so that you can test it as you work and so that you don’t loose your work if the system goes down. Include the closing tags when you enter the opening tags so that you will not forget them. If you are missing the closing html tag, , or the closing body tag, , it may not work or it may work now but not after you add other tags.

Creating the assignments page:

In this lab, you will create a web page using the text editor, Notepad. Using any type of HTML editor for this class is not allowed. Name your file assignments.html. It is important that you name this web page exactly the name given.

This page must include:

▪ The XML declaration and Document Type Definition (DTD) from page 31.

▪ The three required XHTML tags (, , ) with their closing tags. ***Remember to include the XML namespace in the opening tag from page 31.

▪ A comment near the top and bottom of the code with your name, section number, email address, the name of your lab instructor, dorm name or street address and hometown.

▪ A comment within the head element that contains your user id (login name) followed by today’s date.

▪ An appropriate title (using the tag).

▪ Your name, user id, section number and lab instructor’s name displayed on the page using the heading tags (, , and ).

▪ Three short paragraphs. One about each of the following: your computer experience, computer courses you have taken, and how computers are used in your major. Be sure to use the paragraph tag () when creating the paragraphs.

Saving this File:

1. Create a LABS folder on your H: drive.

2. Save this file in that LABS folder on your H: drive.

3. You will add a link (which we will discuss later) to this page for each lab and project you are assigned this semester.

We will also be making occasional modifications to this page as the semester progresses.

Lab 1a – More tags

Create another HTML document

It must include:

▪ The XML header and Document Type Definition.

▪ The three required XHTML tags ( ) with their closing tags. Remember to include the XML namespace in the opening tag. Save the file. (*See the information below saving this file.)

▪ A comment near the top and bottom of the code with your name, section number, email address, the name of your lab instructor, dorm name or street address, and hometown.

▪ A comment within the head element that contains your user id (login name) followed by today’s date.

▪ A title; using the tag, put Lab 1, your email address, and your section number in the title.

NOTE: The information above will be required for every HTML page you create for this class

Trying more tags:

▪ Locate two quotes you like from two different people. Use the blockquote element to include these quotes in your page. Make sure you include the person to whom the quote is attributed. (If you can’t remember the words, look on the web.)

▪ Use the tag to display the name of your favorite book.

▪ Use the tag to display the author of the book.

▪ Add some text about something that you are interested in and use all of the following tags at least once: p, h3, h4, h5, h6, em, strong, br, big, small. Make it interesting and look nice.

▪ Display your name, section number, lab instructor’s name and dorm or street name at the bottom of the page using heading tags.

*Saving this file:

Save this file in your LABS folder as Lab1a.html.

Lab 1b – Adding Links and Images

This file is to be stored in the directory (folder) that you created on you H drive named LABS. You should save this file as Lab1b.html. Read the entire assignment before you start.

The page that you create for lab 2 must include:

▪ The XML header and Document Type Definition (Page31).

▪ The three required XHTML tags ( ) with their closing tags. Remember to include the XML namespace in the opening tag (Page31).

▪ A comment near the top and bottom of the code with your name, section number, email address, lab instructor’s name and your user id (login name).

▪ A comment within the head element that contains today’s date and your login name.

▪ Use the tag to include an appropriate title.

NOTE: The information above will be required for every page you create for this class.

Part 1 (lab2a.html) –Images

▪ Search online for sources discussing “Net Neutrality”

▪ Include a proper header for your page using a header tag.

▪ Insert a paragraph explaining the concept of Net Neutrality.

▪ Insert a second paragraph discussing your opinions of the concept, good or bad. The paragraphs should be well written, and informative.

▪ Include two links to pages related to Net Neutrality.

▪ Use the following tags in your page at least once: h1, h2, h5, p, em, strong, br, big, small

▪ Include a proper header, and a short paragraph about one topic of interest to you.

▪ Download two images, from the Web, that are related to your topic, place them adjacent to each other on the Web page. (All on one line.)

▪ Include a paragraph below the images that describes the images and references the sites (Give the Web addresses.) where you found pictures.

▪ On a line by itself, include another image that is also related to the topic.

▪ Below it, give a reference stating what the picture is of and where you found it.

▪ Use the break tag to create some blank lines.

▪ Below the blank lines insert links to the two files that you created for Lab 1.

▪ Insert a link to the USC Computer Science Department Homepage:

▪ Insert a link to your class Web page

▪ Insert a link to

Part 2 –Linking from your assignments page

▪ Open your file named assignments.html in Notepad and at the bottom of the page add a links to each of the other files that you have created.

▪ At the top of the page add a picture of you. You can use a digital image or you can use the scanner at the front of the room.

Note: This assignment is similar to Exercises 2.1-2.3 on pages 52-53 of your textbook.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download