Html basics

HTML BasicsHTML Basics
HTML, Text, Images, Tables, Forms
Tahir Rashid HakeemTahir Rashid Hakeem

Table of Contents
1. Introduction to HTML
 How the Web Works?
 What is a Web Page?
 My First HTML Page
 Basic Tags: Hyperlinks, Images, Formatting
 Headings and Paragraphs
1. HTML in Details
 The <!DOCTYPE> Declaration
 The <head> Section: Title, Meta, Script, Style
2

3
 HTML stands for Hyper Text Markup LanguageHTML stands for Hyper Text Markup Language
 HTML is not a programming language, it is a markup languageHTML is not a programming language, it is a markup language
 A Markup language is a set of markup tagsA Markup language is a set of markup tags
 HTML uses markup tags to describe web pagesHTML uses markup tags to describe web pages
HTMLHTML

4
Versions of HTML
 HTML 1.0
 HTML 2.0
 HTML 3.0
 HTML 3.2
 HTML 4.01
 HTML 5.

5
 HTML 1.0
HTML 1.0 was the first release of HTML to the world.
Not many people were involved in website creation
at the time, and the language was very limiting.
 HTML 2.0
HTML 2.0 included everything from the original 1.0
specifications but added a few new features HTML
2.0 was the standard for website design until
January 1997 and defined many core HTML features
for the first time.

6
 HTML 3.0 :- a HTML working group, led by a man named »
Dave Raggett introduced a new HTML draft, HTML 3.0. It
included many new and improved abilities for HTML, and
promised far more powerful opportunities for webmasters
to design their pages.
 HTML 3.2 :- World Wide Web Consortium (abbreviated to
the W3C) was founded in 1994 to standardise the language
and keep it evolving in the right direction. Their first work
was code-named WILBUR, and later became known as »
HTML 3.2.

7
 HTML 4.0 was a large evolution of the HTML standards,
HTML 4.0 was recommended by the W3C in December ’97
and became the official standard in April 1998. Browser
support was undertaken surprisingly earnestly by Microsoft
in their Internet Explorer browser,
 HTML5 is designed for the web, both now and in the future.
This is the specification that we will be working with for the
next decade at least, so the process of its development is
relatively slow and considered. Many parts will be familiar,
but there’s also plenty of new elements, attributes and
abilities to get excited about.

How the Web Works?
 WWW use classical client / server architecture
 HTTP is text-based request-response protocol
Client running aClient running a
Web BrowserWeb Browser
Server runningServer running
Web ServerWeb Server
Software (IIS,Software (IIS,
Apache, etc.)Apache, etc.)
HTTPHTTP
HTTPHTTP

What is a Web Page?
Web pages are text files containing HTML
HTML – Hyper Text Markup Language
 A notation for describing
 document structure (semantic markup)
 formatting (presentation markup)
 Looks (looked?) like:
 A Microsoft Word document
The markup tags provide information about
the page content structure
9

Creating HTML Pages
An HTML file must have an .htm or .html file
extension
HTML files can be created with text editors:
 NotePad, NotePad ++, PSPad
Or HTML editors (WYSIWYG Editors):
 Microsoft FrontPage
 Macromedia Dreamweaver
 Netscape Composer
 Expression Web
10

HTML Structure
 HTML is comprised of “elements” and “tags”
Begins with <html> and ends with </html>
 Elements (tags) are nested one inside another:
 Tags have attributes:
 HTML describes structure using two main
sections: <head> and <body>
11
<html xmlns="http://www.w3.org/1999/xhtml"><html xmlns="http://www.w3.org/1999/xhtml">
<html> <head></head> <body></body> </html><html> <head></head> <body></body> </html>
<img src="logo.jpg" alt="logo" /><img src="logo.jpg" alt="logo" />

HTML Code Formatting
 The HTML source code should be formatted to
increase readability and facilitate debugging.
 Every block element should start on a new line.
 Every nested (block) element should be indented.
 Browsers ignore multiple whitespaces in the page
source, so formatting is harmless.
 For performance reasons, formatting can be
sacrificed
12

First HTML Page 13
<!DOCTYPE HTML><!DOCTYPE HTML>
<html><html>
<head><head>
<title>My First HTML Page</title><title>My First HTML Page</title>
</head></head>
<body><body>
<p>This is some text...</p><p>This is some text...</p>
</body></body>
</html></html>
test.htmltest.html

<html><html>
<head><head>
</head></head>
<body><body>
</body></body>
</html></html>
First HTML Page: Tags 14
OpeningOpening
tagtag
Closing tagClosing tag
An HTML element consists of an opening tag, a closing tagAn HTML element consists of an opening tag, a closing tag
and the content inside.and the content inside.

<html><html>
<head><head>
</head></head>
<body><body>
</body></body>
</html></html>
First HTML Page: Header 15
HTML headerHTML header

<html><html>
<head><head>
</head></head>
<body><body>
</body></body>
</html></html>
First HTML Page: Body 16
HTML bodyHTML body

Some Simple Tags
 Hyperlink Tags
 Image Tags
 Text formatting tags
17
<a href="http://www.telerik.com/"<a href="http://www.telerik.com/"
title="Telerik">Link to Telerik Web site</a>title="Telerik">Link to Telerik Web site</a>
<img src="logo.gif" alt="logo" /><img src="logo.gif" alt="logo" />
This text is <em>emphasized.</em>This text is <em>emphasized.</em>
<br />new line<br /><br />new line<br />
This one is <strong>more emphasized.</strong>This one is <strong>more emphasized.</strong>

Some Simple Tags – Example
18
<html><html>
<head><head>
<title><title>Simple Tags Demo</title>Simple Tags Demo</title>
</head></head>
<body><body>
<a href="http://www.telerik.com/" title=<a href="http://www.telerik.com/" title=
"Telerik site">This is a link.</a>"Telerik site">This is a link.</a>
<br /><br />
<br /><br />
<strong>Bold</strong> and <em>italic</em> text.<strong>Bold</strong> and <em>italic</em> text.
</body></body>
</html></html>
some-tags.htmlsome-tags.html

Tags Attributes
 Tags can have attributes
 Attributes specify properties and behavior
 Example:
 Few attributes can apply to every element:
 id, style, class, title
 The id is unique in the document
 Content of title attribute is displayed as hint when the
element is hovered with the mouse
 Some elements have obligatory attributes
19
AttributeAttribute altalt with valuewith value
""logologo""

Headings and Paragraphs
 Heading Tags (h1 – h6)
 Paragraph Tags
 Sections: div and span
20
<p>This is my first paragraph</p><p>This is my first paragraph</p>
<p>This is my second paragraph</p><p>This is my second paragraph</p>
<h1>Heading 1</h1><h1>Heading 1</h1>
<h2>Sub heading 2</h2><h2>Sub heading 2</h2>
<div style="background: skyblue;"><div style="background: skyblue;">
This is a div</div>This is a div</div>

Headings and Paragraphs – Example 21
<html><html>
<head><title>Headings and paragraphs</title></head><head><title>Headings and paragraphs</title></head>
<body><body>
<h1>Heading 1</h1><h1>Heading 1</h1>
<p>This is my first paragraph</p><p>This is my first paragraph</p>
<p>This is my second paragraph</p><p>This is my second paragraph</p>
<div style="background:skyblue"><div style="background:skyblue">
This is a div</div>This is a div</div>
</body></body>
</html></html>

The <head> 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 -->
22

<head> Section: <title> tag
 Title should be placed between <head> and </head>
tags
 Used to specify a title in the window title bar
 Search engines and people rely on titles
23
<title>Telerik Academy – Winter Season 2009/2010<title>Telerik Academy – Winter Season 2009/2010
</title></title>

<head> Section: <meta>
 Meta tags additionally describe the content
contained within the page
24
<meta name="description" content="HTML tutorial" /><meta name="description" content="HTML tutorial" />
<meta name="keywords" content="html, web design,<meta name="keywords" content="html, web design,
styles" />styles" />
<meta name="author" content="Chris Brewer" /><meta name="author" content="Chris Brewer" />
<meta http-equiv="refresh" content="5;<meta http-equiv="refresh" content="5;
url=http://www.telerik.com" />url=http://www.telerik.com" />

<head> Section: <script>
 The <script> element is used to embed scripts into an
HTML document
 Script are executed in the client's Web browser
 Scripts can live in the <head> and in the <body>
sections
 Supported client-side scripting languages:
 JavaScript (it is not Java!)
 VBScript
 JScript
25

The <script> Tag – Example
26
<html><html>
<head><head>
<title>JavaScript Example</title><title>JavaScript Example</title>
<script type="text/javascript"><script type="text/javascript">
function sayHello() {function sayHello() {
document.write("<p>Hello World!</p>");document.write("<p>Hello World!</p>");
}}
</script></script>
</head></head>
<body><body>
<script type=<script type=
"text/javascript">"text/javascript">
sayHello();sayHello();
</script></script>
</body></body>
</html></html>
scripts-example.htmlscripts-example.html

Comments:  Tag
 Comments can exist anywhere between the
<html></html> tags
 Comments start with 
27
<!–- Telerik Logo (a JPG file) --><!–- Telerik Logo (a JPG file) -->
<img src="logo.jpg" alt=“Telerik Logo"><img src="logo.jpg" alt=“Telerik Logo">
<!–- Hyperlink to the web site --><!–- Hyperlink to the web site -->
<a href="http://telerik.com/">Telerik</a><a href="http://telerik.com/">Telerik</a>
<!–- Show the news table --><!–- Show the news table -->
<table class="newstable"><table class="newstable">
......

<body> Section: Introduction
 The <body> section describes the viewable portion of the
page
 Starts after the <head> </head> section
 Begins with <body> and ends with </body>
28
<html><html>
<head><title>Test page</title></head><head><title>Test page</title></head>
<body><body>

</body></body>
</html></html>

Text Formatting
 Text formatting tags modify the text between the
opening tag and the closing tag
 Ex. <b>Hello</b> makes “Hello” bold
29

Text Formatting – Example
30
<html><html>
<head><head>
<title>Page Title</title><title>Page Title</title>
</head></head>
<body><body>
<h1>Notice</h1><h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p><p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:<p><pre>Next paragraph:
preformatted.</pre></p>preformatted.</pre></p>
<h2>More Info</h2><h2>More Info</h2>
<p>Specifically, we’re using XHMTL 1.0 transitional.<br /><p>Specifically, we’re using XHMTL 1.0 transitional.<br />
Next line.</p>Next line.</p>
</body></body>
</html></html>

Hyperlinks: <a> Tag
 Link to a document called form.html on the same server in the
same directory:
 Link to a document called parent.html on the same server in the
parent directory:
 Link to a document called cat.html on the same server in the
subdirectory stuff:
31
<a href="form.html">Fill Our Form</a><a href="form.html">Fill Our Form</a>
<a href="../parent.html">Parent</a><a href="../parent.html">Parent</a>
<a href="stuff/cat.html">Catalog</a><a href="stuff/cat.html">Catalog</a>

Hyperlinks: <a> Tag (3)
 Link to a document called apply-now.html
On the same server, in same directory
Using an image as a link button:
 Link to a document called index.html
On the same server, in the subdirectory
english of the parent directory:
32
<a href="apply-now.html"><img<a href="apply-now.html"><img
src="apply-now-button.jpg" /></a>src="apply-now-button.jpg" /></a>
<a href="../english/index.html">Switch to<a href="../english/index.html">Switch to
English version</a>English version</a>

Hyperlinks and Sections
 Link to another location in the same document:
 Link to a specific location in another document:
33
<a href="#section1">Go to Introduction</a><a href="#section1">Go to Introduction</a>
......
<h2 id="section1">Introduction</h2><h2 id="section1">Introduction</h2>
<a href="chapter3.html#section3.1.1">Go to Section 3.1.1</a><a href="chapter3.html#section3.1.1">Go to Section 3.1.1</a>
<!–- In chapter3.html --><!–- In chapter3.html -->
......
<div id="section3.1.1"><div id="section3.1.1">
<h3>3.1.1. Technical Background</h3><h3>3.1.1. Technical Background</h3>
</div></div>

Hyperlinks – Example 34
<a href="form.html">Fill Our Form</a> <br /><a href="form.html">Fill Our Form</a> <br />
<a href="../parent.html">Parent</a> <br /><a href="../parent.html">Parent</a> <br />
<a href="stuff/cat.html">Catalog</a> <br /><a href="stuff/cat.html">Catalog</a> <br />
<a href="http://www.devbg.org" target="_blank">BASD</a><a href="http://www.devbg.org" target="_blank">BASD</a>
<br /><br />
<a href="mailto:bugs@example.com?subject=Bug<a href="mailto:bugs@example.com?subject=Bug
Report">Please report bugs here (by e-mail only)</a>Report">Please report bugs here (by e-mail only)</a>
<br /><br />
<a href="apply-now.html"><img src="apply-now-button.jpg”<a href="apply-now.html"><img src="apply-now-button.jpg”
/></a> <br />/></a> <br />
<a href="../english/index.html">Switch to English<a href="../english/index.html">Switch to English
version</a> <br />version</a> <br />
hyperlinks.htmlhyperlinks.html

Links to the Same Document – Example
35
<h1>Table of Contents</h1><h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br /><p><a href="#section1">Introduction</a><br />
<a href="#section2">Some background</A><br /><a href="#section2">Some background</A><br />
<a href="#section2.1">Project History</a><br /><a href="#section2.1">Project History</a><br />
...the rest of the table of contents......the rest of the table of contents...

<h2 id="section1">Introduction</h2><h2 id="section1">Introduction</h2>
... Section 1 follows here ...... Section 1 follows here ...
<h2 id="section2">Some background</h2><h2 id="section2">Some background</h2>
... Section 2 follows here ...... Section 2 follows here ...
<h3 id="section2.1">Project History</h3><h3 id="section2.1">Project History</h3>
... Section 2.1 follows here ...... Section 2.1 follows here ...
links-to-same-document.htmllinks-to-same-document.html

 Inserting an image withInserting an image with <img><img> tag:tag:
 Image attributes:Image attributes:
 Example:Example:
Images:Images: <img><img> tagtag
srcsrc Location of image fileLocation of image file (relative or absolute)(relative or absolute)
altalt Substitute text for displaySubstitute text for display (e.g. in text mode)(e.g. in text mode)
heightheight Number of pixels of the heightNumber of pixels of the height
widthwidth Number of pixels of the widthNumber of pixels of the width
borderborder Size of border, 0 for no borderSize of border, 0 for no border
<img src="/img/basd-logo.png"><img src="/img/basd-logo.png">
<img src="./php.png" alt="PHP Logo" /><img src="./php.png" alt="PHP Logo" />
36

Ordered Lists: <ol> TagOrdered Lists: <ol> Tag
Create an OOrdered LList using <ol></ol>:
Attribute values for type are 1, A, a, I, or i
37
a. Apple
b. Orange
c. Grapefruit
1. Apple
2. Orange
3. Grapefruit
A. Apple
B. Orange
C. Grapefruit
I. Apple
II. Orange
III. Grapefruit
i. Apple
ii. Orange
iii. Grapefruit
<ol type="1"><ol type="1">
<li>Apple</li><li>Apple</li>
<li>Orange</li><li>Orange</li>
<li>Grapefruit</li><li>Grapefruit</li>
</ol></ol>

Unordered Lists: <ul> TagUnordered Lists: <ul> Tag
 Create an UUnordered LList using <ul></ul>:
 Attribute values for type are:
disc, circle or square
38
• Apple
• Orange
• Pear
o Apple
o Orange
o Pear
 Apple
 Orange
 Pear
<ul type="disk"><ul type="disk">
</ul></ul>

Lists – ExampleLists – Example
39
<ol type="1"><ol type="1">
</ol></ol>
<ul type="disc"><ul type="disc">
</ul></ul>
<dl><dl>
<dt>HTML</dt><dt>HTML</dt>
<dd>A markup lang…</dd><dd>A markup lang…</dd>
</dl></dl>

HTML Special CharactersHTML Special Characters
££££British PoundBritish Pound
€€€€EuroEuro
""""Quotation MarkQuotation Mark
¥¥¥¥Japanese YenJapanese Yen
————Em DashEm Dash
  Non-breaking SpaceNon-breaking Space
&&&&AmpersandAmpersand
>>>>Greater ThanGreater Than
<<<<Less ThanLess Than
™™™™Trademark SignTrademark Sign
®®®®Registered Trademark SignRegistered Trademark Sign
©©©©Copyright SignCopyright Sign
SymbolSymbolHTML EntityHTML EntitySymbol NameSymbol Name
40

Special Characters – ExampleSpecial Characters – Example 41
<p>[>>  Welcome<p>[>>  Welcome
  <<]</p>  <<]</p>
<p>►I have following cards:<p>►I have following cards:
A♣, K♦ and 9♥.</p>A♣, K♦ and 9♥.</p>
<p>►I prefer hard rock ♫<p>►I prefer hard rock ♫
music ♫</p>music ♫</p>
<p>© 2006 by Svetlin Nakov & his<p>© 2006 by Svetlin Nakov & his
team</p>team</p>
<p>Telerik Academy™</p><p>Telerik Academy™</p>

Block and Inline ElementsBlock and Inline Elements
 Block elements add a line break before and after them,
and expand to 100% width
 <div>, <p>, <h1>, <ul> are block elements
 Inline elements don’t break the text before and after
them
 <span>, <a>, <em> are inline elements
 http://www.w3.org/TR/CSS2/visuren.html#block-boxes
42

The <div> TagThe <div> Tag
 <div> creates logical divisions within a page
 Block style element
 Used with CSS
 Example:
43
<div style="font-size:24px; color:red">DIV<div style="font-size:24px; color:red">DIV
example</div>example</div>
<p>This one is <span style="color:red; font-<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>weight:bold">only a test</span>.</p>
div-and-span.htmldiv-and-span.html

Tables
 Tables provide a means of organising the
layout of data
 A table is divided into rows and columns:
these specify the cells of the table
 Cells can contain text, images, links, other
tables...
 Tables can also be used for organising the
layout of the web page itself.

45
Tables
 <table> main element
 <tr> table row
 <th> table header
 <td> table data
<table border="1">
<tr>
<th>Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>A B Morgan</td>
<td>Fishing</td>
<td>5</td>
</tr>
<tr>
<td>D P Jones</td>
<td>Sailing</td>
<td>8</td>
</tr>
<tr>
</table>

46
Tables
 <table> main element
 <tr> table row
 <th> table header
 <td> table data
<table border="1">
<tr>
<th>Name</th>
<td>A B Morgan</td>
<td>D P Jones</td>
</tr>
<tr>
<th>Course</th>
<td>Fishing</td>
<td>Sailing</td>
</tr>
<tr>
<th>Year</th>
<td>8</td>
<td>5</td>
</tr>
<tr>
</table>

47
Rows and
Columns
 Cells can span multiple
columns and multiple
rows with the colspan
and rowspan attributes
<table border="1">
<tr>
<th colspan="2">Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>A B</td>
<td>Morgan</td>
<td rowspan="2">Fishing</td>
<td>5</td>
</tr>
<tr>
<td>D J</td>
<td>Jones</td>
<td>Sailing</td>
<td>8</td>
</tr>
<tr>
</table>

48
The align and width attributes
 The align
attribute
determines the
position of the
text within a
cell
 The width
attribute
determines the
width of the
row relative to
the table
<table border="1" align="center">
<tr>
<th colspan="2" width="60%">Name</th>
<th rowspan="2">Course</th>
<th rowspan="2">Year</th>
</tr>
<tr>
<th>Last</th>
<th>Init.</th>
</tr>
<tr>
<td>Morgan</td>
<td>AB</td>
<td>Fishing</td>
<td align="center">5</td>
</tr>
<!– etc -->

Table attributes
Table attributes
 align alignment relative to the page
 width in pixels or percentage of page width
 border - width of border (pixels)
 cellspacing separation between cells (pixels)
 cellpadding - space around data inside cell
(pixels)
 bgcolor - background colour (inside cells)
Furthermore
• The <caption> element puts a title above the table

Table attributes
<table border="3" align="center" cellspacing="6"
cellpadding="6" bgcolor="cyan">
<caption>
<h2>Course Data</h2>
</caption>
<tr>
<th>Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>A B Morgan</td>
<td>Fishing</td>
<td>5</td>
</tr>
<!– etc -->

Page formatting </body>
<table border="0" cellspacing="10">
<tr>
<td>
<img src="cat.gif" alt="cat">
<ul>
<li>cats</li>
<li>dogs</li>
<li>butterflies</li>
</ul>
</td>
<td>
This piece of text illustrates
the idea of placing two columns
of information in a web page...
Note also that there is no
border in this table.
</td>
</tr>
</table>
</body>
• Tables can be used
to organise the
layout of the web
page itself

Frames and Framesets
 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
 Note: framesets can cause problems for bookmarking
and for "screen readers" (for visually-impaired users)

53
Framesets
 The frameset element
replaces the body element
 frameset has attributes cols
or rows, defined in terms of
pixels, percentage(%) or
unspecified (*)
 this splits the window into two
or more columns or rows
<html>
<head><title>Frames 1</title></head>
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frame name="mainF" src="intro.html">
</frameset>
</html>

54
Frame attributes
 The name attribute uniquely identifies the frame. It may be
used as the target in an anchor (<a>) element
 The src attribute specifies the web page to be placed in
the frame initially (it may subsequently be overwritten)
 The scrolling attribute ("auto", "yes", "no") specifies
whether the frame is to have scroll bars
 The frameborder attribute ("0", "1") specifies whether
the frame is to have a border
</frameset>

Nested framesets
<html>
<frameset rows="30%,70%">
<frame name="upperF" src="intro.html">
<frame name="lowerF" src="course.html">
</frameset>
</frameset>
</html>

Noframes
<html>
</frameset>
<noframes>
<body>
Something here for browsers not supporting frames
</body>
</noframes>
</html>
• Some browsers cannot process frames. Alternative
content should be provided using the noframes element

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

Input types
• text
• checkbox
• radio (buttons)
• select (options)
• textarea
• password
• button
• submit
• reset
• hidden
• file
• image

The method and action attributes
<body>
<form method="POST" action="comments.pl">
<h2>Tell us what you think</h2>

</form>
</body>
• 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
perl program .pl extension) that processes the form data
• Can also send an email: action=“mailto:D.P.Cosker@..”

The input element: type="text"
<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 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)

The input element: type="checkbox"
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 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

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"
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 name attribute uniquely
identifies a button
• The value attribute gives a
label to the button
• Actions can be associated with
buttons- more later

The input element: type="submit/reset"
Thank you<br>
<input type="submit" name="send" value="Send">
<input type="reset" name="clear" value="Clear"><br>
• 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

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
How do you rate this site?<br>
<select name="rating">
<option>Good
<option selected>Bad
<option>Ugly
</select>
• 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)

Html basics

More Related Content

Html basics

Editor's Notes