Etl Labs PVT LTD - Java Programming

HTML
ETL LABS PVT LTD – JAVA PROGRAMMING 196

What is HTML?
First developed by Tim Berners-Lee in 1990,
HTML is short for Hypertext Markup
Language. HTML is used to create
electronic documents (called pages) that are
1
displayed on the World Wide Web.
Every web page you see on the Internet is

written using one version of HTML code or
another.

………….Hyper Text: Hyper Text simply
means "Text within Text." A text has a link
within it, is a hypertext. Whenever you click
on a link which brings you to a new
webpage, you have clicked on a hypertext.
Hyper Text is a way to link two or more web
pages (HTML documents) with each other.
2
Markup language: A markup language is a

computer language that is used to apply
layout and formatting conventions to a text
document. Markup language makes text
more interactive and dynamic. It can turn
text into images, tables, links, etc.

………………Web Page: A web page is a
document which is commonly written in
HTML and translated by a web browser.
A web page can be identified by
entering an URL. A Web page can be of
3 the static or dynamic type. With the
help of HTML only, we can create
static web pages.
Hence, HTML is a markup language

which is used for creating attractive web
pages with the help of styling, and
which looks in a nice format on a web
browser. An HTML document is made of
many HTML tags and each HTML tag
contains different content.
Description of HTML Example
<!DOCTYPE>: It defines the document type or it
instruct the browser about the version of HTML.
<html > :This tag informs the browser that it is

an HTML document. Text between html tag
describes the web document. It is a container for 4
all other elements of HTML except <!DOCTYPE>
<head>: It should be the first element inside the

<html> element, which contains the
metadata(information about the document). It
must be closed before the body tag opens.

<title>: As its name suggested, it is
used to add title of that HTML page
which appears at the top of the browser
window. It must be placed inside the
head tag and should close immediately.
5 (Optional)
<body> : Text between body tag

describes the body content of the page
that is visible to the end user. This tag
contains the main content of the HTML
document.

Features of HTML
1. It is a very easy and simple language. It can be easily understood and modified.
2. It is very easy to make an effective presentation with HTML because it has a lot of
formatting tags.
3. It is a markup language, so it provides a flexible way to design web pages along with the
text.
4. It facilitates programmers to add a link on the web pages (by html anchor tag), so it enhances
the interest of browsing of the user.
5. It is platform-independent because it can be displayed on any platform like Windows, Linux,
and Macintosh, etc.
6. It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which
makes it more attractive and interactive.
7. HTML is a case-insensitive language, which means we can use tags either in lower-case or
upper-case.

Anatomy of an HTML element
The main parts of our element are as follows:
The opening tag: This consists of the name of the

element (in this case, p), wrapped in opening and
closing angle brackets. This states where the
element begins or starts to take effect — in this
case where the paragraph begins.
The closing tag: This is the same as the opening
7
tag, except that it includes a forward slash before
the element name. This states where the element
ends — in this case where the paragraph ends.
Failing to add a closing tag is one of the standard
beginner errors and can lead to strange results.
The content: This is the content of the element,
which in this case is just text.
The element: The opening tag, the closing tag,
and the content together comprise the element.

Attribute of an element
Attributes contain extra information about the

element that you don't want to appear in the actual
content. Here, class is the attribute name, and
editor-note is the attribute value. The class
attribute allows you to give the element an
identifier that can be used later to target the
8
element with style information and other things.
An attribute should always have the following:
• A space between it and the element name (or

the previous attribute, if the element already has
one or more attributes).
• The attribute name, followed by an equals sign.
• The attribute value, wrapped by opening and
closing quotation marks.

Building blocks of HTML
An HTML document consist of its basic building
blocks which are:
Tags: An HTML tag surrounds the content and
apply meaning to it. It is written between < and >
brackets.
Attribute: An attribute in HTML provides extra
information about the element, and it is applied
within the start tag. An HTML attribute contains
9
two fields: name & value.
Syntax
<tag name attribute_name= "
attr_value"> content </ tag name>
Elements: An HTML element is an individual

component of an HTML file. In an HTML file,
everything written within tags are termed as
HTML elements.

HTML Tags
An HTML file must have some essential tags so that

web browser can differentiate between a simple text
and HTML text. You can use as many tags you want
as per your code requirement.
1
5 • All HTML tags must enclosed within < > these
0
brackets.
• Every tag in HTML perform different tasks.
• If you have used an open tag <tag>, then you
must use a close tag </tag> (except some tags)
Syntax
<tag> content </tag>

Heading Tags
Headings are defined with the <h1> to
<h6> tags.
1
<h1> defines the most important 5
1
heading. <h6> defines the least
important heading.

Paragraph Tags
1
5 The HTML <p> element defines a paragraph
2

Style Attribute
Set Background Color

The background-color property defines
the background-color for an HTML 1
element. 5
3
This example sets the background color

for a page to powderblue

Set Text Color
1
5 The color property defines the text color for an
4
HTML element
210
Set Text Size
The font-size property defines the text
size for an HTML element 1
5
5
211
Set Text Alignment
The text-align property defines the horizontal text
1
5 alignment for an HTML element
6

Formatting Elements
HTML also defines special elements for
defining text with a special meaning.
HTML uses elements like <b> and <i> 1

5
for formatting output, like bold or italic 7
text.
Formatting elements were designed to

display special types of text
Example
<b>This text is bold</b>

<p>
WWF's goal is to: Quotation Tag
<q> The HTML <q> element defines a short quotation.
Build a future where 1
5
people live in 8
Browsers usually insert quotation marks around the
harmony with nature.
<q> element.
</q>
</p>

Abbreviation Tag
The HTML <abbr> element defines an <p>
abbreviation or an acronym. The
1
5 <abbr title="World Health
9 Organization">
Marking abbreviations can give useful
WHO
information to browsers, translation
</abbr>
systems and search-engines.
was founded in 1948.
</p>

Comment Tags
You can add comments to your HTML source by
2
5 using the following syntax
0


Anchor Tag
The href attribute is used to define the
address of the file to be linked. In other
words, it points out the destination page.
The syntax of HTML anchor tag is given
below.
2
5
<a href = "..........."> Link Text 1
</a>
Let's see an example of HTML anchor tag.
<a href="second.html">Click for

Second Page</a>

Image Tags
HTML img tag is used to display image on the web
page. HTML img tag is an empty tag that contains
attributes only, closing tags are not used in HTML
image element.
2
5 Let's see an example of HTML image.
2
<img src="good_morning.jpg" alt="Good Morning
Friends"/>
Attribute of image tag
<img src="animal.jpg" height="180"

width="300" alt="animal image">

Lists in HTML
Type 1 Type 2 Type 3
Ordered List or Unordered List Description List or

Numbered List or Bulleted List Definition List (dl)
(ol) (ul)

Ordered List or Numbered List
In the ordered HTML lists, all the list items
are marked with numbers by default. It is
2
known as numbered list also. The ordered 5
4
list starts with <ol> tag and the list items
start with <li> tag.

Unordered List or Bulleted List
In HTML Unordered list, all the list items are marked
2 with bullets. It is also known as bulleted list also.
5
5 The Unordered list starts with <ul> tag and list
items start with the <li> tag.

Description List or Definition List
The definition list is very appropriate when you
want to present glossary, list of terms or other
name-value list.
The HTML definition list contains following three

2
tags: 5
6
1. <dl> tag defines the start of the list.
2. <dt> tag defines a term.
3. <dd> tag defines the term definition
(description).

Division tag
2
5 A section in a document that will have a light blue
7
background color:

<span> Tag
The <span> tag is used to group inline-elements
in a document.
<p>
The <span> tag provides no visual change by My mother has <span
2
itself. 5 style="color:blue">blue
8 </span> eyes.
</p>
The <span> tag provides a way to add a hook to
a part of a text or a part of a document.
A <span> element used to color a part of a text

Table Tags
HTML table tag is used to

Tag Description display data in tabular form
(row * column). There can
be many columns in a row.
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.

Table Tags

Tag Description display data in tabular form
(row * column). There can
It specifies a group of one or more columns in a table for be many columns in a row.
<colgroup>
formatting.
It is used with <colgroup> element to specify column

<col>
properties for each column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.

Table Tags Example

display data in tabular
form (row * column).
There can be many
columns in a row.

<form> Element 3
The HTML <form> element defines a form that is 5
2
used to collect user input

<input> Element
The <input> element is the most important form
element.
3 The <input> element can be displayed in several

5
3 ways, depending on the type attribute.
Text Input
<input type="text"> defines a one-line input field
for text input

Radio Button Input
<input type="radio">
defines a radio button.
Radio buttons let a user
select ONE of a limited
number of choices

Submit Button
<input type="submit">
defines a button for
submitting the form data to a
form-handler.
The form-handler is typically

a server page with a script for
processing input data.
The form-handler is specified

in the form's action attribute

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. 3
5
6
In the example above, 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:
<form action="/action_page.php">

Target Attribute
The target attribute specifies if the
submitted result will open in a new
browser tab, a frame, or in the current
window.
The default value is "_self" which means

3 the form will be submitted in the current
5
7 window.
To make the form result open in a new

browser tab, use the value "_blank":
Example
<form action="/action_page.php"
target="_blank">

Method Attribute
The method attribute specifies the HTTP method
(GET or POST) to be used when submitting the
form data:
Example
<form action="/action_page.php" 3
5
method="get"> 8
Or
<form action="/action_page.php"
method="post">

When to Use GET?
The default method when submitting form data is GET.

However, when GET is used, the submitted form data will be
visible in the page address field:
/action_page.php?firstname=Mickey&lastname=Mouse
Notes on GET:
• Appends form-data into the URL in name/value pairs
• The length of a URL is limited (about 3000 characters)
• Never use GET to send sensitive data! (will be visible in
the URL)
• Useful for form submissions where a user wants to
bookmark the result
• GET is better for non-secure data, like query strings in
Google

When to Use POST?
Always use POST if the form data contains
sensitive or personal information. The POST
method does not display the submitted form
data in the page address field.
Notes on POST: 4
5
0
• POST has no size limitations, and can be used
to send large amounts of data.
• Form submissions with POST cannot be
bookmarked

Name Attribute
Each input field must have a name attribute to be
submitted.
4
5 If the name attribute is omitted, the data of that
1
input field will not be sent at all.
This example will only submit the "Last name"

input field:

Grouping Form Data with <fieldset>
The <fieldset> element

is used to group related
data in a form.
The <legend> element

defines a caption for the
<fieldset> element.

Etl Labs PVT LTD - Java Programming

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Etl Labs PVT LTD - Java Programming

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML

ETL LABS PVT LTD – JAVA PROGRAMMING 196

Every web page you see on the Internet is

ETL LABS PVT LTD – JAVA PROGRAMMING 197

Markup language: A markup language is a

ETL LABS PVT LTD – JAVA PROGRAMMING 198

Hence, HTML is a markup language

<html > :This tag informs the browser that it is

<head>: It should be the first element inside the

ETL LABS PVT LTD – JAVA PROGRAMMING 200

<body> : Text between body tag

ETL LABS PVT LTD – JAVA PROGRAMMING 201

ETL LABS PVT LTD – JAVA PROGRAMMING 202

The opening tag: This consists of the name of the

ETL LABS PVT LTD – JAVA PROGRAMMING 203

Attributes contain extra information about the

• A space between it and the element name (or

ETL LABS PVT LTD – JAVA PROGRAMMING 204

Elements: An HTML element is an individual

ETL LABS PVT LTD – JAVA PROGRAMMING 205

An HTML file must have some essential tags so that

<tag> content </tag>

ETL LABS PVT LTD – JAVA PROGRAMMING 206

ETL LABS PVT LTD – JAVA PROGRAMMING 207

ETL LABS PVT LTD – JAVA PROGRAMMING 208

Set Background Color

This example sets the background color

ETL LABS PVT LTD – JAVA PROGRAMMING 209

ETL LABS PVT LTD – JAVA PROGRAMMING 212

HTML uses elements like <b> and <i> 1

Formatting elements were designed to

<b>This text is bold</b>

ETL LABS PVT LTD – JAVA PROGRAMMING 213

ETL LABS PVT LTD – JAVA PROGRAMMING 214

ETL LABS PVT LTD – JAVA PROGRAMMING 215

ETL LABS PVT LTD – JAVA PROGRAMMING 216

Let's see an example of HTML anchor tag.

<a href="second.html">Click for

ETL LABS PVT LTD – JAVA PROGRAMMING 217

<img src="animal.jpg" height="180"

ETL LABS PVT LTD – JAVA PROGRAMMING 218

Type 1 Type 2 Type 3

Ordered List or Unordered List Description List or

ETL LABS PVT LTD – JAVA PROGRAMMING 219

ETL LABS PVT LTD – JAVA PROGRAMMING 220

ETL LABS PVT LTD – JAVA PROGRAMMING 221

The HTML definition list contains following three

ETL LABS PVT LTD – JAVA PROGRAMMING 222

ETL LABS PVT LTD – JAVA PROGRAMMING 223

A <span> element used to color a part of a text

ETL LABS PVT LTD – JAVA PROGRAMMING 224

HTML table tag is used to

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

ETL LABS PVT LTD – JAVA PROGRAMMING 225

HTML table tag is used to

It is used with <colgroup> element to specify column

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

ETL LABS PVT LTD – JAVA PROGRAMMING 226