Templates in HTML

suicide

Sep 10 2004, 03:16 PM

Hello All,

I am very new to this site, and even to web development.

I was given a task to make a site using html(and anything I am intrested in). This site would have a common template along all the pages in it.

Now what I want is, Is there any way to define a template using HTML.

If yes how?

If no, what is the other easiest option for it. I dont like to code the sanme stuff in all the pages. Is there any way of data reusability.

I thought of some other way, like making a page with the template(that continues through all the pages in site) and calling that page in each and every page, I made that page, but I dont know how to call that page in all my pages,

Could anybody help me?

Thanks for your help.

Nisshutsu

Sep 10 2004, 05:46 PM

Yes, in order to make your website look uniform you could use the same coding, but what I would do is use a css script with a set defined styles for your text, tables, and background. By using a css script, you will save yourself the trouble of having to edit very long html files. This will help you change the look of your page instantly by only editing one file and make the website as a whole look more professional. That is what I would do.

SinisterMinisterX

Sep 12 2004, 07:46 AM

There is no way (that I know) to 'call' a template page from another HTML page. In order to do this, you have to use PHP or similar server-side processing. But here's what I would suggest:

Create your 'template' file in such a way that all the content which changes from page to page is localized in a few areas. Indicate the location of the content with HTML comments. Save this file on your hard drive as 'template.html'. It might look something like this (a snippet from one of my own templates):

CODE

All the primary content for the page will always go in that one table cell. When I want to create a new page, I bring up template.html and replace the comment with my content, then save the new file under a different name (preserving the original template file).

The upside is that once your template is created, you can concentrate on creating content and not have to worry about page layout anymore. The downside is that all your HTML code still resides in each and every page; if you want to make a global change to your layout, you have to edit every single page.

Like I said above, you really need PHP to get the effect you're seeking. If your host supports PHP (like Astahost), this is simple. In this example, I'm assuming that all your HTML above and below the content never changes.

Open your template.html file. Take all your HTML from above the content area, cut and paste it into a new file, and save the new file as 'header.php'.
Take all the HTML from below the content area, cut and paste into another new file, and save it as 'footer.php'.
Create a new file called 'template.php' which looks like this:
CODE
<?php include "header.php" ?>
PAGE BODY GOES HERE
<?php include "footer.php" ?>
Upload header.php and footer.php to your web space, but leave template.php on your hard drive.
As before, replace 'PAGE BODY GOES HERE' with your actual content, save under a new filename, and upload your new page to your web space.

This second method will allow you to make global changes to your layout easily. Any change to header.php or footer.php will instantly be included in all your content pages without changing each page manually. Just remember that every page has to be saved with a .php extension, not .html . Aside from this minor usage of PHP, you'll still be using HTML for everything else.

Hope that helps,
SinisterMinisterX

sanjulian

Sep 13 2004, 10:30 PM

Like SinisterMinister X said, the only way to obtain what you want is using php or other server languaje. Continuing with his second suggestion: In the header we normally need that at least the page title change, so you need to include a variable wich defines it, something like this:

File: header.php

CODE

<?php
if !isset ($page_title){ // If is $page_title is not set, then a default title is assigned
$page_tile="Default Title";}
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> <?php echo $page_title; ?> </title>
</head>

The value of $page_title can be defined in the template, like this:
File: template.php

CODE

<?php
$page_title="Put your title here"; // Don't forget to edit when adding a new page

include "header.php";
?>

<body>
HERE GOES YOUR BODY
</body>

<?php include "footer.php"; ?>

As an alternative, you can define the $page_title value in the link to your page and even you can use only your template.php (in your server) to display all the pages of your site. To do this you need especify a new variable for the file name of the body, like $body. Assuming that you put all your bodies in a folder named bodies/, the link in your menu should be something like this: http://yourdomain.com/template.php?page_title=Your Title&body=bodies/anyname.txt

The template must be something like this:

File: template.php

CODE

<?php
include "header.php";
include $body; // the <body></body> tags in this case must be in anyname.txt
include "footer.php";
?>

Aditional tip:

Avoid using FONT and similar tags, use the css

stillkill

Sep 16 2004, 04:36 PM

QUOTE(suicide @ Sep 10 2004, 03:16 PM)

the basic code for html is....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

neo_28052

Sep 17 2004, 02:54 AM

i would put another way to do it. but i cant think of anymore. you can find some stuff at http://www.flamingtext.com

Similar Topics

Keywords : Templates Html

Good Books For Html And Css Beginners - (1)
Indentation In Html - (4)
Whenever I start a new project one of the first things I do is put in a base index.php page. Yes,
it's a .php file, but I won't be looking at the PHP just yet. Normally, it looks a little
something like this: CODE Title
I've already got a few basics set out that I tend to stick to. For
instance, so far each of my projects has been XHTML Strict, which is why it's always up there.
Similarly, I use the same character set, and (at least initially) have two CSS files calle...

Style P And H? Html Tags - (2)

Well, I have found that css was very hard to predict and precise control their apperance. When mix
and use the p and h? tags. Their apperaence were not identity. Place the h? tags within the p tag
causes style error on both firefox and IE. So, anyone should do it reserved, instead, place the p
tag with any h? tags will do the jobs on both browsers. Still learning it coz it much varies when
doing styles. Tested it on XHTML 1.0 Strict...

Yaml - (x)html/css Framework - (2)

The YAML (Yet Another Multicolumn Layout) Framework is an excellent open source project that helps
you to create two or three columns (X)HTML/CSS floated layouts. This framework is very easy to use
and allows you to modifiy it to your own needs, this framework offers some tools for rapid
development of modern and accessible CSS layouts. QUOTE Yet Another Multicolumn Layout (YAML)
is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is
extremely versatile in its programming and absolutely accessible for end users. Based on w...

Basic Tips and Tricks in HTML - (15)

Here is some quick links for basic html coding... A quick and easy way to create your first web
page! -> The easiest HTML guide for beginners You'll learn how to create tables from real
examples. -> How to create TABLE? You will learn how to create frames from a real example.
You'll see how to create a borderless frame, how to specify the target frame, etc. -> How to
build FRAMES? Follow a few easy steps to add sound to your web pages. -> How to add sound to a
web page? This page tells you how to automatically load a visitor to another web page....

Free Shoutbox? HTML, Flash or PHP Code - (24)

does anyone know where i can find a free shoubox thats customisable? it can be in html, php or flash
format. thanks in advance paul...

Sitepoint's Css And Html Reference Sites - (2)

Recently the folks at SitePoint.com launched two excelent online reference sites for web designers
and developers, the first one is the SitePoint CSS Reference and the second one is the SitePoint
HTML Reference (Beta) . Both of them are free and available to anyone and everyone who needs to
lookup any information related to CSS and HTML in an easy and fast way. The SitePoint HTML
Reference (Beta) is still in progress. Also, both of them are very detailed and up-to-date on each
subject and are focused not only to beginners because they covers from general to advance...

Embedding XML into HTML - (2)

Hi, I am looking for a way to embed external rss/xml files into my html page, how/is this possible?...

Force Object To Load Last - html question (2)

Alright html wizards...i've got a question ^_^ I assume that, like other programming codes, html
and php compilers read a code from top to bottom. Say I have a object though...and I want it to load
last...how do I do that? Let's just pretend I have an image that I do not want to load until
everything else on the webpage is loaded...how can I set that up? Is there perhaps a javascript code
for it...or maybe a CSS style I could add onto the object? Or better yet, is it possible to make
everything within a div/span/table tag load last? Another thing...if I leave an...

About Html - (15)

How long did it take you to learn Html?? It took me about 2months to learn the basics lmao. I need
a tuturial that has it all or a website.i would like it if someone did it. Thats why i get my
friends to help me /biggrin.gif" style="vertical-align:middle" emoid=":D" border="0"
alt="biggrin.gif" /> But they are nice friends thats why. Like 2 people have helped me Sten and
Habble Sten Owns www.habbofront.com which uses Asta as its host and www.habble-aus.com which uses
Asta as its host. so this must be a good host because 2 good sites that have expert Htmlers so need
he...

Html Emails How? - (12)

How on earth do you create HTML emails? I have been searching Google for some time now and can find
ABSOLUTELY no information what so ever on how to ACTUALLY create HTML content emails. It just a
bunch of programs and Microsoft applications, or testing facilities, I don't need any of this,
there must be some coding system to it? I tried emailing using basic direct HTML tags (like ), but
it fails (it just shows ), so how can I do this? I am not looking for anything really fancy, I
just want to use some basic bolding and font changes and things to make it look a ...

Html Table Issue. - (18)

Does anyone know how I might create a HTML table but using pure CSS (div's and what not). I
really have no idea why, but for some odd reason my layout goes nuts if I try to use the table tags,
even used properly with no errors the whole thing just brakes down (I don't use tables
anywhere). So I figured my only option is to attempt to do it CSS way if possible?...

Html Stats - (3)

Do you know how to get website stats in a html code?? Like The amount of people viewing the site at
the moment and stuff like that?? because i need to know. Thanks if you reply to this i am in need
for it. /tongue.gif" style="vertical-align:middle" emoid=":P" border="0" alt="tongue.gif" />...

Beginning Web Designer Templates & Logos - As a beginner web designer you probably don't know how to make tem (4)

When I started website designing, I had no idea how to make templates or logos. So, I needed to find
some free and inexpensive templates and logos. While I was searching I located a lot of sites. I
would like to share them with all the beginning website designers out there. If anybody has anything
to add to this, please do! Free Templates: 1) http://www.freewebsitetemplates.com/ 2)
http://www.oswd.org/ 3) http://www.freelayouts.com/ 4) http://clantemplates.com/ Free Logos:
1) http://www.bestcompanylogo.com/freelogos.php (this site also has custom logos but...

Stretching My Site Vertically - Using CSS or HTML (6)

I know it's possible, I've seen it one time. But I forgot. Many websites, if they hold more
content than there is room for in the minimum height, the site stretches vertically. How can I do
this? I only know that I need a background image of 1px height. Thanks in advance MediYama...

Scripts And Html - (13)

Hey /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />, In the
note pad, I put the proper code for php ?> and save the file as name.php But i can't put
that file in html. This is a big problem since Iam trying to make an online text based game. Whats
the code to put a script inside a web page. And do i need any special software for it? If so
where can i download it? Thanks for reading /biggrin.gif" style="vertical-align:middle" emoid=":D"
border="0" alt="biggrin.gif" />....

Firefox Inventing Its Own Html? - (9)

I am building a website for a client. I finally have the animations and the site content the way i
want it. I updated the site via FTP, and IE displays it perfectly. Firefox however displays my "work
in progress" animations still, even though the index file references the new animation. I have
cleared cache, and even looked up the site on different computers, and on every one, FF displays
those darn rough draft animations while IE works perfectly. Any idea as to what is going on here?...

Quick Tips On Html And Css - (11)

Here are just some general tips, helpers and time-savers for HTML and CSS. HTML Ideally, you should
be working under the XHTML 1.1 doctype specification. Some reasons: Improved semanticism - make use
of the elements available appropriately to convey the information as it was intended. Improved
understanding - because of an increase in semanticism, it's easier for your audience to
understand what your trying to convey. Cleaner code - due to the deprecation of some elements and
the strict requirements of nesting, closing and structure, your code becomes much cleane...

Bulletproof HTML: 37 Steps To Perfect Markup - Excellent article that highlights and answers most FAQ about HTML (4)

Hi, i want to share with everybody this excellent article at sitepoint.com that i just read, it
highlights and answers most FAQ about HTML, it's very consice and simply and for me it is a must
to read. You can read it at Bulletproof HTML: 37 Steps to Perfect Markup . Best regards,...

Home Videos - html code for home video (4)

I was wondering if anyone knows how to turn a home video that is saved on your computer to that of a
html code so I can put it onto my myspace page... Please if anyone at all knows how to do this
please please help me!!!!...

HTML Editor - (23)

I am sick of using notepad to create my HTML pages and I want somthing better. Are there any
programs available that are easier to use than notepad for html editing. If so i wolud like to know
about them. Thanx...

A First Peep Into Html - (5)

Dear friends HTML is the building block of any web page. Without it no pages can be written though
there are some exceptions. Even you got to have some knowledge of HTML to write dynamic web
applications. An HTML file is a text file containing small markup tags The markup tags tell the Web
browser how to display the page An HTML file must have an htm or html file extension An HTML file
can be created using a simple text editor HTML is acronym of Hyper Text Markup Language. This time
I will discuss about HTML tags. Dear friends HTML is the building block of any web pa...

Free & Pretty Good Web-Design Templates - they're pretty good (19)

Over the years (that make me sound old) I have complied some pretty good LEGAL template website.
The templates on there are pretty good and best of all, they're free! YAY. The templates are
way better then the free ones that you have googled in and turn up with the results. Here they are
http://www.freshtemplates.com/ http://www.comteche.com/data/templates/fre..._html/index.asp
http://www.mastertemplates.com/free-templates.htm http://www.templatehunter.com
http://www.notemplates.com/ I'll post some more when I find some...

Where To Find A WML To HTML Converter ? - (2)

hello people, i need to convert few wml codings to html.. I have found plenty of converter that
convert html to wap. But none of my use.. Please guide me.. Thanks in advance...

HTML: Seems Like A Simple Problem, But I'm Baffled! - (4)

i got this one question...I have this page http://ebiztip.com/thankyou.html with an image of the
book not coming out.....the image is named chapterm-big.jpg...but the image just want to hide....i
swear there's nothing wrong with the html....or am I wrong???...

Web Design: Templates Or Start From Scratch? - Your opinions (28)

Just want to start something here: Do you prefer to use website templates or make one from scratch?
Personally i use templates, i don't have the time and skills to make a whole website design.
One of the templates i was using a week ago had used frontpage's layer feature and wasn't
displaying properly so i had to rebuild the whole template, using the original images. Really, the
part that i don't have time for is the images, i am o.k at photoshop but not too good to make
visually pleasing web images for my site. What are your opinions on this?...

Need Help With The HTML HR Tag - (5)

Hi, does anybody knows which is the equivalent tag in CSS of the HTML HR tag or how do i replace
this. I need this because the HR tag is deprecated and i wanna validate a website. The code that i
need to replace is this: QUOTE best regards,...

How Can You Spice Up Your Basic HTML Site ? Beginner Needs Help - (9)

Well im new to this,and i know a person who knows how to do HTML,I of course dont lol,but I was
wondering with html can you change the way the sites you make on here look and ect..(put flash in
and w/e..)...

Here Are Some Html Tutorial Sites - (1)

I think here is a very good HTML Tutorial : Rolling Eyes
http://www.allfreetutorials.com/htmltutorials.htm Also very competent : Rolling Eyes
http://www.yourhtmlsource.com/ Adequate one : Rolling Eyes http://htmldog.com/ Take a look and
you'll get all answers about HTML, CSS and Java-scripting. Laughing...

Good Site To Download Web Templates ? - (21)

could anyone recommend a place to download (preferably free (as im not sure i can make it work))
some (or a) good web template(s), something easy to use and not too complicated! thanks chris p.s
just needs a couple pages of text (preferably with some graphics which i can change), some contact
info and links to galleries which i have already made....

Looking for templates, html