In-Line Frames
An inline or floating frame can be thought of as a frame that exists within the contents of an HTML page. As such, it does not require a separate frameset document.
An inline frame is used to embed supporting content pages / assets within the current HTML document that is being displayed.
Within the body of your page, you would include code similar to the following:
Below is an example of the coding for an inline frame:
<p align="center"/>
<iframe name="viewer" src="sample.html" width="400" height="300" scrolling="yes">
This message will be displayed if the browser does not support inline frames
</iframe>
Then within your actual link, be sure to target the actual iframe. If you don't, the source page will open up in a new window, or replace all of your content in the current window.
<a href = "bart.html" target = "viewer">Bart Simpson</a>
An inline frame is used to embed supporting content pages / assets within the current HTML document that is being displayed.
Within the body of your page, you would include code similar to the following:
Below is an example of the coding for an inline frame:
<p align="center"/>
<iframe name="viewer" src="sample.html" width="400" height="300" scrolling="yes">
This message will be displayed if the browser does not support inline frames
</iframe>
Then within your actual link, be sure to target the actual iframe. If you don't, the source page will open up in a new window, or replace all of your content in the current window.
<a href = "bart.html" target = "viewer">Bart Simpson</a>
In action:
Click here to see this inline frame in action
- Download the following file and unstuff or decompress it
- Open the index.html page in your browser of choice.
iframeexample.zip |
Another simple example can be found in this "Simpsons" example.
- Download the following file and unstuff or decompress it
- Open the index.html page in your browser of choice.
inlineexample.zip |
Explanation of the codes and attributes of in-line frames
<iframe> </iframe> | Establishes the existence and placement of an inline frame within the document. |
name="?" | is an attribute within the <iframe>tag that defines the name for the inline frame so that other links in the document can target pages to be loaded within the inline frame |
src="URL" | is an attribute within the <iframe> tag that specifies which HTML document should initially be displayed within the inline frame |
width="numerical value" | is an attribute within the <iframe>tag that defines the width of the inline frame |
height="numerical value" | is an attribute within the <iframe>tag that defines the height of the inline frame |
marginwidth="#" | an attribute within the <iframe> tag that defines the amount of space that exists between the inline frame's contents and the borders that mark the left and right margins for the inline frame can be set in terms of pixels or as a percentage of the browser window, and must be equal to or greater than 0 |
marginheight="#" | an attribute within the <iframe> tag that defines the amount of space that exists between the inline frame's contents and the borders that mark thetop and bottom margins for the inline frame can be set in terms of pixels or as a percentage of the browser window, and must be equal to or greater than 0 |
scrolling="VALUE" | is an attribute within the <iframe> tag that specifies whether the frame has a scrollbar values include: yes, no, auto (note that if not specified the computer will assume auto) note that when set to auto, the bars will only show if there is more text available than can fit in the inline frame Use the "no" value when you never want the inline frame to display scroll bars warning: be careful about set scrolling = "no". If there is more text than fits in the current inline frame, the user will be most likely be unable to access the additional text. |
align="direction" | is an attribute within the <iframe> tag that specifies whether the surrounding text or content of the page is aligned / wrapped to the right or left of the inline frame values include: left, right left value places inline frame on the left side of the text, while right value places the inline frame on the right side of the text Often it is easier to user tables to align inline frame with surrounding content |
frameborder="#" | an attribute within the <frame> tag that specifies whether borders should be drawn between adjoining framesa value of 1: borders are drawn between this frame and every adjoining framea value of 0: no borders will be drawn around this frame (unless specified by other adjoining frames) |
For the web for more info:
- Check out W3C Schools: http://www.w3schools.com/tags/tag_iframe.asp
Browsers that don't support <iframe>
- Text placed between the <iframe> and the </iframe> tags will appear in the window on browsers that don't support frames or where frames have been disallowed in the preferences panel
- Within this <iframe> section, it is advisable to include a link to an an alternative page that will provide access to the information that was intended to be viewed within the inline frame
Assignment:
- Your task is to create a set of pages that reflects your understanding of both inline frames and css
- Your site pages should include:
- Title or Splash Page
- At least 2 secondary content pages
- 1 of your secondary content pages must utilize in-line frames to connect to a minimum of 5 additional supporting content pages.
- Utilize CSS to format you pages
- Two different external sheets linked properly - 1 for the 3 main pages, 1 for the 5 supporting pages
- Evidence of internal styling that is unique to one page (example the slash / title page)
- Evidence of inline styling to format a particular tag so it is different than all the other similar tags on a page or throughout the site
- Be sure to demonstrate your understanding of the basic html tags.
Not sure what to include: look at the review assignment to see what is expected. Click Here - Include a message / alternative link that will be displayed if for some reason the browser does not support frames.
- I have laid out below the criteria that you must include; however, you are encouraged and required to go online and look for other tags that were not included in class:
- You will be marked on the following:
- The correctness of your html and css coding
- The extent to which you utilized CSS
- The complexity or sophistication of your pages
- Linear layout, verses use of css positioning or tables to create a non-linear design
- Thoroughness or detail of your content
- Naming of pages and organization of files
- Project in a separate folder from the rest of your work and named appropriately
- First page should be saved as index.html
- Pages named relative to content: seniorbasketball.html is way more descriptive than page7.html
- Any images should be included in a separate "images" folder within your project folder
- Overall look and appeal of the web site
- Ease with which user can navigate through the site
- You will lose marks for broken links, html errors, differences in browser experiences, slow load times, and spelling and grammar errors.
Suggestions of Topic / Content Ideas
- Your webpage can be about anything. Examples include:
- favourite band
- favourite team
- favorite athlete
- favorite entertainer
- your friends
- a topic of interest to you
- A list of movie clips / images / animations that surround an inline frame. When an item is clicked the browser should load the corresponding file / page into the inline frame that provides additional information about the image or clip. Such as a plot summary, an artist statement, etc.
- A fictional business
- Home page
- Contact info and how to get there
- Available products and customer reviews.
- Home page
- A website highlighting the special things about any city in the world. Chicago, Bangladesh, Tokyo…ANYWHERE!!!
- Tourist Locations
- Industry
- History
- Inhabitants
- Festivals and Events
- Famous Inhabitants
- What makes this City Special and Interesting!!!!
- Create a Fan Club styled website that honors your favorite television show!
- Have a Central Home Page and several linked pages that include:
- Episode Guide
- Main Characters
- Actor/Personal Bios
- Merchandise
- My only request is that the page is school appropriate.