Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Basic Website Structure/Template
#1
Brick 
In my opinion, the best way to learn is to see a live/editable example.
Here's an example of a basic website that contains HTML, CSS and Javascript.
You can view how this template looks like at http://hides.tk

Code version of the code
[spoiler]
Code:
<!DOCTYPE html>
<html>
<head>
<title>Hides</title>

<script language="javascript" type="text/javascript">
<!-- Hide JavaScript
function home()
{
document.getElementById("content").innerHTML="<br />Home";
return true;
}
function about()
{
document.getElementById("content").innerHTML="<br />About";
return true;
}
function homepo()
{
document.getElementById("homep").style.color ='#9BC292';
return true;
}
function homepl()
{
document.getElementById("homep").style.color ='#000000';
return true;
}
function aboutpo()
{
document.getElementById("aboutp").style.color ='#9BC292';
return true;
}
function aboutpl()
{
document.getElementById("aboutp").style.color ='#000000';
return true;
}
function contactPopUP()
{
alert("Contact Us At: [email protected]")
return true;
}
-->
</script>
<noscript>
<h3>Some content may not be displayed due to your outdated brower.</h3>
</noscript>

<body bgcolor="#333333">
</head>
<body>
<center>

<br>
<div id="container" style="width:500px;box-shadow: 5px 5px 10px #000000;">

<div id="header" style="background-color:#FFA500;border-top-left-radius: 5px;
border-top-right-radius: 5px;">
<h1 style="margin-bottom:0;"><marquee><b style="text-shadow: 1px 1px 2px #000000;">Hides</b></marquee></h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<hr>
<b id="homep" style="cursor:pointer" onClick="home()" onMouseOver="homepo()" onMouseOut="homepl()">Home</b><br />
<hr>
<b id="aboutp" style="cursor:pointer" onClick="about()" onMouseOver="aboutpo()" onMouseOut="aboutpl()">About</b>
<hr></div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
<br />Home</div>

<div title="Contact Us: [email protected]" id="footer" style="cursor:pointer;background-color:#FFA500;clear:both;text-align:center;border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;" onClick="contactPopUP()">Copyright Hides.tk</div>

</div>
</center>
</body>
</html>
[/spoiler]

Text version of the code
[spoiler]
<!DOCTYPE html>
<html>
<head>
<title>Hides</title>

<script language="javascript" type="text/javascript">
<!-- Hide JavaScript
function home()
{
document.getElementById("content").innerHTML="<br />Home";
return true;
}
function about()
{
document.getElementById("content").innerHTML="<br />About";
return true;
}
function homepo()
{
document.getElementById("homep").style.color ='#9BC292';
return true;
}
function homepl()
{
document.getElementById("homep").style.color ='#000000';
return true;
}
function aboutpo()
{
document.getElementById("aboutp").style.color ='#9BC292';
return true;
}
function aboutpl()
{
document.getElementById("aboutp").style.color ='#000000';
return true;
}
function contactPopUP()
{
alert("Contact Us At: [email protected]")
return true;
}
-->
</script>
<noscript>
<h3>Some content may not be displayed due to your outdated brower.</h3>
</noscript>

<body bgcolor="#333333">
</head>
<body>
<center>

<br>
<div id="container" style="width:500px;box-shadow: 5px 5px 10px #000000;">

<div id="header" style="background-color:#FFA500;border-top-left-radius: 5px;
border-top-right-radius: 5px;">
<h1 style="margin-bottom:0;"><marquee><b style="text-shadow: 1px 1px 2px #000000;">Website Title</b></marquee></h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<hr>
<b id="homep" style="cursor:pointer" onClick="home()" onMouseOver="homepo()" onMouseOut="homepl()">Home</b><br />
<hr>
<b id="aboutp" style="cursor:pointer" onClick="about()" onMouseOver="aboutpo()" onMouseOut="aboutpl()">About</b>
<hr></div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
<br />Home</div>

<div title="Contact Us: [email protected]" id="footer" style="cursor:pointer;background-color:#FFA500;clear:both;text-align:center;border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;" onClick="contactPopUP()">Copyright Your Website</div>

</div>
</center>
</body>
</html>
[/spoiler]
Reply
#2
Tried it, It's basic but neat.
Reply
#3
(08-08-2012, 11:15 PM)Guntile Wrote: Tried it, It's basic but neat.

Yea, the code is clean and it's very easy to understand plus it only contains 1 file
which makes it even easier to manage :lightbulb:
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)