We all know that for any web page or website, HTML is compulsory. HTML is the necessary platform to develop the website. Many times when I created HTML templates, I faced the issue to do the changes and had to do copy paste the changed content in each page. This process took my lots of time. After many thoughts and learning, I found the way, by which we can make common HTML layout of common elements.
Like PHP and other back-end platforms, where we have the option to break common structure in modules and call that module in the page by adding only the module name.
In HTML, I have also decided to use the same process. In HTML, we can create the HTML of web Templates common content (header, navigation, footer etc..) in separate pages and call those pages in a container by using “JavaScript” or “jQuery”.
Below I provide an example of my thought with complete description.
<!Doctype>
<html>
<head>
<title>New Concept to Build HTML for big projects</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- =Include bootstrap CSS File=-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<!-- =Fonts (Raleway) Include= -->
<link href='https://fonts.googleapis.com/css?family=Raleway:400,300,400italic,500,600,700,800,900' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/custom-style.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- =Header Frame Start= -->
<div class=header-frame id=header-frame>
</div>
<!-- =Header Frame Start= -->
<!-- =Middle Frame Start= -->
<div class=middle-content-frame>
<!-- =Left Sidebar Col= -->
<div class=template-sidebar left-content-col id=left-profile-view></div>
<!-- = Mid Frame Start= -->
<div class=mid-content-frame>
<h2>Center Main Content</h2>
<div style="width: 100%; margin:0 0 20px; position: relative;">
<img src="img/dummy-image.gif" alt="" title="" class="img-reponsive" style="width:100%;" />
</div>
</div>
<!-- =Right Sidebar Col= -->
<div class=template-sidebar right-content-col id=right-profile-view></div>
</div>
<!-- =Middle Frame Start= -->
<!-- =Footer Frame Start= -->
<div class=footer-frame id=footer-frame>
</div>
<!-- =Footer Frame Start= -->
</body>
</html>
Steps I Follow-Complete Description
-
First, I need 'wamp' or 'Xampp' server web platform to do website development.
-
Then I create a parent folder of Project with project name in a local environment, for example, “Website 01”, after that I create necessary assets folders like- CSS, js, images etc in the parent folder.
-
After that, I create a HTML page with name “index.html” and start working on it.
-
In “Index” page, I add the relevant stylesheet, js files and then start working on structure part.
-
After that, I created a HTML Code packet in “index.html”. In this example, I create parent containers(header-frame, template-sidebar, footer-frame etc.), where I call the templates common contents like- header, sidebars, footer.
-
Then I create few other HTML pages of common contents like: “header-content.html, footer-content.html, left-sidebar-content.html” etc. I create whole relevant content under the relevant pages. For example - header content creates in “header-content.html”.
-
In the end, I create functionality to call the common content pages in index.html. Below I provided the code through which I get the content in an index page.
<script type=text/javascript>
$(document).ready(function(){
$(window).load(function(){
$("#header-frame").load("common_module/header.html");
$("#footer-frame").load("common_module/footer.html");
$("#left-profile-view").load("common_module/left-sidebar.html");
$("#right-profile-view").load("common_module/right-sidebar.html");
});
});
</script>
Note:
I have suggested this approach because, in big projects, we need to maintain a proper UI standard or common UI things. We can also maintain proper code structure and save our time frame to implement any change in common content on each page. So this approach gives you the separate files where you can change the common content and it will reflect in all the pages.
Still I am working on this approach, hopefully, I'll provide more approaches in HTML Development.
"I also attached a zip folder, where I create an example for proper clarification. You can go through it and let us know if you need any details or clarification."
0 Comment(s)