Lesson 01: Introduction to Websites

	Introduction to Webpages and Website

Starting a Website

Website Hosting

A website is a series of files that display in a public network called the Internet. The files of a website share a computer location and are accessed by other computers on that big network. A website resides in a computer named a server. It is that computer that is connected to the Internet.

Storing a website on a server is referred to as hosting a website. You can possibly host your own website but the steps to follow are so cumbersome that you have to really want to do it yourself (it is not complicated; the difficulty resides on the steps to follow and the commitment you will make: the web server, the electricity or power supplied to the server, the connection to the Internet, the security to your server, etc). An alternative is to let another company host your website and you would simply purchase (or rent) that service from that company. You will need to know the domain name you want your site to have. You will need to have a home or business address, and you will need a credit card (or a valid means to make payments).

The domain name is the address by which people will access your website. This is abolutely the first piece of information you should (must) have. If you don't yet know the domain name you want to use and you want to test the availability of domain names, you can go the Network Solutions website, type different names and click to submit. A message will regularly let you know whether your desired domain name is still available or not. Once you have found the name you want, make a note because you will need it later.

The steps to get a website hosted are generally straightforward and easy to follow:

If you already know the company you want to use, contact it. Otherwise, use a search engine and do a search on "web hosting":

The results will present many companies addresses to you. Click each and shop around. The criteria to consider are:
- The reputation of the company: Unless you personnally know someone who had used a certain company, you have no way of asserting the reputation of a web host. The fact that a company has good reviews doesn't mean anything (this is based on experience). The fact that a certain company or website that ranks website hosting companies places a certain company on top doesn't mean much
- The operating system: Most personal and small business websites are hosted on Linux or Microsoft Windows Server (but there are many more operating systems). If you are not fixed on what you want, select Linux (there is absolutely no problem with Microsoft Windows hosting; it is up to you), which is the default of most website hosts. If you explicitly want your website to be hosted on Microsoft Windows, when shopping, closely check that the company supports it because many companies don't offer Windows hosting. What's the difference and why should you care? It is mostly based on the fact that you plan to use ASP.NET or not. If you want to use ASP.NET and/or Microsoft SQL Server, look for Windows hosting. Otherwise, use Linux (PHP is available on both Microsoft Windows and Linux but ASP.NET/MS SQL Server may not be available in Linux hosting)
- The monthly rate: Website hosting is mostly cheap, in the ranges of $2 to hundreds of dollars a month. The fact that a company is cheap doesn't mean that it is providing a bad service and the fact that a company is expensive doesn't make it better. Select a cheap to middle price and keep in mind that if you are not satisfied in a few months, you will have the option to look for, and use, another company. Most website hosts will ask you to take a commitment for a whole year or more, in which case the monthly rate would be lower than if you pay monthly. There is usually nothing bad with a yearly commiment, but then when/if problems start... Honestly, most companies make real efforts to perform well
- The services: Check the list of services that the company provides. Some services are more important and most companies provide all those same services. Unfortunately, preferences are individual-based
Once you have selected a company, you should see a link about creating an account or joining. Click it
Most companies ask you first to specify the domain name you want to use or to find one. Here is an example:
Then you will be asked to fill out a form where you must provide your home or business address, and the means of making payment. Here is an example of such an application:
When you have completed the forms and submitted them, if everything is alright, the web hosting company will send you an email that contains information on how to access the control panel of your site (very important) and something called an FTP address (very important also). The company has to give these pieces of information

The Folders of a Website

A folder is the computer's virtual container of anything that must reside on a website. For this reason, folders are referred to as parent to the items they contain. You can create a folder directly on your website. To do this, log in and access the control panel of the site. You should see a link labeled File Manager or something like that:

Accessing a Control Panel

Click File Manager. A window with two frames should open. In the left frame, click the folder that contains or will contain your website. In most cases, that folder is named public_html. Here is an example:

If you don't see that folder or don't know what folder you should use, contact your web host and ask. To create a folder, click the appropriate button.

You can also create folders on your computer and then you will upload the folder. On the computer, a folder is created as you should be familiar already.

When naming a folder, it is a good idea, not a requirement, to give it a meaningful name. For example, if you are planning to use pictures on your site, it is a good idea to store them in a folder named images.

Just as done in the regular daily computer use, folders on a website are organized as a hierarchy. The first and primary parent is the one that starts and contains the primary documents. Of course, other folders, called sub-folders, can be created in it, and other sub-folders can be created inside of existing sub-folders.

Practical Learning: Creating a Sub-Folder

Set up the root directory:
- If you are working directly from the Control Panel of your website, access the File Manager and click the main folder of your site. It is usually named public_html
- If you are using Microsoft Windows, create a new folder named wattsaloan on the C: drive
- If you are using Linux, open a file utility. If you are using Ubuntu, click the Files icon. This should display the Home directory. Right-click an empty area of the middle section and click New Folder:
  
  Type wattsaloan and press Enter twice to display the content of the new folder
Create a folder named images:
- If you are working directly from the Control Panel of your website, click the root directory. It is usually named public_html. To get a new directory, click the button to create a new folder and name it images
  
  Click Create New Folder
- If you are using Microsoft Windows, in the wattsaloan folder, create a sub-folder named images
- If you are using Linux, inside the wattsaloan folder, create a sub-folder named images. If you are using Ubuntu, inside the window for the wattsaloan folder, right-click the middle area and click New Folder. Set the name to images
In the html_public folder or the wattsaloan folder, create another folder named services

The Files of a Website

Introduction

A file is the object that displays a webpage. Normally, a file cannot contain another object, such as another file. A file must be created in an existing folder, referred to as its parent. In the same way, many files can be created in, or can belong to, the same folder. Such a folder acts as their common parent.

One of the jobs of a webmaster is to know where a file resides, what type a file is (text-based, script-based, graphic, audio, video, etc). Part of this information is provided by the file extension. Some time to time, you will need to change or delete something in a file (such as deleting or moving words in a text-based document), you may need to tremendously change a file (such as cutting the length of a song or video), etc. Sooner or later, you will need to create, move, or delete files, for any reason. As we will learn later, you will also want one file to refer to another.

Introduction to Creating Files

You can create a file directly on your website or you can create it on yor computer before uploading it to your website. To create a file directly on your website, access the control panel of your site and and open the File Manager (or something like that). In the left frame, click the folder that will contain the file. Look for a button labeled Create A File or something like that. Provide the name of the file and make sure you add its extension. Once the file exists, you can edit it. To do this, click it and click Edit.

To create a file on your computer, you have more options. If you want to create a text-based file, you can use a text editor such as Notepad or vii or a Web editor. To create a different type of file, you should/must use the right application.

Fundamentals of HTML

Introduction

The hypertext markup language, or HTML, is the language used to publish things using a computer application named a user agent or browser. Put in reverse, a browser is a computer application that receives instructions in a descriptive language, called a meta-language (a language that describes some things), and displays them in its main area which can be the screen or a computer monitor.

The language serves two purposes. It primarily describes how something should appear. Secondly, it gives instructions to the browser about how to display something.

HTML is primarily used on the Internet, in applications referred to as web-based; but HTML can also be involved in applications that are not used on the Internet. The bottom line is that a browser, or whatever application uses it, must be able to �read� and interpret HTML.

Webpages, Websites, Webmasters, and Visitors

HTML instructions are written in a language of the same name. The instructions, also called code, are written in a simple text document and saved as a computer file. The file must have a normal or regular computer name. The name can have any characters allowed by the operating system, including space in a name. As much as you can, you should avoid including spaces in the names of your HTML files. An HTML file uses the extension .htm or .html. Such a file is called a webpage.

An HTML file, or webpage, must reside in a folder or directory. You use the rules of your operating system to create and specify such a folder. You can add as many files as you want in that folder. You can also create sub-folders in the main folder and add all desired files and other sub-folders in the primary sub-folders. The group of files, objects, and sub-folders located in a main folder and serving a common purpose is called a website.

The person in charge of the management (and/or creation) of a website (and/or webpage(s)) is called a webmaster. Creating and managing a website (which of course include webpages) is referred to as web design. Adding complexity such as style, interactivity, scripts, and code, is referred to as web development.

In computer application, a person who uses an application is referred to as a user. In the Internet, a person who accesses or opens a webpage can be referred to as a visitor.

Practical Learning: Starting a Website

Start a file
- If you want to work directly from your website, log in and access the control panel of your website. Access the File Manager. Click your main folder, usually named public_html
  
  Click the button to create a file. It may be labeled New File. Name the file as index.htm
  
  Click Create New File. Then close the file
- If you are using Linux, inside the wattsaloan folder, create a new file named index.htm. If you are using Ubuntu, right-click an empty area in the wattsaloan folder, position the mouse on New Document and click Empty Document
  
  Type index.htm and press Enter. Then close the file

Introduction to Tags

A Start Tag

HTML gives instructions to a browser using small code objects named tags. The primary formula to create a tag is:

<tag-name>

A tag starts with the LESS THAN sign: <. It is followed by a name, followed by the GREATER THAN sign: >. < and > are required. The names of tags have already been created and you simply use them. You must know what tag to use when, why, and how. The purpose of these lessons is to show you what tag to use when, why, and how. For example, we will see that some tags are used to display text. Some tags are used to display a picture. Some tags are used to change how text or a picture displays.

Case-Sensitivity

Normally, HTML is not case-sensitive. This means that a tag name can be completely in lowercase:

<something>

A tag can be completely in uppercase:

<SOMETHING>

Or a tag can be in a mixture of lowercase and uppercase:

<SomeThing>

To avoid confusion in your code, please adopt one case and stick to it. Most webmaster exclusively use lowercase for their tag names.

An End Tag

Some tags must indicate where their job starts and where it ends. For example, if a tab is used to create a paragraph, a column of a newspaper, or a section on a page, the tag must indicate where the paragraph, the column, or the section starts, and where the paragraph, the column, or the section ends. Such a tag uses an end tag. The formula to indicate where the effect of a tag ends is:

<tag-name> . . . </tag-name>

In this case, the end tag starts with </ followed by the name of the tag and >. The start tag and the end tag must use the same name. Remember to use the same case for both. When necessary, the start tag and the end tag can (should, must) be written on separate lines.

An HTML element

The combination of a start tag and an end tag is called an HTML element, or just an element.

Element Nesting

An element is said to be nested if it is created inside of another element. The primary element can be referred to as a parent element. The nested or inside element can be referred to as child element. The primary formula to nest an element is:

<parent-tag> . . . <child-tag > . . . < parent-tag>

If the child element is to be closed, it must be closed before the end tag of the parent element:

<parent-tag> . . . <child-tag> . . . </child-tag> . . . < parent-tag>

In the same way, a nested element can have its own nested element(s).

There are rules and suggestions pertaining to nested elements:

Some elements have meaning only when their child elements are present. This means that such elements do nothing significant in the absence of the child elements. In this case, both the parent elements and the child elements are necessary
Some elements should (must) be nested. In this case, in the absence of the parent element, code can be confusing or difficult to read
For most elements that need or require nested elements, the end element should appear on a different line than the start element

Comments

A comment is a section that the browser will not present to a visitor. The formula to create a comment is:

<!�The comment goes here -->