Scribd
Upload
7 views

HTML Notes Ngp

Uploaded by

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

HTML Notes Ngp

Uploaded by

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

CHAPTER 4

HTML
Q. What is HTML ? State advantages and disadvantages of HTML .
Ans : -

HTML :-
 HTML Stands for Hyper Text Markup Language.
 It is used to create a World Wide Web document i.e., Web Page.
 Hypertext is an ordinary text that has been dressed up with extra features
such as formattings , images , paragraphs , links and multimedia.
 Markup is the process of converting ordinary text into Hypertext by adding
some extra symbol. This symbol is called as Tag < >.
 Tag < > is the basic unit of markup.
 HTML Web document is write on Editor such as Notepad and save with an
extension .html .
 HTML page can be viewed on WEB BROWSER such as Google Chrome ,
Internt explorer , Mozilla Firefox , etc.

Advantages of HTML :-
 For Creating HTML documents, Only text editor is needed. No special software is
required. For Ex. : In Windows Operating System , Notepad Editor is used to write
HTML Program.
 HTML document can be created on any Hardware platform using any text editor.
 Learning HTML is easy than any programming language.
 If something is not working , then finding error is easy in HTML.
 HTML will not cost anyrhing for its use. There are no expensive license to buy.
 You will not rely on any vendor or any program for its use.
 Contains powerful formatting facilities.
 HTML pages can be easily updated without changing whole documents.

Disadvantages of HTML :-
 HTML is not Programming language in True sense.Actually it is just Markup
language.
 Any simple calculation can not be done in HTML.
1|Page
 It can not be used to display even date and time.
 The interactive web pages can not be built by using HTML.
 The web pages developed in HTML cannot behave like an application.
 The web pages developed in HTML do not have their own interface.
 Hyperlink is provided in HTML. But for that we need a trip to server at each step.

Q.2 ) Software /Editor used to write HTML Program :


Ans :-

Various Editor is used in different operating system :-


1. Notepad in windows.
2. Simple text in Macintosh.
3. Pico in UNIX.

Q.3 ) Basic / General structure of HTML :


Ans :-
 Every HTML document has same general structure and it consist of few basic tags
which define the page as a whole.
 Every HTML Page is divided into two section. i.e., Head Section and Body Section.
 HTML document consist of Eight basic tags such as .<HTML> , </Html>,<Head> ,
</Head>,<Title>,</Title>, <Body>,</Body>,etc.
Diagram :-

<HTML> Tag :-
Every HTML document starts with Start tag <HTML> and end using </HTML> Tag.
<HTML> tag defines that the text follows defines an HTML web page and can be viewed in

2|Page
Web browser.All the remaining HTML program placed between <HTML> and </HTML>
tag.
<Head> Tag :-
<Head> Tag defines the header area of page , which will not display actual page
itself but just gives the information about that web page such as Title of Page,etc. <Head>
Tag begins Header section whereas </Head> tag ends Head section.<Title>….</Title > place
between <Head> and </Head> Tag.
<Title> tag :-
<Title> tag is paired tag. The text appear between <Title> and </Title> becomes title
of that web page and will be displayed on title bar of browser. Title of web page should be
descriptive as it is used for web indexing while searching the web page.
<BODY> Tag :-
The actual contents of the web page will be displayed in body section of web
page.The Body section starts with <BODY> atg and ends with </Body> tag.There are several
optional attributes of <Body> Tag such as bgcolor , background , link , alink , vlink , text ,
etc. Other tag which is used in displaying paragraph , image , text , multimedia are placed
between <Body> and </Body> Tag.

Q.4 ) <BODY> Tag and its attributes :-


The actual contents of the web page will be displayed in body section of web page.The Body
section starts with <BODY> tag and ends with </Body> tag.There are several optional
attributes of <Body> Tag such as bgcolor , background , link , alink , vlink , text , etc. Other
tag which is used in displaying paragraph , image , text , multimedia are placed between
<Body> and </Body> Tag.
1. BGCOLOR :- BGCOLOR attribute of <Body> tag is used to set the background
color of whole Web page. The value of BGCOLOR attribute can be specify as Color
name or can give six digit hexadecimal RGB Code.
Ex. :- <Body Bgcolor=”Red” > or <Body Bgcolor=”#FF0000”>
In above example, Background color of web page will be red.

2. BACKGROUND :-
The BACKGROUND attribute of <Body> tag is used to put an image or wallpaper in
background of web page. The value of BACKGROUND attribute is source path of an
image where it stored in your computer.

3|Page
Ex. : <BODY Background=”C:/theme.jpg”>
3. TEXT :-
The Text attribute of <BODY> tag can set the text color of complete HTML page.
The value of TEXT attribute can be specify as Color name or can give six digit
hexadecimal RGB Code.
Ex. :- <BODY Text =” Red”> Welcome to Orange city </Body>
Now display the Output “ Welcome to Orange City “ in Red color.

4. LINK :-
It sets the color of all links in web page which are not visited yet by user.
Ex. :- < Body Link=”green”>
It sets the color of all unvisited to green colour.

5. VLINK :
It sets the color of all links in web page which have previously been visited yet by
user.
Ex. :- < Body VLink=”red”>
It sets the color of all visited to red colour.

6. ALINK :-
It sets the color of link which is currently active.
Ex. :- < Body ALink=”purple”>
It sets the color of link which is active to purple color.

Q.5 ) Procedure to write HTML program :-


1. Open a text editor . i.e., Notepad
2. Write HTML program coding in Notepad.
3. Save above HTML code with an extension .html
4. To Run above HTML file , Open a Web browser such as Google chrome , Mozilla
Firefox or Internet Explorer , etc.
5. Browse / locate above HTML file in browser and now view that HTML page in your
browser.

4|Page
Tags in HTML :-
<P> Tag :-
 <P> Tag is used to create the Paragraph.
 A Paragraph can be created by enclosing text within <P> and </P> tag.
 Browser will ignore the paragraphs created by pressing Enter key. You must
specifically define paragraph using <P> Tag.
 < P> tag has one optional attribute . i.e., ALIGN. It is used to specify where
text appear on screen.
<P align =”left”> - Left alignment of Paragraph like normal text.
<P align=”right”> - Text aligned to right margin.
< P align=”center”> - Text is centrally align.

Ex. :- <P align=”left”> This is first paragraph . Its codes Continues over several
lines.
But displayed as a single paragraph In a browser. </P>
<BR> Tag :-
 <BR> tag is used to put a line break.
 <BR> tag is a singular tag means there is no end tag .
 It tells the browser to wrap the text after <BR> tag onto new line.
 A line break is just like typewriter carriage return- it takes you back to the left
margin.
 Each <BR> tag will insert only one line.
 Line inserted manually using ENTER K
Ex. :-
Mr. XYZ <BR>
25, Mahal ,
Kelibag Road <BR>
Nagpur- 440009
Will display O/P as :-
Mr. XYZ
25 , Mahal, Kelibag Road
Nagpur-440009
<HR> Tag :-
 <HR> tag is Horizontal Rule tag . It is also called as horizontal line .
 <HR> tag is a singular tag means there is no end tag .

5|Page
 A web page can be divided into separate sections by using <HR> tag.
 This tag is mostly used for decorative purposes.
 <HR> tag has several optional attributes such as COLOR , SIZE , WIDTH ,
ALIGN ,etc.
 One can change the color of Horizontal line using COLOR attribute .You can
also set the thickness of line using SIZE attribute , Value of SIZE attribute
should be mention in pixel. WIDTH attribute specifies span of line ,that value
either in Pixel or in %.
 ALIGN attribute has 3 values LEFT , RIGHT and CENTER. The default value
is CENTER.
EX. :-
<HR COLOR=”Red” SIZE=”5” WIDTH=”60%” align=”Left”>

Above code will display horizontal line of red color with 5 pixel thickness and
span over 60% across browser’s window and start line from left margin.

Heading or <H1>….<H6> Tag :-


 In HTML , There are six levels of Heading such as <H1> , <H2> , <H3> ,
<H4> , <H5> and <H6>.
 <H1> tag is used to create Highest level of Heading whereas <H6>tag is used
to create lowest level of Heading.
 The first level of heading is displayed in larger , bolder than that of low level
of heading.
 Heading Tags <H1>….<H6> has one optional attribute. i.e., ALIGN
It has 4 Values such as LEFT , RIGHT , CENTER and JUSTIFY.

Ex :- <H1> COMPUTER SCIENCE </H1>


<H2> COMPUTER SCIENCE </H2>
<H3> COMPUTER SCIENCE </H3>
<H4> COMPUTER SCIENCE </H4>
<H5> COMPUTER SCIENCE </H5>
<H6> COMPUTER SCIENCE </H6>

6|Page
Output will be displayed as :

COMPUTER SCIENCE
COMPUTER SCIENCE
COMPUTER SCIENCE
COMPUTER SCIENCE
COMPUTER SCIENCE
COMPUTER SCIENCE
<B> Tag :-
 <B> is bold tag .
 <B> is a paired tag . <B> tag has end tag </B>.
 The text appearing between start tag <B> and end tag </B> will be displayed
in Bold letter.
Ex. :- I like </B> Nagpur City </B> .
O/P :- I like Nagpur City .
<I> Tag :-
 <I> is bold tag .
 <I> is a paired tag . <I> tag has end tag </I>.
 The text appearing between start tag <I> and end tag </I> will be displayed in
Itallics.
Ex. :- I like </I> Nagpur City </I> .
O/P :- I like Nagpur City .
<U> Tag :-
 <U> is bold tag .
 <U> is a paired tag . <U> tag has end tag </U>.
 The text appearing between start tag <U> and end tag </U> will be
underlined.
Ex. :- I like </U> Nagpur City </U> .
O/P :- I like Nagpur City .
<PRE> Tag :-
 <PRE> Tag is used to preformat the text. The text appearing between <PRE>
and </PRE> tag is displayed in monospace form.
 This tag is used to position the character.

7|Page
 This tag displays the text in exactly same format as given in source code of
HTML document .
Ex. :-
<PRE> Roll No Name Percentage
101 ABC 83.67 % </PRE>

The output of above code is :-

Roll No Name Percentage


101 ABC 83.67 %

In above example, The text format used in <PRE> tag will be display as it is .
.
<ADDRESS> Tag :-
 <Address> tag displays web page information such as URL ( Web address ) ,
Author Name , Date of last revision ,etc and E-mail address initalics.
 The text in <Address> tag is recognized by search engine as your address
information.
Ex. :-
E-mail Address : <address> [email protected]
The above code will be displayed as
E-mail address :
[email protected]

What is <EM> tag ? Difference between <EM> and <I> tag .


 <EM> is emphasis tag. The text appearing between start tag <EM> and end
tag </EM> will be displayed in Italics. This tag emphasize the text.
 Like <I> tag ,<EM> tag also displayed text in Italics but main difference
between <EM> and <I> tag is that text to speech browser gives spoken
emphasis to text within <EM> and </EM> tag while no such emphasis given
to text within <I> and </I> tag.
Ex. :-
You <EM> must </EM> reach there on time .
O/P :- You must reach there on time.

8|Page
What is <STRONG > tag ? Difference between <STRONG> and <B> tag .
 <STRONG> is strong tag. The text appearing between start tag <STRONG>
and end tag </STRONG> will be displayed in Bold.
 Like <B> tag ,<STRONG> tag also displayed text in BOLD but main
difference between <STRONG> and <B> tag is that text to speech browser
gives strident pronunciation to text within <STRONG> and </STRONG> tag
while no such emphasis given to text within <B> and </B> tag.
Ex. :-
You <STRONG> must </STRONG> crack this exam.
O/P :- You must crack this exam.

What are diffrerent type of list ? Explain with example .


There are 3 different types of list in HTML – Unordered List , Ordered List and
Definition List.
1) Unordered List ( <UL> Tag ) :-
 Unordered list is simplest form of list . It consist of several list items
and each list items preceded with one symbol. That symbol is called
Bullets. So Unoredered List is also called as Bulleted List.
 Unoredered list is represented in HTML with <UL> Tag.
 <UL> tag is used to start the Unoredered list and </UL> tag is used to
end Unordered list. Every list item in an unordered list is represented
using <LI> tag.
 Unoredered list has 3 different types of Bullet such as Disc ( ) , Circle
( ) and Square ( ). Default Bullet is Disc ( ).
Ex. :-
<UL>
<LI> Nagpur</LI>
<LI> Pune </LI>
<LI> Akola </LI>
</UL>

The above code will be displayed as :

 Nagpur
 Pune
 Akola

9|Page
In above example , each list item is preceded by Disc bullet . To change bullet type
we can use TYPE attribute of <UL> tag.

Ex. :- <UL TYPE=”CIRCLE”> or <UL TYPE=”SQUARE”>

2) Ordered List ( <OL> Tag ) :-


 Ordered list is the list of items but each list item preceded with some number.
 Ordered list in HTML created using <OL> tag and ends with </OL> tag.
 Ordered list can be preceded by Arabic numerals ( 1,2,3… ) , Upper case
letters ( A,B,C,…) , Lower case letters ( a,b,c…) and Roman numerals ( I , II,
III,….. ) or ( i,ii,iii,… ). Default numbering system used in <OL> is 1,2,3…..
 To use other numerals we can use TYPE attribute of <OL> tag :
TYPE = “ 1” ( Arabic numbers )
TYPE=”a” ( Lower case letter )
TYPE=”A” ( Upper case letter )
TYPE=”I” ( Upper case Roman numbers )
TYPE=”i” ( Lower case Roman numbers )
 To change the staring number , we can use START attribute of <OL> tag
Ex. :- <OL Start=”6” > would start ordered list numbering from 6
instead of 1.
 To change the numbering of any list item between the list we can use VALUE
attribute of <LI> tag.

Ex. :- <OL Type=”i” start=”4”>


<LI> India </LI>
<LI Value=”9”> US </LI>
<LI> China </LI>
</OL>

Will be displayed as

iv India
ix US
x China

3) Definition List ( <DL> tag ) :-


 Definition List is created using <DL> tag and Ends using End tag </DL>.
 Definition list consist of Definition Term <DT>and Definition Description
<DD> .
 This list is rendered without bullets.
Ex. :- <DL>
<DT> Monitor </DT>
<DD> Monitor is an Output device </DD>
<DT> Mouse </DT>
<DD>Mouse is an Input Device </DD>

</DL>

10 | P a g e
Output of above code will be displayed as :

Monitor
Monitor is an Output device
Mouse
Mouse is an Input Device

<A> Tag :-

 <A> tag is Anchor tag . It is used to create hyperlink.


 <A> tag is paired tag. The text or image placed between <A> and </A> tag
becomes link to another page.
 Link points to different files on web.
 Text within <A> tag will be displayed in different color and underlined.
 The link is clickable in graphical browser
 <A> tag can have some attributes such as NAME , HREF , etc.
 HREF attribute of <A> tag can specify URL of web page .It refers to
hypertext reference.

Ex. :- Link to <A href=”1.html”> First Page </A>

The above code output will be displayed as :

Link to First Page

In this Example , First Page enclosed within <A> and </A> tag becomes
hyperlink. It is clickable word. After cick on it it will redirect you to the URL of
web page given in HREF attribute of <A> tag i.e., Page 1.html.

< SUB> tag :-

 <SUB> tag is subscript tag.


 The text enclosed within <SUB> and </SUB> tag is displayed in subscript
form.
 It is bit lower than normal text.
 This is useful in Chemical formulae.

Ex. :- H <sub> 2 </sub> 0

The O/P will be displayed as : H 2 0

< SUP> tag :-

 <SUP> tag is superscript tag.


 The text enclosed within <SUP> and </SUP> tag is displayed in superscript
form.
 It is bit higher than normal text.
 This is useful in Mathematical formulae.
11 | P a g e
Ex. :- E=mc<sup> 2</sup>

The O/P will be displayed as : E=mc2

< FONT> tag :-

 <Font> is font tag. It is used to change the Color , size and type of the font .
 <FONT> tag has 3 different optional attribute which can change the behavior
of the text enclosed between <Font> and </Font> tag.
 COLOR , SIZE AND FACE are the attributes of <FONT> tag.
 The SIZE attribute can be specified in absolute or relative values ranging from
1 to 7.SIZE=”7” is the largest size and SIZE=”1” is lowest size. You can also
specified size in relative by putting a plus or minus sign before the number
will change the font size relative to the current size of text.
For Example :
Absolute : <Font Size=”5”>
Relative : <Font Size=”+2”>
 Value of COLOR attribute of <FONT> tag can be specified as color name or
you may also specify six digit RGB Code.
 The FACE attribute specifies typeface that you would like to use for the text.

Ex. :- I Like <Font Size=”7”> Orange City </Font>

This would display as : I Like Orange City.

<BIG> Tag :-

 <BIG> is Big tag.


 The text enclosed within <BIG> and </BIG> is displayed in larger font than
current font size.
 <BIG> tag has same effect as <Font size=”+1”>
 If the Current size of Font is largest then <BIG> tag will be ignored.

Ex. : <Font size=”3”> I Like <BIG> Nagpur</BIG> City.

The Output of above code would be :

I Like Nagpur City .

In above example , Current size of Font is 3. <BIG> tag applied over Nagpur will

display in One font size larger than current font size 3.

<SMALL> Tag :-

 <SMALL> is small tag.

12 | P a g e
 The text enclosed within <SMALL> and </SMALL> is displayed in smaller
font than current font size.
 <SMALL> tag has same effect as <Font size=”-1”>
 If the Current size of Font is smallest then <SMALL> tag will be ignored.

Ex. : <Font size=”3”> I Like Nagpur <small> City</small>.

The Output of above code would be :

I Like Nagpur City .

In above example , Current size of Font is 3. <SMALL> tag applied over City will

display in One font size smaller than current font size 3.

<STRIKE> tag :-

 <STRIKE> is a strike tag.


 The text enclosed within <Strike> and </Strike> tag or <S> and </S> tag
would have a line drawn through middle of text.

Ex. – Missing word <Strike> Pink City </Strike>

The output would be displayed as

Missing word Pink City

<MARQUEE> Tag :-

 This is Marquee tag used to scrolling the text and image on screen.
 The text written between <Marquee> and </Marquee> tag will scroll on screen in
horizontal line.
 There are several attributes of <Marquee> tag i.e., BGCOLOR ,
BEHAVIOR,DIRECTION,HEIGHT and WIDTH
 This is used to scroll the news or position of companies in stock market.

Ex. :- <Marquee> Orange City </Marquee>

In above example the text “Orange City “ would scroll horizontally across screen.

<LI> Tag :-

 <LI> is List item tag.


 Each list is collection of several list items. Each list item represented using <LI> tag.

13 | P a g e
 <LI> tag can be used inside <UL> and <OL> tag to show unordered and ordered list
item.

Ex. :- <UL>
<LI> Nagpur</LI>
<LI> Pune </LI>
<LI> Akola </LI>
</UL>

The above code will be displayed as :

 Nagpur
 Pune
 Akola

List any three types of hyperlinks with suitable example.

In HTML , Hyperlink can be created by using <A> Anchor tag. Any text or image
enclosed between <A> and </A> tag would become Hyperlink. Hyperlink displayed by
browser in different color and underlined. Hyperlink is clickable word .On clicking Hyperlink
it would redirect to some other web page whose address is in HREF attribute of <A> tag.

1. Link to page on world wide web :-


<A HREF=http://www.google.co.in> Go TO Google </A>
Here “GO TO Google” is hypertext which link to website of Google after clicking on
hypertext.
2. Link to image by image as a link :
<A href=”India.jpg”><Img src=”indiasmall.jpg”> </A>
Here, Image named as indiasmall.jpg is hypertext link to image file located on same
directory.
3. Link to document located on different directory :-
< A Href=”C:\ program\data.html”> Click here </A>
Here, By clicking on “ Click Here” it would link to page which path URL is in HREF
attribute of <A> tag.
4. Link within same page :
<A Name=”step2”>Same page link</A>
Here, By using Name attribute of <A> tag ,you can marked this area as label named
as step2.

< A Href=”#step2”> Link within same page </A>


On clicking “ Link within Same page “ hyperlink it will jump to label step2.

<IMG> tag :-

 <IMG> tag is singular tag which is used to insert an image.


 There are two types of images :
i) Inline Image :

14 | P a g e
It occur in the middle of line of text. If the image is larger one , then
line becomes very tall.
ii) Floating image :-
It cause text to wrap around an image. The paragraph will flow around
image for several lines.if image is large.
 Generally, SRC and ALT attribute are always used with <IMG> tag. SRC
attribute specifies the path of an image file. For any browser that is not
displaying an images , the alternate text in ALT attribute is displayed instead
of an image.
 For Inline image , ALIGN attribute of <IMG> tag has three attribute values
TOP , MIDDLE , BOTTOM.
 For Floating image , there are two attribute values which are LEFT and
RIGHT.
 To adjust the SIZE of an image there are two attributes HEIGHT and WIDTH.
 BORDER attribute will displays Border around an image.

Ex. : <IMG SRC=”Mickey.jpg” Border=”1” Height=”300” Width=”400”>

Above code will insert an image named as Mickey.jpg with border around it has
height is 300 pixel and width is 400 pixel.

<Table> Tag and its attribute :-

 With table, you can present data organized in rows and columns.
 Table can be created in HTML using <TABLE> and </TABLE> tag.
 Table consists of rows and columns.
 The rows are first created using <TR> tag and then cells are inserted from Left
to Right.
 Cell can consists of Table Heading or Table Data.
 Table Heading can be inserted in cell using <TH> and </TH> Tag.
 Table Data can be inserted in cell using <TD> and </TD> tag.
 <Table> tag has several optional attributes :
BORDER : BORDER attribute is used to draw an outline around table.By
Default, Table has no border.

Cellspacing :- Create space between each adjacent cells.

Cellpadding :- Decides the spacing between Cell Content and Cell Border.

Width :- Define how wide your table will appear across width of

screen. Value of width attribute may be in pixel or in %

BGCOLOR : It sets the background Color of Table only.

Bordercolor : It gives the border color of Table.

15 | P a g e
Align : Decide the alignment of Table . Default table
alignment is Left.

<CAPTION> Tag :-
 <Caption> tag is Paired tag , used to give caption or title to Table either on top
or below the table.
 Caption of Table must be enclosed between <Caption> and </Caption> Tag.
 <CAPTION> Tag has one attribute i.e., ALIGN which has two values TOP
and Bottom.
 Caption always displayed outside the table’s Border.

Ex. : <Caption Align=”Bottom”> Time-Table </Caption>

<TR> Tag :-
 <TR> is Table row tag.It is used to insert one row in a Table.
 Row in a table starts with Start Tag <TR> and ends with </TR>
 Table row must consist of atleast one Table Heading or one Table data.
 Attribute of <TR> tag are BGCOLOR , ALIGN and VALIGN.
ALIGN : This attribute specifies the horizontal alignment of
row.Value of ALIGN attribute is LEFT , RIGHT and CENTER.Default
alignment is Left.

VALIGN :- It Specifies the vertical alignment of each cells in Table


row.Value of VALIGN attribute is TOP,MIDDLE and
BOTTOM. Default value is Middle.
BGCOLOR :- Specifies the Background color of Table row.

<TH> Tag :-

 <TH> is table heading tag.The Start tag is <TH> and End tag is </TH>
 This tag is used to represent individual column heading of a table.
 By Default text in this cell is Bold and Centered.
 It has ALIGN , VALIGN and BGCOLOR attributes.
 Rowspan and colspan are the special attribute used with <TH> tag.These attributes
used merge the cell with another cell.

Ex. : <TH rowspan=”2” > Name </TH>

<TD> Tag :-
 <TD> is table data tag. The start tag is <TD> and End tag is </TD>
 <TD> Tag is used to insert table data in each individual cell.
 The number of cells in a rows determines number of columns .
 By Default, Table Data in a cell is aligned left horizontally and centered vertically.

16 | P a g e
 It has ALIGN , VALIGN and BGCOLOR attributes.
 Rowspan and colspan are the special attribute used with <TH> tag.These attributes
used merge the cell with another cell.

Ex. :- <TD colspan=”2”> India </TD>

17 | P a g e

You might also like