Scribd
Upload
41 views98 pages

HTML1

- HTML documents start with a <!DOCTYPE> declaration which specifies the document type and version. - The <head> section contains non-visible page information like the <title>. - The <body> section contains the visible page content including headings, paragraphs, images, and links. - Common tags include <h1-h6> for headings, <p> for paragraphs, <img> to embed images, and <a> for hyperlinks. Attributes provide additional information about elements.

Uploaded by

finalgrind04
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
41 views98 pages

HTML1

- HTML documents start with a <!DOCTYPE> declaration which specifies the document type and version. - The <head> section contains non-visible page information like the <title>. - The <body> section contains the visible page content including headings, paragraphs, images, and links. - Common tags include <h1-h6> for headings, <p> for paragraphs, <img> to embed images, and <a> for hyperlinks. Attributes provide additional information about elements.

Uploaded by

finalgrind04
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 98

Client Side Programming:

HTML
Introduction:

l
Web technologies can be categorized into two types:
l
Client side
l
Server side
l
Client side technologies are used for designing and
performing client side validations.
l
Server side technologies are used for fetching the data
from database and implementing business logic.
Introduction:

l
Web technologies can be categorized into two types:
l
Client side
l
Server side
l
Client side technologies are used for designing and
performing client side validations.
l
Server side technologies are used for fetching the data
from database and implementing business logic.
HTML (Hyper Text Markup Language)

l
Commonly used to create the web page.
l
Provides a means to describe the structure of text and
graphics on a web page.
l
HTML is developed and maintained by World Wide Web
Consortium(W3C).
HTML Document Structure

l
<!DOCTYPE>
l <Html>
l
<Head>
l <Title>
l </Title>
l
</Head>
l
<Body>
l
</Body>
l </Html>
l
<!DOCTYPE>
l
Is the first tag in HTML document which specifies DTD
used by the document.
l
A DTD is separate file containing formal definition of
grammar used in markup language.
l
The browser checks the code of document against the
rule in <!DOCTYPE> declaration.
l
Tells the browser about the version of language.
l
Does not have a closing tag
The <!DOCTYPE> declaration helps the browser to display
a web page correctly.
l
There are many different documents on the web, and a
browser can only display an HTML page 100%
correctly if it knows the HTML type and version
used.
l
The <title> tag contains the title of HTML
document that appears in the title bar of web page.
l
It is used by search engine to refer the document.
l
<body> tag contains body of html document.
l
It includes entire content that will appear in the
web browser.
l
Can also include text, images and multimedia
elements.
•The <!DOCTYPE> Declaration
 HTML documents must start with a document type definition
(DTD)
 It tells web browsers what type is the served code
 Possible versions: HTML 4.01, XHTML 1.0
(Transitional or Strict), XHTML 1.1, HTML 5
 Example:

• <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0


Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1­
transitional.dtd">

• 8
•<head> Section: <title> tag
 Title should be placed between < h ead > and < /h ead >
tags
• <title>Telerik Academy – Winter Season 2009/2010
</title>

 Used to specify a title in the window title bar


 Search engines and people rely on titles

• 9
•The < h ead > Section
 Contains information that doesn’t show directly on the
viewable page
 Starts after the < !doctype> declaration
 Begins with < head> and ends with < /head>
 Contains mandatory single <title> tag
 Can contain some other tags, e.g.
 <meta>
 <script>
 <style>
 <!–­ comments ­­>

• 1
l <!DOCTYPE html>
l <html>
l <body>
l <p>My first paragraph.</p>
l </body>
l </html>
• Internet Programming •First HTML Page
• test.html

• <!DOCTYPE HTML>
• <html>
• <head>
• <title>My First HTML Page</title>
• </head>
• <body>
• <p>This is some text that will appear on web page
• </p>
• </body>
• </html>

• 1
HTML Headings
l HTML headings are defined with the <h1>
to <h6> tags.
l <!DOCTYPE html>
l <html>
l <body>
l <h1>This is heading 1</h1>
l <h2>This is heading 2</h2>
l <h3>This is heading 3</h3>
l <h4>This is heading 4</h4>
l <h5>This is heading 5</h5>
l <h6>This is heading 6</h6>
l </body>
l </html>
HTML Headings
l
Browsers automatically add some empty space (a
margin) before and after each heading.
l
Use HTML headings for headings only. Don't use
headings to make text BIG or bold.
l
Search engines use your headings to index the
structure and content of your web pages.
l
H1 headings should be used as main headings,
followed by H2 headings, then the less important
H3 headings, and so.
images
l
HTML images are defined with the <img> tag.
l
<!DOCTYPE html>
l
<html>
l
<body>
l
<img src=“path“ /> </body>
l
</html>
images
l
The <img> tag is empty, which means that it
contains attributes only, and has no closing tag.
l
To display an image on a page, you need to use the
src attribute.
l
Src stands for "source".
l
The value of the src attribute is the URL of the
image you want to display.
images
l
The alt attribute specifies an alternate text for an
image, if the image cannot be displayed.
l
<img src=“” alt=“”/>
l
The alt attribute provides alternative information for
an image if a user for some reason cannot view
image.
l
The height and width attributes are used to specify
the height and width of an image.
l
The attribute values are specified in pixels by
default:
•Some Simple Tags –
Example
• some-tags.html

• <!DOCTYPE HTML>
• <html>
• <head>
• <title>Simple Tags Demo</title>
• </head>
• <body>
• <a href="http://www.tsec.com/" title=
• "TSEC site">This is a link.</a>
• <br />
• <img src=“image1.gif" alt=“boat" />
• <br />
• <strong>Bold</strong> and <em>italic</em> text.
• </body>
• </html>

• 1
•Headings and Paragraphs – Example
• headings.html
• <!DOCTYPE HTML>
• <html>
• <head><title>Headings and paragraphs</title></head>
• <body>
• <h1>Heading 1</h1>
• <h2>Sub heading 2</h2>
• <h3>Sub heading 3</h3>

• <p>This is my first paragraph</p>


• <p>This is my second paragraph</p>

• <div style="background:skyblue">
• This is a div</div>
• </body>
• </html>
l
Attributes provide additional information about
HTML elements.
l
Attributes are always specified in the start tag
l
Attributes come in name/value pairs
like: name="value“
l
Attribute values should always be enclosed in
quotes.
l
The <hr> tag creates a horizontal line in an HTML
page.
l
<br> tag is used for line break.
• Internet Programming •Text Formatting
 Text formatting tags modify the text between the opening tag
and the closing tag
 Ex. < b> H ello< /b> makes “Hello” bold

• 2
• Internet Programming
•
•Text Formatting – Example
text-formatting.html
• <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Transitional//EN"
• "http://www.w3.org/TR/xhtml1/DTD/xhtml1­transitional.dtd">
• <html>
• <head>
• <title>Page Title</title>
• </head>
• <body>
• <h1>Notice</h1>
• <p>This is a <em>sample</em> Web page.</p>
• <p><pre>Next paragraph:
• preformatted.</pre></p>
• <h2>More Info</h2>
• <p>Specifically, we’re using XHMTL 1.0 transitional.<br />
• Next line.</p>
• </body>
• </html>

• 2
HTML Links(Hyperlink)
l
The HTML <a> tag defines a hyperlink.
l
A hyperlink (or link) is a word, group of words, or
image that you can click on to jump to another
document.
l
When you move the cursor over a link in a Web
page, the arrow will turn into a little hand.
l
The most important attribute of the <a> element is
the href attribute, which indicates the link's
destination.
• Web Programming
•Hyperlinks: <a> Tag
Link to a document called form .htm lon the same server in
the same directory:

 Link to a document called parent.htm lon the same server


in the parent directory:

 Link to a document called cat.htm lon the same server in


the subdirectory stuff
:

• <a href="form.html">Fill Our Form</a>


• <a href="../parent.html">Parent</a>

• <a href="stuff/cat.html">Catalog</a>
• 2
• Internet Programming
•Hyperlinks: <a> Tag
 Link to an external Web site:

 Always use a full URL, including "http://", not just


"w w w .som esite.com "
 Using the target= "_blank" attribute opens the link in
a new window
 Link to an e-mail address:

• < a h ref= "h ttp ://w w w .d evb g .org "


targ et= "_b lan k"> B A S D < /a>

• < a h ref= "m ailto:b u g s@ exam p le.com ?


su b ject= B u g + R ep ort">
• P lease rep ort b u g s h ere (b y e-m ail on ly)< /a>

• 2
• Internet Programming
•Hyperlinks: <a> Tag
 Link to a document called apply-now .htm l
 On the same server, in same directory
 Using an image as a link button:

 Link to a document called index.htm l


 On the same server, in the subdirectory english of
the parent directory:

• <a href="apply­now.html"><img
• src="apply­now­button.jpg" /></a>

• <a href="../english/index.html">Switch to
English version</a>

• 2
• Internet Programming
•Hyperlinks and Sections
 Link to another location in the same document:
 Link to a specific location in another document:

• < a h ref= "# section 1"> G o to In trod u ction < /a>


• ...
• < h 2 id = "section 1"> In trod u ction < /h 2>

• < a h ref= "ch ap ter3.h tm l# section 3.1.1"> G o to


S ection 3.1.1< /a>
• < !–- In ch ap ter3.h tm l -->
• ...
• < d iv id = "section 3.1.1">
• < h 3> 3.1.1. Tech n ical B ackg rou n d < /h 3>
• < /d iv>

• 2
• Internet Programming •Hyperlinks – Example
• hyperlinks.html
• <a href="form.html">Fill Our Form</a> <br />
• <a href="../parent.html">Parent</a> <br />
• <a href="stuff/cat.html">Catalog</a> <br />
• <a href="http://www.devbg.org" target="_blank">BASD</a>
<br />
• <a href="mailto:[email protected]?subject=Bug Report">Please
report bugs here (by e­mail only)</a>
• <br />
• <a href="apply­now.html"><img src="apply­now­button.jpg”
/></a> <br />
• <a href="../english/index.html">Switch to English version</a>
<br />

• 2
• Internet Programming
•Hyperlinks – Example

• hyperlinks.html
• <a href="form.html">Fill Our Form</a> <br />
• <a href="../parent.html">Parent</a> <br />
• <a href="stuff/cat.html">Catalog</a> <br />
• <a href="http://www.devbg.org" target="_blank">BASD</a>
<br />
• <a href="mailto:[email protected]?subject=Bug Report">Please
report bugs here (by e­mail only)</a>
• <br />
• <a href="apply­now.html"><img src="apply­now­button.jpg”
/></a> <br />
• <a href="../english/index.html">Switch to English version</a>
<br />

• 3
• Internet Programming •Links to the Same Document
– Example
• links-to-same-document.html

• < h1> Table of Contents< /h1>


• < p> < a href= "# section1"> Introduction< /a> < br />
• < a href= "# section2"> Som e background< /a> < br />
• < a href= "# section2.1"> Project H istory< /a> < br />
• ...the rest of the table of contents...
• < !-- The docum ent text follow s here -->
• < h2 id= "section1"> Introduction< /h2>
• ... Section 1 follow s here ...
• < h2 id= "section2"> Som e background< /h2>
• ... Section 2 follow s here ...
• < h3 id= "section2.1"> Project H istory< /h3>
• ... Section 2.1 follow s here ...

• 3
l
By default, links will appear as follows in all
browsers:
l
An unvisited link is underlined and blue
l
A visited link is underlined and purple
l
An active link is underlined and red

l
<a href="http://www.google.com/">click here</a>
• Internet Programming•Links to the Same Document –
Example
• links-to-same-document.html

• < h 1> Tab le of C on ten ts< /h 1>


• < p > < a h ref= "# section 1"> In trod u ction < /a> < b r />
• < a h ref= "# section 2"> S om e b ackg rou n d < /A > < b r />
• < a h ref= "# section 2.1"> P roject H istory< /a> < b r />
• ...th e rest of th e tab le of con ten ts...
• < !-- Th e d ocu m en t text follow s h ere -->
• < h 2 id = "section 1"> In trod u ction < /h 2>
• ... S ection 1 follow s h ere ...
• < h 2 id = "section 2"> S om e b ackg rou n d < /h 2>
• ... S ection 2 follow s h ere ...
• < h 3 id = "section 2.1"> P roject H istory< /h 3>
• ... S ection 2.1 follow s h ere ...

• 3
• Internet Programming
•Miscellaneous Tags
 < h r /> : Draws a horizontal rule (line):

 < cen ter> < /cen ter> : Deprecated!

 < fon t> < /fon t> : Deprecated!

• <hr size="5" width="70%" />

• <center>Hello World!</center>

• <font size="3" color="blue">Font3</font>


• <font size="+4" color="blue">Font+4</font>

• 3
• Internet
Programming
•Miscellaneous Tags – Example

• misc.html

• 3
• Internet Programming
•Ordered Lists: <ol> Tag
 Create an Ordered List using < ol> < /ol> :
 Attribute values for type are 1, A, a, I, or i
• <ol type="1">
• <li>Apple</li>
• <li>Orange</li>
• <li>Grapefruit</li>
• </ol>

1.Apple i. Apple
2.Orange ii.Orange
3.Grapefruit iii.Grapefruit
a.Apple
A.Apple b.Orange I. Apple
B.Orange c.Grapefruit II.Orange
C.Grapefruit III.Grapefruit
• 3
• Internet Programming
Unordered Lists: <ul> Tag
 Create an Unordered List using < u l> < /u l> :
• <ul type="disk">
• <li>Apple</li>
• <li>Orange</li>
• <li>Grapefruit</li>
• </ul>

 Attribute values for typ e are:


 d isc, circle or sq u are

• Apple o Apple  Apple


• Orange o Orange  Orange
• Pear o Pear  Pear

• 3
• Internet Programming Definition lists: <dl> tag

 Create definition lists using < dl>


 Pairs of text and associated definition; text is in
< dt> tag, definition in < dd> tag

• <dl>
– <dt>HTML</dt>
– <dd>A markup language …</dd>
– <dt>CSS</dt>
– <dd>Language used to …</dd>
• </dl>

 Renders without bullets


 Definition is indented
Internet Programming Lists – Example
• <ol type="1"> • lists.html
• <li>Apple</li>
• <li>Orange</li>
• <li>Grapefruit</li>
• </ol>

• <ul type="disc">
• <li>Apple</li>
• <li>Orange</li>
• <li>Grapefruit</li>
• </ul>

• <dl>
• <dt>HTML</dt>
• <dd>A markup lang…</dd>
• </dl>

• 3
Internet Programming HTML Special Characters
Symbol Name HTML Entity Symbol
Copyright Sign & cop y; ©
Registered Trademark Sign & reg ; ®
Trademark Sign & trad e; ™
Less Than & lt; <
Greater Than & g t; >
Ampersand & am p ; &
Non-breaking Space & n b sp ;
Em Dash & m d ash ; —
Quotation Mark & q u ot; "
Euro & # 8364; €
British Pound & p ou n d ; £
Japanese Yen & yen ; ¥
• 4
Internet Programming
•Special Characters – Example

• <p>[&gt;&gt;&nbsp;&nbsp;Welcome • special-chars.html
• &nbsp;&nbsp;&lt;&lt;]</p>
• <p>&#9658;I have following cards:
• A&#9827;, K&#9830; and 9&#9829;.</p>
• <p>&#9658;I prefer hard rock &#9835;
• music &#9835;</p>
• <p>&copy; 2006 by Svetlin Nakov &amp; his team</p>
• <p>Telerik Academy™</p>

• 4
• Web Programming
•Special Chars – Example

• • special-chars.html
< p > [& g t;& g t;& n b sp ;& n b sp ;W elcom e
• & n b sp ;& n b sp ;& lt;& lt;]< /p >
• < p > & # 9658;I h ave follow in g card s:
• A & # 9827;, K & # 9830; an d 9& # 9829;.< /p >
• < p > & # 9658;I p refer h ard rock & # 9835;
• m u sic & # 9835;< /p >
• < p > & cop y; 2006 b y S vetlin N akov & am p ; h is
team < /p >
• < p > Telerik A cad em y™ < /p >

• 4
Internet Programming •Block and Inline Elements
 Block elements add a line break before and after them
 < div> is a block element
 Other block elements are < table> , < hr> , headings,
lists, < p> and etc.
 Inline elements don’t break the text before and after them
 < span> is an inline element
 Most HTML elements are inline, e.g. < a>

• 4
• Web Programming •The <div> Tag
 < div> creates logical divisions within a page
 Block style element
 Used with CSS
 Example:

• div-and-span.html
• <div style="font­size:24px; color:red">DIV example</div>
• <p>This one is <span style="color:red; font­
weight:bold">only a test</span>.</p>

• 4
Internet Programming • The <span> Tag

 Inline style element


 Useful for modifying a specific portion of text
 Don't create a separate area (paragraph) in the
document
 Very useful with CSS

• span.html
• <p>This one is <span style="color:red; font­weight:bold">only a
test</span>.</p>
• <p>This one is another <span style="font­size:32px; font­
weight:bold">TEST</span>.</p>

• 4
Internet Programming

•HTML Tables
Internet Programming •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

• 4
Internet Programming •HTML Tables
 Start and end of a table
 Start and end of a row
 Start and end of a cell in a row

• < table> ... < /table>

• < tr> ... < /tr>

• < td> ... < /td>

• 4
Internet Programming
•Simple HTML Tables – Example
• < table cellspacing= "0" cellpadding= "5">
• < tr>
• < td> < im g src= "ppt.gif"> < /td>
• < td> < a href= "lecture1.ppt"> Lecture 1< /a> < /td>
• < /tr>
• < tr>
• < td> < im g src= "ppt.gif"> < /td>
• < td> < a href= "lecture2.ppt"> Lecture 2< /a> < /td>
• < /tr>
• < tr>
• < td> < im g src= "zip.gif"> < /td>
• < td> < a href= "lecture2-dem os.zip">
• Lecture 2 - D em os< /a> < /td>
• < /tr>
• < /table>

• 4
Internet Programming •Simple HTML Tables – Example

• < table cellspacing= "0" cellpadding= "5">


• < tr>
• < td> < im g src= "ppt.gif"> < /td>
• < td> < a href= "lecture1.ppt"> Lecture 1< /a> < /td>
• < /tr>
• < tr>
• < td> < im g src= "ppt.gif"> < /td>
• < td> < a href= "lecture2.ppt"> Lecture 2< /a> < /td>
• < /tr>
• < tr>
• < td> < im g src= "zip.gif"> < /td>
• < td> < a href= "lecture2-dem os.zip">
• Lecture 2 - D em os< /a> < /td>
• < /tr>
• < /table>

• 5
Internet Programming •Complete HTML Tables
 Table rows split into three semantic sections: header, body
and footer
 <thead> denotes table header and contains <th>
elements, instead of <td> elements
 <tbody> denotes collection of table rows that contain
data
 <tfoot> denotes table footer but comes BEFORE the
<tbody> tag
 <colgroup> and <col> define columns (most often used to
set column widths)

• 5
Internet Programming
•Complete HTML Table: Example
• • < table> • columns
• < colgroup>
• < colstyle= "w idth:100px" /> < /col>
• < /colgroup> • header • th
• < thead>
• < tr> < th> C olum n 1< /th> < th> Colum n 2< /th> < /tr>
• < /thead>
• footer
• < tfoot>
• < tr> < td> Footer 1< /td> < td> Footer 2< /td> < /tr>
• < /tfoot> • Last comes the body (data)
• < tbody>
• < tr> < td> C ell1.1< /td> < td> Cell1.2< /td> < /tr>
• < tr> < td> C ell2.1< /td> < td> Cell2.2< /td> < /tr>
• < /tbody>
• < /table>

• 5
Complete HTML Table:
Internet Programming

• By default, header text is


•Example
• < table> bold and centered. • table-full.html
• < colgroup>
• < colstyle= "w idth:200px" /> < col/>
• < /colgroup>
• < thead>
• < tr> < th> C olum n 1< /th> < th> Colum n 2< /th> < /tr>
• < /thead>
• < tfoot>
• < tr> < td> Footer 1< /td> < td> Footer 2< /td> < /tr>
• < /tfoot>
• < tbody>
• < tr> < td> C ell1.1< /td> < td> Cell1.2< /td> < /tr>
• < tr> < td> C ell2.1< /td> < td> Cell2.2< /td> < /tr>
• Although the footer is
• < /tbody>
• < /table> before the data in the code,
it is displayed last

• 5
Internet Programming
•Nested Tables
 Table data “cells” (< td> ) can contain nested tables (tables
within tables):

• <table> • nested-tables.html
• <tr>
• <td>Contact:</td>
• <td>
• <table>
• <tr>
• <td>First Name</td>
• <td>Last Name</td>
• </tr>
• </table>
• </td>
• </tr>
• </table>

• 5
Internet Programming
•Cell Spacing and Padding
 Tables have two important attributes:

 cellspacing  cellpadding

• cell • cell • cell • cell

• cell • cell • cell • cell

 Defines the empty  Defines the empty space


space between around the cell content
cells
• 5
Internet Programming
•Cell Spacing and Padding – Example
• table-cells.html
• <html>
• <head><title>Table Cells</title></head>
• <body>
• <table cellspacing="15" cellpadding="0">
• <tr><td>First</td>
• <td>Second</td></tr>
• </table>
• <br/>
• <table cellspacing="0" cellpadding="10">
• <tr><td>First</td><td>Second</td></tr>
• </table>
• </body>
• </html>

• 5
Internet Programming
•Cell Spacing and Padding – Example
• table-cells.html
• < htm l>
• < head> < title> Table Cells< /title> < /head>
• < body>
• < table cellspacing= "15" cellpadding= "0">
• < tr> < td> First< /td>
• < td> Second< /td> < /tr>
• < /table>
• < br/>
• < table cellspacing= "0" cellpadding= "10">
• < tr> < td> First< /td> < td> Second< /td> < /tr>
• < /table>
• < /body>
• < /htm l>

• 5
Internet Programming •Column and Row Span
 Table cells have two important attributes:
 colsp an  row sp an
• colspan="1 • colspan="1 • rowspan=" • rowspan="
" " 2" 1"

• cell[1, • cell[1, • cell[1


1] 2] ,2]
• cell[1,1]
• cell[2,1] • cell[2
,1]
• colspan="2
" • rowspan="
1"
 Defines how many  Defines how many
columns the cell rows the cell
occupies occupies • 5
Internet Programming •Column and Row Span – Example
• table-colspan-rowspan.html

• <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>

• 5
Column
Internet Programming and Row Span –
• Example
• table-colspan-rowspan.html
• < 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 row span= "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>
• Cell[1,1] • Cell[2,1]

• C ell[1,2] • C ell[3,2]
• C ell[2,2]
• C ell[1,3] • C ell[2,3]

• 6
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border="1" width="100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn
2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn
2</td>
</tr>
</table>
</body>
</html>
l
The caption tag will serve as a title or explanation for the
table and it shows up at the top of the table.
l
This tag is depracated in newer version of HTML/XHTML.
Internet Programming

•HTML Forms
• Entering User Data from a Web
Page
l
HTML forms are used to pass data to a server.
l
A basic form has three important parts:
l The <form> tag
l The form elements
l And the submit button which sends the data on
the server.
l
An HTML form can contain input elements like text
fields, checkboxes, radio-buttons, submit buttons.
Internet Programming
HTML Forms
 Forms are the primary method for gathering data from site
visitors
 Create a form block with

 Example:
• <form></form>

• <form name="myForm" method="post"


action="path/to/some­script.php">
• ...
• </form>

• 6
HTML Forms
l
HTML forms contain form elements.
l
Form elements are different types of input elements,
checkboxes, radio buttons, submit buttons, and more.
HTML Forms
l
The <input> element is the most important form element.
l
The <input> element has many variations, depending on
the type attribute.
Internet Programming
Form Fields

 Single-line text input fields:


 Multi-line textarea fields:

 Often used by JavaScript code

• <input type="text" name="FirstName" value="This is a text


field" />

• <textarea name="Comments">This is a multi­line text


field</textarea>

• 6
l
<!DOCTYPE html>
l
<html>
l
<body>
l
<form>
l
First name:<br>
l
<input type="text" name="firstname">
l
<br>
l
Last name:<br>
l
<input type="text" name="lastname">
l
</form>
l
</body>
l
</html>
l
Password Field:
l
<input type="password"> defines a password field:
l <form>
l Password: <input type="password"
name="pwd">
l </form>
l
Radio Buttons:
l
Allows user to select only one value from number of
choices.
l <form>
l <input type="radio" name="sex" value="male">Male<br>
l <input type="radio" name="sex" value="female">Female
l </form>
Internet Programming • Form Input Controls

 Checkboxes:
 Radio buttons:
 Radio buttons can be grouped, allowing only one to be
selected from a group:

• <input type="checkbox" name="fruit" value="apple" />

• <input type="radio" name="title" value="Mr." />

• <input type="radio" name="city" value="A" />


• <input type="radio" name="city" value="B" />

• 7
l
Checkbox:
l
Allows a user to select ZERO or MORE options of a
limited number of choices.
l <form>
l <input type="checkbox" name="option1"
value="Milk"> Milk<br>
l <input type="checkbox" name="option2"
value="Butter" checked> Butter<br>
l <input type="checkbox" name="option3"
value="Cheese"> Cheese<br>
l <br>
l </form>
Internet Programming
•Fieldsets
 Fieldsets are used to enclose a group of related form fields:
 The <legend> is the fieldset's title.

• <form method="post" action="form.aspx">


• <fieldset>
• <legend>Client Details</legend>
• <input type="text" id="Name" />
• <input type="text" id="Phone" />
• </fieldset>
• <fieldset>
• <legend>Order Details</legend>
• <input type="text" id="Quantity" />
• <textarea cols="40" rows="10"
• id="Remarks"></textarea>
• </fieldset>
• </form>
• 7
Internet Programming
Other Form Controls
 Dropdown menus:
 The <select> element defines a drop-down list:
 Submit button:

• <select name="gender">
• <option value="Value 1" selected="selected">Male</option>
• <option value="Value 2">Female</option>
• <option value="Value 3">Other</option>
• </select>

• <input type="submit" name="submitBtn" value="Apply


Now" />

• 7
Internet Programming • Other Form Controls

 Reset button – brings the form to its initial state


 Image button – acts like submit but image is displayed and
click coordinates are sent
 Ordinary button – used for Javascript, no default action

• <input type="reset" name="resetBtn" value="Reset the form"


/>

• <input type="image" src="submit.gif" name="submitBtn"


alt="Submit" />

• <input type="button" value="click me" />

• 7
Web Programming Other Form Controls

 Password input – a text field which masks the entered text


with * signs
 Multiple select field – displays the list of items in multiple
lines, instead of one

• <input type="password" name="pass" />


• <select name="products" multiple="multiple">
• <option value="Value 1"
• selected="selected">keyboard</option>
• <option value="Value 2">mouse</option>
• <option value="Value 3">speakers</option>
• </select>

• 7
Internet Programming
Other Form Controls
 File input – a field used for uploading files
 When used, it requires the form element to have a
specific attribute:

• <input type="file" name="photo" />


• <form enctype="multipart/form­data">
• ...
• <input type="file" name="photo" />
• ...
• </form>

• 8
Internet Programming
Labels
 Form labels are used to associate an explanatory text to a
form field using the field's ID.
 Clicking on a label focuses its associated field (checkboxes
are toggled, radio buttons are checked)
 Labels are both a usability and accessibility feature and are
required in order to pass accessibility validation.

• <label for="fn">First Name</label>


• <input type="text" id="fn" />

• 8
HTML Input Attributes
l
The value Attribute
l The value attribute specifies the initial value for an input
field:

l
First name:<br>
l
<input type="text" name="firstname" value="John">
l
<br>
l
Last name:<br>
l
<input type="text" name="lastname">
l
</form>
l
The readonly Attribute
l The readonly attribute specifies that the input field is read only
(cannot be changed):
l The readonly attribute does not need a value. It is the same as
writing readonly="readonly".

l
First name:<br>
l
<input type="text" name="firstname" value="John" readonly>
l
<br>
l
Last name:<br>
l
<input type="text" name="lastname">
l
</form>
l
The disabled Attribute
l The disabled attribute specifies that the input field is disabled.
l A disabled element is un-usable and un-clickable.
l Disabled elements will not be submitted.
l The disabled attribute does not need a value.

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
l
The maxlength Attribute
l The maxlength attribute specifies the maximum allowed length for
the input field:
l With a maxlength attribute, the input control will not accept more than
the allowed number of characters.

l
<form action="">
l
First name:<br>
l
<input type="text" name="firstname" maxlength="10">
l
<br>
l
Last name:<br>
l
<input type="text" name="lastname">
l
</form>
Internet Programming
•HTML Forms – Example
• form.html
• <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" />
Internet Programming • HTML Forms – Example
• form.html (continued)
• <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>

• 8
Internet Programming • HTML Forms – Example
• form.html (continued)

• 8
Internet Programming
•TabIndex
 The tabindex HTML attribute controls the order in which form
fields and hyperlinks are focused when repeatedly pressing
the TAB key
 tabindex="0" (zero) - "natural" order
 If X > Y, then elements with tabindex="X" are iterated
before elements with tabindex="Y"
 Elements with negative tabindex are skipped, however,
this is not defined in the standard

• <input type="text" tabindex="10" />

• 9
Internet Programming

•HTML Frames
•< fram eset> , < fram e> and < ifram e>
Internet Programming
•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.

• 9
l
We can create a frame by using the <frameset>
tag.
l
Inside <frameset> tag use <frame> tag with src as
attribute.
l
It takes HTML file as input value which we want to
upload to that frame.
l
We can create multiple <frame> tag inside
<frameset> tag.
l
Not supported in HTML 5.
l
<!DOCTYPE html>
l
<html>
l
<frameset cols="25%,50%,25%">
l
<frame src="frame1.htm">
l
<frame src="frame2.htm">
l
<frame src="frame3.htm">
l
<noframes>Sorry, your browser does not handle frames!
</noframes>
l
</frameset>
l
</html>
Internet Programming
HTML Frames – Demo
frames.html
• <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>

• 9
Internet Programming
Inline Frames: < ifram e>
 Inline frames provide a way to show one website inside
another website:

iframe-demo.html
• <iframe name="iframeGoogle" width="600" height="400"
src="http://www.google.com" frameborder="yes"
scrolling="yes"></iframe>

• 9
l
<html>
l
<body>
l
<iframe name="iframeGoogle" width="600" height="400"
src="style.html" frameborder="yes" scrolling="yes"></iframe>
l
<a href="try.html" target="iframeGoogle">Click Here</a>
l
</body>
l
</html>
l
When we use frame tag then the current page constitutes of
only frames whereas in iframe the current web page and the
sub window (created by iframe) are treated like two separate
entities.
l
It just brings some other source to the current page.
l
The inline frames are also known as floating frames.
Web Programming Comments: <!-- --> Tag
 Comments can exist anywhere between the
<html></html> tags
 Comments start with < !-- and end with -->

• <!–­ (a JPG file) ­­>


• <img src="logo.jpg" alt=“Logo">
• <!–­ Hyperlink to the web site ­­>
• <a href="http://telerik.com/">Telerik</a>
• <!–­ Show the news table ­­>
• <table class="newstable">
• ...

• 9

You might also like