HTML iFrames Tutorial
In 1996, version 3.0 of Internet Explorer introduced an HTML tag called the iframe. It was used to link to content that could be placed in a smaller box within a Web page. The iframe HTML tag comes with many different attributes that can change the way it functions and looks. They are implemented from inside the HTML iframe tag that will look like this: <iframe>. Add attributes inside the iframe tag to manipulate its appearance. For example, type <iframe scrolling="no"> to block Web users from scrolling inside the iframe.
Other People Are Reading
Instructions
-
-
1
Open the HTML file with a text editor. Notepad will work great. Right-click the file, select "Open With" and click "Notepad." At the same time, keep the HTML file open in a Web browser so you can refresh and see changes as they are made after saving the HTML file in the text editor. Look at the file in the Web browser and locate where to place the iframe. Make sure to pick a space with plenty of room, because a large iframe in a small space may irritate users.
-
2
Place the opening iframe tag <iframe> where it should start, then close the iframe with the closing tag </iframe>. Before the size of the iframe and other specifications can be added, create a small Web page the iframe can link to. It will contain pictures and text, but be careful not to insert too much content so scrolling inside of the iframe is kept to a minimum.
-
-
3
Place the name, link, and description attributes inside the iframe tag. For the name, type "name="name of iframe" " (using only the inside quotes) right inside the iframe tag. This format can be used for the other iframe attributes. Use the src attribute to link to the URL of the content that goes inside the iframe by typing "src="URL Link" " (again, only the inside quotes). The attribute longdesc is used to link to a text file with a description of the iframe's content that appears if the browser does not support iframes.
-
4
Determine the correct size, margins and placement of the iframe now that the content has been linked to. Width and height are the attributes that set the size of the iframe. If the iframe is supposed to stay the same size, type "width="400" " (only the inside quotes) to set the size in pixels. For the iframe to change sizes with the browser, typing "width="35%" " (inside quotes only) will make it always 35 percent of the total width of the Web page. Use the align attribute to choose the location of the iframe. Type "align="top, right" " (inside quotes only) or any combination of two choices that can also includes middle, bottom, left and center.
-
5
Set border and margin width attributes. The attributes border and margin width are the finishing touches to help the iframe fit in with the rest of the Web page. Margins are measured with pixels, and border uses one or zero. Typing "margin="10" " and "border "1" " (inside quotes only for both) will create a small margin with a border to match. Save the HTML file in the text editor and refresh the Web browser to make sure everything is working properly.
-
1
References
Resources
- Photo Credit aqua web image by Ruslana Stovner from Fotolia.com
