Friday, 28 June 2013

FRAMES

HTML provides the feature of frames that allows the users to simultaneously have multiple view of the web page. This is done by splitting the browser window into the multiple screens. There are two types of frames.

Normal Frames divide the browser window into multiple screen. It can be resizeable.
In-line Frames appear within the content of a document.It can not be resize. Its support is limited.

Hyperlinked Frames:

Frames can contain hyperlinks that allow web page designers to link one frame to other frame. The frame for which a link should be established is known as the "Source Frame" and the frame from which the link should be established is known as the "Target Frame". The "name" attribute of the Frame element is used to specify the name of the source frame.

The Linked frame can open in the same frame, different frame or in a different browser window. The different values of the target attribute determine where the linked frame will be loaded.

Here is a simple code as shown below:

<html>
<head>
<title> New Frame Style </title>
</head>
<frameset cols="25%,75%">
<frame name="Links" src="Links.html"></frame>
<frame name="content" src="main.html"></frame>
</frameset>
</html>

TABLE ELEMENT

In order to display the data in shape of table we need to the different kind of tags which will help to form the table.Some time the table become long that we need to scroll the page down for this to avoid different anomaly we used the Header and Footer option of the Microsoft Word. There are three sub elements of the Table element that helps in dividing the table into header, footer and the body.

Elements	Description
THEAD	Defines a table's header.
TFOOT	Defines a table's footer.
TBODY	Defines a table's content (body).

You can also group the columns of a table by using the COLGROUP element inside TABLE element. You can specify the number of columns for a column group in either of the two ways by using

The Span attribute of the COLGROUP element : sets the number of columns in the group. Its default value is 1.
The COL element in the COLGROUP element: Specifies one or more columns in the group.

You must specify the COLGROUP element immediately after the Table element, then THEAD, TFOOT and then the TBODY.

Here is the simple code:

<table border="3">
<colgroup span="3" width="300">
</colgroup>
<thead>
<tr>
<th>Student Name
</th><th>Grand Total (Out of 500)
</th><th>Percentage
</th></tr>
</thead>
<tfoot>
<tr>
<th>Total Student
</th><th>4
</th><th></th></tr>
</tfoot>
<tbody>
<tr>
<td>Saif
</td><td>450
</td><td>90%
</td></tr>
<tr>
<td>Ajmal
</td><td>40
</td><td>80%
</td></tr>
<tr>
<td>Saif
</td><td>452
</td><td>86%
</td></tr>
</tbody></table>

Here is the result shown below:

Student Name	Grand Total (Out of 500)	Percentage
Total Student	4
Saif	450	90%
Ajmal	40	80%
Saif	452	86%

NESTED LIST

Nested list is a list with in a list. You can form the combination of ordered list with nested unordered list. You just need to place the one list into the other list. Just try out

Simple code as shown below:

<ol>
<li>Pakistan
<ul>
<li> Islamabad
</li>
<li> Lahore

<ul type="rect">
<li> Shadman
</li>
<li> Bahria Town
</li>
<li> Bhati
</li>
<li> Cantt
</li>
</ul>
</li>
<li> Karachi
</li>
</ul>
</li>
<li> India
<ol type="I">
<li> Delhi
</li>
<li> Bombay
</li>
<li> Colcata</li>
</ol>
</li>
<li> America
</li>
<li>Afghanistan
</li>
<li>china
</li>
</ol>

Result is shown below:

Pakistan
- Islamabad
- Lahore
  - Shadman
  - Bahria Town
  - Bhati
  - Cantt
- Karachi
India
1. Delhi
2. Bombay
3. Colcata
America
Afghanistan
china

UNORDERED LIST

Unordered list is a a kind of list in which the list item represent in a sequence order without any no or alphabet. Unordered list represent in three different formats. Which are mentioned below:

Disc
Circle
Square

You can not start the list with any no or alphabet because all the symbols are same. The Unorder List tag is as mentioned <UL>, here "U" stands for unorder and "L" stands for List. One more important tag is <LI> which is known as List Index, this tag is used to enter the entries in the List. You must close the <UL> tag but <LI> is not necessary to close.

To use the style and start use the Tag like <UL type= disc>.

Some simple code is as mentioned below:

<ul type=disc>
<li>Pakistan
</li>
<li>India
</li>
<li>China
</li>
<li>America
</li>
<li>Afghanistan
</li>
</ul>

Output is shown below: Check the other attributes by placing the code with your own.

Pakistan
India
China
America
Afghanistan

ORDERED LIST

Ordered List:

Ordered list is a a kind of list in which the list item represent in a sequence order.Ordered list represent in five different number formats. Which are mentioned below:

Decimals
Lower-roman
Upper-roman
Upper case Alphabet
Lower case Alphabet

You can start the list with any no or alphabet if you use the attribute start. The Order List tag is as mentioned <OL>, here "O" stands for order and "L" stands for List. One more important tag is <LI> which is known as List Index, this tag is used to enter the entries in the List. You must close the <OL> tag but <LI> is not necessary to close.

To use the style and start use the Tag like <OL type= A start 4>.

Some simple code is as mentioned below:

<ol start="4" type="A">
<li>Pakistan
</li>
<li>India
</li>
<li>China
</li>
<li>America
</li>
<li>Afghanistan
</li>
</ol>

Output is shown below:

Pakistan
India
China
America
Afghanistan

LIST AND NESTED LIST

In order to display a set or related items we use the list and HTML language provides different kind of the lists. A web developer has the choice to display the list singly or in nested shape. Any how the list are mainly divided into the five major categories.

Ordered List.
Unordered List
Directory List
Definition List.
Menu List

But we will discuss the two main categories Ordered List and Unordered list but if you want to check out the other tags then they are just for your information. Check out your own.

Thursday, 27 June 2013

HYPERLINKS

(9) HYPERLINKS TAGS

There are two kind of hyperlinks used in the web pages The tag is used for this purpose is <A>

Email Hyperlink
Document Hyperlink

When a user click on the hyperlink to send the email then outlook application opens which already have the email address. To link a document we only need to use the <A href > tag.

Simple code is shown as below using this property:

<A href = " http://www.laststandfirst.blogspot.com"> Last Stand first </a>
<A href= "mailto:saifullahdarpk@gmail.com"> Send me E-mail </a>

output will be as given below:

Last Stand first
Send me E-mail

IMAGE MAPS

(8) IMAGE MAPS

Image maps is an image which the different areas act as a link. It means that if you want that the image different parts used to link the different files then you will use the image maps methodology .

We use the two elements to make an image maps and these are mentioned below:

Map:Map element defines an image map. It provides the name attribute , which specifies the name of the image map.
Area: Area element specifies the coordinates of the region on the image, which will act as a hyper link. It will also specifies the linked URL in the three shapes.

Rectangle
Circle
Polygon

Usemap: usemap attribute of the IMG elements refers to the image map.

Simple code is shown as below using this property:

output will be as given below:

IMAGE TAG

(7) IMAGE TAG

To upload any picture or image in your web you need a tag which is named as an <IMG> tag. This tag will load the image in your web page.

Simple code is shown as below using this property:

output will be as given below:

COLOUR PROPERTY

(6) COLOR PROPERTY OF STYLE ATTRIBUTE

W3c has listed 16 valid colours name which are validated and process with the html page. The colour property of the style attribute will specifies one of these colours to be applied to the textual content.

Some colour and their hexadecimal values are mentioned in the table below:

Color	hexadecimal value
Aqua	#00ffff
Fuchsia	#ff00ff
Gray	#808080
Maroon	#800000
Navy	#000080
Olive	#808000
Purple	#800080
Silver	#c0c0c0
Teal	#008080s

If you know the hexadecimal value of any colour then you can use it in your document every where you want in your document.

Simple code is shown as below using this property:

<TT style="color:red"> This text will be appear as it will be written by some type writer. </TT>
<h1 style="color:blue"> This heading is in blue colour</h1>
<h2 style="color:#808000"> This heading used the olive colour hexadecimal no colour</h2>

output will be as given below:

This text will be appear as it will be written by some type writer.

This heading is in blue colour

This heading used the olive colour hexadecimal no colour

TT TAG

(6) TT TAG

This tag is used as the text will be shown as it has been typed by a typewriter. The tag name "TT" is derived from the word teletypewriter.

Simple code is as shown below:

<TT> This text will be appear as it will be written by some type writer. </TT>

output will be as given below:

This text will be appear as it will be written by some type writer.

ADDRESS TAG

(5) ADDRESS TAG

The address tag is used to create the address of the company.This is a very simple tag you just write the tag as <address> and then close it with </address>. This tag is usually use in the start or at the end of a document and this will show the ownership or authorship information.

Simple code is as shown below:

<Address> Aptech Institute of Information Technology.<Br/>

Building No 125, Defence Road </Br>

Lahore, Pakistan </Br>

</address>

output will be shown as given below:

Aptech Institute of Information Technology.
Building No 125, Defence Road Lahore, Pakistan

BODY TAG

(4) BODY TAG

The most important tag of the html file is known as the body tag all the major data or other tags used in this area of the html structured file. This will be used as <BODY> and similarly you will close it as </BODY>.

Now after this tag your basic structure of the html document is ready and now you will move to the next round of character formatting.

Simple code will be as shown below:

<html>
<head>
<title>
Basic structure of the Html language
</title>
</head>
<body>

</body>
</html>

TITLE TAG

(3) TITLE TAG

This tag is used to gave the title of the document. Each page can has its own title. This will help to find what will be in the document next.This tag is used in the following form <TITLE> and close this with same methodology as we applied in the former tags.

Simple code for this will be shown as under.

<html>
<head>
<title>This document show the title page description</title>
</head>

</html>

HEAD TAG

(2) HEAD TAG

The second second structure tag is know as the Head Tag and it is written as <head>. This tag is used to represent the properties of the whole document such as the title, links etc. Once again this tag has no effect on the preview of the web contents. If you leave this tag in your file then no error will show neither any kind of problem will show in the preview of the web.

Here are some important elements which a head tag followed.

BASE: Records the original version of the document
ISINDEX: Marks the document as searchable. For this the server on which your file loaded must have a search engine.
NAME: Name this link as a possible destination for another hypertext document.
LINK: Define a relationship between the document and the other parts of the document.It will show a tree structure of the document and it has the same attributes as the <A> anchor tag has.
URN: Indicates the uniform name of the document.

Simple code of your file having this tag will be as under:

<html>
<head>

</html>
</head>

HTML TAG

(1) <HTML> TAG

This Tag is used in the start of the every html file. This will inform the browser that the next doc will be using the html tags and interpret it accordingly. This tag is closed with the same rule </html>. This tag is used in the end of the file which indicate that the file will be closed. But it is very interesting that if you will not use and close this tag then it does not mean that the browser will not show any kind of output. The out put will be same then the question arise in the mind that why we use it.

In the simple html file, no impact will be shown if you will not use this tag but when you will learn the other languages like css, javaScript etc then you need to use this tag because you need to write the code accordingly. So it is highly recommended that you will use the same in your every file.

Simple code

Here is the simple code line which will show you how you will use the code in your html file.

Note: It is not a case sensitive language so you can you in either upper case, lower case or mix its all up to you.

<html>

</html>

Wednesday, 26 June 2013

HTML LANGAUGE

HTML LANGUAGE

HTML is the abbreviation of the " Hyper Text Mark up Language". This is not a true language and it will never show you the error and neither if you will not follow the rules and regulation of this language strictly. You can check in your own computer that if you will not use the strict rules then still you find the same result. I will try to adopt the ways that will help you to understand the language in a very common and easy way.

Here are some common tags used in every HTML encoded file.
We can divided the html in different kind of categories like structure, formatting etc. Here are some four main structure tags listed below:

The elements enclosed between "<" & ">" is know as the TAG. These tags is also known as the syntax of the HTML language. Every Tag will be opened must be closed because if you will not closed the Tag then the previous opened Tag will be effective.

To close any Tag just use "/" in the start of the Tag. This is the simplest rule to remember the syntax.

Friday, 28 June 2013

FRAMES

Hyperlinked Frames:

TABLE ELEMENT

NESTED LIST

UNORDERED LIST

Ordered List:

LIST AND NESTED LIST

Thursday, 27 June 2013

(9) HYPERLINKS TAGS

(8) IMAGE MAPS

(7) IMAGE TAG

(6) COLOR PROPERTY OF STYLE ATTRIBUTE

This heading is in blue colour

This heading used the olive colour hexadecimal no colour

(6) TT TAG

(5) ADDRESS TAG

(4) BODY TAG

(3) TITLE TAG

(2) HEAD TAG

(1) <HTML> TAG

Simple code

Wednesday, 26 June 2013

HTML LANGUAGE

Followers

Wikipedia

Check out some more

Total Pageviews