A good programer believes in code re-useability. I am in new HTML and CSS programming. when i code in HTML i have to write my full code in one HTML file. often many programming logic and code repeats in my code. Is there a way to reuse my code? Does function concept work in HTML?
here i am attaching my code where i have to write following lines repeatedly:
login|
logout|
profile
Just to give you an overview that I thought about.
Directory Structure:
Root
includes
navigation.php
about.php
So on navigation.php you have the following code.
login| logout| profile
Then on about.php by using include function on php put it on your about page.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<?php include ('includes/navigation.php'); ?>
<h1>Hello</h1>
</body>
</html>
There you go.
If you're on PHP, try to Learn Laravel, it's nice. Laravel Link
Edit
I just realized that there's no PHP involved lol.
The best i can think of this:
<!--#include virtual="login.html" -->
ie, use the Server side includes otherwise I dont think so it is possible. Also to note that HTML is a markup language, so code reusability is not something where you have to focus upon.
Firstly, please note that HTML, XML isn't code, it's markup language. :)
Secondly, consider using Template Frameworks in combination with a scripting or programming language. That should promote re-usability of your markups.
ie. PERL with Template Toolkit, PHP with SMARTY, etc.
This is possible in css through Class
.common{Write propert there which is common}
but not possible in html.
Unfortunately HTML is not a programming language, so code reusability can't happen in the way that you think it will. If you however are trying to do a navigation panel or something like that, you can take a look at using iFrames to achieve what you want.
This will help you to include already created HTML files within another.
You can find a tutorial on IFrames here.
This is if you don't want to make use of a scripting language. You will most probably need one.
Hope this helps!
Related
I've made a website with multiple pages, and each page has a header containing a horizontal navigation bar. Every time I've learned something new about HTML or had an idea regarding the design of the heading, I've changed the header. However, after learning and changing some things a couple of times, I realized that I would have to copy and paste the code for the header for each page I had on the website, and I thought that for larger websites, this could be a very time consuming process. Is there any way to save that amount of time?
I completely understand that it's best to just have the code complete before you add it to other pages.
I'm completely ok if the truth is that I have to just do the work and not take any shortcuts.
I'm aware that there are no functions in HTML, I just wanted to make sure that I wasn't coding sloppily or doing anything unnecessary.
I'm currently in the process of learning HTML and CSS, so I apologize if my question seems dumb or absurd in any way. Also, sorry if the title was worded poorly or abnormally, I wasn't entirely sure how to summarize this into one question.
Thanks,
-Ethan S.
What you want is includes. There are several ways to have includes:
Frontend process (preprocessing) with task managers like Gulp, Grunt, Webpack you can embed the same partial HTML into multiple destinations.
Backend process: when using a back-end language, you can achieve this as well.
For simplicity, and given your knowledge is likely 100% front-end only, I would recommend one of the following:
JavaScript: the option for absolute beginners. No backend require, but generally not recommended (potentially insecure, bad practice)
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
</head>
<body>
<div class="header-container"></div>
<script>
(async function () {
const headerHTMLRequest = await fetch('./header.html');
const headerHTML = await headerHTMLRequest.text();
document.querySelector('.header-container').innerHTML = headerHTML;
})();
</script>
<!-- rest of page -->
</body>
</html>
PHP: it's an interpreted back-end language and there are several tools like MAMP or XAMPP that will provide you with an out-of-the-box solution for having a server. There are plenty of free hosting alternatives as well.
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
</head>
<body>
<?php include("header.html"); ?>
<!-- rest of page -->
</body>
</html>
Hope this makes sense. I tried to keep it simple.
I feel your frustration. Okay, I know some people freak out at the thought of PHP, but bear with me. If you have a header you like that you want to use on all of your pages, you can simply put all that code for the header into a separate file and save it as "header.php" and then type:
<?php include 'header.php';?>
at the top of your pages. The only real change you have to make to the rest of your pages is ensure that they are all saved as .php files and NOT .html files.
All you're doing by using that simple line of PHP is importing that chunk of code that makes up your header file ("header.php") into your current pages.
w3schools website has a really great, simple explanation of how to do this.
P.S. when testing PHP pages you MUST be going through the server.
Best of luck! Don't give up.
You are looking for a templating language that has supports for partials.
Partials are smaller, context-aware components in your list and page templates that can be used economically to keep your templating DRY (Don't Repeat Yourself).
Some templating languages have syntax closer to HTML than others so have a look around.
Most templating languages compile on the server. They are not pre-made files that are simply served to your client. Instead they are compiled, upon request, on the server and served as HTML to your clients.
This is in contrast to static HTML files (which is what you probably use now), where the client requests an HTML file and just get's it, as-is.
I personally use Handlebars on a Node.js/Express server because it's syntax is close to HTML.
I heard about HTML5 Boilerplate by Paul Irish. I watched couple of tutorials about it. I even watched the video by Paul Irish himself about the HTML5 Boilerplate. I just understood that HTML5 boilerplate is a template to create a better, quick and cross browser supported User Interface for your web apps.
I just have a little confusion about all the stuff.
Where to put your PHP files when working with boilerplate?
I'm just a beginner and I've always worked with PHP working on a localhost embedded with HTML and CSS, so this stuff is kinda new to me.
I mean where to put your php code in that template.
I don't know if its a stupid question, just think of a novice asking you stupid things :)
You are talking about two separate things - confusing the front-end client-side stuff with the serverside.
If you are used to working with PHP to produce HTML then not much will change. All you need to address is that each page served from the server (i.e. pages generated by the PHP) will need to include the reference to all the CSS and JS required in the HTML5 Boilerplate.
An easy way to achieve this would be to have a php include file containing the header and footer components. For example, in the source for the HTML5 Boilerplate you have a file called index.html, and that contains a line of code:
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
Everything above that include in a file called header.php (for example) and then everything below it include in a file called footer.php
Now every time you serve a PHP page, with whatever content you'd generated serverside, remember to include both these files. This is a standard PHP include technique. All you'd need to ensure was that the paths to each of the JS and CSS sources we handled correctly.
(Alternatively you could use a PHP templating system and have that handle these includes more elegantly. If you have a favourite templating engine use that.)
Edit:
Some very basic pseudo code. Example page "index.php"
<?php
include "header.inc.php";
include "html5boilerplate_components.inc.php";
include "my_css.inc.php";
include "my_js.inc.php";
include "homepage_content.inc.php";
include "footer.inc.php";
?>
Then you'd swap out the homepage_content.inc.php for a different file for a different page. (You'd probably have your CSS/JS etc included in the header include if you wanted it to be tidier. Do what works best for your project that allows more most reusable code.)
Lift is a fun web framework to work with. However, it's really hard for newbies to get the html/xml codes out of snippet codes. Is there a recommended way to do it?
If you use the CSS Selector Transforms (please see http://simply.liftweb.net/index-7.10.html#toc-Section-7.10 ) rather than the Helpers.bind() stuff, you'll find little or no markup in your Scala code.
Thanks.
Just
try to keep the ammount of snippet html as small as possible. For example if there is some static code inside your snippet you dont need there you could just move it into the html file.
and
try to keep it style independent such that the frontend designer can do his job just by editing the html/css/js files.
I am using HTML5, and would like to speed up the creation and editing of my standard HTML template by splitting it into three separate HTML files.
header.html
content.html (this will be edited and will have other names e.g. home)
footer.html
I have looked at the following resources, but I am not sure if this is possible or how to go about it.
http://www.w3schools.com/html/html_head.asp
http://www.w3schools.com/tags/tag_link.asp
In PHP I would just include the files in the right order. Is there an equivelant in just a plain HTML site?
I have googled this, but I don't think Im searching for the right term. I would appreciate any information, or resources available!
Thanks for your time!
For just a static HTML site, there is no html-only way to include files the way you are trying to. You may be able to use server-side includes depending on your server, but by that point, you might as well just use PHP.
Another option would be to make extensive use of Javascript to load the page pieces after the main part of the page is already loaded.
In all cases, though, you will have a major reduction in performance, since a server request is slow. If you need to use templates, just use a dynamic language like PHP.
You can't do it cleanly with HTML. You could use iFrames, but that's far from clean. The optimal solution would be to use PHP. It will also save you the requests from the browser.
You can do it via include files in SHTML or through some server-side processing which can combine the files into one HTML output stream when a user requests the URL. Standard HTML isn't processed on the server so you'll need to use some server-side technology such as .NET, ASP, PHP, CGI, etc.
There is no way to do this with plain HTML. You could do it using JavaScript to load the different pages into their place after loading the main page. But that seems somewhat stange and unnecessary.
The easiest way that I know how to do this is to use a Model-View-Controller (MVC) style framework of some sort. I would use CodeIgniter, which is created with PHP. It's light (2.1 is VERY fast), has incredible documentation, is super easy to understand (even if you don't know much about PHP), creates clean URIs, and will allow you to build dynamic websites (which is what you're wanting to do) with great ease. Your separate pages (called "views" in MVC terminology) will be able to load in the order you choose; in as many controller methods as you need. It's fantastic!
The following are some resources that will help explain what I'm talking about:
CodeIgniter User Guide - Model-View-Controller:
http://codeigniter.com/user_guide/overview/mvc.html
CodeIgniter User Guide - Views
http://codeigniter.com/user_guide/general/views.html
Here are some resources to help you get started with CodeIgniter:
CodeIgniter User Guide:
http://www.codeigniter.com/user_guide
CodeIgniter From Scratch Series by Nettuts+:
http://net.tutsplus.com/sessions/codeigniter-from-scratch/
Here are some resources that you may want if you need to learn more about PHP to start:
http://www.php.net
http://net.tutsplus.com/tutorials/php/the-best-way-to-learn-php/
I hope this helps, and let me know if you need any more help or a clearer explanation. Good luck!
The question is what kind result are you expect? Your question looks like you don't have experience but you feel that is something wrong with your architecture. Do you need it for any bigger webpage or for something smaller? Try to find any CMS and it will have solution to make your work more clear:) If you want to make any experiments, start from begin. You can have one layout and more content files. If your website is simple try with
<body><div>header</div><div><?php include('content'.addslashes($_GET['id']).'.php') ?></div>
<div>footer</div></body>
Don't use iframe, this is deprecated solution:)
In HTML5, you can embed (but not include) HTML documents with the object element, with the iframe element, and with the embed element.
<object data="include-me.html" type="text/html"><!-- fallback content --></object>
<iframe seamless src="include-me.html"></iframe>
<embed src="include-me.html" type="text/html"></embed>
embed
Using embed might be a bit shaky, not least because it’s intended "for an external (typically non-HTML) application or interactive content". When it doesn’t render the HTML document, try to remove the type attribute (at least it then worked in Chromium).
iframe
Using iframe might work for you in combination with the seamless attribute (beware of browser support). The HTML5 (CR) spec has an example:
An HTML inclusion is effected using this attribute as in the following example. In this case, the inclusion is of a site-wide navigation bar.
<!DOCTYPE HTML>
<title>Mirror Mirror — MovieInfo™</title>
<header>
<h1>Mirror Mirror</h1>
<p>Part of the MovieInfo™ Database</p>
<nav>
<iframe seamless src="nav.inc"></iframe>
</nav>
</header>
...
object
The HTML5 (CR) spec has an example:
In this example, an HTML page is embedded in another using the object element.
<figure>
<object data="clock.html"></object>
<figcaption>My HTML Clock</figcaption>
</figure>
I'm an old hand on programming but a wet-behind-the-ears newbie on webprogramming. I ran in to this in a project and I need help identifying the technique/language used.
It is some sort of dynamic web-page that fetches information from a database and displays it in a table. In the html-page that is used these tags are
<!-- some text that has to be some form of commands -->
What is it called? It is impossible to google either the starting tag or the closing tag :/
I know that it somehow uses a c-program to do the actual fetching of the data, but i'm at a loss how it actually works.
What I need is the name so I know what to look for in the form of online resources to learn this and I do hope that this kind of tag-usage is only used by one type of language/technique :)
thanks in advance from archie!
Those tags are just html comments. It's possible that they're being used in a template file, and a server-side scripting language is doing some kind of search/replace to execute commands on the template. If so, it's impossible to say what language it is.
This looks like an HTML comment
http://www.w3schools.com/tags/tag_comment.asp
lessthan-bang-dash-dash is a comment, which closes at dash-dash-greaterthan.
Its a HTML comment, if you need further information http://www.w3schools.com/tags/tag_comment.asp
;)
The tags you posted in code are Comment Tags. They are for adding non-functional comments to code to help readers understand what is being done in the code.