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.
Related
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.
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.
I am using WebRequest to retrieve a html page from the web and then displaying it using Response.Write.
The resulting page looks different from the original mostly in font and layout.
What could be the possible reasons and how to fix it?
Most probably, the HTML you retrieve contains relative URLs for loading images, stylesheets, scripts. These URLs are not correct for the page as you serve it from your site. You can fix this by converting all of the relative URLs into absolute URLs or by including a BASE tag in the head of the HTML, pointing to the URL of the original page.
Be advised though that deeplinking to images and other resources is considered bad practice. The source site may not like what you are doing.
The reason might be that the original html page contains relative (to the original site) paths to the stylesheet files so when you render the html in your site it cannot find the css.
Does the remote web site include CSS, JavaScript, or images?
If so, are any of the above resources referenced with relative links (i.e.: /javascript/script.js)?
If so, when the browser receives the HTML from your server, the relative links (which were originally relative to the source server) are now relative to your server.
You can fix this by either changing the HTML to use absolute links (i.e.: http://www.server.com/javascript/script.js). This is more complicated than it sounds: you'll need to catch <link href="..."/>, <a href="..."/>, <form action="..."/>, <script src="..."/>, <img src="..."/>, etc.
A more limited solution would be to place the actual resources onto your server in the same structure as they exist on the original server.
The remote site might look at the User-Agent and serve different content based on that.
Also, you should compare the HTML you can retrieve from the remote site, with the HTML you get by visiting the site in a browser. If they are not different, you are probably missing images and/or css and javascript, because of relative paths, as already suggested in another answer.
In the app I am working on, I want to allow the user to upload static HTML pages to replace the default "user profile" MVC View page. Is this possible? That is, the user uploaded html pages will totally run out of MVC, and it can include its own CSS links, etc.
Ideas? Suggestions?
Obviously the .net MVC framework handles static content already for images / css / js etc. It would just be a matter of extending that (routing?) to pass .html files through straight to IIS. That coupled with a dash of rewriting to make prettier urls should do the trick.
However, I would be very, very wary of allowing User Generated Content in the form of raw HTML uploads as you're leaving a very very wide door open. At best, you're going to wind up with people's pages full of spam/porn/adverts. At the worst, you'll be providing a gateway for people to upload cross-site scripting hacks and potentially uploading malicious content to damage your site. The could easily take an existing form on your site, hardcode a load of junk into it, and exectute it from their homepage and break a whole heap of things.
At the very least you should be parsing the uploaded content to reduce it down to just a block of content, and then wrapping that in your own etc. I would personally be much more inclined to just provide users with a nice WYSIWYG editor to edit a single block of content - any editor worth it's salt should provide you with sanitisation as to what elements it includes / excludes. Then store this content fragment in your database / on disc and have the request for a homepage go through a standard MVC controller route and load up that content.
Edit - for you request for examples
You should be able to add an Ignore rule to your routing - there will probably already be examples of these already - crack open your Global.asax file - you will want to put in a call to the routes.IgnoreRoute method :
routes.IgnoreRoute("UserPages/{*path}");
Should let IIS handle all requests for yourwebsite.com/UserPages/aUser/homepage.html - you can also play about a bit more with the wild card fragments / constraints for prettier solutions
I suggest you to make your custom ViewEngine that will allow to use static html markup with custom tags in it, that will be replaced by user info.
So, your view engine may accept something like that:
<html>
<body>
<b><user:FirstName /></b>
<b><user:LastName /></b>
</body>
</html>
and produce
<html>
<body>
<b>First Name</b>
<b>Last Name</b>
</body>
</html>
This custom markup you can store in database, for example.
You can take a look at custom ViewEngine implementations at MVC Contrib project.