Comment link multiple HTML 5 documents?
Solved
THEGAMERGAMING54
Posted messages
31
Status
Member
-
Lansquenet -
Lansquenet -
Bonjour à tous ! Je code une page html qui contiendra beaucoup d'images (une centaine je dirais) et je voudrais lier mon fichier index.html à un autre fichier où je chargerais mes images pour que mon fichier index ne soit pas trop long. Les deux fichiers sont bien dans le même dossier (j'utilise VS Code).
Quelqu'un aurait une solution ?
Merci.
Quelqu'un aurait une solution ?
Merci.
5 answers
Hello,
When you talk about "binding", I think you mean "including"
HTML is not a programming language...
So, apart from using a server-side language (like PHP), you won't be able to.
--
.
Best regards,
Jordane
When you talk about "binding", I think you mean "including"
HTML is not a programming language...
So, apart from using a server-side language (like PHP), you won't be able to.
--
.
Best regards,
Jordane
Hello,
yes and no. Just like you don't include the file in the HTML to display an image on a page
but indicate the address where the image is located so that it can be displayed, it will be the address of the file to be displayed that is stored in a variable.
The same goes for a database; while it is possible to store a file in a database, it is much simpler and more efficient to only store the location where it is found. This principle of linking elements to each other through text that leads to a resource (the image file for its display in an HTML page, the CSS for an HTML page, the script of a JavaScript program to the HTML page, ...) is called hypertext.
The main question is mainly why do you want to display 100 images on a page?
It's something to absolutely avoid for many reasons.
Graphic and layout rules:
_ The human eye and brain have their limits, it is completely pointless to present many images at the same time because they cannot all be viewed at once. Just put a rectangle with 4 images on it and you will see that you cannot humanly look at multiple images at once and make sense of it.
It is the same if the content of your page is too large (images or texts); it becomes tedious to scroll through a page, and it is much more efficient to create several pages rather than forcing the user to make an effort to see successive content that will be mentally harder to categorize.
The result of such quantity is logically that nothing is highlighted and you lose the main message and/or that none is highlighted, giving the impression not of abundance but of lack of order and coherence, as no particular message/image can be directly identifiable (by the brain in a fraction of a second).
The golden rule of any publication is clarity, and a large number of elements without a small number being highlighted (1 or 2 or even 3) is simply counterproductive since no particular message will immediately stand out, forcing the brain to make an effort to find a meaning or message in what it sees, thereby dissuading interest in the publication.
Also see what web ergonomics is.
Technical limitation/impact:
_ This may be the motivation behind your question, but displaying a page means that the content to be displayed (by hyperlinks) needs to be loaded (downloaded) by the user's computer. A page that contains many large files (file sizes) will logically be slow to load. Since the beginning of the WWW, when connection speeds (and consequently file transfer rates) were lower, it has always been necessary to ensure that a page loads quickly (therefore with per page content) not too large to prevent the user from having to wait for the page to display, which for most users will lead them to simply not wait and go elsewhere, or if they stay to view the page once loaded, they will probably not return to the site and will find the site poorly made (since they have to wait and other sites are immediate), thus unconsciously judging the proposed/presented content as bad because the site is poorly designed.
Thus, displaying a large number of photos simultaneously on a page is completely counterproductive and should be avoided. By a large number, I mean 10 or more in good quality or 2 or 3 in high quality (= heavier files).
Solutions?
I have already given the best solution, which is not to display a large number of images per page. Therefore, fragment it into different pages.
Computing allows for a certain degree of automation through programming.
Thus, including a slideshow/viewer type element can be wise in this case.
Rather than displaying 10 images in sequence, scrolling through a frame makes each image unique (a human brain/vision cannot concentrate on multiple images at once), which will be consecutive and much more effective if the solution of fragmenting the page into several pages does not satisfy you.
However, of course, scrolling through a lot more images leads to the same problems mentioned above: none are highlighted and stand out, it is tedious and boring to scroll through (or watch scroll) a large number of images and none stand out, the images at the beginning of the scroll will be the only ones to really attract attention.
Another type of automation exists but requires dynamic pages. This means that the image files (or rather their location addresses *URLs) must be stored by a database and that a program (e.g., PHP) can generate the display in a way that varies (from sorting, ranking, various organization) allowing the user to clearly access the information or the information (or image(s)) that the user wants to see.
Linking pages together is simply called providing a link that allows one to navigate from one page to another
Of course, we can (and should) combine different possible techniques.
Thus nothing prevents having a PHP program relying on a database that displays images in a viewer created in JavaScript (yes, everything is connected, technologies are complementary, and different technologies each have their role/usefulness) and of course, if that requires having multiple (dynamic or not) pages, there’s no reason not to take advantage of it.
Important:
Internet sites need to consist of dynamic pages: the contents or a part of what is displayed (texts, images, ...) are provided by the database to the program that will generate (automation) the display and allows for the inclusion of criteria that may vary over time.
Concretion, this means that without this principle, when you need to change, add or modify images (or other content), if you have a program that automates content processing, you simply need to change the content in the database for that. Without it, you have to redo the layout, presentation, and writing for the page every time there’s a change. This ultimately leads to a colossal waste of time since it forces you to do the work every time. Automation is the only viable solution if you want a sustainable site that can be easily managed rather than having to rewrite HTML, CSS, and possibly JavaScript every time you want the smallest change. The more content you have, the more frequently you need to modify that content, the more work it will take without dynamic pages.
And if you think your site doesn’t need to change over time, you are mistaken and are not thinking long term. Such cases exist; they are static sites. They can suffice but remain sites of lesser quality and added value for users and thus have less chance of presenting interest compared to others that provide better and varied content.
yes and no. Just like you don't include the file in the HTML to display an image on a page
<img src="my_image.jpg" alt="image description" />
but indicate the address where the image is located so that it can be displayed, it will be the address of the file to be displayed that is stored in a variable.
The same goes for a database; while it is possible to store a file in a database, it is much simpler and more efficient to only store the location where it is found. This principle of linking elements to each other through text that leads to a resource (the image file for its display in an HTML page, the CSS for an HTML page, the script of a JavaScript program to the HTML page, ...) is called hypertext.
The main question is mainly why do you want to display 100 images on a page?
It's something to absolutely avoid for many reasons.
Graphic and layout rules:
_ The human eye and brain have their limits, it is completely pointless to present many images at the same time because they cannot all be viewed at once. Just put a rectangle with 4 images on it and you will see that you cannot humanly look at multiple images at once and make sense of it.
It is the same if the content of your page is too large (images or texts); it becomes tedious to scroll through a page, and it is much more efficient to create several pages rather than forcing the user to make an effort to see successive content that will be mentally harder to categorize.
The result of such quantity is logically that nothing is highlighted and you lose the main message and/or that none is highlighted, giving the impression not of abundance but of lack of order and coherence, as no particular message/image can be directly identifiable (by the brain in a fraction of a second).
The golden rule of any publication is clarity, and a large number of elements without a small number being highlighted (1 or 2 or even 3) is simply counterproductive since no particular message will immediately stand out, forcing the brain to make an effort to find a meaning or message in what it sees, thereby dissuading interest in the publication.
Also see what web ergonomics is.
Technical limitation/impact:
_ This may be the motivation behind your question, but displaying a page means that the content to be displayed (by hyperlinks) needs to be loaded (downloaded) by the user's computer. A page that contains many large files (file sizes) will logically be slow to load. Since the beginning of the WWW, when connection speeds (and consequently file transfer rates) were lower, it has always been necessary to ensure that a page loads quickly (therefore with per page content) not too large to prevent the user from having to wait for the page to display, which for most users will lead them to simply not wait and go elsewhere, or if they stay to view the page once loaded, they will probably not return to the site and will find the site poorly made (since they have to wait and other sites are immediate), thus unconsciously judging the proposed/presented content as bad because the site is poorly designed.
Thus, displaying a large number of photos simultaneously on a page is completely counterproductive and should be avoided. By a large number, I mean 10 or more in good quality or 2 or 3 in high quality (= heavier files).
Solutions?
I have already given the best solution, which is not to display a large number of images per page. Therefore, fragment it into different pages.
Computing allows for a certain degree of automation through programming.
Thus, including a slideshow/viewer type element can be wise in this case.
Rather than displaying 10 images in sequence, scrolling through a frame makes each image unique (a human brain/vision cannot concentrate on multiple images at once), which will be consecutive and much more effective if the solution of fragmenting the page into several pages does not satisfy you.
However, of course, scrolling through a lot more images leads to the same problems mentioned above: none are highlighted and stand out, it is tedious and boring to scroll through (or watch scroll) a large number of images and none stand out, the images at the beginning of the scroll will be the only ones to really attract attention.
Another type of automation exists but requires dynamic pages. This means that the image files (or rather their location addresses *URLs) must be stored by a database and that a program (e.g., PHP) can generate the display in a way that varies (from sorting, ranking, various organization) allowing the user to clearly access the information or the information (or image(s)) that the user wants to see.
Linking pages together is simply called providing a link that allows one to navigate from one page to another
<a href="nextpage.html">go to the next page</a>
Of course, we can (and should) combine different possible techniques.
Thus nothing prevents having a PHP program relying on a database that displays images in a viewer created in JavaScript (yes, everything is connected, technologies are complementary, and different technologies each have their role/usefulness) and of course, if that requires having multiple (dynamic or not) pages, there’s no reason not to take advantage of it.
Important:
Internet sites need to consist of dynamic pages: the contents or a part of what is displayed (texts, images, ...) are provided by the database to the program that will generate (automation) the display and allows for the inclusion of criteria that may vary over time.
Concretion, this means that without this principle, when you need to change, add or modify images (or other content), if you have a program that automates content processing, you simply need to change the content in the database for that. Without it, you have to redo the layout, presentation, and writing for the page every time there’s a change. This ultimately leads to a colossal waste of time since it forces you to do the work every time. Automation is the only viable solution if you want a sustainable site that can be easily managed rather than having to rewrite HTML, CSS, and possibly JavaScript every time you want the smallest change. The more content you have, the more frequently you need to modify that content, the more work it will take without dynamic pages.
And if you think your site doesn’t need to change over time, you are mistaken and are not thinking long term. Such cases exist; they are static sites. They can suffice but remain sites of lesser quality and added value for users and thus have less chance of presenting interest compared to others that provide better and varied content.
Thank you for your response, but actually I would like to create a 2D game, a Visual Novel (a narrative game where the player chooses between several options represented by buttons that display a different image and change the story based on the player's choices) accessible from the internet, and I might have needed to start with that.... That's why I want to load the images separately from the base code because all the possible scenes need to be stored... to display them at the right moment (in a JavaScript canvas for easier interaction).
Ok,
it's not 100 images to load on a page...
Everything I've said remains true and applicable to your project.
I forgot - the message was already long - to talk about preloading possibilities, but also because in the case of 100 images, no solution is suitable: you simply should not load 100 images.
As for making a game (or a site), you need to do more than wish; you have to work/learn to do it.
What you want to do is relatively simple (I assume CANVAS is for adding animation and effects? Because to display images, the IMG tag is more than sufficient), and if you want to do it the wrong way, you do not need programming but rather to know how a LINK to another page works.
Of course, with programming, you can do better, for example, by modifying text and images as well as managing interaction (event-driven programming),
this changes a text when clicked:
https://www.w3schools.com/jsref/prop_html_innerhtml.asp
As JavaScript can manipulate HTML and CSS, it can also manipulate which file is loaded by an image (img tag in HTML) in the same way as any other element on a page.
I therefore suggest that you learn (work, that is ;) ) and see what you can manage to do after a few months of classes. This will prevent you from asking questions that don't need to be asked.
What you want is very basic and therefore easily approachable (see my pure HTML example). There are also dedicated tools for game creation that have a different approach (example: unity3D).
It's good to wish, but without work, you will have nothing. You should start there to confront reality rather than imagining things that don't need to be and that way you'll talk (or have questions) about real subjects.
If we change the address of an image with JavaScript, only one image is loaded at a time, whether you do it 100 times or a thousand. If it's during an event (in programming) like a click on a button (from there to interactive choice, it's just a step) that triggers a function of the program that will change the displayed image, the image is only downloaded at the moment of the click, so there’s no need to load 100 images simultaneously.
Of course, there are much more advanced techniques and a wide range of possibilities to improve both what is offered to the user of the program and to facilitate development and improve its quality; such as image preloading.
But, before moving on to more advanced techniques, you must go through the basics, which you do not have.
it's not 100 images to load on a page...
Everything I've said remains true and applicable to your project.
I forgot - the message was already long - to talk about preloading possibilities, but also because in the case of 100 images, no solution is suitable: you simply should not load 100 images.
As for making a game (or a site), you need to do more than wish; you have to work/learn to do it.
What you want to do is relatively simple (I assume CANVAS is for adding animation and effects? Because to display images, the IMG tag is more than sufficient), and if you want to do it the wrong way, you do not need programming but rather to know how a LINK to another page works.
<img src="imagedebut.jpg" alt="beginning of the game" /> <p>Do you want to start?</p> <a href="pagedebutdujeu.html">yes</a> <a href="autres.html">no</a>
Of course, with programming, you can do better, for example, by modifying text and images as well as managing interaction (event-driven programming),
this changes a text when clicked:
https://www.w3schools.com/jsref/prop_html_innerhtml.asp
As JavaScript can manipulate HTML and CSS, it can also manipulate which file is loaded by an image (img tag in HTML) in the same way as any other element on a page.
I therefore suggest that you learn (work, that is ;) ) and see what you can manage to do after a few months of classes. This will prevent you from asking questions that don't need to be asked.
What you want is very basic and therefore easily approachable (see my pure HTML example). There are also dedicated tools for game creation that have a different approach (example: unity3D).
It's good to wish, but without work, you will have nothing. You should start there to confront reality rather than imagining things that don't need to be and that way you'll talk (or have questions) about real subjects.
If we change the address of an image with JavaScript, only one image is loaded at a time, whether you do it 100 times or a thousand. If it's during an event (in programming) like a click on a button (from there to interactive choice, it's just a step) that triggers a function of the program that will change the displayed image, the image is only downloaded at the moment of the click, so there’s no need to load 100 images simultaneously.
Of course, there are much more advanced techniques and a wide range of possibilities to improve both what is offered to the user of the program and to facilitate development and improve its quality; such as image preloading.
But, before moving on to more advanced techniques, you must go through the basics, which you do not have.
I finally found a solution to my problem. I looked at it from a different point of view. Instead of finding how to link two HTML pages to store my images, I linked my HTML code to a .js file where I have the list of images.
I used the following
Thank you again for guiding me!
I used the following
document.write("<img id=\"img1\" src=\"img/mon_image.png\">")
Thank you again for guiding me!
document.write is ABSOLUTELY TO BE AVOIDED for well-known reasons.
https://developer.mozilla.org/en-US/docs/Web/API/Document/write
Of course, one must use element creation with the createElement method and include the elements with appendChild; otherwise, it will mess up the DOM (erasing all the content of the page before writing the new one) or possibly innerHTML or innerText depending on whether you need to add/modify an element of the page or text on the page.
Do you still not understand that for a page to be displayed, an HTML page must be read by a browser... so HTML pages are independent (2 displayed pages = 2 browser tabs = 2 different pages).
https://developer.mozilla.org/en-US/docs/Web/API/Document/write
Of course, one must use element creation with the createElement method and include the elements with appendChild; otherwise, it will mess up the DOM (erasing all the content of the page before writing the new one) or possibly innerHTML or innerText depending on whether you need to add/modify an element of the page or text on the page.
Do you still not understand that for a page to be displayed, an HTML page must be read by a browser... so HTML pages are independent (2 displayed pages = 2 browser tabs = 2 different pages).