Главная » Языки программирования

Linking one html file to another

Содержание
  1. How to include another HTML file in an HTML file?
  2. Using JQuery load to include an HTML file
  3. Syntax
  4. Parameters
  5. Example
  6. Inner HTML file
  7. Main HTML file
  8. Output
  9. Using w3-include-html attribute to include an HTML file
  10. Syntax
  11. Example
  12. Inner HTML file
  13. Main HTML file
  14. Output
  15. Using the htmlinclude library to include an HTML file
  16. Syntax
  17. Example
  18. Inner HTML file
  19. Main HTML file
  20. Output
  21. Using an iframe to include an HTML file
  22. Syntax
  23. Example
  24. Inner HTML file
  25. Main HTML file
  26. Output
  27. How to Link HTML Pages Located in Different Folders
  28. How to link different pages in HTML
  29. Video Tutorial – Steps to link one page to another in HTML
  30. HTML Links
  31. HTML Links — Hyperlinks
  32. HTML Links — Syntax
  33. Example
  34. HTML Links — The target Attribute
  35. Example
  36. Absolute URLs vs. Relative URLs
  37. Example
  38. Absolute URLs
  39. Relative URLs
  40. HTML Links — Use an Image as a Link
  41. Example
  42. Link to an Email Address
  43. Example
  44. Button as a Link
  45. Example
  46. Link Titles

How to include another HTML file in an HTML file?

In this tutorial, we shall learn to include another HTML file in an HTML file.

Various methods are available to include another HTML file in an HTML file. Let us quickly go through the techniques that have support on the web.

Using JQuery load to include an HTML file

In this section, we shall check how to use JQuery’s load method to include an HTML file.

Users can follow the syntax below to use this method.

Syntax

The wrapper appends the new HTML file that jQuery loads.

Читайте также:  Создание виртуального окружения python ubuntu

Parameters

  • wrapper − ID of the DOM element that includes the new HTML content.
  • htmlfile − The new HTML file name.

Example

The program requires two HTML files. One is the main HTML file to load the new HTML file. Next is the new HTML file. Place both files in the exact location.

Define a wrapper DOM element in the main HTML file to append the new HTML file. Using the jQuery load technique load the new HTML file and set it inside the wrapper DOM.

Inner HTML file

 
html> body> h3>This is an HTML page from same directoryh3> body> html>

Main HTML file

html> head> script src="https://code.jquery.com/jquery-1.11.3.min.js">script> script> $(function() < $("#includeHtml").load("result.html"); >); script> head> body> h2>Program to include another HTML file in this HTML using i>JQuery loadi>h2> div id="includeHtml">div> body> html>

Output

Using w3-include-html attribute to include an HTML file

In this section, let us check how to use the w3-include-html attribute to include an HTML file.

Users can follow the syntax below to use this method.

Syntax

Includes a wrapper DOM with the attribute w3-include-html having the new HTML file name as the value.

//Read the attribute fileName = domEl.getAttribute("w3-include-html"); //Make XMLHttpRequest with the attribute value xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() < //If the request is successful, load the new HTML. Else throw 404 error and try again if (this.readyState == 4) < if (this.status == 200) if (this.status == 404) /* Remove the attribute and invoke the function again*/ domEl.removeAttribute("w3-include-html"); addHTML(); > xmlHttp.open("GET", fileName, true); xmlHttp.send();

The syntax reads the w3-include-html attribute value and loads the new HTML with a XMLHttpRequest.

Example

In this example, create a new HTML and a default HTML file. The default HTML file contains a div element with attribute w3-include-html which contains the new HTML file name.

The program reads the w3-include-html attribute value, makes an XMLHttpRequest with the file name, and loads the file.

A New HTML file renders inside the w3-include-html wrapper DOM after a successful file load. Else user gets an error message, and the program loads the file again.

Inner HTML file

html> body> header>b>HTML 2 HEADERb>header> div style="height: 100px;">div> footer>b>HTML 2 FOOTERb>footer> body> html>

Main HTML file

html> body> h2>Program to include another HTML file in this HTML using i>w3-include-htmli>h2> div w3-include-html="result.html">div> script> function addHTML() < var el, i, domEl, fileName, xmlHttp; /*Iterate all DOM*/ el = document.getElementsByTagName("*"); for (i = 0; i < el.length; i++) < domEl = el[i]; /*find the element having w3-include-html attribute*/ fileName = domEl.getAttribute("w3-include-html"); if (fileName) < /*http request with attribute value as file name*/ xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() < if (this.readyState == 4) < if (this.status == 200) < domEl.innerHTML = this.responseText; >if (this.status == 404) < domEl.innerHTML = "Page not found."; >/* Remove the attribute and invoke the function again*/ domEl.removeAttribute("w3-include-html"); addHTML(); > > xmlHttp.open("GET", fileName, true); xmlHttp.send(); /*function ends*/ return; > > > addHTML(); script> body> html>

Output

Using the htmlinclude library to include an HTML file

In this section, we shall check how to use the htmlinclude library to include an HTML file.

Users can follow the syntax below to use this method.

Syntax

The syntax adds the javascript library file URL.

The include tag src contains the new HTML file name.

//Getting include attribute value let includes = document.getElementsByTagName('include'); for(var i=0; i); > function load_file(filename, callback) < fetch(filename).then(response =>response.text()).then(text => callback(text)); >

The syntax loads the source of the tag «include» using the fetch method.

Example

In this example, the htmlinclude library is available in the header. Creating an include tag with the new file name as the src attribute value.

Coming to the script, loading the include tag src value with the fetch method. If you get any error using fetch, try to get help from nodejs or any other program IDE.

Inner HTML file

html> body> b>htmlinclude library included this HTML fileb> body> html>

Main HTML file

html> head> script src="https://unpkg.com/htmlincludejs">script> head> body> h2>Program to include another HTML file in this HTML using i>htmlinclude libraryi>h2> include src="./result.html">include> script> let includes = document.getElementsByTagName('include'); for (var i = 0; i < includes.length; i++) < let include = includes[i]; load_file(includes[i].attributes.src.value, function(text) < include.insertAdjacentHTML('afterend', text); include.remove(); >); > function load_file(filename, callback) < fetch(filename).then(response =>response.text()).then(text => callback(text)); > script> body> html>

Output

Using an iframe to include an HTML file

In this section, let us check how to use an iframe to include an HTML file.

Users can follow the syntax below to use this method.

Syntax

The iframe tag includes the new HTML file name in the src.

Example

In this example, create a sample HTML file to include and main HTML file. The approach adds an iframe with the new HTML file name as the source value in the new HTML body.

The iframe loads the new HTML content inside the main HTML file.

Inner HTML file

html> body> div style="background-color: skyblue;">iframe included this HTML filediv> body> html>

Main HTML file

html> head> h2>Program to include another HTML file in this HTML using i>iframei>h2> style> iframe[iframetag] < border: none; >style> head> body> div id="iframeDiv"> iframe src="result.html" iframetag>iframe> div> body> html>

Output

This tutorial introduced four methods to include a new HTML file in an HTML file. The iframe method is simple to implement. Users can choose the jQuery load method if they need a jQuery method.

Источник

Learn How to Link HTML Pages Located in Different Folders. You need to link to another page in your HTML folder and these pages will be located in the same or a different folder. To link by adding a link to another HTML page in the same folder, do the following. If the target page is located in a different folder.

If you want to implement HTML pages and files in different folders, you can use several methods to link HTML files in different folders. For webmasters, the first thing to know about linking HTML pages in different folders is that the page you have requested should load.

Links are the lifeblood of websites, and that’s especially true for websites that have a lot of pages. Most web designers use HTML code to implicitly create links in their code to connect one page to another.

Usually, having lots of open tabs on a browser is not a problem, but it’s not practical to link back and forth between a dozen pages or more. A link will be provided from the HTML file to the other file. If a different folder is a destination, the target file will be in a specific directory in a folder.

Follow these steps to link HTML pages together in different folders, including one for the same folder and another for a different one.

  1. Create an HTML block-like button or text to link another page to it.
  2. To define a link, create an HTML anchor tag Some text
  3. Inside the tag put an HTML href attribute, to define the link address.
  4. Create file link as a value of href. i.e. href = “yourFilePath”
  5. Use the target attribute to define where to open the linked document.

Video Tutorial – Steps to link one page to another in HTML

You can watch the video tutorial to Link HTML Pages Located in Different Folders or the same folders.

Источник

Links are found in nearly all web pages. Links allow users to click their way from page to page.

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

Note: A link does not have to be text. A link can be an image or any other HTML element!

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.

Example

This example shows how to create a link to W3Schools.com:

By default, links will appear as follows in all browsers:

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

Tip: Links can of course be styled with CSS, to get another look!

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

  • _self — Default. Opens the document in the same window/tab as it was clicked
  • _blank — Opens the document in a new window or tab
  • _parent — Opens the document in the parent frame
  • _top — Opens the document in the full body of the window

Example

Use target=»_blank» to open the linked document in a new browser window or tab:

Absolute URLs vs. Relative URLs

Both examples above are using an absolute URL (a full web address) in the href attribute.

A local link (a link to a page within the same website) is specified with a relative URL (without the «https://www» part):

Example

Absolute URLs

W3C

Google

Relative URLs

HTML Images

CSS Tutorial

To use an image as a link, just put the tag inside the tag:

Example

Use mailto: inside the href attribute to create a link that opens the user’s email program (to let them send a new email):

Example

To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a click of a button:

Example

Tip: Learn more about JavaScript in our JavaScript Tutorial.

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

Источник

Оцените статью
© 2024 Программирование