Log in

View Full Version : Search within html <body> tags



janu
06-30-2013, 01:36 PM
I need to help create a Page for search like this
http://img844.imageshack.us/img844/3258/lig2.jpg

I have more than 500 html pages , every page contains different codes in between <body></body> tags
like



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>my title</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" href="style.ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="style.ie7.css" type="text/css" media="screen" /><![endif]-->
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
here is the code like 234556 with some other contents

</body>
</html>


when user give input like this

http://img855.imageshack.us/img855/1497/fd7h.jpg

The Search Result Should Come out like this

http://img834.imageshack.us/img834/982/tl4y.jpg

FrickenTrevor
06-30-2013, 08:39 PM
So you are trying to search within that page, or search all the pages?

janu
07-01-2013, 02:08 AM
obviously within all pages .. if similar code is found in more than one page that should come out by search

sorry I don't know whether I am asking appropriate question because I am zero in web coding

james438
07-01-2013, 02:34 AM
You're gonna hate this answer, but it would be best to create a database and upload all of the pages into a table in your database. From there you can search the table for the relevant data.

It sounds like it would take forever to do and really difficult to do as well, but you can also create a fairly simple program to upload the pages into your database. We can help you do that and more as I am sure that there are people on this forum who have had to do this or something similar when they were in the same boat or close to it. After you have it uploaded into your database you can get rid of 499 of your 500 pages. Your one remaining page will most likely be a lot smaller than any one page and it will be easier to manage as well.

If you wanted to avoid the database you could create a rather complicated search program that will systematically open and close all of your pages and store the results in another file. I can't say for certain, but that sounds like it would be extremely processor heavy on your server and take a long time to run. It wouldn't work as well as a MySQL database that is designed to organize and search through all of your information.

janu
07-01-2013, 02:49 AM
Thanks, well as I said in my post #3 that I am zero in web coding .. My aim is to achieve like

index.page have links like this

page.1
page.2
page3.
so on
when clicked on page1. it opens another page containing more links to go another page ..
I got difficult to create individual HTML pages as the size of site is going very huge

I am looking for a guide to help me how a single HTML template page will handle

like when i click on page1 link on index
mydomain.com/folder/page_1.html?value=1&value=2&value=3

then it might be easy for master to help to make search option

james438
07-01-2013, 05:35 AM
I don't know much about your situation or what kind of hosting service you use, but it does not sound like you are using a database at all. The first thing you need to do is set one up through your hosting service. After that take a look at the following to help you get started. It has a few examples for connecting to your database.

http://www.php.net/manual/en/mysqlinfo.api.choosing.php

If you are creating more and more pages you can imagine how much harder it will be to manage your site. Imagine how hard it would be to manage if you have to update all of those pages if they are not static.

I'm sorry to say that I am not really familiar with a good tutorial for setting up a database. I believe I used a book at the time, which I am sure is quite out of date now.

molendijk
07-01-2013, 11:45 AM
Are you looking for something like this (mesdomaines.nu/janu/janu.html)? In that case, no data base needed, just one central page and a lot of iframed pages.
If that's wht you want, I could help you further.

janu
07-02-2013, 02:51 PM
Thanks Sir, this is what I am looking for .. but slightly different

you have used here one central page instead of which I want to use a page of template and apart from this you have used drop down to go to another page instead of which I intend to use links .. Hope I will be helped

like this way

Ist page

http://img546.imageshack.us/img546/9870/5r7u.jpg

2nd page

http://img23.imageshack.us/img23/3986/n8qs.jpg

3rd page

http://img842.imageshack.us/img842/3875/ehj0.jpg

Please have a look on url also

on the other hand in SEARCH BY VERSION tab .. a page of search for code when user input it in text box so that when code is submitted the user should be direct to that page or the content of that page should be display on the same search page ... Hope I will get help soon

but all without database

molendijk
07-02-2013, 09:36 PM
EDIT: Corrections
THIS (http://mesdomaines.nu/janu2/applications.html) is closer to what you want, although the URLs are slightly different.
Pages:
applications.html

<!doctype html>
<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">


<title></title>

<style>
body {font-family: verdana; font-size: 12px; background: #dedede;}
</style>

</head>

<body >

<div style="position: relative; text-align: center; top: 20px">
<button onclick="window.location.href='applications.html'">HOME (applications)</button> <button>SEARCH BY VERSION</button> <button>ABOUT</button>
</div>

<div id="container" ></div>

<div style="position: absolute; top:80px; left:50px; right: 50px; bottom: 50px; border: 1px solid black; padding: 10px; background: white">
<div style="font-size: 190%; font-weight: bold">List of applications:</div>
<ul style="margin-top:20px">
<li><a href="javascript: void(0)" onclick="top.location.href='applications.html?whatsup.html'; return false">Whatsup</a><br><br>
<li>Opera<br><br>
<li>Skype<br><br>
<li>Mozilla
</ul>
</div>


<script>
if(location.search){top.document.getElementById('container').innerHTML='<div style="position: absolute; top:80px; left:50px; right: 50px; bottom: 50px; border: 1px solid black; "><iframe name="ifr" src='+location.search.substring(1)+' style="position: absolute; width: 100%; height: 100%; background: white; z-index:1" frameborder="0"><\/iframe><\/div>'}
</script>

</body>

</html>

whatsup.html:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">


<title></title>

<style>
body {font-family: verdana; font-size: 12px; background: white}
</style>

</head>

<body >

<div style="position: absolute; top:0px; left:0px; right: 0px; bottom: 0px; border: 0px solid black; padding: 10px; background: white">
<div style="font-size: 190%; font-weight: bold">Whatsup versions and codes:</div>
<ul style="margin-top: 20px">
<li><a href="javascript: void(0)" onclick="top.location.href='applications.html?whatsup.html?versions.html'; return false">Version 1.1 Code: 2435</a><br><br>
<li>Version 1.2 Code: 5687<br><br>
<li>Version 2.11 Code: 0986<br><br>
<li>Version 2.2 Code: 7098
</ul>
</div>


<script>
if(location.search){top.document.getElementById('container').innerHTML='<div style="position: absolute; top:80px; left:50px; right: 50px; bottom: 50px; border: 1px solid black"><iframe src='+location.search.substring(1)+' style="position: absolute; width: 100%; height: 100%; background: white; z-index:1" frameborder="0"><\/iframe><\/div>'}
</script>

</body>

</html>

versions.html:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">


<title></title>

<style>
body {font-family: verdana; font-size: 12px; background: white}
</style>

</head>

<body >

<div style="position: absolute; top:0px; left:0px; right: 0px; bottom: 0px; border: 0px solid black; padding: 10px; background: white">
<div style="font-size: 190%; font-weight: bold">Download Whatsup Versions 1.1 Code: 2435</div>
<BR>DOWNLOAD
</div>

</BODY>

</HTML>

janu
07-03-2013, 02:29 AM
Thanks you very much .. it is really hard to help me .. I really salute your help ..
But again I have to create separate HTML pages .. I was expecting I might get something like
that I should have only a template page where other pages contents are called to display ... let it be server side script only .. my hosts have PHP support

ajfmrf
07-03-2013, 03:16 AM
The input you are talking about in your first post,is it unique(different) on each page?

How is this number used on the pages?

Is it a title,div name,a code,or something else specific to each page?

You seem to be looking for a way to get a page by this input.What are your pages?-are you selling stuff?

I think we need more info as to what exactly you are trying to do.

janu
07-03-2013, 05:49 AM
yes every page contains different title div and codes .. like in my first posts i have shown my template code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>my title</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" href="style.ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="style.ie7.css" type="text/css" media="screen" /><![endif]-->
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
here is the code like 234556 with some other contents

</body>
</html>
I want when link is clicked the one page template should get title as well as body tags changes

i know that i can make it by creating different HTML pages but it will make load to the server by placing numerous HTML pages .. I am looking for a script where one template page should do this job

molendijk
07-03-2013, 11:35 AM
So you don't want different pages? I was confused by your previous post, where you had several pages.
Experiment with something like this:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<title></title>

<style>
body {font-family: verdana; font-size: 12px; background: #dedede}
</style>

<script>
function first_link()
{
location.href='?<br><br>Code: <a href="javascript: void(0)" onclick="second_link()">bla bla</a>'
}
function second_link()
{
alert('hello')
}
</script>

</head>

<body>

<div id="add">
<a href="?Search result:<br><br>Click <a href='javascript: void(0)' onclick='first_link()'>here</a>" >234556</a>
</div>


<script>
if(location.search)
{
document.getElementById('add').innerHTML=unescape(location.search.substring(1))
}
</script>

</body>
</html>

janu
07-03-2013, 11:53 AM
Thanks Sir molendijk , I know you are the right master I got a chance to learn from ...

I actually want the same thing done with the pages shown in my post #8 .. I will be highly thankful If you will code atleast for two links on each page

Thanks in advance

molendijk
07-03-2013, 04:35 PM
Janu, I'm very busy right now, but I'll make something for you as soon as I'll have the time (probably somewhere within the next 12 hours)

molendijk
07-03-2013, 06:59 PM
Okay, here's something more elaborate. Try to understand the code. Don't hesitate to ask (further) questions.

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title></title>

<style>
body {font-family: verdana; font-size: 12px; background: #dedede; }
</style>

<!-- *******************WHATSUP AND VERSIONS******************* -->
<script>
var link_whatsup=
"?"+
"<span style='font-size: 150%; font-weight: bold'>WHATSUP VERSIONS AND CODES</span>:<br>"+
"<ul>"+
"<li><a href='javascript: void(0)' onclick='location.href=link_version_1_1'>Version 1.1 Code: 2435</a><br><br>"+
"<li><a href='javascript: void(0)' onclick='location.href=link_version_1_2'>Version 1.2 Code: 5687</a><br><br>"+
"<li><a href='javascript: void(0)' onclick='location.href=link_version_2_11'>Version 2.11 Code: 0986</a><br><br>"+
"<li><a href='javascript: void(0)' onclick='location.href=link_version_2_2'>Version 2.2 Code: 7098</a>"+
"</ul>"

var link_version_1_1=
"?"+
"<span style='font-size: 150%; font-weight: bold'>DOWNLOAD WHATSUP <br>VERSION 1.1 CODE: 2435</span>" +
"<br><br><a href='javascript: void(0)' onclick='link_download_version_1_1()'>DOWNLOAD</a>"

var link_version_1_2=
"?"+
"<span style='font-size: 150%; font-weight: bold'>DOWNLOAD WHATSUP <br>VERSION 1.2 CODE: 5687</span>" +
"<br><br><a href='javascript: void(0)' onclick='link_download_version_1_2()'>DOWNLOAD</a>"

var link_version_2_11=
"?"+
"<span style='font-size: 150%; font-weight: bold'>DOWNLOAD WHATSUP <br>VERSION 2.11 CODE: 0986</span>" +
"<br><br><a href='javascript: void(0)' onclick='link_download_version_2_11()'>DOWNLOAD</a>"


var link_version_2_2=
"?"+
"<span style='font-size: 150%; font-weight: bold'>DOWNLOAD WHATSUP <br>VERSION 2.2 CODE: 7098</span>" +
"<br><br><a href='javascript: void(0)' onclick='link_download_version_2_2()'>DOWNLOAD</a>"

</script>


<script>
function link_download_version_1_1()
{
alert('hello to version 1.1')
}

function link_download_version_1_2()
{
alert('hello to version 1.2')
}

function link_download_version_2_11()
{
alert('hello to version 2.11')
}

function link_download_version_2_2()
{
alert('hello to version 2.2')
}


</script>

<!-- *******************END WHATSUP AND VERSIONS******************* -->


<!-- *******************OPERA******************* -->
<script>
var link_opera=
"?"+
"<span style='font-size: 150%; font-weight: bold'>OPERA VERSIONS</span>:<br>"+
"<ul>"+
"<li><a href='javascript: void(0)' onclick='location.href=link_opera_15_0'>Opera Version 15.0</a><br><br>"+
"<li><a href='javascript: void(0)' onclick='location.href=link_opera_12_15'>Opera Version 12.15</a><br><br>"+
"</ul>"

var link_opera_15_0=
"?"+
"<span style='font-size: 150%; font-weight: bold'>DOWNLOAD OPERA <br>VERSION 15.0</span>" +
"<br><br><a href='javascript: void(0)' onclick='link_download_opera_15_0()'>DOWNLOAD</a>"

var link_opera_12_15=
"?"+
"<span style='font-size: 150%; font-weight: bold'>DOWNLOAD OPERA <br>VERSION 12.15</span>" +
"<br><br><a href='javascript: void(0)' onclick='link_download_opera_12_15()'>DOWNLOAD</a>"


</script>

<script>
function link_download_opera_15_0()
{
alert('hello to Opera version 15.0')
}

function link_download_opera_12_15()
{
alert('hello to Opera version 12.15')
}
</script>
<!-- *******************END OPERA******************* -->



</head>

<body>
<div style="position: absolute;left: 50px; top: 50px; right: 50px; bottom: 50px; border: 1px solid black; padding: 20px; background: white">
<div style="position: relative; text-align: center;"><button style="cursor: pointer" onclick="location.href='applications.html'">HOME</button> <button>SEARCH BY VERSION</button> <button>ABOUT</button></div>

<br><br><div id="add" style="position: relative; top:50%; margin-top:-130px; ">
<span style="font-size: 150%; font-weight: bold">LIST OF APPLICATIONS</span><br>
<ul >
<li><a href="javascript: void(0)" onclick="location.href=link_whatsup; return false">Whatsup</a><br><br>
<li><a href="javascript: void(0)" onclick="location.href=link_opera; return false">Opera</a><br><br>
<li>Skype<br><br>
<li>Mozilla
</ul>
</div>

</div>

<script>
if(location.search)
{
document.getElementById('add').innerHTML=unescape(location.search.substring(1))
}
</script>

</body>
</html>

janu
07-04-2013, 05:30 AM
Thanks every step of urs are providing me a chance to learn

but the urls are not what i intended to achieve

applications.html?%3Cspan%20style=%27font-size:%20150%;%20font-weight:%20bold%27%3EWHATSUP%20VERSIONS%20AND%20CODES%3C/span%3E:%3Cbr%3E%3Cul%3E%3Cli%3E%3Ca%20href=%27javascript:%20void(0)%27%20onclick=%27location.href=link_version_1_1%27%3EVersion%201.1%20Code:%202435%3C/a%3E%3Cbr%3E%3Cbr%3E%3Cli%3E%3Ca%20href=%27javascript:%20void(0)%27%20onclick=%27location.href=link_version_1_2%27%3EVersion%201.2%20Code:%205687%3C/a%3E%3Cbr%3E%3Cbr%3E%3Cli%3E%3Ca%20href=%27javascript:%20void(0)%27%20onclick=%27location.href=link_version_2_11%27%3EVersion%202.11%20Code:%200986%3C/a%3E%3Cbr%3E%3Cbr%3E%3Cli%3E%3Ca%20href=%27javascript:%20void(0)%27%20onclick=%27location.href=link_version_2_2%27%3EVersion%202.2%20Code:%207098%3C/a%3E%3C/ul%3E

as I requested that url of each page should be like this


Ist page

http://img546.imageshack.us/img546/9870/5r7u.jpg

2nd page

http://img23.imageshack.us/img23/3986/n8qs.jpg

3rd page

http://img842.imageshack.us/img842/3875/ehj0.jpg

I am sorry to trouble you every time

molendijk
07-04-2013, 12:21 PM
That's a consequence of two of your requirements:
1. The URL must not be static ('the same all the time');
2. No external files for modifying the body content.

But there may be a workaround for the weird URLS in the address bar. I'll give it a try soon.

janu
07-04-2013, 12:53 PM
thanks bit changes

Ist page when clicked on whatsup
url=mydomain.com/app/whatsup.html?versions
2nd page when clicked on version 1.1 Code:2435
url= mydomain.com/app/whatsup.html?versions=1.1&code=2435

for the same way for Opera on first page
url=mydomain.com/app/opera.html?versions
2nd page when clicked onversion 1.1 Code:2435
url= mydomain.com/app/opera.html?versions=1.1&code=2435


ist page
http://img593.imageshack.us/img593/3241/datb.jpg

2nd page
http://img853.imageshack.us/img853/6365/cihj.jpg

3rd page
http://img854.imageshack.us/img854/2221/29uo.jpg

molendijk
07-04-2013, 05:40 PM
Janu, this is as close as I can get (explanations below):

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title></title>

<style>
body {font-family: verdana; font-size: 12px; background: #dedede; }
</style>

<script>
var space=" "
</script>


<!-- *******************WHATSUP AND VERSIONS******************* -->
<script>
var link_whatsup=
"?"+escape("mydomain.com/app/whatsup.html-->versions"+space +"<br>"+
"<div style='position: relative; font-size: 150%; font-weight: bold; top:-15px; z-index:1; background: white; width: 100%'>WHATSUP VERSIONS AND CODES:</div><br>"+
"<ul style='position: relative; top: -25px'>"+
"<li><a href='javascript: void(0)' onclick='location.href=link_version_1_1'>Version 1.1 Code: 2435</a><br><br>"+
"<li><a href='javascript: void(0)' onclick='location.href=link_version_1_2'>Version 1.2 Code: 5687</a><br><br>"+
"<li><a href='javascript: void(0)' onclick='location.href=link_version_2_11'>Version 2.11 Code: 0986</a><br><br>"+
"<li><a href='javascript: void(0)' onclick='location.href=link_version_2_2'>Version 2.2 Code: 7098</a>"+
"</ul>")




var link_version_1_1=
"?"+escape("mydomain.com/app/whatsup.html-->versions-->version 1.1 code 2435"+space +"<br>"+
"<div style='position: relative; font-size: 150%; font-weight: bold; top:-15px; z-index:1; background: white; width: 100%'>DOWNLOAD WHATSUP <br>VERSION 1.1 CODE: 2435</div>" +
"<br><br><a href='javascript: void(0)' onclick='link_download_version_1_1()'>DOWNLOAD</a>")

var link_version_1_2=
"?" + escape("mydomain.com/app/whatsup.html-->versions-->version 1.2 code 5687"+space +"<br>"+
"<div style='position: relative; font-size: 150%; font-weight: bold; top:-15px; z-index:1; background: white; width: 100%'>DOWNLOAD WHATSUP <br>VERSION 1.2 CODE: 5687</div>" +
"<br><br><a href='javascript: void(0)' onclick='link_download_version_1_2()'>DOWNLOAD</a>")

var link_version_2_11=
"?"+ escape("mydomain.com/app/whatsup.html-->versions-->version 2.11 code 0986"+space +"<br>"+
"<div style='position: relative; font-size: 150%; font-weight: bold; top:-15px; z-index:1; background: white; width: 100%'>DOWNLOAD WHATSUP <br>VERSION 2.11 CODE: 0986</div>" +
"<br><br><a href='javascript: void(0)' onclick='link_download_version_2_11()'>DOWNLOAD</a>")


var link_version_2_2=
"?"+ escape("mydomain.com/app/whatsup.html-->versions-->version 2.2 code 7098"+space +"<br>"+
"<div style='position: relative; font-size: 150%; font-weight: bold; top:-15px; z-index:1; background: white; width: 100%'>DOWNLOAD WHATSUP <br>VERSION 2.2 CODE: 7098</div>" +
"<br><br><a href='javascript: void(0)' onclick='link_download_version_2_2()'>DOWNLOAD</a>")

</script>


<script>
function link_download_version_1_1()
{
alert('hello to version 1.1')
}

function link_download_version_1_2()
{
alert('hello to version 1.2')
}

function link_download_version_2_11()
{
alert('hello to version 2.11')
}

function link_download_version_2_2()
{
alert('hello to version 2.2')
}


</script>

<!-- *******************END WHATSUP AND VERSIONS******************* -->


<!-- *******************OPERA******************* -->
<script>
var link_opera=
"?"+escape("mydomain.com/app/opera.html-->versions"+space +"<br>"+
"<div style='position: relative; font-size: 150%; font-weight: bold; top:-15px; z-index:1; background: white; width: 100%'>OPERA VERSIONS:</div><br>"+
"<ul>"+
"<li><a href='javascript: void(0)' onclick='location.href=link_opera_15_0'>Opera Version 15.0</a><br><br>"+
"<li><a href='javascript: void(0)' onclick='location.href=link_opera_12_15'>Opera Version 12.15</a><br><br>"+
"</ul>")



var link_opera_15_0=
"?"+escape("mydomain.com/app/opera.html-->versions-->version 15.0"+space +"<br>"+
"<div style='position: relative; font-size: 150%; font-weight: bold; top:-15px; z-index:1; background: white; width: 100%'>DOWNLOAD OPERA <br>VERSION 15.0</div>" +
"<br><br><a href='javascript: void(0)' onclick='link_download_opera_15_0()'>DOWNLOAD</a>")

var link_opera_12_15=
"?"+escape("mydomain.com/app/opera.html-->versions-->version 12.15"+space +"<br>"+
"<div style='position: relative; font-size: 150%; font-weight: bold; top:-15px; z-index:1; background: white; width: 100%'>DOWNLOAD OPERA <br>VERSION 12.15</div>" +
"<br><br><a href='javascript: void(0)' onclick='link_download_opera_12_15()'>DOWNLOAD</a>")


</script>

<script>
function link_download_opera_15_0()
{
alert('hello to Opera version 15.0')
}

function link_download_opera_12_15()
{
alert('hello to Opera version 12.15')
}
</script>
<!-- *******************END OPERA******************* -->



</head>

<body>
<a href="javascript: void(0)" onclick="location.href='index.html'; return false">Index (home)</a><br><br>
<a href="javascript: void(0)" onclick="location.href=link_whatsup; return false">Whatsup versions and codes</a><br>
<a href='javascript: void(0)' onclick='location.href=link_version_1_1'>Version 1.1 Code: 2435</a><br>
<a href='javascript: void(0)' onclick='location.href=link_version_1_2'>Version 1.2 Code: 5687</a><br>
<a href='javascript: void(0)' onclick='location.href=link_version_2_11'>Version 2.11 Code: 0986</a><br>
<a href='javascript: void(0)' onclick='location.href=link_version_2_2'>Version 2.2 Code: 7098</a><br><br>

<a href="javascript: void(0)" onclick="location.href=link_opera; return false">Opera versions</a><br>
<a href='javascript: void(0)' onclick='location.href=link_opera_15_0'>Version 15.0</a><br>
<a href='javascript: void(0)' onclick='location.href=link_opera_12_15'>Version 12.15</a>



<div style="position: absolute;left: 200px; top: 50px; right: 200px; bottom: 50px; border: 1px solid black; padding: 20px; background: white">
<div style="position: relative; text-align: center;"><button style="cursor: pointer" onclick="location.href='index.html'">HOME</button> <button>SEARCH BY VERSION</button> <button>ABOUT</button></div>

<br><br><div id="add" style="position: relative; top:50%; margin-top:-130px; ">
<span style="font-size: 150%; font-weight: bold">LIST OF APPLICATIONS</span><br>
<ul >
<li><a href="javascript: void(0)" onclick="location.href=link_whatsup; return false">Whatsup</a><br><br>
<li><a href="javascript: void(0)" onclick="location.href=link_opera; return false">Opera</a><br><br>
<li>Skype<br><br>
<li>Mozilla
</ul>
</div>

</div>

<script>
if(location.search)
{
document.getElementById('add').innerHTML=unescape(location.search.substring(1))
}
</script>

</body>
</html>
The URLS are friendly and informative now.
All 'pages' can be bookmarked (although there's only one real page, called index.html).
The URLS in the address bar are slightly different from what you asked, because - although we can manipulate the text in the address bar - not all symbols can be used for that.
If a visitor watching one of your pages, say: mydomain.com/app/whatsup.html-->versions-->version 1.2 code 5687, wants to copy the address from the address bar, he/she doesn't in fact copy mydomain.com/app/whatsup.html-->versions-->version 1.2 code 5687 to the clipboard, but:

index.html?mydomain.com/app/whatsup.html--%3Eversions--%3Eversion%201.2%20code%205687%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cbr%3E%3Cdiv%20style%3D%27position%3A%2 0relative%3B%20font-size%3A%20150%25%3B%20font-weight%3A%20bold%3B%20top%3A-15px%3B%20z-index%3A1%3B%20background%3A%20white%3B%20width%3A%20100%25%27%3EDOWNLOAD%20WHATSUP%20%3Cbr%3EVERSION%201.2%20CODE%3A%205687%3C/div%3E%3Cbr%3E%3Cbr%3E%3Ca%20href%3D%27javascript%3A%20void%280%29%27%20onclick%3D%27link_download_version_1_2%28%29%27%3EDOWNLOAD%3C/a%3E.
If the person opens a new window and puts that longs string in the address bar, he / she will get the right 'page'. This long URL will change into a 'fiendly' one as soon as he / she starts navigating the page, so there's no real problem.
I've put all the links at the left of the page to help you understand how they should be created.
Once you understand the method, you can develop this further.

janu
07-05-2013, 03:24 AM
Thanks real hard work but I think putting almost 20,000 HTML pages contents in a single page head tag will make the index page load heavy ..

as earlier in one my of posts you suggested me to use server side scripting echo get_method and post_method through .htaccess to achieve the same .. but i don't know how .. coz I can say that as beginner I started learning points from you as well as from this site ...

I use Linux Apache server with PHP support

molendijk
07-05-2013, 12:00 PM
So back to the suggestion I made in post #9, where I use separate pages for including body content?
As for other ways of including external content, I would suggest to google around (server side includes, client side includes, jquery.load, jquery append).