Actually a website is merely related and often linked (hyperlink) web pages and its related files such as images, CSS style sheet, sound etc. Because these files including web pages we grow from few file and tens and hundred or more file, it is however important we use folders and sub-folders to keep this related together. So we could liken the parent folder to be the website.
We will continue our exercise by creating a new page so as to refresh our memory as we continue, although similar to the last example but instead of just dumping our webpage on the desktop it will be better to have it inside a folder probably named after the website so as to keep things organize and easy to manage the “website”.
For example, we want to create a website for our organization Bengallery Information Technology; we can start by creating a folder or directory name “BIT website” that is an abbreviation for “Bengallery Information Technology” and have all our webpage and its related files such as pictures or CSS file inside the same folder as we will see shortly.
Creating the BIT website
STEP1 Right click the blank space on the desktop
STEP2 Point to New, from the menu list
STEP3 Click “Folder” from the sub-menu, immediate you should see the folder on the desktop screen, then type “BIT Website” to rename the new folder and deselect.
See the screenshots below.
Creating the new folder
Rename the new folder
After deselecting, by clicking the blank desktop area
Note: you can have your website anywhere in your computer, not only on the desktop.
Then after this is done we can start to create our webpage inside the “BIT website” folder.
Creating the Webpage
Creating you webpage needs some planning to determine the pages your website will need or require.
However regardless of your plan and number of pages, one page is inevitable; The Homepage. The homepage also known as the index page and it’s the first page that appear when you visit a website, for example you visit our website www.bengallery.net your web server automatically return www.bengallery.net/index.php because the “index.php” is the Homepage.
Never mind the .php extension is because we have the programmed using PHP we will learn about PHP later in this book, but for now assume it is index.htm.
So we will start by creating our INDEX page (index.htm) using notepad just as we did earlier.
STEP 1. Click the “Start” button, from the task bar (below the desktop environment)
STEP 2. Point to the “All Programs” to display its sub-menu
STEP 3. Then point to “Accessories” to display its sub-menu
STEP 4. Click “Notepad” from the list, after Notepad had started, type the following into the text editor.
<title> Bengallery Info. Tech. (BIT) the leading web solution developer </title>
BIT is an IT company who specializes in delivering web solution
We have recorded a huge success in:
Developing Web-based software
Web / IT consultation services
When done with the typing, we will now save the web page inside the BIT Website folder we have created on the desktop.
STEP 5. Click “File” from the menu bar
STEP 6. Click “Save” or “Save As..” from the drop down list.
STEP 7. The Save dialogue box will appear, Click “Desktop” from the left side, you will see the “BIT website” folder we created earlier as well as other icons.
STEP 8. Double click the “BIT website” folder to open it.
STEP 9. Type “index.htm” in the “File Name” box of Save dialogue box and click the “Save” button
Note: without the “.htm” file extension the “index” file will not be recognize as an HTML webpage
When you open the webpage by double click the “index” webpage in our “BIT website” folder.
The result should look like the screenshot below:
The preview of the index page
You might be wondering why all the text in looking scattered and clumsy rather than appearing on different line as entered in notepad, I purposely use this example so as to draw your attention to the fact that you may have your text type on different line in notepad as we did, but that will not make any difference when previewed on a browser, remember you are not typing a document in MS Word, this is HTML where every output is controlled by some sort of tag as you will lean in the next exercise using break line, paragraph and alignment.