SkTech 2022: June 2021

Wednesday, 30 June 2021

Episode 13.2 HTML (Frames)

Personalizing the Frames

While the <FRAMESET> command creates the overall layout of the windows, the <FRAME> command is responsible for the attribution of the content of each window and of the individual characteristics of each one of them. The attributes of the <FRAME> command supersede the attributes of the same name defined by <FRAMESET>.

The <FRAME> Command:-

<FRAME

ALIGN=position

FRAMEBORDER=1 | 0

MARGINHEIGHT=height

MARGINWIDTH=width

NAME=name

NORESIZE

SCROLLING=yes | no

SRC=address>

Where:

ALIGN=position--Adjusts the alignment of the frame or the text.

The values allowed for position are the following:

Top	The text around the frame is aligned with the top of the frame.
Middle	The text around the frame is aligned with the middle of the frame.
Bottom	The text around the frame is aligned with the bottom of the frame.
Left	The frame is aligned to the left, leaving the text to run on its right side.
Right	The frame is aligned to the right, leaving the text to run on its left side.

FRAMEBORDER=0 | 1--Identical to the attribute of the same name of the <FRAMESET> command, it enables or disable the border display for the current frame.

MARGINHEIGHT=height--Specifies the height of the top and bottom margins of the frame in pixels.

MARGINWIDTH=width--Specifies the width of the left and right margins of the frame in pixels.

NAME=name--Attributes a name to the frame so that it can be identified and located to load documents.

NORESIZE--Prevents the user from resizing the frame.

SCROLLING=yes | no--When set to the value No, the frame does not have a scroll bar when the window is resized.

SRC=address--Indicates the name or URL of the document that will be displayed in the frame.

Adjusting the Internal Margins of the Frame

The programmer may create an internal margin for the frame to position the content of the window away from its border. To create a margin at the sides of the window, the MARGINWIDTH option should be used.

To create a margin at the top and at the bottom of the frame, the MARGINHEIGHT attribute should be used. The size of the margin should be specified in pixels.

The next example shows the frame of the E.HTM document with the margins specified at 50 pixels.

FROWCOL4.HTM File:

<html>

<head>

<title>frowcol2.htm</title>

</head>

<frameset rows=50%,50%>

<frameset cols=50%,50%>

<frame src=d.htm>

<frame marginwidth=50 marginheight=50 src=e.htm>

</frameset>

<frame noresize src=f.htm>

</frameset>

</html>

Scroll Bars and Resizing the Frames:-

As standard, the frames have enabled the attributes that allow their resizing and the automatic inclusion of scroll bars when their dimensions become smaller than the content to be displayed. To change these characteristics, you should use the SCROLLING and NORESIZE options.

In the case of SCROLLING, the value No should be attributed to it to disable the scroll bars.

The FROWCOL5.HTM document shows the use of these two attributes. Note that the window displaying the D.HTM document has the SCROLLING=No attribute and that the frame of the F.HTM document has the NORESIZE attribute.

FROWCOL5.HTM File:-

<html>

<head>

<title>frowcol5.htm</title>

</head>

<frameset rows=50%,50% frameborder=0>

<frameset cols=50%,50%>

<frame src=d.htm>

<frame scrolling=no src=d.htm>

<frame src=e.htm>

</frameset>

<frame noresize src=f.htm>

</frameset>

</html>

Upon loading this document using the whole screen, no scrollbars appear. However, when you reduce the size of the window, the scroll bar will appear for the frames, except for the D.HTM document.

Here is what it looks like:

Just like any window in Windows, a frame can be resized by dragging on its border. When the cursor is positioned on the border, it changes shape. If you press the left button of the mouse, you can drag the border to the size desired.

The examples in the following figure shows the E.HTM document being resized:

After dragging the reference line to the place desired, releasing the mouse changes the size of the window.

As the window of document F.HTM has the NORESIZE attribute, the cursor does not change shape when it is moved over its border, thus making its resizing impossible.

Interconnecting Frames

Thus far, you have seen how to create a set of frames to display documents independently of each other. The initial project created and electronic manual using frames so that a permanent index is displayed on the screen while another Windows shows the content of the chapter selected. To execute this project, you need to learn to more items. The first is naming a frame, and the second is how to direct the loading of a document to a specific window. This is easy to understand.

Assuming that the set of frames will be made up of two vertical Windows, we need to create a name for the windows through the <FRAME NAME> commands:

Name of the frame:	Name of the frame:
Menu Command: <frame name="menu">	Texts Command used to create the name: <frame name="menu">

To indicate to the browser the window in which the documents of the chapter should be loaded, we must include in the document containing the links at attribute called TARGET. This option works in both navigator and explorer. An example of this tag is:

<A HREF=x.htm TARGET="texts">Chapter One</A>

It can appear in two places in the code, either in <A HREF> to specify frame that will load the current link or in the <BASE> tag to specify a frame that will load all the links in the current document. This option works well in internet explorer but has no effect in navigator.

<BASE TARGET="window name"> contains the name of the target window. In this case, the command would be:

<BASE TARGET="texts">

and should be included in the menu file. Next, we will detail the creation of this project.

1. Creating the frames Structure:-

This file contains the definition of two Windows, one for the menu and the other for the chapters. The window that will display the chapters will be named "text," and no file will be previously loaded. The window that will contain the main menu is named "menu." In this situation, only the name of the "texts" window needs to be specified.

MENUFRAM.HTM File:-

<html>

<head>

<title>menufram.htm</title>

</head>

<frameset cols=30%,*>

<frame name="menu" src=indcap.htm>

<frame name="texts" src=a.htm>

</frameset>

</html>

2. Creating the Menu Contents:-

The menu file contains the links to the chapters of the manual. You should include in this document the <BASE TARGET> command, which tells the browser where the files linked by the A HREF> command should be loaded. In our example, it tells the browser to load the links to the window called "texts." If this command is omitted, the chapters will be loaded to the same menu window. If you are using navigator, the linked file will be loaded in a new browser window unless you reload a page in the target window. In our case, we preloaded the A.htm file in the MENUFRAM.HTM file.

INDCAP.HTM File:-

<html>

<head>

<title>Main menu</title>

<base target="texts">

</head>

<body bgcolor="#ffffee">

<CENTER>

<h1>Main menu</h1>

<ul>

<li><A HREF=a.htm>Introduction</>

<li><A HREF=b.htm>Chapter 1</>

<li><A HREF=c.htm>Chapter 2</>

<li><A HREF=d.htm>Chapter 3</>

<li><A HREF=e.htm>Chapter 4</>

<li><A HREF=e.htm>Chapter 5</>

</ul>

</center>

</body>

</html>

3. Creating the Chapter Contents:-

The files of the linked chapters have been previously created.

Examine the result of the project upon loading the MENUFRAM.HTM file. Just click on any of the link for the corresponding file to be loaded.

To select another chapter, just click on the corresponding icon.

With this knowledge, you can develop interesting pages. In the rest of this chapter, we will present other techniques to make your page even more sophisticated.

👈Episode 13.1 Episode 13.3👉

Share This Post

Tuesday, 29 June 2021

Episode 13.1 HTML (Frames)

The frames feature, supported by version 2 and higher of navigator and Internet Explorer, allows the programmer to create several HTML pages that can be simultaneously viewed in the browser window. With this feature, the browser window is divided into frames, or Windows, which share the space.

Without the frames feature, to view three different pages, called A.HTM, B.HTM, and C.HTM, the user would have to access these pages individually through an initial page containing a menu, or through specification of its URL.

As an example, we will create a project consisting of an initial menu that serves as an index to access the chapters of an electronic manual. Below is the source code of the four documents:

MENUNORM.HTM Files:

<html>

<head>

<title>Main menu</title>

</head>

<body bgcolor="#ffffee">

<CENTER>

<h1>Main menu</h1>

<ol>

<li><A HREF=a.htm>Introduction</a>

<li><A HREF=a.htm>Chapter 1</a>

<li><A HREF=a.htm>Chapter 2</a>

</ol>

</center>

</body>

</html>

A.HTM File :

<html>

<head>

<title>Introduction</title>

</head>

<body>

<h1>This is the A.HTM document</h1>

<h2>Introduction</h2>

</body>

</html>

B.HTM File :

<html>

<head>

<title></title>

</head>

<body>

<h1>This is the B.HTM document</h1>

<h2>Chapter 1</h2>

</body>

</html>

C.HTM File :

<html>

<head>

<title></title>

</head>

<body>

<h1>This is the C.HTM document</h1>

<h2>Chapter 2</h2>

</body>

</html>

From the main menu, to view any one of the chapters of the manual just click on the corresponding menu item. After the click, the main menu is replaced by the called page. To display the main menu again, use the Return or back browser button.

Examine the following figures (contained in the Frame1 folder of the the htlmadv directory):

Using the frame feature, we can simultaneously display more than one window (frame). In this project, use one of the frames to permanently display the content of the menu page and the other to display the content of the chapters, thus making navigation through the manual easier.

This is what this manual would look like:

Place the main menu in the left frame. After you click on one of the chapters, the right frame displays the contents of the chapter.

How Frames Work

Unlike most of the HTML language features, the use of frames requires some planning. This planning consists of creating the structure of the windows where you specify the number of Windows (frames), the layout on the screen, the width and height of each window, and the content which will be displayed in each one of them. Working with frames requires to stages. In the first, you create the layout of the windows, and in the second, you define their content.

Frame Document

The use of frames requires creation of special HTML document containing All the definition of the windows. Consider it a master document. This document is different from other HTML documents, as it does not use the <BODY> </BODY> commands. In its place, the <FRAMESET> </FRAMESET> commands are used. Within this pair of commands, all the attributes of the windows that will be created are specified. <FRAMESET> defines the overall characteristics of the windows, such as their number and horizontal and vertical layout. Each specified frame will need another command called <FRAME> to define its individual characteristics and, principally, its content.

<FRAMESET> Command

The <FRAMESET> command is of the container type; that is, it must be opened and closed.

Here is the syntax of this command:

<FRAMESET

COLS=size

FRAMEBORDER=1 | 0

FRAMESPACING=value

ROWS=size>........

</FRAMESET>

The attributes of <FRAMESET> are discussed next.

COLS=size :-

The COLS attribute is used to create a document with Windows formatted in columns. The width of each columns of the document is specified here. A standard value may be specified for all the columns, or individual size may be used. The values may be specified in pixels, percentage, or relative size. Below are some examples.

Using values in Pixels:-

<FRAMESET COLS=100,300,200>

Create a document with three Windows, the first being 100 pixels wide, the second 300, and the third 200.

FCOL1.HTM File:

<html>

<head>

<title></title>

</head>

<frameset cols=100,300,200>

<frame src="a.htm">

<frame src="b.htm">

<frame src="c.htm">

</frameset>

</html>

The next figure shows the result of this code:

When a window cannot display all the content, with automatically adds scroll bars to the window.

Using Relative Values:-

To divide the windows evenly over the width of the browser window, the best option is to use the the asterisk for each column.

FCOL2.HTM File:

<html>

<head>

<title></title>

</head>

<frameset cols=*,*,*>

<frame src="a.htm">

<frame src="b.htm">

<frame src="c.htm">

</frameset>

</html>

The next figure shows the result:

To create two columns with the first occupying one-third of the screen and the second the remaining two-thirds, use the following command:

<frameset cols=*,2*>

Load the FCOL3.HTM file to see the effect of this command.

Using Percent Values:-

The third method of determining the width of a column is to specify the values in percentage form, totalling 100%.

<FRAMESET COLS=25%,50%,25%>

The different values format may be combined. For example, to create a frameset with three columns where the first occupies 25% of the screen, the third is 100 pixels wide, and the other occupies the rest, the following command may be used:

<FRAMESET COLS=25%,*,100>

To see the effect of this command, load the FCOL4.HTM file.

ROWS=size:

The ROWS attribute works the same way as the COLS attribute, except it creates the windows horizontally. The above sections that discuss COLS also apply to ROWS.

The files FROW1.HTM, FROW2.HTM, FROW3.HTM and FROW4.HTM are the equivalent of the files FCOL1.HTM to FCOL4.HTM. Below is the source code and the screen displayed by the FROW2.HTM file.

FROW2.HTM File:

<html>

<head>

<title></title>

</head>

<frameset rows=*,*,*>

<frame src="a.htm">

<frame src="b.htm">

<frame src="c.htm">

</frameset>

</html>

Here is the result:

Combining ROWS and COLS:

You can use both ROWS and COLS to create frames. You can create a Window divided into two horizontal frames, in which the first is divided into two columns. To do this, just nest sets of <FRAMESET> commands. The next example shows this application. The first occurrence of the <FRAMESET> command creates to horizontal Windows. The second occurrence divides the first window into two columns, where the A.HTM and B.HTM files are displayed. After the second occurrence of <FRAMESET> is closed, the C.HTM document is specified to occupy the second horizontal window.

FROWCOL1.HTM File:

<html>

<head>

<title></title>

</head>

<frameset rows=50%,50%>

<frameset cols=50%,50%>

<frame src="a.htm">

<frame src="b.htm">

</frameset>

<frame src=c.htm>

</frameset>

</html>

The result is shown next:

FRAMESPACING=value:

The FRAMESPACING attribute changes the spacing between the frames, creating the impression that the window border was increased. However, it only spaces the frames by the number of pixels specified. The FROWCOL2.HTM file is identical to the previous one except that the line of the first <FRAMESET> command was changed to:

<FRAMESET ROWS=50%,50% FRAMESPACING=10>

The result is shown on the next page:

FRAMEBORDER=1 | 0 :-

The FRAMEBORDER attribute defines the border of the frame. As standard, it is 1, which displays the border. If the value 0 is specified, the borders are omitted. The omission of borders creates the illusion of a single window, where there are parts independent of each other. Another interesting effect is changing the background colour of each window, thus dividing the screen into distinct colour areas.

The FROWCOL3.HTM example shows the use of the <FRAMEBORDER=0> attribute to display the contents of the D.HTM, E.HTM, and F.HTM files, which have different background colours.

Examine the source code and notice the effect caused:

FROWCOL3.HTM File:

<html>

<head>

<title>frowcol3.htm</title>

</head>

<frameset rows=50%,50% frameborder=0>

<frameset cols=50%,50%>

<frame src=d.htm>

<frame src=e.htm>

</frameset>

<frame src=f.htm>

</frameset>

</html>

This is the result:

Note that Internet Explorer and navigator leave different spacing between the frames.

Even if the border has been omitted, the resizing of the window will automatically place the scrollbars in the frames affected by the resizing, as shown in the next figure.

👈Episode 12.4 Episode 13.2👉

Share This Post

Monday, 28 June 2021

Episode 10.2 HTML (Colors and Backgrounds)

Backgrounds with Images

Using a coloured background livens up your page. You can go further and use a much more elaborate background through the use of small images saved in the GIF and JPG formats. Instead of using a colour code, you can specify the name of an image file in the BACKGROUND option of the <BODY> command. This image will be spread over the whole page and fill in the screen background. The use of this technique allows you to create an image in an image editor program and use it in your page. For example, you can use your company's logo, the emblem of your soccer team, or your boyfriend's or girlfriend's picture.

Consideration when using images:-

Before starting to use images, you should consider some important points. Be sure to use a small image, as otherwise it will take too long for the browser to execute the fill in. Use images smaller than 10 KB as much as possible.

Try to use images with few colours to avoid making the text difficult to read. Remember that complex images can be unattractive when used as background.

The syntax to specify an image is:

<body background=#"file.gif/jpg">

The next figure shows the Examp11e.htm file, where a small image of a sphere was used for the background.

<html>

<head>

<title>Spain</title>

</head>

<BODY BACKGROUND="sphere.jpg">

<img align=left src="elogos.gif">

<center><h1>Spain</h1></center><p>

The sphere adds and interesting effect, but the text is illegible.

In a case like this, you should either change the text colour to obtain legibility or delete the background.

In the next example (Examp11d.htm), a sand-colour background was used, which looks much better.

In the next example (Examp11h.htm), white text is placed on a background with a blue texture.

You can even use a large image background (Examp11g.htm), taking into consideration the time it will take to load. When an image is specified as background, the screen is initially displayed with the standard grey background and the image is then loaded.

Notice that, although it is pretty, this image makes it difficult to view part of the text. On the CD accompanying this book, there is a series of GIF and JPG files you can use to create your backgrounds.

Recommendations :-

Always choose a background with few tone variation so as not to compromise the viewing of the text. Remember that the major function of a webpage is to transmit information through the text. Don't impede it threw images that add nothing to the information.

Special backgrounds

In the fonts and backgrounds folder on the CD (font-bg), are 11 backgrounds that can add a special touch to your page. Below the several examples of these backgrounds. The document name appears in the browser's address lines.

Spiral notebook :-

Spiral block :-

One more memo pad :-

Continuous form :-

Brick wall :-

Modern background :-

Blank page :-

School notebook :-

Two colors (1) :-

Two colors (2) :-

Creating your own Backgrounds

It is not difficult to create your own backgrounds.

Using Paint Shop Pro :-

One of the most popular capture and drawing programs is Paint Shop Pro. A shareware version is easily obtainable. You can try the version included on the companion CD or try a new version on sites like www.tucows.com or www.shareware.com. After loading the program, click on the file menu and then click on the New option. The following screen appears :

Enter 800 pixels as width to alert users using 800×600 resolution. For height, you may enter any value, even one pixel. In this example, we are using the value 5, which will create an image of less than 2 KB.

After pressing the OK button, a blank window will appear. The next step consists of creating a dividing line that will be used to separate the two screen colours. This line may be made using one of those two colours or yet a third class to further highlight the colour separation.

In the above example, the colour red was used to draw the line, which was the colour selected as the foreground colour.

The next step consists of selecting the colours to be used to fill in the two parts of the figure. In this example, we choose yellow for the left corner and cyan for the right corner.

Now you should fill in the two areas of the figures with the selected colours.

After filling in the two areas, use the File | Save option and the name Coolbg12.gif. See the result of this background in the bg12.htm file.

Your pages will never be the same after you start using backgrounds.

👈Episode 10.1 Episode 11.1👉

Share This Post

SkTech 2022

Pages

Wednesday, 30 June 2021

Episode 13.2 HTML (Frames)

Tuesday, 29 June 2021

Episode 13.1 HTML (Frames)

Monday, 28 June 2021

Episode 10.2 HTML (Colors and Backgrounds)

Featured post

Episode 1 MCQ for Govt. Job/ Private Job/ MNCs

Popular Posts

My Policies

Pages

Wednesday, 30 June 2021

*Episode 13.2* HTML (Frames)

Tuesday, 29 June 2021

*Episode 13.1* HTML (Frames)

Monday, 28 June 2021

*Episode 10.2* HTML (Colors and Backgrounds)

Featured post

*Episode 1* MCQ for Govt. Job/ Private Job/ MNCs

Popular Posts

My Policies

Episode 13.2 HTML (Frames)

Episode 13.1 HTML (Frames)

Episode 10.2 HTML (Colors and Backgrounds)

Episode 1 MCQ for Govt. Job/ Private Job/ MNCs