Website design for gites – 3
This is part 3 in a series describing how to create your own website – see Gite websites for others.
We have seen how to create the world’s most simple (and least interesting) website, now we need to improve it – firstly by making the page interesting and second by adding links to more pages.
Making the page interesting
There are two aspects to this: the content of the page (description of your business, pictures etc) and appearance. These two aspects should be seen as separate processes, and this week we are only looking at content – I’m afraid you have to wait for the next tutorial before it starts to look nice!
You remember that last week we added the code:
<html>
<head>
<title>My brand new website</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1?>
</head>
<body>
<p>this will be a lovely website showing off my business or property in France</p>
</body>
</html>
This is called the html (or ‘code’) of the page, and it is where all the content is found. You can see that everything is wrapped up between labels in <> type brackets – these are the building blocks of a website page.
The whole page starts with <html> and ends with </html>, which tells the browser (Internet Explorer, Firefox etc.) where the page starts and ends. Within that there are two main sections: the section from <head> to </head> wich contains important information about the page, but isn’t part of the page itself; and the part from <body> to </body> wich contains the actual page information that a visitor to your site will see.
The <head> section
The key things in this section are, for example:
<title>Holiday rental property in the Ardeche</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1?>
<meta name=”description” content=”Holiday cottage in a small Ardeche village, close to Saint-Montan and the popular Ardeche Gorges”>
Of course, the text in the ‘*title’ and ‘description’ sections needs to reflect the actual content of your own website!
The <body> section
Items in the body have two characteristics: something to say what they are or how they should be displayed, and the actual content. For example, if he heading for your page is Great Big Gite your code will read <h1>Great big gite</h1> (since everything between <h1> and </h1> is treated as a main heading. Other sub-headings are <h2>, <h3> etc. A ‘normal’ paragraph will start with <p> and end with </p>.
We can use the same type of labels for display eg <b> – </b> will show a section of text as bold, or <i> – </i> as italics.
One type of html code that is slightly different is that used for an image (picture). For these we use code like
<img src=”images/image_number_3.jpg”>
there is no need for a </img> label to announce where the image has finished…for obvious reasons.
The above is very much the basics only – take a look at w3schools.com for lots more information about the available labels an how to use them. We now have the techniques for creating a whole page of your website! As example perhaps you could start with:
<html>
<head>
<title>Holiday rental property in the Ardeche</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1?>
<meta name=”description” content=”Holiday cottage in a small Ardeche village, close to Saint-Montan and the popular Ardeche Gorges”>
</head>
<body>
<h1>Villa with pool in the valley of the Ardeche</h1>
<p><i>Our villa sleeps eight people comfortably and has an olympic sized pool. If you stand in the garden you can smell the flowers and if you stand on the roof you can see the Alps</i></p>
<p>Lots more text about your property…Lots more text about your property…Lots more text about your property…Lots more text about your property…Lots more text about your property…Lots more text about your property…Lots more text about your property…Lots more text about your property…</p>
<img src=”http://www.francethisway.com/places/images/saint-montan.jpg” align=”center”>
<p>Lots more text about your property…Lots more text about your property…Lots more text about your property…Lots more text about your property…Lots more text about your property…Lots more text about your property…Lots more text about your property…Lots more text about your property…</p>
<p><a href=” index.php> Home Page</a> <a href=”house.htm”>House</a> <a href=”cottage.htm”>Cottage</a> <a href=”garden.htm”>Garden</a> <a href=”prices.htm”>Prices/Booking</a> <a href=”thearea.htm”>The Region</a></p>
</body>
</html>
If you copy this text above to your text editor, change the text and picture as you like, and then ftp it to your website you should have a page like THIS.
Links to other pages
You will see that the sample page of our gite website design includes something new that we haven’t explained yet – links to other pages (although we haven’t actually added the other pages yet so the links aren’t very useful until we do). You can add more pages simply by replicating the processes above and saving the pages as different files). Typical pages for your holiday rental site will include ‘the property description’, ‘the location’, ‘property availability’ and ‘contact us’. Then your links will of course link to these new pages.
To add links we use code like:
<a href=”sample.php”>Sample gite website</a> – where the text Sample Gite Website (you will use ‘Description’ or ‘Contact Us’ etc) comes between the link definition <a href=”sample.php”> and the closing label for the link </a>.
Overall
You can see that our page is starting to take shape, albeit not very lovely yet!
With the information above you now have the building blocks to create your complete website! Try out different things, take a look at the w3schools link above for more information, and don’t worry about trying new things – nothing too serious is going to happen when you go wrong.
A last useful hint – be aware that you can look at the code of any page on the internet when you are browsing – for example Internet Explorer has an option ’show the page source’ and all browsers have something similar. Looking at other people’s code is probably the best way to see how things work, and to get ideas about how to improve your own business or gite website.
One key thing to remember is that Google reads a page like a human i.e. top left >> to the right then down.
The important thing is to have your best key phrase (something like “Gite Rental XYZ Town”) at the top left as a link to your site and not something silly like “welcome to my site” as this is the most important link on your site
Hi
I agree…almost. But I think they look at the order of text and links in the souce code of the page rather than on the page itself.
So in the main francethisway site there are horizontal menus on every page, near the top – but in the code they are at the bottom (then positioned at the top with CSS). So for this site google would always see those as the last links on the page (it’s different in this blog section).
Perhaps from what you are saying I should move the menus up to the top of the source code – I’ll give it some thought!
Thanks for the idea.
From what I can tell the majority of home made websites that are built by people who otherwise aren’t interested in the finer points of code or the esoteric art of online marketing end up taking an inordinate amount of time for what is too often not a great result. Yes, a simple webpage is pretty easy to build, but will it do anything? Will it instill confidence and make sales? Will it even be found by people searching online? The hours of hair pulling are worth avoiding if you can find a reasonable professional to take care of it for you. Similarly I get my car serviced by a professional. It’s not that I couldn’t learn how to do it myself, it just seems a better use of my time to leave it to someone with a fully equipped garage and a lifetime of experience in that field.
I think there are two purposes to a (holiday rental) website – (1) increasing conversion rate from enquiries by giving more information, more pictures etc than can be included in a normal advert, and (2) increasing sales directly, if the site itself is found in search engines. As you say both of these are hard to achieve, the second probably more so.
I agree with what you’re saying about finding a professional – as long as someone knows how to find a professional and expects to pay them accordingly. There are a lot of people who become ‘website designers’ without knowing very much about either design or online marketing – and there is a real danger of paying a big price for something that still isn’t successful.
But find the right person for the job and certainly it’s money well spent.
Quite agree. A proven track record, examples of previous work and preferably testimonials from happy customers is a good start before you part with too much cash
Hi Boris,
Have once again spent some happy time on your site, and have also tried to take on board your advice / tips on creating a website.
As the headache slowly dissipates I was wondering if you could pass comment on the following.
If we wanted to create an Anglo/French website – for our b & b in Bourges – would we need two ( UK/FR) web hosts?
A French friend will probably help us with the design so the original site would be in French. We would then translate the same content/captions etc into English.
Though our web address would be a .com would it be necessary to translate all the key words into both languages ( I am guessing yes) and would it be advisable to have,say three, words strung together that mean something in both languages ?
I guess francethisway is aiming at primarily at the English ( speaking) market?
( And boy,what a change from a few years ago.You’re site is getting close to a one- stop- is -all -you- need- to- visit -France situation )
Looking forward to hearing from you if you have a moment
Best wishes from whatever is the opposite of a computer tekkie, John.
Hi John,
Lots of good questions, thanks!
Two websites or one? There are good arguments for both. In principle there are advantages in having two but in practice I would go for just one site (the .com version) and have a French ’section’ and an English ’section’ both within the same site. The issue is mostly to do with how sites get found in the search engines – google etc look how many links there are from other websites to your own, and then rank it higher if there are more. Links are generally pretty hard to get hold of for one site, even harder for two different sites. After all, in what circumstances would someone decide to link to your b&b website? (or my gite website? I’m not being personal!),
So better I think to focus on getting one site to rate OK than have two sites that don’t rate at all.
That is what we do with this site by the way – although most of the French version is waiting for my daughter to do the proper translations (failing that it’s my big prject for the next 12 months).
Google etc are pretty good at knowing the language of a page, but it is true that a separate French only site, hosted in France, would show better in google.fr than a ‘mixed’ site (if it had links to it).
Yes, it is better if the separate sections have appropriate keywords in the relevant language. The longer the phrase (eg 3 words rather than 1) the eaiser it is to rate for the phrase…and the less people search for it. Go to https://adwords.google.com/select/KeywordToolExternal and try a few options, see which phrases get searched for most often (usually hard to rate for) and which don’t. Of course there’s no point being first for ‘attractive centrally placed bed and breakfast in Bourges’ if it’s not something anyone ever searches for…
Just say if that’s not at all clear, it’s a bit of a whistle-stop response.
Thanks for the comments about the site, it’s about 3 1/2 years old now, I reckon another 2 years and we’ll be looking pretty complete. There are still some embarrassing gaps in coverage at the moment but we do work (and travel) non-stop in an attempt to improve it!