Is there any way to use an HTML template to a static website ? How can I make it suitable to upload to a hosting and point to a domain ? Is there any tools which can convert it without much coding ? Thanks.
Even if you don't want to get too deep into programming, I'd suggest using PHP to make what we used to call a "poor man's" CMS. Basically you use PHP as 'glue' to paste together your different parts. If your host is running apache, you could also use an SSI method called "SHTML" to do it, but I dislike that since it ties you to a specific type of host. While I'm not wild about using <?php ?> more than once in a file, that scripting method makes is ideal for beginners who don't want to get too deep into the language. It works pretty simple. Let's say you have a fairly basic HTML template that is set up for a two column layout in XHTML 1.0 using the 'double wrapper content first' method. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en" /> <meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> Template Design CSS </title> </head><body> <div id="top"> <h1> Site Title <span><!-- image replacement --></span> </h1> <ul id="mainMenu"> <li><a href="/" class="current">Home</a></li> <li><a href="/forums/">Forums</a></li> <li><a href="/contactUs.php">Contact Us</a></li> <li><a href="/links.php">Links</a></li> </ul> <hr /><!-- remove if content starts with numbered heading --> <div id="contentWrapper"><div id="content"> Page Content Here <!-- #content, #contentWrapper --></div></div> <hr /><!-- remove if sidebar starts with numbered heading --> <div id="extras"> "SideBar" content Here <!-- #extras --></div> <hr /><!-- remove if footer starts with numbered heading --> <div id="footer"> Footer Content Here <!-- #footer --></div> <!-- #top --></div> </body></html> Code (markup): You could split it into three files. In the first file I'd set up just a bit of PHP to optionally pass a page title to it in a variable. You could use similar methodology to pass keywords and description META... actually, why don't I set that up too. A bit more code could also let you add a 'current' page class to the menu. In PHP you have 'variables', they're a place to store information, and have their names declared with dollar signs. We will set up four simple variables. $pageName -- a short camelcase name describing the current page, used for setting the 'current' page class. $pageTitle -- an optional value that will be prepended to the site title in the TITLE tag. example: $pageTitle = 'Contact Us'; would output: <title>Contact Us - Site Title</title> $keywords -- a comma delimited list of 7 or 8 words that exist in your document body that you want to uprank for. That's keyWORDS, not keyphrases, NOT keysentences, but keyWORDS (the only time multiple words is acceptable between comma's is for proper names like "New Hampshire" or "Hypertext Markup Language"). $description -- a short text description of the page, basically the text you want shown on the search results page below the contents of your TITLE tag. I'd also make one small 'function' -- a repeatable set of code, to output each menu item to make detection of the 'current' page easier. So that would work out to something like this, let's call this 'template_header.php'; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en" /> <meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0" /> <?php if (isset($keywords)) echo ' <meta name="keywords" content="', $keywords, '" /> '; ?> <?php if (isset($description)) echo ' <meta name="description" content="', $description, '" /> '; ?> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> <?php if (isset($pageTitle)) echo $pageTitle, ' - '; ?> Site Name </title> </head><body> <div id="pageWrapper"> <h1> Site Title <span><!-- image replacement --></span> </h1> <?php function menuItem($href, $page, $text) { global $pageName; echo ' <li><a href="', $href, '"', ( $page == $pageName ? ' class="current"' : '' ), '>', $text, '</a></li>'; } ?> <ul id="mainMenu"> <?php menuItem('/', 'home', 'Home'); menuItem('/forums/', 'forums', 'Forums'); menuItem('/contactUs.php', 'contactUs', 'Contact Us'); menuItem('/links.php', 'links', 'Links'); ?> </ul> <hr /><!-- remove if content starts with numbered heading --> <div id="contentWrapper"><div id="content"> Code (markup): The rest of the page could then be broken into template_middle.php <!-- #content, #contentWrapper --></div></div> <hr /><!-- remove if sidebar starts with numbered heading --> <div id="extras"> Code (markup): and template_footer.php <!-- #extras --></div> <hr /><!-- remove if footer starts with numbered heading --> <div id="footer"> Page Footer Content Here <!-- #footer --></div> <!-- #pageWrapper --></div> </body></html> Code (markup): Once you have all that, let's say you were making your home page -- aka index.php. The real magic is the 'include' function, which is our 'glue' that puts the separate files in the currently called file just like they were typed right there. <?php $pageTitle = 'Welcome'; $pageName = 'home'; $keywords = 'pick,seven,or,eight,words,here,from,your,content'; $description = 'Describe this page in one or two natural language sentences'; include('template_header.php'); ?> <h2>Sample Page</h2> <p> Your normal static page content would go here. Be sure to pick seven or eight words from the text in your content area (this part) as the keywords you would like a slight boost to. If you pick seven or eight words of less than 127 characters, the keywords META still works; the reason people claim it's broken is they are getting slapped down for using it wrong! </p> <?php include('template_middle.php'); ?> <h2>Sidebar content</h2> <p> This is what goes in the sidebar -- you could make a separate file (let's call it 'extras.php') that you would 'include' like the other parts of the page to let you share sidebar contents across pages. </p> <?php include('template_footer.php'); ?> Code (markup): ... and that's a very primitive "poor man's" system in action. A more complex version might add things like SEO friendly links and put the template parts used on all pages into functions in a single file, but if you are just starting out this is a good way to get your foot in the door. I put a live copy of that running here: http://www.cutcodedown.com/methods/poorMans/ and put it all into a .rar file so you can see the actual files used. http://www.cutcodedown.com/methods/poorMans/poorMans.rar If you 'view source' the output you can see where all the different bits are plugged in. Hope this helps. I know it's a lot to take in at the start, but that's when it's time to put on the big boy pants.
Very confused with your question. If its an html template, its already a static html website. You just need to buy hosting, buy a domain, set the domain name severs to the ones provided by whatever host you go with, and then upload the html files/images in the public html folder. If your asking about converting an image or photoshop file to html, you will need to know html/css, there's tools to help but they only do so much. I recommend reading some basic information/tutorials on starting a website.
I operated on the assumption the OP has a template coded in HTML/CSS, and wants to turn it into multiple pages of content re-using the same template pieces without the investment of a full blown database driven system. Was the only context in which I thought the question made sense... which is why a sprinkling of PHP is likely the easiest answer. Otherwise we're talking about copying that template HTML file to every single page and editing it -- a nightmare when/if it comes time to add/remove menu items, change the layout and so forth. Well, unless you want to get into idiotic halfwit BS like Dreamweaver's "templating" system that pisses all over the markup with comments proven to cause rendering errors...
Thanks. You got it right @deathshadow. I actually downloaded an HTML template. In that there is 3 " Read more " links. But the they have no page attached. I copied the " about us " page code, created a page called " page name " and pasted on it (assuming I can edit it later). But the images were not loading. I am working on WAMP. The page is working correctly but looks awful. :disappointed: @KewL Hope the matter is clear now. I have to do this as well. Is there any editor which gives live preview or reverse to help me change the page. I would just need removing / adding images and edit text.