#frameset tag tutorial | Explore Tumblr posts and blogs

1sthootowl-blog · 5 years ago

Text

LET US START AT THE VERY BEGINNING.

One of the most off-putting parts of computer programming is the fact that when an expert in this field writes a tutorial, he or she tends to forget that the person they are writing the tutorial for may have no knowledge of the subject what so ever. This shortsightedness has put many potentially excellent programmers off from ever reaching their potential. Although the language used obviously does make sense, to the novice programmer this language needs watering down to make the whole process easier to understand, there are many words that are used to describe an action, that to the uninitiated means nothing at all and should be minutely broken down to make sure no one gets left behind, and scratching their head.

This part of this post I shall explain how to layout your most important part of your code and that is the hypertext markup language (html for short). As this name suggests, learning html is just the same as learning to write in another language but with the added advantage that your computer does the speaking for you. To anyone who has already done a little bit of coding this next part should be obvious to you, and you may wish to skip this part. Below is a piece of code you will need to start you off, underneath the code, I shall explain each line so you know exactly what each line does in layman terms.

01 <!DOCTYPEhtml> 02 <html lang="en"> 03 <head> 04 <meta charset UTF-8 05 <title>Your Title Goes Here-----</title> 06 Your Resources goes here----- 07 <style> 08 Your Css Styling Goes Here----- 09 </style> 10 </head> 11 <body> 12 Your Html code Goes Here----- 13 <script> 14 Your Javascript / Jquery Goes Here----- 15 </script> 17 </body> 18 </html>

The DOCTYPE declaration is shorthand for document type declaration is required for the first line of any html or xhtml document. The web browser is instructed which type of html language your web page is written in. This ensures that all of the different web browsers parse the web page in the same way.

Doctype syntax for HTML5 and beyond:

<!DOCTYPE html>

Doctype syntax for strict HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.1sthootowl.com/TR/html4/strict.dtd">

Doctype syntax for transitional HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.1sthootowl.com/TR/html4/loose.dtd">

Doctype syntax for frameset HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.1sthootowl.com/TR/html4/frameset.dtd">

These examples above will be explained later as at the beginning of your programming learning this will only confuse you at a time when this knowledge is unnecessary as for now we will use <!doctype html>.

The html tag: Always use lang attribute with the html tag to specify the default language of the text in the page. When the page contains content in another language, add a language attribute to an element surrounding that content.

The head tag: The head tag defines where your cascading style sheets (CSS for short), will be held. Also, other code resources will be held in the head. Resources will be explained later as they are required.

The style tag defines where your css code starts and finishes <style> defines the start of your css code and </style> defines the end of your css code, with your css code sandwiched between the two tags.

The close head tag (</head>): This tag closes your head.

The body tag: The body tag opens the main part of your program and this is where your html code lives as well as your javascript and jquery. Within the body and the close body tags (<body></body>) are the script and close script tags (<script></script>), it is between these two tags where your javascript and jquery live. All of this will become more apparent as you follow all the examples I will show you in due course.

1 note · View note

interviewclassroom-blog · 6 years ago

Link

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.

In HTML, frames enable you present multiple HTML documents within the same window. For example, you can have a left frame for navigation and a right frame for the main content.

Frames are achieved by creating a frameset page, and defining each frame from within that page. This frameset page doesn’t actually contain any content – just a reference to each frame. The HTML <frame> tag is used to specify each frame within the frameset. All frame tags are nested with a <frameset> tag.

So, in other words, if you want to create a web page with 2 frames, you would need to create 3 files – 1 file for each frame, and 1 file to specify how they fit together.

HTML frames are no longer recommended by the HTML specification (as of HTML5) due to their poor usability. It is recommended that you use the <iframe> element to create iframes instead.

CREATING FRAMES

Two Column Frameset

HTML Code:

The frameset (frame_example_frameset_1.html):

<html>

<head>

<title>Frameset page<title>

</head>

</frameset>

</html>

The left frame (frame_example_left.html):

<html>

<p>This is the left frame (frame_example_left.html).</p>

</body>

</html>

The right frame (frame_example_right.html):

<html>

<p>This is the right frame (frame_example_right.html).</p>

</body>

</html>

Add a Top Frame

You can do this by “nesting” a frame within another frame.

HTML Code:

The frameset (frame_example_frameset_2.html):

<html>

<head>

<title>Frameset page</title>

</head>

</frameset>

</html>

The top frame (frame_example_top.html):

<html>

<p>This is the Top frame (frame_example_top.html).</p>

</body>

</html>

(The left and right frames don’t change)

Remove the Borders

You can get rid of the borders if you like. Officially, you do this using frameborder="0". I say, officially because this is what the HTML specification specifies. Having said that, different browsers support different attributes, so for maximum browser support, use the frameborder, border, and framespacing attributes.

HTML Code:

The frameset (frame_example_frameset_3.html):

Example

<html>

<head>

<title>Frameset page</title>

</head>

<frameset <b>border=”0″ frameborder=”0″ framespacing=”0″</b> rows=”20%,*”>

</frameset>

</html>

Load Another Frame

Most websites using frames are configured so that clicking a link in one frame loads another frame. A common example of this is having a menu in one frame, and the main body in the other (like our example).

This is achieved using the name attribute. You assign a name to the target frame, then in your links, you specify the name of the target frame using the targetattribute.

Tip: You could use base target="content" at the top of your menu file (assuming all links share the same target frame). This would remove the need to specify a target frame in each individual link.

HTML Code:

The frameset (frame_example_frameset_4.html):

Example

<html>

<head>

<title>Frameset page</title>

</head>

<frame <b>name=”content”</b> src =”/html/tutorial/frame_example_yellow.html” />

</frameset>

</html>

The left frame (frame_example_left_2.html):

<html>

<p>This is the left frame (frame_example_left_2.html).</p>

<p>

<a <b>target=”content”</b> href=”frame_example_yellow.html”>Yellow</a><br />

<a <b>target=”content”</b> href=”frame_example_lime.html”>Lime</a>

</p>

</body>

</html>

The yellow frame (frame_example_yellow.html):

<html>

<p>This is the yellow frame (frame_example_yellow.html).</p>

</body>

</html>

The lime frame (frame_example_lime.html):

<html>

<p>This is the lime frame (frame_example_lime.html).</p>

</body>

</html>

The frame Tag Attribute

The noframe Tag

Sr.NoAttribute & Description

1src This attribute is used to give the file name that should be loaded in the frame. Its value can be any URL. For example, src = “/html/top_frame.htm” will load an HTML file available in html directory.

2name This attribute allows you to give a name to a frame. It is used to indicate which frame a document should be loaded into. This is especially important when you want to create links in one frame that load pages into an another frame, in which case the second frame needs a name to identify itself as the target of the link.

3frameborder This attribute specifies whether or not the borders of that frame are shown; it overrides the value given in the frameborder attribute on the <frameset> tag if one is given, and this can take values either 1 (yes) or 0 (no).

4marginwidth This attribute allows you to specify the width of the space between the left and right of the frame’s borders and the frame’s content. The value is given in pixels. For example marginwidth = “10”.

5marginheight This attribute allows you to specify the height of the space between the top and bottom of the frame’s borders and its contents. The value is given in pixels. For example marginheight = “10”.

6noresize By default, you can resize any frame by clicking and dragging on the borders of a frame. The noresize attribute prevents a user from being able to resize the frame. For example noresize = “noresize”.

7scrolling This attribute controls the appearance of the scrollbars that appear on the frame. This takes values either “yes”, “no” or “auto”. For example scrolling = “no” means it should not have scroll bars.

8longdesc This attribute allows you to provide a link to another page containing a long description of the contents of the frame. For example longdesc = “framedescription.htm”

noframes tag is used if the user’s browser doesn’t support frames. Anything you type in between the noframes tags is displayed in their browser.

HTML Code:

<html>

<head>

<title>Frameset page<title>

</head>

<body>Your browser doesn’t support frames.

Therefore, this is the noframe version of the site.</body>

</noframes></b>

</frameset>

</html>

The target attribute can also take one of the following values –

Sr.NoOption & Description

1_self Loads the page into the current frame.

2_blank Loads a page into a new browser window. Opening a new window.

3_parent Loads the page into the parent window, which in the case of a single frameset is the main browser window.

4_top Loads the page into the browser window, replacing any current frames.

5targetframe Loads the page into a named targetframe.

DISADVANTAGES OF FRAMES

There are few drawbacks with using frames, so it’s never recommended to use frames in your webpages −

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.

#htmlframes #whatishtmlframes #htmlframe

0 notes