Scribd
Upload
5 views

HTML Document BCA PDF

Uploaded by

ganeshpanda614
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

HTML Document BCA PDF

Uploaded by

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

HTML

The primary scripting language for developing webpages in Hypertext Markup


Language
(HTML)
It is used to describe how a web page will appear in a browser’s window.
HTML provides simple mechanisms for formatting text, creating links and
lists, inserting
Images, embedding audio and video etc.
It can also include Cascading Style Sheets (CSS) to specify the style and layout
of txt and
Other components.
Scripts written in various languages such as JavaScript and VBScript may also
be used to
Change the appearance of web pages and make them interactive.
HTML documents are written using HTML tags embedded in angular brackets.
The set of tags that we can use to write HTML documents is defined by the
World Wide
Consortium (W3C).
W3C has published many standards for HTML. Their current version is 4.01.
HTML and its Flavours:
the first public version of HTML specification called HTML tags, was
introduced in late
1991 by Berners-Lee. In this version, only 20 tags were incorporated to develop
simple
Websites.
In November 1995, HTML version 2.0 was introduced by Internet Engineering
Task Force
(IETF).
The World Wide Web Consortium (W3C) published its first recommendation,
HTML 3.2,
In 1997.
in the same year, W3C published HTML version 4.0, which consists of three
flavours:
Strict, Transitional and Frameset.
in 1999, W3C published an enhanced version. HTML 4.01, which was
modified in May
12, 2001.
This current version is supported by most of the web browsers and is widely
used.
HTML Basics:
An HTML document itself is a text file that contains text and mark-ups called
tags.
So, any simple text editor such as Notepad in Windows or Simple Text in
Macintosh can
be used to create and edit HTML files.
Several HTML editors are also available in the market. Most of these editors
provide a
GUI, which the users use to design their web pages.
All HTML tags in all about tags. Tags are similar to instructions or codes.
Web browsers know their meaning and interpret them to render text, images,
and other
Elements on the screen properly.
the set of HTML tags is fixed and is standardized by W3C. Invalid tags are
displayed on
The screen.

Structure of HTML document and Basic Tags:


Below program is Structure of HTML:

<html>
<head>
<title>Home</title>
</head>
<body>
This is a basic structure HTML page.
</body>
</html>

Basic Tags:
There are four basic tags: 1.<HTML>, 2.<HEAD>, 3.<TITLE>, 4.<BODY>
1. <HTML> :

skeleton of HTML code.

this is the start of an


html document. The last tag in your document is </html>.

the standard structure


tag of an HTML. Make sure that you use <HTML> element at once in whole html
page it never repeat
and placed in between code more than one time.

tags which is head, title,


body.
2. <HEAD>:

be the first
thing to appear after the opening <html> tag. <head> element should contain a
<title> element
Indicating the title of the document.
head: <script>, <style>,<link>.
3. <TITLE> :

to know just what


subject data is on your website. There can only be one title per page.
please note that this is one of the tags that will go within the HEAD tags.
It displays at the very top of
a browser window.

<BODY> :
The <body> element appears after the <head> element and contains the part of
the Web page that
you actually see in the main browser window, which is sometimes referred to as
body
content.
All tags which apply some effects to text, image or anything that means
everything you seen and
appearing on web page that are placed between under <body> tag and </body>
tag.
HTML - Attributes of the body tag
o bgcolor: This attribute sets the background color of webpage. Ex: <body
bgcolor=”yellow”>
o text: This attribute sets the text color for the webpage. Ex: <body text="red" >

What is Tag?
Tag is an instruction given to web browser to show formatted data in webpage.
Following are types of tags.
1) Singular (Unpaired) tag: this type of tag consists of only starting tag to
provide single action. Some
tag don’t require end tag because they don’t have enclosed content.
Ex:- <BR>, <HR> tag.
2) Paired tag: this type of tag consist of start tag & respectively end tag to define
the scope.
Start tag is a symbol for surrounded by angle bracket’s <HTML> & end tag is
represented by forward slash
within angle bracket such as </HTML>.
Syntax: Start tag <tagname> Text End tag </ tagname >
Ex: <Title> Home </Title>
Attributes:
Tags can also have attributes, which are extra bits of information. Attributes
appear inside the opening tag only and
Their value followed by = sign is always inside double quotation marks “ ”.

Formatting Tags:
Heading tag - <h?>Text</h?>
One of the earliest means of formatting text was the heading tag. It is available in
six levels of importance from
<h1>down to <h6>, If you have documents with genuine headings, then there are
HTML tags specifically designed
just for them.
They are h1, h2, h3, h4, h5 and h6, h1 being the biggest of headings and h6 being
the smallest
Program:
<html>
<head><title>Font Size Example</title></head>
<body>
<h1>This is a main big heading </h1>
<h2>This is a main sub heading </h2>
<h3>This is a sub heading </h3>
<h4>This is a heading </h4>
<h5>This is a small heading </h5>
<h6>This is a smallest heading </h6>
</body>
</html>
Output:

This is a main big heading


This is a main sub heading
This is a sub heading
This is a heading
This is a small heading
This is a smallest heading

Note that the h1 tag is only used once - it is supposed to be the main heading of
the page and have bigger and bold
text appearance. h2 to h6 can used repeatedly, but they should always be used in
order, For example, h4 should be a
Sub-heading of an h3, and h3 which should be a sub-heading of an h2.
Paragraph Tag: <P>
the paragraph tags are used to define a block of text as a paragraph.
when a block of text is surrounded by the paragraph tags, the browser
automatically adds new line before
and after the paragraph text.
the <p> element offers a way to structure your text. Each paragraph of text
should go in between an
Opening <p> and closing </p> tag
<p>The contents of the paragraph.</p>
If you are using an empty paragraph tag like this <p> </p> it will create new line
Whenever you write <p> tag after paragraph tag automatically single new line
will appear means if you use two <p>
tag one after one then two paragraph appear on new line. Also, if you have extra
spaces in between your words the
browser ignores that, extra spaces are automatically ignored throughout the html
except appeared in <pre> tag.
But If you want extra space after it or if this is what you want as the formatting
for all paragraphs, use & nbsp if you
want extra space in between text.
<p>Hello nbsp; nbsp; nbsp; nbsp; world.</p> : Output= Hello world.
Paragraph tag is basic text formatting tag which specifically used to create
multiple line of text.
Paragraph Tag Attributes
align – Align is used to apply aligning to the text as left, right, center.
o Ex: <p align=”right”>Text</p>

PRE Tag - Preformatted Text - <pre></pre>


Any text between the pre tags, including spaces, carriage returns and
punctuation, will appear in the
browser as it would in a text editor (normally browsers ignore multiple spaces,
new line enter key
press)
Using the PRE tag to define sections of the page as formatted by the typing
itself was a quick and
easy way to get the text to display as you expected it to. This is because pre-
formatted text is
defined as text in which the structure is defined by typographic conventions rather
than by the
HTML.
Typical HTML ignores more than one white space and carriage returns in the
document. This means
that carriage returns, spaces, and tab characters are all ignore. If you typed the
above quote into a
typical HTML tag like the P tag, you would end up with one line of text:
Code without PRE tag: <p>
A
P
P
L
E
</p>
Output:

APPLE
Try the PRE tag on your website with various different spacing and carriage
returns.
For example, try pasting the following code into your web page HTML (leave the
spaces exactly as they are
written):
Code with PRE tag: <pre>
A
P
P
L
E
</pre>
Output:
A
P
P
L
E
The PRE tag leaves the whitespace characters alone. So line breaks, spaces, and
tabs are all maintained in
The browser.

List Tags:
Introduction to lists
List tag is to create lists in web page. HTML offers some tags for specifying
lists of information. All lists must
contain one or more list elements (items).
There are three types of lists are present:
1) Ordered List- <OL>
2) Unordered List- <UL>
3) Definitions- <DL>
Lists are especially useful in web pages to draw attention to short pieces of
information. Keep that in mind
when you create your lists, and try to include short phrases, instead of long
sentences, in each list item.
1] Ordered List- <OL> tag:
An ordered list is one in which each item is presented by a number or letter.
Ordered list always
represent data in sequence or order either it is number or alphabet.
Program: <html>
<head>
<title>Font Size Example</title>
</head>
<body>
<ol type="I">
Courses:
<li> BCA </li>
<li> BSc(CS)</li>
<li> BSc(SE)</li>
<li> BBA</li>
</ol>
</body>
</html>
Output:
Courses:
I. BCA
II. BSc (CS)
III. BSc (SE)
IV. BBA
<OL> tag: Values of TYPE Attributes:
Values of TYPE Attribute Numbering Style Example
1 Numbers 1, 2, 3, 4, 5, 6
a Lowercase Alphabet a, b, c, d, e, f
A Uppercase Alphabet A, B, C, D, E, F
i Lowercase Roman Numbers i, ii, iii, iv, v, vi
I Uppercase Roman Numbers I, II, III, IV, V, VI

2] Unordered List- <UL> tag:


The second type of list is similar to the first, except unordered lists don’t use
numbers or letters. As the
Name suggests, unordered lists means it is not follow order (Number sequence)
for elements of list.
UL lists use bullet symbol to represent each list item. As OL lists UL also use
<LI> tags to represent each list
items.
The following is an example of an unordered list:
Program:
<html>
<head>
<title>Font Size Example</title>
</head>
<body>
<ul type=”square”>Name of the colors:
<li>red</li>
<li>green</li>
<li>blue</li>
</ul>

</body>

</html>
Output:

Name of the colors:


Red
Green
Blue
In the above example we used square value to TYPE attribute hence list will
appear with square bullet
Symbol, if user want to change the bullet symbol then user can use following
options.
Three possible options exist for bullet style:
<UL TYPE=”disc”>
disc Usually displayed as a small, filled-in circle
<UL TYPE=”disc”>
o circle Usually displayed as an open circle
<UL TYPE=”circle”>
square usually displayed as an square.
<UL TYPE=”square”>
Initially, all unordered lists default to the disc style, which is usually represented
as a small, filled-in circle.
However, if you nest unordered lists—that is, if you include an unordered list in
another unordered list—
The default value changes.
3] Definition Lists <DL> tag
The third type of list you can create in HTML is called a definition list. As its
name suggests, you might use a
Definition list to show terms and their definitions. For example, in the following
list, the term is listed on the
first line, and then the definition is on the line below the term.
<DL> Definition List, <DT> Definition Title, <DD> Definition Description
Code:
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language is the web scripting language used to create
documents for the World
Wide Web.</dd>
</dl>
Output:
HTML:
Hypertext Markup Language is the web scripting language used to create
documents for the
World Wide Web.

Table:
A table is created using three tags: <table> <tr> and <td>. The tag table is the
container
of the whole table.
<table>
------
</table>
HTML table tags

Tag Meaning
Table Represents the whole table
tr Represents a row
td Represents a cell in a row
th Column header
caption Title of the table
A table consists of a number of rows each of which is made up of a number of
cells. The
tag <tr> creates a row.
The opening tag <tr> and closing tag </tr> respectively
<table>
<tr>…..</tr>
<tr>…..</tr>
</table>
A table or a row cannot contain data. To add dat, cells are created within a row.
Each
cell in a row is defined by the tag <td>. Usual tags such as <p>, <br>, <i>, <b>
may be
used within a cell
<table>
<tr><td>….</td><td>….</td><tr>
<tr><td>….</td><td>….</td><tr>
------
</table>
Border:
Adding a table border is very simple. A value 0 (zero) indicates no border
<table border=”1”>
<tr><td>33</td><td>55</td></tr>
<tr><td>66</td><td>77</t
d></tr> </table>
Row and column header:
The tag <th> is used to add row/column headers. They are also added using
cells.
Rows/column headers are center-aligned and in bold font, which distinguishes
them
from other cells.
<table border=”1”>
<tr><th>Name</th><th>Place</th><tr>
<tr><td>Balan</td><td>Chennai</td></tr>
</table>
Rowspan and colspan:
To make a cell span multiple rows and columns, the tags <rowspan> and
<colspan> are
used. The tag <rowspan> indicates the number of rows a cell spans while
<colspan>
indicates the number of columns a cell spanes.
<table border=”1”>
<tr><th rowspan=2>Name</th>
<th colspan=2>Marks</th></tr>
<tr><th>OS</th><th>OOP</th></tr>
<tr><td>Sunjay</td><td>88</td><td>77</td></tr></table>

Cellspacing and cellpading


These attributes are used to adjust white spaces in your table. The attribute
cellspacing
specifies the amount of spaces, in pixels, between adjacent cells. Similarly,
cellpading specifies
the amount of spaces in pixels between the cell border and its content.
<table border=cellspacing=”6” cellpading=”3” width=300>
<tr><th rowspan=2>Name</th>
<th colspan=2>Marks</th></tr>
<tr><th>OS</th><th>OOP</th></tr>
<tr><td>Sunjay</td><td>88</td><td>77</td></tr></table>
Attributes of the table tag
Attribute Meaning
align Specifies table alignment, can have values: left, right and center
background Specifies the URL of the background image
bgcolor Specifies the background color
cellpadding Specifies the amount of space in a number of pixels between the
Cell border
cellspacing Specifies the amount of space in number pixels between table cell
height Specifies the height of the table in pixels
width Specifies the width of the table in pixels
Attributes of the tr tag
align Specifies the horizontal alignment of the content of all cells in this row
bgcolor Specifies the background color of all cells in this row
bordercolor Specifies the bordercolor of all cells in this row
height Specifies height, in pixels, of all cells in this row
width Specifies width, in pixels, of all cells in this row
Forms:
The HTML <form> tag is a very important tag, which creates a section in your

HTML
Document.
it is used to collect information from visitors. In addition to usual contents and
markups,
it contains special elements called controls.
HTML provides several control elements such as buttons, text boxes, password
fields,
check boxes, radio buttons, selection boxes hidden fields etc.
The tag <form> is a container tag. <form> ---- </form>
The tag <form> has another optional attribute method which specifies the
HTTP method
to be used. It can have values GET or POST.
IF GET (the default) is used, the data are appended to the URL

IF the POST method is used, data are sent as a part of the HTTP request message
and
are not appended to the URL.
<form action=”handler.jsp” method=”post”>
---------------
</form>
Attributes of the input tag
Attribute Meaning
Type Specifies the type of a control element
name Specifies the name of a control element
value Specifies the initial value of the control element
checked Used for checkbox and radio buttons, indicates that the controls is on.
readonly Used for text, password, and file controls
disabled It set disables controls from the user input
maxlength Specifies the maximum number of characters a user can enter in a
text or password.
Text field:
The most commonly used input element is text field. It is used to get single-
line textual
data.
Its common usage include name, date of birth, address, email address, login
name etc.
Name <input type=”text” name=”name”>
Password field:
Password fields are similar to text fields except that characters entered are
displayed as
dots or asterisks. This allows us to hide information from others. All the attributes
of a text field
are also valid for a password field.
Password: <input type=”password” name=”pass”>
Label:
The content of the <label> tag is a piece of ordinary text. It is used to add a label
to a form field.
<label for=”married”>
Married
<input type=”checkbox” id=”married”>
</label>
Check box:
A checkbox is like a toggle switch i.e., it can be either of the two states checked
or
Unchecked. Checkboxes allow visitors to select one (or more) options from a set
of related
Alternatives. A checkbox is created using the <input> tag and specifying the
type=”checkbox”
Which of the following items do you have?<br>
<input type=”checkbox” name=”c1” values=”yes”>Car<br>
<input type=”checkbox” name=”c2” values=”yes”>Bike
Radio button
Radio buttons allow visitors to select any one among a set of related
alternatives. When
one radio button is a group is selected, the previously selected radio button (if
any) is
unselected.
Radio buttons are unchecked by default. A checkbox is created using the
<input>tag and
by specifying type=”radio”
Gender:<br>
<input type=”radio” name=”gender” value=”Male”>Male<br>
<input type=”radio” name=”gender” value=”Female”>Female
Selection list:
A selection list (also called the drop-down list), like a group of radio buttons
or
checkboxes, allows visitors to choose one (or more) options among a set of
options.
A selection list is created using the <select> tag. Items of a selected list are
created using
the <option> tag. By default, the first option is displayed.
Gender:
<select>
<option>Male
<option>Female
</select>
Text area:
A text area is an extension of a text field, where the text can span multiple
lines. It is
used when visitors want to enter a large amount of text.
The number of rows and columns may be set using the attributes rows and cols
respectively.
Comment:<br>
<textarea rows=”4” cols=”20”>
Enter your comment here
</textarea>
Button:
Push Buttons can be created using the <input> tag, with the type attribute set to
“button”. The caption is the value of the value attribute of the input tag.
<input type=”button” value=”Logout”>
Image button:
The submit button in a form has a gray colored simple appearance, unless you
use styles
for it.
A simple way to create a good looking graphic submit button is to use the
<input> tag
with attribute set to “image”
<input type=”image” src=”rightarrow.gif”>

Frame:
HTML allows us to divide a web page into several blocks called frames. Each
frame may
display a separate web page. So , frames allow us to display multiple HTML
document in one
browser window simultaneously. They are refreshed separately.
For example, the following code creates two frames separated vertically
<frameset cols=”40% 60%”>
<frame name=”left” src=”left.html”>
<frame name=”right” src=”right.html”>
</frameset>
Frameset Element:
The layout of a document is specified using the <frameset> element.
The <frameset> element is put in the parent HTML document without any
<body> tag.
It contains <frame> elements each of which creates a frame. For example
frameset
element vertically divides the page into two blocks (frames).
The left frame is set to 40% of the total page width and right frame is set to
60% of the
total page width.
Frame Element:
The element <frame> specifies the HTML document to be loaded in each frame.
It has
several attributes as follows:
name – refers to the name of the frame
src – specifies the location of the initial web page to be loaded.
framz`eborder – specifies the border information about the frame
marginwidth – specifies the amount space of pixels to be added between the
frame’s contents in its left and right margins.
marginheight – specifies the amount of space in pixels to be added between the
frame’s contents in its top and bottom margins.
Layout:
Each frameset creates a set of rows or columns
<frameset rows=”30%, 70%”>
<frame name=”top” src=”top.html”>
<frame name=”bottom” src=”bottom.html”>
</frameset>
This frameset element divides the page horizontally into two frames. The top
frame is
set to 30% of the total page height and the bottom frame is set to 70% of the total
page
height.
The attribute of frameset element
cols – This attribute is used to create frames vertically
rows – This attribute is used to create frames horizontally

You might also like