Web Design and Development Lecture 3

Web Design and
development
Lecture 3
Course Instructor: Wardah Mahmood
Email Id: wardah.mahmood@riphah.edu.pk
HTML Attributes
• An attribute is used to define the characteristics of an HTML element and is
placed inside the element's opening tag. All attributes are made up of two
parts: a name and a value.
• The name is the property you want to set. For example, the paragraph
element in the example carries an attribute whose name is align, which
you can use to indicate the alignment of paragraph on the page.
• The value is what you want the value of the property to be set and always
put within quotations. The below example shows three possible values of
align attribute: left, center and right.
HTML Attributes
Core Attributes
• The four core attributes that can be used on the majority of HTML
elements (although not all) are:
• Id: Used to uniquely identify an element.
• Title: Gives a suggested title for the element.
• Class: Used to associate an element with a style sheet, and specifies the
class of element.
• Style: Allows you to specify Cascading Style Sheet (CSS) rules within the
element.
Core Attributes
• Dir: The dir attribute allows you to indicate to the browser about the
direction in which the text should flow. (left to right or right to left).
• Lang: The lang attribute allows you to indicate the main language used in a
document, but this attribute was kept in HTML only for backwards
compatibility with earlier versions of HTML.
• xml:lang: The xml:lang attribute is the XHTML replacement for the lang
attribute.
• Other core attributes: http://unverse.net/HTML-core-attributes
HTML Tables
• Tables represent tabular data
• A table consists of one or several rows
• Each row has one or more columns
• Tables comprised of several core tags: <table></table>: begin / end the

table
<tr></tr>: create a table row
<td></td>: create tabular data (cell)
• Tables should not be used for layout. Use CSS floats and positioning styles
instead
HTML Tables
<table cellspacing="0" cellpadding="5">
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture 2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table>
HTML Nested Tables
• Table data “cells” (<td>) can contain nested tables (tables within tables):
<table>
<tr>
<td>Contact:</td>
<td>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</td>
</tr>
</table>
HTML Tables Cells And
Padding
• Tables have two important attributes:
 cellspacing  cellpadding
cell cell cell cell
cell cell cell cell

 Defines the empty space  Defines the empty space around the
between cells cell content
HTML Tables Cells And
Padding
<html>
<head><title>Table Cells</title></head>
<body>
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>
HTML Tables Column and Row
Span
◦Table cells have two important attributes:
 Colspan  Rowspan
colspan="1" colspan="1" rowspan="2" rowspan="1"
cell[1,1] cell[1,2] cell[1,2]

cell[1,1]
cell[2,1]
colspan="2" cell[2,1]
rowspan="1"
 Defines how many columns the cell  Defines how many rows the cell
occupies occupies
11
HTML Tables Column and Row
Span
<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr class=“3"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
</table>
HTML Forms
• Forms are the primary method for gathering data from site visitors.
• The HTML <form> element defines a form that is used to collect user input.
• Form elements are different types of input elements, like text fields, checkboxes,
radio buttons, submit buttons, and more.
HTML Forms
• Input element:
• The <input> element is the most important form element.
• The <input> element can be displayed in several ways, depending on the type attribute.
Type Description
<input type="text"> Defines a one-line text input field
<input type="radio"> Defines a radio button (for selecting
one of many choices)
<input type="submit"> Defines a submit button (for

submitting the form)
HTML Forms
• <input type="text"> defines a one-line input field for text input.
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
• <input type="radio"> defines a radio button. Radio buttons let a user select ONE
of a limited number of choices.
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
HTML Forms
• <input type="submit"> defines a button for submitting the form data to a form-
handler.
• The form-handler is typically a server page with a script for processing input data.
• The form-handler is specified in the form's action attribute:
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
HTML Forms
• The action attribute defines the action to be performed when the form is
submitted.
• Normally, the form data is sent to a web page on the server when the user clicks
on the submit button.
• In the example above, the form data is sent to a page on the server called
"/action_page.php". This page contains a server-side script that handles the form
data.
• If the action attribute is omitted, the action is set to the current page.
HTML Forms
• The Method Attribute: The method attribute specifies the HTTP method (GET or
POST) to be used when submitting the form data:
• <form action="/action_page.php" method="get">
• <form action="/action_page.php" method="post">

HTML Forms
• When to Use GET?
• The default method when submitting form data is GET.
• However, when GET is used, the submitted form data will be visible in the page
address field.
• When to Use POST?

• Always use POST if the form data contains sensitive or personal information. The
POST method does not display the submitted form data in the page address field.
• POST has no size limitations, and can be used to send large amounts of data.
<form method="post" action="apply-now.php">
<input name="subject" type="hidden" value="Class" />
<fieldset><legend>Academic information</legend>
<label for="degree">Degree</label>
<select name="degree" id="degree">
<option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of Science</option>
<option value="MBA" selected="selected">Master of
Business Administration</option>
</select>
<br />
<label for="studentid">Student ID</label>
<input type="password" name="studentid" />
</fieldset>
<fieldset><legend>Personal Details</legend>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" />
<br />
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" />
<br />
Gender:
<input name="gender" type="radio" id="gm" value="m" />
<label for="gm">Male</label>
<input name="gender" type="radio" id="gf" value="f" />
<label for="gf">Female</label>
<br />
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</fieldset>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="readonly">TERMS AND CONDITIONS...</textarea>
</p>
<p>
<input type="submit" name="submit" value="Send Form" />
<input type="reset" value="Clear Form" />
</p>
</form>
HTML Frames
• Frames provide a way to show multiple HTML documents in a single Web page.
• The page can be split into separate views (frames) horizontally and vertically.
• Frames were popular in the early ages of HTML development, but now their usage is
rejected.
• Frames are not supported by all user agents (browsers, search engines, etc.).
• A <noframes> element is used to provide content for non-compatible agents.
HTML Frames
<html>
<head><title>Frames Example</title></head>
<frameset cols="180px,*,150px">
<frame src="left.html" />
<frame src="middle.html" />
<frame src="right.html" />
</frameset>
</html>
 Note the target attribute applied to the <a> elements in the left frame.
HTML Frames
• Inline frames provide a way to show one website inside another website:
<iframe name="iframeGoogle" width="600" height="400"

src="http://www.google.com" frameborder="yes"
scrolling="yes"></iframe>

Web Design and Development Lecture 3

Uploaded by

Web Design and Development Lecture 3

Uploaded by

Web Design and

• Tables comprised of several core tags: <table></table>: begin / end the

cell cell cell cell

cell cell cell cell

cell[1,1] cell[1,2] cell[1,2]

<input type="submit"> Defines a submit button (for

• <form action="/action_page.php" method="get">

• <form action="/action_page.php" method="post">

• When to Use POST?

<iframe name="iframeGoogle" width="600" height="400"

You might also like