This question already has answers here:
HTML5 include file [duplicate]
(8 answers)
Closed 9 years ago.
I have 2 HTML files, suppose a.html and b.html. In a.html I want to include b.html.
In JSF I can do it like that:
<ui:include src="b.xhtml" />
It means that inside a.xhtml file, I can include b.xhtml.
How can we do it in *.html file?
using html 5 (if it can be done at all in html 5).
Surprisingly, the same question was asked and it is possible: HTML5 include file
Rafa's answer:
Use the object tag:
<object name="foo" type="text/html" data="foo.inc"></object>
foo.inc should include valid HTML.
I tested it on Konqueror, Firefox and Chromium.
Note you must use a separate </object> tag otherwise any content after it gets discarded.
If you find it useful (I do), please upvote Rafa answer (not mine) because "it is not possible" is spreading like disease.
If your server supports SSI (server side includes) you can put the following in your html-files without needing a scripting language or whatever. Apache has SSI enabled by default (I think?)
<!--#include file="same_path_file.html" -->
<!--#include virtual="docroot_file.html" -->
"file" is relative to the current file, and probably what you would use for including related files like "relevant_article_poll.html".
"virtual" is relative to document root (ie, your website root) and you would use it for including global files, like headers and footers.
Doesn't really matter which one you choose, but it's useful to know the difference between the two.
Also, the include directive makes a new internal http request to the server for each file, so you could include php files and the likes and they would be executed as they should.
Here's a useful overview of SSI: http://en.wikipedia.org/wiki/Server_Side_Includes
To use the PHP include function in HTML5, you just have to edit your .htaccess file as follows:
<Files *.html>
ForceType application/x-httpd-php
</Files>
Now you can use any PHP code in your html file like this:
<?php include 'menu.html'; ?>
Cheers ;)
HTML5 is no different from HTML 4.01 in this sense in that this simply can't be done without scripting of some sort.
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
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).
I know you can use IE conditional statements to serve CSS files, but is it possible to do the same to html.
For example, when you go to a website, and it recognizes you are using IE 7, so it serves you a different html file
Since the HTML is called for first, you'll need to do this server-side. Using PHP, you'll need if($_SERVER['HTTP_USER_AGENT'] === 'MSIE 7'){ //then... }
i'm making a website for someone who is not particularly well acquainted with html and i want them to be able to edit the content of their webpage just from a blank text/html file (or easier method),
i'm wondering if there is anyway i can just have a text document but save it as a html which i could load within <p></p> tags
for example: maindocument.html
<html>
<body>
<p id="text">....[someway of getting text from textdocument.html (or .txt)]....</p>
</body>
</html>
textdocument.html (or.txt)
"text to go within p tags"
you can do this with css style sheets and scripts so is there a way to do this with basic html?
If the web server is running Apache you could use SSI. The files will need to be in .shtm or .shtml format.
Then all you do is
<p>
<!--#include virtual="paragraphs.txt" -->
</p>
I'd usually just use PHP includes though.
If a .txt file is enough, I guess you could use an iframe to load it:
<iframe src="myfile.txt"></iframe>
But if you want rich editing, I'd suggest implementing a WYSIWYG editor and saving it somehow.
The simplest way is to use server-side includes if they are available on your server: http://httpd.apache.org/docs/2.2/howto/ssi.html
Otherwise you might consider using a scripting language like PHP and include the file, like:
<?php include("textdocument.html"); ?>
What file extensions are used most commonly by different languages? Please don't put source file names (like .java) but rather extensions that would be present in a URL for rendered pages.
Here is my (alphabetized) list so far
ASP Classic
asp
ASP.NET
aspx
axd
asx
asmx
ashx
CSS
css
Coldfusion
cfm
Erlang
yaws
Flash
swf
HTML
html
htm
xhtml
jhtml
Java
jsp
jspx
wss
do
action
JavaScript
js
Perl
pl
PHP
php
php4
php3
phtml
Python
py
Ruby
rb
rhtml
SSI
shtml
TS
XML
xml
rss
svg
Other (C, perl etc.)
cgi
dll
Any more? I'll keep updating this based on comments. Largest correct additions (or deletions) is the accepted answer.
Aside: This is for comparing language use online: http://blog.paulisageek.com/2009/10/file-extensions-on-internet.html
Keep in mind that good URL design will completely hide any underlying file types.
I have created a Github gist that contains a list of programming languages and their extensions, here is a subset of the data included in the gist file:
{
"name":"CoffeeScript",
"type":"programming",
"extensions":[
".coffee",
"._coffee",
".cake",
".cjsx",
".cson",
".iced"
]
},{
"name":"ColdFusion",
"type":"programming",
"extensions":[
".cfm",
".cfml"
]}
I hope it is helpful.
languages.json.
.action — struts2
.do — struts1
.xml — XML
.rss — RSS feeds
.atom — Atom feeds(RSS)
(no extension) -- used now a days to increase readability of the URL, check stackoverflow URL
Ruby also tended to use .rhtml in the past.
Stellent uses the .hcsp extension for its page templates.
I believe Django uses .dtl.
.yaws (Erlang Yaws Web Server)
Here is an extension you forgot:
.adp — AOLServer using TCL
Ruby on Rails also uses the following internally for templates (files that are mostly HTML or JavaScript). So they're not really public facing, and are transparent to the end user/robot.
.html.erb
.erb
.rjs
Used to be that most CGI scripts were written in Perl.
IE specific strangeness:
.hta — html application
.htc — html components, allows you to alter IE behavior at runtime, from you website!
Also XML:
.svg — it's not just an image format!
.js, .html, .htm, .xhtml probably deserve a nod.
-SSI (Server Side Includes), use the extension .shtml
Add there:
ASP.NET
.axd
.asx
.asmx
.ashx
.aspx
.aspx
.asp
.css
REBOL tends to use .r
But .cgi is also used by some for REBOL CGI scripts.
ASP.NET needs a couple more, but I'm not sure this is exhaustive:
aspx
ascx
asmx (web services)
Here's a few of the commonly-used (but rarely enforced) extensions for some CSS dialects:
.hss for hss style sheets
.sass for sass style sheets
.less for less css style sheets
.ccss or .pcss for clever css style sheets
Going old school: .cgi
Typically written in C or Perl
.java .cs and .i_am_kidding_i_read_the_question.
On the serious side, swf (Flash) get hidden by the JS that loads them, generally, but they are extensions usually seen by the client. This is a limit case because it's not like JPEG (doesn't allow for web programming) nor like Javascript. But then, neither is PHP/ASP/JSP because from the client side it's just markup :)
.cs ----> C#
.kt ----> Kotlin
.json has become popular as a data xfer format
.png .jpg .gif are the most common graphics, but there are others.
Also video extensions