Thursday, 4 July 2013

MULTIPLE BORDERS USING CSS

We can use another exciting feature of the CSS and that is the multiple borders. This will increase the visibility and the attraction of the page. In this way the page is divided into different kinds of section and you can highlight the part which you will think is more important. For this thing you can import the css file which is in this case is the paper.css.

Here is the simple coding of the paper.css.

.borderOne
{
border: 2px solid #800000;
}
.borderTwo
{
border: 4px dotted red;
margin:auto;
background-color:#8080FF;
}

Here is the code of the html file.

<h2>Save The Innocent Childrens</h2>

<hr>

<H3> Our Mission </H3>

We focus our attention to the most important issue of the Pakistan against the rights of the children. Now a days more then 35 percent children are the part of the forced labour. Our mission is to support all those children who are facing such crime.</div>

<H3>About us </H3>

If you have any information which will save the childen from the child labour you are requested to send us the information on as soon as possible basis. <a href="mailto:Saifullahdarpk@gmail.com"> Send us Mail.</a></div>

</body>

MULTIPLE BACKGROUNDS WITH CSS

MULTIPLE BACKGROUND WITH CSS

Background affect the appearance of any Web page, with the help of CSS you can divide the page into different blocks and set the different background colours and images to differentiate the each section of your page with the help of CSS. Background can varies from page to page which will increase the look of the page or make it more attractive.

First of all you will make a separate file of css in this case it is "sac.css".

Here is a simple code of sac.css file:

body
{
background:#FF0099 url url(c2.jpg) repeat-y fixed left;
margin : 10px 10px 10px 75px;
}
.banner
{
background-color:#FF8040;
text-align: center;
}
.section
{
background-color:#FFFF00;
}

Here is the code of the html file.

<Link rel="stylesheet" type="text/css"
href = "SAC.css" />
</head>

<body>
<DIV CLASS ="banner">
<h2>Child Labour in Pakistan</h2>
</DIV>
<DIV CLASS ="section">

<H3> Our Mission </H3>
We focus our attention to the most important issue of the Pakistan against the rights of the children. Now a days more then 35 percent children are the part of the forced labour. Our mission is to support all those children who are facing such crime.</div>

<DIV CLASS ="section">

<H3>About us </H3>
If you have any information which will save the childen from the child labour you are requested to send us the information on as soon as possible basis. <a href="mailto:Saifullahdarpk@gmail.com"> Send us Mail.</a></div>

</body>
</html>

SOME USE FULL TEXT PROPERTIES USING CSS

SOME USEFUL CSS PROPERTIES

SOME USE FULL TEXT PROPERTIES

The CSS text properties allow specifying the formatting rules for the textual content on a web page. You can change the direction of the text, can specify the spacing between the letters or can handle the white spaces.

direction: specifies the direction of the text. It will specify weather the text will right from left to right, right to left. Possible values are : rtl, ltr.
letter-spacing: It will increment or decrement the space between characters. The possible value is either normal or the length type.
white-space: Handles the white spaces. Possible values are normal, pre and nowrap. The nowrap will display the text on the same line until you will not use the blank row tag.

Here is the code mentioned below:

Heading No1

Heading No2

You can see the diffrence between the two heading and the paragarpah too. Heading one is using the direction from left to right and the heading two is using the direction from right to left. Similarly the heading one is using the 1px between the words and the heading two using the pixel 2 between the two letters. Similarly the paragraph element is using the letter spacing 4 and the white spaceas as mentioned pre.

H1
{
direction:rtl;
letter-spacing:15px;
}
H2
{
direction:ltr;
letter-spacing:8px;
}

p
{
letter-spacing: 4px;
white-space:pre;

}

</style>

IMPORT CSS FILES

IMPORT CSS FILE

To import any css file first of all you need to make a file in which you will use the different elements and then save the file using the extension css. i.e style.css, first.css etc.
Then use the "@" sign with key word import to import the css file. i.e @import filename.css. By using this way you will avoid the redundancy of the code and used the same style through whole website and it will uniform the style in your whole web pages.

Here is the simple code:

The css file will be like this and save it with the name and extension .css like style.css in this case:

p
{
font-family:"Palatino Linotype";
font-size:12px;
color:#800040;
}
H1
{
font-size:18px;
color:#400080;

}
H2
{
font-size:16px;
font-family:"Lucida Console", Monaco, monospace;
color:inherit;
text-align:right;
}
H3
{
font-size:14px;
color:#0080FF;
text-align:center;
}

In another Html file we will import this file as mentioned below:

<title>CSS Importing File</title>tuy
</head>
<style type="text/css">
@import "style.css";
</style>

<body>
<h1> Style Using CSS File Import </h1>
<hr />
<p> To import any css file first of all you need to make a file in which you will use the different elements and then save the file using the extension css. i.e style.css, first.css etc. </p>
<p> Then use the "@" sign with key word import to import the css file. i.e @import filename.css. By using this way you will avoid the redundancy of the code and used the same style through whole website and it will uniform the style in your whole web pages.
</p>
Just chek out some other elements display:
<h2> Observe the Heading 2 :</h2>
<h3> Observe the Heading 3 </h3>

</body>
</html>

CSS INHERIT VALUES

Inheritance means to get the values from the parents. Same thing is applied in the css style element. We can use the inherit values to implement a specified attribute of some element from the parent element. The child element will take the same value as the parent element specified. The value is explicitly specified at the end of the CSS property before the semi colon.

Here is the Simple output and code:

USE THE CSS TO INHERIT THE VALUES

INHERIT VALUES USING CSS

The inherit values means that all the elements of textual content will use the same font family which is in this case is Times roman . This thing is known as the inherit values.

Look out this heading using differnt fonts but not shown

SIMPLE CSS FILE CODING

HOW TO MAKE A SIMPLE CSS CODING FILE ?

Now we want to learn the way to make a simple coding of css using the style element or tag of the HTML language. <style > tag will use to make a css coding and remember that mostly we use the style element just after the end of the <head> element.

In this code we just learn how to use the style tag and how we can change the predefined attributes of the different tags by using the style element.

Kindly watch the code and implement as mentioned below:

<html >
<head>
<title>CSS STYLE SHEET SIMPLE PAGE</title>
</head>
<STYLE type="text/css" MEDIA = "SCREEN">
BODY
{
font-family:Tahoma, Geneva, sans-serif;
font-size:16px;
}
P,B
{
font-weight:BOLD;
color:#990066;
}
B
{
font-style:oblique
}
</style>

<body>

<p>THIS IS A SIMPLE OUTPUT USING THE PARAGRAPH ELEMENT USING THE STYLE SHEET ELEMENT.<B> I AM USING THE BOLD ELEMENT. KINDLY FIND IS THERE ANY CHANGE IN THE LOOK </B> IT MEANS THAT THE ELEMENT B IS WORKING AND USING THE OWN VALUES USING THE STYLE SHEET </p>
</body>
</html>

THIS IS A SIMPLE OUTPUT USING THE PARAGRAPH ELEMENT USING THE STYLE SHEET ELEMENT. I AM USING THE BOLD ELEMENT. KINDLY FIND IS THERE ANY CHANGE IN THE LOOK IT MEANS THAT THE ELEMENT B IS WORKING AND USING THE OWN VALUES USING THE STYLE SHEET

Wednesday, 3 July 2013

CASECADING STYLE SHEET (CSS) STEP FORWARD

CSS EVOLUTION

HTML language had certain limitations in case of style such as lack of uniform view of the web page. Different browser show the same text in different styles, to avoid this thing CSS which is the abbreviation of the CaseCading Style Sheet come into existence in 1996. There are two versions of CSS-P and CSS2 launches and working on the CSS3 is still going on and the other versions too.

INHERITANCE IN CSS

HTML language has different kinds of container element that includes the other elements. There are mainly two types of the elements in the HTML language.

Parent Element
Child Elements

PARENT ELEMENTS:

The elements which will have the child elements will consider as the Parent Element. For Example the Body Element has the different child elements like <P> for paragraph. etc.

CHILD ELEMENTS:

Child Elements are those elements which must be include in other elements. They are the descendent elements.

CSS will define the styles of all the elements like Parent, Children and descendant elements. The child or descendant elements can take the styles of their parent elements, irrespectively of the type of css in use. This is known as the INHERITANCE of styles.

HTML FORMS

Html Forms are used to accept different kinds of input from the user. The Form element is used to create forms. To create different controls in a form, the web page designers use the Input element. The Type attributes within the INPUT element defines the type of control to be created. We have different kinds of the form element like text box, radio button, menu list, check box and buttons in the form elements.

Here is the simple code of a Form:

<form action="" method="Get">
<table>
<tbody>
<tr>
<td>Brand: </td>
<td><input disabled="" type="text" value="Cars" /> </td></tr>
<tr>
<td>Brand Model: </td>
<td><input type="text" value="Honda City" /> </td></tr>
<tr>
<td>Color: </td>
<td><textarea cols="15" readonly="" rows="3">
Black
White
Gray
</textarea>
</td></tr>
<tr>
<td><input type="hidden" value="M101" /></td>
<td><input type="button" value="Done" /></td>
</tr>
</tbody></table>
</form>

Here is the simple output:

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.

Thursday, 7 February 2013

HOW TO LEARN COMPUTER LANGUAGE.

MOST OF US THINK THAT TO LEARN THE LANGUAGE IS A DIFFICULT JOB. BUT IN THIS BLOG YOU WILL LEARN THE COMPUTER LANGUAGES WITH FEELING NO BURDEN. THE MOST IMPORTANT THING OF THIS BLOG IS THAT IT WILL HELP YOU NOT ONLY TO UNDERSTAND THE LANGUAGE BUT ALSO IMPLEMENT IT.

THE BASIC PURPOSE OF THIS BLOG IS TO MAKE THE COMPUTER LANGUAGE EASY. I HOPE THIS BLOG WILL HELP YOU IN THIS MATTER.

Thursday, 4 July 2013

MULTIPLE BORDERS USING CSS

MULTIPLE BACKGROUND WITH CSS

SOME USE FULL TEXT PROPERTIES

Heading No1

Heading No2

IMPORT CSS FILE

CSS INHERIT VALUES

INHERIT VALUES USING CSS

Look out this heading using differnt fonts but not shown

HOW TO MAKE A SIMPLE CSS CODING FILE ?

Wednesday, 3 July 2013

CSS EVOLUTION

INHERITANCE IN CSS

PARENT ELEMENTS:

CHILD ELEMENTS:

HTML FORMS

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

Thursday, 7 February 2013

Followers

Wikipedia

Check out some more

Total Pageviews