<meta>
Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML
document. Metadata will not be displayed on the page, but
will be machine parsable.
Meta elements are typically used to specify page
description, keywords, author of the document, last
modified, and other metadata.
The metadata can be used by browsers (how to display
content or reload page), search engines (keywords), or
other web services
HTML5 introduced a method to let web designers take
control over the viewport (the user's visible area of a web
page), through the <meta> tag
1
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
</head>
2
Tips and Notes
Note: <meta> tags always go inside the
<head> element.
Note: Metadata is always passed as
name/value pairs.
Note: The content attribute MUST be
defined if the name or the http-equiv
attribute is defined. If none of these are
defined, the content attribute CANNOT be
defined.
.
3
Attributes
Attribu Value Description
te.
charse character_ Specifies the character
t set encoding for the HTML
document
conten text Gives the value associated
t with the http-equiv or name
attribute
http- content- Provides an HTTP header for
equiv type the information/value of the
default- content attribute
style
4
refresh
Frames
A frame is a rectangular region within the
browser window that displays a Web page,
alongside other pages in other frames.
First create the contents of each frame as
an ordinary HTML page.
To put them all together, use a special kind
of page called a frameset document.
In an HTML document you will see that
instead of a <BODY> tag, there is a
<FRAMESET> tag. No tags that would
normally be contained in a <BODY> tag
can be within the <FRAMESET> tag.
5
Frameset
The <FRAMESET> tag includes a ROWS attribute,
meaning that the frames should be arranged on
top of each other like the horizontal rows of a table.
If you want your frames to be side-by-side, use a
COLS attribute instead of ROWS.
<FRAMESET ROWS="80,*,80">
means to split the window horizontally into three
frames.
<FRAMESET COLS="80,*,80">
means to split the window vertically into three
frames.
6
<frame> tag
Within the <FRAMESET> and
</FRAMESET> tags, you should have a
<FRAME> tag indicating which HTML
document to display in each frame. (If you
have fewer <FRAME> tags than the
number of frames defined in the
<FRAMESET> tag, any remaining frames
will be left blank.) You don't need to specify
a closing </FRAME> tag.
7
Src property
Include a SRC attribute in each <FRAME>
tag, with the address of the Web page to
load in that frame
You can include any HTML page you want
in a frame
8
Example - I
<FRAMESET COLS="80,*,80">
<frame src=“[Link]">
<frame src=“[Link]">
<frame src=“[Link]">
</frameset>
9
Example - II
<FRAMESET COLS=“20%,50%,30%">
<frame src=“[Link]">
<frame src=“[Link]">
<frame src=“[Link]">
</frameset>
10
Example - III
<FRAMESET COLS=“*,*,*">
<frame src=“[Link]">
<frame src=“[Link]">
<frame src=“[Link]">
</frameset>
11
Linking Between the Frame
Windows
The real fun begins when you give a frame
a name with the <FRAME NAME> attribute.
You can then make any link on the page
change the contents of that frame using
the <A TARGET> attribute.
12
Linking Between the Frame
Windows 2
<FRAME SRC="[Link]" NAME="main">
This displays the [Link] page in that
frame when the page loads, and names the
frame "main."
13
Linking Between the Frame
Windows 3
<a href="[Link]“ target="main">See
us make it.</A>
Include this line in one of the pages being
displayed in frameset. When you will click
on the link above, [Link] will be
displayed in the frame name “main.”
14
Example p1
<frameset cols="20%,*">
<frame src="[Link]">
<frame src="[Link]" name="main">
</frameset>
15
Example p2
<html>
<body>
<a href="[Link]"
target="main">Page1</a><p>
<a href="[Link]"
target="main">Page2</a><p>
<a href="[Link]" target="main">Page3</a><p>
<a href="[Link]" target="main">Page4</a><p>
</body>
</html>
16
Margins, Borders, and
Scrolling
In addition to the NAME attribute, the
<FRAME> tag can take the following
special frame-related attributes:
MARGINWIDTH: Left and right margins of
the frame (in pixels)
MARGINHEIGHT: Top and bottom margins
of the frame (in pixels)
SCROLLING: Display scrollbar for the
frame? ("yes" or "no")
NORESIZE: Don't allow this frame to be
resized by the user
17
Scrolling
Normally, any frame that isn't big enough
to hold all of its contents will have its own
scrollbar(s). If you don't want a particular
frame to ever display scrollbars, you can
put SCROLLING=NO in the frame tag.
Conversely, SCROLLING=YES forces both
horizontal and vertical scrollbars to appear,
whether or not they are needed.
18
Resize
People viewing your frames can ordinarily
resize them by grabbing the frame border
with the mouse and dragging it around. If
you don't want anyone messing with the
size of a frame, put NORESIZE in the
<FRAME> tag.
19
No Borders
If you want borderless frames to show up in
browser, type BORDER=0 in your
<FRAMESET> tag .
20
Example
<FRAMESET COLS="*,*,40%” border=0>
<frame src=“[Link]" name="main"
scrolling="yes" noresize marginheight=10
marginwidth=10>
<frame src=“[Link]">
<frame src=“[Link]">
</frameset>
21
Nested Frames
By nesting one <FRAMESET> within
another, you can create rather complex
frame layouts.
22
EXAMPLE:
<FRAMESET COLS="*,*,*" border=0>
<frame src="[Link]" name="main" scrolling="no" noresize
marginheight=10 marginwidth=10>
<frameset rows="*,*">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
<frame src="[Link]">
</frameset>
23
Supporting Frameless
Browsers
We use <noframes> tag to show text to the
browsers who do not show frames. Example:
<noframes>Sorry, your browser does not
handle frames!</noframes>
This message does not appear to those users
whose browsers support frames.
24
IFRAME
It allows a frame to be embedded in a
regular HTML document. Unlike a document
that contains a FRAMESET, documents with
IFRAME elements follow the standard HTML
document structure.
25
IFRAME 2…
An IFRAME element looks like this:
<iframe src=“[Link]”>
What ever you write here is displayed to
those whose browsers don’t support
iframes.
</iframe>
26
Properties
Align = LEFT | RIGHT | CENTER
FrameBorder (NO | YES | 0 | 1)
Height = n <Where n is amount in pixels>
Width= n <Where n is amount in pixels>
27
Properties 2…
MARGINHEIGHT= n <Where n is amount in
pixels>
MARGINWIDTH= n <Where n is amount in
pixels>
SCROLLING = AUTO | YES | NO
SRC
28
Property Property Description
Name
ALIGN Frame Alignment. It can have any of these
three values: (left, right, or center)
FrameBorder Determines whether a border is drawn
around frame. It can have any of these
values: (0 , No, 1, Yes).
HEIGHT The Height of the Space Reserve for the
frame. The value may be provided in pixels
or %.
29
Property Property Description
Name
WIDTH Width of the Space Reserve for the
frame. The value may be provided in
pixels or %.
SRC URL of the document to be included
in the frame.
SCROLLING Includes a Scrollbar with the frame.
30
Property Property Description
Name
MARGINWIDTH The width of left and right margins
in pixels.
MARGINHEIGHT The height of left and right margins
in pixels.
31
EXAMPLE IFRAME
<html> <body>
This page includes an IFRAME.<p>
<center> <iframe src="[Link]">
If you can see me, then you can’t see iframe.
</iframe> </center>
<p> Did you like this new concept?
</body> </html>
32