How to Build a Simple Website?

Rituraj Kalita
July 2012

Building a simple website is quite easy. If you know how to type in an essay in a computer - i.e., within one of its word-processors such as WordPad, Word or PageMaker - then you're already halfway through it. Nowadays, people mostly type in the contents of their website within a webpage-editor such as PageBreeze or KompoZer (both are freeware) or Microsoft FrontPage (once used to be a part of Microsoft Office), instead of directly writing coded raw website-contents in the hypertext mark-up language (i.e., HTML) as they tended to do some decades ago. A webpage-editor (also called an HTML Editor) is just similar to a word-processor, as you can see from the figure below, but its usual output is not a word-processor document file ready for printing, but rather a webpage file (e.g., the file How_to_Build.htm that you're presently viewing) ready to be published so as to become a part of a website (e.g., of the website www.angelfire.com/pro/riturajkalita). Such webpage-editors are generally WYSIWYG ones, which means that What You See (within the editor) Is What You Get (within the website when that is viewed).
Note: A webpage (even called page, in website jargon) not at all means a portion of a file printable on one piece of paper, as is the case with meaning of 'page' for word-processors such as Microsoft Word. A webpage always means the whole webpage-file. A webpage, instead, may be so large that it may require ten or fifteen paper-pages (pieces of paper) to get it printed, but still it'll be called one webpage! A webpage file generally has an extension .htm or .html in its name (in the complete name of a computer-file, the extension implying the type of file - e.g., .htm - immediately follows the given name e.g., How_to_Build).

A website (such as www.angelfire.com/pro/riturajkalita that you're viewing now) generally consists of several such webpages along with images (pictures), PDF-documents and multimedia (i.e., audio/video) files. But it is the webpages that remain bound to one another (via hyperlinks) - forming the core of the website - and they also bind images, documents and multimedia files (by hyperlinks or as embedded files) present within the website (once you get these things ready with you, there are many hosting services ready to host your website, some of them even for free). Check that the figure below is indeed mentioned as an embedded image file PageBreeze.gif (yes, the figure does remain as a separate image file mentioned within the webpage - surely not remaining within the webpage file itself, unlike what happens in Microsoft Word), by right-clicking the mouse on the image and then choosing the Save Image As (or a similarly worded) option.
Note: A hyperlink, if you haven't known it yet, is a link (generally on some underlined and blue-coloured text, as on the prominent one seen in the next paragraph, but sometimes found even on an image) found in a webpage, so that when one clicks at it, another webpage (or sometimes a PDF document) gets opened.

PageBreeze working on this very page - you'll also mostly need just to type in matters

A webpage, as we've indicated above, can also be written as HTML-coded raw text (obviously, by knowledgeable persons only) using raw text editors such as Notepad or DOS Edit. However, when you're viewing a website, you're obviously not seeing the coded raw text (click at the hyperlink just below to see some coded raw text) but rather the published output with coloured and formatted (italic etc.) text. The embedded figures, such as the one above, are also mentioned within the HTML-coded raw text. The colour and formatting etc., also remained mentioned therein. Interesting, isn't it? Click here to view the coded raw text form of the webpage file typed till this stage. Note the beginning <html>, <head> & <body> and the ending </html>, </head> & </body> code-words - omnipresent in all webpages. Also note the way the embedded image file PageBreeze.gif is mentioned herein and also how the hyperlink to the file showing the coded raw text has been accomplished (needn't try to remember how exactly these are done - just try to get amused!). Also, note that the title of the webpage, i.e., the line that appears on the top-most blue bar of the page window (e.g., How to Build a Simple Website in this case) remains mentioned, enclosed in between the <title> and the </title> code-words - within the topmost things enclosed by <head> and </head>. You may also note that some words in this viewed webpage have got italicised just because in the raw text they were kept enclosed within <em> and </em>. Also, can you believe that   means insertion of just one extra space?
Note: When you'd become a little more knowledgeable about HTML coding, the best way to examine and modify the HTML coding of any of your webpages would be to open that webpage file with Notepad, say by right-clicking at the webpage file and then choosing Open With - Notepad (however, in Windows 7, this won't work - instead you'd have to open the Notepad program first and then try to open that file with Notepad). On the other hand, while viewing any website on the Internet, you may examine the underlying HTML coding of the webpage being viewed by right-clicking at any free part of the webpage, and then by clicking the View Page Source (or a similarly worded) option from the resulting pop-up menu,

Thus, a webpage can give us three different views for it:: (a) The coded raw text view, of interest to the experts and of amused bewilderment to us (b) The viewer-viewed state, while being viewed (using a web browser such as Internet Explorer, Mozilla Firefox, Google Chrome, Opera or Enigma Browser etc.) as part of a website (c) The 'being-written' view, encountered by the webpage-author within his/her webpage-editor such as PageBreeze. However, you can see all the three views within the webpage-editor only: always there are three tabs on such editors (see the topmost figure) that reads something like (i) Normal, (ii) HTML Source and (iii) Preview. Generally you'd be working on your webpage using the Normal tab, editing the webpage file in a nearly wysiwyg environment. The HTML Source tab lets you view and modify the coded raw text lying in the background - use this tab time to time to understand how the HTML language works in the background to yield our attractive, versatile webpages. When you'll become somewhat more knowledgeable, you might use this tab to correct some webpage errors also. The Preview tab lets you see how exactly the webpage will look within the website when viewed by a viewer using a web-browser - naturally there's no editing facility available with this tab unlike with the other two.

Beyond these basics, however, let's not go too deep into the coding aspects - that might make us bored and kill our interest. Besides, PageBreeze or KompoZer etc. are always there to take care of that, so why bother? Let us now learn to actually create webpage files, to create hyperlinks from one file to another and to a PDF document file, and to embed image files within a webpage file. Believe it, just this much will make you able to design websites. Beyond that, hosting a designed website somewhere on the web is a job too easy to bother any genuine worry.
Note: PDF (Portable Document Format) is a format for document files, which can be viewed in different types of devices (common PCs, Apple Macintosh computers, iPads, many cell-phones) and with different types of operating systems (Windows, Fedora Linux, Ubuntu Linux). A PDF document is not easily modifiable, unlike the case in a Word or a PageMaker document. So, PDF documents are widely used on the Internet.

To create webpage files easily, you need a wysiwyg webpage-editor (such as PageBreeze 4.0) in your computer. If you don't already have one installed, PageBreeze would be a good starting choice as it is easy to learn and results in simple, easily understandable webpage-output (though its spelling checker is primitive and the Tab key doesn't work here as is generally expected). KompoZer (I have KompoZer version 0.7.10) however, results in somewhat more complicated, though more effective, webpage-output and doesn't at present have a inbuilt spelling checker - you'll need to paste its output within a word-processor (e.g., Word) if you want to get the spellings checked. Windows forms of PageBreeze and KompoZer are freely available from the Internet in the form of medium-sized (~10 MB) installer files, to install them one just need to double-click the installer file and then go on following the instructions! To install KompoZer in Ubuntu (a form of Linux) systems, may follow these instructions.
Note: It is more advisable to actually download the software from a reputed software-hosting service such as CNET or Softpedia instead of from websites of individual small fry developers such as myself - they're obviously in a better position to maintain our software setup files always free of all kinds of malware.

After the installation is over, create a folder (say D:\Beth) within your computer to store all the files (i.e., yet-to-be-written webpage files, existing image files, PDF documents and audio files etc.) planned to be included in your website (planned, say, to talk about your pet goat Beth). Transfer all such image files, PDF document files and audio files etc. to this folder. There remains yet, however, one more scope for worry. The images (photos etc.), the multimedia files (music etc.) and the PDF documents generally tend to be quite bulky in data size, ranging from several megabytes (MB) to hundreds of megabytes, whereas you would be generally offered somewhere around 50 MB of total space by the free-website hosting services. Thus you must, generally, need to drastically contract the data size of your image, multimedia and document etc. files - the following two lessons would tell you how to do that.

How to obtain the final images and the PDF documents so as to be suitable for my website?

How to obtain the multimedia files in a manner suitable for my website?

While trying to open PageBreeze, however, you'll find one minor botheration - it tries to access the Microsoft Office installation disk (God knows why?), naturally fails and then shows a dialogue box asking where that is. Click Cancel when it tries that - once, twice or thrice if needed - and you're finally successful in getting PageBreeze opened! Now, let's at first create the home page (also called the main page or the index page) of your desired website. It is that particular page which your viewers (audience) would see when they open your site e.g., www.beth.50megs.com. This page must always be named as index.html (remember, index.html with all lowercase letters only - it the world of websites the upper/lower cases of the alphabets do matter). Other webpages of your website may have any names other than this one, but remember to avoid a filename with spaces (and with symbols other than the underscore i.e., _ sign) within it, as these are generally not allowed in websites (thus How to Build?.htm is not allowed, whereas How_to_Build.htm is OK). Now to create the home page, click at the new page icon () - or at the New Page.. option from the File menu - within PageBreeze , fill in the Page Title asked (say, Our Dear Pet Goat Beth), place a tick (by clicking mouse) at the box against This is the home page line and click OK. You'll see that a nearly blank page has appeared, and that it has automatically got named as index.html. Type in text to edit the contents of the page, as you would do in case of a word-processor, and keep saving your work (there's a usual icon to save). You may select your typed paragraphs and choose left, right or center (i.e., centre) alignment as usual. You may also select some text and apply bold, italic etc. formatting or colour to those text (there's a colour icon on a top panel, next to the icons for bold, italic etc.). If you want to insert an image, move the cursor to (or click mouse at) the location of the page where you'd like to insert that, then choose the Graphic... option from the Insert menu (or just click at icon or press F5). To get the (English) spellings checked, choose the Spell Check option from the Tools menu, or click at the icon . A dialogue box would appear, checking your spellings - many of the suggestions offered are obviously wrong (PageBreeze spell-check separates i & e from 'i.e.,', and finds that both these one-letter words are incorrect!) - but the actual spelling mistakes do get detected as well. [To check the spelling or the meaning of a particular word while you're typing anything, a very good utility is WordWeb, which is a wonderful yet free English thesaurus and dictionary.]

Checking the Meaning of a Particular Word Using WordWeb

Creating hyperlinks on the home page would require that the (other) target webpages already exist. So, let us postpone that job till the other webpages are created. Instead, mark the text segments (say, by colouring them differently from the rest part) where you'd create hyperlinks later. Thus working on the index page, you can also plan where to place hyperlinks and what other webpages or PDF documents will become necessary. When this job is over, save the home page, and start creating the other webpages one by one. Click at the new page icon, fill in the page title for the desired page, but do not click the box against This is the home page line. This will lead to formation of a webpage with a filename related to the page title: thus, if one page title is given as History of Pets at Our Home, the webpage will get automatically named History_of_Pets_at_Our_Home.htm. This is too long a name (though not exactly invalid, it looks bad). So, let us continue working on this webpage and save it, but after the work is done and PageBreeze is closed, we should open the folder manually and rename such long-named files (say, as History_Pets.htm etc.).

After getting all the other webpages and PDF documents etc. ready in the same folder (be very careful to keep all the constituent files of the planned website within the same local folder, say in D:\Beth - otherwise you'll have a broken website), open the index.html home page in PageBreeze again (choose the Open.. option from the File menu, then choose the file index.html), now aiming to create its hyperlinks. To create a hyperlink from a piece of text (you should have kept such pieces colour-marked earlier), select that piece of text (say, the two words click here) and then choose the Hyperlink... option from the Insert menu (or just press the F2 key). The existing webpages and the PDF documents (within the same folder) will be shown, as displayed in the figure below.

Choice to insert hyperlinks in PageBreeze

Select the target webpage or PDF document (say, First_Teacher.pdf) to which the hyperlink is sought. Alternatively, you may also set an external webpage URL (say, http://angelfire.com/pro/riturajkalita/How_to_Build.htm) as the target. Next, you may choose to have the target file always get opened in a new window, by choosing the Frame Target option as _blank (what a mysterious language do the experts talk in!) - otherwise leave that option untouched to have the target file opened in the same window (thus letting your viewer miss the old webpage from his view). Click OK - the hyperlink is now established. Similarly establish all the required hyperlinks, save the file and exit PageBreeze. If there are other webpages on which some hyperlinks are to be established, work on them similarly, one by one. Now your website is ready for hosting.
Note: An URL (Universal Resource Locator) is generally a webpage or a file of another type existing within a website on the Internet (and so is universally accessible).

Before hosting on the World Wide Web, have a final check of your webpages for spelling and grammatical errors (there's no facility for checking grammar in PageBreeze!). To do that, paste your pages within a high-quality word-processor such as Microsoft Word, and get the spellings & grammar checked. Do you know that Microsoft Word shows all the (green underlined) grammatical corrections only after all the (red underlined) spelling corrections have been fully responded to by you? So right-click at every suggestion, and correct that or choose ignore as is proper - this way all red-underlined spelling suggestion will disappear and the green underlined grammatical ones will be shown to you. Similarly respond to each of them, and then some more grammatical suggestions may be shown! However, be cautious: you shouldn't copy the corrected text back to the webpage-editor (e.g., to PageBreeze) - this'll result in a bad and bulky webpage carrying some garbage from within the word-processor, besides with some formatting lost. Instead, read the suggestions yourself and introduce the suggested corrections manually into the webpage lying within the webpage-editor.
Note: If you do not have Microsoft Word or Microsoft FrontPage installed in your computer, you may install and download some quite good yet completely free word-processors such as Jarte 4.5 or AbiWord 2.8.6 and use them to spell-check your webpages in the above-mentioned way (you may even change the language in them for checking the spellings). Out of them, AbiWord looks quite like Microsoft Word, and it also similarly underlines the wrongly spelt words in red. There are also special grammar-checking utilities such as Ginger and the multi-lingual LanguageTool. [How to use Ginger and LanguageTool?]

Checking the Spellings of the Webpage's Text by Pasting that within AbiWord

To host your site as a novice, it is advisable to start with a free website hosting service (they'll arrange to show some advertisements at your site). I've significantly used three of them till now: angelfire.com, 50megs.com and geocities.com (the last one is no more in service). Out of the first two, 50megs.com offer free website with your (own or group or business) name coming at the front e.g., essg.50megs.com, whereas angelfire.com offers free site names such as angelfire.com/pro/riturajkalita, though it allows many webpages and images to be uploaded in one go. Registering for them is quite similar to registering for a free e-mail service, which you might have done by now. Once registered, they'll generally offer you website templates, but in poor countries such as mine, lack of good Internet speed tends to hinder online maintenance of our webpages. So instead, let us design the webpages offline, within our own computers, then just try to upload them into the hosted site. To do this in angelfire.com, you need to choose the Web Shell or the Upload Files link to upload all your website files one by one, from your computer to the website location offered by them.

After you've uploaded all files, your site is most probably ready, but better check (as if like a viewer) whether there's any link broken. If so, correct the links and re-upload the related files again. Finally, inform google.com and some other search engine sites about your new website - there are ways to do this (for google.com, you'll need to sign in to Google Webmaster Tools at google.com/webmasters).