Study Guide

HTML (Hyper Text Markup Language)

2007-08-18T23:32:00.001+04:00

Subject: Hyper Text Markup Language (HTML)

By Muneer Koliyat

(Ref # 002-04112K5)

I really interested in web designing after I got some information on HTML. I think, you also will get some ideas on HTML by reading this article. I would like to explain something that I met while I was trying to be in deep with this language. HTML is a simple markup language used to create hypertext document that are portable from one platform to another. It is readable in any platform. It is very easy to learn and can be created by using even a simple text editor like notepad, which is available with operating systems. So, you do not require any expensive program.

Before Starting

I suggest you to go through some website that has html pages. You will get some ideas on web page that created in html language.

You can view html script by clicking View > Source in web browser (Internet Explorer). In some browser it will be 'document source'.

The Basic Of HTML

HTML files must have htm or html file extension. HTML uses delimiters (<) less than to open and (> ) greater than to enclose html script like as <html> (the word html is written in between greater than and less than symbols.)

HTML pages are starting with <html> tag and ends with </html> tag. It means there should be an opening tag and a closing tag. (the tag with (/) is known as closing tag)

The basic structure of html page will be as in Example #1

Example #1

<html>

<head>

<title>Heading of your page </title>

</head>

<body>

Body of your page

</body>

</html>

Example #1 reveals you that the first line <html> is opening tag of your web page and last line </html> is closing tag.

There will be heading part and body part. These two parts are written between two tags.

There will be an opening tag <head> and a closing tag </head> in heading part. Opening tag of the body part will be <body> and closing tag is </body>

The Title tag will be the title of the page. It will appear in the title bar at the top of the screen when the page is viewed in browser.

Create your first page

v Open notepad ( Start > Programs > Accessories > Notepad )

v Copy and paste above code (Example #1) into notepad

v Save the file as example1.html

v Open the file example1.html

Easy way to create HTML page

First of all, I would like to tell you that there is easy way to create html pages other than typing these long scripts. If you are looking such tool to create web pages, you may immediately not required to know html, you can use the features 'WYSIWYG' ( What You See Is What You Get) user interface similar to those used in word processors like Microsoft Word. If you know this, you can create html page in easy way.

Front Page is a good example for 'WYSIWYG'. You can create and edit pages very easily. This friendly user interface has many convenient formatting wizards and templates. It displays the page just as it appears in web browser.

So, why should I learn HTML script?

Here is the answer for your question….

1- Easy to use & easy to understand codes. Similar words to English language.

2- You can create pages using any text editors like notepad from any computer.

3- Trouble shooting on error will be much easier.

4- You will be able to understand the correct structure of the page and can added some extra add in s from other scripts like java.

Structural codes to keep in mind while learning

Bellow (Table #1) codes are used for different purpose as mentioned in column in the middle. The code which is in left column is the starting tag of each html script and code in right column is ending tag. The sentence is written between these two tags as in Example #2

Example #2

In sentence "My name is Muneer Koliyt"

I want the name Muneer Koliyat to make bold letter

The code will be as follows

"My name is <b>Muneer Koliyat</b>"

The result is "My name is Muneer Koliyat"

Table #1

Starting		Ending
<html>	Starting and ending tag of html page	</html>
</head>	Starting and Ending tag of header part of the page	</head>
<title>	Starting and Ending tag of title of the page	</title>
<body>	Starting and Ending tag of body part of the page	</body>
<b>	These starting and ending codes are used to make letter bold	</b>
<i>	These starting and ending codes are for making italic letters	</i>
<u>	This code is to make an underline for the letters between these tags.	</u>
<tt>	These starting and ending tags are used to make the letters between these codes as Typewriter font	<tt>
<center>	These are the starting and ending tags for centralizing the sentence.	</center>

If you watch the structure that I have used in Example #2 , you can write other codes same as I followed.

If you want to make any letter italic just add the code <i> at the beginning of the letter as opening tag and </i> at the end of the letter as closing tag.

<i> This letter is to make italic </i>

There are some tags that does not required an ending tag, see the table #2.

Table #2

<hr>	This is to give a horizontal line across the page
<br>	This tag is to make line break and start in next line, same like enter in word processor.
<p>	This is for starting next paragraph, normally the closing tag </p> for a paragraph does not required, but I recommend to use it anyway.

The html tags are not case sensitive.

So, you can use CAPITAL or small letters to write codes, but I like small letters to write html script.

Extra blanks & spaces can be added

It is easy to read if you add some extra blank lines and spaces in your script, this will be ignored when the HTML is interpreted. See example bellow.

<html>

<head>

<title>Title of your page </title>

</head>

<body>

Body of your page

</body>

</html>

Heading tags.

Normally headings are used to identify its following section. So it will be highlighted. HTML using <hy> as opening tag of the heading and </h y> as closing tag of the heading. y represents the size of heading. Number 1 is largest size and number 6 is small as given in example bellow.

Script Result

<h1>Sample heading</h1> Sample heading

<h6>Sample heading</h6> Sample heading

Excel Data Validation

2007-08-11T15:03:00.001+04:00

Subject: Excel Data Validation

By Muneer Koliyat

(Ref # 001-07092K5 )

Data validation is used to arrange a list of information that you have entered in a worksheet of Microsoft Excel. You can use this tool to provide users a choice from a list of items or control entries.

Selecting Items from a list Box

Here, I have given an example of some computer items that can be selected from a list box.

Picture #1

Add the entries in one row or one column

Select the list

Click the name box left to formula bar

Give the name e.g.

Press Enter

Picture #2

Select the cell (any cell) to validate.

Picture #3

On the Data menu, click Validation…, and then click the Settings tab.

Specify the type of validation you want:

In the Allow box, click List.

Click the Source box and then do the following methods

1- By name of range

To use a range of cells with a defined name, type the equal sign (=) followed by the name of the range. ( =Computer)

Picture #4

Make sure the In-cell dropdown check box is selected.

If you want to allow blank (null) values, select the Ignore blank check box.

If you want to prevent entry of blank (null) values, clear the Ignore blank check box.

2- By Cell Reference

To use cell references, select the cells on the worksheet and then press ENTER.

Picture #5

Cell references have to be to cells on the same worksheet. If you have to refer to a different worksheet or a different workbook, use a defined name and make sure the workbook is already open.

3- Define List Locally

Instead of referring to items on a worksheet, you can define list locally. To define the list locally, type the list values separated by commas.

Picture #6

The result will be as follows

Picture #7

Other Validations

Other than allowing list, You can also validate a cell with some restrictions like the specified cell should only accept the numbers between 50 to 100. You have to select ' Whole number' from the Allow drop down of Data validation settings. And select 'between' from data list. Give minimum and maximum numbers as shown in Picture #8

Picture #8

Like this you can validate date, time, text length, decimals etc. by selecting different items from Allow drop down

Input Message

To display an optional input message when the cell is clicked, click the Input Message tab, and fill in the title and text for the message and make sure the Show input message when cell is selected check box is selected.

Picture #9

Error Alert

In the same way you are able to give your own error message when invalid data entered. Click the Error Alert tab, and make sure the Show error alert after invalid data is entered check box is selected. Select one of the following options for the Style box:

To display an information message that does not prevent entry of invalid data, click Information.

To display a warning message that does not prevent entry of invalid data, click Warning . To prevent entry of invalid data, click Stop. Fill in the title and text for the message (up to 225 characters).

If you don't enter a title or text, the title defaults to "Microsoft Excel" and the message to: "The value you entered is not valid. A user has restricted values that can be entered into this cell."

Picture #10

This Tutorial is a portion from Learn with http://www.koliyat.com/. For more information and guidelines you can visit our website.