Whats Different between
<!--#include virtual="JS.htm" --> //note that in this method all JS files imported like below in JS.htm
and
<script src="myjavascript.js" type="text/javascript"></script>
The <!--#include virtual="JS.htm" --> is server side include, won't work without certain configurations and is included by the server there and then already whereas javascript's way is loaded into the page.
Server Side Includes (SSI) is a simple interpreted server-side scripting language used almost exclusively for the web.
The most frequent use of SSI is to
include the contents of one or more
files into a web page on a web server.
For example, a web page containing a
daily quote could include the quote by
placing the following code into the
file of the web page:
With one change of the quote.txt file,
all pages including the file will
display the latest daily quote. The
inclusion is not limited to files. In
this very example, on a server that
can run fortune, the output of it, a
randomly selected quote, can also be
included.
Server Side Includes are useful for
including a common piece of code
throughout a site, such as a page
header, a page footer and a navigation
menu. Conditional navigation menus can
be conditionally included using
control directives.
Source: WikePedia
In the first case the javascript file is included on the server side so it is included inline. In the second example the browser downloads the html file and then sends another request to the server for the javascript file.
First off the #include is used only in classic ASP and has no meaning in ASP.NET so you should retag your question. So when you include something it actually takes the contents of this file and puts it at the place where it should be included, so you end up with a single file downloaded to the client.
When you include a javascript file, the contents of the file are not placed inside the main script but the browser sends a separate request to fetch it. This is the prefered way of including javascript.
The include (SSI -- server side include) puts whatever's in js.htm inline while the script tag references an exterior file without putting it inline.
While the include saves load time up front, it doesn't allow the javascript to be cached by the browser, meaning it can actually be slower in the long run.
Generally, I'd suggest using the script tag referring to an exterior file.
Related
When I view the source code of yahoo mail, I see multiple css files in a link tag using an & symbol as shown below:
href="http://mail.yimg.com/zz/combo?kx/ucs/uh/css/271/yunivhead-min.css&kx/ucs/uh/css/221/logo-min.css&kx/ucs/avatar/css/17/avatar-min.css"
Does anyone know, how they separate each file and load them all using a single http request?
In this case, there seems to be a script that joins the css files into a single response.
The path to the script is http://mail.yimg.com/zz/combo. It accepts several parameters containing paths to CSS files, which will then be joined and possibly minified.
If you play around with the URL, you can see that you could remove the -min-Prefixes from the URL and you get the unminified CSS file in return: http://mail.yimg.com/zz/combo?kx/ucs/uh/css/271/yunivhead.css&kx/ucs/uh/css/221/logo.css&kx/ucs/avatar/css/17/avatar.css
There are several CSS minifiers around, for example CSSmin. But as this is a Yahoo page, they probably use their own CSS compressor, YUI. For details about how it works, see http://developer.yahoo.com/yui/compressor/#work.
Not familiar with the specifics, but the URL looks like a query string with the CSS files as unnamed parameters.
http://mail.yimg.com/zz/combo will be a service that loads the CSS, then concatenates and probably minifies the files before serving back to the client.
My guess is that http://mail.yimg.com/zz/combo is a small program / script which collects all params (like kx/ucs/uh/css/271/yunivhead-min.css, kx/ucs/uh/css/221/logo-min.css, kx/ucs/avatar/css/17/avatar-min.css), bundles them and minimizes them.
This is similar to the bundling feature for MVC, which you can read about at http://www.davidhayden.me/blog/asp.net-mvc-4-bundling-and-minification (or other sources).
If you take the URL apart what you see is that it's a request to something called "combo" passing in various querystring keys (note there's no values) that are the paths to some CSS files.
These keys will then be extracted in the standard way given the server side language being used and the CSS for that url parsed into a variable before being returned in its entirety to the response.
For their yui project, yahoo development have a project called yuiloader. While designed primarily for yui, the code seems like it can be set up to serve other files as well. This does more than COMBO. it also works out dependancies. with JS and CSS.
As Yahoo is the Y in YUI, this is probably their code base for mail.yimg.com.
The code can be found on https://github.com/yui/phploader.
I am currently working on HTML I want to ask a question about website development.I am developing a website in which the basic layout remains same like menu, side menu etc but only the content changes.Currently I have make separate .html file for all web pages.
Can any one tell me is there a way through which I can make a separate file having etc common to all and call it in my html file.I have heard about CSS but it will only change the style and layout.
thanks
If your HTTP (apache 2 and IIS do) server supports Server Side Includes then you can just include another HTML file :
<!--#include file="header.html"-->
your content
<!--#include file="footer.html"-->
no need for a server side language then - just plain HTML
This is very big topic to include in just one answer. SO I will give only the logical part.
Separate your template into multiple chunks like:
1. header.php
2. leftSidebar.php
4. rightsidebar.php
5. footer.php
Now, include these common part on your every page.
For example: index.php
<?php
include "header.php";
include "leftSidebar.php";
echo "<div>".$thedifferentpart."</div>"; //Change only this part on every other page you will create.
include "footer.php";
?>
NOTE: This is only a logical part, applying the concept on your code
Yes, your best bet is a server side language, as Adam said. Absolutely avoid using the old style html frames: they're deprecated, and cause a certain number of problems, both on the programming side and on google optimization.
By using a server side language, you'll still have entire pages, but they will be partially generated by php (or asp) by printing more files into one. For example:
http://www.php.net/manual/en/function.include.php
Bye!
Your best bet in the long term is to use a server side language like ASP.net or PHP
I don't believe that is possible, strictly through HTML. However, you could use server side scripting like PHP to get it done. What you're talking about is a template, and is used quite often. What you would want, is to have your menu items (and CSS) and your header/footer code in separate pages. This way, if you make changes to the menu, or header/footer, it would be reflected in all the pages (written with PHP) you have scripted with the template method.
You would need the menu.html, header.html and footer.html in a place accessible by your main page code. That is, you would use the template method to write the content of your pages.
A psuedo code example in PHP would be like such:
<?php
include('header.html');
include('menu.html');
echo "Your main content items here";
include('footer.html');
?>
Is there a way in code to determine if a Web control contains server blocks (other than, for example, parsing out the file, grabbing the contents of the tag, and scanning for <% ... %>)?
My reason for wanting this is because I have a lot of old Web forms that were designed without any regard whatsoever to HTML conformance. The header control (which is included on every page but is inside the body tag) contains the link tag referencing the site's main stylesheet. As long as the page's head tag does not contain server blocks, I can programmatically insert the link tag into Page.Controls.OfType(Of HtmlHead).First(), then set the visibility of the "bad" link tag to false.
Again, this is all legacy stuff (it's in 3.5 now, but most was written in the .NET 1.1 days), so changing everything over to use a master page is something for which I simply do not have the time and budget. Regardless, it would be nice to see the pages come up with the stylesheet pre-loaded, rather than having the browser begin rendering with no styling, then applying the stylesheet once it reaches the reference to it in the body.
Seems like a silly work around but could you change the name of your CSS file so that when the legacy code goes to load, it can't find it?
Although Mufasa entered his response as a comment, this question has been sitting unresolved too long. Therefore, I will surmise that the only solution is his -- to wrap it in a try/catch black.
I would like to have a common head section (for meta tags etc) across all pages. Can I use something like:
<head>
<!--#include file="head.asp"-->
</head>
to do this? Also, must ASP server side includes contain matching tags, or can I open a tag in one include and close it in another?
Thanks.
Yes you can do this. You can put an include file anywhere you want as long as it does not contain something that needs to be at a specific location. E.g. an include file containing <%# language="vbscript" %> must be included at the very beginning of your script.
Secondly it is OK to open a tag in one file and close it in another but normally is poor practice and you have to be careful.
In case you want to check the order of HTML + raw ASP code you can rename the external file from .asp to .shtml. When a shtml file is viewed over IIS, it will process all #include statements but it will not execute the ASP code.
Yes, you can do that. It's safe.
Also, must ASP server side includes
contain matching tags, or can I open a
tag in one include and close it in
another?
The tags don't have to match; you can indeed open a tag in one include and close it in another.
Although, it might not be the best idea simply because it's confusing.
I'm new to creating html pages etc - but am using VS 2008 just for the editing/intellisense capabilities.
My problem is I have a pure HTML only website (no ASP.NET) and have a fairly extensive header that has to be used in every page. It's frustrating to change the header parts of the HTML across all pages every single time it changes in one. Is there someway I can sort of 'include' the header part HTML in other HTML pages without having to manually cut-paste all-over?
Please note - I'm not using ASP.NET, so I CANNOT and WILL NOT be able to use Master Pages. Is there some other technique is what I want to know - so that when I change the header template in 1 place, it gets reflected in all other. I thought of inline frames, but not sure if that's a crappy way to do that and if it affects SEO
Take a look at Server Side Includes
They'll allow you to edit your header in the one file, which will appear instantly on all pages that include the header file.
Yes, take a look at SSI. Server side includes are a simple way to tell your web server to insert various things at various points in your HTML page.
Example:
<html>
<head>
<!--#include FILE="head.html" -->
</head>
<body>
</body>
</html>
If server side includes don't appear to work as expected, try renaming the page with a .shtml file extension.
Some web servers require that you name your file ".shtml" rather than ".html" in order to enable the parsing of your file.