PAPER -1 OFFICE AUTOMATION AND WEB DESIGN++

PAPER -1 OFFICE AUTOMATION AND WEB DESIGN++
UNIT-1 COMPUTER FUNDAMENTALS Introduction to Computers - Software, Hardware and Pheripherel devices Operating Systems, DOS and Windows - File Management -Directory Services - Desktop and Customization - Commands and Utilities UNIT – II OFFICE AUTOMATION Introduction to Office Automation- Introduction to word- Editing a Document – Formatting a Document – Text and Spelling checking – Mail Merge-Creating and formatting Tables- Macros. Introduction to Worksheet – Worksheet manipulation – Formulas and function – Auto format – Conditional formatting – Creating Charts – Goad seek – Filter – Pivot Table. Introduction to Power point – Presentation Templates – Inserting pictures-Movies- Sounds – Charts – Table and Objects – Formatting macros – Slide Transaction – Animations – Slideshow. Machine Room Execution. (Practicing Topics on Enclosure)

UNIT III DATABASE MANIPULATIONS THRO’S MS ACCESS
Tables – Creating Tables – Adding and Customizing Fields – Primary Keys and Indexes – Relationships – Adding, Editing Dat – Sorting and Grouping of Data Datasheets and Subdatasheets – Creating Queries – Using criteria and Expressions to Retrive Data Forms – Creating and customizing Forms – Calculating Totals – Reports – Creating Reports – Printing and Previewing Reports. UNIT IV HTML Introduction to HTML – Tools Required – Tags- Structure of a HTML – Block formatting – Characters formatting- Links – Anchors – Adding Images – Lists – Tables – Frames – Forms – Buttons – Text Boxes – Password Controls – Check Boxes – Radio Buttons – Multi Line Text Boxes- Menu Controls- HTML Script

UNIT V DHTML Exploring and Navigating Dynamic HTML – Cascading Style Sheets – Orienting Towards Objects – Getting into Scripting – Animation – Multiplying the Media – Adding Interactivity (Dragging and Drepping) – Working with Data and Dialog Boxes – Working with Text – Understanding Brower Object Models.

UNIT I COMPUTER FUNDAMENTALS Introduction to Computers
COMPUTER FUNDAMENTALS Introduction to Computers The present age may be termed as computer age because no other invention has revolutionized the world as much as the Electronic Digital Computers, commonly known as computers. Just in a short period of three decades, the computers have become indispensable in every sphere of human life. The work area of computers is very exhaustive. There is hardly any area of development where computer applications have not set in. To illustrate a few, we can find their exhaustive use in organizations such as,

Industries, business organizations
Research establishments Educational institutions Government departments Hospitals Employment Exchanges. Communication departments Service Orga

What is a Computer A computer is a truly amazing electronic device that performs specified sequences of operations as per the set of instructions (known as programs) given on a set of data (input) to generate desired information (output). Being a machine, it will not perform independently or creatively. It will do only, what is instructed to do, in specific terms. It is based on a complex technology, but works on a simple principle as follows: nizations

Characteristics of Computers
The interesting features of a computer are: • High Speed – Ability to perform tasks at a greater speed than human beings. – Perform complex calculations in seconds. • Accuracy – Perform tasks with accuracy. – Input given to the computer determines the output received. • Storage – Can store large amounts of information. – Retrieve information whenever required. • Automation

– Can be instructed to perform tasks automatically.
• Diligence – Can perform the same task repeatedly, without getting tired. – Can do the same job with the same accuracy for hours or longer. • Versatility – Can be used to perform simple as well as complex tasks. • Cost effective – Reduce the amount of paperwork and human effort, thereby reducing costs.

Types of Computers Digital – A Digital computer uses digital technology. It processes digital quantities that attain discrete values. Most computers used for information processing are of this type. Analog – An Analog computer is designed to process continuous physical quantities. Examples of analog computer usage include monitoring temperature, voltage and current reading in a power station. Each of these parameters can attain an infinite number of values, not just simple on and off. Generation of Computers The evolution of computers has passed through a number of stages before it reached the present state. From the early 1950s, growth of the computers was very rapid but this development took distinct phases known as generation of computers.

First Generation The first generation computers were the voluminous computers. These computers used electronic valves (vacuum tubes) and had the main limitations of very large electric power consumption and very little reliability. Second Generation The invention of transistor in 1948 (invented at Bell Laboratories, USA) led to the development of second-generation computers. Transistors replaced the valves (vacuum tubes) completely as they were far more superior in performance on account of their miniature size, smaller power consumption and less expensive. Third Generation These computers use integrated circuits (ICs) in place of transistors and they were having higher speed, large storage capacities and less expensive. An integrated circuit arranges thousands of switches on circuit boards known as a chip. These machines used more versatile programmes like Multi Programming Techniques and Database Management.

Fourth Generation Due to development of large scale integrated chips known as microprocessor chips in 1971 by Intel Corporation, another breed became popular as fourth generation computers. Fifth Generation: These machines will use parallel processing techniques and artificial intelligence techniques.

Components of a computer
A computer system has mainly two components, namely Hardware and Software. Hardware refers to the physical units of computer, which includes all electronic and electric circuitry components and devices. Anything, which you see or touch, is considered as hardware. Software is a set of instructions that makes the hardware work to get desired results. Hardware Hardware may be described under the following categories: Input devices Process unit Output devices Storage devices

Input devices Input devices accept data and instructions from the user. Examples are: Keyboard Mouse Joystick Light Pen Optical/magnetic Scanner Touch Screen Microphone for voice as input Keyboard: A keyboard is the most common input device and is used for all kinds of computers – Main, Mini and Macros.

Mouse: A mouse is an electro-mechanical, hand-held device. It is used as a pointer to: Select menu commands Move icons Size windows Start programs, and Choose options.

An optical mouse is an advanced computer pointing device that uses a light-emitting diode (LED), an optical sensor, and digital signal processing (DSP) in place of the traditional mouse ball and electromechanical transducer. Movement is detected by sensing changes in reflected light, rather than by interpreting the motion of a rolling Sphere. Movement of the mouse is maintained via an input port connected to the computer. Many programmes today are designed to work with a mouse. A mouse is used to replace hardtop- learn key combinations with easier “Point and Click” actions. Processor The complex procedure that transforms raw input data into useful information for output is called processing. To perform this transform, the computer uses two components, the processor and memory.

The processor is the “brain” of the computer, the part that interprets and carries out instructions. In large computers, the processor often comprises a number of chips whereas in small computers called Microcomputers or personal computers (PC’s), the processor is a single silicon chip, called a microprocessor.

Memory The data fed to the computer stays stored in the memory, as and when the data is required to be processed or operated upon, it is transferred to the Arithmetic Logic Unit which does all the computation work like addition, subtraction etc. After processing, the data is again brought back and stored in the memory. The unit of memory is byte which is combination of 8 bits. MAIN MEMORY (RAM) – The main memory is Random Access Memory (RAM). The name derives from the fact that data can be stored in and retrieved at random, from anywhere. Main memory is in volatile state.

READ ONLY MEMORY (ROM) –
Instructions to perform such operations, which are critical to the operation of a computer are stored permanently on a read-only memory (ROM) chip installed by the manufacturer inside the computer. When the power in the computer is turned off, the instructions stored in ROM are not lost and the data cannot be changed. Arithmetic and Logic Unit: All the calculations are performed and all comparisons (decisions) are made in the Arithmetic and Logic Unit (ALU) of the CPU. Control Unit The Control Unit, as the very name implies, controls the movement and operates within the CPU. Based on the instructions given CPU ensures the operations as specified in the program are performed in the sequence. Output Devices After the computer has processed the data, the final result has to be brought out from the machine in some intelligent and readable form.

The common output devices are:
Monitor TV LCD Projector Printer Monitor Monitor is an output device with the help of which a user can see the results produced by the computer. It is also called as Visual Display Unit (VDU) available in different sizes. Printers Printers are very useful in day-to-day life to take a hardcopy of our work. There are different types of printers based on the quality and printing speed at which they print. The popular models are: Dot matrix Inkjet LaserJet Line

External Storage Devices
Floppy diskettes, hard disk and tapes come under the category of external storage devices or ancillary storage devices. Compact Disc It is a magnetic storage media, with very high capacity of storage approximately 650 MB. Data on a CD is more reliable. Hard Disc It is also magnetic storage media, using flat, circular platters, which rotate at a very high speed. Pen Drive/USB Flash Drive A USB flash drive consists of a flash memory data storage device integrated with a USB (Universal Serial Bus) 1.1 or 2.0 interface.

Modem A modem enables your computer to receive/send data from/to remote places through telephone lines, provided each has a compatible modem. On-line services like Electronic mail, Banking Travel reservations File transfers Fax services A modem is controlled by using a communication programme.

Personal Computer – the complete setup
Software Software is the set of instructions to make computer work in the way we like. Set of instructions is called Programmes. Software is a general term to describe all the forms of programs associated with computer.

Software is of two types:
System Software Application Software Set of programs (consists of number of instructions) supplied by manufacturer to make the computer work. This software coordinates the functioning of different parts of the computer. Operation Systems: These programmers are in-built into the computer resou processors, Memory and input/output devices. They, in fact act as an interface between the user's programmers and the computer like a supervisor controlling the performance of the computer.

Application Software Application programmes are user-written programmes to perform certain specific jobs. They are unique in their construction and can be used only for identical jobs. Many such application programmes have been made commercially available as PACKAGES. They can be changed marginally to fit individual needs and to meet the system requirements. Some of the commonly used languages are C,C++, Java etc., History of Operating Systems An operating system (OS) is a software program that manages the hardware and software resources of a computer. The OS performs basic tasks, such as controlling and allocating memory, prioritizing the processing of instructions, controlling input and output devices, facilitating networking, and managing files. The first computers did not have operating systems. However, software tools for managing the system and simplifying the use of hardware appeared very quickly afterwards, and gradually expanded in scope. By the early 1960s, commercial computer vendors were supplying quite extensive tools for streamlining the development, scheduling, and execution of jobs on batch processing systems. Examples were produced by UNIVAC and Control Data Corporation, amongst others.

The growing complexity of embedded devices has a growing trend to use embedded operating systems on them. Unix, but typically more similar to Unix than Windows. • Personal computers: o IBM PC compatible - Microsoft Windows and smaller Unix-variants (like Linux and BSD) o Apple Macintosh - Mac OS X, Windows, Linux and BSD • Mainframes - A number of unique OS's, sometimes Linux and other Unix variants. • Embedded systems - a variety of dedicated OS's, and limited versions of Linux or other OS's

Microsoft Windows The Microsoft Windows family of operating systems originated as a graphical layer on top of the older MS-DOS environment for the IBM PC. Modern versions are based on the newer Windows NT core that first took shape in OS/2 and borrowed from OpenVMS. Windows runs on 32-bit and 64-bit Intel and AMD computers, although earlier versions also ran on the DEC Alpha, MIPS, and PowerPC architectures (some work was done to port it to the SPARC architecture). A history of personal computers A personal computer (PC) is usually a microcomputer whose price, size, and capabilities make it suitable for personal usage. The term was popularized by IBM marketing. Uses Personal computers are normally operated by one user at a time to perform such general purpose tasks as word processing, internet browsing, and other digital messaging, multimedia playback, video game play, computer programming, etc.

Configuration Exploded view of a modern personal computer: 1. Display 2. Motherboard 3. CPU (Microprocessor) 4. Primary storage (RAM) 5. Expansion cards 6. Power supply 7. Optical disc drive 8. Secondary storage (HD) 9. Keyboard 10. Mouse Personal computers can be categorized by size and portability: • Desktop computers • Laptop or notebooks • Personal digital assistants (PDAs) • Portable computers

Display A computer display (also known as a computer monitor, computer screen, or computer video display) is a device that can display signals generated by a computer as images on a screen. Motherboard The motherboard (or mainboard) is the primary circuit board for a personal microcomputer. Many other components connect directly or indirectly to the motherboard. Motherboards usually contain one or more CPUs, supporting circuitry and ICs for CPU operation, main memory, and facilities for initial setup of the computer immediately after being powered on (often called boot firmware or BIOS). Central processing unit The central processing unit, or CPU, is the part of the computer that executes software programs, including the operating system. A central processing unit (CPU), or sometimes simply processor, is the component in a digital computer that interprets instructions and processes data contained in computer programs.

Primary storage Primary storage, or internal memory, is computer memory that is accessible to the central processing unit of a computer without the use of computer's input/output channels. Primary storage is used to store data that is likely to be in active use. Disk operating system Disk Operating System (specifically) and disk operating system (generically), most often abbreviated as DOS (not to be confused with the DOS family of disk operating systems for the IBM PC compatible platform), refer to operating system software used in most computers that provides the abstraction and management of secondary storage devices and the information on them (e.g., file systems for organizing files of all sorts). Such software is referred to as a disk operating system when the storage devices it manages are made of rotating platters (such as hard disks or floppy disks). In the early days of micro computing, memory space was often limited, so the disk operating system was an extension of the operating system. This component was only loaded if it was needed. Otherwise, disk-access would be limited to low-level operations such as reading and writing disks at the sector-level.

History of DOS In the early days of computers, there were no disk drives; delay lines, punched cards, paper tape, magnetic tape, magnetic drums, were used instead. And in the early days of microcomputers, paper tape or audio cassette tape (see Kansas City standard) or nothing were used instead. In the latter case, program and data entry was done at front panel switches directly into memory or through a computer terminal / keyboard, sometimes controlled by a ROM BASIC interpreter; when power was turned off after running the program, the information so entered vanished. Examples of disk operating systems that were extensions to the OS The DOS operating system for the Apple Computer's Apple II family of computers. This was the primary operating system for this family from 1979 with the introduction of the floppy disk drive until 1983 with the introduction of ProDOS; Commodore DOS, which was used by 8-bit Commodore computers. Unlike most other OS systems, it was integrated into the disk drives, not loaded into the computer's own memory.

Disk Directory To see a listing of what is on a disk, issue the Directory command. It comes with several options (shown are the most useful, not all). DIR d: file name. Ext /p /w DIR alone will show the complete directory. With the optional filename, DIR will try to find just that file. • The /p option causes a pause when the screen fills. • The /w option yields a full 80-column display of just the filenames. There are other options for sorting the listing and displaying the contents of lower-level directories. Now we'll see what would happen when you type DIR at the prompt. Three Simple Commands CLS Clears the screen and puts the cursor in the home (upper left) position. VER Shows the DOS version number on the video display. You are shown the one-digit version and two-digit revision: MS-DOS Version 6.00 VOL d: Displays a volume label, if one exists. The label is a name you have given to the disk when it was formatted. It is used for identification purposes. (The serial number is put on the disk by the FORMAT utility.) Volume in drive C is HANDBOOK Volume Serial Number is 2C35-16F9

Date and Time These two commands show and/or set the system date and time. Early computers relied on you to set the DOS clock during the boot process. In short order peripheral makers came out with clock cards that, with the help of a battery, kept a clock going and, with the help of a program in AUTOEXEC.BAT, loaded the time into DOS for you during boot. New computers have the clock built-in and do not require a program to load the time. DATE <date> On early computers the time setting required a 24-hour clock, i.e., any time after noon had to have 12 added to it, for example 3:00 pm had to be entered as 15:00. TIME <time> On most computers these commands will change the permanent clock settings as well as changing the date/time in DOS. FORMAT d: /s /u where • d: defines the disk that will be formatted • /s puts the DOS system on disk to make it bootable • /u specifies an unconditional format (can't unformat the disk)

Typing a File Any text file saved in ASCII character format can be easily seen on your video display. Use the type command: TYPE d: FILENAME. Ext All characters in the file will be displayed on the screen, including any control characters, sometimes resulting in interesting displays. Subdirectory Introduction As the name implies, a pathname is nothing more than a "path" that directs DOS to your particular file. A test -- What is the pathname from the root to the subdirectories listed below? • Subdirectory LETTERS • Subdirectory BOOK • Subdirectory WORDPROC Answers... • \WORDPROC\LETTERS • \WORDPROC\BOOK • \WORDPROC

Make and Remove Subdirectories
If you are going to have subdirectories, there must be a way to make them. The syntax for the make directory command is: MD d:pathname\DIRNAME Tree All directory paths and their relationships are called a tree. If you don't remember the various subdirectories (and optionally the files in them) DOS offers you a chance to see them with the TREE command: TREE d:/f This command lists all paths from the root on the disk. If you use the /f option, you will also see all files in each subdirectory. (Only the filenames are shown, not their size or creation date/time.) For a permanent record, press Control-PrtScr before issuing the TREE command and again after. Your printer will record all text scrolling past on the screen. (Or redirect to a file with TREE d:/f > Filename.) [Note: TREE has been removed under Windows

Subdirectory Review Assume the shown subdirectory structure... The following series of commands perform the indicated functions. Study them and make certain you understand them. From the root: • MD \WORDPROC\LETTERS\HOME Makes a new directory called HOME in LETTERS. • RD \WORDPROC\BOOK Removes BOOK from WORDPROC. • CD \WORDPROC\MEMOS Makes MEMOS the active directory. To move from the root to the subdirectory MEMOS type: • CD \WORDPROC\MEMOS Remember, to make any directory the current directory, simply issue the CD command using the pathname that you would use to access any file in that subdirectory. CD \ alone will move you back to the root from anywhere. From the root, the following command removes the subdirectory LETTERS: • RD \WORDPROC\LETTERS Remember, before you can remove a subdirectory, it must be empty (all files deleted and other subdirectories removed), you cannot be in it, and you cannot remove the root directory. In DOS 6.0 you can do both with the single command DELTREE.

A final reminder: Use subdirectories as needed, but don't overdo it. Pathnames are limited to 63 characters; and, you can get lost in the directory structure if you create a very complex one. PROMPT $P$G will help you keep track. BATCH FILES A batch file is nothing more than a collection of DOS commands placed into an ASCII text file. When DOS executes a batch file, each line in the file is treated as a DOS command and is executed as if you had typed the command at the system prompt. In addition to the normal DOS commands, batch files have their own subcommand structure. Following are the subcommands in the order we will discuss them: • ECHO: Turns command display on/off or may display a message. • REM: Displays a message on the screen. • PAUSE: Temporarily stops the batch file execution. • GOTO: Jumps to a labeled set of commands in the batch file. • IF: Permits conditional operation of any command. • SHIFT: Reassigns the relationship of parameters to markers. • FOR..IN..DO: Allows iteration subject to defined conditions. • CALL: Runs another batch file then returns to first. Turns display off for single command

Directories In order to properly support the newer IBM PC XT computer, which featured a 10 MB hard disk, MS-DOS 2.0 was released around the same time, at the beginning of 1983, and introduced hierarchical directories. Apart from allowing for better organization of files, directories allowed it to Store many more files on the hard disk, as the maximum number of files was no longer constrained by the (still fixed) root directory size. This number could now be equal to the number of clusters (or even greater, given that zero-sized files do not use any clusters on FAT). The format of the FAT itself did not change. The 10 MB hard disk on the PC XT had 4 KB clusters. If a 20 MB hard disk was later installed, and formatted with MS-DOS 2.0, the resultant cluster size would be 8 KB, the boundary at 15.9 MB.

UNIT II Introduction to Office Automation OFFICE AUTOMATION
OFFICE AUTOMATION Introduction to Office Automation Microsoft Office is a proprietary commercial office suite of inter-related application. Office contains Microsoft Word, Microsoft Excel, and Microsoft PowerPoint and other applications. Microsoft Office 2010 displays commands in a series of icons stored on different tabs. This combination of icons and tabs is known as the Ribbon interface. Quite some time back, typewrites were very popular in offices, organizations and factories. They were used for preparing documents like letters, reports, memos, etc.Advantages of using computers are many. Many typing related activities, which can be performed through computers, cannot be performed through typewriter.

Introduction to word Interface elements
A word processor is a application software used for the production, composition, Editing, formatting, and printing of different types of documents. There are many software packages to do the job of word processing. Some of the popular Word-Processing software’s are Microsoft Word, Microsoft Works, and Lotus Word Pro etc. Microsoft Word is a word processing program from Microsoft Corporation which can be used to prepare many types of documents. The following symbol is the identification of MS-Word icon Interface elements 1. Window manipulation buttons Used to minimize, maximize or close a window 2. Title Bar Includes a document name, extension (.docx) and a program name 3. Tabs are as follow

4. Ribbon Ribbon is collection of options or commands. Certain commands are hidden. The arrow in their lower right corner is indicative of hidden elements. When clicked, additional options are displayed Tools that cannot be applied to a selected object are greyed out Tools displayed with three dots, if pressed, lead to another sequence of commands tabs and toolbars form the Ribbon

Insertion point A position in the document where the cursor is flashing Horizontal and vertical navigation bars (sliders) Double-arrow jumps up / down one page (to the next - previous page) Status Bar Displays information about the current insertion point position in a document as well as the condition of some special Microsoft Word functions Rulers Include a horizontal and a vertical ruler located above and to the left of the interface. The white area indicates the area of writing; the grey area represents the margins.

SELECT TEXT Arbitrary text selection: Press and hold down the left mouse button, move the mouse from the beginning to the end of the text that you want to select and then release the left mouse button Place the insertion point at the beginning of a text that you want to select, press and hold down the Shift key and then press the left mouse button at the end of the desired selection. Afterwards, release all buttons. Select a word: Double click the left mouse button anywhere in a word Select one sentence: Hold down the Ctrl key and press the left mouse button anywhere in a sentence.

Select a single line: Press the left mouse button in the left margin space of the line (the cursor will change to a right-pointing white arrow). Select multiple lines: Press and hold down the left mouse button in the left margin of the row, move up or down the rows you want to select and release the mouse button Select non-neighboring lines: In the left margin space, press the Ctrl button + the left mouse button onto the desired lines. Select a paragraph: Double click the left mouse button in the left margin space or triple click the left mouse button anywhere in a paragraph Select the whole document: Triple click the left mouse button in the left margin of a document or use the keyboard shortcut Ctrl + A.

Cut / Paste: 1. Select text that you want to cut 2. Cut the selected text by using the Cut tool (keyboard shortcut: Ctrl + X) 3. Position the cursor to the place where you want to move the text 4. Paste the text by using the Paste tool (keyboard shortcut: Ctrl + V) Format Painter tool It is used to copy formatting from one part of the text to another. You can use the Format Painter on the Home tab to apply text formatting and some basic graphics formatting, such as borders and fills. 1. Select the text or graphic that has the formatting that you want to copy. 2. On the Home tab, in the Clipboard group, click Format Painter. 3. Select the text or graphic that you want to format. 4. To stop formatting, press ESC.

The File menu allows you the following actions:
Create a new document: New > Blank document > Create (keyboard shortcut: Ctrl + N) Click New Double-click Blank document. Open an existing document: By using the Open command (keyboard shortcut: Ctrl + O) Open more than one document: By using the Ctrl key (for adjacent files) or the Shift key (for non-adjacent files) AutoCorrect AutoCorrect in Word is a feature that is used to correct typing and misspellings and also to substitute the characters you type for symbols.

AutoCorrect Options Click the File tabOptions Proofing, and then click the AutoCorrect Options button near the top of the window. The AutoCorrect window has many tabs, but when it opens, it will display the AutoCorrect tab. The options at the top are basically a list of yes/no questions in the form of checkboxes, described as follows: Print a document: Ø Printer – choose which printer will be used for printing Page range: All Current page Pages – enter page numbers that you wish to print Copies – number of printed copies Collated – prints the entire file from beginning to the end and then a selected number of copies is done; Uncollated – prints the first page according to aselected number of copies, then the second one and so on until the last page. Orientation: Portrait (vertical paper) and Landscape (horizontal paper)

Font effects Strikethrough: some text ; Subscript: H20 > H2O; Superscript: 5m2 > 5 m2; To access additional commands, press the grey arrow in the lower right corner of the Font tab (keyboard shortcut: Ctrl + D). The additional font effects are: Double, Strikethrough, Shadow, Outline, Emboss, Engrave, Small caps, All caps, Hidden. To turn uppercase into lowercase or the other way around click the Change case icon. Text alignment tool offers following alignments Left (keyboard shortcut: Ctrl +L) Center (keyboard shortcut: Ctrl + E) Right (keyboard shortcut: Ctrl + R) Justify (keyboard shortcut: Ctrl + J)

Line Spacing tool Defines the distance between lines 1. Select the paragraphs for which you want to change the line spacing. 2. On the Home tab, in the Paragraph group, click Line Spacing. 3. Click the number of line spaces that you want. 4. Click Line Spacing Options, and then select the options that you want under Spacing.

LINE SPACING OPTIONS Single This option accommodates the largest font in that line, plus a small amount amount of extra space varies depending on the font that is used. lines This option is one-and-one-half times that of single line spacing. Double This option is twice that of single line spacing. At least This option sets the minimum line spacing that is needed to fit the largest font or graphic on the line. Exactly This option sets fixed line spacing, expressed in points. For example, if that font, you can specify 12 points as the line spacing. Multiple This option sets line spacing that can be expressed in numbers greater than 1. For example, setting line spacing to 1.15 will increase the space by 15 percent, and setting line spacing to 3 increases the space by 300 percent (triple spacing).

MAIL MERGE MS word it provides a facility called Mail Merge. Names and addressed of all the friends to whom invitation letters have to be sent and other containing letter with name and address left blank. After creation of these files, they are merged together so that one letter is created for each individual. TERMS AND TERMINOLOGY OF MAIL MERGE Main Document Format of the letter which is to be sent to each individual is called main document. Main document basically consists of two items, one is the text that will appear in the letter and other are the variables. Data Source Data source is basically a combination of two items, Header row and Data. Header Row Those items related to which the data exists in the data file constitute header row. If the data in the data file relates to name address and telephone numbers of the person then these three items put together will constitute header row.

Data Data consists of those values, which are to be included in the letters. Each row will contain values for each individual items of the header row. CREATING THE MAIN DOCUMENT Select Tools option from the bar menu. Select Mail Merge option from Tools submenu. On selecting this option Mail Merge Helper screen. Click the mouse on Create button. When you do so a drop down list. Select Fom Letter option from lthis list. If you wish to create the document in current window, click the mouse on Active Window button else click it on new main Document button. Creating Header Row You know that header row consists of field names. Field names currently present in header row are shown in Field names, in header row list box. To add a new field in header row, enter the name in Field name text box and click the mouse on Add Field Name button To change the sequence of the fields in the header row, make use of arrow button.

MERRGE DATA SOURCE WITH MAIN DOCUMENT
Make sure that main document file is there on the screen. Select Tools option from the bar menu. When you do so, Tools submenu will appear on the screen. Select Mail Merge option from Tools submenu. When you do so, Mail Merge helper screen as shown will appear on the screen. Click the mouse on merge button present in that screen. Using different objects of this dialog box specify printing related details. At least click the mouse on Merge button present in the dialog box. When you do so, letters for all the persons will get generated on the screen. Mailings Tab A Circular letter is a letter of the same content sent to multiple recipients; personal data is entered from an address book into fields thus personalizing the letters; Create a circular letter: Start Mail Merge > start Step by Step Mail Merge Wizard

Select a document type for your mail merge
Letter – a text that differs only by inserted fields message – the same as the letter Envelopes - print of names and addresses of recipients Labels Directory – the whole document presents a list of catalogues or a list of addresses 2) Select a starting document Use current document - a document that is in use Start from a template – select a template Use an existing document – then navigate to and open an existing document 3) Select Recipient Use an existing list – uses names and addresses from a file or a database Select from Outlook contacts Click Type a new list – then create a new contact list 4) Arrange your directory – to add recipient information click on a location in the document and choose one of the items: Address block, Greetings etc. 5) Preview your directory – you can also edit recipients list 6) Complete the merge

Introduction to Worksheet
Excel is a spreadsheet program that allows you to store, organize, and analyze information. In this lesson, you will learn your way around the Excel 2010 environment, including the new backstage view, which replaces the Microsoft Button menu from Excel 2007. We will show you how to use and modify the Ribbon and the Quick Access Toolbar, and how to create new workbooks and open existing ones. After this lesson, you will be ready to get started on your first workbook. The Excel 2010 interface is very similar to Excel There have been some changes that we will review later in this lesson, but if you are new to Excel, first take some time to learn how to navigate an Excel workbook. The Ribbon and the Quick Access Toolbar are where you will find the commands you need to do common tasks in Excel. If you are familiar with Excel 2007, you will find that the main difference in the Excel 2010 Ribbon is that commands such as Open and Print are now housed in backstage view.

The Ribbon The Ribbon contains multiple tabs, each with several groups of commands. Certain programs, such as Adobe Acrobat Reader, may install additional tabs to the ribbon. These tabs are called Add-ins.

Interface Elements 1. Buttons window manipulation - minimize, maximize, close window 2. Title Bar - contains documents name, extension (.xlsx) and the program name 3. Tabs File Home Insert Page layout Formulas Data Review View Selected cells – before we can enter text, number or other data we must first select cell or cells. Click the mouse on the cell to select it. Column titles (letters) Row titles (numbers) Sheets – Sheets are named as Sheet1, Sheet2, Sheet 3 by default. Bars for horizontal and vertical navigation (sliders) Status bar - displays information about some special functions of Microsoft Excel

Spread sheet: File in MS Excel, consisting of worksheets (3 by default)
Worksheet: consists of a large number of columns and rows that form a table Cell - the basic element in Excel, data entry (text, number, formula) Cell address: the column letter and row number, e.g. A1, C7, F25 Selecting cells - press left mouse button on the cell in order to select it The Worksheet Microsoft Excel 2010 consists of worksheets (Default Names are "Sheet1", "Sheet2" and "Sheet3"). Each worksheet contains columns and rows. The columns are lettered A to Z and then continuing with AA, AB, AC to AZ and then continuing with AAA, AAB and so on up to XFD (total columns are 16384); the rows are numbered 1 to 1,048,576. The combination of a column coordinate and a row coordinate defines a cell address. For example, the cell located in the upper-left corner of the worksheet is cell A1, meaning column A, row 1. Cell C7 is located under column C on row 7. We enter our data into the cells on the worksheet.

Data Entry in Excel Enter Data in a Cell. Select the cell in which you want to enter the data. And then Type some data and press Enter. Sometimes we need to add content to cell - double-click on the cell and enter any Rename a worksheet While we are positioned in the worksheet we want to rename: press Format button on the Home ribbon, choose Rename Sheet option, enter new name and press Enter key, or Press the right mouse button on the tab of the worksheet and from quick menu choose rename option Copying and moving worksheets Copying and moving worksheets within or between spreadsheets (spreadsheets must be open): 1. Press right mouse button on the worksheets sheet tab and choose Move or Copy sheet option 2. Within the dialog box that appears, choose the workbook you want to move the sheet to, and before which sheet that sheet will be placed. If you want to copy sheet, mark the checkbox next to Create a Copy option, otherwise the worksheet will be moved.

Note: Move or copy sheets between open workbooks by dragging their sheet tabs from one workbook window to another (hold down the Ctrl key as you drag a sheet tab to create a copy). Use the Arrange All command on the View tab to display all workbooks onscreen. Alignment: -

Horizontal alignment: - top, middle or the bottom of the cell
Vertical alignment -Align Left, Center, Align Right, Justify Merge and center – tool to merge selected cell range and center the content Orientation –Tool for setting the direction of the content in cell. Wrap Text – Warps text within cells width in order to make it visible. Number Format Set number format in which numbers will be displayed. Increase / decrease number of decimal places

Styles Conditional Formatting – Tool for setting the condition, and setting the format if a cell meets the condition Cells

Insert – tool for inserting cells, columns, rows, worksheets
Delete – tool for deleting cell content and/or cell formatting; deleting columns, rows, worksheets Format – tool for formatting selected cells, columns, rows, worksheets Protect sheet – enter password and protect whole or a part of a sheet (cell range) Rename Sheet - enter name and press the Enter key Lock cell – functional only if we protect the worksheet first Formulas Tab

1. Formula uses numerical data found in chosen cell range (the value entered in cell range)
2. Enter the formula: 3. Select the cell where you want to enter a formula 4. Enter the sign „=“ 5. Enter numeric values or cell addresses and arithmetic operator 6. Press the Enter key to complete Any excel function can be inserted through this tab using the Insert Function of the Function Library. Basic arithmetic operators: Addition = A1 + A2 Multiplication = A3 * C5 Division = C5/C3 Exponentiation = F15^ A2

Calculation order • Microsoft Excel follows the mathematical order of calculation operations. • Formulas can be seen in the formula bar when cell that contains formula is selected or if we position cursor with double click in the cell that contains formula (this way formula will be visible in cell to, and can be edited in a cell to). Cell that contains formula and cursor is not positioned in that particular cell, will display formula result. Addition = A1 + A2 Multiplication = A3 * C5 Division = C5/C3 Exponentiation = F15^ A2 Calculation order • Formulas can be seen in the formula bar when cell that contains formula is selected or if we position cursor with double click in the cell that contains formula (this way formula will be visible in cell to, and can be edited in a cell to). Cell that contains formula and cursor is not positioned in that particular cell, will display formula result.

Calculation order • Microsoft Excel follows the mathematical order of calculation operations. • Formulas can be seen in the formula bar when cell that contains formula is selected or if we position cursor with double click in the cell that contains formula (this way formula will be visible in cell to, and can be edited in a cell to). Cell that contains formula and cursor is not positioned in that particular cell, will display formula result.

Formula referencing in Excel
Relative cell referencing When formula is copied with AutoFill and formula have relative cell references, cell references are going to adapt, for example: If we use auto fill to copy following formula: =C5+B5 formula will change to: =C6+B6, =C7+B7 etc. Absolute cell referencing If, in a formula, cell is referenced absolutely then applying auto fill tool will result in: =$C$5+B5, =$C$5+B6, =$C$5+B7 etc. You can change selected cell reference from relative to absolute and vice versa using F4 key Logical function if = logical function that compares the values in cells with some expression or value. Depending on the result we define the appropriate action greater than > greater than or equal >= less than < less than or equal <= equal =

Chart It is the graphical display of table data in various forms like column, pie and other graph formats. Tabular data and graph are connected - therefore changes in the table are reflected in the chart. Select the data click the Insert menu and choose the chart type that you wish to draw. The data in your Excel sheet will be organized as a chart. Chart And Graphs Types In Excel 2010 The chart or graph type will depend on the data for which you are going to plot the chart. The most commonly used types include Column Chart, Line Graphs, Pie Chart, Bar Graph, Area Chart, Scatter Graphs, Stock Chart, and Surface Chart, among many others.

Changes in the chart can be done via the Chart Tools toolbar that appears when the chart is selected; via quick menu or by double-click with left mouse button on the Format Chart Area – effects like color fill, 3D, rotation, shadow etc. are accessible Change Chart Type – choose chart type Move the chart: within the Chart Tools toolbar, select Design and choose tool Move chart: New sheet (and there is a field to enter worksheet name), or Object in > on drop-down menu choose a worksheet in which you want to place a chart Insert Chart Axis title Select the chart and navigate to Chart Tool layout tab, under Labels group, from Axis Title options, select desired Axis Title Position. Conditional Formatting Conditional formatting in Excel allows you to highlight cells whose data satisfies certain criteria. Excel enables you to apply formatting to cells that meet certain criteria that you specify. To apply conditional formatting in Excel 2010, select the cells you want to analyses and then click Home > Styles > Conditional Formatting. The following box appears

Highlight Cells Rules

Print Titles: The Print Titles command allows to select specific rows and columns to appear on Each page. 1. Click the Page Layout tab. 2. Select the Print Titles command. 3. The Page Setup dialog box appears. Click the icon at the end of the Rows to repeat at top field. 4. Mouse becomes the small selection arrow. Click on the rows you want to appear on each printed page. The Rows to repeat at top dialog box will record the selection. 5. Click the icon at the end of the Rows to repeat at top field 6. Repeat for Columns to repeat at left, if necessary. 7. Click OK. You can go to Print Preview to see how each page will look when printed.

Insert a Break: 1. Click the Page Layout tab. 2. Determine the placement of the break by clicking on the row below, cell below, or column to the right of where you want the break to appear. For example, Filters Activating the Basic Excel Filter In order to activate the basic Excel filter, select the Data tab at the top of your spreadsheet, and from this, select the option Filter. You should now have the drop-down menus on each of your header cells, which can be used to select the rows to be displayed. (Select All) - show all rows $x,xxx - Display if cell equals the specific value (Blanks) - Display all blank cells The user can untick the values in rows that are not to be displayed

PowerPoint What is PowerPoint?
PowerPoint is a tool you can use to communicate your ideas effectively through visual aids that look professionally designed yet are easy to make. With PowerPoint, you can create slides for your presentation in the output you require: blank and white overheads, color overheads, 35mm slides or on-screen electronic slide shows. In addition, you can prepare speaker’s notes, print an outline and print audience handouts. All these components in one file make up a PowerPoint Presentation. Starting PowerPoint To launch PowerPoint, Click the Start Button on the Windows Taskbar, select Programs and then click on Microsoft PowerPoint. You might also find the PowerPoint icon on your MS Office Toolbar. The Power Point startup as shown below. To begin working with PowerPoint, you will need either to open an existing presentation or create a new presentation using one of available options.

They are · Blank Presentation · From Design template · From Auto Content Wizard · From Existing Presentation Photo album.

Creating a New presentation
Whether your presentation will be in the form of an electronic slide show, 35mm slides, overhead or just paper print-outs, the process of creating a PowerPoint Presentation is basically the same. You can start with a template, a design template or a blank presentation. To get to these three basics form, there are three options. Blank Presentation The blank Presentation template is a design template that uses the default formatting and design. It is useful if you want to decide on another design template after working on the presentation content or if you want to create your own custom formatting and design form scratch. To create a new presentation based on the presentation template, select Blank Presentation from the PowerPoint startup dialog box and click OK. With PowerPoint already running, you can (1) select New from the File menu, click the General tab on the New Presentation dialog box, click the Blank Presentation icon and click OK or (2) click the New button on the standard toolbar. The New Slide dialog box appears.

Auto content Wizard The Auto content wizard is a series of dialog boxes that gets you started with creating a new presentation using a template. You’ll start by answering questions about your presentation and end up with the readymade slides. To activate this on-line guide from the PowerPoint is already running, select New from the File menu. On the New presentation dialog box, click the presentation tab , click the icon for Auto content Wizard and click OK. To bypass the Wizard, click instead the icon for the template you want and you’ll get the slides directly.

Design Template This is advised for first-time and new PowerPoint users. After a few presentations on your own, you more than likely will always choose this option so as to have complete control over your presentation. A design template is a presentation that does not contain any slides but includes formatting and design. It is useful for giving your presentations a professional and consistent appearance. You can start to make a presentation by selecting a design template or you can apply a design template to an existing presentation without changing its contents.

Once you have chosen the ‘template’ option, you have 5 more options in New Presentation dialog box.
General: Gives one the option to begin with a blank template Presentation Designs: Gives PowerPoint templates from which to work, Presentations: A Presentation template is a presentation that contains slides with a suggested outline, as well as formatting and design. It is useful if you need assistance with content and organization for certain categories of presentations such as: Training: Selling a product, Service, or an idea: Communicating Bad News. When you make a new presentation using a template, you’ll get a set of ready-made slides. You replace what’s on the slides with your ideas, and insert additional slides as necessary. Web pages: Allows one to add web presentations and documents from your local or network computers, Office 2003 Templates: Contains your favorite PowerPoint templates from Office 95, 97 and 2000. It is hoped that by the end of our class (or the end of this document), you will feel most comfortable choosing the second option, “Presentation Designs” and getting down to business.

Creating Slides When you create a new presentation using a template (including the Blank Presentation template), you start with first and then continue to build the presentation by inserting new slides.

Inserting New Slides To add a new slide after the current slide in Slide View: · Choose New Slide from the Insert menu, or · Click the Insert New Slide button on the Standard toolbar This brings up the New Slide dialog box.

On the New Slide dialog box PowerPoint gives you a set of available slide layouts, called Auto layouts, to choose from. An Auto Layout contains placeholders for titles, Text and objects such as clip art , graphs or tables that you may want to put on a slide. You are not limited only by this option. As you will see later in the handout, anything can be added to any slide. To create slide, click an Auto layout icon that matches the layout of the slide you want to make; the name of the selected Auto layout appears in the lower right side on the dialog box. Then click OK and the new slide appears on the screen. Adding Text to Slides You can insert text on slides by selecting an Auto Layout with text Place holders. Text placeholders are formatted for titles and bulleted lists. The text formatting, which includes the font, alignment and bullets, depends on the design template you selected. Using Text Placeholders To add text to a slide in Slide in Slide View, simply click on the text Place holders. The directions on the placeholder will disappears will Dis appears, leaving an empty text box with a flashing insertion point. Begin typing. Text automatically wraps as you reach the right border of the placeholder. When you’re done, click anywhere else on the slide. To edit text, move the mouse pointer over the text (note that it becomes an l-beam), click and edit.

Using the Text Tool You can use the Text Tool on the Drawing toolbar to add text outside of the text placeholders. In Slide View, click the Text Tool and move the mouse pointer to the point on the slide where you want to insert text. Click to make a label/Caption or drag to make a text box that will wrap the words. Then begin typing and, when you’re done, click anywhere else on the Slide. Adding slide Objects You can incorporate elements, such as graphics and even sound and video, into your slides in one of to ways. · Select an Auto Layout containing a placeholder for an object. Some placeholders are for specific object such as clip art, graphs, tables, organizational charts or media clips while other placeholders are for all type of objects. · Select the desired object (Clip Art, Picture, Move, Sound, Microsoft Graph, Microsoft Word Table, Object) from the insert menu. Click on Object. From insert menu brings up the Insert object dialog box which lists all the different types of objects that can be embedded in PowerPoint Slides.

Adding slide Objects You can incorporate elements, such as graphics and even sound and video, into your slides in one of to ways. · Select an Auto Layout containing a placeholder for an object. Some placeholders are for specific object such as clip art, graphs, tables, organizational charts or media clips while other placeholders are for all type of objects. · Select the desired object (Clip Art, Picture, Move, Sound, Microsoft Graph, Microsoft Word Table, Object) from the insert menu. Click on Object. From insert menu brings up the Insert object dialog box which lists all the different types of objects that can be embedded in PowerPoint Slides. Clip Art You can put graphic images from Microsoft ClipArt Gallery on your Slides. To add Clip Art to a slide: · Double-click on Clip Art placeholder. · Under the Insert menu, choose Picture, and then clip art. Click the Insert Clip Art button on the Standard toolbar.

Picture You can put scanned image or art created from other programs on your PowerPoint slide. Select Picture from the Insert menu, choose from Scanner and use the MS office photo editor after opening the file from your computer Slide View In Slide View, you can add graphics to your slides as well as type, edit and format text, PowerPoint displays the Formatting and Drawing toolbars in addition to the standard toolbar. The presentation appears on the screen one slide at a time. The left side of the status bar displays the page number of the current slide. To move to other slides, drag the elevator on the vertical scroll bar or click the previous slide or nest slide button below the scrollbar. Outline View Working in Outline View is a good way to organize and develop the content of you presentation. To insert text, click where you want to add text and type. Bullet and their editing is very easy in this view. Creating sub-level along with promotion and demotion text can be done here as well. You can also print a copy of you outline. In this view, you see only the title and body text of each slide. The drawing toolbar closes and the Outlining toolbar opens. This works much like the Microsoft World Outlining toolbar

Slide Sorter View In Slide Sorter View, you can efficiently perform tasks such as reordering slides and adding builds, transitions, and slide timings for electronic presentations. You cannot work on text and visual elements of individual slides in this view. PowerPoint displays miniature versions of each slide. In addition to the standard toolbar, PowerPoint displays the Slide Sorter toolbar. Notes page View In Notes Pages Views, you can create pages that you can print and use as a guide during your presentation. Each page contains an image of the corresponding slide and placeholder for your notes.

Slide Show View

You use Slide Show view to deliver you presentation as an on-screen electronic slide show or to look at each slide full-screen. Click the mouse button to advance to the next slide. If you’ve reached the last slide or press the Esc Key on the keyboard, you return to the previous view. Changing the Slide Layout In Slide View, you can change the arrangement of objects on a slide, move and resize placeholders or replace the current layout with a different Auto-Layout. Moving and resizing objects To move or resize an object, first click on the object to select it. Eight handles appear around the object. Click and drag a handle to change the size and / or shape of the object. Click and drag anywhere else on the object to move it. To resize an object by an exact scale while maintaining its proportions, select the object and then choose Scale from the Draw menu. Enter the scale on the Scale dialog box and click on OK. Moving and Resizing Placeholders To move or resize or placeholder, select the placeholder and click on its dashed border. You will get a fuzzy outline around the border with eight resize handles. Click and drag a resize handle to change the size and / or shape of the placeholder. Click and drag anywhere else on the fuzzy outline to move it.

Changing the Auto Layout
To restore a slide’s layout after you’ve made changes to it or to change the Auto Layout without deleting any text or object you’ve already put on it select Slide Layout from the Format menu or click Slide Layout button on the Status bar. Select the Auto Layout from the Slide Layout dialog box and click reapply. Making the Presentation You Need Slide Setup Unless you created the presentation using the Auto Content Wizard and specified otherwise, slides are by default up for an on-screen show. To change this, select Page Setup from the File menu. On the Slide Setup dialog box, select the output you want from the Slide Sized for drop down list. You can also change slide orientation from landscape to portrait, and the physical size of your printouts. Arranging the Template To change the prostration’s design template, select Apply Design from the Format menu or click the Apply Design Template button on the Standard Toolbar. In the Apply Design Template dialog box, select the design template and click Apply.

Black & White Slides To display the presentation in black and white, select Black and White from the View menu or click the B&W View button on the Standard Toolbar. In Slide view, you’ll see the current slide in black and white and a color slide miniature on a small Color View window. The B&W View button toggles between the black and white and color views. To hide the Color View window, select Slide Miniature from the View menu. Deleting a Slide To delete a slide in Slide View, select Delete Slide from the Edit menu. In Slider Sorter View, Select a slide and hit the delete key from your keyboard. Reordering Slides To move a slide, select the slide in Slide Sorter View and click the Cut button on the Standard toolbar. This copies the slide to the Clipboard. Then click on the position where you want to insert the slide (note the flashing insertion point) and click the Paste button. You can also change the order of your slides in Slide Sorter View by clicking on a slide and dragging it to the position where you want it to appear.

Delivering an On-Screen Show
To deliver your presentation as an on-screen electronic slide show, open the presentation in PowerPoint; select Slide Show from the View menu. By choosing Setup Show from the Slide Show menu you can choose which slides you want to show during the presentation. During the Presentation To move to the next slide, click the mouse button or press ‘N’ on the keyboard. To get a menu of available slide show commands, click the right mouse button or this icon that appears on the lower left side of the screen. · To go directly to a particular slide, select Go To, Slide Navigator from the menu. On the Slide Navigator dialog box, select the slide and click Go To. Slide Timings When delivering an electronic slide show, you have the option of manually advancing the slides or using slide timing. In Slide Sorter View, click the Rehearse Timing button on the slide sorter toolbar and rehearse the delivery of your presentation. The rehearsal window that stays on the screen during the slide show keeps track of the time elapsed since a slide appeared on screen.

Builds You create build slide if you want to show paragraphs on a bulleted list one at a time during a slide show. To build the body text of a selected slide, choose an option that appears when you select Present Animation from the Slide Show menu. If you select an option other than off, during a slide show the list will appear by first level paragraphs with every mouse click using the particular effect. For more options, use the drop down menu on the slide sorter toolbar labeled Text Preset Animation. On the Animation Settings dialog box, pick a build option, a visual and audio effect, and the text color after a build step. In Slide Sorter View, build icon appear below the slide miniature of a slide with build but you cannot preview it. For more options, do the following: · View your slide in slide view · Right click on your slide · Choose custom animation Saving Your Presentation To save your presentation, choose Save As from the File menu. In the File Save dialog box, type the name you wish to give your presentation in the File name edit box, select the folder where you want it saved from the Save in drop down list, and click Save.

Opening a Presentation
To begin working with PowerPoint by opening an existing presentation select Open an Existing Presentation from the PowerPoint startup dialog box and click OK. If PowerPoint is already running, choose Open from the File menu or click the Open button on the Standard Toolbar. From the File Open dialog box, select the folder where the files is located in the Look in drop down list, select the file from the Name box, and click open. Printing To print, choose Print from the File menu. In the Print dialog box, select from the PowerPoint drop down list the output your want (slides, handouts, notes pages or outline) and click OK. If you’re printing a color presentation on a black and white printer, click the Black & White check box to print Black and White View of the presentation. If your slides are sized differently from the paper you’re printing on (for example, 35mm or on-screen), click the Scale to Fit Paper check box to make the slide images fill the page

UNIT III DATABASE MANIPULATIONS THRO’S MS ACCESS Introduction
DATABASE MANIPULATIONS THRO’S MS ACCESS Introduction MS-Access is database management system. It has been designed and developed by Microsoft corporation of USA for performing data storage and retrived type of activities on computer.It stores data in the form of the tables and provides means for defining the selection criterion for retrieving the data and presenting it in the form of report. Introduction of Table Table is basically collection of rows, devided into one or more columns. Each row consists of complete information of a single identity and each column of the row represents an attribute related to which the information is maintained within the table.

Sl No Name Sex City Age Marks 101 Ravi M Delhi 17 855 102 Jyoti Hyderabad 18 846 103 Rahul Mumbai 19 835 750 Suman Luck now 20 780 Record Each row of the table is referred to as record. In other words, you can say that complete information of an individual identity that is being maintained within the table, is called record. Field Columns of the row are referred to as fields. In other words you can say that all those attributes, related to which information is to be is being maintained in the row are called field.

Concept of Primary Key The field that uniquely the record is called primary Key. It contains of 10 records and 6 fields. In this data, Roll Number field uniquely identified the record. It is not sure whether record of roll number 170 is to be fetched or record of roll number 750 is to be fetched because both of them have the same name. Data Types Refer previously illustrated table and note that Roll Number is a field which consists of numbers. Now the question is what all types of data can be accommodated in MS-Access. TABLE STRUCTURE Now you are familiar with characteristics of MS-Access tables and the field types that are allowed in MS-Access. Now the question is what is table structure? Table structure is the format of the record which clearly defines the names of the fields, type oof data that they will hold length and format of the data that will be contained in them. For performing data stroge and retrieved activities in MS-Access, you need to first decide the table.

Once table structure is finalized, table can be created data can be entered and retrieved as per requirements. Name of the field Field Type Width of the field No of place Roll Number Name Text Sex Text City Number Creating Table MS-Access provides many ways of creating a table structure. Some of them are as follows. 1. In Datasheet view 2. Using Table wizard 3. Using Design view Most versatile method is Using Design View method. Perform following steps to create a table in Design view:

1. Click the mouse on Start button, present on desktop
1. Click the mouse on Start button, present on desktop. When you do so, Start menu. 2. Select All program option from start submenu. 3. Select Microsoft Access option from this submenu, when you do so, a window with a dialog box. 4. Create a blank database, by selecting Blank Access database option and clicking the mouse on OK button 5. First select the drive and the folder, in which you wish to create the database and then enter the name that you wish to assign to this blank database in the File name text box. 6. At last click the mouse on Create button. Say you create a blank database with the name MYDB. 7. Select Create table in Design view option and click the mouse on Open option, present in database design toolbar. Refer Data Design view window and note that it consists of following three panes; (a) Field Entry pane (fir entering field details) (b) Field property pane (c) Help pane 8. Enter the field name in Field Name column. Say you enter roll in this column. A drop down list will automatically appear in Data Type column. 9. Now select the field type from the drop down list present in Data type column. 10. To set the properties for the current field click the mouse on General tab, present in field property pane and enter the details in the text box provided against property title. 11. Repeat the process for all the field of the table. 12. To save the table structure in a file, click the mouse on file option present in bar menu

Datasheet view or form view
Datasheets and forms not only look different. They have other usability differences too. Datasheet view allows cursor movements in all directions as in a spreadsheet. It also allows the user to select a rectangle of cells. The Visual Basic program can find out which cells the user has selected. Form view allows all the available display formats, including pictures retrieved from a database. (There cannot, however, be continuous forms inside another continuous form. Continuous forms can only be used in one level.) Current record. A sub form can show many records at the same time, but only one of them is the current record. It is marked with the little arrow to the left, the record selector, as shown on Figure 3.2H. (You may change the form settings so that the record selector area is invisible.)

Primary keys These are used to sort the records to allow fast access. Access Encourages you choose one field as the primary key field, and then sorts the records on this field. However, only one record with the same value is allowed in the primary key field, for example if you choose surname for the primary key, you can only have one Smith, Jones etc. For this reason, you should always choose a numeric or a counter field for the primary key: do not use surname as the primary key field. Creating a Database Structure Starting MS-Access Switch on your computer and Then click Start Programs Microsoft (MS) Access You will get the following screen.

Creating a Database Structure
Starting MS-Access Switch on your computer and Then click Start Programs Microsoft (MS) Access You will get the following screen. Set or Change the primary key Open Employee database and then open Staff table. Move to last record and then press down arrow key. You will get a blank record. Now you can enter a new record as shown below: Kamal Yes $2000 5 Now save the file by clicking File menu and then Save option.

Click Design View and then click OK button. This screen will appear
Click Staff, then click Add button to base the query on the Staff table. Click on Close in the Add Table box. The fields of the Staff table are displayed. Click on Surname, hold the mouse button down and drag the field into the field box like in this screen

Repeat for DOB and phone fields, dragging them into thenSecond and third columns. When you have finished, click File, Close and click yes to save changes to query. Name your query as Name Query as shown below and then click OK button. Your query is now saved. Look at the query list box and Scroll down until you see the Name Query. Click on Name Query to select it, then click the Open button. This screen will appear.

Create a Query Microsoft Access can often create a query for you so you don't have to Design one from scratch. To create a query to use as the basis of a form or report, try the form or report wizards. They create the form or report, and if it's based on more than one table, they also creates underlying SQL statement. If you want, you can save the SQL statement as a query. To easily rate queries that you want to run independently or base multiple forms and reports on, try one of the query wizards. Query wizards do all the basic work for you after you provide answers to a series of questions. Even if You’ve created many queries, you may want to use wizard to quickly design the query. Then you can switch to Design view to customize it. To create queries from filters you created using Filter by Form, Filter by Selection, or Filter for Input, save the filter as a query. If none of these methods satisfies your needs, you can create the query from scratch in query Design view.

Create a form You can create a form on your own or you can have Microsoft Access create your form for you using a Form Wizard. A Form Wizard speeds up the process of creating a form because it does all the basic work for you. When you use a Form Wizard, Microsoft Access prompts you for information and creates a form based on your answers. Even if you've created many forms, you may want to use a Form Wizard to quickly lay out all the controls on your form. Then you can switch to Design view to customize your form. If you just want to create a simple single-column form, you can use the New Object button. Create a form using Auto Form Auto Form creates a form that displays all fields and records in the selected table or query. Each field appears on a separate line with a label to its left. In the Database window, click the Tables or Queries tab. Click the table or query you want to base the form on, or open the table or query in any view. Click the arrow next to the New Object button on the Toolbar, and then click Auto Form.

Create a form with a wizard
1. In the Database window, click the Forms tab. 2. Click New. 3. In the New Form dialog box, click the wizard that you want to Use. A description of the wizard appears in the left side of the Dialog box. 4. Click the name of the table or query that includes the data you want to base your form on. 5. You can specify the record source for the form in the wizard.

6. Click OK. 7. If you clicked Form Wizard, Chart Wizard, or PivotTable Wizard, follow the directions in the wizard dialog boxes. If you clicked Auto Form: Columnar, Auto Form: Tabular, or Auto Form: Datasheet, Microsoft Access automatically creates your form. Create a form based on more than one table Using a Form Wizard is the simplest and fastest way to create a form That brings data together from more than one table. A Form Wizard Speeds up the process of creating a form because it does all the basic n etWork for you. In the first screen of a Form Wizard, you can pick then Fields you want to include in your form. These fields can be from one Table or from multiple tables. When you use a Form Wizard to create a Multiple-table form, Microsoft Access creates an SQL statement behind the form. The SQL statement includes the information about which tables and fields to use. You can use a Form Wizard to create a form that displays data from Multiple tables as a "flat form" or as a "hierarchical form." of this type A hierarchical form is a form with one or more sub forms. Sub forms are useful if you want to show data from tables that have a one-to-many relationship.

Create a report You can create a report on your own or you can have Microsoft Access create a report for you using a Report Wizard. A Report Wizard speeds up the process of creating a report because it does all the basic work for you. When you use a Report Wizard, it prompts you for information and creates a report based on your answers. Even if you've created many reports, you may want to use a Report Wizard to quickly lay out your report. Then you can switch to Design view to customize it. Create a report using Auto Report Auto Report creates a report that displays all fields and records in the Underlying table or query. In the Database window, click the Reports tab. Click New. In the New Report dialog box, click one of the following Wizards: Auto Report: Columnar. Each field appears on a separate line with a Label to its left. Auto Report: Tabular. The fields in each record appear on one line, and the labels print once at the top of each page. Click the table or query that contains the data you want to Base your report on. Click OK

Create a report with a wizard
1. In the Database window, click the Reports tab. 2. Click New. 3. In the New Report dialog box, click the wizard that you want to use. A description of the wizard appears in the left side of the dialog box. 4. Click the table or query that contains the data you want to base your report on. 5. Click OK. 6. If you clicked Report Wizard, Chart Wizard, or Label Wizard in step 3, follow the directions in the wizard dialog boxes. If you click Auto Report: Tabular or Auto Report: Columnar, Microsoft Access automatically creates your report. Note: Microsoft Access uses this table or query as the default record Source for the report. However, you can change the record source in The wizard and select fields from other tables and queries.

Previewing and Printing Access Objects
Because Access is a Windows application, it interacts with your printer through standard Windows dialog boxes and drivers. This means that any printer that you can use from other programs can be used from Access, and any special features of that printer, such as color printing or duplex printing, are available in Access. As you have seen in this chapter, you can use different Access objects—tables, forms, reports, and so on—to display the information stored in your database. Within each object there are several views available: Design view, Datasheet view, and so on. You can choose the view you want by selecting it from the View group on the Home tab (the views available will depend on the object that is active) or by clicking the buttons on the View toolbar at the right end of the status bar at the bottom of the window.

HTML HTML- OVERVIEW UNIT IV
HTML HTML- OVERVIEW HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages. Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the link available on a webpage is called Hypertext. As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark-up" a text document with tags that tell a Web browser how to structure it to display. Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers. Now, HTML is being widely used to format web pages with the help of different tags available in HTML language.

Basic HTML Documents In its simplest form, following is an example of an HTML document: <!DOCTYPE html> <html> <head> <title>This is document title</title> </head> <body> <h1>This is a heading</h1> <p>Document content goes here.....</p> </body> </html> Either you can use Try it option available at the top right corner of the code box to check the result of this HTML code, or let's save it in an HTML file test.htm using your favorite text editor. Finally open it using a web browser like Internet Explorer or Google Chrome, or Firefox etc. It must show the following

Above example of HTML document uses the following tags:
HTML Tags As told earlier, HTML is a markup language and makes use of various tags to format the content. These tags are enclosed within angle braces <Tag Name>. Except few tags, most of the tags have their corresponding closing tags. For example, <html>has its closing tag</html> and <body> tag has its closingand <body> tag has its closing tag </body> tag etc. Above example of HTML document uses the following tags: Tag <!DOCTYPE...> Description This tag defines the document type and HTML version <html> This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>...</head> and document body which is represented by <body>...</body> tags. <head> This tag represents the document's header which can keep other HTML tags like <title>, <link> etc. <title> The <title> tag is used inside the <head> tag to mention the document title.

HTML Document Structure
<body> This tag represents the document's body which keeps other HTML tags like <h1>, <div>, <p> etc. <h1> This tag represents the heading. <p> This tag represents a paragraph To learn HTML, you will need to study various tags and understand how they behave, while formatting a textual document. Learning HTML is simple as users have to learn the usage of different tags in order to format the text or images to make a beautiful webpage. World Wide Web Consortium (W3C) recommends to use lowercase tags starting from HTML 4. HTML Document Structure A typical HTML document will have the following structure:

The <! DOCTYPE> Declaration
Document declaration tag <html> <head> Document header related tags </head> <body> Document body related tags </body> </html> We will study the entire header and body tags in subsequent chapters, but for now let's see what document declaration tag is. The <! DOCTYPE> Declaration The <! DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. Current version of HTML is 5 and it makes use of the following declaration:

<!DOCTYPE html> There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. We will see more details on this while discussing <! DOCTYPE...> tag along with other HTML tags. HTML BASIC TAGS Heading Tags Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading Example

<title>Heading Example</title> </head> <body>
<!DOCTYPE html> <html> <head> <title>Heading Example</title> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html>

Paragraph Tag The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag as shown below in the example: Example <!DOCTYPE html> <html> <head> <title>Paragraph Example</title> </head> <body> <p>Here is a first paragraph of text.</p> <p>Here is a second paragraph of text.</p> <p>Here is a third paragraph of text.</p> </body> </html>

Horizontal Lines Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly. <!DOCTYPE html> <html> <head> <title>Horizontal Line Example</title> </head> <body> <p>This is paragraph one and should be on top</p> <hr /> <p>This is paragraph two and should be at bottom</p> </body> </html>

Again <hr /> tag is an example of the empty element, where you do not need opening and closing tags, as there is nothing to go in between them. The <hr /> element has a space between the characters hr and the forward slash. If you omit this space, older browsers will have trouble rendering the horizontal line, while if you miss the forward slash character and just use <hr> it is not valid in XHTML Preserve Formatting Sometimes, you want your text to follow the exact format of how it is written in the HTML document. In these cases, you can use the preformatted tag <pre>. Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the source document.

<title>Preserve Formatting Example</title> </head>
<!DOCTYPE html> <html> <head> <title>Preserve Formatting Example</title> </head> <body> <pre> function testFunction( strText ){ alert (strText) } </pre> </body> </html>

This will produce the following result:
function testFunction( strText ){ alert (strText) } Try using the same code without keeping it inside <pre>...</pre> tags HTML ELEMENTS An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag, where the element name is preceded by a forward slash as shown below with few tags:

Here is a first paragraph of text. Here is a second paragraph of text. Here is a third paragraph of text. Line Break Tag Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them. The <br /> tag has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use <br> it is not valid in XHTML.

<!DOCTYPE html> <html> <head>
<!DOCTYPE html> <html> <head> <title>Line Break Example</title> </head> <body> <p>Hello<br /> You delivered your assignment on time.<br /> Thanks<br /> Mahnaz</p> </body> </html>

Centering Content You can use <center> tag to put any content in the center of the page or any table cell. <!DOCTYPE html> <html> <head> <title> Centring Content Example</title> </head> <body> <p>This text is not in the center.</p> <center> <p>This text is in the center.</p> </center> </body> </html>

Horizontal Lines Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly. <!DOCTYPE html> <html> <head> <title>Horizontal Line Example</title> </head> <body> <p>This is paragraph one and should be on top</p> <hr /> <p>This is paragraph two and should be at bottom</p> </body> </html>

Again <hr /> tag is an example of the empty element, where you do not need opening and closing tags, as there is nothing to go in between them. The <hr /> element has a space between the characters hr and the forward slash. If you omit this space, older browsers will have trouble rendering the horizontal line, while if you miss the forward slash character and just use <hr> it is not valid in XHTML Preserve Formatting Sometimes, you want your text to follow the exact format of how it is written in the HTML document. In these cases, you can use the preformatted tag <pre>. Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the source document.

<title>Preserve Formatting Example</title> </head>
<!DOCTYPE html> <html> <head> <title>Preserve Formatting Example</title> </head> <body> <pre> function testFunction( strText ){ alert (strText) } </pre> </body> </html>

function testFunction( strText ){ alert (strText) } Try using the same code without keeping it inside <pre>...</pre> tags HTML ELEMENTS An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag, where the element name is preceded by a forward slash as shown below with few tags:

So here <p>. </p> is an HTML element, <h1>
So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element. There are some HTML elements which don't need to be closed, such as <img.../>, <hr /> and <br /> elements. These are known as void elements. HTML documents consists of a tree of these elements and they specify how HTML documents should be built, and what kind of content should be placed in what part of an HTML document.

HTML Tag vs. Element An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag. For example, <p> is starting tag of a paragraph and </p> is closing tag of the same paragraph but <p>This is paragraph</p> is a paragraph element. Nested HTML Elements It is very much allowed to keep one HTML element inside another HTML element: <!DOCTYPE html> <html> <head> <title>Nested Elements Example</title> </head> <body> <h1>This is <i>italic</i> heading</h1>

<p>This is <u>underlined</u> paragraph</p> </body> </html> HTML FORMATTING If you use a word processor, you must be familiar with the ability to make text bold, italicized, or underlined; these are just three of the ten options available to indicate how text can appear in HTML and XHTML. Bold Text Anything that appears within <b>...</b> element, is displayed in bold as shown below:

<!DOCTYPE html> <html> <head> <title>Bold Text Example</title> </head> <body> <p>The following word uses a <b>bold</b> typeface.</p> </body> </html>

Italic Text Anything that appears within <i>...</i> element is displayed in italicized as shown below: Example <!DOCTYPE html> <html> <head> <title>Italic Text Example</title> </head> <body> <p>The following word uses a <i>italicized</i> typeface.</p> </body> </html>

Underlined Text Anything that appears within <u>...</u> element, is displayed with underline as shown below: Example <!DOCTYPE html> <html> <head> <title>Underlined Text Example</title> </head> <body> <p>The following word uses a <u>underlined</u> typeface.</p> </body> </html>

Strike Text Anything that appears within <strike>...</strike> element is displayed with strikethrough, which is a thin line through the text as shown below: <!DOCTYPE html> <html> <head> <title>Strike Text Example</title> </head> <body> <p>The following word uses a <strike>strikethrough</strike> typeface.</p> </body> </html>

Monospaced Font The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are known as variable-width fonts because different letters are of different widths (for example, the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the same width. Example <!DOCTYPE html> <html> <head> <title>Monospaced Font Example</title> </head> <body> <p>The following word uses a <tt>monospaced</tt> typeface.</p> </body> </html>

Superscript Text The content of a <sup>...</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character's height above the other characters <!DOCTYPE html> <html> <head> <title>Superscript Text Example</title> </head> <body> <p>The following word uses a <sup>superscript</sup> typeface.</p> </body> </html>

Subscript Text The content of a <sub>...</sub> element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character's height beneath the other characters. Example <!DOCTYPE html> <html> <head> <title>Subscript Text Example</title> </head> <body> <p>The following word uses a <sub>subscript</sub> typeface.</p> </body> </html>

Inserted Text Anything that appears within <ins>...</ins> element is displayed as inserted text. Example <!DOCTYPE html> <html> <head> <title>Inserted Text Example</title> </head> <body> <p>I want to drink <del>cola</del> <ins>wine</ins></p> </body> </html>

Deleted Text Anything that appears within <del>...</del> element, is displayed as deleted text. Example <!DOCTYPE html> <html> <head> <title>Deleted Text Example</title> </head> <body> <p>I want to drink <del>cola</del> <ins>wine</ins></p> </body> </html>

Larger Text The content of the <big>...</big> element is displayed one font size larger than the rest of the text surrounding it as shown below: <!DOCTYPE html> <html> <head> <title>Larger Text Example</title> </head> <body> <p>The following word uses a <big>big</big> typeface.</p> </body> </html>

Smaller Text The content of the <small>...</small> element is displayed one font size smaller than the rest of the text surrounding it as shown below: Example <!DOCTYPE html> <html> <head> <title>Smaller Text Example</title> </head> <body> <p>The following word uses a <small>small</small> typeface.</p> </body> </html>

Grouping Content The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page. For example, you might want to put all of the footnotes on a page within a <div> element to indicate that all of the elements within that <div> element relate to the footnotes. You might then attach a style to this <div> element so that they appear using a special set of style rules. Example

<title>Div Tag Example</title> </head> <body>
<!DOCTYPE html> <html> <head> <title>Div Tag Example</title> </head> <body> <div id="menu" align="middle" > <a href="/index.htm">HOME</a> | <a href="/about/contact_us.htm">CONTACT</a> | <a href="/about/index.htm">ABOUT</a> </div> <div id="content" align="left" bgcolor="white"> <h5>Content Articles</h5> <p>Actual content goes here.....</p> </body> </html>

PHASE TAGS The phrase tags have been desicolgned for specific purposes, though they are displayed in a similar way as other basic tags like <b>, <i>, <pre>, and <tt>, you have seen in previous chapter. Emphasized Text Anything that appears within <em>...</em> element is displayed as emphasized text. Example <!DOCTYPE html> <html> <head> <title>Emphasized Text Example</title> </head> <body> <p>The following word uses a <em>emphasized</em> typeface.</p> </body> </html>

Marked Text Anything that appears with-in <mark>...</mark> element, is displayed as marked with yellow ink. <!DOCTYPE html> <html> <head> <title>Marked Text Example</title> </head> <body> <p>The following word has been <mark>marked</mark> with yellow</p> </body> </html>

Strong Text Anything that appears within <strong>...</strong> element is displayed as important text. <!DOCTYPE html> <html> <head> <title>Strong Text Example</title> </head> <body> <p>The following word uses a <strong>strong</strong> typeface.</p> </body> </html>

Text Abbreviation You can abbreviate a text by putting it inside opening <abbr> and closing </abbr> tags. If present, the title attribute must contain this full description and nothing else. Example <!DOCTYPE html> <html> <head> <title>Text Abbreviation</title> </head> <body> <p>My best friend's name is <abbr title="Abhishek">Abhy</abbr>.</p> </body> </html>

Text Direction The <bdo>...</bdo> element stands for Bi-Directional Override and it is used to override the current text direction. <!DOCTYPE html> <html> <head> <title>Text Direction Example</title> </head> <body> <p>This text will go left to right.</p> <p><bdo dir="rtl">This text will go right to left.</bdo></p> </body> </html>

Special Terms The <dfn>...</dfn> element (or HTML Definition Element) allows you to specify that you are introducing a special term. It's usage is similar to italic words in the midst of a paragraph. Typically, you would use the <dfn> element the first time you introduce a key term. Most recent browsers render the content of a <dfn> element in an italic font. <!DOCTYPE html> <html> <head> <title>Special Terms Example</title> </head> <body> <p>The following word is a <dfn>special</dfn> term.</p> </body> </html>

Quoting Text When you want to quote a passage from another source, you should put it in between<blockquote>...</blockquote> tags. Text inside a <blockquote> element is usually indented from the left and right edges of the surrounding text, and sometimes uses an italicized font. <!DOCTYPE html> <html> <head> <title>Blockquote Example</title> </head> <body> <p>The following description of XHTML is taken from the W3C Web site:</p> <blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote> </body> </html>

MEGA TAGS HTML lets you specify metadata - additional important information about a document in a variety of ways. The META elements can be used to include name/value pairs describing properties of the HTML document, such as author, expiry date, a list of keywords, document author etc. The <meta> tag is used to provide such additional information. This tag is an empty element and so does not have a closing tag but it carries information within its attributes. You can include one or more meta tags in your document based on what information you want to keep in your document but in general, meta tags do not impact physical appearance of the document so from appearance point of view, it does not matter if you include them or not. Adding Meta Tags to Your Documents You can add metadata to your web pages by placing <meta> tags inside the header of the document which is represented by <head> and </head> tags. A meta tag can have following attributes in addition to core attributes:

Attribute Description Name Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc. content Specifies the property's value. scheme Specifies a scheme to interpret the property's value (as declared in the content attribute). http-equiv Used for http response message headers. For example, http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.

HTML FORMATTING If you use a word processor, you must be familiar with the ability to make text bold, italicized, or underlined; these are just three of the ten options available to indicate how text can appear in HTML and XHTML. Bold Text Anything that appears within <b>...</b> element, is displayed in bold as shown below: <!DOCTYPE html> <html> <head> <title>Bold Text Example</title> </head> <body> <p>The following word uses a <b>bold</b> typeface.</p> </body> </html>

Italic Text Anything that appears within <i>...</i> element is displayed in italicized as shown below: <!DOCTYPE html> <html> <head> <title>Italic Text Example</title> </head> <body> <p>The following word uses a <i>italicized</i> typeface.</p> </body> </html>

Underlined Text Anything that appears within <u>...</u> element, is displayed with underline as shown below: <!DOCTYPE html> <html> <head> <title>Underlined Text Example</title> </head> <body> <p>The following word uses a <u>underlined</u> typeface.</p> </body> </html>

Strike Text Anything that appears within <strike>...</strike> element is displayed with strikethrough, which is a thin line through the text as shown below: <!DOCTYPE html> <html> <head> <title>Strike Text Example</title> </head> <body> <p>The following word uses a <strike>strikethrough</strike> typeface.</p> </body> </html>

Monospaced Font The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are known as variable-width fonts because different letters are of different widths (for example, the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the same width. <!DOCTYPE html> <html> <head> <title>Monospaced Font Example</title> </head> <body> <p>The following word uses a <tt>monospaced</tt> typeface.</p> </body> </html>

Superscript Text The content of a <sup>...</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character's height above the other characters. <!DOCTYPE html> <html> <head> <title>Superscript Text Example</title> </head> <body> <p>The following word uses a <sup>superscript</sup> typeface.</p> </body> </html>

Subscript Text The content of a <sub>...</sub> element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character's height beneath the other characters. <!DOCTYPE html> <html> <head> <title>Subscript Text Example</title> </head> <body> <p>The following word uses a <sub>subscript</sub> typeface.</p> </body> </html>

Inserted Text Anything that appears within <ins>...</ins> element is displayed as inserted text. Example <!DOCTYPE html> <html> <head> <title>Inserted Text Example</title> </head> <body> <p>I want to drink <del>cola</del> <ins>wine</ins></p> </body> </html>

Deleted Text Anything that appears within <del>...</del> element, is displayed as deleted text. Example <head> <title>Deleted Text Example</title> </head> <body> <p>I want to drink <del>cola</del> <ins>wine</ins></p> </body> </html> <!DOCTYPE html> <html>

Larger Text The content of the <big>...</big> element is displayed one font size larger than the rest of the text surrounding it as shown below: Example <!DOCTYPE html> <html> <head> <title>Larger Text Example</title> </head> <body> <p>The following word uses a <big>big</big> typeface.</p> </body> </html>

Smaller Text The content of the <small>...</small> element is displayed one font size smaller than the rest of the text surrounding it as shown below: Example <!DOCTYPE html> <html> <head> <title>Smaller Text Example</title> </head> <body> <p>The following word uses a <small>small</small> typeface.</p> </body> </html>

HTML IMAGES Images are very important to beautify as well as to depict many complex concepts in simple way on your web page. This tutorial will take you through simple steps to use images in your web pages. Insert Image You can insert any image in your web page by using <img> tag. Following is the simple syntax to use this tag. <img src="Image URL" ... attributes-list/> The <img> tag is an empty tag, which means that, it can contain only list of attributes and it has no closing tag. Example To try following example, let's keep our HTML file test.htm and image file test.png in the same directory: <!DOCTYPE html> <html> <head> <title>Using Image in Webpage</title>

</head> <body> <p>Simple Image Insert</p> <img src="test.png" alt="Test Image" /> </body> </html> Set Image Location Usually we keep all the images in a separate directory. So let's keep HTML file test.htm in our home directory and create a subdirectory images inside the home directory where we will keep our image test.png.

<!DOCTYPE html> <html> <head> <title>Using Image in Webpage</title> </head> <body> <p>Simple Image Insert</p> <img src="images/test.png" alt="Test Image" /> </body> </html>

Set Image Width/Height
You can set image width and height based on your requirement using width and height attributes. You can specify width and height of the image in terms of either pixels or percentage of its actual size. <!DOCTYPE html> <html> <head> <title>Set Image Width and Height</title> </head> <body> <p>Setting image width and height</p> <img src="test.png" alt="Test Image" width="150" height="100"/> </body> </html>

Set Image Border By default, image will have a border around it, you can specify border thickness in terms of pixels using border attribute. A thickness of 0 means, no border around the picture. !DOCTYPE html> <html> <head> <title>Set Image Border</title> </head> <body> <p>Setting image Border</p> <img src="test.png" alt="Test Image" border="3"/> </body> </html>

Set Image Alignment By default, image will align at the left side of the page, but you can use align attribute to set it in the center or right. <!DOCTYPE html> <html> <head> <title>Set Image Alignment</title> </head> <body> <p>Setting image Alignment</p> <img src="test.png" alt="Test Image" border="3" align="right"/> </body> </html>

HTML TABLES The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells. The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells <!DOCTYPE html> <html> <head>

<title>HTML Tables</title>
</head> <body> <table border="1"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table> </body> </html>

Table Heading Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell. Normally you will put your top row as table heading as shown below, otherwise you can use <th> element in any row. <!DOCTYPE html> <html> <head> <title>HTML Table Header</title> </head> <body> <table border="1"> <tr> <th>Name</th> <th>Salary</th> </tr>

<tr> <td> Ramesh Raman</td> <td>5000</td> </tr> <td>Shabbir Hussein</td> <td>7000</td> </table> </body> </html>

Cell padding and Cells pacing Attributes
There are two attributes called cell padding and cells pacing which you will use to adjust the white space in your table cells. The cell spacing attribute defines the width of the border, while cell padding represents the distance between cell borders and the content within a cell. <!DOCTYPE html> <html> <head> <title>HTML Table Cellpadding</title> </head> <body>

<table border="1" cellpadding="5" cellspacing="5"> <tr>
<table border="1" cellpadding="5" cellspacing="5"> <tr> <th>Name</th> <th>Salary</th> </tr> <td>Ramesh Raman</td> <td>5000</td> <td>Shabbir Hussein</td> <td>7000</td> </table> </body> </html>

Tables Backgrounds You can set table background using one of the following two ways: bgcolor attribute - You can set background color for whole table or just for one cell. background attribute - You can set background image for whole table or just for one cell. You can also set border color also using bordercolor attribute. <!DOCTYPE html> <html> <head> <title>HTML Table Background</title> </head> <body> <table border="1" bordercolor="green" bgcolor="yellow">

<tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">Row 3 Cell 1</td></tr> </table> </body> </html>

<!DOCTYPE html> <html> <head> <title>HTML Table Background</title> </head> <body>

<table border="1" bordercolor="green" background="/images/test
<table border="1" bordercolor="green" background="/images/test.png"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">Row 3 Cell 1</td></tr> </table> </body> </html>

Table Height and Width You can set a table width and height using width and height attributes. You can specify table width or height in terms of pixels or in terms of percentage of available screen area. <!DOCTYPE html> <html> <head> <title>HTML Table Width/Height</title> </head> <body>

<table border="1" width="400" height="150">
<tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </table> </body> </html>

Table Caption The caption tag will serve as a title or explanation for the table and it shows up at the top of the table. This tag is deprecated in newer version of HTML/XHTML. <!DOCTYPE html> <html> <head> <title>HTML Table Caption</title> </head> <body> <table border="1" width="100%"> <caption>This is the caption</caption> <tr> <td>row 1, column 1</td><td>row 1, column 2</td>

</tr> <tr> <td>row 2, column 1</td><td>row 2, column 2</td> </table> </body> </html> Table Header, Body, and Footer Tables can be divided into three portions: a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table. The three elements for separating the head, body, and foot of a table are: <thead> - to create a separate table header. <tbody> - to indicate the main body of the table. <tfoot> - to create a separate table footer.

A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody> <!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <table border="1" width="100%"> <thead> <tr> <td colspan="4">This is the head of the table</td>

</tr> </thead> <tfoot> <tr> <td colspan="4">This is the foot of the table</td> </tfoot> <tbody> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td>

</tr> </tbody> </table> </body> </html>

HTML LISTS HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain: <ul> - An unordered list. This will list items using plain bullets. <ol> - An ordered list. This will use different schemes of numbers to list your items. <dl> - A definition list. This arranges your items in the same way as they are arranged in a dictionary. HTML Unordered Lists An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.

<!DOCTYPE html> <html> <head> <title>HTML Unordered List</title> </head> <body> <ul> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ul> </body> </html>

HTML Ordered Lists If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will be used. This list is created by using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>. <!DOCTYPE html> <html> <head> <title>HTML Ordered List</title> </head> <body> <ol> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li>

</ol> </body> </html> The type Attribute You can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is a number. Following are the possible options: <ol type="1"> - Default-Case Numerals. <ol type="I"> - Upper-Case Numerals. <ol type="i"> - Lower-Case Numerals. <ol type="a"> - Lower-Case Letters. <ol type="A"> - Upper-Case Letters.

<!DOCTYPE html> <html> <head> <title>HTML Ordered List</title> </head> <body> <ol type="1"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ol> </body> </html>

HTML Definition Lists HTML and XHTML supports a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list. Definition List makes use of following three tags. <dl> - Defines the start of the list <dt> - A term <dd> - Term definition </dl> - Defines the end of the list HTML IMAGE LINKS We have seen how to create hypertext link using text and we also learnt how to use images in our webpages. Now, we will learn how to use images to create hyperlinks.

<!DOCTYPE html> <html> <head> <title>Image Hyperlink Example</title> </head> <body> <p>Click following link</p> <a href=" target="_self"> <img src="/images/logo.png" alt="Tutorials Point" border="0"/> </a> </body> </html>

This will produce the following result, where you can click on the images to reach to the home page of Tutorials Point. Click following link This was the simplest way of creating hyperlinks using images. Next we will see how we can create Mouse-Sensitive Image Links Mouse-Sensitive Images The HTML and XHTML standards provide a feature that lets you embed many different links inside a single image. You can create different links on the single image based on different coordinates available on the image. Once different links are attached to different coordinates, we can click different parts of the image to open target documents. Such mouse-sensitive images are known as image maps. There are two ways to create image maps: Server-side image maps - This is enabled by the ismap attribute of the <img> tag and requires access to a server and related image-map processing applications. Client-side image maps - This is created with the usemap attribute of the <img> tag, along with corresponding <map> and <area> tags.

There are two ways to create image maps:
Server-side image maps - This is enabled by the ismap attribute of the <img> tag and requires access to a server and related image-map processing applications. Client-side image maps - This is created with the usemap attribute of the <img> tag, along with corresponding <map> and <area> tags. Client-side image maps - This is created with the use map attribute of the <imp> tag, along with corresponding <map> and <area> tags. Server-Side Image Maps Here you simply put your image inside a hyper link and use is map attribute which makes it special image and when the user clicks some place within the image, the browser passes the coordinates of the mouse pointer along with the URL specified in the <a> tag to the web server. The server uses the mouse-pointer coordinates to determine which document to deliver back to the browser.

When is map is used, the href attribute of the containing <a> tag must contain the URL of a server application like a cgi or PHP script etc. to process the incoming request based on the passed coordinates. The coordinates of the mouse position are screen pixels counted from the upper-left corner of the image, beginning with (0,0). The coordinates, preceded by a question mark, are added to the end of the URL. For example, if a user clicks 20 pixels over and 30 pixels down from the upper-left corner of the following image: Click following link Which has been generated by the following code snippet: <!DOCTYPE html> <html> <head> <title>ISMAP Hyperlink Example</title>

</head> <body> <p>Click following link</p> <a href="/cgi-bin/ismap.cgi" target="_self"> <img ismap src="/images/logo.png" alt="Tutorials Point" border="0"/> </a> </body> </html> Client-Side Image Maps Client side image maps are enabled by the usemap attribute of the <img /> tag and defined by special <map> and <area> extension tags. The image that is going to form the map is inserted into the page using the <img /> tag as a normal image, except it carries an extra attribute called usemap. The value of the usemap attribute is the value which will be used in a <map> tag to link map and image tags. The <map> along with <area> tags define all the image coordinates and corresponding links.

<title>USEMAP Hyperlink Example</title> </head>
<!DOCTYPE html> <html> <head> <title>USEMAP Hyperlink Example</title> </head> <body> <p>Search and click the hotspot</p> <img src=/images/html.gif alt="HTML Map" border="0" usemap="#html"/>  <map name="html"> <area shape="circle"

coords="80,80,20" href="/css/index.htm" alt="CSS Link" target="_self" /> <area shape="rect" coords="5,5,40,40" alt="jQuery Link" href="/jquery/index.htm" target="_self" /> </map> </body> </html>

Coordinate System The actual value of coords is totally dependent on the shape in question. Here is a summary, to be followed by detailed examples: rect = x1 , y1 , x2 , y2 x1 and y1 are the coordinates of the upper left corner of the rectangle; x2 and y2 are the coordinates of the lower right corner. circle = xc , yc , radius xc and yc are the coordinates of the center of the circle, and radius is the circle's radius. A circle centered at 200,50 with a radius of 25 would have the attribute coords="200,50,25" poly = x1 , y1 , x2 , y2 , x3 , y3 , ... xn , yn The various x-y pairs define vertices (points) of the polygon, with a "line" being drawn from one point to the next point. A diamond-shaped polygon with its top point at 20,20 and 40 pixels across at its widest points would have the attribute oords="20,20,40,40,20,60,0,40". All coordinates are relative to the upper-left corner of the image (0,0). Each shape has a related URL. You can use any image software to know the coordinates of different positions.

HTML FRAMES HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document. A collection of frames in the browser window is known as a frameset. The window is divided into frames in a similar way the tables are organized: into rows and columns. Disadvantages of Frames There are few drawbacks with using frames, so it's never recommended to use frames in your webpages: Some smaller devices cannot cope with frames often because their screen is not big enough to be divided up. Sometimes your page will be displayed differently on different computers due to different screen resolution. The browser's back button might not work as the user hopes. There are still few browsers that do not support frame technology.

Creating Frames To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines, how to divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame> tag and it defines which HTML document shall open into the frame. <!DOCTYPE html> <html> <head> <title>HTML Frames</title> </head> <frameset rows="10%,80%,10%"> <frame name="top" src="/html/top_frame.htm" /> <frame name="main" src="/html/main_frame.htm" /> <frame name="bottom" src="/html/bottom_frame.htm" /> <noframes> <body>

</body> </noframes> </frameset> </html>

Browser Support for Frames
If a user is using any old browser or any browser, which does not support frames then <no frames> element should be displayed to the user. So you must place a <body> element inside the <no frames> element because the <frameset> element is supposed to replace the <body> element, but if a browser does not understand <frameset> element then it should understand what is inside the <body> element which is contained in a <no frames> element. You can put some nice message for your user having old browsers. For example, Sorry!! your browser does not support frames. as shown in the above example. Frame's name and target attributes One of the most popular uses of frames is to place navigation bars in one frame and then load main pages into a separate frame.

<!DOCTYPE html> <html> <head> <title>HTML Target Frames</title> </head> <frameset cols="200, *"> <frame src="/html/menu.htm" name="menu_page" /> <frame src="/html/main.htm" name="main_page" /> <noframes> <body> </body> </noframes> </frameset> </html>

Here, we have created two columns to fill with two frames. The first frame is 200 pixels wide and will contain the navigation menu bar implemented by menu.htm file. The second column fills in remaining space and will contain the main part of the page and it is implemented by main.htm file. For all the three links available in menu bar, we have mentioned target frame as main_page, so whenever you click any of the links in menu bar, available link will open in main page. <!DOCTYPE html> <html> <body bgcolor="#4a7d49"> <a href= target="main_page">Google</a> <br /><br />

<a href="http://www.microsoft.com"
target="main_page">Microsoft</a> <br /><br /> <a href=" target="main_page">BBC News</a> </body> </html> Following is the content of main.htm file: <!DOCTYPE html> <html> <body bgcolor="#b5dcb3"> <h3>This is main page and content from any link will be displayed here.</h3> <p>So now click any link and see the result.</p>

Option Description _self Loads the page into the current frame. _blank Loads a page into a new browser window. Opening a new window. _parent Loads the page into the parent window, which in the case of a single frameset is the main browser window. _top Loads the page into the browser window, replacing any current frames. target frame Loads the page into a named target frame.

HTML BLOCKS All the HTML elements can be categorized into two categories (a) Block Level Elements (b)Inline Elements. Block Elements Block elements appear on the screen as if they have a line break before and after them. For example, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <block quote>, and <address> elements are all block level elements. They all start on their own new line, and anything that follows them appears on its own new line. Inline Elements Inline elements, on the other hand, can appear within sentences and do not have to appear on a new line of their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> elements are all inline elements. Grouping HTML Elements There are two important tags which we use very frequently to group various other HTML tags (i) <div> tag and (ii) <span> tag The <div> tag

Example Following is a simple example of <div> tag. We will learn Cascading Style Sheet (CSS) in a separate chapter but we used it here to show the usage of <div> tag: <!DOCTYPE html> <html> <head> <title>HTML div Tag</title> </head> body>  <div style="color:red"> <h4>This is first group</h4> <p>Following is a list of vegetables</p>

<ul> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ul> </div>  <div style="color:green"> <h4>This is second group</h4> <p>Following is a list of fruits</p> <li>Apple</li> <li>Banana</li>

<li>Mango</li>
<li>Strawberry</li> </ul> </div> </body> </html> HTML FORMS HTML Forms are required, when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, address, credit card, etc. A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application. There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.

The HTML <form> tag is used to create an HTML form and it has following syntax:
<form action="Script URL" method="GET|POST"> form elements like input, textarea etc. </form> HTML Form Controls There are different types of form controls that you can use to collect data using HTML form: Text Input Controls Checkboxes Controls Radio Box Controls Select Box Controls File Select boxes Hidden Controls Clickable Buttons Submit and Reset Button

Text Input Controls There are three types of text input used on forms: Single-line text input controls - This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag. Password input controls - This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTMl <input> tag. Multi-line text input controls - This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.

HTML Form Controls There are different types of form controls that you can use to collect data using HTML form: Text Input Controls Checkboxes Controls Radio Box Controls Select Box Controls File Select boxes Hidden Controls Clickable Buttons

Text Input Controls There are three types of text input used on forms: Single-line text input controls - This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag. Password input controls - This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTMl <input> tag. Multi-line text input controls - This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag. HTML Form Controls There are different types of form controls that you can use to collect data using HTML form: Checkboxes Controls Radio Box Controls Select Box Controls File Select boxes

Text Input Controls There are three types of text input used on forms: Single-line text input controls – This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag. Password input controls – This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTMl <input> tag. Multi-line text input controls – This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag. Single-line text input controls

Hidden Form Controls Hidden form controls are used to hide data inside the page which later on can be pushed to the server. This control hides inside the code and does not appear on the actual page. For example, following hidden form is being used to keep current page number. When a user will click next page then the value of hidden control will be sent to the web server and there it will decide which page will be displayed next based on the passed current page. Example Here is example HTML code to show the usage of hidden control: <!DOCTYPE html> <html> <head> <title>File Upload Box</title> </head> <body>

UNIT V DHTML Styling HTML with CSS
DHTML Styling HTML with CSS CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once. CSS can be added to HTML elements in 3 ways: Inline - by using the style attribute in HTML elements Internal - by using a <style> element in the <head> section External - by using an external CSS file Inline CSS An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute of an HTML element.

This example sets the text color of the <h1> element to blue:
<h1 style="color:blue;">This is a Blue Heading</h1> Internal CSS An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the <head> section of an HTML page, within a <style> element: <!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>

External CSS An external style sheet is used to define the style for many HTML pages. With an external style sheet, you can change the look of an entire web site, by changing one file! To use an external style sheet, add a link to it in the <head> section of the HTML page: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> An external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension. Here is how the "styles.css" looks:

body { background-color: powderblue; } h1 { color: blue; p { color: red; CSS Fonts The CSS color property defines the text color to be used. The CSS font-family property defines the font to be used. The CSS font-size property defines the text size to be used. <!DOCTYPE html> <html> <head> <style>

h1 { color: blue; font-family: verdana; font-size: 300%; } p { color: red; font-family: courier; font-size: 160%; </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>

CSS Border The CSS border property defines a border around an HTML element: Example p { border: 1px solid powderblue; } CSS Padding The CSS padding property defines a padding (space) between the text and the border: padding: 30px; CSS Margin The CSS margin property defines a margin (space) outside the border: margin: 50px;

The id Attribute To define a specific style for one special element, add an id attribute to the element: <p id="p01">I am different</p> then define a style for the element with the specific id: Example #p01 { color: blue; } The class Attribute To define a style for a special type of elements, add a class attribute to the element: <p class="error">I am different</p> then define a style for the elements with the specific class: p.error { color: red;

Try it Yourself » External References External style sheets can be referenced with a full URL or with a path relative to the current web page. This example uses a full URL to link to a style sheet: Example <link rel="stylesheet" href=" Animations An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want. To use CSS3 animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times. Rule When you specify CSS styles inside rule, the animation will gradually change from the current style to the new style at certain times.

To get an animation to work, you must bind the animation to an element.
The following example binds the "example" animation to the <div> element. The animation will last for 4 seconds, and it will gradually change the background-color of the <div> element from "red" to "yellow": Example /* The animation code */ @keyframes example { from {background-color: red;} to {background-color: yellow;} } /* The element to apply the animation to */ div { width: 100px; height: 100px; background-color: red; animation-name: example; animation-duration: 4s;

Note: If the animation-duration property is not specified, the animation will have no effect, because the default value is 0. In the example above we have specified when the style will change by using the keywords "from" and "to" (which represents 0% (start) and 100% (complete)). It is also possible to use percent. By using percent, you can add as many style changes as you like. The following example will change the background-color of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete: Example /* The animation code */ @keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} }

/* The element to apply the animation to */
div { width: 100px; height: 100px; background-color: red; animation-name: example; animation-duration: 4s; } The following example will change both the background-color and the position of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete: Example /* The animation code */ @keyframes example { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; left:0px; top:200px;} 100% {background-color:red; left:0px; top:0px;}

/* The element to apply the animation to */
div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; } c Example animation-delay: 2s; Set How Many Times an Animation Should Run The animation-iteration-count property specifies the number of times an animation should run.

The following example will run the animation 3 times before it stops:
Example div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-iteration-count: 3; } The following example uses the value "infinite" to make the animation continue for ever: animation-iteration-count: infinite;

Run Animation in Reverse Direction or Alternate Cycles
The animation-direction property is used to let an animation run in reverse direction or alternate cycles. The following example will run the animation in reverse direction: Example div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-iteration-count: 3; animation-direction: reverse; } The following example uses the value "alternate" to make the animation first run forward, then backward, then forward: position: relative;;

animation-duration: 4s;
animation-iteration-count: 3; animation-direction: alternate; } Specify the Speed Curve of the Animation The animation-timing-function property specifies the speed curve of the animation. The animation-timing-function property can have the following values: ease - specifies an animation with a slow start, then fast, then end slowly (this is default) linear - specifies an animation with the same speed from start to end ease-in - specifies an animation with a slow start ease-out - specifies an animation with a slow end ease-in-out - specifies an animation with a slow start and end cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function The following example shows the some of the different speed curves that can be used: Example #div1 {animation-timing-function: linear;} #div2 {animation-timing-function: ease;} #div3 {animation-timing-function: ease-in;} #div4 {animation-timing-function: ease-out;} #div5 {animation-timing-function: ease-in-out;} Animation Shorthand Property The example below uses six of the animation properties:

Example div { animation-name: example; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; } The same animation effect as above can be achieved by using the shorthand animation property: animation: example 5s linear 2s infinite alternate;

Property Description @keyframes Specifies the animation code animation A shorthand property for setting all the animation properties animation-delay Specifies a delay for the start of an animation animation-direction Specifies whether an animation should play in reverse direction or alternate cycles animation-duration Specifies how many seconds or milliseconds an animation takes to complete one cycle animation-fill-mode Specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay) animation-iteration-count Specifies the number of times an animation should be played animation-name Specifies the name of animation animation-play-state Specifies whether the animation is running or paused animation-timing-function Specifies the speed curve of the animation HTML Multimedia Multimedia on the web is sound, music, videos, movies, and animations.

What is Multimedia? Multimedia comes in many different formats. It can be almost anything you can hear or see. Examples: Images, music, sound, videos, records, films, animations, and more.Web pages often contain multimedia elements of different types and formats. In this chapter you will learn about the different multimedia formats. Browser Support The first web browsers had support for text only, limited to a single font in a single color. Later came browsers with support for colors and fonts, and images! Audio, video, and animation have been handled differently by the major browsers. Different formats have been supported, and some formats require extra helper programs (plug-ins) to work. Hopefully this will become history. HTML5 multimedia promises an easier future for multimedia. Multimedia Formats Multimedia elements (like audio or video) are stored in media files.

The most common way to discover the type of a file, is to look at the file extension.
Multimedia files have formats and different extensions like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi. Common Video Formats Videoformats MP4 is the new and upcoming format for internet video. MP4 is recommended by YouTube. MP4 is supported by Flash Players. Audio Formats MP3 is the newest format for compressed recorded music. The term MP3 has become synonymous with digital music. If your website is about recorded music, MP3 is the choice.

Drag and Drop Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location. In HTML5, drag and drop is part of the standard: Any element can be draggable. HTML Drag and Drop Example The example below is a simple drag and drop example: Example <!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); function drop(ev) {

ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html> Make an Element Draggable First of all: To make an element draggable, set the draggable attribute to true: <img draggable="true"> What to Drag - ondragstart and setData() Then, specify what should happen when the element is dragged.

In the example above, the ondragstart attribute calls a function, drag(event), that specifies what data to be dragged. The dataTransfer.setData() method sets the data type and the value of the dragged data: function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } In this case, the data type is "text" and the value is the id of the draggable element ("drag1"). Where to Drop - ondragover The ondragover event specifies where the dragged data can be dropped. By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element. This is done by calling the event.preventDefault() method for the ondragover event: event.preventDefault()

Do the Drop – ondrop When the dragged data is dropped, a drop event occurs. In the example above, the ondrop attribute calls a function, drop(event): function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } Code explained: Call preventDefault() to prevent the browser default handling of the data (default is open as link on drop) Get the dragged data with the dataTransfer.getData() method. This method will return any data that was set to the same type in the setData() method The dragged data is the id of the dragged element ("drag1") Append the dragged element into the drop element JavaScript supports three important types of dialog boxes. These dialog boxes can be used to raise and alert, or to get confirmation on any input or to have a kind of input from the users. Here we will discuss each dialog box one by one.

Alert Dialog Box An alert dialog box is mostly used to give a warning message to the users. For example, if one input field requires to enter some text but the user does not provide any input, then as a part of validation, you can use an alert box to give a warning message. Nonetheless, an alert box can still be used for friendlier messages. Alert box gives only one button "OK" to select and proceed. Example <html> <head> <script type="text/javascript">  </script> </head> <body> <p>Click the following button to see the result: </p>

<form> <input type="button" value="Click Me" onclick="Warn();" /> </form> </body> </html> Confirmation Dialog Box A confirmation dialog box is mostly used to take user's consent on any option. It displays a dialog box with two buttons: Cancel. If the user clicks on the OK button, the window method confirm() will return true. If the user clicks on the Cancel button, then confirm() returns false. You can use a confirmation dialog box as follows. Example <html> <head> <script type="text/javascript"> function getConfirmation(){ var retVal = confirm("Do you want to continue ?"); if( retVal == true ){ <!--

Prompt Dialog Box The prompt dialog box is very useful when you want to pop-up a text box to get user input. Thus, it enables you to interact with the user. The user needs to fill in the field and then click OK. This dialog box is displayed using a method called prompt() which takes two parameters: (i) a label which you want to display in the text box and (ii) a default string to display in the text box. This dialog box has two buttons: OK and Cancel. If the user clicks the OK button, the window method prompt() will return the entered value from the text box. If the user clicks the Cancel button, the window method prompt() returns null.

PAPER -1 OFFICE AUTOMATION AND WEB DESIGN++

Similar presentations

Presentation on theme: "PAPER -1 OFFICE AUTOMATION AND WEB DESIGN++"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

PAPER -1 OFFICE AUTOMATION AND WEB DESIGN++

Similar presentations

Presentation on theme: "PAPER -1 OFFICE AUTOMATION AND WEB DESIGN++"— Presentation transcript:

Similar presentations

About project

Feedback