Hyper text markup language with examples
matiasbahiru1
16 views
66 slides
Aug 23, 2024
Slide 1 of 66
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
About This Presentation
HTML
Slide Content
Introduction to HTMLIntroduction to HTML
CHAPTER TWO
CHAPTER TWO
What is an HTML ?
HTML stands for Hyper Text Markup Language
HTML is the "mother tongue" of the browser.
HTML was invented in 1990 by a scientist called Tim
Berners-Lee.
The purpose was to make it easier for scientists at
different universities to gain access to each other's
research documents.
The project became a bigger success than Tim
Berners-Lee had ever imagined. By inventing HTML he
laid the foundation for the web as we know it today
HTML stands for Hyper Text Markup Language
HTML is the "mother tongue" of the browser.
HTML was invented in 1990 by a scientist called Tim
Berners-Lee.
The purpose was to make it easier for scientists at
different universities to gain access to each other's
research documents.
The project became a bigger success than Tim
Berners-Lee had ever imagined. By inventing HTML he
laid the foundation for the web as we know it today
Cont’d……
Hyper is the opposite of linear. In the good old
days - when a mouse was something the cat
chased - computer programs ran linearly: when the
program had executed one action it went to the
next line and after that, the next line and so on.
Hypertext is Collections of document connected
by hyperlinks
Hyper is the opposite of linear. In the good old
days - when a mouse was something the cat
chased - computer programs ran linearly: when the
program had executed one action it went to the
next line and after that, the next line and so on.
Hypertext is Collections of document connected
by hyperlinks
Cont...
But HTML is different - you can go wherever you
want and whenever you want.
Text is self-explanatory.
Mark-up is what you do with the text.
You are marking up the text the same way you
do in a text editing program with headings,
bullets and bold text and so on.
But HTML is different - you can go wherever you
want and whenever you want.
Text is self-explanatory.
Mark-up is what you do with the text.
You are marking up the text the same way you
do in a text editing program with headings,
bullets and bold text and so on.
Cont..
Language is what HTML is. It uses many English
words
An HTML file is a text file containing small markup
tags
The markup tags tell the Web browser how to
display the page
An HTML file can be created using a simple text
editor
Language is what HTML is. It uses many English
words
An HTML file is a text file containing small markup
tags
The markup tags tell the Web browser how to
display the page
An HTML file can be created using a simple text
editor
HTM or HTML Extension?
When you save an HTML file, you can use either the
.htm or the .html extension. We have used .htm in
our examples.
With newer software we think it will be perfectly
safe to use .html
When you save an HTML file, you can use either the
.htm or the .html extension. We have used .htm in
our examples.
With newer software we think it will be perfectly
safe to use .html
How to Create and View an HTML document?
1.Use an text editor such as Notepad to write the
document.
2.Save the file as filename.html on a PC. This is called
the Document Source.
3.Open any browsers
4.Click on File, Open File and select the
filename.html document that you just created.
6.Your HTML page should now appear just like any
other Web page in browsers.
1.Use an text editor such as Notepad to write the
document.
2.Save the file as filename.html on a PC. This is called
the Document Source.
3.Open any browsers
4.Click on File, Open File and select the
filename.html document that you just created.
6.Your HTML page should now appear just like any
other Web page in browsers.
HTML Tags
Special formatting codes (called tags)
to adjust fonts, create bulleted lists,
create forms, display images, create tables, etc.
HTML documents are text files made up of
HTML elements.
HTML tags are used to mark-up HTML elements
HTML elements are defined using HTML tags
HTML tags are surrounded by the two characters < and >
The surrounding characters are called angle brackets
Special formatting codes (called tags)
to adjust fonts, create bulleted lists,
create forms, display images, create tables, etc.
HTML documents are text files made up of
HTML elements.
HTML tags are used to mark-up HTML elements
HTML elements are defined using HTML tags
HTML tags are surrounded by the two characters < and >
The surrounding characters are called angle brackets
Cont’d…..
Two classes of tags:
Those which appear in pairs.
<i> Good morning </i>
Those which appear individually.
<img src=“baby.jpg”>
Browsers interpret the tags to display a HTML page in properly formatted
form.
Most of the tags belong to the first category.
<tag-name> …… directives …… </tag-name>
Tags are case insensitive
<HEAD>, <Head> and <head> are all equivalent.
Tags may be nested
<html> <head>…</head> <body>…</body> </html>
Two classes of tags:
Those which appear in pairs.
<i> Good morning </i>
Those which appear individually.
<img src=“baby.jpg”>
Browsers interpret the tags to display a HTML page in properly formatted
form.
Most of the tags belong to the first category.
<tag-name> …… directives …… </tag-name>
Tags are case insensitive
<HEAD>, <Head> and <head> are all equivalent.
Tags may be nested
<html> <head>…</head> <body>…</body> </html>
Cont’d…..
10
the first tag in a pair is the start tag,
the second tag is the end tag
Most tags come in pairs
exceptions: <P>, <br>, <li> tags …
The first tag turns the action on, and the second turns it off.
the text between the start and end tags is the element
content
HTML tags are not case sensitive, <b> means the same as
<B>
10
the first tag in a pair is the start tag,
the second tag is the end tag
Most tags come in pairs
exceptions: <P>, <br>, <li> tags …
The first tag turns the action on, and the second turns it off.
the text between the start and end tags is the element
content
HTML tags are not case sensitive, <b> means the same as
<B>
SOME OF HTML TAGS
. Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment
11
. Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment
11
Cont’d…..
A HTML document consists of two major portions:
Head
Contains information about the document, like the title and “meta” data
describing the contents.
Body
Contains the actual matter of the document.
Gets displayed within the browser window.
A HTML document consists of two major portions:
Head
Contains information about the document, like the title and “meta” data
describing the contents.
Body
Contains the actual matter of the document.
Gets displayed within the browser window.
Cont’d…..
<P> defines a paragraph
Add ALIGN="position" (left, center, right)
Multiple <P>'s do not create blank lines
Use <BR> for blank line
Fully-specified text uses <P> and </P>
But </P> is optional
<P> defines a paragraph
Add ALIGN="position" (left, center, right)
Multiple <P>'s do not create blank lines
Use <BR> for blank line
Fully-specified text uses <P> and </P>
But </P> is optional
Cont’d…..
Comment lines
Comments are included between <!---
and --->.
Comments cannot be nested.
<!--- A comment here --->
<!--- Another comment in two lines --->
Comment lines
Comments are included between <!---
and --->.
Comments cannot be nested.
<!--- A comment here --->
<!--- Another comment in two lines --->
Why do We Use Lowercase Tags?
We have just said that HTML tags are not case sensitive: <B>
means the same as <b>. If you surf the Web, you will notice
that plenty of web sites use uppercase HTML tags in their
source code.
We always use lowercase tags.
Why? If you want to follow the latest web standards, you
should always use lowercase tags.
The World Wide Web Consortium (W3C) recommends
lowercase tags in their HTML 4 recommendation, and XHTML
(the next generation HTML) demands lowercase tags.
15
We have just said that HTML tags are not case sensitive: <B>
means the same as <b>. If you surf the Web, you will notice
that plenty of web sites use uppercase HTML tags in their
source code.
We always use lowercase tags.
Why? If you want to follow the latest web standards, you
should always use lowercase tags.
The World Wide Web Consortium (W3C) recommends
lowercase tags in their HTML 4 recommendation, and XHTML
(the next generation HTML) demands lowercase tags.
15
HTML Elements
Remember the HTML example from the previous page:
<html>
<head>
<title>Title of page</title>
</head>
<body> This is my first homepage.
<b>This text is bold</b>
</body>
</html>
Remember the HTML example from the previous page:
<html>
<head>
<title>Title of page</title>
</head>
<body> This is my first homepage.
<b>This text is bold</b>
</body>
</html>
Basic HTML Document Format
17
<HTML>
<HEAD>
<TITLE>WENT'99</TITLE>
</HEAD>
<BODY>
Went'99
</BODY>
</HTML>
See what it
looks like:
17
<HTML>
<HEAD>
<TITLE>WENT'99</TITLE>
</HEAD>
<BODY>
Went'99
</BODY>
</HTML>
See what it
looks like:
HTML Attributes
HTML elements can have attributes
Attributes provide additional information about
an element.
Attributes are always specified in the start tag
Attributes and attribute values are case-insensitive.
Attributes come in name/value pairs like:
name="value“
Attribute values should always be enclosed in
quotes.
18
HTML elements can have attributes
Attributes provide additional information about
an element.
Attributes are always specified in the start tag
Attributes and attribute values are case-insensitive.
Attributes come in name/value pairs like:
name="value“
Attribute values should always be enclosed in
quotes.
18
Cont’d…
Some tags can have one or more (named) attributes to
define some additional.
characteristics of the tag.
<img src=“baby.jpg”>
<body text=“#FFFFFF” bgcolor=“#0000FF”>
<body text=“white” bgcolor=“blue”>html>
19
Some tags can have one or more (named) attributes to
define some additional.
characteristics of the tag.
<img src=“baby.jpg”>
<body text=“#FFFFFF” bgcolor=“#0000FF”>
<body text=“white” bgcolor=“blue”>html>
19
How to specify colors?
Two ways:
By specifying the red, green, blue orRGB components.
Each color encoded in 8 bits.
Example:
<body text=“#FFFFFF”
bgcolor=“#0000FF”>
By specifying the color name.
Some of the colors that are supported by browsers are:
aqua , black, blue, fuchsia, gray ,green ,
lime ,maroon ,navy ,olive ,purple ,red, silver, teal, yellow and white
Many other colors are possible.
Example:
<body text=white>
<body bgcolor=“yellow”>
Two ways:
By specifying the red, green, blue orRGB components.
Each color encoded in 8 bits.
Example:
<body text=“#FFFFFF”
bgcolor=“#0000FF”>
By specifying the color name.
Some of the colors that are supported by browsers are:
aqua , black, blue, fuchsia, gray ,green ,
lime ,maroon ,navy ,olive ,purple ,red, silver, teal, yellow and white
Many other colors are possible.
Example:
<body text=white>
<body bgcolor=“yellow”>
HTML Text Formatting
HTML defines a lot of elements for
formatting output
Like bold
italic text
boldtxet
superscript
subscript,
small text, strong and so on..
HTML defines a lot of elements for
formatting output
Like bold
italic text
boldtxet
superscript
subscript,
small text, strong and so on..
Text Formatting Tags
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
22
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
22
Text Formatting Tags
tags Description
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines an address element
<bdo> Defines the text direction
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term
23
tags Description
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines an address element
<bdo> Defines the text direction
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term
23
24
<html>
<body>
<b>This text is bold</b><br>
<strong>This text is strong</strong><br>
<big>This text is big</big><br>
<em>This text is emphasized</em><br>
<i>This text is italic</i><br>
<small>This text is small</small>
<br> This text contains <sub>subscript</sub>
<br>This text contains<sup>superscript</sup>
</body></html>
Cont’d…..
<html>
<body>
<b>This text is bold</b><br>
<strong>This text is strong</strong><br>
<big>This text is big</big><br>
<em>This text is emphasized</em><br>
<i>This text is italic</i><br>
<small>This text is small</small>
<br> This text contains <sub>subscript</sub>
<br>This text contains<sup>superscript</sup>
</body></html>
Cont’d…..
25
Quotations: This example demonstrates how to handle quotations
<html> <body>
<q> This is a long quotation</q>
<body></html>
Text direction :This example demonstrates how to change the text
direction.
<html>
<body>
<p> If your browser supports bi-directional override (bdo), the next line
will be written from the right to the left (rtl):</p>
<bdo dir="rtl">Here is some Hebrew text</bdo>
</body></html>
Quotations: This example demonstrates how to handle quotations
<html> <body>
<q> This is a long quotation</q>
<body></html>
Text direction :This example demonstrates how to change the text
direction.
<html>
<body>
<p> If your browser supports bi-directional override (bdo), the next line
will be written from the right to the left (rtl):</p>
<bdo dir="rtl">Here is some Hebrew text</bdo>
</body></html>
Deleted and inserted text
This example demonstrates how to mark a text that is deleted or
inserted to a document.
<html>
<body>
<p>a dozen is <del>twenty</del>
<ins>twelve</ins> pieces</p>
<p> Most browsers will overstrike deleted text and underline inserted
text.</p>
<p>Some older browsers will display deleted or inserted text as plain
text.</p>
</body>
</html>
26
This example demonstrates how to mark a text that is deleted or
inserted to a document.
<html>
<body>
<p>a dozen is <del>twenty</del>
<ins>twelve</ins> pieces</p>
<p> Most browsers will overstrike deleted text and underline inserted
text.</p>
<p>Some older browsers will display deleted or inserted text as plain
text.</p>
</body>
</html>
26
<cite> ……. </cite>:Tells the browser that this is a citation.
Usually displayed in italics.
Abbreviations and acronyms
This example demonstrates how to handle an abbreviation or an
acronym.
<html><body>
<abbr title="United Nations">UN</abbr><br>
<acronym title="World Wide Web">WWW</acronym>
</body></html>
27
Usually displayed in italics.
Abbreviations and acronyms
This example demonstrates how to handle an abbreviation or an
acronym.
<html><body>
<abbr title="United Nations">UN</abbr><br>
<acronym title="World Wide Web">WWW</acronym>
</body></html>
27
<address> ……. </address>
Supplies the contact information of the author.
Generally formatted in italics, with a line
break above and below.
Example:
<address>
Instructor. Elsabet W.<br>
Dept. of Information Science. <br>
Ethiopia, Jimma University.<br>
Email: [email protected]
</address>
Supplies the contact information of the author.
Generally formatted in italics, with a line
break above and below.
Example:
<address>
Instructor. Elsabet W.<br>
Dept. of Information Science. <br>
Ethiopia, Jimma University.<br>
Email: [email protected]
</address>
29
HTML Character Entities
Some characters like the < character, have a special meaning in HTML,
and therefore cannot be used in the text.
To display a less than sign (<) in HTML, we have to use a character
entity.
A character entity has three parts:
an ampersand (&), an entity name or a # and an entity number, and
finally a semicolon (;).
To display a less than sign in an HTML document we must write: < or
<
HTML Character Entities
Some characters like the < character, have a special meaning in HTML,
and therefore cannot be used in the text.
To display a less than sign (<) in HTML, we have to use a character
entity.
A character entity has three parts:
an ampersand (&), an entity name or a # and an entity number, and
finally a semicolon (;).
To display a less than sign in an HTML document we must write: < or
<
Cont’d……….
Advantage of using a name is easier to
remember.
Disadvantage of using a name is not all
browsers support the newest entity names,
while the support for entity numbers is very
good in almost all browsers.
Note: That the entities are case sensitive.
30
Advantage of using a name is easier to
remember.
Disadvantage of using a name is not all
browsers support the newest entity names,
while the support for entity numbers is very
good in almost all browsers.
Note: That the entities are case sensitive.
30
31
The Most Common Character Entities:
Result Description Entity Name Entity Number
non-breaking space    
< less than < <
> greater than > >
& ampersand & &
" quotation mark " "
' apostrophe ' (does not work in IE) '
Non-breaking Space
The most common character entity in HTML is the non-
breaking space. Normally HTML will truncate spaces in
your text. If you write 10 spaces in your text HTML will
remove 9 of them.
To add spaces to your text, use the character
entity.
The Most Common Character Entities:
Result Description Entity Name Entity Number
non-breaking space    
< less than < <
> greater than > >
& ampersand & &
" quotation mark " "
' apostrophe ' (does not work in IE) '
Non-breaking Space
The most common character entity in HTML is the non-
breaking space. Normally HTML will truncate spaces in
your text. If you write 10 spaces in your text HTML will
remove 9 of them.
To add spaces to your text, use the character
entity.
Some Other Commonly Used Character Entities:
Result Description Entity Name Entity
Number
¢ cent ¢ ¢
£ pound £ £
¥ Yen ¥ ¥
€ euro € €
§ section § §
© copyright © ©
® registered trademark ® ®
× multiplication × ×
÷ division ÷ ÷
32
Result Description Entity Name Entity
Number
¢ cent ¢ ¢
£ pound £ £
¥ Yen ¥ ¥
€ euro € €
§ section § §
© copyright © ©
® registered trademark ® ®
× multiplication × ×
÷ division ÷ ÷
32
HTML Hyperlinks (Links)
HTML uses a hyperlink to link to another
document on the Web.
A hyperlink (or link) is a word, group of words,
or image that you can click on to jump to a new
document or a new section within the current
document. To create a link to another
document, by using the href attribute
33
HTML uses a hyperlink to link to another
document on the Web.
A hyperlink (or link) is a word, group of words,
or image that you can click on to jump to a new
document or a new section within the current
document. To create a link to another
document, by using the href attribute
33
HTML Link Syntax
The HTML code for a link is simple. It looks like
this:
<a href="url">Link text</a>
The href attribute specifies the destination of a
link.
Example
<a href="http://www.w3schools.com/">Visit
W3Schools</a>
34
The HTML code for a link is simple. It looks like
this:
<a href="url">Link text</a>
The href attribute specifies the destination of a
link.
Example
<a href="http://www.w3schools.com/">Visit
W3Schools</a>
34
HTML Images
The <img> Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty: which means that it
contains attributes only and has no closing tag.
To display an image on a page, you need to use
the src attribute. Src stands for "source". The
value of the src attribute is the URL of the image
you want to display
35
The <img> Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty: which means that it
contains attributes only and has no closing tag.
To display an image on a page, you need to use
the src attribute. Src stands for "source". The
value of the src attribute is the URL of the image
you want to display
35
Syntax for defining an image
<img src="url" alt="some_text"/>
The required alt attribute specifies an alternate
text for an image, if the image cannot be
displayed.
The value of the alt attribute is an author-defined text:
<img src="pulpit.jpg" alt="Pulpit rock" width="304"
height="228" />
The height and width attributes are used to specify
the height and width of an image.
36
<img src="url" alt="some_text"/>
The required alt attribute specifies an alternate
text for an image, if the image cannot be
displayed.
The value of the alt attribute is an author-defined text:
<img src="pulpit.jpg" alt="Pulpit rock" width="304"
height="228" />
The height and width attributes are used to specify
the height and width of an image.
36
Table nest
<TABLE border=”1” cellspacing=”2”
cellpadding=”2”>
<TD colspan=”3”>A1
<TR>
<TD>B1
<TD>B2
<TD rowspan=”2”>B3
<TR>
<TD colspan=”2”>C1
</TABLE>
37
<TABLE border=”1” cellspacing=”2”
cellpadding=”2”>
<TD colspan=”3”>A1
<TR>
<TD>B1
<TD>B2
<TD rowspan=”2”>B3
<TR>
<TD colspan=”2”>C1
</TABLE>
37
38
HTML FORMS
HTML FORMS
39
HTML FORMS
So far we have used the client-server model to make
requests for documents and have documents served
or returned.
The Common Gateway Interface (CGI) allows a
variation of this.
in the sense that a CGI request is understood to be a
request to execute an application rather than simply return
a document.
Of course in returning information to the client
(browser) a (virtual) document must be used.
HTML FORMS
So far we have used the client-server model to make
requests for documents and have documents served
or returned.
The Common Gateway Interface (CGI) allows a
variation of this.
in the sense that a CGI request is understood to be a
request to execute an application rather than simply return
a document.
Of course in returning information to the client
(browser) a (virtual) document must be used.
40
What is a FORM?
Forms provide a means of submitting
information from the client to the server. A form
consists of one or more:
text input boxes
clickable radio buttons
multiple-choice check boxes
pull-down menus
clickable images
text and images (maybe instructions on form use);
What is a FORM?
Forms provide a means of submitting
information from the client to the server. A form
consists of one or more:
text input boxes
clickable radio buttons
multiple-choice check boxes
pull-down menus
clickable images
text and images (maybe instructions on form use);
41
The <form> tag
All of the form elements within a <form> tag
comprise a single form.
The browser sends all of the values of these elements
- blank, default, or user modified - when the user
submits the form to the server.
Browsers flow forms into the containing elements as if they
were small embedded images.
So layout elements such as <p> and <br> need to be used.
The <form> tag
All of the form elements within a <form> tag
comprise a single form.
The browser sends all of the values of these elements
- blank, default, or user modified - when the user
submits the form to the server.
Browsers flow forms into the containing elements as if they
were small embedded images.
So layout elements such as <p> and <br> need to be used.
42
The method attribute in more detail
Post
The browser sends the data in two steps:
contacts the form processing server specified in the
action attribute;
sends the data to the server in a separate
transmission;
On the server side POST-style applications are
expected to read the parameters from a
standard location once they begin execution.
The method attribute in more detail
Post
The browser sends the data in two steps:
contacts the form processing server specified in the
action attribute;
sends the data to the server in a separate
transmission;
On the server side POST-style applications are
expected to read the parameters from a
standard location once they begin execution.
43
The method attribute in more detail
GET
contacts the form-processing server and sends the
form data in a single transmission step:
the browser appends the data to the form's action
URL, separated by the ? character.
The method attribute in more detail
GET
contacts the form-processing server and sends the
form data in a single transmission step:
the browser appends the data to the form's action
URL, separated by the ? character.
44
Some rules of thumb about which to
use
Send small forms with a few short fields via the GET method
for better form transmission performance;
Some server operating systems limit the length of command
line arguments that can be passed to an application. Use the
POST method;
If security is an issue, choose POST because GET places the
form parameters directly in the application URL (easily
captured by network sniffers); POST can take advantage of
encryption when transmitting the parameters as a separate
transaction;
Some rules of thumb about which to
use
Send small forms with a few short fields via the GET method
for better form transmission performance;
Some server operating systems limit the length of command
line arguments that can be passed to an application. Use the
POST method;
If security is an issue, choose POST because GET places the
form parameters directly in the application URL (easily
captured by network sniffers); POST can take advantage of
encryption when transmitting the parameters as a separate
transaction;
45
A FORM example
<form method=POST action="http://www.ballarat.edu.au/cgi-bin
/horoscope">
Name:
<input type=text name=name size=32 maxlength=80>
<p> Sex:
<input type=radio name=sex value="M"> Male
<input type=radio name=sex value="F"> Female
<p> Date of Birth:
<input type=text name=year size=4 maxlength=4> Year
<input type=text name=month size=2 maxlength=2> Month
<input type=text name=day size=2 maxlength=2> Day
<p> <input type=submit> </form>
A FORM example
<form method=POST action="http://www.ballarat.edu.au/cgi-bin
/horoscope">
Name:
<input type=text name=name size=32 maxlength=80>
<p> Sex:
<input type=radio name=sex value="M"> Male
<input type=radio name=sex value="F"> Female
<p> Date of Birth:
<input type=text name=year size=4 maxlength=4> Year
<input type=text name=month size=2 maxlength=2> Month
<input type=text name=day size=2 maxlength=2> Day
<p> <input type=submit> </form>
The form generated
47
FORM Input Elements
The <INPUT> Tag
This is used to define text fields, multiple choice
lists, clickable images and submit buttons. Only
the TYPE and NAME attributes are required.
The <input> tag attributes
align -
checked -
maxlength - maximum number of characters
accepted by the browser
FORM Input Elements
The <INPUT> Tag
This is used to define text fields, multiple choice
lists, clickable images and submit buttons. Only
the TYPE and NAME attributes are required.
The <input> tag attributes
align -
checked -
maxlength - maximum number of characters
accepted by the browser
48
The <input> tag attributes
name - defines the name of the input element; used to
label the data when transferred to the cgi program;
size - physical size of the input element; default is 20
characters;
src -
type - determines the type of input requested; text,
radio buttons, password, reset, image, hidden,
checkbox;
value - optional; it can be used to insert an initial
default value into the field;
The <input> tag attributes
name - defines the name of the input element; used to
label the data when transferred to the cgi program;
size - physical size of the input element; default is 20
characters;
src -
type - determines the type of input requested; text,
radio buttons, password, reset, image, hidden,
checkbox;
value - optional; it can be used to insert an initial
default value into the field;
49
Text Fields
Conventional text field -
size attribute dictates the width of the text box;
maxlength dictates the maximum number of characters that the user can
see and type;
if maxlength exceeds size then text scrolls back and forth within the text
entry box;
server side application must trap errors;
Masked text field - type=password; obscured onscreen but is
transmitted unencrypted;
File selection field - lets the user select and send a file; type pathname
directly or use the Browse button;
Text Fields
Conventional text field -
size attribute dictates the width of the text box;
maxlength dictates the maximum number of characters that the user can
see and type;
if maxlength exceeds size then text scrolls back and forth within the text
entry box;
server side application must trap errors;
Masked text field - type=password; obscured onscreen but is
transmitted unencrypted;
File selection field - lets the user select and send a file; type pathname
directly or use the Browse button;
50
Checkboxes
type=checkbox
The name and value attributes are required.
If the item is selected it will contribute a value when
the form is submitted;
For example the form code:
Checkboxes
type=checkbox
The name and value attributes are required.
If the item is selected it will contribute a value when
the form is submitted;
For example the form code:
Cont’d……
Checkbox form code
<form>
What units are you studying
this semester?
<p>
<input type=checkbox
name=unit
value="CP747">
CP747
<br>
<input type=checkbox
name=unit value="CP725">
CP725
</form>
Produces
51
Checkbox form code
<form>
What units are you studying
this semester?
<p>
<input type=checkbox
name=unit
value="CP747">
CP747
<br>
<input type=checkbox
name=unit value="CP725">
CP725
</form>
Produces
51
52
Radio Buttons
Similar in behaviour to checkboxes except that
only one in a group may be selected.
We have already seen an example above.
Radio Buttons
Similar in behaviour to checkboxes except that
only one in a group may be selected.
We have already seen an example above.
53
Action Buttons
Submit - <input type=submit> submits form information
to the server;
Reset - clears the form on the client side;
Custom buttons - clickable images; Eg.
<input type=image src="images/pic.gif name=map>;
Multiple buttons - Different value attributes can be used to
distinguish the functionality of the submission process;
<input type=submit name=action value="Add">
<input type=submit name=action value="Delete">
Action Buttons
Submit - <input type=submit> submits form information
to the server;
Reset - clears the form on the client side;
Custom buttons - clickable images; Eg.
<input type=image src="images/pic.gif name=map>;
Multiple buttons - Different value attributes can be used to
distinguish the functionality of the submission process;
<input type=submit name=action value="Add">
<input type=submit name=action value="Delete">
54
Text Areas
The <textarea> tag creates a multiline text entry area in
the browser display.
On submission all lines of text are separated by %0D%0A
and sends them to the server as the value of this element.
Attributes are :
cols - sets number of characters width
name -
rows - sets the number of lines
wrap - off- single line; virtual-multiple line but single line transmission;
physical- multiple lines displayed and transmitted;
Text Areas
The <textarea> tag creates a multiline text entry area in
the browser display.
On submission all lines of text are separated by %0D%0A
and sends them to the server as the value of this element.
Attributes are :
cols - sets number of characters width
name -
rows - sets the number of lines
wrap - off- single line; virtual-multiple line but single line transmission;
physical- multiple lines displayed and transmitted;
55
Multiple Choice Elements
The <select> tag allows the construction
of multiple choices with the <option>
tag.
Attributes are:
multiple - allows more than one selection at a time;
name -
size - number of options;
This implements pull-down menus and
scrolling lists.
Multiple Choice Elements
The <select> tag allows the construction
of multiple choices with the <option>
tag.
Attributes are:
multiple - allows more than one selection at a time;
name -
size - number of options;
This implements pull-down menus and
scrolling lists.
56
57
Listbox
<FORM> What project are you doing?<P>
<SELECT NAME=project size=3 multiple>
<OPTION>Multimedia
<OPTION>Java
<OPTION>VRML
<OPTION>visual basic
</SELECT></FORM>
Listbox
<FORM> What project are you doing?<P>
<SELECT NAME=project size=3 multiple>
<OPTION>Multimedia
<OPTION>Java
<OPTION>VRML
<OPTION>visual basic
</SELECT></FORM>
58
<OPTION> tag
The <OPTION> tag has two attributes
VALUE and SELECTED.
By default all options are unselected so the
SELECTED option is used to preselect one or
more options.
VALUE can be used to set a value for each
option. When it is not used the value is the
content of the selection.
<OPTION> tag
The <OPTION> tag has two attributes
VALUE and SELECTED.
By default all options are unselected so the
SELECTED option is used to preselect one or
more options.
VALUE can be used to set a value for each
option. When it is not used the value is the
content of the selection.
HTML Lists
List Tags
Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines a definition term
<dd> Defines a definition description
<dir> Deprecated. Use <ul> instead
<menu> Deprecated. Use <ul> instead
59
List Tags
Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines a definition term
<dd> Defines a definition description
<dir> Deprecated. Use <ul> instead
<menu> Deprecated. Use <ul> instead
59
Different types of ordered lists
Numbered list
<html>
<body>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
Letters list
<html>
<body>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
60
Numbered list
<html>
<body>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
Letters list
<html>
<body>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
60
Cont’d………
Lowercase letters list
<html>
<body>
<h4>Lowercase letters
list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
Roman numbers list
<html><body>
<h4>Roman numbers
list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol> </html></body
61
Lowercase letters list
<html>
<body>
<h4>Lowercase letters
list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
Roman numbers list
<html><body>
<h4>Roman numbers
list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol> </html></body
61
Lowercase Roman numbers list
<html><body>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body></html>
<html><body>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body></html>
Unordered Lists
An unordered list is a list of items. The list items are
marked with bullets (typically small black circles). An
unordered list starts with the <ul> tag. Each list item
starts with the <li> tag.
An unordered list is a list of items. The list items are
marked with bullets (typically small black circles). An
unordered list starts with the <ul> tag. Each list item
starts with the <li> tag.
Cont’d…..
Disc bullets list( )
Circle bullets list(0 )
64
<html>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li
<html><body>
<html><body>
</ul><h4>Circle bullets
list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<body>
<html>
Disc bullets list( )
Circle bullets list(0 )
64
<html>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li
<html><body>
<html><body>
</ul><h4>Circle bullets
list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<body>
<html>
Square bullets list
Nested list
</body></html>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
This example demonstrates how you can
nest lists.
<html><body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea<ul><li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Nested list
</body></html>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
This example demonstrates how you can
nest lists.
<html><body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea<ul><li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
66
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 16
- Slides 66
- Age 468 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
32 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
35 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
32 views
14
Fertility awareness methods for women in the society
Isaiah47
30 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
29 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
30 views