BUILDING WEB PAGES USING XHTML

SCOPE OF THE EXERCISE

In this exercise, students will learn the basics of HTML and XHTML coding. Topics include basic HTML tags and rules in XHMTL, opening and closing tags, elements, and attributes, essential and common tags, lists, links, and table. Finally, students will work through nine practice learnings that cover the use of basic HTML tags and rules in XHMTL, creation of different types of lists: unordered lists and ordered lists; creation of links: using both absolute and relative paths, and create a simple table with the original purpose of displaying data in rows and columns. Lastly, students will construct a homepage that will serve as a portfolio for displaying the requirements of this course.
LEARNING OBJECTIVES

At the end of this exercise, the student should be able to: (a) know the function of the basic elements of an XHTML tag and their ordering; (b) know how to use essential tags and some common tags for adding content to a web page; (c) know how to create an ordered and unordered list using XHTML; (d) know how to create a link to another web page on the Internet and a relative link from one page to another within your website; and, (e) know how to create a simple data table.
LIST OF SOFTWARE REQUIRED

Students will use the following software to perform the tasks required in this exercise: (a) Notepad (b) Internet Explorer
DEFINITION OF TERMS

Throughout this exercise, the use of these terms mean: (a) TAGS - provide web browsers with instructions about the web page, such as where to display images, and how the document is structured. (b) ELEMENT - is an object on a page (such as a heading, paragraph, or image). (c) ATTRIBUTE - are qualities that describe an element (such as width and height). (d) NON-CONTAINER TAGS - a few tags are called non-container tags, because they don't contain any content - they stand alone. (e) URL (UNIFORM RESOURCE LOCATOR) - refers to the address of a website. (f) RELATIVE ADDRESS this type of link is one that refers only to a portion of the web address. (g) ABSOLUTE ADDRESS - this type of link is referred to as an absolute address because it is the full address of the web page. (h) TABLE BORDERS - are lines that encompass the perimeter of a table.

IT002L LABORATORY MANUAL (i) (j) (k) (l) TABLE ROW- is a horizontal line of information. TABLE COLUMN- is a vertical line of information. CELL - is an intersection of a row and a column. TABLE CAPTION - is descriptive text located above or below the table that further describes the purpose of the table.

DISCUSSION

2.01. PRE-CODING Just as there are pre-writing steps that ought to be done prior to writing an essay there are pre-coding steps to do before you code a website. Planning ahead will reduce the number of mistakes you'll make while constructing the site saving you time and money if it were the world of work. Practical Learning 2.01 Pre-coding The following are the initial pre-coding steps to take in preparing the design of your web portfolio site. 1. Consider the site's purpose. For this web portfolio the purpose is simply to inform an audience about what skills you are developing. 2. Sketch the homepage. The homepage typically display links to all the most important elements of the website. In your sketch be sure to include at least all these essential elements: o A heading that reads similar to this: YOUR NAME (replace with your name) Web Portfolio o A subheading with the name of the course, teacher and section o Another subheading: the school address (street, city and zip code) o Yet another subheading: your email link o A picture of you o A list of completed projects o A return link to the top of the page 3. Diagram the site's page and folder structure. Websites are a collection of linked files. Files need to be organized into a system of folders, especially if building a complex site. If it were a larger site, it would be wise to draw two diagrams on paper: one diagram displaying the page structure of the site and one diagram of the file folder structure. 4. Set up the folder structure for containing files. Open the mapped drive and create the folder structure of your portfolio (See Figure 2.01 below). The "portfolio_yourname" folder will hold all the projects files that you create in this class, exercises folder will hold all the exercises files, and performance evaluation folder will hold an excel file named my_grade.xls which will be updated every time the instructor returns graded quizzes, cases, etc.

2-2

MALAYAN COLLEGES LAGUNA

IT002L LABORATORY MANUAL

Figure 2.01. Folder Structure

Note: There should not be any spaces in file names or folder names. The underscore is a common convention for indicating separations between words in a folder or file name. 5. Create a new file for the home page. Open your text editor (Notepad) program. Create a new file, and save the file in the portfolio_yourname folder as "index.htm". For now, this is just a blank file but you'll add content to it in the next lesson. About the filename index.htm: When browsers attempt to load a website where the URL does not include a filename (for example, www.somedomain.com), the server automatically looks for index.html first, and sends that file to the browser if it's available. The .htm extension on web pages came about in the early days of the World Wide Web, when developers using certain operating systems were limited to file extensions with three characters. Some continue the practice of the shorter extension. It is important to use one (either html or htm) consistently to avoid confusing others and causing yourself to mix up files. 2.02. BASIC XHTML MARK UP HTML is the language that has historically been used to create documents on the web. It is plain text, but includes a variety of codes or "tags" that define the structure of the document, and allow documents to include headings, paragraphs, images, links, lists, tables, and other features.

MALAYAN COLLEGES LAGUNA

2-3

IT002L LABORATORY MANUAL HTML has undergone various revisions over the years. Some tags have become deprecated, or old-fashioned, when new versions of HTML are developed. The emerging trend in web development is to use XHTML. XHTML is a rewrite of HTML as an XML language. XHTML is very similar to HTML, but has stricter rules. The instructions in this manual teach you HTML along with the XHTML nuances so you will learn coding conventions that make your code as flexible as possible. Practical Learning 2.02 Essential Tags There are some basic tags you must add to every HTML document you create. In the previous activity, you created a new file called index.htm. In this activity, you will add a few basic required tags to this file, thereby beginning the construction of your portfolio. These basic tags provide a skeleton for any web page. 1. Open the index.htm file. 2. Type the following in order to create the BASIC HTML STRUCTURE OF A WEB PAGE. Note that you'll personalize the highlighted text contained in the title tags.

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Web Portfolio of (Your Name)</title> </head> <body> </body> </html>

Note: Indenting content that is inside of other content helps you to see the relationship between all their parts of the page. Let's now examine each of these tags: a. The first line is called the XML declaration which states what version of XML is in use, and what character encoding system is used for displaying all fonts. This line is only used for XHTML documents, not HTML. b. The second line is the DOCTYPE. It specifies the version of HTML you are using. In this case, we are using a "strict" interpretation of XHTML 1.0. A common mistake among web developers is neglecting to include a DOCTYPE statement. Browsers will display a page differently depending on which version of HTML the page was designed in. Without a DOCTYPE statement, browsers have to guess, and sometimes they get it wrong. c. <html> is typed before all the text in the document. This marks the beginning of the html document.
2-4 MALAYAN COLLEGES LAGUNA

IT002L LABORATORY MANUAL d. <head> Web pages are divided into two main sections: the head and the body. The head provides information about the document, including the author, description, keywords, title, and other information. In our "bare bones" document the only content in the head section of our web page is the title. e. </head> This marks the closing of the head section. f. <title> You must give your document a title. This title doesn't actually appear within the web page, but appears in the title bar of the browser window. This is also the title of the page that will be displayed by default in search engine results or in user's Favorites. g. </title> closes the title tag. h. <body> The body section contains the contents of your document. i. </body> closes the body tag. j. </html> ends the html document. 3. Save the index.htm file. Now open this index.htm file in your browser. You will notice that the screen is blank. This is because you don't have any content yet in your body section. However, you should see your title displayed in browser's title bar, usually across the top of the browser window. 4. Return to the text editor and the index.htm file. Now you'll make two other pages for your website. To save time copy the code from index.htm and paste to the new pages. Each time change the title to reflect the content of the new page. Then save each new file in your root folder (portfolio_yourname folder) with the following file names: a. case1.htm (change title to Case One) b. case2.htm (change title to Case Two) 2.03. COMMON XHTML TAGS The following are some facts about HTML and XHTML tags: Web pages are just plain text. You can view or edit the source code using any text editor. "Tags" provide web browsers with instructions about the web page, such as where to display images, and how the document is structured. Tags are always enclosed in angle brackets: < >. Tags are comprised of elements and attributes. An element is an object on a page (such as a heading, paragraph, or image), and attributes are qualities that describe that element (such as width and height). Tags usually travel in pairs. An opening tag begins a section of page content, and a closing tag ends it. For example, to markup a section of text as a paragraph, you would open the paragraph with an opening paragraph tag <p> and close it with a closing paragraph tag </p> (closing tags always proceed the element with a /). A few tags are called non-container tags, because they don't contain any content - they stand alone. Examples are images and line breaks. XHTML requires that all open tags must be closed, even if they're not container tags. Therefore, non-container tags end in />. For example, the tag for a line break is <br />. Tags in HTML are not case sensitive, but in XHTML all tags must be in lower case. Even when coding in HTML, you should get in the habit of writing tags in lower case.
MALAYAN COLLEGES LAGUNA 2-5

IT002L LABORATORY MANUAL White space is ignored by web browsers. So, if you hit the space bar multiple times within a document, only one of those spaces will actually be displayed by the browser. Tags can be nested. For example, <em> <strong>this text is italicized and bold</strong> </em>. Note that the order of nested tags is important: The container tags surrounding any content should be symmetrical. Understanding the following tables: Common HTML tags are presented below, organized into four tables based on their purpose. The first table includes tags that control the overall structure of the web page. The second and third tables include tags that mark up the majority of web page content. Container tags (those that contain content) are presented in the second table, non-container tags (those that stand alone) are presented in the third table, and the table tags as presented in the fourth table. TABLE 2.01 Document Structure Opening Tag <html> <head> Closing Tag </html> </head> Description Identifies the document as HTML. Identifies the header section of your document, which is used to provide information about the document for use primarily by search engines and browsers. The title of document. This element must be nested within the head elements. Contains all the visible content of a web page.

<title>

</title>

<body>

</body>

TABLE 2.02 Content (Container) Tags Opening Tag <h1> to <h6> Closing Tag </h1>to</h6> Description Headings. H1 is the main heading, H2 is secondary, etc. New paragraph. Serve as a container for content.

<p> <div> or <span> <em>

</p> </div> or </span> </em>

Gives the contained text emphasis (usually as italics).

2-6

MALAYAN COLLEGES LAGUNA

IT002L LABORATORY MANUAL <strong> <a href = "document location"> <a name = "label"> <ol> <ul> <li> </strong> </a> Makes the contained text bold. Link to another document.

</a>

Link to another section of the same page.

</ol> </ul> </li>

Makes ordered lists. Makes unordered (or bulleted) lists. Marks items in either the ordered or unordered list.

TABLE 2.03 Empty (Non-Container) Tags Tag <br /> Description Causes a line break. It may be repeated for multiple line breaks. Horizontal rule. It creates a line to separate content. Inserts an image into a web page.

<hr /> <img src ="image location" /> <p />

The paragraph tag used in this manner serves as a double line break. It does not contain text. Unlike the <br /> tag it cannot be used multiple times to generate more white space. TABLE 2.04 Table Tags

Opening Tag

Closing Tag </table>

Sample Attributes

Description

<table>

Adds table. border="number" Border for rows & columns. Thickness of cell wall.

cellpadding

MALAYAN COLLEGES LAGUNA

2-7

IT002L LABORATORY MANUAL cellspacing Spacing between border and cell contents. Background color of cells. Table row (start & end). align="left, center, right" align="top, middle, bottom" <th scope="row" > <th scope="col" > </th> Aligns text in row horizontally. Aligns text in row vertically. When creating a table to display data, use this tag to differentiate the first row or column of cells as heading cells for all the other cells in the same column or row. Content will automatically be bold and center aligned. The scope attribute defines which data cells pertain to the heading. Defines data cell. colspan="number" Spans cells across column. Spans cells across row. Alignment in cell.

bgcolor

<tr>

</tr>

<td>

</td>

rowspan="number" align Practical Learning 2.03 - Common Tags

1. Open index.htm in the text editor. 2. Add the title My Portfolio in the main heading section. 3. Place the cursor on a blank line directly below the body tag, <body>. Type the tags that will contain the document's heading: <h1></h1>. Between these heading tags, type the text that will serve as the main heading for your home page. It should look something like this: <h1>Web Portfolio of (Your Name)</h1>
2-8 MALAYAN COLLEGES LAGUNA

IT002L LABORATORY MANUAL 4. Beneath the heading make a subheading using <h2></h2>. Between those tags type information that identifies this course (course title, instructors name, section). It should look something like this: <h2>IT013L IT Fundamentals 3, Instructors Name, Section</h2> 5. Below the subheading make another subheading containing the schools name and use <h3> tags. It should look something like this: <h3>Malayan Colleges Laguna </h3> 6. Below the school name, create a paragraph that contains two or more lines with the school's address. A paragraph opens with <p> and closes with </p> tags. Force a line break between each line using <br />. The address should looks something like this: <p>Pulo Diezmo Road<br /> Cabuyao, Laguna </p> 7. Below the school's physical address, add another paragraph that contains your email address. <p>your_email@isp.com</p> 8. Below the paragraph containing your email address, enter your goal statement as one or more paragraphs. For example: <p>By the end of this course I will have the skills and confidence to develop a web page.</p> 9. Place a horizontal rule (a dividing line) using an <hr /> tag before and after the goal statement. 10. Choose a key word or phrase in the goal statement and make both bold and italic using the <strong> and <em> tags. Make sure to nest the tags properly. <p>By the end of this course I will have the <strong><em>skills and confidence</em></strong> to develop a web page.</p> 11. Save the index.htm file. Now open this index.htm file in your browser. See figure below.

Practical Learning 2.04 Ordered and Unordered Lists The most common HTML lists are either ordered lists <ol> or unordered lists <ul>. Ordered lists are typically displayed with numbers, while unordered lists are typically displayed with bullets.

MALAYAN COLLEGES LAGUNA

2-9

IT002L LABORATORY MANUAL The XHTML code for creating an ordered list is very similar to the code for creating an unordered list. The only difference is that the list begins and ends with the <ol> and </ol> tags respectively. 1. Open index.htm in the text editor. 2. Place your cursor beneath the last code you wrote in the previous activity. Type the title for the first list, Course Requirements. Contain this title in <h4> tags. It should look like this: <h4>Course Requirements</h4> 3. On the next line, type the unordered list tag <ul>. Press Enter twice on your keyboard to make an empty line for more code. Close the unordered list. <h4>Course Requirements</h4> <ul> . . </ul> 4. Move the cursor up to the empty space and type the tags for containing list items: <li></li>. Press Enter again and type the list item tags. There will be two items in the list, so repeat this process one more time. Enter the text between the <li> tags as it appears in the example below: <li>Case One</li> <li>Case Two</li> NOTE: Indenting the <li> tags helps keep the coding organized but will not alter how the list appears in a browser. 5. After you have saved the changes to index.htm, return to your browser and refresh to see the changes. 6. Place your cursor beneath the closing tag of the last list you made. Type the title for the second list, References. Contain this title in <h4> tags. It should look like this: <h4>References</h4> 7. On the next line, type the ordered list tag <ol>. Press Enter twice on your keyboard to make an empty line for more code. Close the ordered list. <h4>References</h4> <ol> . . </ol>

2-10

MALAYAN COLLEGES LAGUNA

IT002L LABORATORY MANUAL 8. Move the cursor up to the empty space and type the tags for containing list items: <li></li>. Press Enter again and type the list item tags. There will be two items in the list, so repeat this process one more time. Each list item represents a site you may be working on eventually. For now enter generic descriptions of the websites which you'll replace in time. Enter the text between the <li> tags as it appears in the example below. <li>URL of first reference</li> <li>URL of second reference</li> 12. After you have saved the changes to index.htm, return to your browser and refresh to see the changes.

Practical Learning 2.05 - Linking to other Web Pages The World Wide Web was built on the principal of hypertext. Prior to hypertext, documents were all standalone. They might refer to each other in text, but there was no direct connection between one document and another. With hypertext, readers were suddenly able to quickly jump from one document to another, which revolutionized the way we access information. Links to web pages refer to the address, or URL (Uniform Resource Locator), of the web page. URL's consist of various parts. For example, consider the URL below: http://www.webstyleguide.com/process/index.html This URL consists of four parts, separated by forward slash (/): http:// - This is the Internet protocol, and tells the browser how to connect with the server hosting the URL. Most documents on the web begin with http://, but they might also begin with https://, ftp://, telnet://, or others. www.webstyleguide.com - Domain name where the file is located. process - folder or directory where the file is located (subdirectories might follow, but not in this example) index.html - the filename This address could also be abbreviated http://www.webstyleguide.com/process. When the server discovers that process is a directory rather than a file name, it would check the process directory for one of the standard home page file names, and in this case would find index.html. 1. Open the index.htm file of your portfolio. 2. Locate Malayan Colleges Laguna. Use the following directions for making a link to your school website: Links are inserted into a document using the <a> tag which stands for "anchor". However, this tag by itself does nothing. At a minimum, it requires the "href" attribute, which defines the destination of the link.
2-11

MALAYAN COLLEGES LAGUNA

IT002L LABORATORY MANUAL When you link to external websites, you use an absolute path, as in the following example: <a href ="http://www.mcl.edu.ph">Malayan Colleges Laguna</a> Note that the destination path (contained within quotes) gives the browser complete directions to locate the web page. If you were to copy all the characters between the quotation marks and insert them into the address bar of a browser, the browser would open the website. This type of link is referred to as an absolute address because it is the full address of the web page. 3. After you have saved the changes to index.htm, open the file in your browser.

Practical Learning 2.06 - Linking to Pages within your Website Now you will learn to make links to pages within your own website, using a relative address. A relative address is one that refers only to a portion of the web address, rather than to the full address. A relative address is an address that is relative to the location of the linking file. 1. Open the index.htm file of your portfolio. 2. In the lesson on Unordered Lists, you created an unordered list that contains course requirements. Turn these list items into links, as in the following example: <a href="case1.htm">Case One</a> Note that the destination path ("case1.htm") gives the browser directions starting from the current folder. This type of link is called a relative address because the entire address is relative to the location of the current file. Since index.htm and case1.htm both exist in the same folder, there is no need to spell out an entire URL. If you had saved case1.htm in a subfolder (for example, the "case1" subfolder, you could still link to this file using a relative address; you would just need to include the subfolder in the address, like this: case1/case1.htm. 3. After you've added a link to your Case One Web page, create links to your Case Two Web page too. 4. After you have saved the changes to index.htm, open the file in your browser.

Practical Learning 2.07 - Linking your e-mail address to your Web page In this activity, you will add an email link, which if clicked opens a blank, pre-addressed email message for users whose browsers and email software support it. Up to this point your email address on your portfolio is just text. You will make your email address a live link. 1. Open the index.htm file of your portfolio. 2. Locate your email on the page. Change the email address to an email link by coding it as follows:
2-12 MALAYAN COLLEGES LAGUNA

IT002L LABORATORY MANUAL <a href="mailto:my_email@isp.com">my_email@isp.com</a> 3. Save. Refresh your browser and try the link. If your browser and email software support this functionality, a blank email window should pop up with the email address already entered on the To: line. Note that some users' technology won't support this feature.

Practical Learning 2.08 - Planning, Designing, and Coding a Table Table consists of rows, columns, and cells, much like spreadsheets. A row is a horizontal line of information. A column is a vertical line of information. A cell is an intersection of a row and a column. Other parts of a table include table borders, table headers, and table captions. Table borders are lines that encompass the perimeter of the table. Table headers are bold text that indicates the purpose of the row and column. A table caption is descriptive text located above or below the table that further describes the purpose of the table. Table 2.05. Parts of a Table

Caption

Border

Heading Cell

Data Cell

Creating tables for a Web page is a three-step process: 1. Determine if a table is needed. 2. Plan the table; 3. Code the table. Tables were introduced to the web with the original purpose of displaying data in rows and columns. In time they came to be used for an additional purpose: page layout. This exercise will focus on their original purpose. 1. Open the index.htm file of your portfolio. This time we will add Table 2.05 to your portfolio. 2. Place your cursor beneath the line of References. Type the table elements: <table></table>. Press Enter several times on your keyboard to make empty lines for more code. It should look like this:

MALAYAN COLLEGES LAGUNA

2-13

IT002L LABORATORY MANUAL <table> . . . . . </table> 3. The table element should include a summary attribute, type the text that will serve as the summary of the table. It should look something like this: <table summary="Course Evaluation"> 4. On the next line, type the table's caption (brief descriptive text, usually displayed above the table) begins and ends with caption elements: <caption> <caption>The final grade of the students is based on the following:</caption> 5. Each row in a table begins and ends with table row (tr) elements: <tr></tr> . Count the number of row of Table 2.05. It has five rows. On the next line, type <tr></tr> five times. <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> 6. Each cell in the table begins and ends with either table header (th) elements or table data (td) elements, depending on what type of information the cell contains. If a cell contains headers, it begins and ends with th elements: <th></th> . Table header elements (th) should also include a scope attribute, which is either scope="row" or scope="col". This instructs screen readers as to which headers apply to which cells. Tables are read row by row from left to right. If a cell contains data (not headers), it begins and ends with td elements: <td></td> Locate the first <tr> element, type the headings Components and Percentage and include the attribute scope=col. It should look like this: <tr> <th scope="col">Components</th> <th scope="col">Percentage</th> </tr>
2-14 MALAYAN COLLEGES LAGUNA

IT002L LABORATORY MANUAL On the second <tr> element, type the data Case Presentation and 20%. It should look like this: <tr> <td>Case Presentation</td> <td>20%</td> </tr> Refer to Table 2.05 and continue with the next <tr> elements following the example above. 7. Add a border of one pixel to the opening tag <table>. <table summary="Course Evaluation" border=1> 8. Save your work, and check it in your web browser to be sure it looks like you expect it to. Don't worry about spacing between and within cells: We'll be addressing that in a future lesson.

Practical Learning 2.09 Adding Credibility to your Web Page 1. Open the index.htm file of your portfolio. 2. Position cursor at the last entry of your page. Type your contact information and date of last modification. As shown in the example below: <p>Page modified by YOUR NAME, DATE TODAY<br /> Email comments and suggestion here: your_email@isp.com</p> 3. Link your email address to the web page. 4. Save your work, and check it in your web browser.

MALAYAN COLLEGES LAGUNA

2-15

IT002L LABORATORY MANUAL Figure 2.02. Practical Learning 2.09 displayed in browser window

2-16

MALAYAN COLLEGES LAGUNA

IT002L LABORATORY MANUAL References: Textbooks 1. Cox, V. L., Wermers, L., & Reding E., HTML Edition, Third Edition. Thomson Course Technology (2007). 2. Oliver, D., Morrison, M., HTML and CSS in 24 hours, Seventh Edition. Sams Publishing (2006).

Online Documents 1. About.com Web Design and Tutorial. http://webdesign.about.com/ 2. University of Washington. Access IT Web Design and Development I. http://www.washington.edu/accessit/webdesign/index.htm 3. W3 Schools, http://www.w3schools.com/ 4. W3C Guidelines for XHTML, http://www.w3.org/TR/2000/REC-xhtml1-20000126/#guidelines 5. W3C HTML 4.01 Specification, http://www.w3.org/TR/html4/ 6. WDG Guide to HTML, http://www.htmlhelp.com/reference/html40/

MALAYAN COLLEGES LAGUNA

2-17

IT002L LABORATORY MANUAL

LABORATORY EXERCISE 2
OUTPUT INDICATORS:

After performing the following exercises, the student is expected to be able to: (a) create websites that comply with web standards; (b) apply essential and common tags for adding content to a web page; (c) create an ordered and unordered list using XHTML; (d) create a link to another web page on the Internet and a link from one page to another within a website; and, (e) organize data using table.

INSTRUCTIONS:

(a) (b) (c) (d)

Read the problem carefully and follow stated instructions. Detach the accomplished exercises and laboratory score sheets. Submit exercises and laboratory score sheets to your laboratory instructor. Do not forget to shut down your system properly.

2-18

MALAYAN COLLEGES LAGUNA

IT002L LABORATORY MANUAL

LABORATORY EXERCISE 2-01 BUILDING WEB PAGES USING XHMTL

NAME OF STUDENT ____________________________________________________ DATE _____________

Problem: You want to create a Web page to tell people about yourself. Your web page will contain the following: reasons for enrolling in Malayan Colleges Laguna, your goals in life, your achievements, and your creativity, how people see you and your strengths and witnesses. INSTRUCTIONS: Open Notepad and perform the following steps: 1. Create a new folder and name it as week2, this will hold all created files for this week. 2. Start a new file. 3. Add the title Personal Homepage in the main heading section. 4. Begin the body section by adding <h1> tags to WELCOME TO MY PERSONAL HOMEPAGE. 5. Add <h2> tags to YOUR NAME. 6. Add <hr /> tag. 7. Write a short paragraph of information on why you have enrolled in Malayan Colleges Laguna and add <p> tags. 8. On the succeeding lines type the answer to the following questions using <ol> or <ul> tags: a. Question #1: Where would you like to be ten years from now? b. Question #2: Tell me about your proudest achievement. c. Question #3: Give me an example of a time when you had to think out of the box. d. Question #4: What positive thing would people say about you? e. Question #5: What are your strengths and weaknesses? 9. The last list must contain a link to your favorite web site. 10. Type your name, email and date of modification at the bottom of your page and add <div> tags. 11. Link your e-mail to the web page. 12. Create a back to top link at the bottom of your page. 13. Close the body section and end the HTML file. 14. Save the file and name it as exer2_1_personal.htm. 15. Open your web page in your browser and test all links. 16. Make necessary corrections to your code then save your work.

1 2 3 4

CRITERIA Information is creatively written and cleverly presented Navigation / Links are consistent and easy to identify Page contains contact information Code is clean, without misused tags TOTAL

SCORE 30 40 5 25 100

COMMENTS/REMARKS Evaluated by / Date

MALAYAN COLLEGES LAGUNA

2-19

IT002L LABORATORY MANUAL

LABORATORY EXERCISE 2-02 BUILDING WEB PAGES USING XHMTL

NAME OF STUDENT ____________________________________________________ DATE _____________

Problem: You are the President of the Computer Club and you want to create a web page announcing the annual computer club conference. INSTRUCTIONS: Open Notepad and perform the following steps: 1. Create a new folder and name it as week2, this will hold all created files for this week. 2. Start a new file. 3. Add the title Computer Club in the main heading section. 4. Begin the body section by adding <h1> tags to WELCOME TO THE COMPUTER CLUB. 5. Add <hr /> tag. 6. Add <h2> tags to Annual Computer Club Conference. 7. On the succeeding lines type the details of the conference: a. purpose of the event b. beneficiaries of the event c. guest speakers and their profiles d. topics to be discussed in the conference 8. Locate all paragraphs and add <p> tags. 9. Search for a similar club and link it to your Web page. 10. Type your name, email and date of modification at the bottom of your page and add <div> tags. 11. Link your e-mail to the web page. 12. Create a back to top link at the bottom of your page. 13. Close the body section and end the HTML file. 14. Save the file and name it as exer2_2_club.htm. 15. Open your web page in your browser and test all links. 16. Make necessary corrections to your code then save your work.

1 2 3 4

CRITERIA Information is creatively written and cleverly presented Navigation / Links are consistent and easy to identify Page contains contact information Code is clean, without misused tags TOTAL

SCORE 30 40 5 25 100

COMMENTS/REMARKS Evaluated by / Date

2-20

MALAYAN COLLEGES LAGUNA

IT002L LABORATORY MANUAL

LABORATORY EXERCISE 2-03 BUILDING WEB PAGES USING XHMTL

NAME OF STUDENT ____________________________________________________ DATE _____________

Problem: The Organizers of Earth Day want you to develop a web page that will give information about global warming and its effects. INSTRUCTIONS: Open Notepad and perform the following steps: 1. Create a new folder and name it as week2, this will hold all created files for this week. 2. Start a new HTML file. 3. Add the title Global Warming in the main heading section. 4. Begin the body section by adding <h1> tags to GLOBAL WARMING. 5. Add <hr /> tag. 6. Add <h2> tags to Effects of Global Warming. 7. Use any search engine to find sites related to your topic. 8. Write down important ideas and add links to the cited sources. 9. Locate all paragraphs and add <p> tags. 10. Add <h2> tags to sub-headings. 11. Create a back to top link at the bottom of your page. 12. Type your name, email and date of modification at the bottom of your page and add <div> tags. 13. Link your e-mail to the web page. 14. Create a back to top link at the bottom of your page. 15. Close the body section and end the HTML file. 16. Save the file and name it as exer2_3_global.htm. 17. Open your web page in your browser and test all links. 18. Make necessary corrections to your code then save your work.

1 2 3 4

CRITERIA Information is creatively written and cleverly presented Navigation / Links are consistent and easy to identify Page contains contact information Code is clean, without misused tags TOTAL

SCORE 30 40 5 25 100

COMMENTS/REMARKS Evaluated by / Date

MALAYAN COLLEGES LAGUNA

2-21

IT002L LABORATORY MANUAL

LABORATORY EXERCISE 2-04 BUILDING WEB PAGES USING XHMTL

NAME OF STUDENT ____________________________________________________ DATE _____________

Problem: Your boss would like to create a web page that will advertise specials on hard drives and monitors of your company. You will use a table format with headings that span several rows and columns. Use the tables below as a guide in creating your data table.

INSTRUCTIONS: Open Notepad and perform the following steps: 1. Create a new folder and name it as week2, this will hold all created files for this week. 2. Start a new HTML file. 3. Add the title Specials in the main heading section. 4. Add <caption> tags to the first table, HARD DRIVE. 5. Add <caption> tags to the second table, MONITOR. 6. Add a one-pixel table border. 7. Type your name, email and date of modification at the bottom of your page and add <div> tags. 8. Link your e-mail to the web page. 9. Create a back to top link at the bottom of your page. 10. Close the body section and end the HTML file. 11. Save the file and name it as exer2_4_specials.htm. 12. Open your web page in your browser and test all links. 13. Make necessary corrections to your code then save your work.

1 2 3 4

CRITERIA Information is creatively written and cleverly presented Navigation / Links are consistent and easy to identify Page contains contact information Code is clean, without misused tags TOTAL

SCORE 30 40 5 25 100

COMMENTS/REMARKS Evaluated by / Date

2-22

MALAYAN COLLEGES LAGUNA

IT002L LABORATORY MANUAL

LABORATORY EXERCISE 2-05 BUILDING WEB PAGES USING XHMTL

NAME OF STUDENT ____________________________________________________ DATE _____________

Problem: You want to create a web page that list the grades and courses you have taken the past two terms. You will use a table format with headings that span several rows and columns. You will use a table format with headings that span several rows and columns. Use the tables below as a guide in creating your data table.

INSTRUCTIONS: Open Notepad and perform the following steps: 1. Create a new folder and name it as week2, this will hold all created files for this week. 2. Start a new HTML file. 3. Add the title List of Grades and Courses in the main heading section. 4. Begin the body section by adding <h1> tags to YOUR NAME. 5. Add appropriate caption to both tables. 6. Add a one-pixel table border. 7. Type your name, email and date of modification at the bottom of your page and add <div> tags. 8. Link your e-mail to the web page. 9. Create a back to top link at the bottom of your page. 10. Close the body section and end the HTML file. 11. Save the file and name it as exer2_5_grades.htm. 12. Open your web page in your browser and test all links. 13. Make necessary corrections to your code then save your work.

1 2 3 4

CRITERIA Information is creatively written and cleverly presented Navigation / Links are consistent and easy to identify Page contains contact information Code is clean, without misused tags TOTAL

SCORE 30 40 5 25 100

COMMENTS/REMARKS Evaluated by / Date

MALAYAN COLLEGES LAGUNA

2-23

IT002L LABORATORY MANUAL

CASE STUDIES
OUTPUT INDICATORS:

After performing the following case studies, the student is expected to be able to: (a) plan a website; (b) create a website based on web standards; and, (c) create a functional website with the following components: basic structure of a web page; absolute and relative links; data table; graphics; and design contents and page layout using CSS;

INSTRUCTIONS:

(a) (b) (c) (d)

Read the problem carefully and follow stated instructions. Detach the accomplished case studies and score sheets. Submit case studies and score sheets to your laboratory instructor. Do not forget to shut down your system properly.

2-24

MALAYAN COLLEGES LAGUNA

IT002L LABORATORY MANUAL

CASE STUDY 1-01 THE PIZZA CORNER

NAME OF STUDENTS ____________________________________________________ DATE _____________

Problem: Ms. Ana Margarita Roxas is the owner of The Pizza Corner, a local pizza place where you work when you are not attending classes. Recently, Ms. Roxas called you into her office to ask some questions about the Internet and World Wide Web. She had been reading about the web lately and wondered if The Pizza Corner should develop its own Web site for advertising. With this in mind, you decided to design and develop a Web site that advertises The Pizza Corners specialty pizzas. INSTRUCTIONS: 1. Form a four-member team and assist Ms. Roxas in developing the Web site. 2. Assign each member to do the following web pages: a. Home page this page contains a brief description of The Pizza Corner and its services. b. About Us page this page contains contact information and the proprietor of The Pizza Corner. c. Photo Gallery page this page contains pictures of The Pizza Corners specialty pizzas and other food items. d. Price List page this page contains price list of pizzas and other food items of The Pizza Corner. 3. Create a web site with the following components: a. basic structure of a web page; b. absolute and relative links; c. data table; d. graphics; e. design contents and page layout using CSS;

CRITERIA 1 2 3 4 Use of Photos and Graphics Internal and External Navigation Layout and Text Elements Overall Design TOTAL COMMENTS/REMARKS 30 20 30 20 100

SCORE

Evaluated by / Date

MALAYAN COLLEGES LAGUNA

2-25

IT002L LABORATORY MANUAL

CASE STUDY 1-02 THE PHILIPPINES

NAME OF STUDENTS ____________________________________________________ DATE _____________

Problem: Mr. Johnnie Dela Cruz is a professor teaching Philippine Culture. Mr. Dela Cruz is disappointed because he found very little information on the web regarding Philippine Culture. He called you into his office to ask some questions about the World Wide Web and marveled if you can help out to develop an informational web site about the beautiful places, warmth of Filipinos and way of life in the Philippines. INSTRUCTIONS: 1. Form a four-member team and assist Mr. Dela Cruz in developing the Web site. 2. Assign each member to do the following web pages: a. Home page this page contains a brief description of the Philippines and its geography. b. About Us page this page contains contact information and the reason why the web site was developed. c. Photo Gallery page this page contains pictures of the beautiful places in the Philippines. d. People and Culture page this page contains a brief description of the culture of the Filipinos. 3. Create a web site with the following components: a. basic structure of a web page; b. absolute and relative links; c. data table; d. graphics; e. design contents and page layout using CSS;

CRITERIA 1 2 3 4 Use of Photos and Graphics Internal and External Navigation Layout and Text Elements Overall Design TOTAL COMMENTS/REMARKS 30 20 30 20 100

SCORE

Evaluated by / Date

2-26

MALAYAN COLLEGES LAGUNA