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.
Related
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>
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.
Let's say all of my html pages will have a top bar and banner with the same content.
Rather than copy the code for these content on all html pages, is it possible to have pages inherit the content from a base html page?
For example : base.html can have the top bar, banner, etc (all repeated content)
Remaining pages (index.html, about.html, etc) can inherit the content from base.html and then add more content.
Is this possible in html or do I have to copy and paste repeating content all the time?
In this situations (as far as I know)
You can use template based editors like Dreamweaver
You can use framesets (don't use them)
You can use iframe (meh.)
You can convert your files to PHP and just use a single include command (Y)
Copy and paste whole thing and when you get 100 pages, try to add a new menu...
I'd like to see other solutions too.
Example:
Lets say I've created a template.html it's something like
<html>
<head>
<title>asd</title>
style tags keywords bla bla bla
</head>
<body>
<div class="menu">
yeah I've my menu here well designed
</div>
<div class="content">
unique content here
</div>
</body>
</html>
Allright this is my one html file. Lets take top section of the page. Menu will be same but content will be changed so this is top of the page:
<html>
<head>
<title>asd</title>
style tags keywords bla bla bla
</head>
<body>
<div class="menu">
yeah I've my menu here well designed
</div>
Save this part as top.php Now let's see what have we left:
<div class="content">
unique content here
</div>
</body>
</html>
This will be our post page. But how can we get codes from top.php? Just like that:
<?php include("top.php"); ?>
<div class="content">
unique content here
</div>
</body>
</html>
Now, save this as page1.php BINGO! You did not wrote anthing about menu but include method will bring it for you.
Include basically writes everything from a file to another. You can check differences for include_once, require, require_once too.
Allright, we've created our first page. What about second one? Exactly the same:
<?php include("top.php"); ?>
<div class="content">
my second page here
</div>
</body>
</html>
Save this as page2.php
Well, you need to change your menu now but there are two pages, two hundred pages, two million pages... Who cares. Just change top.php that's all.
Please note that in this codes; top.php, page1.php and page2.php are in SAME directory. If you want to include from another path, you must use for example:
<?php include("../top.php"); ?>
//OR
<?php include("myFiles/theme/top.php); ?>
depending on your path.
I hope this helps. Read PHP guides for include. It's really easy.
You need a testing server (or you can use a local server like WAMP, XAMP etc.) to execute PHP files.
You can create template page and include it to the all new pages as javascript
<script type="text/javascript" src="includes/template.js"> </script>
Same way with php - using include
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.
Hi I am new to web programming. I want to create a template sort of css where all the pages look the same except the content of the pages.
So I have a logo and some tabs at the top where you can navigate the website, but the content of the pages would be different (contact, about, info.etc).
How do I go about creating this template?
You might want to try building your template page in plain HTML + CSS, and then using simple PHP includes to build your pages. You could, for example, break your page into two separate files:
header.php:
<!DOCTYPE html>
<html>
<head><title>Hello World</title></head>
<body>
<div id="main-content">
and footer.php:
</div>
</body>
</html>
And then, for any files that use that template, you'd use something like this:
<?php include("header.php"); ?>
<!--All the content of your page goes here-->
<h1>Hello World!</h1>
<p>Lorem Ipsum</p>
<?php include("footer.php"); ?>
So then if someone visited the previous file (let's say it's called index.php), then the files would be assembled and the final HTML output would look something like:
<!DOCTYPE html>
<html>
<head><title>Hello World</title></head>
<body>
<div id="main-content">
<!--All the content of your page goes here-->
<h1>Hello World!</h1>
<p>Lorem Ipsum</p>
</div>
</body>
</html>
Just make sure you have PHP running on your server, or this won't work at all. Also, if you want to develop your site locally, I'd recommend using XAMPP to get a local Apache host.
You have a look at some of the many template sites - e.g. http://www.freecsstemplates.org/ or http://www.freecsstemplates.com/. Chances are you'll find something close to what you want to achieve.
I suggest starting with a paper sketch. Just draw boxes for the different areas each page will have... like Logo, Header, Content, Footer, etc. There's many ways to approach this initial stage. Here's one explanation of the gray box method.
Once you have a rough idea like this, create 1 sample page. You can fill in the content with lorum ipsum. Get the CSS to how you like it, and make sure that each section of the page (roughly each box in your rough sketch) is in it's own unique div (id = "...").
Once you have all of this set up, you'll have your CSS file ready to go.
To create your template HTML file, just take the HTML page you've been working on and delete all the lorum ipsum.
CSS Zen Garden is a great place to look for CSS inspiration.
If you're a beginner, I could suggest trialing Adobe Dreamweaver and looking at using DreamWeaver (.dwt) Templates. It's really, really easy to use and it allows you to create 1 master (template) file with editable parts.
If you have Visual Studio, MasterPages do a similar job!
Good luck and welcome to the Web Development world!