Is there a way how I can link HTML pages together and share information between them without a database?
Question
Hi (English isn't my first language so forgive me for any mistakes),
I need some help with my code. I'm working on a website for a school project. I need to make a professional website with HTML/css/php/JavaScript. My subject is the videogames CS:GO. The main purpose of the site is to give information about how to play surtain maps/wapens etc. I wouldn't say that I'm good at HTML, but I know how to do things like a navigation menu and videos/positioning in css.
I currently have a index file and around 30 separate files containg information about the game. I know that I can use a database for this, but that isn't the purpose of this assignment. Almost every file is exactly the same besides the information/some Images.
I would like to know if there is a way how I can have one page countaing the code for my header/navigation menu/footer and another just for the information. I can keep it like I currently have, but every time when I edit something about a file name/location do I have to open every single file. A example: When I have a file linked in my navigation menu and I change the name of a file, let's say it's called map1.html and I change it to map_1.html . I have to open and manually change every single file.
When I did my own research I found the iframe attribute. But I couldn't get it to work successfully. So is there something else I could use? Maybe something with JavaScript or php? I also have no experience with JavaScript or php, so if you post some code please explain a little how it works and how I could use it.
In my head do I have this code: . I know that this doesn't work, but it gives an better idea on why I try do do. In the navigation-menu.html is only the code for the navigation menu and the css, nothing els. I searching for something like this. The purpose for the line is to copy everything in the navigation-menu.html file and display it.
An example of a page. I would like to have things like the ,header, footer to be in a seprate file. Just for clarifications, the body class if for different backgrounds on each file
<html>
<head>
<!--Titel/Icon/CSS files-->
</head>
<header>
<!--Banner/2 small images-->
</header>
<body class="GW-CT-AUG">
<ul id="navigatie_menu">
<!--Other pages (history-about us-home(index.html) -->
<li><a>Game Modes</a>
<ul>
<!--The different gamemodes-->
</ul>
</li>
<li><a>Maps</a>
<ul>
<!--The different maps-->
</ul>
</li>
<li><a>Wapens</a>
<ul>
<!--The different guns-->
</ul>
</li>
<li><a>Equipment</a>
<ul>
<!--The different Equipment-->
</ul>
</li>
</ul>
<center>
<!--An images-->
<p class="tekst">
<!--Information about the game-->
</p>
</center>
</body>
<footer class="footer" id="footer-aug">
<!--footer-->
</footer>
</html>
3 answers
solution1
0 ACCPTED 2018-10-08 19:10:37
Instead of creating a header file and a footer file you may create the content in a different file. First you create file for example index.html . Please note that I've added an id ul_gamemodes and another ul_maps .
In the javascript the function readFile(file, parent) takes 2 arguments: the file where you have the content (an URL) and the parent div where you want to put the content from the file.
<html>
<head>
<!--Titel/Icon/CSS files-->
</head>
<header>
<!--Banner/2 small images-->
</header>
<body class="GW-CT-AUG">
<ul id="navigatie_menu">
<!--Other pages (history-about us-home(index.html) -->
<li><a>Game Modes</a>
<ul id="ul_gamemodes">
<!--The different gamemodes-->
</ul>
</li>
<li><a>Maps</a>
<ul id="ul_maps">
<!--The different maps-->
</ul>
</li>
<li><a>Wapens</a>
<ul>
<!--The different guns-->
</ul>
</li>
<li><a>Equipment</a>
<ul>
<!--The different Equipment-->
</ul>
</li>
</ul>
<center>
<!--An images-->
<p class="tekst">
<!--Information about the game-->
</p>
</center>
<footer class="footer" id="footer-aug">
<!--footer-->
</footer>
<script>
function readFile(file, parent){
var myContent = new XMLHttpRequest();
myContent.open("GET", file, false);
myContent.onreadystatechange = function ()
{
if(myContent.readyState === 4)
{
if(myContent.status === 200 || myContent.status == 0)
{
var myText = myContent.responseText;
console.log(myText);
parent.innerHTML = myText
}
}
}
myContent.send(null);
}
readFile("gamemodes.txt", ul_gamemodes);
readFile("maps.txt", ul_maps);
</script>
</body>
</html>
Next you create a file named gamemodes.txt where you put the content you want to put in the #ul_gamemodes , and another file maps.txt where you put the content you want to put in the ul_maps . Please note that in the index.html you read these files:
readFile("gamemodes.txt", ul_gamemodes);
readFile("maps.txt", ul_maps);
Now when you open the index.html you can see the content from those 2 files in place.
Since this wouldn't work in SO you may open this Codepen Project
solution2
0 2018-10-08 19:47:41
The other answers are over complicating it.
If you have PHP available but can't use databases, then you can do what you want with having a header, footer, and content and just include() -ing as needed at the right spot. Quite a few of my "static" pages at work (well, all of them honestly) look something like
<?php include($_SERVER['DOCUMENT_ROOT']."/global-style/header.php"); ?>
<?php include($_SERVER['DOCUMENT_ROOT']."/this_app/header.php"); ?>
<?php include($_SERVER['DOCUMENT_ROOT']."/this_app/left_side.php"); ?>
<div id="main_content" class="main_content">
Regular HTML stuff goes here!
</div> <!-- end main_content -->
<?php include($_SERVER['DOCUMENT_ROOT']."/this_app/right_side.php"); ?>
<?php include($_SERVER['DOCUMENT_ROOT']."/global-style/footer.php"); ?>
If you can only use pure HTML, CSS and JavaScript you either can use an <iframe> or do some trickery with JavaScript and http requests to load content from an external file/url into a <div> tag.
iframe - https://www.w3schools.com/tags/tag_iframe.asp
include via javascript - https://www.w3schools.com/howto/howto_html_include.asp
As for linking and navigation, you can always use either anchor tags or GET arguments on the URL to keep it all "single file" off index.php or index.html or if all else fails simply build a menu file to bring in with plain old href links to your content file with the header/footers applied.
solution3
-1 2018-10-07 20:39:46
Why don't you create a PHP file where you will write variables like:
$SESSION['example'] = echo "SOMETHING... SOMETHING... SOMETHING..."
and call for them in each files?
For example:
You would like to create a div with logo of CS:GO then you write and stylize how does it should looks like and then input it into the echo statement.
like this:
echo "<div class='example'>LOGO OF CS:GO</div>";
Remember to insert it into the <?php ?> tags and ofc to start session :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.