5

Eu sei como criar páginas externas de css. O que é bastante útil. Porém, não sei se é possível fazer o mesmo para html sem usar frames.

Esta é um link para uma página de estilo externa <link rel="stylesheet" type="text/css" href="estilo.css">

Por exemplo, fiz o menu da página principal e vou ter de o repetir nas páginas internas do site. O problema é que se me enganei com alguma coisa ou quero alterar um nome do menu, terei de alterar esse mesmo nome em todas as páginas internas.

O que queria era uma opção identica para criar páginas externas de html como existe para css.

2
  • Obrigado a todos pela vossa ajuda. Pensava que dava só com html. Já ouvi dizer que teoricamente não dá porque é considerado que o site foi mal projectado então eu questionei: "Mas e numa loja que é actualizado produtos?" e responderam-me muito bem que nesse caso é usado linguagens de programação. O que vocês escreveram reflete isso mesmo. Obrigado pela ajuda.
    – David
    Commented 15/02/2016 às 16:38
  • 1
    Algumas respostas erroneamente afirmam não ser possível mas, conforme mostrei é possível somente com HTML. Bastar que o servidor web tenha o SSI ativado. Commented 16/02/2016 às 12:05

4 Respostas 4

4

Uma alternativa sem usar linguagens terceiras como PHP, ASP, JSP, ColdFusion, Ruby, JavaScript, etc, é usar os recursos do servidor web.

O servidor Apache, por exemplo, possui o módulo mod_include, o qual provê o uso de SSI (server side include)

Exemplo de como incluir uma página HTML dentro de uma página HTML:

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

Outros exemplos e funções diversas estão no link acima, da documentação oficial do Apache.

No ambiente do IIS, por exemplo: https://msdn.microsoft.com/en-us/library/ms525185(v=vs.90).aspx

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

Citei apenas os mais populares. Para outros servidores web, procure pela respectiva documentação

2

Vai usar qual linguagem de programação? php, python on django

Pesquise sobre isso https://docs.angularjs.org/api/ng/directive/ngInclude, ou 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

Até onde sei, fazer com o puro HTML acho que não é possível, mas dá pra fazer com PHP :) Com PHP você pode fazer assim: de acordo com o valor passado por GET, o parâmetro 'r' neste exemplo, dá pra você criar um arquivo pra cada página e nesse arquivo, montar apenas o html da div que você quer tornar dinâmica, sem ter que criar varias vezes o mesmo 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
?>

e aí pra incluir o arquivo dentro da sua div dinâmica, você faz assim:

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

Sinceramente acredito que com HTML não tenha como, mas isso não é o fim do mundo. =)

Existem duas alternativas, mas que não são puramente HTML:

1. JavaScript/JQuery:

Dentre várias maneira, pode simplesmente usar o $.get() junto com um .html(), para inserir o conteúdo obtido.

O $.get() irá obter o HTML do URL informado, depois basta inserir o HTML obtido em algum elemento que deseja, por exemplo $('menu').html(meu_html).

Em um exemplo básico seria:

<menu></menu>

<script>

    $.get('seu_menu.html',

      function(data) {

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

      }

    );

</script>

Quer um exemplo? Então...

$.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:

Pode incluir conteúdo de maneira fácil via PHP, por exemplo, usando include.

<?php

include('meu_menu.html');

?>

O include neste caso irá inserir o conteúdo de outro arquivo. Dessa forma poderá ter um documento (geralmente: menu de nevegação, topo, rodapé) sendo parte de todas as páginas. Uma vez que este documetno for atualizado, todas as páginas irão mostrar o arquvio modificado, sem quer que editar um a um.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .