I have multiple webpages that have the same header:
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.16/af-2.2.2/b-
1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-1.5.1/b-print-1.5.1/cr-1.4.1/fc-
3.2.4/fh-3.1.3/kt-2.3.2/r-2.2.1/rg-1.0.2/rr-1.2.3/sc-1.4.4/sl-
1.2.5/datatables.min.css"/>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js">
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js">
</script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-
2.5.0/dt-1.10.16/af-2.2.2/b-1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-
1.5.1/b-print-1.5.1/cr-1.4.1/fc-3.2.4/fh-3.1.3/kt-2.3.2/r-2.2.1/rg-1.0.2/rr-
1.2.3/sc-1.4.4/sl-1.2.5/datatables.min.js"></script>
Since these references change with time, I'd like to embed this code in 1 html page and then reference that page in the multiple webpages. That seems much easier than going in to 20 html files and updating manually, as needed.
I've scoured around and can't find what is probably an obvious answer. Is there a way to do this with an "include" statement?
Any help is much appreciated!!!!
First question, what framework/language you're using to develop your website? What you're trying to do is actually creating web design template.
For example in html with php,
<html lang="en">
<!-- Top Bar -->
<?php require 'TopBar.php';?>
<!-- Main Navigation + LOGO Area -->
<?php require 'MainNavigation.php';?>
<!-- Banner -->
<header class="flat-header">
<!-- Banner Content-->
<div class="header-content">
<div class="header-content-inner">
<h1 class="homeHeading animated slideInDown">Singapore Dreams - Our Business.<span>
</span></h1>
<!--<h1 class="homeHeading animated slideInDown">Financial Consulting isn’t a thing we do. <span>-->
<!--It’s the thing that runs our business.</span></h1>-->
<div class="konnect-button-1 animated bounceIn"><a href="about-us.html" style=" border: none;">Read More</a></div>
</div>
</div>
</header>
<!--Top Call to Action-->
<?php require 'indexCallToAction.php';?>
<body>
//normal html file here
</body>
</html>
TopBar.php
<?php
/**
* Created by PhpStorm.
* User: Marcia
* Date: 23/5/2017
* Time: 10:03 PM
*/
include 'var.php';
echo'
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Marcia Ong">
<meta name="keywords" content="">
<!-- Favocon -->
<link href="img/sg-alliance-logo.png" rel="shortcut icon" type="image/x-icon"/>
<!-- Title -->
<title>SG </title>
<!-- Bootstrap Core CSS -->
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom icon Fonts -->
<link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Animated CSS -->
<link href="css/animate.css" media="all" rel="stylesheet" type="text/css" />
<!-- Main CSS -->
<link href="css/default.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn\'t work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- Body -->
<body>
<!-- Pre Loader -->
<div class="loading">
<div class="loader"></div>
</div>
<div class="konnect-info">
<div class="container">
<div class="row">
<!-- Top bar Left -->
<div class="col-md-6 col-sm-8 hidden-xs">
<ul>
<li><i class="fa fa-paper-plane" aria-hidden="true"></i>';echo $EnquiryEmail;echo ' </li>
<li class="li-last"> <i class="fa fa-volume-control-phone" aria-hidden="true"></i>'; echo"$contactNum"; echo '</li>
</ul>
</div>
<!-- Top bar Right -->
<div class="col-md-6 col-sm-4">
<ul class="konnect-float-right">
<li class="li-last">
<a target="_blank" href="https://twitter.com/Sg_Alliance1"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a target="_blank" href="https://www.facebook.com/SG-Alliance-133770687187613/"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a target="_blank" href="https://www.instagram.com/sg.alliance/?hl=en"> <i class="fa fa-instagram"></i> </a></li>
</ul>
</div>
</div>
</div>
</div>
' //end of echo
?>
<!--<a target="_blank" href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a>-->
<!--<a target="_blank" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>-->