Hypertext markup language is at the standards markup language
used to create web page. This language was first developed by Tim Berbers-Lee.
The first web page was created by Tim Berners-Lee and put online in 1990. Web
pages are also called HTML documents. So HTML are the building blocks of web documents.
There are different versions of HTML; these are HTML, HTML+, HTML 1.0, HTML
2.0, HTML 3.2, HTML 4.01 (It has accessibility of Cascading Style sheet, and
Multimedia) and now HTML 5.0 (It has accessibility of local storage and offline
database).
Structure of HTML document
The basic structure of HTML document
is as given below
<HTML>
<HEAD>
<TITLE> THIS IS TILE OF
WEBPAGE</TITLE>
</HEAD>
<BODY>
This is the body part of webpage.
</BODY>
</HTML>
·
<HTML>shows
the starting of HTML document and </HTML> shows the ending of HTML document.
All the other tags and contents of the webpages are contained within these tags.
·
<HEAD>
tag shows the starting of head section and </HEAD> shows the ending of
the head. In the head section, we can put some information about an HTML documents.
Some head elements like <TITLE> used to define certain information about
html documents.
·
<TITLE>
tag show the starting of the title and </TITLE> show the ending of the
title. This tag is issued inside the head tag. This tag is use to display the
title of the documents of the browse's windows.
·
<BODY>
tag show the starting of the entire contents of the document and </BODY show
the ending of the document. All the information are of webpages contained
within these tags.
Advantages of using HTML
1. It is highly flexible and user-friendly.
2. It is an open technology that supports
almost all the Web browser and platforms like MS-Windows, Macintosh, UNIX, etc.
3. It is efficient and reliable. You can
create the Web page in order to advertise and promote products and services.
4. It is easily understandable and does not
require long time training.
5. It provides search engine compatible to the
Web sites.
Disadvantages of using HTML
1. It is complex to design attractive Web page
only using HTML. So, other languages are used for additional programming.
2. It is difficult to develop a complete Web
Site by using only HTML. Web development tools like Dreamweaver, Foundation are
used.
3. It cannot be used to develop a dynamic Web
page.
4. There is no any complete acceptable
standard of HTML.
5. There are many incompatibilities of HTML.
Major features of HTML
1. HTML provides tags that helps
display text in the form of tables to add clarity and readability to a webpage.
2. HTML can be used to display any type
of document.
3. HTML provides tags that help in changing
font shape, font size and color of the text of a webpage.
4. HTML provided a variety of
formatting styles for web documents.
5. HTML allows images to be included in
a webpage.
6. HTML provides hyperlink to connect
different webpages with one another. Hyperlinks can be created using text,
graphic and even images.
7. HTML provides features to facilitate
navigations.
8. HTML is versatile language cand can
be used in any platform (Macintosh, UNIX, and Windows).
9. HTML provides tags to embed video
and audio to the webpage.
10. HTML is not case sensitive language,
we can use upper case, lowercase and mix.
11. HTML is important as the base language
that CSS, JavaScript PHP, are using this language.
12. HTML make test attractive
Importance of HTML in web page designing.
1.
HTML
takes great importance in the field of Web Designing. Without this you can't
create a Web Page. For example, if you have planned to design some unique
Website Templates for a Client than you have to use HTML for that.
2. HTML
means Hyper Text Markup Language. It means if you want to see your webpage in
proper format with heading, title, body text and images, then with use some
tags of HTML you can design webpages and show to you and your customer.
3. HTML, or
Hypertext Markup Language, is the basic language in which a website is encoded.
The language is very easy to learn and simple to apply. The language consists
of tags in which codes are written. For every
action there is a tag. HTML is use with all language like Java script, PHP, JAVA, CSS, ASP and .Net
action there is a tag. HTML is use with all language like Java script, PHP, JAVA, CSS, ASP and .Net
4. HTML play
vital role in website design field. HTML 5 takes great importance in the web
designing. If you building or any web designing company develop any web pages
they need html without this, you can't create a web page.
Use of HTML
1. It is used for basic layout creating
or designing the Web page.
2. Without HTML, the World Wide Web
will not exist.
3. It allows embedding text, image,
multimedia (audio / video) and links to other documents and the Web pages.
4. It provides a means to create
structured document by using paragraph, character formatting, links and lists.
5. It can embed scripts such as CSS, JavaScript,
which affect the behavior and design of the Web page.
- Web pages development: HTML is heavily used for creating pages that are displayed on the world wide web. Every page contains a set of HTML tags including hyperlinks which are used for connecting to other pages. Every page that we witness, on the world wide web, is written using a version of HTML code.
- Web document creation: Document creation on the internet is dominated by HTML and its basic concept via tag and DOM i.e. document object model. HTML tags are inserted before and afterward or phrases to locate their format and location on the page. A web document consists of three sections: title, head, and body. Head includes the information to identify the document, including title and any other important keyword. A title can be seen on the browser’s bar and body section is the main portion of the website visible to the viewer. All the three segments are designed and created by the uses of HTML tags. Every section has their own specific set of tags, which are dedicatedly rendered keeping the head, title and body concepts in a loop.
- Internet navigation: This navigation is possible by utilizing the concept of Hypertext. It is basically a text which refers to other web pages or text and when user click on it, would navigate to referenced text or page. HTML is heavily used to embed the hyperlink within the web pages. A user can easily navigate within the web pages and between websites as well, which are located on different servers.
- Cutting edge feature: HTML5 with its set of standards and API is being used to introduce some of the latest trends in website creation business. Browser like Google Chrome is the perfect choice when it comes to implementing an HTML5 latest set of standard and APIs.
- Responsive images on web pages: At the elementary level in applications of HTML, queries can be set to utilize the images, which are responsive in nature. With the srcset attribute of img element in HTML, and combining it with picture element, a developer can fully control how the user will render an image. Now different types of an image with size variation can be loaded by using the img element. Rules can be easily set with the picture element, we can declare img element with default source and then for every case, a source can be provided.
- Client-side storage: Earlier, a user could not save the user’s browser data that would persist across sessions. To meet this requirement, server-side infrastructure has to be built or user’s cookies can be used.
- Offline capabilities usage: Once data can be stored in the browser, the developer can think of a strategy to make application work, when a user is disconnected. HTML 5 has its application cache mechanism which would define how the browser manages the offline situation. Application cache, responsible for offline ability actually comprises of different components, which includes API methods that create an update, read manifest file and events.
- Data Entry support with HTML: HTML5 standard and set of APIs can be used to support data entry level of work. As browsers implement new HTML5 standards, developers can simply add the attributes to the tag which indicate required fields, text, data format etc.
- Game development usage: Since browsers support new specifications for HTML5 including CSS3 and light-fast JavaScript engine to drive a new rich experience, HTML5 can bring the reality of game development possible, which was earlier the forte of Flash and Silverlight. Every single feature of APIs need not be implemented, but most appropriate ones can be utilized while eliminating the rest of the features.
- Native APIs usage to enrich website: HTML5 adds so many new abilities and tools, which was just an imagination in the past. A large set of new APIs regarding file system, Geolocation, drag, and drop, event handling, client-storage etc. are the capabilities which make usage of HTML5 more easier than ever before. Application experience can be enhanced with other APIs like Fullscreen, Visibility and Media Capture. A modern web application has asynchronous nature which can be fostered using Websockets and Web workers like APIs.
Classification of HTML TAGS
Broadly the tags used are
categorized into two types:
I)
Container
Tags (Paired tags)
II)
Empty
tags (singular tags)
Container tags: - The HTML tags which have the corresponding
end or closing tags are known as container tags. E.g. <Body>,
<Font>, <html> etc. They are also known as paired tags
Empty tags: - The tags which have no end tags are
called empty tags. They are also called stand-alone tags or singular tags.
Example < IMG>, <BR>, <HR>, <!> etc.
HTML tags
1) Body tags: - All the contents and
tags of the HTML document are contained inside the body tag. A webpage can have
only one<BODY> tag. The body tag stats from <BODY> and ends with
</BODY>.
Structure
<BODY>
…………………
HTML documents
………….
</BODY>
Some attributes used with
<BODY> Tag
The body tag consists some
attributes that allows setting different formats in the web page documents. Using
these attributes, we can set background background color, text color etc.
Structure
<BODY
BGCOLOR="Color name"
BACKGROUND="image file"
TEXT="color name">any
text content
</BODY>
Some attribute used with body tags
are as given below
i)
BGCOLOR
:-This attribute is used to set the background color of the webpage. By
default, a webpage has white background color, HTML support 16 colors with the
BGCOLOR attribute red, blue, white, green, purple silver, lime, maroon, aqua,
black, gray, heavy, olive, teal, fuchsia and yellow.
We can also set the background color
by using color code. It is also known as RGB color format. In this format we
can use 6 digits i.e. RRGGBB (here first two digits for red, next two digits
for green and last two digits for blue). The code is given in Hexadecimal
number system,
Some common color name with their
equivalent color codes are given below
Color Name
|
Color code
|
Color Name
|
Color code
|
Color Name
|
Color code
|
Color Name
|
Color code
|
Aqua
|
#00FFFF
|
Silver
|
#C0C0C0
|
Olive
|
#808000
|
Green
|
#00FF00
|
Gray
|
#808080
|
Black
|
#000000
|
Teal
|
#008080
|
Purple
|
#800080
|
Navy
|
#000080
|
Lime
|
#008000
|
blue
|
#0000FF
|
yellow
|
#FFFF00
|
Fuchsia
|
#FF00FF
|
maroon
|
#800000
|
red
|
#FF0000
|
Example : <BODY
BGCOLOR="blue"
Or
<Body BGCOLOR=#0000FF">
Example
<html><head><title>first
way of background color</title></head>
<body BGCOLOR ="Green">
background color of this page is green</body></html>
Background
The background attribute allows to
set the background image in the webpage.
Syntax:
<body background="path
name">
Example
<html>
<head> <title> using
image as a background</title>
</head>
<body background
="rose.jpeg">
His everybody! welcome to you in may
page
</body>
</html>
TEXT:- this attribute is used to set the
foreground or text color of the webpage.
Syntax:
<body BGCOLOR="green"
text="red">
Or
<body BGCOLOR=#008000" text
"#FF0000">
Example
<html><head><title>using
foreground or text color</title></head>
<body BGCOLOR="#0080000"
text="FF0000">
Welcome to you in my page
</body>
</html>
Line break tag<br>
This tag is used for starting a new
line point. We can put <BR> tag in the document from where to break the
line. It is an empty tag. It does not have end tag.
Syntax
Text…. <BR>
Paragraph tag<p>
The <P> tag is used to create
a paragraph in the webpage. It is a container tag but closing tag</P> is optional.
We can align the paragraph either in left, right, center or justify using ALIGN
attribute. The default alignment of paragraph is left.
Syntax: <P align:
"left"/"right"/center"/justify">text…</P>
Center tag<center>
This tag is used to put the document
at the center position from the current left and right margins. It has start
and end tags(<center>…. </center)
Syntax: - (center>
text…</center)
Horizontal line tag(HR)
This tag is used to draw the horizontal
lien across the page. It is an empty tag. we can use different attributes with
this tag such as align, Color, size, width etc.
Syntax:
<HR align
="left"/"right"/"center"/"no shade"
Color= "color name"
Size ="pixels"
Width="percentage">
Heading
tags(<H1>…….<H6>
The
heading tags are used to set different heading on the document. The first level
of heading is defined using <H1>, second level<H2> …..<H6> is
the last heading. In this heading text appears in small size.
Syntax:
<Hn
Align= "left"/"right"/"center">text </Hn>,
where, n is a number from 1 to 6
HTML
Document formatting tags: - Different formatting tags are used in HTML
document to give different design webpage. Example <FONT>, <B>,
<I>, <U>, <SUB>, <SUPER> etc.
Font
tag (<FONT>: - The
<FONT> tag is used to change the size, color and face of the text. We can
use different attributes with this tag such as Align, size, color, face etc. It
is a container tag
Syntax:
<FONT
Size="value"
Color="color
name"
Face="Font
name">Text…. </FONT>
Where,
size:-font size range from 1 to 7. The smallest font size is 1 and 7 is
the largest font size. The default font size is 3.
Color:- sets
the color of the text.
Face:- It
changes the typeface of the text such as "Times New Roman", Arial,
"Arial Black".
Font
style tags: font style are used to change the appearance of the text such as
bold, italic, underline, subscript, superscript etc.
<B>tag:
- this tag is used to set the text in bold face.
Syntax:
<B> text…</B>
<I>
tag: - this tag is used to set the text in italic format
Syntax:
<I> text…. </I>
<U>
tag: - This tag is used to underline the text
Syntax:
<U> text…. </U>
<Sup>
tag: this tag is used to convert the text in superscript like A2, B2
etc.
<SUB>
tag: this tag is used to convert the text in subscript like H2O, 02
etc.
Image tag <img>
We can insert two types of image in
the HTML document, they are inline images and background images.
Using <IMG> tag we can insert
inline images in the webpage, This tag does not have end tag. Some attributes
are src, width, height, align, border etc., The commonly used image fronts in HTML
document are GIF (Graphics Interchange format) and JPEG (Joint phototropic export
group)
Syntax
<IMG
src="image file"
Width="value:
Height="value"
Align="left"/ "Right"/"center"/"top"/"bottom"
Border="value">
Where,
src= source of image. It specifies an
image file with its location
Width=it specifies width of the image.
Height=it specifies height of the image
Align=it specifies position of the image
on the document.
Border=it sets the border around the
image
Example:
<img src="d:\picture\future.jpeg"
Example
<html>
<head><tile> picture</title></head>
<body> <img
src=img.jpeg" width "250" height "200" align
"center" border= "3">
</body>
</html>
Creating list in the HTML document:
-
HTML supports three types of list
ordered or numbered list, Unordered or Unnumbered list and definition list.
The ordered list is sequential list
and the unordered list is bulleted list.
Creating ordered or Numbered lists
<OL> tag is used to create
ordered or numbered list in the HTML document. The <OL> tags use
<LI> tag as their content.
Attributes of <OL> tag
Some attributes of <OL> tags
are as follows:
Type: this attribute specifies the type
of number used in the list. The values for this attribute are: 1, I, i, A, a.
The default value is 1.
Value Result
1 Arabic
numeric such as 1, 2,3,4 5,…
i Lowercase
Roman numbers such as i,ii,iii,iv,v…
I Uppercase
Roman numbers such as I,II,III,IV,V..
a lowercase
alphabet numbers such as a,b,c,d…
A Uppercase
alphabet numerals such as A,B,C,D,E……
Start: this attribute set the starting
number of the order. Its value is positive number. The default start value is
1.
Syntax: -
<OL TYPE="1/i/I/a/A
"Start="number">
<LI>item….</LI>
<LI>item…. </LI>
</OL
Creating unordered or unnumbered
lists: <UL > tag is used to create
the unordered or unnumbered list. The <UL> tag uses <LI> tag as
their content.
Attribute of <UL> tag
Type: this attribute specifies the
type of symbols or bullet style used for the list. The value for this attribute
are circle, disc and square. The default value is disc.
Value Result
Circle sets
the hollow circle
Disc Sets
the solid circle
Square Sets the solid square
Syntax: <UL Type ="
DISC/Square/Circle">
<LI> item………………</LI>
<LI> item………. </LI>
</UL>
Definition list tags(DL): - The <DL> tag is used for
declaring a definition list. This tag is use within <DD> tag. It is a container
tag which has starting and end tag<DL>……. </DL>. The <DT> tag
defines the terms component of a definition list and the <DD> tag marks
the start of the definition portion of an item in a definition list.
Creating table in Webpage
The <table> tag is used to
create table in the HTML document, The <TR> <TD> and <TH>
tags are used with <TABLE > tag.
<TR> tag defines the row of
table, <TD> tags define a cell of a table and the <TH> tag defines
the heading of table.
Syntax:
<Table>
<TR>
<TD> text</TD>
<TD> text</TD>
………</TR>
</TABLE>
The <table> tag uses the following
attributes:
<Table
Border=number
Bgcolor="color_name"
Align="alignment _value"
Width=number
Height=number
Cellspacing=number
Colspan=number
Rowspan=number
Cell padding=number>
Marquee tag: -The <Marquee > tag is used for
scrolling piece of text or text or image display either horizontally across or
vertically down on the webpage.
Syntax:
<marquee
Behavor="Slide/"Scroll"/alternate"
Bgcolor="color name"
Direction ="left"/"Right"/"Up"/"Down"
Scrolldelay=Time in millisecond>
text to be scrolled <marquee>
Where,
Behavior: It specifies the movement
of marquee text. It may be slide/ Scroll/alternate. The default value of behavior
or scroll
Direction: the default value or
direction is left.
Bgcolor: it specifies the background
color of marquee.
Scrolldelay: It defines how long to between
each jump
Example
<html>
<head><title>
marquee</head>
<body> <marquee> This
text will scroll from right to left</marquee>
</body>
</html>
Inserting hyperlink in a webpage<a>tag
The anchor tag<A> is used to
create all types of hyperlink in the webpage. Every anchor tag must have a
closing or end tag</A> to signal the end of the anchor. The HREF attribute
is compulsory used with <A> tag. HREF stands for hypertext reference,
Syntax:
<A HREF ="URL"> text
or image to describe link</A>
Different type of hyperlinks
1) Linking the different sections of
the same page:- This type of
link called the intra-page hyperlink or the same page hyperlink. It create link
between different section of the same webpage.
Syntax:
<a name ="your bookmark
name"></A>
Here, "bookmark name" is
name of place where you want to move.
2) Linking different pages in a
website:-
<html>
<head><title> hyperlink
example</title> </head>
<a
href="page1.html"> click here to goto to page1.html</a>
</html>
Linking the different section s of
the same page.
<html> <head>
<title> hyperlink example</title><head>
<body>
< a name
="top"></a>
This is link is also called intra
page hyperlink or the same page hyperlink.
<a href="#top"> Goto
Top</a>
</html>
Using image as the link
<html>
<head>
<title> Hyperlink
example</title></head>
<body> < a href="sunrise.html>
<img src="sunrise.png"></a>
</body>
<htlm>
Frames The frame in HTML can be used to
organized the sites, Frames allow to divide the page into more than one easily
using the tag frameset.
<frameset> tag is use to
create frame in HTML document. <FRAME> tag and <NOFRAME> tag is
also used along with <FRAMSET> tag. The two atrributes rows and colors
are used with <FRAMESET> tag.
Syntax
<HTML>
<FRAMESET =……….>
…………….
……….
<NOFRAME>
</NPFRAMES>
</FRAMESET>
<HTML>
Form: A form creates blank line or data
entry form where the users or visitors can fill some information as they need.
Form can contain various option buttons such as check box, radio, button,
accept or cancel button, etc. Various attribute with form tag. They are input, option,
select, text area, size, name, maxlength etc.
Syntax
<Form>
………………….
Input element
……….
</Form>
The tags and attributes used to create
form
Input tag:
Some input type are as follows: Text,
Radio, Reset, Password, Checkbox,Image, Submit
<Textarea> tag: This tag is used
to define text area in the form. The following are the attribute used with this
tag:
·
Name
(Name of the tag) value (Editable
information of the tag)
·
Cols(Width
of the text area) rows(height of the
text area)
<Select>
This tag is used to create a menu so
that visitors can get options list to select required option. The following are
the attributes used with this tag
·
Name
(name of the tag)
·
Multiple
(if more than one option shown at a time)
·
Size
(number of options you want to display at a time)
<option> tag
This tag is used with <select>
tag. This tag is used to define options for the drop down list.
Example of forms:
1. Text fields: - The text filed allows you to type any
letters and number in the form.
<form>First name:<input
type="text" name="firstname"/> <br/>
Last name:<input
type="text" name="lastname"/></form>
2. Radio buttons: - radio button allows you to select
required option in the form.
<form><input type="radio"
name="sex" value="male">Male
<form><input
type="radio" name="sex" value="female">Female
</form>
3. Checkboxes
The check boxes allow you to select
more than one option form the list.
<form>
I have a cycle:
<input type="checkbox"
name="vehicle" value="Cycle"/>
I have a bike
<input type="checkbox"
name="vehicle" value ="Bike"/>
I have a car
<input type="checkbox"
name="vehicle" value ="Car"/>
</form>
No comments:
Post a Comment