Monday, 8 May 2017

Lesson No.1 Web Publishing - Frames Practical



HTML - Frames Practical Practice
We will learn dividing the browser window in different ways.
Step 1:  First Create these four web documents and save in a folder.







Step 2:  Now create the frame file which will contain the <frameset> and <frame> tags and save it with the name frame.html. The frame file will not contain the <body> tag instead <frameset> tag.

Example 1: Dividing the window equally into two horizontal frames.
(for creating horizontal frames, we have to use  rows attribute in the frameset tag and specify the value 50% for each frame)


 Example 2: Dividing the window into three horizontal frames with middle frame larger.
(for creating horizontal frames, we have to use  rows attribute in the frameset tag and specify the value 50% for middle frame, 25% for top frame and * symbol for the third frame (* stands for relative value))





Example 3: Dividing the window into three equal vertical frames.
(for creating horizontal frames, we have to use  cols attribute in the frameset tag and specify the value *  relative value)







Example 4: Dividing the window into two horizontal frames and then the bottom frame again into two vertical sections.
(for again dividing the frame we have to use nested frameset tags)
First we will divide the window into two frames. And then the bottom frame vertically into two sections.








Example 5: Dividing the window into four frames
(for again dividing the frame we have to use nested frameset tags)
First we will divide the window into two frames. And then the first  frame vertically into two sections and same way bottom frame vertically into two sections.






Linking Frames
In linking there is menu/links on the left side of browser and the content is displayed on the right side while clicking on links.



Example: Linking websites using Frames.


Here we will create two files

1) frameslink.html  - containing <frameset> tags, We will name the frames as “left” and “right”. 
 

2) link.html – containing links to websites, in <a> tag use target attribute and specify the second frame’s name i.e. “right”

framelinks.html



















link.html





















Output:




























Lesson No.1 Web Publishing - Frames




Web Publishing – Creation of web sites/web pages and storing them on Web servers on Internet for viewing to public.

 – It is a high configuration computer on Internet that stores web sites and serves web pages to clients on request.

Web Browser – It is a software program used to browse web pages. E.g Chrome, IE, Opera, Netscape navigator, Mozilla Firefox

Web site – It is a collection of web pages on a particular subject e.g. www.nasa.gov

Homepage – The first web page that is displayed when you visit a website.






FRAMES
It is used to divide the browser window into several parts through which we can see more than one web page at a time.
Each HTML document is called frame.

To create frames tags used are:
<frameset>
<frame>

E.g.
<HTML>
     <HEAD>
            <TITLE>frame example</TITLE>
     </HEAD>
    
   <frameset  rows="25%,50%,25%">
          <frame src="web1.htm">
         <frame src="web2.htm">        
         <frame src="web3.htm">
    </frameset>

</HTML>

About <frameset> tag
  •  <frameset> tag is a container tag for defining frames.
  •  It replaces the <body> tag in frameset documents
  •  It defines how to divide the window into frames.
  •  Each frameset defines a set of rows or columns.
  •  To divide screen horizontally we use rows.
  •  To divide screen vertically we use cols
  •  The rows/cols values indicate the amount of screen area, each row/column will occupy 



Attributes of frameset tag

i) Rows  -  It divides the screen into horizontal frames.

ii) Cols  - It divides the screen into vertical frames.



Values of area can be given in % or pixels or by relative value using  * (asterisk) symbol.


About <frame> tag


  •  It is used to create frame within frameset.
  •  It defines what HTML document to put into the frame.


Attributes of <frame>
Name – assigns a name to the frame.

Src – specifies the html page you want to display.

Frameborder  - specifies the border around frame. By default value is 1.  0 value for no border.

Marginwidth – sets left an right margins.

Marginheight – sets top and bottom margins.

Noresize - This attribute prevents the user from resizing the frame.
Scrolling – specifies whether to display scrollbar. It can have one of the three values - YES, NO, AUTO.


<noframes> tag
The <noframes> tag is a fallback tag for browsers that do not support frames. It can contain all the HTML elements that you can find inside the <body> element of a normal HTML page.


The <noframes> element can be used to link to a non-frameset version of the web site or to display a message to users that frames are required.

The <noframes> element goes inside the <frameset> element.

Example:
<html>
<head>
<title>HTML noframes Tag</title>
</head>
<body>
    <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>
</body>
</html>


<iframe> tag 

An inline frame is a frame that is displayed in a box within a web page.
<iframe> tag is used to create inline frame.  The inline frame can display images or web pages within it.

Attributes :

Attribute
Value
Description
src
URL
Specifies the address of the document to embed in the <iframe>
align
Left  / right  / top
middle / bottom
Specifies the alignment of an <iframe> according to surrounding elements
frameborder
1  /  0
Specifies whether or not to display a border around an <iframe>
height
pixels
Specifies the height of an <iframe>
longdesc
URL
Specifies a page that contains a long description of the content of an <iframe>
marginheight
pixels
Specifies the top and bottom margins of the content of an <iframe>
marginwidth
pixels
Specifies the left and right margins of the content of an <iframe>
name
text
Specifies the name of an <iframe>
scrolling
Yes /no /auto
Specifies whether or not to display scrollbars in an <iframe>
width
pixels
Specifies the width of an <iframe>

Target  attribute used in <a> tag 

Magic target names are target names that will open the link in different frames/window.
Target="_self"      -  opens the page in same window
Target="_blank"   -     opens the page in new blank Window.
Target="_top"       -  opens the page in top frame.
Target="_parent" -      opens the page in parent frame.
 

Bitcoins