Scribd
Upload
129 views

Unit Ii: Advanced Concepts in HTML

The document discusses HTML frames and iframes. It explains that frames divide the browser window into multiple sections that can each load a separate HTML document. Framesets organize frames into rows and columns. The <frameset> tag is used instead of <body> to create frames, with the rows and cols attributes defining the frame layout. The <frame> tag indicates each frame and defines the HTML document it will load. Inline frames (<iframe>) can embed another document within the current one and appear anywhere, while <frameset> divides the entire browser window. Attributes like src, width, and height are used to control frames and iframes.

Uploaded by

Pratibha Bahuguna
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
129 views

Unit Ii: Advanced Concepts in HTML

The document discusses HTML frames and iframes. It explains that frames divide the browser window into multiple sections that can each load a separate HTML document. Framesets organize frames into rows and columns. The <frameset> tag is used instead of <body> to create frames, with the rows and cols attributes defining the frame layout. The <frame> tag indicates each frame and defines the HTML document it will load. Inline frames (<iframe>) can embed another document within the current one and appear anywhere, while <frameset> divides the entire browser window. Attributes like src, width, and height are used to control frames and iframes.

Uploaded by

Pratibha Bahuguna
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 26

UNIT II

ADVANCED CONCEPTS IN HTML

LOVELY PROFESSIONAL UNIVERSITY 1


Frames
 HTML frames are used to divide your browser window into multiple sections where each
section can load a separate HTML document.
 A collection of frames in the browser window is known as a frameset. The window is divided
into frames in a similar way the tables are organized: into rows and columns.
 Creating Frames
 To use frames on a page we use <frameset> tag instead of <body> tag.
 The <frameset> tag defines, how to divide the window into frames.
 The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines
vertical frames.
 Each frame is indicated by <frame> tag and it defines which HTML document shall open
into the frame.

LOVELY PROFESSIONAL UNIVERSITY 2


Disadvantages of Frames

•Some smaller devices cannot cope with frames often because their screen is not big
enough to be divided up.
•Sometimes your page will be displayed differently on different computers due to different
screen resolution.
•The browser's back button might not work as the user hopes.
•There are still few browsers that do not support frame technology.

LOVELY PROFESSIONAL UNIVERSITY 3


Creating Frames

To use frames on a page we use <frameset> tag instead of <body> tag.
 The <frameset> tag defines, how to divide the window into frames.
 The rows attribute of <frameset> tag defines horizontal frames and cols attribute
defines vertical frames.
 Each frame is indicated by <frame> tag and it defines which HTML document shall
open into the frame.

LOVELY PROFESSIONAL UNIVERSITY 4


The example to create three
horizontal frames
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />

<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>

LOVELY PROFESSIONAL UNIVERSITY 5


Example
<frameset cols = "25%,50%,25%">
<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>

LOVELY PROFESSIONAL UNIVERSITY 6


Question
What will happen if you fail to follow a "best practice"?

A. The computer will complain

B. The browser will loudly complain

C. Experienced developers will complain

D. The browser will quietly complain

LOVELY PROFESSIONAL UNIVERSITY 7


Question
Which of the following is not used to create a Web page?

A. A simple text editor


B. An advanced HTML aware editor
C. A Fortran compiler
D. A gui based tool

LOVELY PROFESSIONAL UNIVERSITY 8


The <frameset> Tag Attributes

 Cols
 Rows
 Border
 Frameborder
 framespacing

LOVELY PROFESSIONAL UNIVERSITY 9


The <frame> Tag Attributes

Src
Name
Frameborder
Marginwidth
Marginheight
Norsize
Scrolling
longdesc

LOVELY PROFESSIONAL UNIVERSITY 10


Frame's name and target attributes

◦ <frameset cols = "200, *">


◦ <frame src = "/html/menu.htm" name = "menu_page" />
◦ <frame src = "/html/main.htm" name = "main_page" />
◦
◦ <noframes>
◦ <body>Your browser does not support frames.</body>
◦ </noframes>
◦ </frameset>

LOVELY PROFESSIONAL UNIVERSITY 11


Define a frameset with two columns:
<FRAMESET COLS="*,*">
<FRAME SRC="leftmost.html" NAME=left>
<FRAME NAME=right>
</FRAMESET>

left Right

LOVELY PROFESSIONAL UNIVERSITY 12


Cont…
<FRAMESET ROWS="25%,75%">
<FRAME SRC="top.html" NAME=topright> Top Right
<FRAME SRC="bottom.html" NAME=bottomright>
</FRAMESET>
Bottom Right
<FRAMESET COLS="*,*">
<FRAME SRC="leftmost.html" NAME=left>
<FRAMESET ROWS="25%,75%">
<FRAME SRC="top.html" NAME=topright>
<FRAME SRC="bottom.html" NAME=bottomright> Top
</FRAMESET>
Left
</FRAMESET>
Bottom

LOVELY PROFESSIONAL UNIVERSITY 13


Question
Which amongst the following is the attribute that is used to add styles to an element in
HTML such as color, font, and so on?

A. Dir

B. Style

C. Color

D. None of the above

LOVELY PROFESSIONAL UNIVERSITY 14


HTML tag <iframe>
 The <iframe> tag is not somehow related to <frameset> tag, instead, it can appear anywhere in your
document.
 The <iframe> tag defines a rectangular region within the document in which the browser can display a
separate document, including scrollbars and borders.
 An inline frame is used to embed another document within the current HTML document.
 The src attribute is used to specify the URL of the document that occupies the inline frame.
<body>
<p>Document content goes here...</p>
<iframe src = "/html/menu.htm" width = "555" height = "200">
Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here...</p>
</body>

LOVELY PROFESSIONAL UNIVERSITY 15


Question
What is <iframe> tag used for?

A. To display a web page within a web page.

B. To specify an inline frame.

C. Both (a) and (b)

D. None of the above

LOVELY PROFESSIONAL UNIVERSITY 16


Question
Select the correct syntax.

A)<iframe src="iframe.htm" width="200" height="200"> </iframe>

B) <frame src="iframe.htm" width="200" height="200">

C) <iframe src="iframe.htm" width="200" height="200">

D) None of the above

LOVELY PROFESSIONAL UNIVERSITY 17


HTML div tag
HTML <div> tag is used to divide the web page into different divisions or parts. The <div> tag
basically acts as a container for other HTML elements.
The <div> tag is used for grouping the HTML elements into sections on a webpage.
You can also apply CSS(cascading Style sheets) to the elements that are grouped using the <div>
tag.
The <div> tag should not be used inside <p> tag, although you can use it inside the paragraph
tag, if in a paragraph you want to divide the content into different parts.
Also, this is a block-level element.
The <div> tag is a tag which has no specific styling of its own other than display:block; because it
is block level element, which means two <div> tags will not be displayed inline,

LOVELY PROFESSIONAL UNIVERSITY 18


HTML <div> Tag - Syntax and
Usage

It requires both opening tag (<div>) as well as closing tag(</div>).

Syntax
<div>
…… Content here……
</div>

LOVELY PROFESSIONAL UNIVERSITY 19


Example program
<div class="header">This is header</div>
<div class="body">
<div class="sidebar">Sidebar</div>
<div class="main-body">Main Body</div>
</div>
<div class="footer">This is footer</div>

LOVELY PROFESSIONAL UNIVERSITY 20


Example program

<!DOCTYPE>
<html>
<body>
<div style="border:1px solid pink;padding:20px;font-size:20px">
<p>Welcome to lpu.com, Here you get tutorials on latest technologies.</p>
<p>This is second paragraph</p>
</div>
</body>
</html>

LOVELY PROFESSIONAL UNIVERSITY 21


Difference between HTML div tag and
span tag
div tag span tag

HTML div is a block element. HTML span is an inline element

HTML div element is used to wrap large HTML span element is used to wrap small
sections of elements. portion of texts, image etc.

LOVELY PROFESSIONAL UNIVERSITY 22


HTML <div> Tag
Attributes

Attributes
 id
 Class
 style

LOVELY PROFESSIONAL UNIVERSITY 23


Question
Can we use div tag in form tag?
A) True
B) Flase

LOVELY PROFESSIONAL UNIVERSITY 24


What will be the code?

LOVELY PROFESSIONAL UNIVERSITY 25


HTML div example: Login Form

LOVELY PROFESSIONAL UNIVERSITY 26

You might also like