Create external html pages

Asked

Viewed 1,125 times

5

I know how to create external css pages. Which is quite useful. However, I don’t know if it’s possible to do the same for html without using frames.

This is a link to an external style page <link rel="stylesheet" type="text/css" href="estilo.css">

For example, I did the menu on the main page and I will have to repeat it on the internal pages of the site. The problem is that if I’m wrong about something or I want to change a menu name, I have to change that name on all internal pages.

What I wanted was an identica option to create external html pages as exists for css.

html5

  • Thank you all for your help. I thought I was only good with html. I have heard that theoretically it does not give because it is considered that the site was poorly designed so I asked: "But what about a store that is updated products?" and they told me very well that in this case is used programming languages. What you wrote reflects this. Thanks for the help.

  • 1

    Some answers erroneously claim not to be possible, but as I have shown it is only possible with HTML. Simply have the SSI enabled by the web server.

4 answers

4

An alternative without using third-party languages like PHP, ASP, JSP, Coldfusion, Ruby, Javascript, etc., is to use web server resources.

The Apache server, for example, has the module mod_include, which provides the use of SSI (server side include)

Example of how to include an HTML page within an HTML page:

<!--#include virtual="/footer.html" -->

Other examples and miscellaneous functions are in the link above, from the official Apache documentation.

In the OSI environment, for example: https://msdn.microsoft.com/en-us/library/ms525185(v=vs.90). aspx

To Nginx: http://nginx.org/en/docs/http/ngx_http_ssi_module.html

I only mentioned the most popular ones. For other web servers, look for the respective documentation

2

What programming language will you use? php, python on Django

Research about this https://docs.angularjs.org/api/ng/directive/ngInclude, or xhtml: 

<!DOCTYPE html>
<html lang="en"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:head>
        <title>Include demo</title>
    </h:head>
    <h:body>
        <h1>Master page</h1>
        <p>Master page blah blah lorem ipsum</p>
        <ui:include src="/WEB-INF/include.xhtml" />
    </h:body>
</html>

2

As far as I know, doing it with pure HTML is not possible, but you can do it with PHP :) With PHP you can do this: according to the value passed by GET, the parameter 'r' in this example, you can create a file for each page and in this file, only build the html of the div that you want to make dynamic, without having to create several times the same link.

<?php
       $r = isset($_GET['r']) ? (file_exists($_GET['r'].".html") ? $_GET['r'] : "index") : "index";
       // pra validar se o arquivo existe, e como consequencia, se o link é valido
?>

and then to include the file inside your dynamic div, you do so:

<?php
include($r.'html');
?>

1

I honestly believe that with HTML there is no way, but this is not the end of the world. =)

There are two alternatives, but they are not purely HTML:

1. Javascript/Jquery:

Among several ways, you can simply use the $.get() along with a .html(), to insert the content obtained.

The $.get() will get the HTML of the given URL, then just insert the HTML obtained into some element you want, for example $('menu').html(meu_html).

In a basic example it would be:

<menu></menu>

<script>

    $.get('seu_menu.html',

      function(data) {

        $('menu').html(data);

      }

    );

</script>

Want an example? So...

$.get('https://developer.mozilla.org/en-US/docs/Web/',

  function(data) {

    topbar = data.split('<header id="main-header">');
    topbar = topbar['1'].split('</header>');

    $('menu').html('<header id="main-header">'+topbar['0']+'</header>');


  }

);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://developer.cdn.mozilla.net/static/build/styles/mdn.90e6d84d58ff.css" rel="stylesheet" type="text/css">
<link href="https://developer.cdn.mozilla.net/static/build/styles/wiki.978c53db5cdd.css" rel="stylesheet" type="text/css">

<menu></menu>
<main id="content">
Resto do meu site
</main>

2. Server-side:

You can easily include content via PHP, for example using include.

<?php

include('meu_menu.html');

?>

The include in this case will insert the contents of another file. This way you can have a document (usually: snow menu, top, footer) being part of all pages. Once this documetno is updated, all pages will show the modified arch, without either editing one by one.

Browser other questions tagged html5

You are not signed in. Login or sign up in order to post.