Promo Coupon: Basic Computer and HTML Practice

Computer Basic

HTML Practice

Writer: - Waseem Mushtaq

What is Computer

Computer is an electronic devices which use to solve our problems on given instructions.

Computer is set of software’s and hardware’s which use to solve our problems through given instructions in given statements form.

Computer Parts

There are several parts in a computer but main four parts are given below :-

CPU
Monitor/LCD
Keyboard
Mouse

CPU (Central Processing Unit)

CPU stands for Central Processing Unit

CPU is the brain of computer.

CPU basically perform three types of functions

ALU ( Arithmetic and Logic Unit )

CU ( Control Unit )

Memory Unit

ALU (Arithmetic and Logic Unit)

ALU perform the mathematical functions of the Computer.

CU (Control Unit)

CU Control the all computer hardware’s and software’s of the computer.

Memory Unit

The Memory unit control and save the data of the computer on its proper locations and support the computer to solve the problem of the user.

Classifications of computers

There are several types of computers and some types of the computers are given below:-

Mainframe computer
Mini computer
Super computer
Personal computer (PC)
Portable laptop or wearable computer

Mainframe computer

Mainframe computer are big in size and need much power to run . These computer can done million of work in a second. Mainframe computer have big screen.

Mini computer

Mini computer are small in size and need less power to run as compare to mainframe computer. These computer can done Lack of work in a second.

Super computer

Super computer are much faster in speed and laser technology. Super computer are costly in price. Super computer are use in forecasting, atomic fusion and designing the plane. Super computer are use for following purpose:-

Atom fusion
Air crafting
Plane preparation
Forecasting etc

Personal computer (PC)

Personal computer is less costly as in price. These computers are commonly use in houses and offices. These computer consists the operating system , offices and many other software’s and hardware’s.

Portable laptop or wearable computer

Portable, laptop or wearable computer are very low cost as compare to personal computers. Laptop are easy to use and can move easy from one place to others. Wearable computers may be a computer watch, washing machine and detecting signal device.

Types Of Computers

There are three types of computers which are given below:-

Digital Computer
Analog Computer
Hybrid Computer

Digital Computer

The computer which work in digital signal or jump from one digit to next digit and not show distance between one digit to another digit . For examples , Digital clocks or digital stop watch . 12.34PM , 26/06/12

Analog Computer

The computer which work in analog signal and show the smallest distance of two quantity .examples , Analog clocks or Analog stop watch . 12.34,35’15’PM , Washing machine clock ,

Hybrid Computer

This type of computer have both quality digital computer and analog computer. This computer show complete report with analog and digital signal. Today computer have hybrid technology in these day.

Type of Computer devices

There are two types of computer devices

Input devices
Output devices

Input Devices

These devices in computers are use to give information’s, data’s and instructions to computers. We put enter data in computer through input devices. Examples are

Keyboard
Mouse
Light Pen
Scanner
Joysticks Etc

Output Devices

These devices in computers are use to get information’s , data’s and instructions from computers. We see and get result through output devices. Examples are

Monitor / LCD
Printer
Speaker

History Of Computer

First digital computer was developed by charless bages in 1833 as known’s as father of computer.

First electronic digital computer was developed in 1943 which take high electricity to run.

Today computer technology is less costly , easy to use and can done lack of work easily with less use of electricity.

Quantum Computer

This type of computer works on semantic base / can think and solve the problem automatically.
This type of computer will be faster then others because this computer runs on atom base process.
The particles of the atoms work together to solve problem.
These types of computer also have ability to think every problems possible solution and generate the answers.

Computer Network

Attaching the one computer to another computer through cable / communication media is called computer network.

There are minimum two computers in local are network and thousand computer can attach in a local area network

Internet

The connections of computers with a net is called internet.

Types of Computer network

There are two common types of computer network.

LAN ( Local Area Network )
WAN ( Wide Area Network )

LAN (Local Area Network)

The network of computers that attached in a building, house, office and a company is called local area network.

These computers network can share information from one computer to another computer in a same office building and house.

WAN (Wide Area Network)

The network of computers that attached in whole world with internet are called wide area network.

These computers network can share information from one computer to any others computers that are anywhere in the world but there must be a internet connection to communicate.

WWW (World Wide Web)

World wide web is the global web in which peoples share there thoughts , interest , business , study , knowledge’s , religions , tradition and culture on the web sites.

Every use of WWW has a unique address to store its information on server computers that are biggest computers for WWW storing purpose.

WWW can edit, insert, remove, copying, format, designs, style and interpret globally.

Types of computer network

There are several types of computers network which can perform / communicate its information to each other computer user.

Some networks are costly and some are not costly in nature. Because the network is collections of cable , router , hub and transmitter.

Types of computer network

Types of computer networks are as fellows:-

Star topology
Ring topology
Bus topology

Web browser / search engine

The search engine that use to surface, browse and explore the information’s of website are called web browser.

Web browser is simplest web page search that are use in client side.

The user can search, interact and manipulate the information of the web sites.

Examples of web browser/searcher engines

There are several examples of web browser that use to interpret the web page information some of them are given below:-

Google Chrome
Alta vista
Yahoo
Hotmail/MSN
Mozilla Firefox
Opera
Google etc

E mail stands for Electronic mail.

Email users have own unique address to send SMS / mail to each other.

Email is the fastest ways to send message from one computer to others computer that may be in any distance.

Email is way to save time, cost, resources and difficulties for conveys your message.

Computer Programming Language

There are two types of computer programming languages
Computer can understand two type of computer programming language.
Computer original language is called device language which very closely understand by computer is called Binary language.
Which contain only two ward 0and 1.
0 mean’s off and 1 mean’s on.

Types of computer languages

High Level Language
Low Level Language

High Level Language

High level language is very close to human being language. This language can easily understand by human being and easy to write and read.

Examples of High level language are:-

Java
HTML
PHP
Visual Basic
C
JavaScript

Low Level Language

Low Level Language is very close to machine language. These language can easily understand by computer and difficult to write and read.

Examples of Low Level Language are:-

BASIC
COBAL
FORTRAN
PASCAL

HTML

World WEB Wide

DEVELOPMENT

HTML Programming Language

HTML stands for hypertext markup language
This computer language use to create webs pages with different designs, style, color and size.

HTML Web Development

HTML language can be written in user side script and server side script. This language give a motivation to world wide web to activate with web development. This is easy to understand and write. This language can be written on notepad but extension of file name should be in .html (for example abc.html).

Rules to write HTML programmed

Every web page start with <HTML> tag
<head> tag if you want to create Title bar name
<title> tag for title of your web page should be close </title> tag before closing </head> tag
</head> tag after closing <title> tag
<Body> All main part of web page are written in <body> tag
All functions, commands, statements and processes are written in <body> tag
</Body> Used to finished the main function or body of your web page.
</HTML> Use when your Web page Completed.

Create a title of the web page

<HTML>

<HEAD>

<TITLE> My First Web Page</TITLE>

<BODY>

</BODY>

</HTML>

Only Title bar name created. When you run the programmed in search engine. After write this html code in note pad you should save file with the name (name.HTML). Then this web page will work in search engines.

Create a web page

<HTML>

<HEAD>

<TITLE> My First Web Page</TITLE>

<BODY>

My First Web Page

</BODY>

</HTML>

Title bar name and web page created when you run the programmed.

Cascade Webpage

<html>

<head>

<Title> Cascade </TITLE>

</head>

<body>

h1 {text-decoration: overline}

h2 {text-decoration: line-through}

h3 {text-decoration: underline}

a {text-decoration: none}

</style>

<h1>This is header 1</h1>

<h2>This is header 2</h2>

<h3>This is header 3</h3>

<p>

<a href=”http://www.w3schools.com”>W3School</a>

</p>

</body>

</html>

Result of Cascade webpage

This is header 1

This is header 2

This is header 3

W3School

This will be the layout of our cascade web page. In which you can see our HTML code result.

Alert, news or greeting SMS
practice

<html>

<head>

function sndAlert()

{

window.alert(“You are so genious. Thanks for visiting my webpage!!!”);

}

</script>

</head>

<body>

<FORM

NAME=”form1”>

<INPUT TYPE=”Button” name=”showAlert” VALUE=”Show Alert”

onclick=”sndAlert()”>

</FORM></center>

</body>

</html>

Creating cell / table

<HTML>

<HEAD>

<TITLE>

English Alphabet </TITLE>

</HEAD>

<BODY>

<h1> English Alphabet </h1>

<tr>

</tr>

<br>

<tr>

</tr>

</tabl>

</body>

</html>

Creating cell / table

<HTML>

<HEAD>

<TITLE>

English Alphabet </TITLE>

</HEAD>

<BODY>

<h1> English Alphabet </h1>

<tr>

<td>Games</h1></td>

<td>Education </h1></td>

</tr>

</table>

</body>

</html>

Announcement/Marquee tag

<HTML>

<head>

<TITLE> My favorites web sites </TITLE>

</head>

<BODY>

World Wide Web School Dina Jhelum

</MARQUEE>!

<b> Contact this number to get admission Mob # +923335867127 (Waseem Mushtaq) </b></center>

</BODY>

<HTML>

Creating cell or table

<HTML>

<head>

<TITLE> Table </TITLE>

</head>

<BODY>

<Tr>

<td> O-Level </td>

<td> A-Level </td>

</tr>

<td>bachelor </td>

<td>Master</td>

</tr>

<tr>

</tr>

</table>

</center>

</BODY>

</HTML>

Alert show in new windows

<html>

<head>

function sndAlert()

{

window.alert(“You are so genius. Thanks for visiting my webpage!!!”);

}

</script>

</head>

<body>

<center><FORM

NAME=”form1”>

<INPUT TYPE=”Button” name=”showAlert” VALUE=”Show Alert”

onclick=”sndAlert()”>

</FORM></center>

</body>

</html>

Procedure of above statement

A web page open with button name “show alert” .

When you click on show button then programmed execute and show alert SMS that you give in window.alert. This function performed by sends alert property.

Creating a web site with simple SMS

<html>

<head>

<title>XML-example</title>

</head>

<body>

<xml>

<meal>

<name>spicy</name>

</burger>

</meal>

</xml>

</body>

</html>

Creating order list

<HTML>

<HEAD>

<TITLE>

Books </TITLE>

</HEAD>

<BODY>

<h1> Books list </h1>

<ol>

<li>English</li>

<li>Business</li>

<li>Management</li>

<li>Computer</li>

<li>Physic</li>

<li>Mathematics</li>

<li>Marketing</li>

<li>Economics</li>

</ol>

</body>

</html>

Creating unordered list

<HTML>

<HEAD>

<TITLE>

Books </TITLE>

</HEAD>

<BODY>

<h1> Books list </h1>

<ul>

<li>English</li>

<li>Business</li>

<li>Management</li>

<li>Computer</li>

<li>Physic</li>

<li>Mathematics</li>

<li>Marketing</li>

<li>Economics</li>

</ul>

</body>

</html>

Creating a web site with simple SMS

Title bar name will be “XML-example”
The heading of web page will be “HTML text here” with large size heading use the tag <h1> </h1> ( these tags range from
<h1></h1>
<h></h2>
<h3></h3>
<h4></h>
<h5></h5>
<h6></h6>
SMS will be only “spicy” because use of XML language ( extensible markup language )

Creating text with use of “for” loop tag

<html>

<head>

<title> I love country name </title>

</head>

<body>

var no;

for (no=0; no<6 ; no++)

{

document.write(“I Love country name” + no + “<br>” );

}

</script>

</body>

</html>

Result of above programmer will be as

I Love country name 0
I Love country name 1
I Love country name 2
I Love country name 3
I Love country name 4
I Love country name 5

Use of “for” loop tag

<html>

<head>

<title> Counting </title>

</head>

<body>

var no;

for (no=0; no<10 ; no++)

{

document.write(“Good” + no + “<br>” );

}

</script>

</body>

</html>

Example of webpage which contain some text

<HTML>

<HEAD>

</HEAD>

<BODY>

<br>

<CENTER> Never lose hope</CENTER>

<br>

<br>

<CENTER> Hope is a beautiful relationship of life.</CENTER>

<br>

<br>

<CENTER> Hope builds a house for you in spring </CENTER>

<br>

<br>

<CENTE> Man is religion with hope. </CENTER>

<br>

<CENTER> Hope is a morning.</CENTER>

<br>

<CENTER>Hope is a friendship. </CENTER>

<br>

<CENTER>Hope of life is hope is peace, rest and love. </CENTER>

<br>

</h4>

</BODY>

</HTML>

Example of webpage which contain some text

Copy this code and paste in note pad at you computer
Save the file with extension filename*.HTML
Run the program with web browser
The result will be same text that I use
These are some sentence that shows my love, thought and ideas.
This program also can run on server computer.

Creating webpage famous content

<HTML>

<head>

<TITLE> My favorites web sites </TITLE>

</head>

<BODY>

World Wide Web School Dina Jhelum

</MARQUEE>!

<b> Contact this number to get admission <a herf=“http//:www.w3school.com” target=“-blank”>w3school<a> </b></center>

</BODY>

</HTML>

After execute you see a running announcement bar with link of World Wide Web school.

Calculation of area of circle with radios 10

<html>

<body>

var radius,area;

radius = 10;

area = Math.PI*Math.pow(radius,2);

document.write(“Area of circle with radius 10 is “ + area );

</script></h1>

</body>

</html>

Calculation of area of circle with radios 10

Area of circle with radius 10 is 314.1592653589793

Create table

<HTML>

<head>

<TITLE> Table </TITLE>

</head>

<BODY>

<h1> Amna Institute Of Computer Education Dina Jhelum</h1>

</center>

<Tr>

<td><h1> O-Level</h1> </td>

<td> <h1>A-Level </h1></td>

</tr>

<td><h1>Bachelor</h1></td>

<td><h1>Master</h1></td>

</tr>

<tr>

</tr>

</table>

</center>

<br>

<center> Contact for help <h2>Waseem Mushtaq </h2> </center>

<tr>

<td>Introduction To Computer</td>

<td>Statistics & business Mathematics</td>

<td>Mathematics</td>

<td>Accounting</td>

<td>Communication Skill</td>

</tr>

<tr>

<td>Income Tex</td>

<td>Introduction to business</td>

<td>Principle Of Marketing</td>

<td>Marketing Management</td>

<td>Business Communication</td>

</tr>

<tr>

<td> Economics </td>

<td>Principles Of Management</td>

<td>E-Commerce</td>

<td>Money & Banking</td>

<td>Organizational Behavior</td>

</tr>

</table>

</center>

</BODY>

</HTML>

Create Registration web form

<HTML>

<HEAD>

<TITLE> Register Form </TITLE>

</HTML>

<BODY>

<H3>To Register Please Enter The Following Information:</H3>

Name: <INPUT TYPE="TEXT" NAME="Name" maxlength="25">

</P>

<p>Address: <INPUT TYPE="TEXT" NAME="userAdd" maxlength="50">

</p>

<p>Password: <INPUT TYPE="Password" NAME="userPassword" maxlength="15">

</p>

<p>Email: <INPUT TYPE="TEXT" NAME="email" maxlength="15">

</P>

</FORM>

</BODY>

</HTML>

Simple Informative web page

<HTML>

<HEAD>

<TITLE>Planets</TITLE>

</HEAD>

<BODY>

<h1>Planets</h1>

<h2>Planet Name</h2>

<h3>Distance From Sun</h3>

<h4>Moons</h4>

<h5>Day Length</h5>

<h2>Mercury</h2>

<h3>36 million miles</h3>

<h2>Venus</h2>

<h3>67 million miles</h3>

<h2>Earth</h2>

<h3>93 million miles</h3>

<h5>24 Hours</h5>

</BODY>

</HTML>

Here <h1><h2><h3><h4><h4> are tag to write web page text with different font size

A beautiful web page with popular websites

<HTML>

<head>

<TITLE> My favorites web sites </TITLE>

</head>

<BODY>

<center><h1>Waseem Mushtaq Favorite web site</h1></center>

<tr>

<td><b>Click here to visit virtual university of Pakistan</b><br>

<a href="http://www.vu.edu.pk" target="-blank">Virtual University</a></td>

<td><b>Click here to visit Pakistani website </b><br>

<a href="http://www.apniisp.com" target="-blank">Apniisp</a></td>

<td><b>Click here to visit MSN web site</b><br>

</tr>

<tr>

<td><b>Click here to visit yahoo web site</b><br>

<a href="http://www.yahoo.com" target="-blank">Yahoo</a></td>

<td><b>Click here to visit hotmail web site</b><br>

<a href="http://www.hotmail.com" target="-blank">Hotmail</a></td>

<Td><b>Click here to visit facebook website</b><br>

<a href="http://www.facebook.com" target="-blank">Facebook</a></td>

</tr>

<tr>

<td><b>Click here to visit Google web site </b><br>

<a href="http://www.google.com.pk" target="-blank">Google</a></td>

<td><b>Click here to visit funmaza web site </b><br>

<a href="http://www.funmaza.com" target="-blank">Funmaza</a></td>

<Td><b>Click here to visit Urdu newspaper of Pakistan</b><br>

<a href="http://www.urdupoint.com" target="-blank">Urdu point</a></td></tr>

<tr>

<td><b>Click here to visit the YouTube web site for videos </b><br>

<a href="http://www.youtube.com" target="-blank">YouTube Broadcast</a></td>

<td><b>Click here to Make this page as your own home page</b><br>

<td><b>Contact help</b><br>

<a href=mailto:waseemfour@gmail.com>Contact Help</A></td> </tr>

</Table></center>

Amna Institute Of Computer Education Dina Jhelum

</MARQUEE>!

<b> Contact this number to get admission Mob # +923335867127 (Waseem Mushtaq ) </b></center>

Radiant college of Commerce and Science Dina Jhelum

</MARQUEE>!

<b> Contact this number to get admission Mob # +923315955168 ( Asim Shazad ) </b>

</center>

</BODY>

</HTML>

Create a beautiful web page with different texts font colors

<HTML>

<HEAD>

<TITLE>

Accept </TITLE>

</HEAD>

<body>

<h1> Accept</h1>

</center>

<br>

<Tr>

There are few keys to get success in your life :- <br>

1 Attentively<br>

2 Attractive<br>

3 Confidence<br>

4 Achievement<br>

5 Activities<br>

6 Interactivity<br>

7 Interest<br>

8 Prospective<br>

9 Planning<br>

10 Organizing<br>

11 Developing<br>

12 Diversity<br>

13 Independence<br>

14 Cultivator<br>

15 Perceptive<br>

16 Motivator<br>

17 Guidance<br>

18 Social<br>

19 Relationship<br>

20 Education<br>

21 Initiative<br>

22 Oriented<br>

23 Leadership<br>

24 Democratic<br>

25 Journalist<br>

</h1></td>

<br>

There are few steps to increase personality :- <br>

1 Hold<br>

2 Control<br>

3 Bear<br>

4 Learn<br>

5 Teach<br>

6 Knowledge<br>

7 Smile<br>

8 Hope<br>

9 Help<br>

10 Trust<br>

11 Behavior<br>

12 Dependent<br>

13 Independence<br>

14 Productive<br>

15 Professional<br>

16 Perceptive<br>

17 Motivator<br>

17 Care<br>

18 Social<br>

19 Tolerance<br>

20 Believe<br>

21 Ideal<br>

22 Emotional<br>

23 Peace<br>

24 Discipline<br>

25 True<br>

</h1></td>

</tr>

</TABLE>

<center> <h1> Waseem Mushtaq</h1> </center> <br>

<br>

</body>

</html>

Create a beautiful web page with different texts font colors

<html>

<HEAD>

<TITLE>

Life Style Improvement </TITLE>

</HEAD>

<body>

<h1> Life Style Improvement</h1>

</center>

<br>

<Tr>

<td>

There are few things which can improve in your life style :- <br></font>

<font color="brown">1 Exercise<br></font>

<font color="african brown">2 Education<br></font>

<font color="pastrol green">3 Respect<br></font>

<font color="olive drab">4 Right<br></font>

<font color="Kelly green">5 Honesty<br></font>

<font color="Deep green">6 Reality<br></font>

<font color="spruce green">7 Habit<br></font>

<font color="rose pink">8 Activities<br></font>

<font color="spanish red">9 dieting<br></font>

<font color="chocolate">10 Truth<br></font>

<font color="maroon">11 Relaxation<br></font>

<font color="as in tan">13 Memory<br></font>

<font color="rust">14 Regulation<br></font>

<font color="old gold">15 Punctual<br></font>

<font color="yellow">16 Advice<br></font>

<font color="maize">17 Thought<br></font>

<font color="purple">18 Relationship<br></font>

<font color="grey">19 Clean<br></font>

</td>

</table>

</center>

<center><font color="offwhite"><h1>Waseem Mushtaq<br></font></h1></center>

<center><font color="offwhite"><h1>("Spiritual Edge")<br></font></h1></center>

</body>

</html>

Creating frame in a webpage

<!DOCTYPE html>

<html>

<head>

<Title> Frames </title>

</head>

</frameset>

</html>

A very nice information webpage

tips of Knowledge and education

<html>

<HEAD>

<TITLE>

How to increase knowledge </TITLE>

</HEAD>

<body>

<h1> Knowledge and Education Improvement </h1>

</center>

<br>

<Tr>

<td>

There are few things which can improve and increase in your Knowledge and Education Improvement :- <br></font>

<font color="brown">1 Content<br></font>

<font color="african brown">2 Context<br></font>

<font color="pastrol green">3 Concept<br></font>

<font color="olive drab">4 Revision<br></font>

<font color="Kelly green">5 Abstraction<br></font>

<font color="Deep green">6 Achievement<br></font>

<font color="rose pink">8 Improvement<br></font>

<font color="spanish red">9 remember<br></font>

<font color="chocolate">10 Memory test<br></font>

<font color="maroon">11 Summary<br></font>

<font color="resort blue">12 Outline<br></font>

<font color="as in tan">13 Maintenance<br></font>

<font color="old gold">15 learn<br></font>

<font color="yellow">16 Teach<br></font>

<font color="maize">17 Heath<br></font>

<font color="purple">18 Games<br></font>

<font color="grey">19 Regular<br></font>

<font color="black">20 punctual<br></font></h1>

</td>

</table>

</center>

<center><font color="offwhite"><h1>Waseem Mushtaq<br></font></h1></center>

<center><font color="offwhite"><h1>("Spiritual Edge")<br></font></h1></center>

</body>

</html>

Creating Web page with

Background image

Table

List

Link

<!doctype html>

<HTML>

<HEAD>

<TITLE>

WebMaker

</TITLE>

</HEAD>

<h1> I Am a member of

<br>

<a href="www.webmaker.org" target="-blank">Mozilla Webmaker</a>

</h1>

My name is

<br> _______

I like

<tr>

<td>

<ol>

<li>Internet </li>

<li>World Wide Web </li>

</ol>

</td>

</tr>

</table>

<h2> This is my first step in the World Wide Web. </h2>

</body>

</html>

Send Email link

<html>

<head>

<title>

</title>

</head>

<body>

<h1> Please send me Email </h1>

<a href=mailto:waseemfour@gmail.com>Email</a>

</body>

</html>

Send me Email

<html>

<head>

<title>

</title>

</head>

<body>

<h1> Please send me Email </h1>

<a href=mailto:waseemfour@gmail.com>Email</a>

</body>

</html>

World wide Web page

<html>

<head>

<title>

WWW

</title>

</head>

<body>

<h1> Welcome to world wide web </h1>

Click here to learn

</body>

</html>

Using of World Wide Web

<html>

<head>

<title>

World Wide Web

</title>

</head>

<body>

<h1> Welcome to world wide web </h1>

Use of world wide web

<ol>

<li>Games</li>

<li>Business</li>

<li>Education</li>

<li>Commerce</li>

<li>Office</li>

<li>Plane</li>

<li>Organizations</li>

<li>Airport</li>

<li>Libraries</li>

<li>Production </li>

<li>Design</li>

<li>Graphic</li>

<li>Animation</li>

<li>Movie making</li>

<li>Writing</li>

</ol>

</body>

</html>

HTML Practice with short Web page

Table

<html>

<title>

Table

</title>

<body>

<h1>

Table

</h1>

<Table>

<tr>

<td> table</td>

</tr>

</body>

</html>

List

<html>

<title>

List

</title>

<body>

<h1>

List

</h1>

<ol>

<li> Table </li>

<li> Chair </li>

<li> House </li>

</body>

</html>

Hyper Link

<html>

<title>

Link

</title>

<body>

<h1>

Link

</h1>

<a href=www.microsoft.com>Microsoft</a>

</body>

</html>

Basic Computer and World Wide Website

Promo Coupon

Promo Coupon

Home

Basic Computer and HTML Practice

No comments:

Post a Comment