Sorry for the late post, but here's what you need for tomorrow's computer practical exams.
If you haven't checked out third semester's Form + Table post, here it is.
For the quick revision, please please please refer to the post I made for third semester because this is the next thing after that.
HERE IS THE LINK FOR THE PREVIOUS POST. CLICK THIS.
Okay, so moving on, frames. What are frames? Lets say the webpage is divided into two parts vertically. The one on the left shows you a picture and the one on the right has a form asking you for feedback. Let's get into making frames first, I'll teach you how to insert images during the frames tutorial itself.
First of all, we will make two HTML files that display the text "This is frame one." and "This is frame two."
Let's make the first file and save it as frame1.html:
Now, let's make the second file and save it as frame2.html:
Now that we have the two files ready, we have to make a basic page in which these two files will be seen side-by-side. The page itself needs to have the <frameset> tag. So, let us make the page and save it as frames.html:
Note that all the three files we have made till now need to be in the same folder.
Now, on opening frames.html, the webpage will show two vertical columns which display the contents of the files frame1.html and frame2.html
Now, we can use rows instead of cols in the <frameset> tag to make the border and the frames appear horizontally instead of vertically. Let's try it. Save the file as framesrows.html:
Now, for allotting different areas to different frames, we have to modify the values in the rows or cols attribute. Let's take a look at it:
Next thing, we have to decide what will be the source file of the frame.
For that, after the <frameset> tag, we use the <frame src="filename.extenstion"> tag. Here, the frame attribute tells the browser to make a frame and the src tag determines the source of the file.
As we have inputted two values in the <frameset> tag, we can define only two frames. On inputting more values, we can define more frames. For example, using <frameset cols="10%,80%,10%"> will allow me to use three frames.
Now, you will notice that the border can be selected and moves around to change the size of the frames. In order to make the border stay at one place and not allow the changes in sizes of the frame, we have to use the noresize attribute in the <frameset> tag. The tag will look like <frameset cols="50%,50%" noresize>
The name attribute, which is to be used with the <frame> tag will allow us to give a name to the frame. Remember that names are always defined within "inverted commas". The tag will look like <frame src="frame1.html" name="frame1">
Now, for inserting images, we have to use the <img> tag. It goes like this:
The width and height attributes are optional. They will let you resize your inserted image to the dimensions/values you specify. If we don't use them, the image will be it's orignal size.
Well, this is it for now. These are the basics. If I've missed something and you want to know about it, leave it in the comments below or on facebook. Sorry for not making this post perfect, I'm running less on time. All the best!
If you haven't checked out third semester's Form + Table post, here it is.
For the quick revision, please please please refer to the post I made for third semester because this is the next thing after that.
HERE IS THE LINK FOR THE PREVIOUS POST. CLICK THIS.
Okay, so moving on, frames. What are frames? Lets say the webpage is divided into two parts vertically. The one on the left shows you a picture and the one on the right has a form asking you for feedback. Let's get into making frames first, I'll teach you how to insert images during the frames tutorial itself.
First of all, we will make two HTML files that display the text "This is frame one." and "This is frame two."
Let's make the first file and save it as frame1.html:
<html><head><title>First frame</title></head><body><h1 align="center">This is frame one.</h1></body></html>
Now, let's make the second file and save it as frame2.html:
<html>
<head><title>Second frame</title></head>
<body>
<h1 align="center">This is frame two.</h1>
</body>
</html>
Now that we have the two files ready, we have to make a basic page in which these two files will be seen side-by-side. The page itself needs to have the <frameset> tag. So, let us make the page and save it as frames.html:
<html><head><title>Frames</title></head><frameset cols="50%,50%"><frame src="frame1.html"><frame src="frame2.html"></html>
Note that all the three files we have made till now need to be in the same folder.
Now, on opening frames.html, the webpage will show two vertical columns which display the contents of the files frame1.html and frame2.html
Now, we can use rows instead of cols in the <frameset> tag to make the border and the frames appear horizontally instead of vertically. Let's try it. Save the file as framesrows.html:
On opening the file, we can see that the frames appear horizontally.<html><head><title>Frames</title></head><frameset rows="50%,50%"><frame src="frame1.html"><frame src="frame2.html"></html>
Now, for allotting different areas to different frames, we have to modify the values in the rows or cols attribute. Let's take a look at it:
In the files we have made above, the area allotted is 50-50 i.e. half to both of the frames. For allotting 20% area to frame one and 80% area to frame two, we can use cols="20%,80%" or cols="80%,20%" Note that the areas allotted will be in the sequence the values are written.
For allotting 2/3rd of the webpage to one frame and the remaining to the other, we can write the attribute as cols="2*,*" or if we want to allot 1/3rd to the first frame, it goes like this: cols="*,2*" The area will be decided by the total of asterisks.
Now, if we want to only allot a certain number of pixels to a frame, we can use cols="200,*" or cols="*,200" which will allot 200 pixels to the frame and the remaining area to the other.All done, that's how we make frames and allot areas to it.
Next thing, we have to decide what will be the source file of the frame.
For that, after the <frameset> tag, we use the <frame src="filename.extenstion"> tag. Here, the frame attribute tells the browser to make a frame and the src tag determines the source of the file.
As we have inputted two values in the <frameset> tag, we can define only two frames. On inputting more values, we can define more frames. For example, using <frameset cols="10%,80%,10%"> will allow me to use three frames.
Now, you will notice that the border can be selected and moves around to change the size of the frames. In order to make the border stay at one place and not allow the changes in sizes of the frame, we have to use the noresize attribute in the <frameset> tag. The tag will look like <frameset cols="50%,50%" noresize>
The name attribute, which is to be used with the <frame> tag will allow us to give a name to the frame. Remember that names are always defined within "inverted commas". The tag will look like <frame src="frame1.html" name="frame1">
Now, for inserting images, we have to use the <img> tag. It goes like this:
<html>
<head><title>Images</title></head>
<body>
<img src="image.jpg" width="500" height="500">
</body>
</html>For this file to work, there has to be a file called image.jpg in the same folder where this file is stored. If the image is in another folder, we have to use Internet Explorer to determine the file path. Open Internet Explorer and drag and drop the file into the browser. The address bar will show the path of the file. For example, a file called image.jpg is in my Sample Pictures folder of My Pictures, it's path will be file:///C:/Documents%20and%20Settings/All%20Users/Documents/My%20Pictures/Sample%20Pictures/Blue%20hills.jpg and the tag to be used will be <img src="file:///C:/Documents%20and%20Settings/All%20Users/Documents/My%20Pictures/Sample%20Pictures/Blue%20hills.jpg">
The width and height attributes are optional. They will let you resize your inserted image to the dimensions/values you specify. If we don't use them, the image will be it's orignal size.
Well, this is it for now. These are the basics. If I've missed something and you want to know about it, leave it in the comments below or on facebook. Sorry for not making this post perfect, I'm running less on time. All the best!
No comments:
Post a Comment