Multiple pages in the same HTML file

Asked

Viewed 604 times

-2

Hello everyone It is possible, only using HTML and Notepad++ codes for example, to embed separate pages within a single HTML file?

explanation: the structure of the home page is created at the end of it a hyperlink is inserted next page and clicking on it follows to another page in the same HTML file

is possible? there is a command structure that allow this with 1 main page and 999 " embedded pages" via tag on this first page linked by hyperlinks

thus creating only an HTML link possible to view Offline

Clearing

the case is this, I need to find a way to create an HTML that has pages "stuck" not in the running format, but in a single file, a crude example if in Excel if I create a file and put 10 sheets, connect a spreadsheet with the other in using hyperlink, then save this file in HTML format! Eureka! I have a single HTML file with 10 pages "stuck" connected via hyperlik ( in all I put a Hipelink home page) ( in all I put Prox. Page and Previous page) are 10 separate pages only viewable via hyperlink in a single HTML file. I hope you have clarified my question. The final product file will be one HTML. Obg-

html

  • I don’t understand... they’re different files or a single one with a giant scroll and you want to navigate the anchors?

  • 1

    Even if it is possible, it is not good practice. I can only think of a solution using Javascript/Jquery.

  • 1

    Even GOOGLE doesn’t do that my friend. It divides the results page into different links. Your question is not very clear... You would need 999 link, one for each part of the page. Besides, when I file the request, it’s gonna be like "loading" 999 pages at once, it’s gonna be giant... Not to be rude, but it doesn’t sound like a good idea. Talver with ajax or php vc consists of something more practical, with a page part calling the files...

  • It is not yet clear what you need.... it would be better to convert all this into a PDF... you need to explain better the dynamics of what you want to do as will be the pagination, what will have content on the page, whether it can have scroll bar or "infinite scroll", etc

  • If I understand correctly, the closest way I can imagine is using only CSS (https://output.jsbin.com/tatorapotu/1#page-1), but this requires all pages to be in the same file - in a race -, but that does not meet your requirements.

  • Hello- Anderson Carlos Woss in a race way could be up in Word but it is not the case of the need - obg

  • You can create a main div and 999 hidden Ivs, each with the content you want, as if they were different pages. As you click on "next page", you pull the hidden div content to the main div. But this will require Javascript usage.

  • You don’t need to put "solved" in the title (I know it’s a common practice in many forums, but here it’s unnecessary). You’ve already accepted an answer and that’s enough.

  • Ha! Okay, thank you

Show 4 more comments

2 answers

2


Your question is a little fuzzy, but here’s an option.

First you put overflow:hidden in the html and body, after you create multiple Section, each one will be a page. The important thing is that each Section is 100% screen height and overflow-y:auto. So if the page content is more than 100% the height of section the scroll appears.

The links from one page to another you will do at hand using something like <a href="id-da-section"> <section id="id-da-section">

inserir a descrição da imagem aqui

Follow the image code above. Link in Codepen: https://codepen.io/hugocsl/pen/NomYqm

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

section {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
}

h1 {
  margin-top: 0;
}
<section id="page-1">
  <h1>Página 1</h1>
  <a href="#page-2">Próxima</a>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor posuere neque, non elementum dui
    finibus eget. Suspendisse eget lorem ut orci ullamcorper laoreet. Nam suscipit at lacus et </p>



  <a href="#page-2">Próxima</a>
</section>

<section id="page-2">
  <h1>Página 2</h1>
  <a href="#page-1">Anterior</a>
  <a href="#page-3">Próxima</a>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor posuere neque, non elementum dui
    finibus eget. Suspendisse eget lorem ut orci ullamcorper laoreet. Nam suscipit at lacus et ullamcorper.
   </p>

  <p>Praesent ultricies ligula at tortor euismod, sed mattis elit posuere. Integer aliquam elementum pretium. Sed
    a lorem pellentesque, consequat ipsum eget, elementum ipsum. Class aptent taciti sociosqu ad litoraauris in pretium leo. Aenean semper ultricies dictum. Aenean imperdiet mauris at magna
    tincidunt rhoncus. Morbi orci metus, interdum nec bibendum quis, dignissim a ex.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor posuere neque, non elementum dui
    finibus eget. Suspendisse eget lorem ut orci ullamcorper laoreet. Nam suscipit at lacus et ullamcorper.
    Quisque ac risus eu arcu aliquet tempus quis sed sem. Aliquam dui est, cursus nec erat eu, posuere
    efficitur est. Aenean convallis vestibulum dolor, eu sodales arcu posuere a. Nullam euismod tempus turpis,
    vitae suscipit urna suscipit in. Nulla pellentesque massa id turpis pretium euismod.</p>

  <p>Praesent ultricies ligula at tortor euismod, sed mattis elit posuere. Integer aliquam elementum pretium. Sed
    a lorem pellentesque, consequat ipsum eget, elementum ipsum. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos. Cras semper neque nec ultricies rhoncus. Sed nec
    cursus sapien. Mauris in pretium leo. Aenean semper ultricies dictum. Aenean imperdiet mauris at magna
    tincidunt rhoncus. Morbi orci metus, interdum nec bibendum quis, dignissim a ex.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor posuere neque, non elementum dui
    finibus eget. Suspendisse eget lorem ut orci ullamcorper laoreet. Nam suscipit at lacus et ullamcorper.
    Quisque ac risus eu arcu aliquet tempus quis sed sem. Aliquam dui est, cursus nec erat eu, posuere
    efficitur est. Aenean convallis vestibulum dolor, eu sodales arcu posuere a. Nullam euismod tempus turpis,
    vitae suscipit urna suscipit in. Nulla pellentesque massa id turpis pretium euismod.</p>

  <p>Praesent ultricies ligula at tortor euismod, sed mattis elit posuere. Integer aliquam elementum pretium. Sed
    a lorem pellentesque, consequat ipsum eget, elementum ipsum. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos. Cras semper neque nec ultricies rhoncus. Sed nec
    cursus sapien. Mauris in pretium leo. Aenean semper ultricies dictum. Aenean imperdiet mauris at magna
    tincidunt rhoncus. Morbi orci metus, interdum nec bibendum quis, dignissim a ex.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor posuere neque, non elementum dui
    finibus eget. Suspendisse eget lorem ut orci ullamcorper laoreet. Nam suscipit at lacus et ullamcorper.
    Quisque ac risus eu arcu aliquet tempus quis sed sem. Aliquam dui est, cursus nec erat eu, posuere
    efficitur est. Aenean convallis vestibulum dolor, eu sodales arcu posuere a. Nullam euismod tempus turpis,
    vitae suscipit urna suscipit in. Nulla pellentesque massa id turpis pretium euismod.</p>

  <p>Praesent ultricies ligula at tortor euismod, sed mattis elit posuere. Integer aliquam elementum pretium. Sed
    a lorem pellentesque, consequat ipsum eget, elementum ipsum. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos. Cras semper neque nec ultricies rhoncus. Sed nec
    cursus sapien. Mauris in pretium leo. Aenean semper ultricies dictum. Aenean imperdiet mauris at magna
    tincidunt rhoncus. Morbi orci metus, interdum nec bibendum quis, dignissim a ex.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor posuere neque, non elementum dui
    finibus eget. Suspendisse eget lorem ut orci ullamcorper laoreet. Nam suscipit at lacus et ullamcorper.
    Quisque ac risus eu arcu aliquet tempus quis sed sem. Aliquam dui est, cursus nec erat eu, posuere
    efficitur est. Aenean convallis vestibulum dolor, eu sodales arcu posuere a. Nullam euismod tempus turpis,
    vitae suscipit urna suscipit in. Nulla pellentesque massa id turpis pretium euismod.</p>

  <p>Praesent ultricies ligula at tortor euismod, sed mattis elit posuere. Integer aliquam elementum pretium. Sed
    a lorem pellentesque, consequat ipsum eget, elementum ipsum. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos. Cras semper neque nec ultricies rhoncus. Sed nec
    cursus sapien. Mauris in pretium leo. Aenean semper ultricies dictum. Aenean imperdiet mauris at magna
    tincidunt rhoncus. Morbi orci metus, interdum nec bibendum quis, dignissim a ex.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor posuere neque, non elementum dui
    finibus eget. Suspendisse eget lorem ut orci ullamcorper laoreet. Nam suscipit at lacus et ullamcorper.
    Quisque ac risus eu arcu aliquet tempus quis sed sem. Aliquam dui est, cursus nec erat eu, posuere
    efficitur est. Aenean convallis vestibulum dolor, eu sodales arcu posuere a. Nullam euismod tempus turpis,
    vitae suscipit urna suscipit in. Nulla pellentesque massa id turpis pretium euismod.</p>

  <p>Praesent ultricies ligula at tortor euismod, sed mattis elit posuere. Integer aliquam elementum pretium. Sed
    a lorem pellentesque, consequat ipsum eget, elementum ipsum. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos. Cras semper neque nec ultricies rhoncus. Sed nec
    cursus sapien. Mauris in pretium leo. Aenean semper ultricies dictum. Aenean imperdiet mauris at magna
    tincidunt rhoncus. Morbi orci metus, interdum nec bibendum quis, dignissim a ex.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor posuere neque, non elementum dui
    finibus eget. Suspendisse eget lorem ut orci ullamcorper laoreet. Nam suscipit at lacus et ullamcorper.
    Quisque ac risus eu arcu aliquet tempus quis sed sem. Aliquam dui est, cursus nec erat eu, posuere
    efficitur est. Aenean convallis vestibulum dolor, eu sodales arcu posuere a. Nullam euismod tempus turpis,
    vitae suscipit urna suscipit in. Nulla pellentesque massa id turpis pretium euismod.</p>

  <p>Praesent ultricies ligula at tortor euismod, sed mattis elit posuere. Integer aliquam elementum pretium. Sed
    a lorem pellentesque, consequat ipsum eget, elementum ipsum. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos. Cras semper neque nec ultricies rhoncus. Sed nec
    cursus sapien. Mauris in pretium leo. Aenean semper ultricies dictum. Aenean imperdiet mauris at magna
    tincidunt rhoncus. Morbi orci metus, interdum nec bibendum quis, dignissim a ex.</p>

  <a href="#page-1">Anterior</a>
  <a href="#page-3">Próxima</a>
</section>

<section id="page-3">
  <h1>Página 3</h1>
  <a href="#page-2">Anterior</a>
  <a href="#page-4">Próxima</a>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor posuere neque, non elementum dui
    finibus eget. Suspendisse eget lorem ut orci ullamcorper laoreet. Nam suscipit at lacus et ullamcorper.
    Quisque ac risus eu arcu aliquet tempus quis sed sem. Aliquam dui est, cursus nec erat eu, posuere
    efficitur est. Aenean convallis vestibulum dolor, eu sodales arcu posuere a. Nullam euismod tempus turpis,
    vitae suscipit urna suscipit in. Nulla pellentesque massa id turpis pretium euismod.</p>

  <p>Praesent ultricies ligula at tortor euismod, sed mattis elit posuere. Integer aliquam elementum pretium. Sed
    a lorem pellentesque, consequat ipsum eget, elementum ipsum. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos. Cras semper neque nec ultricies rhoncus. Sed nec
    cursus sapien. Mauris in pretium leo. Aenean semper ultricies dictum. Aenean imperdiet mauris at magna
    tincidunt rhoncus. Morbi orci metus, interdum nec bibendum quis, dignissim a ex.</p>

  <a href="#page-2">Anterior</a>
  <a href="#page-4">Próxima</a>
</section>

<section id="page-4">
  <h1>Página 4</h1>
  <a href="#page-3">Anterior</a>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor posuere neque, non elementum dui
    finibus eget. Suspendisse eget lorem ut orci ullamcorper laoreet. Nam suscipit at lacus et ullamcorper.
    Quisque ac risus eu arcu aliquet tempus quis sed sem. Aliquam dui est, cursus nec erat eu, posuere
    efficitur est. Aenean convallis vestibulum dolor, eu sodales arcu posuere a. Nullam euismod tempus turpis,
    vitae suscipit urna suscipit in. Nulla pellentesque massa id turpis pretium euismod.</p>

  <p>Praesent ultricies ligula at tortor euismod, sed mattis elit posuere. Integer aliquam elementum pretium. Sed
    a lorem pellentesque, consequat ipsum eget, elementum ipsum. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos. Cras semper neque nec ultricies rhoncus. Sed nec
    cursus sapien. Mauris in pretium leo. Aenean semper ultricies dictum. Aenean imperdiet mauris at magna
    tincidunt rhoncus. Morbi orci metus, interdum nec bibendum quis, dignissim a ex.</p>

  <a href="#page-3">Anterior</a>
</section>

  • when I copy and paste the code creates a page only , but race as if I had done in WORD, what was missing to be like in GIF ?

  • You have to put your code, without the Body tag, inside the Section, then you have to go making the links in the A tag to jump from one Section to the other

  • dear hugocsl, it is possible to exchange an idea via skype, Whatsapp, face?

  • @petroniopetrarca this time I’m leaving the company here, and I can only move even with this tomorrow. But to make it easier for you to copy the whole code ai of the question to a blank HTML page and gradually put your material and making the links, as you can see I used almost nothing CSS, there is no mystery to this code. If you prefer it tb is posted in this link of Codepen https://codepen.io/hugocsl/pen/NomYqm. if you are having doubts just comment there, I just don’t know if I can handle more code hj, because I am leaving here.

  • if I can’t get through to you tomorrow, vlw !

  • Dear hugocsl, b . d . , it doesn’t even work, it is possible to exchange an idea via skype, Whatsapp, face?

Show 1 more comment

-3

The most practical way is to use one of the concepts: div, frame, iframe or Frameset.

Note: Use of frames is considered bad practice in some uses.

Browser other questions tagged html

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