Web Page Basics

When you visit your favourite web site somewhereincanada.com using your favourite web browser you see a web page with formatted text and graphics. It will contain links (hypertext links or hyperlink) that will take you to other web pages when clicked on.

What is happening here?

1. Your web browser has requested to view a page from somewhereincanada.com.

2. The web server where somewhereincanada.com is located sends you a copy of the page, index.html. It is a text only HTML file. HTML is just an acronym for Hypertext Mark-up Language. Despite it’s ominous name, it is very easy to learn and understand.

3. Your browser scans the index.html file. It looks for to see if there are any links pointing to graphics in the HTML code. If there are, it sends out requests to the web server(s) to send them to us. Your browser will then format and display the web page according to the HTML code and the graphics received.

4. Your browser waits for any further input from you. If you click on a hyperlink, the browser will go through steps 1 to 3 again using the new URL (Uniform Resource Locator) address.

So basically a web page is nothing more than a text document using HTML tags or codes to format the text and to link to external images, sites, files and programs. It is not very mysterious at all.

Creating your first HTML page

Normally, if you are creating a web page, HTML files are created and edited on your computer at home. You can create an HTML file using nothing more than MS Notepad. All you need to do is save the text file with the HTML extension (ie: mypage.html)

Open Notepad. Type, ‘Hello World’. Save the file as mypage.html on your Desktop.

You have created a very basic web page. Double click on the file to see it displayed in MS Internet Explorer (IE).

It won’t win any web awards, but it is a web page.

HTML Tags

If you right click on a web page and view it’s source, you will notice that there is much more there than just plain text. You will notice that there are many ‘<;’ and ‘>’ symbols. Between the ‘<’ and ‘>’ is all sorts of cryptic text. The ‘<>’ symbols and, text between them, are what we call ‘tags’. Tags are HTML code telling our web browser how to display or format the text. For example, if we want bold text, we would use a bold tag <b>.

Tags almost always come in pairs. One is the start (on) tag and one is the finish (off) tag. The off tag is always the same as the on tag, but has a forward slash before the letter. The on bold tag is <b> and the stop bold tag is </b>. The tags only affects the text between the two associated tags.

Example:

HTML:

This text is not bold. <b>But this text is bold</b>. La la la!

Web browser displays:

This text is not bold. But this text is bold. La la la!

Note the tags themselves do not show up but that the effect of the tag does.

Tags in Tags

Tags can be placed inside tags. For example, using the italic tag can give us the following.

HTML:

This text is not bold. <b>But this text is bold <i>and some of it is italicized</i></b>. La la la!

Web browser displays:

This text is not bold. But this text is bold and some of it is italicized. La la la!

Mandatory Tags

There are many tags. But there are only a handful, which are commonly used over and over.

All web pages must/should have, at the very least, the following tags.

1. <header></header> - contains data not shown in your web browser but that is useful to search engines, web publishers, etc.

2. <title></title> - contains the title of the web page. It will be contained inside the <header> tags. It shows at the top of your web browser.

3. <body></body> - contains the text that will be displayed in the web browser. This is your content!

4. <html></html> - these tags go around your entire page. <html> should be the first thing in your HTML page, and </html> should be the last.

Example page:

HTML:

<html>
<header>
<title>My first Web Page!</title>
</header>
<body>
<u>My Favourite Turtles, By Vince Pelss</u>
<p>Blah, blah, blah</p>
</body>
</html>

Web browser displays:

My Favourite Turtles, By Vince Pelss

Blah, blah, blah

As you can probably guessed, we have introduced two new tags. The underline tag <u> and the paragraph tag <p>. The <u> tags effects are obvious. The <p> simply separates blocks of text with a blank line.

Inserting Images

Since HTML documents are simply text documents, you might be wondering how we insert graphics into a web page.

Graphics are inserted into a HTML page using an image tag <img></img>.

Now most tags can have ‘settings’ called attributes. For example, the image tag needs a Source attribute to tell your web browser where the image file is located. The tag: <img src=”https://emogic.com/emogic.gif”></img> will bring up the image:

Your web browser scans the text based HTML page, sees the <img> tag, and notices the image is located at emogic.com. It then retrieves and displays it in the web browser.

The ‘src’ attribute points to the location of the image.

Tag Attributes

There are many more attributes for tags. Other common ones are ‘width’ and ‘height’. Example:


<img src="https://www.emogic.com/drupal/sites/default/files/logo.gif" border="0" width="50" height="100">

Note that we have forced the image to display as 100 x 100.

Hyperlinks

One of the most important tags is the Anchor <a> tag. It is what gives the World Wide Web its ‘webiness’. When you click on a line of text or an image and it opens up another Webpage, it is most likely a hyper-link caused by the <a> tag.

Since we are tag experts, let’s dive right in with an example:

HTML:

<A HREF="emogic.com/software/index.shtml">Software</A>

Web browser displays:

Software

There is an attribute “href” which points to the web page we want to open when the hyperlink is clicked on. The text between the <a> and </a> tag is text we want shown in the link instead of “emogic.com/software/index.shtml”.

If you want the new page to open in a new web browser window and not the current one, add a “target” attribute in the <a> tag.

<A HREF="emogic.com/software/index.shtml" target=”_blank”>Software</A>

Uploading your Website

You have created your website on your computer. How do you get everyone else to see it?

For the average user, you will need to find a Web Host. They basically rent you Web Server space. A Web Server is what is required to ‘serve’ your Webpage to the internet and it’s users. A server is nothing more than a computer that serves, or delivers, files on request.

There are free Web Hosts, but you get what you pay for.

If you want a fancy domain name like emogic.com, you will have to pay for that name to be registered. Usually you pay annually.

Once you have your ‘rented’ server space from your Web Host and your chosen domain name is set up, it is time to ‘upload’ your files to your server. To do this you will need an FTP (File Transfer Protocol) program. There are free ones to be found, and MS Windows even comes with a text based one (don’t use it unless you love old DOS style programs).

You use the FTP program to connect your computer to the server’s computer and the transfer your web page to it.

When users visit your web page, emogic.com, their web browser requests your HTML and graphics files from your Web Server. It sends them of to be displayed on their computer.

Now you have enough knowledge to be dangerous. Good luck and remember, use your powers for good and not for evil.