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 IntroductionDefine the commands that we will use them in our code: Command Description / the output<rowspan = "2"> To merge rows / two rows will be merged <colpan = "2"> To merge cols / two cols will be merged <form method = "post" action = ""> </form> 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. <input name = "attributeName" type = Elements that specify data to provide to the “attribute” value = "Images" /> 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 <input type = "hidden" name = "recipient" 2- "radio" to create a radio element value = "[email protected]" /> 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 <textarea name = "comments" rows = "4" To create the multi- textbox with 4 rows and cols = "36"> </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 = "[email protected]" /><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 = "[email protected]" /><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.</textarea></label><label>E-mail Address: <input name = "email" type = "password" size = "25" /></label> 7 Things you liked: <label>Site design <input name = "thingsliked" type = "checkbox" value = "Design" /></label><label>Links <input name = "thingsliked" type = "checkbox" value = "Links" /></label><label>Ease of use <input name = "thingsliked" type = "checkbox" value = "Ease" /></label> <label>Images <input name = "thingsliked" type = "checkbox" value = "Images" /></label><label>Source code <input name = "thingsliked" type = "checkbox" value = "Code" /></label>How did you get to our site?: <label>Search engine <input name = "howtosite" type = "radio" value = "search engine" checked = "checked" /></label><label>Links from another site <input name = "howtosite" type = "radio" value = "link" /></label> <label>Deitel.com Web site <input name = "howtosite" type = "radio" value = "deitel.com" /></label><label>Reference in a book <input name = "howtosite" type = "radio" value = "book" /></label><label>Other <input name = "howtosite" type = "radio" value = "other" /></label>8 <label>Rate our site: <select name = "rating"><option selected = "selected">Amazing</option><option>10</option><option>9</option><option>8</option><option>7</option><option>6</option><option>5</option><option>4</option><option>3</option><option>2</option><option>1</option><option>Awful</option></select></label><input type = "submit" value = "Submit" /><input type = "reset" value = "Clear" /> </form></body> </html>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. 6. <input type = "hidden" name = "recipient" value = "[email protected]" /> <label>Site design <input name = "thingsliked" type = "checkbox" value = "Design" /></label>  <textarea name = "comments" rows = "4" cols = "36">Enter comments here.</textarea> <th rowspan = "2"> <th colspan = "2"> <label>E-mail Address: <input name = "email" type = "password" size = "25" /> </label>  <input type = "reset" value = "Clear" />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.14

College of the Management, Economics and Information Technology s2

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support