Oct 14, 2008

Learn simple HTML

Thursday, February 26, 2009

Learn simple HTML

Hello friends let us practice some basic HTML code formats.The HTML
code can be typed in a MS Notepad which is a text editor.Open the Notepad
which is available in Start>Accessories>Notepad in MS Window.Click on File
menu& then click on New.Seeing blinking cursor in the Notepad,we can type
this code.After typing correctly this code which is in text form can now be
saved as a html format with a html extension in the following steps:
(Notepad in MS Vista is available in Windows,not in accessories.)

Click on pictures for larger views.








Click on File menu & click the Save as...
In the look in box>type Desktop.
In the save as type box>Click the down arrow & select All Files.
In the File name box >type Red.html





Now we have sucessfully created a html page with red as background!




Above is the html page with a red color as background.Color name may be changed
thereby background pertaining to that color will also change .We are giving color
names in plain English language & the browser obeys that command.
That is the wonder. Thereare 16 guaranteed basic colors such as Red,Green,Blue,Black,Silver,Lime,Olive,White,Yellow,Maroon,Navy,
Purple,Teal,Fuchsia,Gray and Aqua.
Please try each color & see them
in the computer monitor



The English word "Green" in body bgcolor has changed background
color to green!



The English word "Yellow" in body bgcolor has changed background
color to Yellow!

Once a HTML code written,a single change in the bgcolor value,change of
bgcolor takes effect.Remember when the color name is changed ,we have
to save it & then open the new html page,otherwise the previous color
only will be shown.

Summary:Type the HTML code for background color of the html page.
The MS Notepad is a text editor.Click on File
menu& then click on New.Seeing blinking cursor in the Notepad,we can type
the code.After typing correctly the code which is in text form can now be
saved as a html format with a html extension such as Red.html,Green.html,
Yellow.html etc according to the color given in the bgcolor value(color name).
After some practice & stumbling,You may be able to change bgcolors.Please try.
Remember to save as... html file,All files must be selected in the in the
save as type box &select All files.


Now let us write some text in various sizes:







The H1 means the biggest heading & the H6 is the smallest sub heading.
Please note placements of the heading tags in the beginning and ending
of the text.The ending tag has a forward slash (/) in it.








Click the images for larger view.

Some color names in English and their equivalent Hex values

Black

#000000

White

#FFFFFF

Red

#FF0000

Lime

#00FF00

Blue

#0000FF

Yellow

#FFFF00

Fuchsia

#FF00FF

Aqua

#00FFFF

Gray

#808080

Navy

#000080

Olive

#808000

Purple

#800080

Maroon

#800000

Silver

#C0C0C0

Teal

#008080

Green

#008000

# is a pound symbol 0-Zero A,B,C,D,E and F are Hexadecimal digits.

In the latest versions, A,B,C,D,E and F must be in small case.

Instead of English color names in the values,we can put the Hexadecimal

Numbers for getting different colors as our backgrounds.Please try.


Decimal numbers 0 to 9 and alpha a,b,c,d,e and f (a=10,b=11,c=12,d=13
e=14 and f=15) make a hexadecimal number(hex nbr).The base for our

Decimal number system is 10 while the base for hexadecimal number
system is 16.

Hexadecimal Number System:1 2 3 4 5 6 7 8 9 A B C D E F

The upper row: decimal numbers & the lower row : equivalent Hexadecimal numbers..

0

1

2

3

4

5

6

7

8

9

`10

11

12

13

14

15

0

1

2

3

4

5

6

7

8

9

A

B

C

D

E

F


Red, Green & Blue are three basic colors in RGB color system.Mixture of
these three colors in different intensities make different colors.Computer
monitor displays colors on this RGB color mode.

The hex color code consists six digits.Each pair of digits represent a color.

#ff0000=Red. (Only Red with full intensity)

#00ff00=Green (Only Green or lime with full intensity)

#0000ff=Blue. (Only Blue with full intensity)

#000000=Black (Absence of all colors)

#ffffff=White (Mixture of R, G & B with full intensities)

Thus we can get different color shades :256X256X256.

Calculate yourself.


HTML Colors

The table below provides a list of the color names that are supported by all major browsers.

Click on a color name (or a hex value) to view the color as the background-color along with different text colors:

Color Name Color HEX Color
AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Cyan #00FFFF
DarkBlue #00008B
DarkCyan #008B8B
DarkGoldenRod #B8860B
DarkGray #A9A9A9
DarkGreen #006400
DarkKhaki #BDB76B
DarkMagenta #8B008B
DarkOliveGreen #556B2F
Darkorange #FF8C00
DarkOrchid #9932CC
DarkRed #8B0000
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
DeepPink #FF1493
DeepSkyBlue #00BFFF
DimGray #696969
DodgerBlue #1E90FF
FireBrick #B22222
FloralWhite #FFFAF0
ForestGreen #228B22
Fuchsia #FF00FF
Gainsboro #DCDCDC
GhostWhite #F8F8FF
Gold #FFD700
GoldenRod #DAA520
Gray #808080
Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
HotPink #FF69B4
IndianRed #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
LavenderBlush #FFF0F5
LawnGreen #7CFC00
LemonChiffon #FFFACD
LightBlue #ADD8E6
LightCoral #F08080
LightCyan #E0FFFF
LightGoldenRodYellow #FAFAD2
LightGrey #D3D3D3
LightGreen #90EE90
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
LightSkyBlue #87CEFA
LightSlateGray #778899
LightSteelBlue #B0C4DE
LightYellow #FFFFE0
Lime #00FF00
LimeGreen #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370D8
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
Moccasin #FFE4B5
NavajoWhite #FFDEAD
Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
PaleGoldenRod #EEE8AA
PaleGreen #98FB98
PaleTurquoise #AFEEEE
PaleVioletRed #D87093
PapayaWhip #FFEFD5
PeachPuff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
Purple #800080
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
SaddleBrown #8B4513
Salmon #FA8072
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
SkyBlue #87CEEB
SlateBlue #6A5ACD
SlateGray #708090
Snow #FFFAFA
SpringGreen #00FF7F
SteelBlue #4682B4
Tan #D2B48C
Teal #008080
Thistle #D8BFD8
Tomato #FF6347
Turquoise #40E0D0
Violet #EE82EE
Wheat #F5DEB3
White #FFFFFF
WhiteSmoke #F5F5F5
Yellow #FFFF00
YellowGreen #9ACD32

Note: The names above are not a part of the W3C web standard.

The W3C HTML and CSS standards have listed only 16 valid color names:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.


The World Wide Web Consortium (W3C)http://www.w3.org/


If you want valid HTML or CSS use the HEX values instead.

If you can imagine it,You can achieve it.If you can dream it,You can become it."--William Arthur Ward [More Quotes from William Arthur Ward]
How Computer Keyboards Work
When you look at all the extras and options that are available for new computer keyboards, it can be hard to believe that their original design came from mechanical typewriters that didn't even use electricity. Now, you can buy ergonomic keyboards that bear little resemblance to flat, rectangular models with ordinary square keys. Some flashier models light up, roll up or fold up, and others offer options for programming your own commands and shortcuts.
Computer Keyboard Image Gallery
An average Windows keyboard.See more keyboard pictures.

But no matter how many bells and whistles they offer, most keyboards operate using similar technology. They use switches and circuits to translate a person's keystrokes into a signal a computer can understand. In this article we will explore keyboard technology along with different key layouts, options and designs.
Keyboard Basics
A keyboard's primary function is to act as an input device. Using a keyboard, a person can type a document, use keystroke shortcuts, access menus, play games and perform a variety of other tasks. Keyboards can have different keys depending on the manufacturer, the operating system they're designed for, and whether they are attached to a desktop computer or part of a laptop. But for the most part, these keys, also called keycaps, are the same size and shape from keyboard to keyboard. They're also placed at a similar distance from one another in a similar pattern, no matter what language or alphabet the keys represent.
Most keyboards have between 80 and 110 keys, including:
· Typing keys
· A numeric keypad
· Function keys
· Control keys
The typing keys include the letters of the alphabet, generally laid out in the same pattern used for typewriters. According to legend, this layout, known as QWERTY for its first six letters, helped keep mechanical typewriters' metal arms from colliding and jamming as people typed. Some people question this story – whether it’s true or not, the QWERTY pattern had long been a standard by the time computer keyboards came around.
Photo courtesy HSW ShopperThis Logitech wireless keyboard uses a QWERTY layout.
Keyboards can also use a variety of other typing key arrangements. The most widely known is Dvorak, named for its creator, August Dvorak. The Dvorak layout places all of the vowels on the left side of the keyboard and the most common consonants on the right. The most commonly used letters are all found along the home row. The home row is the main row where you place your fingers when you begin typing. People who prefer the Dvorak layout say it increases their typing speed and reduces fatigue. Other layouts include ABCDE, XPeRT, QWERTZ and AZERTY. Each is named for the first keys in the pattern. The QWERTZ and AZERTY arrangements are commonly used in Europe.
The numeric keypad is a more recent addition to the computer keyboard. As the use of computers in business environments increased, so did the need for speedy data entry. Since a large part of the data was numbers, a set of 17 keys, arranged in the same configuration found on adding machines and calculators, was added to the keyboard.
The Apple keyboard's control keys include the "Command" key.
In 1986, IBM further extended the basic keyboard with the addition of function and control keys. Applications and operating systems can assign specific commands to the function keys. Control keys provide cursor and screen control. Four arrow keys arranged in an inverted T formation between the typing keys and numeric keypad move the cursor on the screen in small increments.
Photo courtesy www.artlebedev.comOptimus keyboard OLED arrow keys
Other common control keys include:
· Home
· End
· Insert
· Delete
· Page Up
· Page Down
· Control (Ctrl)
· Alternate (Alt)
· Escape (Esc)
Photo courtesy www.artlebedev.comThis Optimus keyboard has programmable hot keys.
The Windows keyboard adds some extra control keys: two Windows or Start keys, and an Application key. Apple keyboards, on the other hand, have Command (also known as "Apple") keys. A keyboard developed for Linux users features Linux-specific hot keys, including one marked with "Tux" the penguin -- the Linux logo/mascot.
Photo courtesy www.artlebedev.comOptimus keyboard OLED Windows key

Inside the Keyboard
A keyboard is a lot like a miniature computer. It has its own processor and circuitry that carries information to and from that processor. A large part of this circuitry makes up the key matrix.
The microprocessor and controller circuitry of a keyboard
The key matrix is a grid of circuits underneath the keys. In all keyboards (except for capacitive models, which we'll discuss in the next section), each circuit is broken at a point below each key. When you press a key, it presses a switch, completing the circuit and allowing a tiny amount of current to flow through. The mechanical action of the switch causes some vibration, called bounce, which the processor filters out. If you press and hold a key, the processor recognizes it as the equivalent of pressing a key repeatedly.
When the processor finds a circuit that is closed, it compares the location of that circuit on the key matrix to the character map in its read-only memory (ROM). A character map is basically a comparison chart or lookup table. It tells the processor the position of each key in the matrix and what each keystroke or combination of keystrokes represents. For example, the character map lets the processor know that pressing the a key by itself corresponds to a small letter "a," but the Shift and a keys pressed together correspond to a capital "A."
The key matrix
A computer can also use separate character maps, overriding the one found in the keyboard. This can be useful if a person is typing in a language that uses letters that don't have English equivalents on a keyboard with English letters. People can also set their computers to interpret their keystrokes as though they were typing on a Dvorak keyboard even though their actual keys are arranged in a QWERTY layout. In addition, operating systems and applications have keyboard accessibility settings that let people change their keyboard's behavior to adapt to disabilities.

Keyboard Switches
Keyboards use a variety of switch technologies. Capacitive switches are considered to be non-mechanical because they do not physically complete a circuit like most other keyboard technologies. Instead, current constantly flows through all parts of the key matrix. Each key is spring-loaded and has a tiny plate attached to the bottom of it. When you press a key, it moves this plate closer to the plate below it. As the two plates move closer together, the amount of current flowing through the matrix changes. The processor detects the change and interprets it as a key press for that location. Capacitive switch keyboards are expensive, but they have a longer life than any other keyboard. Also, they do not have problems with bounce since the two surfaces never come into actual contact.
All of the other types of switches used in keyboards are mechanical in nature. Each provides a different level of audible and tactile response -- the sounds and sensations that typing creates. Mechanical key switches include:
· Rubber dome
· Membrane
· Metal contact
· Foam element
This keyboard uses rubber dome switches.
Rubber dome switches are very common. They use small, flexible rubber domes, each with a hard carbon center. When you press a key, a plunger on the bottom of the key pushes down against the dome, and the carbon center presses against a hard, flat surface beneath the key matrix. As long as the key is held, the carbon center completes the circuit. When the key is released, the rubber dome springs back to its original shape, forcing the key back up to its at-rest position. Rubber dome switch keyboards are inexpensive, have pretty good tactile response and are fairly resistant to spills and corrosion because of the rubber layer covering the key matrix.
Rather than having a switch for each key, membrane keyboards use a continuous membrane that stretches from one end to another. A pattern printed in the membrane completes the circuit when you press a key. Some membrane keyboards use a flat surface printed with representations of each key rather than keycaps. Membrane keyboards don't have good tactile response, and without additional mechanical components they don't make the clicking sound that some people like to hear when they're typing. However, they're generally inexpensive to make.
Metal contact and foam element keyboards are increasingly less common. Metal contact switches simply have a spring-loaded key with a strip of metal on the bottom of the plunger. When the key is pressed, the metal strip connects the two parts of the circuit. The foam element switch is basically the same design but with a small piece of spongy foam between the bottom of the plunger and the metal strip, providing a better tactile response. Both technologies have good tactile response, make satisfyingly audible "clicks," and are inexpensive to produce. The problem is that the contacts tend to wear out or corrode faster than on keyboards that use other technologies. Also, there is no barrier that prevents dust or liquids from coming in direct contact with the circuitry of the key matrix.
Different manufacturers have used these standard technologies, and a few others, to create a wide range of non-traditional keyboards. We'll take a look at some of these non-traditional keyboards in the next section.

Non-Traditional Keyboards
A lot of modifications to the traditional keyboard design are an attempt to make them safer or easier to use. For example, some people have associated increased keyboard use with repetitive stress injuries like carpal tunnel syndrome, although scientific studies have produced conflicting results. Ergonomic keyboard designs are intended to keep a person's hands in a more natural position while typing in an attempt to prevent injuries. While these keyboards can certainly keep people from holding their hands in a "praying mantis" position, studies disagree on whether they actually prevent injury.
Photo courtesy www.safetype.comThe SafeType keyboard places the two halves of the keyboard perpendicular to the desk surface.
The simplest ergonomic keyboards look like traditional keyboards that have been divided down the middle, keeping a person's hands farther apart and aligning the wrists with the forearms. More complex designs place the two halves of the keyboard at varying angles to one another and to the surface on which the keyboard rests. Some go even further, placing the two halves of the keyboard on the armrests of chairs or making them completely perpendicular to the desk surface. Others, like the Datahand, don't look much like keyboards at all.
Photo courtesy www.saitek.comSaitek Truview backlit keyboard buttons
Some modifications, while not necessarily ergonomic, are designed to make keyboards more portable, more versatile or just cooler:
· Das Keyboard is a completely black keyboard with weighted keys that require more pressure from a person's strongest fingers and less pressure from the weaker ones.
· The Virtual Laser Keyboard projects a representation of a keyboard onto a flat surface. When used successfully, a person's fingers pass through the beam of infrared light above the projected surface, and a sensor interprets it as a keystroke.
· The True-touch Roll-up keyboard is flexible and can be rolled up to fit in a backpack or bag.
Blue backlit keyboard 'on'
·
Blue backlit keyboard 'off'
· Illuminated keyboards, like the Ion Illuminated Keyboard, use light-emitting diodes or electroluminescent film to send light through the keys or the spaces between keys.
Photo courtesy www.artlebedev.comOptimus keyboard programmable hot keys
· The Optimus keyboard has organic light-emitting diodes (OLEDs) in the keys. Users can change what letter, command or action each key represents, and the OLED can change to display the new information.
Photo courtesy www.artlebedev.comThis Optimus keyboard is set for keystrokes used to play Quake.
With the exception of the Virtual Laser Keyboard, which has its own sensing system, each of these keyboards uses the same type of technology as traditional models do to communicate with the computer. We'll look at that technology next.

From the Keyboard to the Computer
As you type, the processor in the keyboard analyzes the key matrix and determines what characters to send to the computer. It maintains these characters in its memory buffer and then sends the data.
A PS/2 type keyboard connector.
Many keyboards connect to the computer through a cable with a PS/2 or USB (Universal Serial Bus) connector. Laptops use internal connectors. Regardless of which type of connector is used, the cable must carry power to the keyboard, and it must carry signals from the keyboard back to the computer.
Wireless keyboards, on the other hand, connect to the computer through infrared (IR), radio frequency (RF) or Bluetooth connections. IR and RF connections are similar to what you'd find in a remote control. Regardless of which sort of signal they use, wireless keyboards require a receiver, either built in or plugged in to the USB port, to communicate with the computer. Since they don't have a physical connection to the computer, wireless keyboards have an AC power connection or use batteries for power.
Microsoft wireless keyboard

This Microsoft wireless keyboard is battery-powered.
Whether it's through a cable or wireless, the signal from the keyboard is monitored by the computer's keyboard controller. This is an integrated circuit (IC) that processes all of the data that comes from the keyboard and forwards it to the operating system. When the operating system (OS) is notified that there is data from the keyboard, it checks to see if the keyboard data is a system level command. A good example of this is Ctrl-Alt-Delete on a Windows computer, which reboots the system. Then, the OS passes the keyboard data on to the current application.
The application determines whether the keyboard data is a command, like Alt-f, which opens the File menu in a Windows application. If the data is not a command, the application accepts it as content, which can be anything from typing a document to entering a URL to performing a calculation. If the current application does not accept keyboard data, it simply ignores the information. This whole process, from pressing the key to entering content into an application, happens almost instantaneously.
To learn more about computers and keyboards, check out the links on the next page.

inspirational quote

Face your past without regret. Handle your present with confidence. Prepare for the future without fear. Keep faith and drop the fear. Don’t believe your doubts and never doubt your beliefs. Life is wonderful if you know how to live it.