|
Making the Web Site.
Once you have bought a domain name and you have paid for someone to host your website on their servers you can make your site; write code.
The pages you see on the Internet are written in plain text with pictures or graphics imported into the body of the text and positioned to suit your
design.
It is important to be aware, right from the beginning, how low in kilobytes you need to make each page. Today we talk about computers with magabytes of this
and gigabytes of that. With a web page we are talking about an item a thousand or million times smaller than that. For instance, the photo you took with a digital camera that you
want to use on your site. The picture will be a hundred or thousand times too big to use on your page! It will need re-sizing and compressing to be of use. There are many powerful
graphic programs available but Microsoft Paint will do a basic job and it is free with Windows.
Many of your visitors will have a high speed Internet connection but there are still many in the world with a slow, dial-up, connection so keep your pages
small and therefore quick to load on their computer web browsers.
The Design.
While browsing the Net, analyze a page that has a design that you like. Bookmark the site or add to your Favorites. Right click on the page and save the page
to your computer to study how it is put together, the colours used, the font used and similar information.
It is a good idea to choose an overall size of your pages to suit the size of the window that most visitors to your site will have their computers set to.
Note, this is not the resolution of their monitor but the size of the browser window. Thanks to website statistics I can tell you that the common sizes today are:-
80% of visitors use a window size of 1000x576 pixels; 85% 984x568; 90% 912x552; 95% 784x432; and 776x424 would fit on all visitors screens.
Because my pages will have advertising on them I size the page around the international standard sizes of ads and banners. The common sizes are:-
728 wide x 90 pixels high - Leaderboard banner
468 wide x 60 pixels high - Standard banner
234 wide x 60 pixels high - Half banner
120 wide x 60 pixels high - Button
120 wide x 90 pixels high - Button
120 wide x 240 pixels high - Vertical banner
120 wide x 600 pixels high - Skyscraper
160 wide x 600 pixels high - Wide Skyscraper
plus square block ads and smaller buttons
The standard banner was sized in the early days when a common screen resolution was 640x480 but today a Leaderboard banner will fit the width of window of all
my visitors. Similarly, the 120 pixel wide standard for vertical ads has now been widened to 160 px which will also accommodate tools like Google Translate and Google Search as
seen on this page.
So this page width is a Leaderboard ad wide plus a bit of padding and the navigation bar is 160 px wide with a bit of padding added.
Browsers read a page from top left to bottom right so I place my navigation on the right and load the page left aligned. This way my visitors will see the
website content body text even if their window is narrower than usual and search engines will read the important content before the navigation bar's data. In addition, at this
width, the page will print without loosing important text on the right - a common problem.
Writing the Code
I use an old version of Dreamweaver to write my pages but there are similar WYSIWYG (pronounced 'wizywig' - 'what you see is what you get') programs like
Kompozer, which is still free software like its previous incarnation Nvu.
Simple text editors like Notepad (included with Windows) and the much more advanced website text editor HTML-Kit let you write advanced web pages.
Designing pages online has come a long way over the years and now WordPress and Blogger can produce good basic sites for free.
Most Web design programs have an FTP program built in but if you write your pages with Wordpad you will need a File Transfer Program (FTP) to upload your web
pages you made on your computer to your hosting company servers. There are many good FTP programs for free including FileZilla and WS_FTP.
Once you have uploaded your page, go to W3C validation site to check the code on your page. There is a
similar free service to check your cascading style sheets (CSS).
If the page fails to validate then try running the page through an htlm checker/fixer program like GuiTidy
(the download link is right at the bottom of the page). GuiTidy makes a backup of your page first and then corrects most of your bad code.
Code to Add
Make sure you give your page a Title between <title> and </title> tags in the head of the document. For instance, this page is titled "How to Make
a Website for the Internet". A descriptive title is important for search engines like Google to match your site to someone's search.
Also in the head, place a meta tag to advise search engines to spider all your site -
<META NAME="robots" CONTENT="FOLLOW,INDEX">. You can adjust this command to tell search engines NOT to spider certain of your pages if you so wish.
Another meta tag to add above the </head> tag is a short description of the contents of the page, thus-
<META NAME="description" CONTENT="How to make a Website">
|