How Can I Display a Specific Part of Another Web Page on My Site?

Save

For large websites, updating the code on each web page whenever a change is made to the entire site is time-consuming and costs money. Even smaller websites benefit from coding multiple web pages that all reference a single file for the header or a site menu. One method uses PHP programming with the "include()" function. Another method uses the HTML <iframe> tag. Which method you use depends on your website's needs.

Using the PHP "Include()" Function

  • Create a new file in your plain text or code editor and save it with an extension of either .HTML or .PHP. If the new page you make will include PHP code on it, then save it as a .PHP file. This is the page you will display within another web page on your site. Write any HTML code and any other code your page needs.

  • Open all the web pages that need to display your new, single file. If these files are saved as .HTML files, rename them as .PHP files. On each page, locate the place where you want to include your single file. Type the following code to add it there: <?php include 'your-new-file.php'; ?>. Between the quotes after the word "include," change "your-new-file.php" to the name of your single file that you are displaying in the other web pages.

  • Load each page where you added the PHP "include()" function in your browser. Check that the first, single file you created appears in the pages where you added the "include()" function. Right-click on the browser and select "View Source" to see the HTML code. Instead of the PHP code, you will see the HTML it generated. In this case, the generated HTML is whatever HTML you wrote for the first, single file.

HTML <iframe> Tag

  • Open the file for the web page you wish to embed into another web page. Locate the portion of the web page you want to show, such as a specific <div> tag or text under the specific heading tag. If the tag does not yet include an ID attribute, add one like so: <div id="name-here">. Your <iframe> on the other page will target the ID in that tag.

  • Open the web page file where you will add the <iframe> tag. This file will display a portion of the other file. Type out the following tags and attributes: <iframe src="your-other-file.html#div-ID"></iframe>. The attribute "src" here looks for a source file, which is the other file you want to display. After the file path, you add the hash symbol and then the name of an ID you want to target. This acts much like those "go to top" links on some web pages.

  • You must use a closing tag for any instance of <iframe>. Between the opening and closing <iframe> tags, add what visitors should see when their browser does not support the <iframe> tag. Though a common tag on the Internet, <iframe> is not considered standards-compliant and therefore does not have uniform support across all browsers.

  • Load your page in a browser and check if its <iframe> tags worked. The first file's content should show, beginning at the HTML tag containing the ID your <iframe> targeted. If nothing shows, try another browser, or go back and check your code.

Tips & Warnings

  • Not all browsers support the <iframe> tag. When creating PHP files, you must first move them to a PHP-compatible server before testing them in a browser. Most web hosts include PHP support, and programs exist to help you install a web server on your own computer for testing.

References

  • Photo Credit Jupiterimages/Comstock/Getty Images
Promoted By Zergnet

Comments

Resources

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!