i have 2 html pages. first one is main.html which is my homepage. in Second one, i created a textarea with its own css styling and javascript functions. and i want to include this textarea into main.html. İ created it seperately because its styling and JS codes are already too big and i did not want to create a congestion in main.html.
main.html text.html
<html> <style>
<head> //CSS codes
<style> </style>
//some css in there
//want to add text.html's css codes in there
</style> <div>
</head> <textarea>
<body> </textarea>
<div>some content in here</div> </div>
<div>some content in here</div>
<div>some content in here</div> <script>
//JS codes
</script>
<script>
//some javascript goes there
//want to add text.html's js codes there
</script>
</body>
</html>
i know that i can use php's include function like <?php include 'text.html'; ?> inside main.html or i can use <iframe>. But with both solutions, <style> and <script> tags appears in the middle of main.html which is an ugly and unwanted scene. Thats exactly whats my main problem in here. i want to put text.html's CSS codes inside main.html's <style> tag as well as text.html's js codes into main.html's <script> tag. Is there anything that will do this magic touch?
Do not use <style> and <script> and then put your CSS / JS between them.
Instead, create new files: text.css and text.js for text.html, and main.css and main.js for index.html (you can choose what to name these files, as long as they end in either js for JavaScript or css for CSS).
You should then put all JavaScript files into a folder named js and all CSS files into a folder named css. Again, the names do not really matter.
Your file structure should now look somewhat like this:
|index.php
|includes
|text.html
|css
|main.css
|text.css
|js
|main.js
|text.js
Now, when you need the styles, use
<link rel="stylesheet" href="css/main.css">
(or css/text.css, of course) where you would otherwise have had your <style> tags.
Similarly for JavaScript, use
<script src="js/main.js"></script>
(or js/text.js to include that one) where you would otherwise have had your <script> tags.
Your text.html file should now not contain any script or styling content, nor links to the files (index.php should have all of the links).
So now, just do
<?php
include("includes/text.html");
?>
to include the HTML content.