Your very own webpage in 5
simple steps!
Building a webpage - especially designing it, can be a bore - hence we
bring you this easy to use template to build your own webpage. Similar
templates were used to set up the following sites
- iWML 2013 Workshop website - have a look here.
- Turing Centenary Celebrations @ CSE, IITK website - - have a look here.
- Golden Jubilee Celebrations @ CSE, IITK website - - have a look here.
- SIGML Group Website here - have a look here.
- WAPMDS 2009 Local Arrangements Site - have a look here.
- FSTTCS 2009 Local Arrangements Site - have a look here.
- Have a look at a sample webpage here.
A few people have used this template to design their webpages - if you do so too, please send me a mail so that I can put your website on this list.
Since these are personal webpages, they might change over time and switch to other templates.
- Prof. Manindra Agrawal, Department of Computer Science and Engineering, IIT Kanpur [[website]].
- Prof. Arnab Bhattacharya, Department of Computer Science and Engineering, IIT Kanpur [[website]].
- Konstantin Kutzkov, IT University of Copenhagen [[website]].
- My own website was designed by modifying this template [[website]]. I have now shifted to Jemdoc which requires compilations etc but I still like this template due to its simplicity.
The template itself conforms to the CSS level 2.1 and HTML 4.01
Transitional standards and so shall your webpage if you are a bit
careful. You can then proudly put the W3C validator icons in the footer
(details below).
Contact the webmaster here
for any queries/suggestions.
Follow these 5 simple steps to set
up your webpage. First of all unzip
the contents of the archive template.zip (download it from here) into your webarea. The file index.php
should be present in the web directory itself - not in a subdirectory
- Open the file
header.inc
in a text editor and
modify the value of the variable base_url
on line number
2 to set your homepage URL.
Suppose your homepage URL is http://www.cse.iitk.ac.in/users/erdos/
then modify the assignment to the following
$base_url = "
http://www.cse.iitk.ac.in/users/erdos/
";
Be careful not to omit the forward
slash after the username (in this
case erdos
)
- Dont close the file yet ! Give your webpage a nice title by
modifying line number 8.
Suppose you want the title to be
Homepage
of Paul Erdos, then modify the line to the following
<title>Homepage of Paul Erdos</title>
- Change the header message
for your homepage by opening the file
menu.inc
and changing line number 19. Suppose you wish the header message to be Welcome to my Webpage then change
line 19 to the following
print "Welcome to my Webpage";
The template contains three pages - and index page,
a page to store your personal details and one to publish your contact
details. These are the files index.php
, about.php
and contact.php
respectively. Open these respective files
and edit them to put in your content.
You
can put in any HTML tags/structured elements/links in these files. Be
sure to put content only between the delimiters
<!-- begin content -->
<!-- end content -->
If you wish to add
more pages (or remove some
existing ones) then you need to edit the file menu.inc
.
For every page that you wish to add - give the page a title (say NewPage) and a filename (say new.php
)
and modify the variable menu_items
in the file menu.inc
(line number 2 onward) from the existing to the following
$menu_items = array("Home"=>"index",
"About Me"=>"about",
"Contact"=>"contact"
"NewPage"=>"new" );
Take the file skeleton.php
, make a copy and name it new.php
and put all the content you want to put in. Also (IMPORTANT) modify the
variable current_page
on line number 2 to set it to the
name you gave this page
$current_page = "NewPage";
Apart from this, the template offers a lot of customizations for those
with a little knowledge of PHP and CSS
- You can change the background
image by replacing the file
background.png
with your own background image. The image should be of size 800 x 600
pixels.
- You can change the header image
by replacing the file
header.png
with your own header image. The image should be of size 674x 90 pixels.
- You can even have the header image/header message change from
page to page - try out your PHP skills on this - most of the code to do
this is already present in the file
menu.inc
.
- You can place a footer
in your webpage by modifying the file
footer.inc
.
- You can change background colors
etc by modifying the CSS file -
be sure to modify both the CSS files otherwise your webpage will look
different on different browsers. Suppose you want the background color
to be blue, then change line number 2 in the files
style-moz.css
and style-ie.css
to
background-color:#0000ff;
Look up how to encode your favorite color in HEX on the net.
Acknowledgements
The original template was designed by Ramprasad Saptharishi.