I have footer section added in the site.master (aspx) page so all my aspx pages will have the same footer.
However, my site contains some html pages as well. I have to manually copy the html/bootstrap code from the footer section and paste it in all the html pages. Whenever I make a small change to the footer, i have to repeat the same across all HTML pages. Is there a way to simplify this process instead of having to do this manually
THank you
You can create footer.html and use iframe in your main html pages; as well as in your master page. For every modification you will need to modify footer.html
<body>
Content.
<iframe src="footer.html"></iframe>
</body>
You can use footerContent
<div id="footerContent" style="text-align:center">
<b>Powered by ASP.NET! </b>
</div>
Related
new to web dev here. I am wondering what is the common practice to have multiple pages with the same components (header, sidebar, footer) but only different in the content. I looked around there are suggestion about using php include and other about html import.
Say I have a basic.html with
<head> fixed stuff </head>
<body>
<div> sidebar here </div>
<!-- Here will be different content other each page -->
<footer> fixed stuff </footer>
<!-- common scripts here -->
</body>
Then I will have another 2 pages, say price.html, blog.html.
How can price.html recycle basic.html but just with different main contents in the body. I don't know how I can use include here. because the content is in the middle.
I would do basic.php and create header.php, footer.php. Then you can do includes on your page templates that would include the header and footer file. Then you can construct your price template...price.php
<html>
<head></head>
<?php include(header.php); ?>
// Price template content
<?php include(footer.php); ?>
</html>
Is that what you are trying to accomplish? This will allow you to add your header and footer content that is universal for your site and make different middle content depending on your page.
So I've just published a website for the first time and I've come up with a problem. It looks like that the _Layout.cshtml page and the views conflicts with each other, because it doesn't load all of the CSS and JS. I get a few errors in the console tab which says:
"
HTML1503: Unexpected start tag,
HTML1512: Unmatched end tag,
HTML1506: Unexpected token.
"
When I go to the source of the page where the error occurs, the layout and the view page are combined together, it gives the error at the seconds head tags. The first first head tag is the one from the Layout page and the second head tags is from the view page. Thus having 2 head tags in 1 page and it conflicts.
Is there something I missed before publishing? Because on localhost it runs fine without these conflicts.
Hope someone can help me, thanks in advance! :)
I recommend you read through this MSDN article on Layout pages using Razor.
It sounds like you're repeating your header information.
From the article,
Many websites have content that's displayed on every page, like a
header and footer, or a box that tells users that they're logged in.
ASP.NET lets you create a separate file with a content block that can
contain text, markup, and code, just like a regular web page. You can
then insert the content block in other pages on the site where you
want the information to appear. That way you don't have to copy and
paste the same content into every page.
In other words, the layout page has all of the markup that you want repeated on every page. This way, you don't have to repeat it manually.
A content page can have multiple sections, which is useful if you want
to use layouts that have multiple areas with replaceable content. In
the content page, you give each section a unique name. (The default
section is left unnamed.) In the layout page, you add a RenderBody
method to specify where the unnamed (default) section should appear.
You then add separate RenderSection methods in order to render named
sections individually.
Since each page is likely to have multiple sections, you can use the RenderSection method to differentiate them in your layout.
Here's an example from the article:
<!DOCTYPE html>
<html>
<head>
<title>Multisection Content</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div>This content will repeat on every view that uses this layout.</div>
#RenderSection("header", required: false)
</div>
<div id="main">
#RenderBody()
</div>
</body>
</html>
As you can see, any header information will be loaded using the RenderSection method. On your view, you would define that section using code similar to this:
#section header {
<div>
This content will only repeat on the page that it is declared in.
</div>
}
So, when you run it, you'll get:
<!DOCTYPE html>
<html>
<head>
<title>Multisection Content</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div>This content will repeat on every view that uses this layout.</div>
<div>
This content will only repeat on the page that it is declared in.
</div>
</div>
<div id="main">
...
</div>
</body>
</html>
The required:false part of #RenderSection("header", required: false) means that you do not have to include the Section "header" in every view that uses the layout. It is optional. If you do not have required set to false, it will be required that you declare it on every page that uses the layout.
On a side note, make sure you only declare your css and javascript that in only one of these locations, preferably the layout page if it is going to be repeated. This does not mean, however, that you cannot have css and javascript in both. For example, if you are using bootstrap in your project, you would include that in your layout page so that you do not repeat the inclusion throughout your views. But, you may, for example, include a view specific javascript file in only your view and not the layout.
Now i have the footer and header of the main page copied in every page of my site, is there a way to set it somehow to update on every page each time i modify it on index, or to get it from an external source?
For a more advanced approach, you can simply use PHP Includes or Requires.
include ‘filename’;
or
require ‘filename’;
The filename’s will simply be your header and footer pages. I’ll show you an example to get the idea.
Let’s say we have a footer and it looks like this:
<?php
echo “<p>Copyright of Brian. SO
1994-“.date(“Y”).</p>”;
?>
Now be mindful that, like always, you can add attributes to the paragraph in your footer and header and even call style sheets that can style those paragraphs or whatever you’ve got in you footer or header.
Now, to have your page(s) display the footer or header that you’ve made, and in your case, both; simply use the format shown here:
<html>
<body>
<h1>Welcome to my Homepage!</h1>
<p>Some text.</p>
<p>Some more text.</p>
<?php include ‘footer.php’;?>
</body>
</html>
Now, notice that in my example, my footer file is in a .php format rather than an .html, that’s because my footer example contained a PHP specific function to render the current year. If yours is strictly HTML with a CSS style sheet linked to it, simply type ’footer.html’; or whatever your file name is. The header works the same exact way!
You can’t do this with plain HTML. You may use jquery or javascript frameworks though.
Follow this solution here: https://stackoverflow.com/a/18712605/3086531
I would like to know that if there is a way that a certain piece of HTML code change on every page I create. In simple words for example, I make a HTML page called 1.html and add a footer code. For example <div class="footer">, and I need to add this footer to every page I make. But then, I don't wanna add this footer code manually on every page since that would take time.
So making it more simple, I make 1.html, 2.html and 3.html and make footer.html and add footer code to it. So instead of adding the actual footer code on every page, I add footer.html to 1.html, 2.html and 3.html and then later edit footer.html that will update on 1.html, 2.html and 3.html.
Hope you get my point.
Thanks.
There is no way of doing that in plain HTML. You either have to use a scripting language (like Python, Ruby, PHP...), or a static website generator like jekyll or hyde.
If you are just writing static HTML files, I would go with the second approach.
You can use a server side language like PHP to do that
1.php
<html>
<body>
Title 1
<?php include('footer.html') ?>
</body>
</html>
2.php
<html>
<body>
Title 2
<?php include('footer.html') ?>
</body>
</html>
If your webserver supports it (many do), you could use Server Side Includes.
rough summary:
change the extension on your html file to .shtml
add this to your page wherever you want your footer to appear
<!--#include virtual="../path/to/footer.txt" -->
the footer file should only include the HTML fragment that you need to replace the SSI tag, so that when the tag is replaced with the footer you have a well-formed HTML page
In your pastebin example your 'footer.txt' file should contain this:
<div class="footer">
bla bla here....
</div>
And your .shtml file, in which you want the footer to appear, should look something like this
(this assumes that your footer.txt file is in the same folder as the .shtml file)
whether you use php or ssi remember that 'footer.html' must only be the code that would appear between the 'body' tags in a normal html page, or you will duplicate.
Is there any alternative for using a frame. I'm just a beginner and I still don't know what the web designers are doing.
Almost all of the websites I see. Retains the header in the page. How can I apply that so I can stop from using frames.
Use a server-side language like PHP in order to generate a full HTML page.
For example, create three files:
header.php
page.php
footer.php
In the header.php file you have to put the first part of the HTML page.
In the page.php file you have to put the main content of the HTML page.
In the footer.php file, like the header.php, you have to put the end part of the HTML page.
So you can change the page file and the header and the footer remain.
header.php:
<html>
<head>
</head>
<body>
<div id="header">
Place your header here.
</div>
page.php:
<?php include('header.php'); ?>
<div id="main_content">
Place your page content here.
</div>
<?php include('footer.php'); ?>
footer.php:
<div id="footer">
Place your footer here.
</div>
</body>
</html>
For more information, search for a PHP tutorial with Google.
In regards to what you see in most websites, they just reuse the same code.. (usually in an external file and insert it in all their pages)..
Take a look at Server Side Includes for more info
Depending on what you wish to display you could look at using divs or using includes.