Scribd
Upload
263 views

HTML Forms

HTML is used to structure and present content on the web. It uses elements like <p> for paragraphs and <img> for images that are enclosed in angle brackets. It allows for hyperlinks to other pages using the <a> tag. HTML documents have a head and body, with the head containing meta information and the body displaying the visible content.

Uploaded by

Shubham Mishra
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
263 views

HTML Forms

HTML is used to structure and present content on the web. It uses elements like <p> for paragraphs and <img> for images that are enclosed in angle brackets. It allows for hyperlinks to other pages using the <a> tag. HTML documents have a head and body, with the head containing meta information and the body displaying the visible content.

Uploaded by

Shubham Mishra
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 87

Introduction to HTML

1
Introduction to Hypertext
 HTML: Hypertext Markup Language
 Hypertext …
 links within and among Web documents
 connect one document to another
Origins of HTML
 HTML is based on SGML (Standardized
General Markup Language)
 Tim Berners-Lee created first
HTML version in the late 1980s (as a
subset of SGML).
What is HTML?
• HTML (Hypertext Markup Language)
• HTML standards are developed under the authority of the World
Wide Web Consortium (W3C), headed by Tim Lee
• http://www.w3c.org
• HTML is the set of "markup" symbols or codes inserted in a file
intended for display on a World Wide Web browser.
• The markup tells the Web browser how to display a Web page's text,
images, sound and video files for the user.
• The individual markup codes are referred to as elements (but many
people also refer to them as tags).
HTML Documents

• HTML documents are text documents


• We use simple ASCII text files
• Html file extensions: .html or .htm
• You can create html documents using:
• Notepad in Windows and TextEdit (MAC OS X)
• You can also use HTML Editors
HTML Editors
• HTML editors are called “WYSIWYG”
• What You See Is What You Get!
• Examples of HTML Editors:
• Dreamweaver
• Front Page
• Go Live
HTML Editors:
 Pros  Cons
– Good for beginners – They do not always
• You do not have to know generate clean HTML
much HTML to use editors  Add redundant tags
• It is easy to create complex  Add their own tags
tables, image maps, and use – They do not offer good
advanced functions such graphic tools to
as Style Sheets and manipulate images
JavaScript
– It can be hard to fix
• Easy for design due to the HTML tags since every
WYSIWYG interface time you open a
document, code is added.
HTML Document Structure
• The HTML document is divided into two major parts:
• HEAD: contains information about the document:
• Title of the page (which appears at the top of the browser
window)
• Meta tags: used to describe the content (used by Search
engines)
• JavaScript and Style sheets generally require statements in the
document Head
• BODY: Contains the actual content of the document
• This is the part that will be displayed in the browser
window
Sample HTML Document
<HTML>

<HEAD>
<TITLE> My web page </TITLE>
</HEAD>

<BODY>
Content of the document
</BODY>

</HTML>
HTML Tags

• All HTML tags are made up of a tag name and sometimes


they are followed by an optional list of attributes which
all appear between angle brackets < >
• Nothing within the brackets will be displayed by the browser (unless
the HTML is incorrectly written and the browser interprets the tags
as part of the content)
• Attributes are properties that extend or refine the tag’s functions
HTML Tags
 Standalone tags
– There are a few HTML tags which do not use
an end tag and are used for standalone
elements on the page:
<img> to display an image
<BR> Line break
<HR> horizontal line
HTML Tags
 Attributes

<body bgcolor=“khaki” text=“#000000” >

 Attributes are added within a tag to extend a tag’s action.


 You can add multiple attributes within a single tag.
 Attributes belong after the tag name; each attribute should be separated by
one or more spaces.
 Most attributes take values, which follow an equal sign “=“
 after the attribute’s name.
 Values are limited to 1024 characters in length.
This is Information which the browser
will ignore:
 Tabs
 multiple spaces will appear as a single space
 Example:
–
“Hello,
How are you?”
The browser will ignore the blanks and new
line:
Hello, How are you?
What does <body> include?
<P> v. <BR> Tags
 <BR>: Break
 <P>: Paragraph tag. Creates more space
than a BR tag.
Paragraph Tag <P>

 Leaves one empty line after the tag


 Multiple <P> tags with no intervening text
is interpreted as redundant by all browsers
and will display a single <P> tag
Line break <BR>

 This tag breaks the line and starts text at a


new line.
 It will not add an empty line like the
paragraph tag
 Multiple <br> tags will display multiple
line breaks
Horizontal Rule <HR>
 The <HR> element causes the browser to
display a horizontal line (rule) in your
document.
 <HR> does not use a closing tag, </HR>.
Attribute Description Default Value
Height of the rule in
SIZE 2 pixels
pixels
Width of the rule in
WIDTH pixels or percentage 100%
of screen width
Draw the rule with a Not set
NOSHADE flat look instead of a
3D look (3D look)

Aligns the line (Left,


ALIGN Center
Center, Right)
Sets a color for the
COLOR Not set
rule (IE 3.0 or later)
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY> Heading 1
<H1> Heading 1 </H1> Paragraph 1,….
<P>Paragraph 1, …
Line 2
<BR> Line 2 <BR>
<HR>Line 3 <BR> _________________________
</P> Line 3
</BODY>
</HTML>
Comments <!-- -->
 Browser will NOT display text in between
<!-- This is a comment -->

<!-- This is another


comment
-->
Backgrounds
 Use < body bgcolor = “ …” > for a
background color with a hex version of a
web-safe color:
<body bgcolor = “ccffff”>

 For a tiled background using an image file:


<BODY background="backgroundPicture.gif">
Different ways of specifying
color
Font Tags to specify color, font
type and size
 Font attributes:
 face: Arial, Courier, etc.
 size: e.g. 3, 6
 color: e.g. “RED”, “GREEN”, etc.
<FONT FACE=ARIAL SIZE=6>
<B>The Curse of Xanadu</B>
</FONT>
<FONT FACE=ARIAL SIZE=3>
By Gary Wolf, <I>Wired Magazine</I>
</FONT>
The Curse of Xanadu By Gary Wolf, Wired Magazine
Text format tags
 Bold: <b> some text </b> or <strong>
 Italic <I> some text </I> or <em>

 <HR> (Horizontal Rule) Displays horizontal line in the browser


window. The line fills the window from left to the right margins.
It’s useful to separate sections of your document
 You can use attributes with <hr> such as
– <hr width=“70%”>
More Text Formatting tags
 <b>..</b>: Defines bold text
 <big>..</big>: Defines big text
 <em>..</em: Defines emphasized text
 <i>..</i>: Defines italic text
 <small>..</small>: Defines small text
 <strong>..</strong>: Defines strong text
 <sub>..</sub>: Defines subscripted text
 <sup>..</sup>: Defines superscripted text
 <strike>..</strike>: defines strike tag
 <center> ..</center>: indicates a section that is center aligned.
 <left> ..</left>: indicates a section that is left aligned.
Lists
 Lists are used to organize items in the
browser window:
 Unordered list: Bulleted list (most popular), list
items with no particular order
 Ordered list: Numbered list
Unordered list:
– Unordered list: Bulleted list
(most popular), lists items
with no particular order

Fruit
<UL> Fruit
<LI> Banana • Banana
<LI>Grape •Grape
</UL>
Ordered list:
 Numbered list:

Fruit
<OL> Fruit
<LI> Banana 1. Banana
<LI>Grape 2. Grape
</OL>
You have the choice of setting the TYPE Attribute to one of
five numbering styles

TYPE Numbering Styles


1 Arabic numbers 1,2,3, ……
a Lower alpha a, b, c, ……
A Upper alpha A, B, C, ……
i Lower roman i, ii, iii, ……
I Upper roman I, II, III, ……
EXAMPLE
<OL TYPE =“i”> i. List item …
<LI> List item …</LI> ii. List item …
<LI> List item …</LI>
</OL> Text ….
<P> text ….</P>
<OL TYPE=“i” v. List item now starts
START=“5”> from 5 …
<LI> List item now
starts from 5 …</LI>
</OL>
List with in list
<OL TYPE =“1”>
<LI> List item 1 …</LI>
<LI> List item 2 ..</LI>
<ol type = "a">
<li> 1.1
<li> 1.2
</ol>
</OL>
Hyperlinks (Anchor Tag):

 Hyperlinks are used for linking:


 within the same page (Internal Link)
 To another page in your web site (Relative Link or local
link)
 To another page outside your web site (Absolute or remote
link)
 Email Link
 Hyper Links: are highlighted and underlined text.
When you click on it, it takes you to another
page on the web.
<A> tag
 The most important attribute of the <a> element is the href attribute,
which indicates the link's destination.
 By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red

 Syntax: <a href="url">link text</a>


 The href attribute specifies the destination address
 The link text is the visible part.
 Clicking on the link text, will send you to the specified address.
Hyperlinks:

 Absolute Link: These are links to another page


outside of your web site. These links specify the
entire URL of the page:

<A HREF= http://www.jiit.ac.in> JIIT Web Site </A>

JIIT Web Site


Hyperlinks:

 Relative Link: These are links to another


page in your site so you do not have to
specify the entire URL.
<A HREF=“index.html”>Go back to main page</A>

Go back to main page


Internal Links/ Bookmarks
 HTML bookmarks are used to allow readers to jump to
specific parts of a Web page
 First, create a bookmark with the id attribute:
<h2 id="tips">Useful Tips Section</h2>
 Then, add a link to the bookmark, from within the same
page:
<a href="#tips">Visit the Useful Tips Section</a>
 Or, add a link to the bookmark from another page:
<a href="html_tips.htm#tips">Visit the Useful Tips
Section</a>
Email Link:

 You can mail someone at:


<a href=“mailto:[email protected]”>
Send email to Supervisor</A>

Send email to Supervisor


HTML Tables <TABLE>
 Tables represent a simple mechanism for
creating rows and columns of data
 Tables are very widely used and supported
by all common browsers
 Tables use a very simple tag structure with
these four sub-elements:
1. Table Row<TR></TR>.
2. Table Header <TH></TH>.
3. Table Data <TD></TD>.
4. Caption <CAPTION></CAPTION>
HTML - Tables
 Tables tags starts with
1. <TABLE> tag, then
1. <TR> defines table rows.
• Each <TR> represents one row in the table.
• The number of rows is determined by the number of <TR>
2. <TD> Table data or <TH> Table Header can follow the <TR> tag
• The number of cells in each row is determined by the number of <TH> (Table
Header) and/or <TD> (Table data) tags contained within that row.
• <TH> text will be in bold, and centered
2. </TABLE>

<tr> <th> cell 1 <th> cell 2 <th> cell 3 </tr>


<tr> <td> cell 4 <td> cell 5 <td> cell 6 </tr>
</table>
<tr> <td> cell 7 <td> cell 8 <td> cell 9 </tr>
Table Attributes
<TABLE ALIGN=“left" BORDER=0 BGCOLOR=“cyan“ width=600 cellpadding=0
cellspacing=0>

 Align: "left", "center" or "right“ - "left" is the default


 Border: thickness of the border in pixels - 0 for no borders
 Bgcolor: is background color in HEX or as a name color
 Background=url (works with IE only)
 Cellpadding=n (n is number of pixels (space) between cell content and its border
 Cellspacing=n (n is number of pixels (space) between cells)
 Height=n (height of table in pixels or percentages 100%)
 Width=n (Width of table in pixels or percentages 100%)
Example
<TABLE BORDER="1" WIDTH="300" HEIGHT="100" BORDERCOLOR="BLUE">
<CAPTION ALIGN="TOP" >This table lists movies with their ticket prices</CAPTION>
<TR >
<TH>Movie</TH>
<TH>Ticket Price</TH>
</TR>
<TR>
<TD>MI6</TD>
<TD>250</TD>
</TR>
<TR>
<TD>Minions</TD>
<TD>300</TD>
</TR>
</TABLE>
TD or TH Attributes
 Colspan: Specifies how many cell columns of the table this
cell should span.
 Rowspan: Specifies how many cell rows of the table this cell
should span.
 Align: cell data can have left, right, or center alignment.
 Valign: cell data can have top, middle, or bottom alignment.
 Width: you can specify the width as an absolute number of
pixels or a percentage of the document width.
 Height: You can specify the height as an absolute number of
pixels or a percentage of the document height.

47
Example
<table border=1 cellpadding =2>
<tr>
<th> Column 1 Header</th>
<th> Column 2 Header</th>
</tr> <tr>
<td colspan=2> Row 1 Col 1</td>
</tr> <tr>
<td rowspan=2>Row 2 Col 1</td>
<td> Row 2 Col2</td>
</tr> <tr>
<td> Row 3 Col2</td>
</tr> </table>
Output

Column 1 Header Column 2 Header

Row 1 Col 1

Row 2 Col 2
Row 2 Col 1
Row 3 Col 2

49
Row –column format
Tables

<table border="1"> <table border="1">


<tr> <tr>
<th>Name</th> <th colspan="2">Name</th>
<td>A B Morgan</td> <th>Course</th>
<td>D P Jones</td> <th>Year</th>
</tr> </tr>
… ....
....
5
Scrolling text using the
<marquee> tag
<html>
<head><title> scrolling text</title></head>
<body>
<marquee><font face=“sand”>Welcome to my
website! Be sure to visit again!</marquee>
</body>
</html>
HTML and Multimedia

52
Images
<img src= "logoblue.gif" width="153" height="31"
border="0”>
 Image Attributes
 Image File (SRC:source): This value will be a URL (location of the image) E.g.
http://www.domain.com/dir/file.ext or /dir/file.ext.
 Alignment (ALIGN): This allows you to align the image on your page.
 Width (WIDTH): is the width of the image in pixels.
 Height (HEIGHT): is the height of the image in pixels.
 Border (BORDER): is for a border around the image, specified in pixels.
 HSPACE: is for Horizontal Space on both sides of the image specified in pixels. A setting
of 5 will put 5 pixels of invisible space on both sides of the image.
 VSPACE: is for Vertical Space on top and bottom of the image specified in pixels. A
setting of 5 will put 5 pixels of invisible space above and bellow the image.
Example: Adding Image

Add image as a hyperlink


<a href="default.asp">
<img src="smiley.gif" alt=“smiley image">
</a>
Adding multimedia files
 <a href=“filename.extension> listen to sound file </a>
 <a href=“sound1.wav> listen to sound file </a>
 <a href=“movie1.mov> view movie clip </a>
Multimedia Filetypes
File Type Extention/Mime type
================================
plain text: .txt
HTML document: .html
GIF image: .gif or .jpg or .png
Acrobat file: .pdf
AIFF sound file: .aiff .au . wav
MP3 .mp3
QuickTime movie: .mov

MPEG movie: .mpeg or .mpg


HTML FRAMES
 A framed page is actually made up of multiple HTML
pages
Doc1.html Doc2.html

Doc1.html Doc2.html

Frames.html
• A frameset partitions a web browser window
so that multiple web documents can be
displayed simultaneously.
• Example application: To maintain a
permanently visible directory of links within
your site, while also displaying one or more
selected documents from the site.
– otherwise the directory of links must appear on every page,
and this scrolls up with the page
Creating frames
 A <FRAMESET> element is placed in the html document before
the <BODY> element. The <FRAMESET> describes the amount of
screen real estate given to each windowpane by dividing the screen
into ROWS or COLS.

 The <FRAMESET> will then contain <FRAME> elements, one


per division of the browser window.

 Note: Because there is no BODY container, FRAMESET pages can't


have background images and background colors associated with
them.
Example
<HTML> Framed Page
<HEAD>
FRAME FRAME
<TITLE> Framed Page </TITLE>
<FRAMESET COLS=“23%,77%”>
NAME= NAME=right_pane
<FRAME SRC=“Doc1.html”>
left_pane SRC= Doc2.html
<FRAME SRC=“Doc2.html”>
SRC=Doc1
</FRAMESET >
.html
</HEAD>

</HTML>
Attributes for <FRAMESET>
 ROWS : Determines the size and number of rectangular rows within a
<FRAMESET>.
 COLS: Determines the size and number of rectangular columns within a
<FRAMESET>,
 FRAMEBORDER : Possible values 0, 1, YES, NO. A setting of zero will
create a borderless frame.
 FRAMESPACING: This attribute is specified in pixels. If you go to
borderless frames you will need to set this value to zero as well, or you will
have a gap between your frames where the border used to be.
 BORDER(thickness of the Frame): This attribute specified in pixels. A
setting of zero will create a borderless frame. Default value is 5.
 BORDERCOLOR: This attribute is allows you choose a color for your
border. This attribute is rarely used.
Attributes for <FRAME>
<FRAME>: This element defines a single frame within a frameset. There will
be a FRAME element for each division created by the FRAMESET element.
This tag has the following attributes:
 SRC: Required, as it provides the URL for the page that will be displayed in
the frame.
 NAME: Required for frames that will allow targeting by other HTML
documents. Works in conjunction with the target attribute of the <A>,
<AREA>, <BASE>, and <FORM> tags.
 MARGINWIDTH: Optional attribute stated in pixels. Determines
horizontal space between the <FRAME> contents and the frame’s borders.
 MARGINHEIGHT: Optional attribute stated in pixels. Determines vertical
space between the <FRAME> contents and the frame’s borders.
 SCROLLING: Displays a scroll bar(s) in the frame. Possible values are:
1. Yes – always display scroll bar(s).
2. No – never display scroll bar(s).
3. Auto – browser will decide based on frame contents.
By default: scrolling is auto.
What will be the output?
<HEAD>
<FRAMESET ROWS="25%,50%,25%”
<FRAME SRC="">
<FRAMESET COLS="25%,*">
<FRAME SRC="">
<FRAME SRC="">
</FRAMESET>
<FRAME SRC="">
</FRAMESET>
</HEAD>
Frame Formatting
 Example:

<frameset rows=“20%, *, 20%”>


<frame src=“header.html” noresize
scrolling=no>
<frame src=“body.html”>
<frame src=“navigationbar.html” noresize
scrolling=no>
</frameset>

66
67
navigation.html
 The anchor tag has a target attribute
– takes the name of the frame used to display the information
 All anchors below are targeted to the "mainF" frame

<html><head><title>Navigation Bar</title></head>
<body><center>
<a href="course.html" target="mainF">HTML Course</a><br><br>
<a href="paragraph.html" target="mainF">Paragraphs</a><br>
<a href="headings.html" target="mainF">Headings</a><br>
<a href="ulists.html" target="mainF">Unordered lists</a><br>
<a href="olists.html" target="mainF">Ordered lists</a><br>
<a href="nlists.html" target="mainF">Nested lists</a><br>
<a href="intro.html" target="mainF">Home</a><br>
</center></body>
</html>
Nested framesets
<html>
<head><title>Frames 2</title></head>
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frameset rows="30%,70%">
<frame name="upperF" src="intro.html">
<frame name="lowerF" src="course.html">
</frameset>
</frameset>
</html>
Forms
• Forms are user interfaces for data input
• Main application: to provide user input for
– programs and databases located on a web server
– local (client-side) scripts associated with the form
• Server-based programs may return data to the
client as a web page
• Client-side scripts can read input data
– To validate the data, prior to sending to server
– To use in local processing which may output web page
content that is displayed on the client
<FORM> Attributes
 ACTION: is the URL of the program that is going to accept the data
from the form, process it, and send a response back to the browser.
 METHOD: GET (default) or POST specifies which HTTP method
will be used to send the form’s contents to the web server.
 NAME: is a form name used by any scripting language
 TARGET: is the target frame where the response page will show up.

72
Example applications
• Questionnaires to provide feedback on a web
site
• e-commerce, to enter name, address, details of
purchase and credit-card number
– request brochures from a company
– make a booking for holiday, cinema etc.
– buy a book, cd, etc
– obtain a map giving directions to a shop
• Run a database query and receive results (an
important part of e-commerce)
Input types
• text
• checkbox
• radio (buttons)
• select (options)
• textarea
• password
• button
• submit
• reset
• hidden
• file
• image
The method and action attributes
• The method attribute specifies the way that form data is sent to the
server program
– GET appends the data to the URL
– POST sends the data separately
• The action attribute specifies a server program (e.g. a php
program .php extension) that processes the form data
• Can also send an email: action=“mailto:[email protected]”

<body>
<form method="POST" action="comments.pl">
<h2>Tell us what you think</h2>
<!-- etc -->
</form>
</body>
The input element: type="text"
• The type attribute specifies the type of
user input
• The name attribute gives an identifier to
the input data
• The size attribute specifies the length
of the input field
• The value attribute specifies an initial
value for the text (optional)

<form method="POST" action="comments.pl">


<h2>Tell us what you think</h2>
Name <input name="name" type="text" size="20"><br>
Address <input name="address" type="text" size="30">
</form>
The input element:type="checkbox"
• The name attribute is used to define a
set of checkboxes
• The value attribute identifies the
individual checkbox
• If the checked attribute is set the box
is initially checked

How did you hear about this web site?<br>


A friend
<input type="checkbox" name="howdid" value="friend"><br>
Search engine
<input type="checkbox" name="howdid" value="engine"><br>
<!– etc -->
The input element: type="radio"
• Radio buttons are similar to
checkboxes, but only one can be
selected
• To select a button by default, use
the checked attribute (for one
button only)

How did you hear about this web site?<br>


A friend
<input type="radio" name="howdid" value="friend"><br>
Search engine
<input type="radio" name="howdid" value="engine"><br>
<!– etc -->
The input element: type="button"
• The name attribute uniquely identifies
a button
• The value attribute gives a label to
the button
• Actions can be associated with
buttons- more later

Do you want to receive any further information:<br>


<input type="button" name="yes" value=" Yes ">
<input type="button" name="no" value=" No "><br>
The input element:
type="submit/reset"
• type="submit"
– clicking this button sends the
form data to the program
(URL) specified in the
action attribute of the form
• type="reset"
– clicking this button clears all
data entered so far
Thank you<br>
<input type="submit" name="send" value="Send">
<input type="reset" name="clear" value="Clear"><br>
The input element:
type="password/file/hidden"
• type="password"
– similar to type="text" except that the input is
echoed with asterisks (so not visible)
• type="file"
– provides a file dialogue box to specify a file that is
sent to the server
• type="hidden"
– similar to text input, but the value attribute is used to
specify data that is to be sent to the server. Nothing
appears on the screen.
– The data might be set by a server program to keep
track of the details of a particular transaction.
The textarea element
• Used for multi-line text input
• The size of the input area is
specified with the cols and
rows attributes
• Any text placed inside the
element appears in the input
area (this can be deleted).

Please write your comments:<br>


<textarea name="comments" rows="5" cols="20">
put text here
</textarea>
The select element
• The select element provides
a menu of options
• An option can be selected by
default using the selected
attribute (otherwise the first in
the list is initially selected)

How do you rate this site?<br>


<select name="rating">
<option>Good
<option selected>Bad
<option>Ugly
</select>
Example of a textbox form : what will be the
output?
<TITLE>Form_Text_Type</TITLE>
</HEAD> <BODY>
<h1> <font color=blue>Please enter the following bioData</font></h1>
<FORM name="form1" Method= " get " Action= " URL " >
First Name: <INPUT TYPE="TEXT" NAME="FName"
SIZE="15" MAXLENGTH="25"><BR>

Last Name: <INPUT TYPE="TEXT" NAME="LName"


SIZE="15" MAXLENGTH="25"><BR>

Nationality: <INPUT TYPE="TEXT" NAME="Country"


SIZE="25" MAXLENGTH="25"><BR>

The Phone Number: <INPUT TYPE="TEXT" NAME="Phone"


SIZE="15" MAXLENGTH="12"><BR>
</FORM>
</BODY> </HTML>
85
Output

86
Write HTML for the following…
<h2>Sign Up!</h2>
<form action="mailto:[email protected]" enctype="text/plain" method="post">
<label>Name: <input name="name" type="text"></label>
<br>
<label>Email: <input name="email" type=“text"></label>
<br>
<label>Location:
<select name="location">
<option value="syd">Sydney</option>
<option value="nyc">New York</option>
</select></label>
<br>
<label>Gender:
<input type="radio" name="gender">Female
<input type="radio" name="gender">Male
</label>
<br>
<label>Experience:
<br>
<textarea name="experience"></textarea>
</label>
<br>
<button type="submit">Sign Up</button>
</form>

You might also like