First time making a webpage in html. I have an assignment to format a bunch of text using appropriate html tags. No problem. But I would like to clean up my code by storing the paragraphs in a separate file. I have been searching for hours and cannot find anything.
Bottom line what I want to do:
have a file: strings.{html/xml/php/js}
and access variables from that file in my page index.html doing something like this:
<p>$someVarName</p>
This seems like a bit of a strange 'optimization', one that is not usually made, at least as far as I understand the question.
What you can do is have a JavaScript file e.g. script.js, and reference it in your index.html file:
<script language="javascript" type="text/javascript" src="script.js"></script>
In script.js you can insert custom HTML as such:
document.getElementById('tag-id').innerHTML = '<p>some text</p>';
To reduce the page load time of a website in the browser usually one tries to deliver one HTML file per page and one compact CSS/JS/image/SVG file for the whole website. All files are usually aggregated server side from multiple resources as you like to do.
Here are some common ways to enrich HTML pages and their creation process:
Using an iframe you can let the browser import and display another page using a single HTML tag but this is not recommended because it complicates layouting and a content's URL is not visible to the user in the browser's address bar.
Using PHP you could have an index.php with the contents of your index.html plus some PHP snippets printing variables from an included variables.php. PHP requires server side execution which is typically implemented using Apache2 webserver. A PHP script, index.php, would be executed each request / each time a user accesses the page.
index.php
<html>
<?php require_once 'variables.php'; ?>
...
<?php print $property1; ?>
<?php print $property2; ?>
</html>
variables.php
<?php
$property1 = 'value 1';
$property2 = 'value 2';
?>
Using XSLT you can transform the HTML as XML. This requires the HTML formatted as well-formed XML. XSLT can be executed both client and server side. XSLT 1 is limited but supported by major modern browsers. XSLT 2 is not supported by most browsers but often executed on the server side or rather offline to generate aggregated static html pages from XML/HTML with e.g. Saxon CE. On the downside XSLT may be more difficult to start with than PHP.
Using JavaScript (JS) you can also let the browser load additional documents into a currently displayed document. This is also known as AJAX and can be done with e.g. jQuery or AngularJS. With JS you can create interactive web pages and most modern websites make use of it.
BUT: Loading contents with JS on the client side limits the ability of search engines to index your content (bots usually do not execute JS). You should only use this method if your contents should not be crawled by bots or if you provide an alternative.
Of course, there is also a plethora of other template/programming languages that offer server side solutions for your problem like Java, Python and Ruby and their specialized frameworks.
Additionally you should check out one of the many existing PHP CMS (server side HTML page generator with UI to edit content).
Related
Does HTML support splitting source over multiple files? I'm looking for some equivalent of C++'s #include; or maybe something like C#'s partial; an element that could take source path and inject the file contents at that place.
Apologies if this has been asked before. Google and SO searches didn't return much. I'm not a web guy, but the only solution I found was using an iframe, which many people do not like for various reasons.
It is just that my html source is becoming huge and I want to manage it by splitting into multiple files.
You can't, at least not in flat-HTML. What you can do is using Javascript to load and place the snippets. iframes are also non-ideal because contrary to what happens with directives like #include and partial, those snippets will never be compiled in one single page.
However, I think it's important here to understand how your pages will be served. Is this a static website? Because in this case I would write a simple script in your language of choice to compile the page. Let's say that you have a base like this:
<html>
<head>
<!-- ... -->
</head>
<body>
{{ parts/navigation.html }}
<!-- ... -->
</body>
</html>
You could write a script that runs through this file line by line and loads the content into a variable named, for example, compiled_html. When it finds {{ file }} it opens file, reads its content and append it to compiled_html. When it gets to the end, it writes the content of the variable into a HTML file. How you would implement it depends on the languages you know. I'm sure that it's pretty straightforward to do it in C#.
This way you'll be able to split the source of your HTML pages into multiple files (and reuse some parts if you need them), but you'll still end up with fully functional single files.
It is easily possible, if you are running PHP:
The PHP Language has the "include" command built in.
Therefore you can have your "index.php" (note you have to change the suffix, for the PHP parser to kick-in) and simply use following syntax.
<html>
<head>
[...] (header content you want to set or use)
</head>
<body>
<?php
include "relative/path/to/your/firstfile.html";
include "relative/path/to/your/secondfile.html";
include "relative/path/to/your/evenwithothersuffix/thirdfile.php";
include "relative/path/to/your/fourth/file/in/another/folder.html";
?>
[...] (other source code you whish to use in the HTML body part)
</body>
</html>
Basically making you main index.php file a container-file and the included html files the components, which you like to maintain seperately.
For further reading I recommend the PHP Manual and the W3Schools Include Page.
not possible with static html.
in general, this problem (lazy-fetching of content) is solved with a template processor.
two options:
template processor runs on the server side
any language
static website generators, server side rendering
template processor runs on the client side
javascript
web frameworks
I have several HTML pages and some of the content is same for all the pages. Is there a way to put the content into a single file and include it in all the HTML Pages?
Lets say that the common data is in HTML format.
Yes you can use iframes for this purpose.
Design your master page in .html format and use it with iframe tag
<iframe src="MasterPage.html"></iframe>
Refer following link:
http://reference.sitepoint.com/html/iframe
I think what you are looking for is a templating solution.
You can do it in jsp as follows
by using two ways
<jsp:include page="reuse.html" />
or
<#include file="reuse.html">
Have a look at this question What is the difference between <jsp:include page = ... > and <%# include file = ... >?
You can do this in three places:
At build/publication time — you generate HTML documents from your data sources and then publish static files. This option works for everybody, but can make the build times rather long for very large sites. I use ttree for this.
At run time, on the server — this works in much the same way as the previous option, but is done on the server and on demand (i.e. when a page is requested). Template-toolkit is also an option here, but here are many many others, including Django templates and Smarty.
At run time, on the client — this involves pulling the content together using frames or JavaScript. It is unfriendly to search engines and will break bookmarking unless you are very careful. I don't recomment it.
One thing you can try is using PHP.
for example if all pages have a common header, create a new document with the name of header.php and place the contents of the header div inside. Every other page you want the header to appear just call it by using :
<?php include_once("header.php");?>
Hope this helps
The best way to do this is at run time.
This means using PHP, ASP, JSP or another server-side scripting solution to join your pages together on demand when sending them to the client.
In PHP, this can be achieved with the following:
<?php
include_once("head.php");
?>
<!-- some body content -->
<?php
include_once("foot.php");
?>
Managing your header, footer and content all separately makes it very easy to update your design without having to edit many files.
It is not recommended to do this client-side with frames/iframes, as this is very unfriendly to search engines and can slow down your server as several HTTP requests must be initiated.
I am developing a project and find that there are elements that are common to all pages, I wonder if there is any way to define these elements generally and call them from your html to avoid having to define each of the pages. thank you very much for your help
test.html
<div>Menu</div>
When you need to have this menu, just call this code in your page:
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
load()
Another option could be AngularJS, or just something like includes with PHP.
I don't know any way to do exactly this with pure HTML, but by mixing in a little server side script, you can. Just to give you an idea what it would look like:
This example uses PHP. If you are on a Microsoft server, you would need to translate this example into .NET or .aspx.
First, save the following to a file called "mytest.php" in the same folder as your other pages. (You can put it in a subfolder if you wish, but for this example I will keep it simple).
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Just one line for this test. A little useless, but you can see the point.
Now, in the <head> tag of your HTML, you can do this (I added the <head> tags just so you can see it... You would not want to have TWO sets of <head> tags.)
<head>
<?php include 'mytest.php'; ?>
</head>
Now, visit the page and display the HTML and you should see that line incorporated into your HTML. Note that any document that contains PHP code (as above) must end with a .php extension.
As #loops suggested, I would highly recommend AngularJS for the rescue.
It's a great MVC framework built with JavaScript and no external dependencies.
It offers the possibility to create custom elements using their Directives
So you could create a new element <mymenu></mymenu> and you can give this new tag some behaviour as well as bind events to it.
AngularJS takes care of all the rest and your new tag will be available across all the pages of your application.
And yes, you are correct thinking that should be done on the client side rather than server side.
I am happy to provide a full working example for you once you get your head around the framework first. Otherwise I think it will be too much information at once ;)
I know there is a list of similar questions but all handle pages without user interaction (static even though some js may be there).
Let's say we've a page the user can interact (e.g. svg than changes, or html tables with drilldown - content changes). Those interactions will change the page. Same happens in stackoverflow when entering the question...
The idea is adding a button, "convert to pdf" taking the state of the html and sending to the user back a pdf version (we've a Java server).
Using the print of the browser is not the answer I'm looking for :-).
Is this a stick in the moon ?
You would have to store the parameters that generate the HTML view (i.e. what the user clicks on, what selections they make, etc). If you can have a list of parameters that generate the HTML view, you can have a method which accepts the list of parameters (JSON post?), generates the HTML view and passes it to your PDF generating routine. I'm not too familiar with Java libraries for this purpose, but PHP has TCPDF can take html output to basically generate a PDF for you. Certainly, there are Java libraries which will allow you to do the same thing, or you can use the parameters to get a list of rows/arrays which can be iterated over and output using the PDF library of your choice.
Both iTextPDF and Aspose.PDF would allow you to do that (I've seen them used in two different projects), but there is no magic and you will have to do some work.
The steps are roughly:
Get (as a string) the part of the document which you want to print with jQuery or innerHTML
Call a service on the server side to convert this to PDF
[Serverside] Use a whitlist - based tool to clean up the hmtl (unless you want to be hacked). JSoup is great for that.
[Serverside] Use IText or Aspose API to create the PDF from the HTML (this is not trivial, you will have to read the doc)
Download the document
I'd also recommend DocRaptor, an HTML to PDF API built by my company, Expected Behavior.
DocRaptor uses Prince XML to generate PDFs, and thus produces higher quality results than similar products.
Adding PDF generation to your own web application using our service is as simple as making an HTTP POST request to our server.
Here's a link to DocRaptor's home page:
DocRaptor
And a link to our API documentation:
DocRaptor API documentation
This would be an HTML minifier that skips everything between <% and %>.
Actually, an Open Source HTML minifier would be a good starting place, especially if it already had code to preserve the contents certain blocks like <textarea. It's code might be able to be made to preserve <%%> blocks also.
I am aware that HTML minifiers are less common because that changes more often than JS/CSS and is often dynamically generated, but if the JSP compiler could be made to minify before making its compiled cache copy, it would result in minified HTML.
Also, an ASP minifier would probably be very close to the same thing. And I don't care about custom tags that have meaning to the server. The only stuff that matters to the server (for my company) is in the <%%> blocks.
This question is a bit outdated but an answer with a resource still hasn't made it's way to the posting.
HtmlCompressor makes this very thing possible and quite simply.
You can use it via Java API:
String html = getHtml(); //your external method to get html from memory, file, url etc.
HtmlCompressor compressor = new HtmlCompressor();
String compressedHtml = compressor.compress(html);
Or you can use it via Taglib:
Download .jar file of the current release and put it into your lib/ directory
Add the following taglib directive to your JSP pages:
<%# taglib uri="http://htmlcompressor.googlecode.com/taglib/compressor" prefix="compress" %>
Please note that JSP 2.0 or above is required.
In JSP:
<compress:html removeIntertagSpaces="true">
<!DOCTYPE html>
...
</html>
</compress:html>
Cheers
JSP is transformed to Java code and subsequntly compiled to bytecode. Minifying JSP has no purpose then.
You can process output generated by JSP page by writing custom filter. I have written filter to trim empty lines and unnecessary whitespace from JSP output, unfortunately it's not public. But if you google around, I'm sure you can find servlet filters to remove unneeded stuff from generated HTML.
Have a look at the Trim Filter (http://www.servletsuite.com/servlets/trimflt.htm), which you can simply map in your web.xml.
It will help you to remove whitespace, and can also strip off comments.
From my experience, whitespace occurs a lot in JSPs if you use tags that themselves don't have any output, such a the JSTL C control tags (c:if, c:choose, ...), and then this comes in very handy.
As you are already aware that HTML minification is less common and it also results in errors sometime than getting any benefit out of it. HTML is also dynamically generated content.
On the other hand, there are many better ways to speed up the application front end.
Minimizing HTTP requests
Minifying JS, CSS contents
gzip/deflate contents
Leveraging browser cache
Server Side caching, until resource changes
And many other - http://developer.yahoo.com/performance/rules.html
WebUtilities is a small java library to help speed up J2EE webapp front-end. Below is the link.
http://code.google.com/p/webutilities/
With new 0.0.4 version it does many optimization and results in significant performance boost. Please have a look in case you find it useful.