MIRPUR UNIVERSITY OF SCIENCE AND TECHNOLOGY

DEPARMENT OF SOFTWARE ENGINEERING

Hypertext Mark-up Language
(lecture # 8)

Engr. Muhammad Raees

(Lecturer)

Date: April 23, 2020

 LECTURE CONTENTS

• Hyper Text Mark-up Language

Web Design & Development 3

 Tables

• Tables display information in rows and columns

• Tables are commonly used to display all manner of data (even page structure in
past) that fits in a grid such as train schedules, television listings, financial reports
etc.
• <table> … </table>
• <tr> … </tr> the row and <td> … </td> cell
• <th> … </th> heading row
• Table body and Table header
• Table footer and Table summary
• Caption
• spanning

4
Web Design & Development
 Table Level Attributes

Web Design & Development 5

 Row Level Attributes

Web Design & Development 6

 Cell Level Attributes
<table border=“1”>
<tr>
<td rowspan=“2”>Name</td>
<td colspan=“2”>Subjects</td>
</tr>
Subjects
<tr> Name
<td >OOP</td> OOP DB
<td >DB</td>
ALi 75 80
</tr>
<tr>
<td >ALi</td>
<td >75</td>
<td >80</td>
</tr>
</table>

Web Design & Development 7

 Forms

• Forms provide a means of submitting information from the client to the server
• Form tag
• Common Form Attributes:
• action - gives the URL of the application that is to receive and process the
forms data
• method - sets the HTTP method that the browser uses to send the form's data
to the server for processing; Either POST or GET
• name – name of the form

8
Web Design & Development
 Form Elements

• Textbox <INPUT TYPE=“TEXT” >

NAME
• Password Field SIZE
• Hidden Field VALUE
MAXLENGTH
• Checkbox <INPUT TYPE=“TEXT” NAME=NAME SIZE=30 VALUE=“ALI”
MAXLENGTH=15>
• Radio Button
Drop down list:
• Text Area
Select
• Select List Name, size
• Submit Button Option
• Reset Button
<SELECT name=“name” size=“size”>
<OPTION value=“lahore”>LAHORE</option>
<OPTION value=“karachi”>KARACH</option>
<OPTION value=“islamabad”>ISLAMABAD</option>
</SELECT>
Web Design & Development 9
 Submitting

• Submit and Reset Buttons

<INPUT TYPE=“SUBMIT” VALUE=“SAVE”>

<INPUT TYPE=“RESET” VALUE=“RESET”>

<INPUT TYPE=“CHECKBOX”>
CHECKED
NAME
VALUE
<INPUT TYPE=“CHECKBOX” NAME=“CHECK” VALUE=“ CHECKED”>

Web Design & Development 10

 Field Attributes

• Specific Designed Input fields, plus attributes

• Required
• Placeholder
• Pattern {Regular Expression}
• Disabled
• Read only
• Auto complete
• Data List
• Tags for email, number, date, colour, file etc.

Web Design & Development 11

 Pattern Attribute

• Writing Regular Expression:

• [ ]: makes a class of characters
• -: means a range of characters
• [a-z],[0-9]
• [^ ]: negates the class of character
• [^0-9]
• {n}: matches a character, class or sub-pattern for n times
• { n, m}: matches a character, class or sub-pattern for minimum n times and
maximum m times
• <input type=“text” pattern=“[a-zA-Z]{1,20} ”>
• <input type=“text” pattern=“[a-zA-Z]{1,20} [ ] – Space is allowed

Web Design & Development 12

 Data List

• The datalist element:

• a text field with a set of predefined autocomplete options
• First we define an input field with list attribute
• Then we define the datalist
• <input type=“text” list=“colors”>
• <datalist id=“colors”>
• <option>Red</option>
• <option>Red</option>
• </datalist>

Web Design & Development 13

 HTML Attributes
<input type=“email” name=“email”>
• Email element
<input type=“date” name=“DoB”>
• Date element
• Number element <input type=“number” name=“number”>

• Color element <input type=“color” name=“color”>

• Web Form
• Requests contain the information displayed is as follows.
• URL: The address of the website of the resource.
• Method: The HTTP method. (GET, POST, HEAD, PUT, DELETE etc.)
• Received: The bytes received.
• Time: Time is taken to process the request.

Web Design & Development 14

 Web Forms

• HTTP methods are some verb keywords which correspond to the request being
sent to the server. There are many request methods, however, some of commonly
used are listed below.
• GET: GET request is used to get resource from web-server. The resource can
be any type of file (i.e. a webpage).
• HEAD: HEAD method is very similar to the GET method. However, in the
HEAD method, the server does not return a response message.
• POST: Data is posted to the web server to perform some operations on it.
• PUT: PUT sends data to the web server to add new data on the web server.
• DELETE: DELETE is used to delete a resource from the web server.

15
Web Design & Development
 References

• Chapter 1-5, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett,

Wiley Publishing; 2009, ISBN: 978-0-470-54070-1.

Web Design & Development 16

THANKS