Website best way to navigate through pages

I'm new in Javascript and I am practising making my own website. I would like an advice which is the best way to navigate through pages. I have

• index.html
• pages/home.html
• pages/about.html
• pages/contact.html

The easiest way is the link to each page but this would mean that I need to reply the same template to each page by coping-paste the same code all the time (and I don't think it is really smart). Moreover the URL of my website will be, for example, www.mysite.con/pages/about.html and it is not very elegant; I would like more something like www.mysite.com/about (without ".html").

I also tried using load() function from JQuery so that I have my index page

<div id="pageContentHere"></div>

and through JQuery I load page content into the div; this is very usefull because so I only write one template but my URL will always be www.mysite.com and if someone wants to go directly to the about page there will be no URL to link that.

Could you please suggest me how would you do in a smarter way?