How to subdivide HTML

Asked

Viewed 830 times

0

How can I put a part of HTML in a separate file, and reuse the code.

I have a MENU that will be used on several pages of the project. But in the case of code maintenance, it would be easier if you created a page: MENU.html.

And in the next few pages, I called the menu that should be inside a DIV

html

  • Are you using any language server-side?

  • No. HTML and CSS only.

  • You can do something with Javascript, at most. Has the subject discussed on Soen.

  • In the project was vetoed the use of Javascript. I also can not use PHP.

  • So you have no options. At most use an HTML pre-processor, such as Pug, which allows you to import.

  • 2

    With pure HTML, use an iframe.

  • It would be good if you edit your question and put that you are not using any language server-side and also cannot be a solution with Javascript. This can improve the quality of your answers.

Show 2 more comments

2 answers

2

As stated in the comments you can use the tag iframe.

iframe.html

<iframe src="menu_frame.html" style="border:none;"></iframe>

menu_frame.html

<a href="#">Menu</a>

You can also use the tag object. Check compatibility of browsers.

Object.html

<object data="menu_frame.html"></object>

-1

Developing an app that has menus in menu files separate from the contents, Oce solves the maintenance problem, but creates another problem, rendering.

Since Voce did not give details of your project, I will assume that using a css and php framework, basically Voce can split your pages into three parts

  • Menus (header)
  • Conteudo ()
  • footer ()

Menu file.html

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>

content.html file

<h1>Seu conteudo Aqui!</h1>

footer.html file

    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>

In your index.php file

<?php
require "menu.html";

$url = explode('/', $_SERVER['REQUEST_URI']); // Obtem a url e passa em forma de array
switch($url[1]) { // compara o url para saber qual pagina carregar
    case "home":
        require "content.html";
    case "sobre":
        require "sobre.html";
    default:
        require "content.html";
}

require "footer.html";
?>

In this case, in other words, you will create your route system.

I have an example that I am still studying, but take a look there that Voce will better understand what I tried to explain.

https://github.com/henriquek3/economize

  • 1

    I wasn’t the one who said no, but AP wants it in pure HTML...

Browser other questions tagged html

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