Infotech

HTML Basics - Lesson I

Welcome back! I hope that the introductory article hasn’t scared you off and that you are raring to go. We shall begin today by a recap of some basic concepts.

Web Terminology
World Wide Web can be referred to as a big library on the Internet. Web sites are like the books in the library and web pages are like specific pages in the books. A collection of web pages is known as a web site.

A homepage is the starting point for a web site. It is something like the cover page or the table of contents of a book. Each web page including a web site’s homepage, has a unique address called a ‘Universal Resource Locator’ (URL).

A browser is a software tool that is used to look at web pages. It’s the users window to the web, providing the capability to view web documents and to access web based services and applications. Internet Explorer and Netscape are the two most popular browsers in use today and the latest versions of both can be downloaded from http://www.download.com.

A web server is used to keep published documents on the web. (It is a place where pages reside). Web servers retrieve web documents in response to the browser requests and forward the documents to the requesting browsers via the Internet. Web servers also provide gateways that enable browsers to access web related applications – databases, searches and electronic payment systems.

E-Mail is used to send and receive messages and attached files via the Internet. Examples of web based free email providers are Hotmail, Yahoo, and Email.com etc.

A search engine allows a user to search on keywords or a combination of them by specifying various levels of information. (Sub levels)

A URL (Universal Resource Locator) is a web-addressing scheme that spells out the exact location of an Internet resource. When a link is clicked on the browser reads the link of the document. A URL contains the information about the location of the document – which may point to another HTML document or page.

Browser Applications
The major features that we can see on a web browser are:

Navigational aids like the ‘back’ and ‘forward’ buttons on the toolbar, to return back or ahead to the previously displayed page, respectively.
‘Home’ button to return to the default start page of the browser in use. It is the page that is shown when the browser is opened.
‘Stop’ button to stop the browser from accessing a link.
‘Refresh’ button to load the current page again in an event of an error or when the page does not open properly.

HTML Concepts
HTML is periodically standardized. It grows and continuously expands all the time with the use of new tags and attributes.

HTML uses ordinary text files for web pages – consisting of text to be displayed and the tags to specify how the text is to be displayed. The use of tags to define the elements of a web document is referred to as ‘Markup’.

Tags are the building blocks of every WWW document. Tags begin with < sign and end with > sign, with the name placed in between – mostly comes in pairs. The text is marked by surrounding tags, e.g. <html> for beginning and </html> for ending tags. Some tags are single, separating tags, e.g. <hr> and . These tags have attributes called switches to specify properties within the tag, e.g. <hr size=10>, with its values (only in the opening tags).

Writing Your First Page
So, here we go... you're going to write your first HTML page.

You will start every page with this tag: <HTML>
That makes sense. You are denoting that this is an HTML document.

Your next tags will always be these: <TITLE> and </TITLE>
See the very top of this page? I mean way up top. Above the FILE -- EDIT -- VIEW menus. The colored bar up there. Right now it reads "Dishnet Education…" That's the title of the page and that's what you are denoting here. Whatever you put between these two flags will show up in the title bar way at the top.

Finally, you'll end every page you write with this tag: </HTML>
Get it? You started the page with HTML and you will end the page with /HTML. That makes sense again.

So, Here We Go!
I want you to play around with these commands. Just remember that HTML reads like you do, top to bottom, left to right. It will respond where you place the start tag and stop where you place the end tag. Just make sure your tag are within the < and > items.

Here's a sample page to show you what I mean:

<HTML>

<TITLE> My First HTML Page </TITLE>

This is my first HTML page!!!

I can write in italics or bold

<HR>

Or I can write in both

<HR>

</HTML>

The Tags - Explained:

Affect	Code	Code Used	What It Does
Bold	B	<B>Bold</B>	Bold
Italic	I	<I>Italic</I>	Italic
Typewriter	TT	<TT>Typewriter</TT>	`Typewriter`

<HR>	This command gives you a line across the page. (HR stands for Horizontal Reference.)
<BR>	This Breaks the text and starts it again on the next line. In an HTML document, you need to denote where you want every carriage return with a <BR>.
<P>	This stands for Paragraph. It does the exact same thing as the <BR> above except this tag skips a line. BR just jumps to the next line; P skips a line before starting the text again.

Yes, it's a simple page, but you're just starting out. Notice the <HTML> and </HTML>. Notice the <TITLE> and </TITLE>. See how there's a beginning and end tag when I alter the text and that the P and BR commands are used to go to new lines?

Some Guidelines:

Make a habit of writing your tags in capital letters to distinguish them from the normal text. It also makes them easier to pick out later when you are revisiting the code. (In terms of tags, capital and lowercase letters are equal and the browser does not care whether you write your tags in caps or lowercase)
If you do use multiple flags to alter text, make a point of not getting the end flags out of order. Look at this:

<TT>Text Text</TT>

In terms of format, the example above is not correct. The end flags are out of order in relation to the start tags.

Now go out and start your text editor – Notepad – and create. Play around with what you have learnt. Get the feel of it. And once you feel confident enough feel free to move on to the next lesson in the series.

Click here for Part I of this series
Click here for Part III of this series
Click here for Part IV of this series
Click here for Part V of this series
Click here for Part VI of this series

Back