So, You Want In-Line Frames, Huh?
Building the Right Environment to Support AI, Machine Learning and Deep Learning
Use these to jump around or read it all...
[One More Little Trick] [A Few Other Commands]
Frames, frames, frames. Honestly, I answer twice the mail dealing with frames than any other topic. They are very popular and people want them. In that spirit, here's a tutorial dealing with what Microsoft Explorer has named "In-Line Frames".
In-Line FramesThese are frames that appear within the page. They resemble table cells, yet what appears in the frame is not text on the page, but rather a whole other page, like regular frames.
Here's an example:
The Basic FormatI know that looks like a table cell, but it's really a frame with the text from another page displayed inside it. It's a page in a page. It's two, two, two pages in one! (I'll stop now before I begin quoting Doublemint gum commercials.) Here's how I did it:
Here's What's Happening:
- IFRAME is the command that states an in-line frame will go here.
- SRC denotes the source for the page, just like an image command.
- /IFRAME ends the entire command. You must have this for each IFRAME you post.
How's that for easy?
Multiple FramesIf you can have one, you can probably have two. Dig this:
Here's the code that made the frames above:
<IFRAME SRC="inf3.html" NAME="right"></IFRAME>
Here's What's Happening
Now we get into the beauty of the in-line frames. You can start to have movement between them. First, let's look at the code.
I need for you to see that I used an </IFRAME> each time I created a frame. Now, notice the format for creating the frames stayed the same. What I did was add a new command:
If you already understand the concept of frames and targeting the output of hypertext links within frames, then you already know the drill here. If not, see the Original Frame tutorial's section on targeting.
That NAME command names the frame so that you can target where a hypertext link's page appears. The default is for the information to appear in the same frame as the hypertext link. What I did here though was to name the frames. In this case, "left" and "right."
Here's the format I used in the left-hand frame to create the hypertext link:
See? The right frame was named "right" thus the output of the click landed in the right frame. That's easy enough.
I Want A Button!Calm yourself, man! (*slap sound effect*) You can have your button and click it too. Watch this.
...and here's the button's code:
|<FORM ACTION="inf7.html" TARGET="right">|
<INPUT TYPE="submit" VALUE="Click This">
One More Little Trick
Here's What HappenedI think that's the neatest effect these frames offer. Here's the code I used to make the frames:
<IFRAME SRC="inf9.html" FRAMEBORDER="0" NAME="right"></IFRAME>
See the FRAMEBORDER="--" command I added? That's what did the trick. You have two settings to choose from, 1 and 0. One is the default. That gives you the slightly indented frame look I had above. Zero loses the frame altogether. That's what I did in this case. AND... since I made the two source pages the same color as the main page -- without the borders -- it looks like the frame is simply part of the same page. I go with the blank look on the right by creating a page that was the same color as the main page, but contained no text. I think it's a great effect.
A Few Other CommandsHere are a few more commands that you can use in order to alter the frames on your page. Each is fairly self-explanatory and doesn't really require an example. I've used them all just to make sure they work. Just stick the command, with whatever setting you want, into the IFRAME command to see it work.
- HEIGHT="--": This acts just like the height command in terms of an image (see here). It defines the frame's height, in pixels or percentage.
- WIDTH="--": Ditto this one in terms of frame width.
- MARGINWIDTH="--": This sets the margin width in either pixels or percentage.
- MARGINHEIGHT="--": Ditto, but on height.
- SCROLLING="--": If the information inside the frame is too long to display, then a scroll bar will appear. You can stop it by adding this command set to "no."
- ALIGN="--": This works like the align command in terms of images (see here). It denotes where text will appear when surrounding the frame.
- NORESIZE: Add this, and the user will not be able to resize your frame.
[One More Little Trick] [A Few Other Commands]
IT Solutions Builder TOP IT RESOURCES TO MOVE YOUR BUSINESS FORWARD
Which topic are you interested in?
What is your company size?
What is your job title?
What is your job function?
Searching our resource database to find your matches...