Web Engineering

Lecture 3
March 09, 2011

Syeda Uzma Gardazi

Room # 3

([email protected])

The material used in these slides is collected from W3Schools Articles and Beginning Web programming with HTML XHTML and CSS by WROX Publishers

General Questions
Find IP address of a website http://www.selfseo.com/find_ip_address_of_a_ website.php/

General Questions
HTML Entities: Reserved characters in HTML must be replaced with character entities. Some characters are reserved in HTML. For example:
 It is not possible to use the less than (<) or greater than (>) signs in your text, because the browser will mix them with tags.

To actually display reserved characters, we must use character entities in the HTML source code. For example:
 To display a less than sign we must write: &lt; or &#60;

Frames
With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. The Frameset Tag  The <frameset> tag defines how to divide the window into frames  Each frameset defines a set of rows or columns  The values of the rows/columns indicate the amount of screen area each row/column will occupy <frameset cols="25%,75%"></frameset>
frameborder="NO" border="0" framespacing="0"

Frames
The Frame Tag
 The <frame> tag defines what HTML document to put into each frame
<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>

HTML Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

HTML Tables
<tr> <th>Heading</th> <th>Another Heading</th> </tr>
Heading row 1, cell 1 row 2, cell 1 Another Heading row 1, cell 2 row 2, cell 2

<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
row 1, cell 1 row 1, cell 2

row 2, cell 1

row 2, cell 2

HTML Tables
ColSpan RowSpan

Row Span example

HTML Forms

Form Controls
Text input controls Buttons Checkboxes and radio buttons Select boxes (sometimes referred to as drop-down menus) and list boxes File select boxes Hidden controls

Text input controls

Single-Line Text Input Controls
<input type="text" name="txtSearch" value="Search for" size="20" maxlength="64 />

Password Input Controls

<input type="password" name="pwdPassword" value="" size="20" maxlength="20" />

Multiple-Line Text Input Controls

<textarea name="txtFeedback" rows="20" cols="50"> Enter your feedback here. </textarea>

Buttons
Using an <input> element with a type attribute whose value is submit, reset, or button Using a <button> element

Creating Buttons Using the <input> Element

<input type= >
 Submit  Reset  button

Creating Buttons Using the <button> Element

Checkboxes

Radio Buttons
When you have a group of radio buttons that share the same name, only one of them can be selected. Once one radio button has been selected, if the user clicks another option, the new option is selected and the old one deselected. You should not use radio buttons for a single form control where the control indicates on or off because once a lone radio button has been selected it cannot be deselected again.

Radio Buttons

Select Boxes
A drop-down select box allows users to select one item from a drop down menu. Drop-down select boxes can take up far less space than a group of radio buttons.

Size attribute of element <select> creates scrolling boxes Multiple= multiple attribute of <select> allows user to select multiple options

Hidden fields

HTML Images
<img src="url"> The Alt Attribute
 The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text:

<img src="boat.gif" alt="Big Boat">

Reference:
 http://www.w3schools.com/html/html_images.asp

Image Maps
Client Side Image Maps Server Side Image Maps

Image Maps
Server-side image maps
<a href="../location/map.asp"> <img src="../images/states.gif" alt="map of US States" border="0" ismap="ismap" /> </a>

ismap attribute, tells the browser to send

the server x, y coordinates representing where the users mouse was when he or she clicked the image map

Client side image maps

 Client-Side Image Maps Using <map> and <area>
<Area> elements define the clickable hotspots <map> element is a container for the <area> elements The <img>element has a usemap attribute whose value is name attribute of the <map> element, preceded by a pound or hash sign.
http://www.december.com/html/demo/imagemap.html

Absolute and Relative URLs

Absolute URL

http://www.exampleNewsSite.com/Entert ainment/Film/index.htm
Relative URL

A relative URL indicates where the resource is in relation to the current page
   

Same Directory contactUs.htm Subdirectory Film/index.htm

Assignment #3
Please create a user registration form. This form should take input from user and email it at specific email address. Example:
http://www.w3schools.com/TAGS/tag_form.asp Due Date: March 17, 2011 Time: 10:00am Location:Room#3 Note: Please submit the assignments in both the formats.

Communication Group
Group email:
 [email protected] m

\\10.16.18.10\Documents\Web Engineering BSIT2(B)\Lectures\Lecture 3

References:
http://www.webmonkey.com/2010/02/html_ch eatsheet/ http://www.w3schools.com/HTML/html_entitie s.asp http://www.selfseo.com/find_ip_address_of_a_ website.php/find_ip_address_of_a_website.php http://www.tricksdaddy.com/2010/11/12-bestwebsites-to-learn-php.html