College of the Management, Economics and Information Technology s2

College of the management, economics and information technology Department of Information systems Fall Semester, academic Year 2015/2016 INTERNET TECHNOLOGY LAB Lab 04: Rowspan, Colspan and Form Introduction

Define the commands that we will use them in our code: Command Description / the output

To merge rows / two rows will be merged To merge cols / two cols will be merged

Create a form, where method = "post" appends form data to the browser request, which contains the protocol (HTTP) and the requested resource’s URL. This method of passing data to the server is transparent—the user doesn’t see the data after the form is submitted. The other possible value, method = "get", appends the form data directly to the end of the URL of the script, where it is visible in the browser’s Address field. Action=” ”: specifies the URL of a script on the web server that will be invoked to process the form’s data. Since we haven’t introduced server-side programming yet, we leave this attribute empty for now. script that processes the form. An input’s type is determined by its type If the attribute is hidden it should be like the attribute following : Type can be as follow: 1- “checkbox” to create a checkbox element 3- "submit" : to create a submit button, to submit the forms data to the webserver. 4- “reset”: to rest the form elements to the default status. 5- “hidden”: to create a hidden elements

</testarea> 36 columns <Label> </label> To create the label <select name = "rating"> <option selected = To create the drop-down list: "selected">Amazing</option> Where Option is used to insert the data into the drop list.1 Selected attribute is used to check the selected value in the list "selected”Section01: Using rowspan and colspan (20 minutes) Step 1: Open Yourname_NFS230 folder a. Inside the folder create “Lab04” folder b. Inside the folder create a new notepad file with the name “Lab04_S1.html” c.In the same file save any image and using the following name and extension image.jpg d.Write your code in the notepad (by following the below steps) and save the file. e. Click on the file name you will get your first webpageStep 2: Write the code as shown below <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Tables</title> </head><body><h1>Table Example Page</h1><table border = "1"><caption>Here is a more complex sample table.</caption><thead><tr><th rowspan = "2"></th><th colspan = "4"><h1>Camelid comparison</h1>Approximate as of 6/2007</th></tr> 2 <tr><th># of Humps</th><th>Indigenous region</th><th>Spits?</th><th>Produces Wool?</th></tr></thead><tbody><tr><th>Camels (bactrian)</th><td>2</td><td>Africa/Asia</td><td>Yes</td><td>Yes</td></tr><tr><th>Llamas</th><td>1</td><td>Andes Mountains</td><td>Yes</td><td>Yes</td></tr></tbody></table> 3 </body></html>The result will be as follow: Section 02: Forms (15 minutes) When browsing websites, users often need to provide such information as search keywords, e-mail addresses and zip codes. XHTML provides a mechanism, called a form, for collecting data from a user.Data that users enter on a web page is normally sent to a web server that provides access to a site’s resources (e.g., XHTML documents, images). These resources are located either on the same machine as the web server or on a machine that the web server can access through the network. When a browser requests a web page or file that is located on a server, the server processes the request and returns the requested resource. A request contains the name and path of the desired resource and the method of communication (called a protocol). XHTML documents use the Hypertext Transfer Protocol (HTTP).Forms can contain visual and nonvisual components. Visual components include clickable buttons and other graphical user interface components with which users interact. Nonvisual components, called hidden inputs, store any data that you specify, such as email addresses and XHTML document filenames that act as links.Step 1: Open a Yourname_NFS230 folder a. Go to your desktop. Open an Yourname_INFS230 folder b. Go to folder “Lab04” folder c. Inside the Lab04 folder create a new notepad file with the name “Lab04_S2.html” d. Write your code in the notepad (by following the below steps) and save the file and exit from the file. e. Click on the file name you will get your webpage.Step 2: Write the code as shown below <html xmlns = "http://www.w3.org/1999/xhtml">4 <head><title>Forms</title></head><body><h1>Feedback Form</h1>Please fill out this form to help us improve our site.<form method = "post" action = ""><input type = "hidden" name = "recipient" value = "deitel@deitel.com" /><input type = "hidden" name = "subject" value = "Feedback Form" /><input type = "hidden" name = "redirect" value = "main.html" /><label>Name:<input name = "name" type = "text" size = "25" maxlength = "30" /> </label><input type = "submit" value = "Submit" /><input type = "reset" value = "Clear" /> </form> </body> </html> The result will be as follow:5 Section 03: Additional Form Elements (50 minutes)In the previous example, you saw basic elements of XHTML forms. Now that you know the general structure of a form, we introduce elements and attributes for creating more complex forms.Step 1: Open a Yourname_INFS230 folder a. Go to your desktop. Open an Yourname_INFS230 folder b. Go to folder “Lab04” folder c. Inside the Lab4 folder create a new notepad file with the name “Lab04_S3.html” d. Write your code in the notepad (by following the below steps) and save the file and exit from the file. e. Click on the file name you will get your webpage.6 Step 2: Write the code as shown below <html xmlns = "http://www.w3.org/1999/xhtml"><head><title>More Forms</title></head><body><h1>Feedback Form</h1>Please fill out this form to help us improve our site.<form method = "post" action = ""><input type = "hidden" name = "recipient" value = "deitel@deitel.com" /><input type = "hidden" name = "subject" value = "Feedback Form" /><input type = "hidden" name = "redirect" value = "main.html" /> <label>Name: <input name = "name" type = "text" size = "25" /> </label> <label>Comments: <textarea name = "comments" rows = "4" cols = "36">Enter comments here.

E-mail Address:

Things you liked:

Site design

value = "Design" />

Links

value = "Links" />

Ease of use

value = "Ease" />

Images

value = "Images" />

Source code

value = "Code" />

How did you get to our site?:

Search engine

Links from another site

value = "link" />

Deitel.com Web site

value = "deitel.com" />

Reference in a book

Other

Rate our site:

9 The result will be as follow:

10 Post-Lab:

1. How to do the following function using the xHTML language a. Merging the rows in the table b. Merging the columns in the table c. Creating the hidden input in the form d. Create the submit button to the form e. Creating the rest button in the form f. Creating the textbox in the form g. Creating the areatext h. Creating a radio element in the form i. Creating the drop list element. j. Creating the label

2. Why xHTML uses the hidden elements in the webpage. 3. What is the job of the rest button in the form? 4. What is the job of the submit button in the form?

5. Mention the job of the following tags.



 Site design

value = "Design" />



 Enter comments here.



E-mail Address:



7. What is the output of the following codes? Explain your answer. Code1:

11 12 Code2:

13 4. Write a code that gives you the output as in the figure below, you can use any image inside your computer.

References: 1- Internet and World Wide Web How to Program: 4/e.

Copy Link