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>
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