FALLSEM2019-20 CSE3002 ETH VL2019201000953 Reference Material I 16-Jul-2019 CSE3002 Class 1 HTML

Internet and Web Programming
KAUSER AHMED P
SCOPE
VIT , VELLORE
About the Course
● Course Code : CSE3002
● Course Title : Internet and Web Programming
● No. of Hours : 30
●
CAT 1 and CAT 2 : (15 + 15 Marks)
●
No. of Digital Assignments : 3 (10+10+10 marks)
●
Embedded Lab :5 (10+10+10+15+15 marks)
●
Embedded Project : 3 Reviews (20+30+50 marks)
Theory + Lab : FAT (40 Marks)
Course Objectives
1. To understand the basic concepts of web
programming and internet.
2. To understand internet protocols.
3. To understand how the client-server model of
Internet programming works.
4. Learn the use of scripting languages and
appreciate their limitations.
5. To understand interactive web applications.
Outcomes
1. Differentiate web protocols and web architecture.
2. Develop client side web application.
3. Implement client side script using JavaScript.
4. Implement server side script using PHP
5. Develop XML based web applications
6. Develop application using JavaScript with recent
advancement like JSON, AJAX and JQuery.
Books
Text books:
1. Paul Deitel, Harvey Deitel, Abbey Deitel, Internet & World Wide Web - How to
Program, 5th edition, Pearson Education, 2012.
2. Kogent Learning Solutions Inc, Web Technologies Black Book, Dream Tech
press, 2013.
3. Brad Dayley, Brendan Dayley, and Caleb Dayley , Node.js, MongoDB and
Angular Web
Development: The definitive guide to using the MEAN stack to build web
applications, 2nd Edition, Pearson Education, 2018
Reference book:
1. Lindsay Bassett, Introduction to JavaScript Object Notation, 1st Edition,
O’Reilly Media, 2015
2. Fritz Schneider, Thomas Powell , JavaScript – The Complete Reference, 3rd
Edition, Mc-Graw Hill, 2017
3. Steven Holzener , PHP – The Complete Reference, 1st Edition, Mc-Graw Hill,
2017
4. Sandeep Kumar Patel, Developing Responsive Web Applications with AJAX
and JQuery, Packt Publications, 2014
HyperText Markup Language (HTML)
Introduction
• Standardized by World Wide Web Consortium
(W3C)
• Used to encode WWW documents (web pages)
• Document-layout and hyperlink specification
language
• Defines the syntax and placement of various media
like text, images etc. to be displayed by the browser
• Marking up means additions of certain commands
(in the form of tags) to our document in order to tell
the browser how we want the document displayed
History of HTML and W3C
• 1989 - HTML
• 1994 – HTML 2.0
• 1996 – HTML 3.2
• 1997 – HTML 4.0
• 1999 – HTML 4.01
• Today – XHTML
• See http://w3c.org/
• https://www.w3schools.com/html
HTML and its Flavors
• HTML – Hyper Text Markup Language
• SGML – Standard Generalized Markup Language
• XML – Extensible Markup Language
• XHTML - Extensible Hypertext Markup Language
• DHTML - Dynamic Hypertext Markup Language
HTML Basics (Hierarchical Model)
• HTML is structured in hierarchical order

• Organized in hierarchical fashion such as File
management in computer
• DOM – Document Object Model
HTML Basics (Structure)
HTML Basics (Structure)
• Basic structure
<html>
<head><title>…</title>…</head>
<body>…</body>
</html>
• Syntax of the HTML language
–Behind the scene tags
–On screen tags
Elements, Attributes and Tags
• Tags – Commands to do something
• Elements – Set of tags with content in
between
• Attributes – Modify the tags
HTML Basics (Tag Guidelines)
• All tags are contained within < and >.
• No spaces between the <, >, and the tag
text. Example: <html>
• No spaces within tag text.
• Both opening and closing tags should be used
(for closed tags).
• Use the same case for all tag text, preferably
lowercase text.
• Keep horizontal symmetry.
HTML tags
• HTML comments
…
• Inserting a title
– Only one title element is permitted
…
<title>My Home Page</title>
…
First HTML page
<html>
<head>
<title>My First html
page</title>
</head>
<body>
Hello World!
</body>
</html>
Working with text
• Inserting a paragraph
…
<p>This is a simple one sentence paragraph</p>
<p>This second paragraph starts on its own line, with a
little extra line space</p>
…
Working with text
• Inserting line breaks
– Browser attempts to display all text in a single continuous
line
…
This is first line.<br>
This is second line.
…
• Inserting Horizontal line
…
A short poem
<hr>
<p>Mary had a little lamb<br>
Whose fleece was white as snow
…
Changing text styles
– b—boldface, i—italics, tt—teletype etc.
…
<p>This product is <b>new</b> and
<b>improved</b>!</p>
<p>This product is <i>new</i> and
<i>improved</i>!</p>
<p>This product is <b><i>new</i></b> and
<b><i>improved</i></b>!</p>
<p>The computer said <tt>"I want to
compute."</tt></p>
…
– Elements can be nested
Headings
• h1- through h6; numbers signify relative importance
…
<h1>HTML Tags</h1>
<h2>The Body tag</h2>
<h3>The paragraph tag</h3>
The p tag is used to break text into paragraphs
…
•
Pre-formatting text
Preserves white space entered into the source code
• Uses monospace font
<pre>
<b>item Specification Manufacturer</b>
<hr>
CPU Pentium-III Intel
Disk 40 GB Seagate
Monitor SVGA Samsung
Printer LaserJet HP
</pre>
More text formatting
• Used to create sections
80 GB hard disk is now Rs.<del>2500</del> 2000.</body>
• Indenting text
Thus the story begins -
<blockquote>
Ten thousand years ago...<br>
Men used to
</blockquote>
HTML symbols
Entity
Result Description Entity Name
Number
∀ for all ∀ ∀
∃ exists &exists; ∃
∅ empty ∅ ∅
∈ isin ∈ ∈
∋ ni &ni; ∋
∏ prod ∏ ∏
∑ sum ∑ ∑
≤ Less of equal ≤ ≤
≥ Greater or equal ≥ ≥
√ square root √ √
HTML Colors
Color Name Color HEX Color
AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
Creating divisions
• Used to create sections
…
<div style="color:red">
This is first line of section1.<br>
This is second line of section 1.
</div>
<div style="color:blue">
This is first line of section 2.<br>
</div>
…
…
Unordered list
<ul>
<li>Africa</li>
<li>Asia</li>
<li>Australia</li>
<li>Antarctica</li>
</ul>
…
…
Ordered list
<ol>
<li>Choose Open from File menu</li>
<li>Locate the file you wish to edit and Click on the
filename</li>
<li>Click the open button</li>
</ol>
…
…
Combination list
<ol>
<li>
Topic 1
<ul>
<li>Topic 1.1</li>
<li>Topic 1.2</li>
<li>Topic 1.3</li>
</ul>
</li>
<li>
Topic 2
<ul>
<li>Topic 2.1</li>
<li>Topic 2.2</li>
<li>Topic 2.3</li>
</ul>
</li>
</ol>
…
…
Definition list
<dl>
<dt>Triangle<dd>Three sided figure
<dt>Quadrilateral<dd>Four sided figure
</dl>
…
…
Displaying different Fonts
<font face="Century Gothic" color="blue">Appearance of text</font><br>
<font face="Times Roman" color="olive" size="6">depends on</font><br>
<font face="Times Roman" color="#C0660C" size="5">font attributes</font>
…
Working with images
• Embedding images
…
<img src="earth.bmp">
<img src="earth.bmp" width=100 height=100>
…
Background image
…
<body background=Sunset.jpg>
</body>
…
Background Color
…
<body bgcolor="gold">
</body>
…
Working with Hyperlinks
• Creating Hypertext
…
Further details may be obtained in <a href="charter3.html">Chapter
3</a> of this document<br>
Download the free software from <a
href="http://www.microsoft.com">Microsoft Home Page</a>
Send me <a href="mailto:u_roy@it.jusl.ac.in">email</a>
…
…
Creating bookmarks
<a href="bookmark.html#section3">go</a>
<a name="section3">Section3</a>
…
…
Changing link appearance
<a href="bookmark.html">
<font size=5 color="#008088">
Go to section 3
</font>
</a>
…
•
Hyperlinks
Hyperlinks with images
…
Click the buttons below to go the previous or next
pages<br>
<a href="chapter2.html"><img src="backward.jpg"></a>
<a href="chapter4.html"><img src="forward.jpg"></a>
…
• Specifying link colors

…
<body link="green" alink="red" vlink="gray">
…
Creating tool tip label
• Describes textual description for image
• Specifies something about the target document
Click the buttons below to go the previous or next

pages<br>
<a href="chapter2.html"><img src="backward.jpg"
alt="previous page"></a>
<a href="chapter4.html"><img src="forward.jpg"
alt="next page"></a>
…
Creating Acronym
<acronym title="World Wide
Web">WWW</acronym>
uses <acronym title="HyperText Markup
Language">HTML</acronym>
…
•
Image map
A graphic that can be divided into multiple areas
• Each area can point to a different URL
• Browser loads the URL on clicking the associated area
<img src="shapes.jpg" usemap="#mainmap">

<map name="mainmap">
<area shape=circle coords="32,32,33" href="circle.html">
<area shape=rect coords="31,37,100,90" href="rect.html">
•
Working
Base tag
with head section
– Used to specify base URL for all links in this page
<head>
…
<base href="e:\My Documents\html\Picture\">
</head>
<body>
<img src="shapes.jpg">
</body>
…
Meta tag
• Keywords for search engines
…
<head>
<title>My First html page</title>
<meta name="keywords" content="html, JavaScript,
Xml">
</body>
…
• Redirecting to another page

…
<head>
<meta HTTP-EQUIV="REFRESH" content="0;
url=http://www.yahoo.com">
</head>
…
Advanced tags
• Creating Tables
– table tag
• tr tag— table row
• td tag—table column
…
<table>
<tr> <td>2</td> <td>3</td> </tr>
<tr> <td>4</td> <td>5</td> </tr>
</table>
…
•
Creating Tables
Adding column header
(contd.)
– th tag
…
<table>
<tr> <th>Name</th> <th>OS</th> <th>OOP</th>
</tr>
<tr> <td>Sujay</td> <td>2</td> <td>3</td>
</tr>
<tr> <td>Tuhina</td> <td>4</td> <td>5</td>
</tr>
</table>
…
Creating Tables (contd.)
• Adding a caption
– caption tag
…
<table>
<caption>Marks</caption>
…
</table>
…
• Adding border
– border attribute—default width is 1 pixel
…
<table border>
…
</table>
…
•
Creating Tables
Adding column header
(contd.)
– rowspan number of rows caption spans
– Colspan number of columns caption spans
…
<table border>
<caption>Marks table</caption>
<tr><th rowspan=2>Name</th><th
colspan=2>Marks</th></tr>
…
</table>
…
• Cell spacing and cell padding
– cellspacing—spacing between cells
– cellpadding—gap between edge and the content of
cell
…
<table border cellspacing=10 cellpadding=5
width=300>
…
</table>
…
• Background color
– bgcolor
…
<table border cellspacing=10 cellpadding=5 width=300
bgcolor="gold">
…
</table>
…
• Background color of a row/cell
– bgcolor
…<tr
bgcolor="gold"><td>Sujay</td><td>2</td><td>3<
/td></tr>
<tr
bgcolor="olive"><td>Tuhina</td><td>4</td><td>5</t
d></tr>
…
Image as link
• <html>
• <body>
• <p>
• An image as a link: <a
href="https://www.w3schools.com">
• <img border="0" alt="W3Schools" src="logo_w3s.gif"
width="100" height="100">
• </a>
• </p>
• </body>
• </html>
Working with forms
• Used to send user supplied data to server
program (CGI/JSP/ASP) over the Internet
• Form can contain interface elements such as text
fields, buttons, checkboxes, radio buttons and
selection lists that let users to enter text and
make choices
• Interfaces are defined by INPUT or SELECTION tag
• Elements are defined within FORM tag
• Data can be passed using submit button
Text fields
• INPUT tag, type is text
• Used to specify single line textual data, such as
name, email address, login name etc.
…
<form>
First Name<input type=“text”><br>
Last Name<input type=“text”>
</form>
…
Text fields
• Attributes
– size number of characters visible
– maxlength maximum number of characters that
can be typed
…
First Name <input type="text" size=5 maxlength=10>
Middle Initial<input type="text" size=1>
Last name <input type="text" size=5>
…
Password fields
• INPUT tag, type is password
…
<form>
<table>
<tr><td>login</td>
<td><input type="text" size=10></td></tr>
<tr><td>password</td>
<td><input type="password" size=10></td></tr>
</table>
</form>
…
Check box
• Used to specify true/false type options
…
<form>
<input type="checkbox" checked>CPU <br>
<input type="checkbox">RAM <br>
<input type="checkbox">Disk
</form>
…
Radio buttons
• Similar to checkbox, except that only one radio
button in a group can be selected at a time
• Group is specified by NAME attribute
…
<input type="radio" name="CPU" checked>Pentium I<br>
<input type="radio" name="CPU">Pentium II<br>
<input type="radio" name="CPU">Pentium III<br>
<p>
<input type="radio" name="ram">32 MB<br>
<input type="radio" name="ram" checked>64 MB<br>
<input type="radio" name="ram">128 MB<br>
…
Text area
• Allows users to enter lines of text
• ROWS and COLS attributes fixes the number of
rows and column of the visible portion of text
area
…
<form>
Tell us about your interest(maximumm of 100 words)
<textarea cols=20 rows=5></textarea>
</form>
…
•
Selection list
Allows users to select an item from pull down menu
• Options are included using OPTION tag
• SIZE determines how many items are visible
• MULTIPLE attribute allows the user to select multiple
options at a time by holding down the shift key
<form>
<select>
<option>CPU
<option selected>Disk
<option>RAM
<option>Monitor
</select>
</form>
Action buttons
• RESET button to clear contents of elements of a
form
• SUBMIT button to send the content of a form
<form action="ckeck.jsp">
…
<input type="reset" value="Clear">
<input type="submit" value="Login">
</form>
HTML 5
• <fieldset>
• <legend>Enter contact email</legend>
• <label for="primary">Primary address:</label>

• <input type="email" placeholder="drone@globex.com"
• pattern=".+@globex.com" size="30" required
• title="Must be a globex.com email address" />
• <label for="secondary">Secondary addresses:</label>

• <input type="email" placeholder="foo@this.com, bar@that.com"
• size="35" multiple
• title="Zero or more addresses, separated with ','" />
• </fieldset>
• <fieldset>
• <legend>Update URL</legend>
• <div class="control">
• <label for="url">Enter an https:// URL:</label>
• <input type="url" name="url" id="url"
• placeholder="https://example.com"
• pattern="https://.*" size="20" required />
• </div>
• </fieldset>
• <fieldset> <legend>Choose trip dates</legend>
• <div>
• <label for="start">Start</label>
• <input type="date" id="start" name="trip"
• value="2018-07-22"
• min="2018-01-01" max="2018-12-31" />
• </div>
• <div>
• <label for="end">End</label>
• <input type="date" id="end" name="trip"
• value="2018-07-29"
• min="2018-01-01" max="2018-12-31"/ >
• </div>
• </fieldset>
• <form action="/action_page.php"
autocomplete="on">
• First name:<input type="text"
name="fname"><br>
• Last name: <input type="text"
name="lname"><br>
• E-mail: <input type="email" name="email"
autocomplete="off"><br>
• <input type="submit">
• </form>
• <form action="/action_page.php">
E-
mail: <input type="email" name="userid"><br
>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate
value="Submit without validation">
</form>
• Country
code: <input type="text" name="country_cod
e" pattern="[A-Za-z]{3}" title="Three letter
country code">
• Username: <input type="text" name="usrname" required>

FORM ELEMENTS
Form in HTML
• Forms provide way to collect user data (email,
name, comments, zip code, etc) on a web page
• The form tag <form> ... </form> is used to send
user-specified information back to the server.
request
user
web page
send web page
Form
fill out form

& submit
process data
send result
FORM EXAMPLE
Form Elements
• Enclosed in <form> tags
• The form tag itself needs at least 2 attributes, the
“action” attribute and the “method” attribute.
• Contain 3 basic functions
1. Tags to define inputs for info
<input/>
2. Tags to trigger action
<input type=“submit”/>
3. Attributes to define desired action
<form method=“post” action=“doSomething.pl”>
<html>
Form Example
<head> <title>Internet and WWW How to Program - Forms</title>
</head>
<body>
<h1>Feedback Form</h1>
<p>Please fill out this form to help us improve our site.</p>
<form method="post" action="FormActionResponse.html">

<p><label>Name:<input name="name" type="text" size="25"
maxlength="30" /></label>
</p>
<p>
<input type = "submit" value="Submit Your Entries" />
<input type = "reset" value="Clear Your Entries" />
</p>
</form>
</body>
</html>
Form Components and Elements
Input box
First Name Last Name
Address #1
Address #2
City State Zip
Country
Item Purchased Purchase Date

drop-down Serial Number
group
list box box
Used For (check one) Network Operating System (check all that apply)
Netware
Home
Banyan Vines
Business
radio Religious or Charitable Institution Windows
IBM Lan Server check
buttons Government
Educational Institution PC/NFS
boxes
text
Comments?: area
form Send Registration Cancel

button
Form Control Elements
• Control elements :
– text boxes for text and numerical entries
– selection lists for long lists of options, usually appearing in a
drop-down list box
– radio buttons, also called option buttons, to select a single
option from a predefined list
– check boxes to specify an item as either present or absent
– groups boxes to organize form elements
– text areas for extended entries that can include several lines of
text
– buttons that can be clicked to start processing the form
• Each control element in which the user can enter information is called a
field.
The <form> Tag
• A single page can include several different forms, but you cannot
nest one form inside another.
• The general syntax of the <form> tag is:
<form attributes>
form elements and layout tags
</form>
• A single Web page can contain multiple forms, the <form> tag
includes the name attribute.
• The name attribute identifies each form on the page.
• The name attribute is also needed for programs that retrieve
values from the form.
Input Types
Type Description
type=”button” Display a button which can be clicked to
perform an action from a script
type=”checkbox” Display a check box
type=”file” Display a browse button to locate and select a
file
type=”hidden” Create a hidden field, not viewable on the form
type=”image” Display an inline image which can be clicked to
type=”password” Display a text box in which hides text entered
by the user
type=”radio” Display a radio (option) button
type=”reset” Display a button which resets the form when
clicked
type=”submit” Display a button which submits the form when
clicked
type=”text” Display a text box in which displays text
entered by the user
Creating a Text Box
• To create a text box, use the following HTML code:

<input name=“name” id=“id”
value=“value” size=“value”
maxlength=“value”>
– name and id attributes identify the field
– value - a default value to the text box
– size - the width of the text box in number of
characters
– maxlength - the maximum number of characters
allowed in the field
Setting a Default Value for a Field
• When the same value is entered into a field, it may
make sense to define a default value for a field.
• Default values can save time and increase accuracy
for users of a Web site.
• To define a default value, use the following syntax:
<input value=“value”>
– value is the default text or number that is displayed
in the field
Value =“United States”
Using a Selection List
Your selection list

might look slightly
different depending
on the browser and
browser version.
Creating a Selection List
• A selection list is a list box from which a user selects a
particular value or set of values.
• Selection lists are good to use when there is a fixed set of
possible responses.
• Selection lists help prevent spelling mistakes and erroneous
entries.
• A selection list is created using the <select> tag.
• The <option> tag is used to specify individual selection
items.
Creating a Selection List
selection list field

name
items in the selection

list
Selection Lists with
Different Size Values
size = "1" size = "4"
size = "7" size = "9"

Working with Option Values
• By default, a form sends the values that are displayed in
the selection list to the CGI script.
• Instead of sending an entire text string, an abbreviation
or code can be sent to the CGI script.
• Specify the value that is sent to the CGI script with the
value attribute.
• Use the selected attribute to specify which item in the
selection is selected, or highlighted, when the form is
displayed.
Working with Option Groups
• The most recent releases of HTML allows you
to organize selection lists into distinct groups
called option groups.
• The syntax for creating an option group is:
<optgroup label=“label”>
– label is the label assigned to the option group
– the text for the label appears in the selection list
above each group of items but is not a selectable
item from the list
Option Groups
Internet Explorer and Netscape versions prior to 6.0 display

the selection list without the group labels.
option group
label
option group
a single label
ption group
a single option
group
Radio Buttons
• Radio buttons display a list of choices from which a user
makes a selection.
– Only one radio button can be selected at a time.
• The syntax to create a radio button is:
<input type=“radio” name=“name” id=“id”
value=“value”>
– name - the field containing the radio button (required)
– id - the specific option. Only required if you intend to use a
field label with the radio button
– value - the value sent to the CGI script, if that radio button is
selected by the user
Creating Radio Buttons
In this sample code, the value sent to the CGI script does not match the field label.
If the user selects the Republican radio button, the value “gop”
is sent to the CGI script paired with the field name “party.”
Creating a Group Box
• A group box labels an entire collection of radio

buttons.
• A group box is a box placed around a set of
fields that indicates that they belong to a
common group.
• The syntax for creating a group box is:
<fieldset>
<legend align=“align”>legend text</legend>
collection of fields
</fieldset>
Group Boxes for Radio Buttons
and Check Boxes
Creating a Field Set
• HTML and XHML allow you to organize option
buttons into a group of fields called field sets.
– Most browsers place a group box around a field
set to indicate that the fields belong to a common
group.
<fieldset>
fields
</fieldset>
Where fields are the individual fields within a set.
• the <legend> tag is used to display a legend on the

group box
Creating a Group Box and Legend
start of group group box
box legend
resulting radio buttons and group box

Group Box Size
• There is no attribute to control the size of a group box.
• The box’s height will be large enough to accommodate the
fields and labels in the field set.
• The width is the width of whatever space remains on the Web
page.
• To set the width to a specific value use a table cell to place the
group box and set the width of the cell.
– group boxes cannot extend across table cells; all of the fields in
the field set must be placed within a single cell
Working with Check Boxes
• A check box is either selected or not

• Check boxes are created using the following syntax:
<input type=“checkbox” name=“name”
id=“id” value=“value”>
– name and id - the check box
– the value - the value that is sent to the CGI script
when the check box is selected
• Check boxes are not selected by default.
– to do this, add the checked attribute to the
<input> tag
– <input type =“checkbox” checked = “checked”>
Group Boxes for Radio Buttons
and Check Boxes
Creating a Text Area
default text
area text dimensions
of text area
resulting text area

Comment Text Area
Creating a Form Button
Creating a Push Button
• One type of button, called a push button, is
created using the <input> tag as follows:
<input type=“button” value=“text”>
– text is the text that appears on the button
• By themselves, push buttons perform no
actions in the Web page.
• To create an action, write a script or program
that runs automatically when the button is
clicked.
Creating Submit and Reset Buttons
• A submit button is a button that submits the
form to the CGI script for processing.
• A reset button resets the form to its original
(default) values.
• The syntax for creating these two buttons is:
<input type=“submit” value=“text”>
<input type=“reset” value=“text”>
– value attribute defines the text that appears on
the button
Creating a Form Button
The figure shows HTML tags for buttons that download a program,
retrieves information, and resets the form to its original values.
Creating a File Button
The figure shows an

example of using the
file button to return
the location of a file 1. User clicks the Browse button
named “report.doc.”
2. Selects a file from the

Choose File dialog box
3. The filename and location

are automatically placed in
the text box
Working with Hidden Fields
• A hidden field is added to the form but not displayed in the

Web page.
• Because the field is hidden, it can be placed anywhere
between the opening and closing <form> tags.
• The syntax for creating a hidden field is:
<input type=“hidden” name=“name”
value=“value>
• Place all hidden fields in one location to make it easier to
read and interpret the HTML code.
• Include a comment describing the purpose of the field.
Adding a Hidden Field
This figure shows an

example of the
hidden field code.
Working with Form Attributes
• After adding the elements to your form, you’ll need to specify

where to send the form data and how to send it. Use the
following attributes:
<form action=“url”method=“type”enctype=“type”>… </form>
– URL - the filename and location of the CGI script that process the form
– Method - how your Web browser sends data to the CGI script
– enctype - the format of the data stored in the form’s field
Working with Form Attributes
• The method attribute can have one of two values:

– Post
– Get
• The get method is the default;

– get appends the form data to the end of the URL specified in the
action attribute.
• The post method sends form data in a separate data stream,
allowing the Web server to receive the data through “standard
input”.
– the “post” method is considered the preferred way of sending data
to a Web server
Using the “mailto” Action
• Use the “mailto” action to send form information via e-

mail without using a CGI script.
• This action accesses the user’s own e-mail program and uses
it to mail form information to a specified e-mail address,
bypassing the need for using CGI scripts on a Web server.
• The syntax of the “mailto” action is:
<form action=“mailto:e-mail_address”
method=“post” enctype=“text/plain”>
– e-mail_address is the e-mail address of the
recipient of the form
Specifying the Tab Order
• Users navigate through a Web form using the Tab key.
– the Tab key moves the cursor from one field to another in the order
that the field tags are entered.
• Add the tabindex attribute to any control element in the form
to specify the tab order.
• With each element assigned a tab index number, the cursor
moves through the fields from the lowest index number to the
highest.
– for example, to assign the tab index number “1” to the fname field,
enter the code: <input name=“fname” tabindex=“1”>
Specifying an Access Key
• An access key is a single key that you type in conjunction with

the Alt key for Windows users or the Command key for
Macintosh users, to jump to one of the control elements in the
form.
• Add the accesskey attribute to any of the control elements to
create an access key.
• To create an access key for the lname field, enter the following
code: <input name=“lname” accesskey=“1”>
– if a user types Alt+l (or Command+1 for Macintosh users), the control
element for the lname field is selected
Input Types
Type Description
type=”button” Display a button which can be clicked to
type=”checkbox” Display a check box
type=”file” Display a browse button to locate and select a
file
type=”hidden” Create a hidden field, not viewable on the form
type=”image” Display an inline image which can be clicked to
type=”password” Display a text box in which hides text entered
by the user
type=”radio” Display a radio (option) button
type=”reset” Display a button which resets the form when
clicked
type=”submit” Display a button which submits the form when
clicked
type=”text” Display a text box in which displays text
entered by the user
<form> tag needed after <body>
Three <Fieldset> with <legend>

for group box
<textarea> for “street field”
Default value as “United States”

needed for “Country”
Checkbox for “Ship to Billing

Address” field
Radio button for Credit Card field
“password” as input type” for

card number field
<select> and <option> for

“expiration date” field
Three form buttons at the bottom

TABLE
• <table>...</table>identifies table
• tr>...</tr>Contains a row of cells in a table.
• <th>...</th>A table header cell;
• <td>...</td>A table data cell.
• <col> or <col/>Specifies a column in a table.
<caption>...</caption>
• Specifies a caption for a table.
<thead>...</thead>
• Specifies the header part of a table. This section may be repeated by the user agent if
the table is split across pages (in printing or other paged media).
<tbody>...</tbody>
• Specifies a body of data for the table.
<tfoot>...</tfoot>
• Specifies the footer part of a table. Like <thead>, this section may be repeated by the
user agent if the table is split across pages (in printing or other paged media).
• <table border="4" cellpadding="2"
cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Assignment
FRAMES
• Frames allow a visual HTML Browser window to be split into
segments, each of which can show a different document.
• <frameset>...</frameset>
• Contains the frameset. The frames layout is given by comma
separated lists in the rows and cols attributes.
• <frame> or <frame/>
• Delimits a single frame, or region, within the frameset. A
separate document linked with the src attribute appears
inside.
• <noframes>...</noframes>
• Contains normal HTML content for user agents that don't
support frames.
• <frameset cols=“*,40,*”>
<frame src=“c1.html”>
<noframes>
<body>
Hello world</body>
</noframes>
</frameset>
<iframe>
• It is use for creating a inline frame. Inline
frame allows you to open new document
inside the main browser's window.
• Inline frame is also called floating frame.
Iframe can be placed anywhere inside the site.
Attribute of iframe
Attribute of form tag provides significant information about the form for the browser. There are
following attributes..
src--URL of document which will be show in iframe.
• srcdoc--Gives the content of nested browsing context
• name-- specify the name of ifrme.
• sendbox-- Set restrictions on content hosted by iframe
• seamless--Specify that the iframe element's browsing context is to be rendered in a manner.
• height -- specify height of iframe.
• width--specify width of iframe.
Declaration Syntax :
Declaration syntax of iframe in HTML5.
<iframe src="URL">....</iframe>
• <html >
<head>
<title>Title of document</title>
</head>
<body>
<p><strong>iframe</strong><b> tag Example.</b></p>
<p><b>Implementation of <iframe> in
HTML5.</b></p>
<iframe src="http://www.vit.ac.in/" name=“VIT" >
</iframe><br>
<iframe src="http://www.google.co.in/" ></iframe>
<br>
</body>
</html>
• , longdesc is an attribute used within the
image element, frame element, or iframe
element.
• It is used to reference a long description
website of the image, frame, or iframe
<img src="Hello.jpg"
longdesc="description.html">

FALLSEM2019-20 CSE3002 ETH VL2019201000953 Reference Material I 16-Jul-2019 CSE3002 Class 1 HTML

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

FALLSEM2019-20 CSE3002 ETH VL2019201000953 Reference Material I 16-Jul-2019 CSE3002 Class 1 HTML

Caricato da

Copyright:

Formati disponibili

Internet and Web Programming

• HTML is structured in hierarchical order

• Specifying link colors

Click the buttons below to go the previous or next

<img src="shapes.jpg" usemap="#mainmap">

• Redirecting to another page

• <label for="primary">Primary address:</label>

• <label for="secondary">Secondary addresses:</label>

• Username: <input type="text" name="usrname" required>

fill out form

<form method="post" action="FormActionResponse.html">

City State Zip

Item Purchased Purchase Date

form Send Registration Cancel

• To create a text box, use the following HTML code:

Your selection list

selection list field

items in the selection

size = "1" size = "4"

size = "7" size = "9"

Internet Explorer and Netscape versions prior to 6.0 display

• A group box labels an entire collection of radio

• the <legend> tag is used to display a legend on the

resulting radio buttons and group box

• A check box is either selected or not

resulting text area

The figure shows an

2. Selects a file from the

3. The filename and location

• A hidden field is added to the form but not displayed in the

This figure shows an

• After adding the elements to your form, you’ll need to specify

<form action=“url”method=“type”enctype=“type”>… </form>

• The method attribute can have one of two values:

• The get method is the default;

• Use the “mailto” action to send form information via e-

• An access key is a single key that you type in conjunction with

Three <Fieldset> with <legend>

<textarea> for “street field”

Default value as “United States”

Checkbox for “Ship to Billing

Radio button for Credit Card field

“password” as input type” for

<select> and <option> for

Three form buttons at the bottom

• srcdoc--Gives the content of nested browsing context

• name-- specify the name of ifrme.

• sendbox-- Set restrictions on content hosted by iframe

• seamless--Specify that the iframe element's browsing context is to be rendered in a manner.

• height -- specify height of iframe.

• width--specify width of iframe.

Potrebbero piacerti anche