Create external html pages

5

I know how to create external css pages. Which is quite useful. However, I do not know if it is 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 made the main page menu and I will have to repeat it on the internal pages of the site. The problem is that if I was wrong about something or want to change a menu name, I will have to change that name on all internal pages.

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

    
asked by anonymous 14.02.2016 / 18:03

4 answers

4

An alternative without using third-party languages like PHP, ASP, JSP, ColdFusion, Ruby, JavaScript, etc. is to use web server features.

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

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

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

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

In the IIS environment, for example: link

For Nginx: link

I just quoted the most popular ones. For other web servers, search for the respective documentation

    
14.02.2016 / 23:29
2
___ erkimt ___ Create external html pages ______ qstntxt ___

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

This is a link to an external style page %code%

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

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

    
______ azszpr113249 ___

An alternative without using third-party languages like PHP, ASP, JSP, ColdFusion, Ruby, JavaScript, etc. is to use web server features.

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

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

<!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>

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

In the IIS environment, for example: link

For Nginx: link

I just quoted the most popular ones. For other web servers, search for the respective documentation

    
______ ___ azszpr113223

Will you use which programming language? php, python on django

Search on this link 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>
    
______ azszpr113243 ___

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

%pre%

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

%pre%     
______ azszpr113225 ___

I honestly believe that HTML does not have it, but it's not the end of the world. =)

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

1. JavaScript / JQuery:

In many ways, you can simply use %code% along with %code% , to enter the content you get.

The %code% will get the HTML of the URL you entered, then just insert the obtained HTML into some element you want, for example %code% .

In a basic example would be:

%pre%

Want an example? So ...

%pre% %pre%

2. Server-Side:

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

%pre%

The %code% in this case will insert the contents of another file. This way you can have a document (usually: navigation menu, top, footer) being part of all pages. Once this document is updated, all pages will show the modified file, without wanting to edit one by one.

    
___
14.02.2016 / 19:47
2

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

<?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');
?>
    
14.02.2016 / 22:54
1

I honestly believe that HTML does not have it, but it's not the end of the world. =)

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

1. JavaScript / JQuery:

In many ways, you can simply use $.get() along with .html() , to enter the content you get.

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

In a basic example 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><linkhref="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 include content easily 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: navigation menu, top, footer) being part of all pages. Once this document is updated, all pages will show the modified file, without wanting to edit one by one.

    
14.02.2016 / 20:19