So I made my three .html files, now how do I make a menu?

Page 1 of 1

12 Replies - 634 Views - Last Post: 04 July 2009 - 06:12 AM

#1 papuccino1  Icon User is offline

  • His name was Robert Paulson.
  • member icon

Reputation: 61
  • View blog
  • Posts: 1,121
  • Joined: 02-March 08

So I made my three .html files, now how do I make a menu?

Posted 02 July 2009 - 03:39 PM

You can see the sites here:

EDIT: There is an index.html but I didn't include it because it'll be dramatically changed once I learn how to make a menu. :P

http://papuccino1.ex...et/aboutme.html

http://papuccino1.ex.../contactme.html

http://papuccino1.ex...ntprojects.html


Can someone actually do this for me? I've had so many people try to help me out but I can't find a working example that doesn't use frames. I would be eternally grateful because this working example with my files would help me a lot through the learning process.

People have suggested using PHP (Don't have a clue how to use it), but I should be proficient in HTML before charging with PHP, right?

I know you pro's could do this in 2 minutes flat. :P

This post has been edited by papuccino1: 02 July 2009 - 03:44 PM


Is This A Good Question/Topic? 0
  • +

Replies To: So I made my three .html files, now how do I make a menu?

#2 neit  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 187
  • Joined: 13-February 09

Re: So I made my three .html files, now how do I make a menu?

Posted 02 July 2009 - 03:57 PM

What are you actually looking for :

Option 1)
1 menu on each page which you have to update each page

Option 2)
only one menu included into each page so if you needed
to added a new link you only need to do it in one place.

You could do this in a number of ways but perhaps the easiest would be use php does your host support this?

Would the menu be going above the current banner headers?
Was This Post Helpful? 0
  • +
  • -

#3 papuccino1  Icon User is offline

  • His name was Robert Paulson.
  • member icon

Reputation: 61
  • View blog
  • Posts: 1,121
  • Joined: 02-March 08

Re: So I made my three .html files, now how do I make a menu?

Posted 02 July 2009 - 04:08 PM

Yep. I want the menu to go above the <h1> headers I made. My host supports PHP but like I said, I know diddly-squat about PHP. Could you guide me a bit?
Was This Post Helpful? 0
  • +
  • -

#4 neit  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 187
  • Joined: 13-February 09

Re: So I made my three .html files, now how do I make a menu?

Posted 02 July 2009 - 04:20 PM

1) First you will need to change your file types to php.
So either rename the file extensions from html to php or just save new ones
as php files.

2) create a new file.


<div id="menu">

<a href="name of link">Link 1</a>
<a href="name of link">Link 2</a>
<a href="name of link">Link 3</a>

</div>


Save this file as menu.html

Then in each page you want the menu to appear type the following above the header.

<?php require ("menu.html"); ?>

Some people will use include instead of require.

So any time you want to add a new link to them just open menu.html and add the new link.

Remember to style the menu div to fit with your site.

This post has been edited by neit: 02 July 2009 - 04:21 PM

Was This Post Helpful? 0
  • +
  • -

#5 papuccino1  Icon User is offline

  • His name was Robert Paulson.
  • member icon

Reputation: 61
  • View blog
  • Posts: 1,121
  • Joined: 02-March 08

Re: So I made my three .html files, now how do I make a menu?

Posted 02 July 2009 - 05:29 PM

I'll test this and see if it works. :D Thank you so much for the help.

One question though...

Why if PHP is like an upgrade of HTML, should anyone use HTML at all? :S (Probably a dumb question to you but I really am new to this)
Was This Post Helpful? 0
  • +
  • -

#6 neit  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 187
  • Joined: 13-February 09

Re: So I made my three .html files, now how do I make a menu?

Posted 02 July 2009 - 05:40 PM

php is a server side scripting language and executes on the server.
html runs on the browser and is more the structure.

Usually php is used with mysql database to create dynamic database websites.

so with a php file you cannot browse to c:\\mydocuments\website\test.php and display it in the browser all you will see is code.

If its running on server that supports php the code will execute and produce your desired results.

so to include the menu file you can use php.
It serves the same function as asp.
You could also do this with asp server side includes if your host supports
them if your more comfortable with that.

This post has been edited by neit: 02 July 2009 - 05:44 PM

Was This Post Helpful? 0
  • +
  • -

#7 papuccino1  Icon User is offline

  • His name was Robert Paulson.
  • member icon

Reputation: 61
  • View blog
  • Posts: 1,121
  • Joined: 02-March 08

Re: So I made my three .html files, now how do I make a menu?

Posted 02 July 2009 - 05:47 PM

Thanks for the answer :D

I must be doing something wrong though.

Here is my contactme.php file (I changed the extension from html to php):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
	<head>
		<title>Sergio Tapia Gutierrez - Contact Information</title>
		<link rel="stylesheet" type="text/css" href="web.css" />
		<meta name="description" content="Sergio Tapia Gutierrez - Contact Information" />
	</head>
	
	<body>
		<?php require ("menu.html"); ?>

		<h1>Contact Information</h1>
		
		<p>Please send any questions/comments/feedback to any of the emails provided below.<br />
		I would appreciate it if you used my GMail adress, but the choice is ultimately yours.</p>
		
		<p>I usually respond to emails in 1 business day.</p>
		
		<h2>GMail</h2>
		<p><a href="mailto:papuccino1@gmail.com">papuccino1@gmail.com</a></p>
		
		<h2>Skype</h2>
		<p>sergio.tapia.gutierrez</p>
		
		<h2>MSN</h2>
		<p><a href="mailto:kineticshampoo@hotmail.com">kineticshampoo@hotmail.com</a></p>
		
		<h2>Yahoo</h2>
		<p><a href="mailto:sergiospics@yahoo.com">sergiospics@yahoo.com</a></p>
	</body>
</html>



And here is my menu.html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

	<head>
		<title>Sergio Tapia's Home Page</title>
		<link rel="stylesheet" type="text/css" href="web.css" />
		
		<meta name="description" content="Sergio Tapia - Porfolio, Projects, Resources and Contact Information." />
	</head>

	<body>
	<div id="menu">

	<a href="contactme.php">Contact</a>
	<a href="aboutme.php">About Me</a>
	<a href="currentprojects.php">Current Projects</a>

	</div>
	</body>

</html>


However nothing is added when I refresh the site. Is it because I'm testing this on my local machine without using the internet? :(

Please help! :D
Was This Post Helpful? 0
  • +
  • -

#8 neit  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 187
  • Joined: 13-February 09

Re: So I made my three .html files, now how do I make a menu?

Posted 03 July 2009 - 08:05 AM

your menu.html file should only have the following and nothing else.

<div id="menu">

	<a href="contactme.php">Contact</a>
	<a href="aboutme.php">About Me</a>
	<a href="currentprojects.php">Current Projects</a>

	</div>


So not html body tags etc in the menu.html file.

Once done could you upload to your site and provide a link so I can view

This post has been edited by neit: 03 July 2009 - 08:08 AM

Was This Post Helpful? 0
  • +
  • -

#9 ghqwerty  Icon User is offline

  • if($spareTime > 0){ $this->writeCode(); }
  • member icon

Reputation: 40
  • View blog
  • Posts: 876
  • Joined: 08-August 08

Re: So I made my three .html files, now how do I make a menu?

Posted 03 July 2009 - 08:21 AM

and to give you an answer about inclued vs require (i might get this the wrong way round but here goes)

if the require can-not find the required page it will stop executing the script whereas include will continue to run the script which isnt advised as this could damage your db if it doesnt have the correct info from the required page.
Was This Post Helpful? 0
  • +
  • -

#10 papuccino1  Icon User is offline

  • His name was Robert Paulson.
  • member icon

Reputation: 61
  • View blog
  • Posts: 1,121
  • Joined: 02-March 08

Re: So I made my three .html files, now how do I make a menu?

Posted 03 July 2009 - 04:20 PM

Thank you for helping me out. :D

It still doesn't show.

Here's my contactme.php file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
	<head>
		<title>Sergio Tapia Gutierrez - Contact Information</title>
		<link rel="stylesheet" type="text/css" href="web.css" />
		<meta name="description" content="Sergio Tapia Gutierrez - Contact Information" />
	</head>
	
	<body>
		<?php require ("menu.html"); ?>

		<h1>Contact Information</h1>
		
		<p>Please send any questions/comments/feedback to any of the emails provided below.<br />
		I would appreciate it if you used my GMail adress, but the choice is ultimately yours.</p>
		
		<p>I usually respond to emails in 1 business day.</p>
		
		<h2>GMail</h2>
		<p><a href="mailto:papuccino1@gmail.com">papuccino1@gmail.com</a></p>
		
		<h2>Skype</h2>
		<p>sergio.tapia.gutierrez</p>
		
		<h2>MSN</h2>
		<p><a href="mailto:kineticshampoo@hotmail.com">kineticshampoo@hotmail.com</a></p>
		
		<h2>Yahoo</h2>
		<p><a href="mailto:sergiospics@yahoo.com">sergiospics@yahoo.com</a></p>
	</body>
</html>



And here's the menu.html:

<div id="menu">

<a href="contactme.php">Contact</a>
<a href="aboutme.php">About Me</a>
<a href="currentprojects.php">Current Projects</a>

</div>



The only time I reference menu.html from inside my contactme.php file is the line directly after the <body> tag. Please check if I'm doing it right.

Thank you!
Was This Post Helpful? 0
  • +
  • -

#11 neit  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 187
  • Joined: 13-February 09

Re: So I made my three .html files, now how do I make a menu?

Posted 03 July 2009 - 04:25 PM

Can you post me a link to it online.

I have copied the code you provided above and it is fine.

You can see the outcome here

I have also copied your stylesheet.

You can see the menu top left, you can style the menu further to suit your needs.

This post has been edited by neit: 03 July 2009 - 04:36 PM

Was This Post Helpful? 0
  • +
  • -

#12 papuccino1  Icon User is offline

  • His name was Robert Paulson.
  • member icon

Reputation: 61
  • View blog
  • Posts: 1,121
  • Joined: 02-March 08

Re: So I made my three .html files, now how do I make a menu?

Posted 03 July 2009 - 06:16 PM

That is SO wierd! The menu shows fine on your site, but it doesn't when I test it by opening the contactme.php file in firefox. Is it because I'm testing it offline? :S

Edit: Aha! So it was because I was testing it offline! But I have a major question. Is there no way to test my websites without using the internet?!

Thanks for all your help Neit, truly wonderful work. :D

This post has been edited by papuccino1: 03 July 2009 - 06:27 PM

Was This Post Helpful? 0
  • +
  • -

#13 neit  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 187
  • Joined: 13-February 09

Re: So I made my three .html files, now how do I make a menu?

Posted 04 July 2009 - 06:12 AM

You won't be able to test it locally unless your running a server that supports
php locally.

If I am running php scripts locally I use xampp.

It installs apache webserver, php and mysql

html and javascript files can be tested offline as they do not require a server.
php and other server side scripting languages require a local server.

If you install xampp on a windows machine you will need to the files
you to test into the htdocs folder path: C:\xampp\htdocs I usually create another folder in here for each project I am working on.

You then start the apache server and and type the address into the address bar.
Example:
http://localhost/pap...1/contactme.php

would display the page located at
C:\xampp\htdocs\papuccino1\contactme.php

The php scripts would run.

Hope that helps.

You can style the menu and separate the links a little further your site.

This post has been edited by neit: 04 July 2009 - 06:13 AM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1