0
Я создаю простую веб-страницу, в которой хочу, чтобы все СТАТИЧЕСКИЕ ЧАСТИ, такие как NavBar и Footer моей веб-страницы, были в отдельном файле HTML.Как позвонить FOOTER и NavBar из разных HTML-файлов?
Чтобы каждый раз, когда я создаю новую страницу, мне просто нужно позвонить или связать ее, чтобы уменьшить мою строку кодов и время загрузки. Как я могу сделать это здесь? Пожалуйста, помогите мне.
Я хочу сделать что-то вроде этого:
Вот мой код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HACMS</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/Site.css">
<link rel="stylesheet" type="text/css" href="css/dashboard-navbar.css">
<link rel="stylesheet" type="text/css" href="css/footer-style.css">
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/csi.min.js"></script>
<script type="text/javascript" src="js/csi.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script> $("#includedContent").load("sampleFooter.html"); </script>
</head>
<body>
<h1>THIS IS THE BODY</h1>
<!-- THIS IS MY NAVBAR -->
<nav class="navbar navbar-inverse navbar-fixed-top navbar-custom" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="css/images/SSILogo.png" alt="SMESoft Inc." /></a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right navbar-user">
<li><a href="#" class="hvr-underline-from-center"><i class="fa fa-sign-in" aria-hidden="true"></i> Log Out</a>
</li>
</ul>
</div>
</nav>
<br>
<br>
<!-- THIS IS MY FOOTER -->
<footer>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-4 col-sm-4 col-xs-4">
<h3> Company Background </h3>
<p>
SMESoft Inc. (SSI) is a duly registered company in the Philippines Securities and Exchange Commission (SEC). Established in 2008 and registered in 2011, the company has developed its product line of Business Management Solutions for Small to Medium Enterprise.
Part of the company's expansion is the acquisition of authority to distribute the products and trainings of the internationally renowned RMC Project Management Inc. headquartered in Minnesota, USA. It encompasses product distribution and training conduct with RMC trademark across the country and nearby territories (subject to RMC approval).
Two years ago, SSI started extending an advocacy campaign to raise awareness of the Project Management discipline which the founder believes will benefit the people by applying the necessary skills and concepts for a better future.
</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-4 ">
<h3> Keep Connected </h3>
<ul class="social">
<li> <a href="#" class="icoFacebook"> <i class=" fa fa-facebook"></i> Like Us on Facebook</a></li>
<li> <a href="#" class="icoInstagram"> <i class="fa fa-instagram"></i> Follow Us on Instagram</a> </li>
<li> <a href="#" class="icoLinkedin"> <i class="fa fa-linkedin"></i> Follow Us on LinkedIn</a></li>
<li> <a href="#" class="icoPinterest"> <i class="fa fa-pinterest"></i> Follow Us on Pinterest</a></li>
<li> <a href="#" class="icoTwitter"> <i class="fa fa-twitter"></i> Follow Us on Twitter</a></li>
</ul>
</div>
<div class="col-lg-4 col-md-3 col-sm-4 col-xs-4">
<h3> Contact Information </h3>
<ul>
<li>
<span class="fa fa-home" aria-hidden="true"></span>
Unit 511-512 VGP Center,
<p> Legaspi Ayala Avenue,</p>
<p> Village Makati City </p>
</li>
<li>
<span class="fa fa-mobile" aria-hidden="true"></span>
+63 933.049.8890 (SMART)
<p> +63 906.297.0995 (GLOBE)</p>
</li>
<li>
<span class="fa fa-phone" aria-hidden="true"></span>
886-9775 | 512-5955
</li>
<li>
<span class="fa fa-envelope-o" aria-hidden="true"></span>
[email protected]
<p> [email protected]</p>
<p> [email protected]</p>
<p> [email protected]</p>
</li>
</ul>
</div>
</div>
<!--/.row-->
</div>
<!--/.container-->
</div>
<!--/.footer-->
<div class="footer-bottom">
<div class="container">
<center><p>© 2016 SMESoft Inc. All Rights Reserved</p></center>
</div>
</div>
</footer>
</body>
</html>
Возможный дубликат [Включить другой HTML-файл в файл HTML] (http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file) – matthiasunt
какой язык вы используя html? – Pirate
@ Пиратский HTML сам. –