Scribd
Upload
81 views

Etl Labs PVT LTD - Java Programming

HTML is a markup language used to create web pages. It was created by Tim Berners-Lee in 1990. HTML uses tags to structure and style text, images, and other content within web pages. Common HTML tags include <html> to define an HTML document, <head> for metadata, <title> for the page title, and <body> for the visible page content. Attributes provide extra information about HTML elements.

Uploaded by

ETL LABS
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
81 views

Etl Labs PVT LTD - Java Programming

HTML is a markup language used to create web pages. It was created by Tim Berners-Lee in 1990. HTML uses tags to structure and style text, images, and other content within web pages. Common HTML tags include <html> to define an HTML document, <head> for metadata, <title> for the page title, and <body> for the visible page content. Attributes provide extra information about HTML elements.

Uploaded by

ETL LABS
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 43

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.

ETL LABS PVT LTD – JAVA PROGRAMMING 197


………….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.

ETL LABS PVT LTD – JAVA PROGRAMMING 198


………………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.
ETL LABS PVT LTD – JAVA PROGRAMMING 199
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.

ETL LABS PVT LTD – JAVA PROGRAMMING 200


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

ETL LABS PVT LTD – JAVA PROGRAMMING 201


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.

ETL LABS PVT LTD – JAVA PROGRAMMING 202


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.

ETL LABS PVT LTD – JAVA PROGRAMMING 203


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.

ETL LABS PVT LTD – JAVA PROGRAMMING 204


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.

ETL LABS PVT LTD – JAVA PROGRAMMING 205


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>

ETL LABS PVT LTD – JAVA PROGRAMMING 206


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.

ETL LABS PVT LTD – JAVA PROGRAMMING 207


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

ETL LABS PVT LTD – JAVA PROGRAMMING 208


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

ETL LABS PVT LTD – JAVA PROGRAMMING 209


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

ETL LABS PVT LTD – JAVA PROGRAMMING 212


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>

ETL LABS PVT LTD – JAVA PROGRAMMING 213


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

ETL LABS PVT LTD – JAVA PROGRAMMING 214


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>

ETL LABS PVT LTD – JAVA PROGRAMMING 215


Comment Tags
You can add comments to your HTML source by
2
5 using the following syntax
0
<!-- Write your comments here -->

ETL LABS PVT LTD – JAVA PROGRAMMING 216


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>

ETL LABS PVT LTD – JAVA PROGRAMMING 217


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

ETL LABS PVT LTD – JAVA PROGRAMMING 218


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)

ETL LABS PVT LTD – JAVA PROGRAMMING 219


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.

ETL LABS PVT LTD – JAVA PROGRAMMING 220


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.

ETL LABS PVT LTD – JAVA PROGRAMMING 221


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).

ETL LABS PVT LTD – JAVA PROGRAMMING 222


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

ETL LABS PVT LTD – JAVA PROGRAMMING 223


<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

ETL LABS PVT LTD – JAVA PROGRAMMING 224


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.

ETL LABS PVT LTD – JAVA PROGRAMMING 225


Table Tags

HTML table tag is used to


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.

ETL LABS PVT LTD – JAVA PROGRAMMING 226


Table Tags Example

HTML table tag is used to


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

ETL LABS PVT LTD – JAVA PROGRAMMING 227


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

ETL LABS PVT LTD – JAVA PROGRAMMING 228


<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

ETL LABS PVT LTD – JAVA PROGRAMMING 229


Radio Button Input

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

ETL LABS PVT LTD – JAVA PROGRAMMING 230


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

ETL LABS PVT LTD – JAVA PROGRAMMING 231


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

ETL LABS PVT LTD – JAVA PROGRAMMING 232


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

ETL LABS PVT LTD – JAVA PROGRAMMING 233


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

ETL LABS PVT LTD – JAVA PROGRAMMING 234


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

ETL LABS PVT LTD – JAVA PROGRAMMING 235


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

ETL LABS PVT LTD – JAVA PROGRAMMING 236


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:

ETL LABS PVT LTD – JAVA PROGRAMMING 237


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 238

You might also like