When you visit your favourite web site emogic.com using your favorite 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: