HTML BASICS

1
Agenda

 HTML Block and Inline Elements

2
HTML Block and Inline Elements
 All the HTML elements can be categorized into
two categories (a) Block Level Elements (b)
Inline Elements

3
Block Elements
 Block elements appear on the screen as if they
have a line break before and after them. For
example the <p>, <h1>, <h2>, <h3>, <h4>,
<h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />,
<blockquote>, and <address> elements are all
block level elements. They all start on their own
new line, and anything that follows them
appears on its own new line.

4
Inline Elements
 Inline elements, on the other hand, can appear
within sentences and do not have to appear on a
new line of their own. The <b>, <i>, <u>, <em>,
<strong>, <sup>, <sub>, <big>, <small>, <li>,
<ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and
<var> elements are all inline elements.

5
The <div> tag
 This is the very important block level tag which
plays a big role in grouping various other HTML
tags and applying CSS on group of elements.
Even now <div> tag can be used to create
webpage layout where we define different parts (
Left, Right, Top etc) of the page using <div> tag.

6
Example

7
The <span> tag
 The HTML <span> is an inline element and it
can be used to group inline-elements in an
HTML document.
 The difference between the <span> tag and the
<div> tag is that the <span> tag is used with
inline elements where as the <div> tag is used
with block-level elements.

8
Example

9
HTML Forms
 HTML Forms are required when you want to
collect some data from the site visitor. For
example during user registration you would like
to collect information such as name, email
address, credit card, etc.
 A form will take input from the site visitor and
then will post it to a back-end application such
as CGI, ASP Script or PHP script etc. The back-
end application will perform required processing
on the passed data based on defined business
logic inside the application.
10
HTML Forms
 There are various form elements available like
text fields, textarea fields, drop-down menus,
radio buttons, checkboxes, etc.
 The HTML <form> tag is used to create an
HTML form and it has following syntax:

<form>
form elements
</form>

11
HTML Form Controls
 There are different types of form controls that
you can use to collect data using HTML form:
 Text Input Controls
 Checkboxes Controls
 Radio Box Controls
 Select Box Controls
 File Select boxes
 Hidden Controls
 Clickable Buttons
 Submit and Reset Button 12
Text Input Controls
 There are three types of text input used on
forms:
 Single-line text input controls - This control is
used for items that require only one line of user
input, such as search boxes or names. They are
created using HTML <input> tag.
 Password input controls - This is also a single-
line text input but it masks the character as soon
as a user enters it. They are also created using
HTML <input> tag.
13
Cont’d

 Multi-line text input controls - This is used

14
Single-line text input controls
 This control is used for items that require only
one line of user input, such as search boxes or
names. They are created using HTML <input>
tag.

15
Example

16
Attributes

17
Password input controls
 This is also a single-line text input but it masks
the character as soon as a user enters it. They
are also created using HTML <input> tag but
type attribute is set to password.

18
Example

19
Multiple-Line Text Input Controls
 This is used when the user is required to give
details that may be longer than a single
sentence. Multi-line input controls are created
using HTML <textarea> tag.

20
Example

21
Attributes

22
Checkbox Control
 Checkboxes are used when more than one
option is required to be selected. They are also
created using HTML <input> tag but type
attribute is set to checkbox.

23
Example

24
Attributes

25
Radio Button Control
 Radio buttons are used when out of many
options, just one option is required to be
selected. They are also created using HTML
<input> tag but type attribute is set to radio.

26
Example

27
Attributes

28
Select Box Control
 A select box, also called drop down box which
provides option to list down various options in
the form of drop down list, from where a user
can select one or more options.

29
Example

30
Attributes

31
Attributes

32
File Upload Box
 If you want to allow a user to upload a file to
your web site, you will need to use a file upload
box, also known as a file select box. This is also
created using the <input> element but type
attribute is set to file.

33
Example

34
Button Controls
 There are various ways in HTML to create
clickable buttons. You can also create a
clickable button using <input> tag by setting
its type attribute to button. The type attribute
can take the following values:

35
Example

36
Hidden Form Controls
 Hidden form controls are used to hide data
inside the page which later on can be pushed to
the server. This control hides inside the code
and does not appear on the actual page. For
example, following hidden form is being used to
keep current page number. When a user will
click next page then the value of hidden control
will be sent to the web server and there it will
decide which page has be displayed next based
on the passed current page.
37
Example

38
The Action Attribute
 The action attribute defines the action to be
performed when the form is submitted.
 Normally, the form data is sent to a web page on
the server when the user clicks on the submit
button.
 In the example, the form data is sent to a page
on the server called "action_page.php". This
page contains a server-side script that handles
the form data:

39
The Method Attribute
 The method attribute specifies the HTTP
method (GET or POST) to be used when
submitting the form data:

40
<fieldset>
 The <fieldset> element is used to group related
data in a form.
 The <legend> element defines a caption for the
<fieldset> element.

41
Example

42
43