்கணினி பயன்பாடு்கள் · 4. தனிப்்படை...

-II

XI Std Computer Applications Vol-2 TM Introduction Pages.indd 1 15/08/18 6:05 PM

II

- 2018

( )

SCERT 2018

www.textbooksonline.tn.nic.in

The wisepossess all


III

. ,

. , . . ,

,

. . , ,

. , .

.

, .

, .

? , .

, .

QR , .

QR ?o , QR

, .o QR . o QR

.o , QR ,

, .


IV

12

/

(B.E./B.Tech)

,

/ / . .

(B.Sc.) - B.C.A. ( ) , , , , , / , , .

,

, , (B.P.O.)

LLB, - , , , , ,

,

,


V

/

- ( ), - ( ),- (), - (), - .-,-

,

, .

C.A. , C.M.A.

ICAI ,

, .

- , , , , , , , , (3D)

,

, , (B.P.O.)


VI

III - HTML CSS

9 - 1

10 HTML - 30

11 HTML , ,

57

12 HTML 94

13 CSS 115

IV -

14 - 126

15 - (Basics) 151

16 (JavaScript Functions) 169

V -

17 176

18 192

(QR Code) ! ? , playstore / app store QR Code . , QR Code- . (URL) , .


1

:

.

.

.

(Internet), (Intranet) (extranet) .

.

.

.

, .

9.1

.

, (,

)

9 -

.

.

.

.

,

,

/

,

.

.

(fax)

.

/

(HUMAN ERRORS) .

.

.

HTML CSS III

Chapter 9.indd 1 15/08/18 2:52 PM

2

.

click .

.

/

.

. /

,

.

. .

9.2

.

1. ( LAN )

2. ( MAN)

3. ( WAN)

4. or (PAN)

5. (CAN)

6. ( W-LAN )

1. LAN LOCAL AREA NETWORK

(or) : 10km

Local Area Network (LAN)

FirewallInternet

Switch SwitchRouter

Web Server

File Server

File Server

File Server

Colour Printer FaxPlotter

9.1

, ,

.

, ,

.

.

,

.

.

.

Chapter 9.indd 2 15/08/18 2:52 PM

3

: ,

.

: 10 100 Mbps

: , , .

:

.

2. MAN Metropolitan Area Network :

(or) : 10 15 Miles

:

.

: 5 10 Mbps

:

.

:

,

.

3. : WAN WideArea Network

: ( 10,000kms)

:

.

: 256 2 Mbps

: .

: ,

,

.

4. : PAN Personal Area Network

: 100Mts

9.2

Central

MAN

NVR

Satellite

Local area network (LAN)

Local area network (LAN)

Microwave tower

9.3

Chapter 9.indd 3 15/08/18 2:52 PM

4

:

.

:

.

: 250 kbps

: ,

. . 8 (HOTSPOT)

: (10 mts ) , .

5 : CAN CampusArea Network

: 5 km

:

. .,

, ,

.

: 40 KB/S 1 MB/S .

: , (or) ,

.

: .

6. : WLAN Wireless Local Area Network

: 50 mtrs

:

, WIFI BLUETOOTH, .

: 1Mbps 54 Mbps

: , .

:

A Typical Campus Network Topology

Internet

Academic Building

Wi-Fi Access Points

Building1

Building2 Building3

Residential Zone

Hostel Zone

WAN Links SMOFC UTP

ERNET

Core SwitchCentral site

Router FirewallServers

WLAN Controller Switch

9.5

Wireless Router Network Diagram

Internet

MP3 PlayerWEB Camera

HDD Cable Modem

Printer

Media PC

IP Camera

LaptopSmartphone

Digital Camera

Desktop PC

Wireless router

Wireless Media Player

Entertainment System

9.6

PERSONAL AREA NETWORK (PAN)

9.4

Chapter 9.indd 4 15/08/18 2:52 PM

5

.

9.7

9.3 WWW ( )

. . , TCP/IP (Transmission Control Protocol/Internet Protocol) . TCP/IP . TCP/IP / . .

. (Internet protocol) IP . .

HOST () .

.

Chapter 9.indd 5 15/08/18 2:52 PM

6

Marketing

IT - Dept.

Marketing / Purchasing

Supp

liers

, Cus

tom

ers

Col

labo

rato

rs

Supp

liers

, Cus

tom

ers

Col

labo

rato

rs

CompanyOnly

ExtranetExtranet

Internet Internet

Intranet

Intranet

The

Wor

ld

The

Wor

ld

9.8

TCP/IP . TCP/IP ,

.

INTERNET

.

(.. , ,

,

,

) (

,

)

(

.)

(EXTRANET)

.

,

, ,

, .

1. (E-mail)

2. / .

Chapter 9.indd 6 15/08/18 2:52 PM

7

3. .

4. / (or) .

5. .

6. .

7. .

8. .

9. .

VINT CERF VINTON GRAY CERF (1943) " " . (FATHER OF INTERNET) TCP/IP Bob kahn . ICANN .

9.3.1 Domain (Domain Name)

.

Generic Domain Name Description

.com Commercial Organisation

.gov Government institution

,org Non-profit Organisation

.net Network Support Group

.edu Educational Institution

(Internet) DNS (DOMAIN NAME SYSTEM) . .

.

Chapter 9.indd 7 15/08/18 2:52 PM

8

Country Level Domain Name Description

.in India

.au Australia

.us United States of America

,jp Japan

.ru Russia

.sg Singapore

9.3.2. URL ?

IP (Internet Protocol) .

.

(.) . IP

.

165.113.245.2

128.143.22.55

. .

. URL . URL IP ( ) .

URL . URL Uniform Resource Locator .

9.3.3. ?

.

.

9.9

(ICANN) 18, 1998 . Playa vista .

Chapter 9.indd 8 15/08/18 2:52 PM

9

. (Internet Corporation For Assigned Names and Numers) .

.

9.3.4 W3C ?

WORLD WIDE WEB CONSORTIUM (

)

W3C W3C

,

,

.

.

(W3C)

.

,

.

W3C . (WWW) (Tim Berners-Lee) 1994 .

Tim Berners-Lee 9.10

9.4 :

.

(Wireless)

()

.

,

, .

.

.

(Mobile)

.

.

(Hotspots)

(Hotspots) . Hotspots (ROUTER)

.

.

(Radio waves) . ,

.

Chapter 9.indd 9 15/08/18 2:52 PM

10

(Broadband)

(cable)

.

.

DSL (or) (cable) . DSL

.

DSL .

DSL

DSL DIGITAL SUBSCRIBER LINE .

.

.

(Cable)

.

.

.

(Satellite)

.

,

.

ISDN

ISDN (Integrated Services Digital Network) , ,

(or)

.

ISDN (adapter) .

/ (Dongles / Data Card)

. (..) .., (USB, Wi-Fi) .

,

(adapters) 3G 4G (DONGLES) .

.

(DONGLE) (DATA CARD) .

Chapter 9.indd 10 15/08/18 2:52 PM

11

Dongle Data Card

(removable) . ..

WIFI BLUETOOTH MEMORY

.

DATACARD Expansion Card Memory Card or Flash Card Identification Card

9.4.1 :

(or) .

()

.

9.4.1.1 :

. (.

)

ADSL (ASYMMETRIC DIGITAL SUBSCRIBER LINE) ( (or) ) (cable or fibre).

9.4.1.2 Direct Access ( )

.

(.) 3G/4G (Public) .

.

1.

.

2.

.

(www)

.

(..) Yahoo, Lycos, Altavista, Hotbot, Google Askjeeves.

1. , .

.

2. Internet Explorer, Chrome, Firefox Safari, . GOOGLE YAHOO .

3. .

.

Chapter 9.indd 11 15/08/18 2:52 PM

12

(URLS) SERP (SEARCH ENGINE RESULTS PAGE) .

9.5 :

1. (INTERNET TELEPHONY)

. (..) Skype) VOIP (VOICE-OVER-INTERNET PROTOCOL)

.

2. (JOB SEARCH)

,

(RESUME) naukri.com, monster.com, summerjob.com, recruitment.com .

3. (ONLINE SHOPPING)

(Online Shopping)

. (www)

.

.

(..) amazon.com

()

.

.

.

4. (Stock market updates)

, . ndtvprofit.com, moneypore.com

.

5. (Travel):

.

,

(hotels), (train), (bus), (flights)

goibibo.com, makemytrip.com, olacabs.com .

6. (Research)

.

Chapter 9.indd 12 15/08/18 2:52 PM

13

7. (Video conferencing)

,

.

.

, .

.

,

.

8. (ecommerce)

,

. -

, -, -

-

.

(FLIPKART), (AMAZON INDIA), (SNAP DEAL), (PAY TM)

.

9. (Online payments)

,

. (..) PAY TM

(From Wallet) .

(Smart Phone), (Tablet), (or) (Broad band), 4G

.

10. (Social Networking)

.

, ,

,

.

.

. (..) (face book) .

11. (Voicemail)

.

.

.

12. (Chatting)

,

.

Chapter 9.indd 13 15/08/18 2:52 PM

14

.

.

.

13. - (e-banking)

.

.

(core banking system) .

Electronic Banking

Electronic Banking Using aTelephone

Connection

Payment ins truments and Self-Service Zones

Automated Telephone

System

Mobile banking

Internet Banking

Mail banking

Self-service zone

pyment card

Electronic wallet

Home Banking

Electronic Banking Using Personal Computers using internet connection

9.11

14. (e-learning)

.

. (CD-ROM) ( ) , .

.

, , ,

.

. .

/ ,

.

Chapter 9.indd 14 15/08/18 2:52 PM

15

9.6 Email

(Electronic Mail (or) e-mail)

,

. , ,

.

9.129.6.1: :

.

To /

.

From /

. 9.13

, 1971 QWERTYUIOP .

Chapter 9.indd 15 15/08/18 2:52 PM

16

From To .

From, To .

Subject

. Subject,

,

. .

CC (Carbon Copy)

.

BCC (Blind Carbon Copy) CC . .

,

. TO

.

MESSAGE BODY:

.

.

9.6.2

.

(Free delivery) -

.

.

(Global delivery) - .

(Instant delivery) -

.

(File attachment):

.

, ,

.

(Long-term storage):

,

.

(Environmentally friendly) :

.

9.6.3

,

. (.) , PDF (Portable Document Format)

.

Chapter 9.indd 16 15/08/18 2:52 PM

17

9.7

,

.

.

.

.

. (ONLINE) (OFFLINE) .

(Computer virus):

.

.

.

.

(Malware):

Malicious Soft Ware ( ) .

.

.

/ (Trojan Horses), (Spyware),

.

(Trojan horse):

,

.

,

,

.

(Malicious spyware):

. (.) (Key Logger)

.

.

,

Key Logging

Chapter 9.indd 17 15/08/18 2:52 PM

18

(Computer worm):

.

.

,

.

,

.

(Botnet):

.

Zombie .

(Spam):

.

"" (Inbox) .

,

.

Click

.

(Phishing):

.

.

(.)

,

click

.

(Rootkit):

.

.

. ,

.

9.8

.

.

Chapter 9.indd 18 15/08/18 2:52 PM

19

, ,

.

. HTML ,

.

9.8.1

1. (Google Chrome):

. , ,

, ,

.

4.0 , Mac osx 10.6

(XP SP2 ) .

Mozila Firefox:

. (open source) . , Max osx, ,

.

Internet Explorer

Microsoft Internet .

. .

Safari

Apple osx ios .

. Apple Mac .

9.9 ,

:

. sricompany.com .

, ,

(About us), (Contactus), (Testimonials), (Products), (Services), FAQs

(Home Page) .

.

:

. URL ,

.

.

.

Chapter 9.indd 19 15/08/18 2:52 PM

20

. URL (UNIFORM RESOURCE LOCATOR) URL - .

,

1.

.

.

2.

.

.

3.

.

.

9.10

.

.

.

.

,

.

. (.) ,

.

1. .

.

2. .

.

3. ,

.

.

4. .

.

9.11 :

Chapter 9.indd 20 15/08/18 2:52 PM

21

-

.

,

,

,

,

. (),

,

.

9.11.1

/

.

1. (B2C)

,

. B2C

.

2. (B2B)

B2B

.

3. (C2B)

.

4. (C2C)

.

.

.

.

.

.

,

.

. (.) ,

.

.

5. (G2B)

46

,

.

(.)

.

6. (B2G)

.

. (B2G) .

7. (G2C)

.

,

.

9.11.2 :

.

Chapter 9.indd 21 15/08/18 2:52 PM

22

9.14

:

.

.

.

.

.

1. G2G :

.

2. G2C :

.

.

,

.

,

.

3. G2B:

.

.

4. G2E:

.

.

,

,

,

.

.

,

.

9.12 :

.

.

.

",

, "

.

,

1. .

, ,

Chapter 9.indd 22 15/08/18 2:52 PM

23

.

.

2. WHAT GOES ON LINE, STAYS ONLINE:

,

.

3. :

(settings)

,

,

,

.

4. :

.

.

,

, .

5. :

( )

.

.

(app) .

6.

.

.

7. :

.

.

8. :

.

9. Click . , ,

,

Click .

.

HTML .

Chapter 9.indd 23 15/08/18 2:52 PM

24

(Sandboxing)

.

LAN, MAN, WAN, PAN, CAN, WLAN . TCP/IP a) b)

: 1. (e-mail) 2. 3. 4. . Internet Corporation For Assigned Names and Numbers (ICANN)

(domain) . .

W3C World Wide Web Consortium ( ) . . (www) TIM Berners Lee 1994 .

TCP/IP (Transmission Control Protocol/Internet Protocol) .

(HOT-SPOT) .

. VOIP Voice Over Internet Protocol .

The Internet of Things (IOT) (IOT)

,

, , ,

.

.

Chapter 9.indd 24 15/08/18 2:52 PM

25

, , . , .

, , ( ) .

. , , , .

- (E-MAIL) ELECTRONIC MAIL . .

, . .

. Sri Company.com . , , , , , , FAQ . .

. URL . . . .

- :1. WLAN - . a)Wireless Local Area Network b) Wired local Area Network c) Wireless Local Area Netware d) Wireless Area Netbande

2. a) 10 . b) 5 . c) 25 . d) 20 .

3. ______________ . a) (host) b) (server) c) (workstation) d)

4. ______________ ? a) ICANM b) ICANN c) ICMA d) ICNNA

Chapter 9.indd 25 15/08/18 2:52 PM

26

5. W3C a) World Wide Web Consortium b) Wide World Web Consortium c) World Web Wide Consortium d) World Wide Web Consortum

6. W3C 1994 ______________ a) b) c) d)

7. (hotspot) ? a) LAN b) PAN c) WLAN d) CAN

8. , ? a) Data Card b) Pen Drive c) Dongles d) Memory Card

9. ? a) (Surfing) b) (Searching) c) (Finding) d) (glancing)

10. Safari - ? a) (Google) b) (Apple) c) (Microsoft) d) (Linux Corpn)

11. ? a) 3 b) 2 c) 4 d) 6

- (2 ):12. .

13. .

14. ?

15. ICANN - ?

16. ?

17. ?

18. URL - ?

19. ?

20. CC BCC ?

21. ?

22. ?

23. ?

24. (Phishing) ?

Chapter 9.indd 26 15/08/18 2:52 PM

27

- (3 ):

25. (PAN) (CAN) .

26. TCP/IP ?

27. (hotspot)

28. (Data card) (Dongles) .

29. .

30. (. ).

31. , .

32. , .

33. W3C ( ) .

34. ?

- (5 ):

35. ?

36. 5 ?

37. 5 ?

38. 5 .

39. 5 .

40. .

41. , .

1. .

2. .

3. .

4. .

Students is taught to develop Static and Dynamic Websites as workshop.

1. STATIC DYNAMIC .

Chapter 9.indd 27 15/08/18 2:52 PM

28

No.

1 LAN Local Area Network

2 MAN Metropolitan Area Network3 WAN Wide Area Network

4 PAN Personal Area Network

5 CAN Campus Area Network

6 WLAN Wireless Local Area Network7 VSNL Videsh Sanchar Nigam Ltd8 TCP Transmission Control Protocol

9 IP Internet Protocol

10 Host

11 ICANN Internet Corporation for Assigned Names and Numbers12 W3C World Wide Web Consortium13 WWW World Wide Web

14 Tim Berners-Lee

15 DSL Digital Subscriber Line16 ISDN Integrated Services Digital Network17 URL Uniform Resource Locator

18 Dongle , .

19 ADSL Asymmetric Digital Subscriber Line

20 Browser .

21 Search Engine . . ..GOOGLE

22 SERP. ( ). Search Engine Result .

23 Phishing .

24 WebSite .

25 WebPage .

26 EDI Electronic Data Interchange

Chapter 9.indd 28 15/08/18 2:52 PM

29

27 ICT Information and Communication Technology

28 SID

29 Voice mail .

30 e-commerce , .

31 e-governance , , .

32 Internet , .

33 Intranet

34 Extranet . .

:

1. Mastering HTML, CSS & JavaScript Web Publishing Laura Lemay, Rafe Colburn, Jennifer Kyrnin BPB Publications.

2. Informatics Practices, A text book for CBSE class XII Sumita Arora Dhanpat Rai & Co

Chapter 9.indd 29 15/08/18 2:52 PM

30 31

:

,

HTML -

.

HTML -

.

.

10.1 . HTML

.

. HTML ( ) . ,,

.

.

HTML ( )

10HTML -

.

.

.

.

(HTML) SGML(Standard

Generalized Markup Language

.

(HTML)- SGML .

10.2 (Writing HTML Document)

HTML .

. HTML - (TAG)

.

.

HTML CSS III

Chapter 10.indd 30 15/08/18 3:11 PM

30 31

. .

(TAGS) . , etc., HTML , . . (Attributes) . (Style) .

HTML () . (.) ( Tag). (Tags) (Case Sensitive) . HTML (Capital or Small Letters) . . (.). . .

10.2.1 (HTML Document Structure)

, , .

, ,

. ... < /html> .

My First Web Page

This is my First Web Page

HTML .

.

. (.) . . .

Chapter 10.indd 31 15/08/18 3:11 PM

32 33

.

.

. . .

. ....

.

. ( 10.1)

10.1

10.2.2

, , .

.

.

HTML .

, .

Chapter 10.indd 32 15/08/18 3:11 PM

32 33

.

.

,

.

.

10.2.3 (HTML Writing Tools)

. , . , () .

. HTML .( Widows NOTEPAD , LINUX Getit )

10.2.3 (Creating a Webpage)

1 :

Windows7 : Start All Programs Accessories Notepad

Linux : Applications Accessories Text Editor

2 : HTML .

( 10.2)

10.2 Notepad with HTML code

Chapter 10.indd 33 15/08/18 3:11 PM

34 35

3 : File Save CTRL + S .

4 : SaveAS ( 10.3) File Name .htm or .html . SaveAs Type ALL FILES . SAVE

Click .

10.3 Save As

10.2.3.2

1 : . ( Internet Explorer / Mozilla FireFox )

2: File - > open . CTRL + O

( 10.4 )

3: OPEN . OPEN . ( 10.5 )

Now, a menu bar appears

10.4

Chapter 10.indd 34 15/08/18 3:11 PM

34 35

Right - click any where in title bar

From the popup menu click

Menu bar option

Now, a menu bar appears

File Location

Refer File type

Available HTML Files

Click "Open"

10.5 Open

( 10.6)

Chapter 10.indd 35 15/08/18 3:11 PM

36 37

10.6 Internet Explorers with My First Web Page

10.2.3.3 ( Viewing Source file)

(Notepad Getit) . .

.

1 : Click .

2 : View Page Source ( In Fire Fox Chrome Browsers ) / View Source ( in Internet Explorer Browser) Ctrl + U ( ) . .

Internet Explorer View -> Source .

.

10.2.3.4

. . .

.

.

.

( 10.7)

Chapter 10.indd 36 15/08/18 3:11 PM

36 37

Internet Explorer

Mozilla Firefox

Google Chorme

10.7

Click .

OpenWith - > Notepad .

.

File - > Save Ctrl + S .

/

(Minimize).

.

( Refresh in Internet Explorer) / (Reload Current Page in FireFox ) /(reload This Page in Chrome) .

Ctrl + R F5 .

Chapter 10.indd 37 15/08/18 3:11 PM

38 39

10.3 HTML (HTML Attributes)

HTML . . . / .

. Global .

10.3.1

1 .

HTML . . .

. dir lang . .

dir

ltr (- )

rtl ( )

dir - .

Ltr

rtl - .

lang

en

ta

te

lang

. lang .

ml ; kn ; hi ; fr ; de;

Chapter 10.indd 38 15/08/18 3:11 PM

38 39

Entire document aligned right

10.8 HTML

2 . Body

. .... . .

(1 . Background Color ( ) ( bgcolor = color)

. bgcolor .

Background Colour change This is my browser with different colour

Illustration 10.1 HTML code to change background colour of a browser

Chapter 10.indd 39 15/08/18 3:11 PM

40 41


bgcolor - NotepadFile Edit Format View Help

File Edit View Favorites Tools HelpBackground Colour change

This is my browser with different colour

D:\CS_TestBook_Final\HTML\

The Colour of the browser turns in yellow

10.9 Internet Explorer

HTML . . . .

, . (Red) , (Green) , (Blue) . (RGB) . 00 FF . (.). 000000 ( Black) . FFFFFF- , FF0000 .

.

.

140 . # . .

10.1

Color Name Hexadecimal value Color Name Hexadecimal valueRed #FF0000 Olive #808000Blue #0000FF White #FFFFFF

Green #008000 Black #000000

Yellow #FFFF00 Maroon #800000

Chapter 10.indd 40 15/08/18 3:11 PM

40 41

Lime #00FF00 Grey #808080Purple #800080 Aqua #00FFFFSilver #C0C0C0 Brown #A52A2A

.

https://www.w3schools.com/tags/ref_colornames.asp


10.1

(ii)

text = color

(black) . .


10.2 ,

, .

.

(iii) :

Chapter 10.indd 41 15/08/18 3:11 PM

42 43

Background image: background=image

(image) (picture) .

. / (texture) (iamge) (photos) . .

.

Image as background This is my browser with an image as background

10.3

Inserting an image as background

10.10 Internet Explorer

Chapter 10.indd 42 15/08/18 3:11 PM

42 43

.

.

.

, HTML

. HTML ,

.

(. ) ( E:\ .)

.

(iii)

Setting Margins: margin = value

. . Top Margin left Margin .

. (1 72 .)

Chapter 10.indd 43 15/08/18 3:11 PM

44 45

Setting Margins This is my Web page with top and left margin

10.4 HTML

50 50 . 10.11 .

.

50 Pixels from top

50 P

ixel

s fro

m le

ft

10.11 10.5 :

(HTML )

: MY FRIST WEB PAGE

: WELCOME TO A COMPUTER APPLICATION

: LIME

Chapter 10.indd 44 15/08/18 3:11 PM

44 45

: BLUE

: 1

My First Web Page

Welcome to Computer Applications

HTML

.

10.4 (Headings)

. HTML 6 . . H

.

.

Heading text

Chapter 10.indd 45 15/08/18 3:11 PM

46 47

Heading Welcome to Computer Application Welcome to Computer Application Welcome to Computer Application Welcome to Computer Application Welcome to Computer Application Welcome to Computer Application

10.6 HTML

10.12

10.4.1 (Attribute of Headings)

( i ) Align : , , , . . .

ALIGN (Justify) .

< h# align = value>

Chapter 10.indd 46 15/08/18 3:11 PM

46 47

# . Value (Left), (Right), (Center), (Justify) . . .

Heading Welcome to Computer Application Welcome to Computer Application

10.7 HTML

Welcome to Computer Application

Welcome to Computer Application

10.13

10.5 (Line Breaks and Paragraphs)

. (return), (tab) . . ,

.( 10.14)

Chapter 10.indd 47 15/08/18 3:11 PM

48 49

}Multiple lines

Browser display multiple lines as a single statement.

Because, the browser does not recongnize

returns

10.14

.
. .
. ( 10.15)

}

}}

Multiple lines with
tag

Multiple lines without
tag

10.15 < Br>

Chapter 10.indd 48 15/08/18 3:11 PM

48 49

HTML < p > .
. .
(returns) ( ).

.)

Paragraph Business

Business may be defined as any activity in which a man is very much interested and these activities bring him profit, money, prestige and power.

In economic sense, the term business means works, efforts and acts of people, which are connected with the production of wealth and activities, which are directed with the object of making profit.

Production and distribution of goods to consumers for a profit constitute business.

10.7 HTML

. .( 10.16)

10.16

Chapter 10.indd 49 15/08/18 3:11 PM

50 51

(Changing paragraph alignment)

. HTML . , , .
.
align .

align Right, Center Justify .

10.7 10.17

Right aligned Paragraph

Justify aligned Paragraph

Center aligned Paragraph

Source File

10.17 Align

, HTML .

10.6

comments . .

.Comments

Chapter 10.indd 50 15/08/18 3:11 PM

50 51

. comment .

Comment

10.7. (Container and Empty elements)

HTML .

1 . 2.

(Container elements)

.(.).

,, ,

etc.,

(Empty elements)

.

(.). .

(Summary) :

HTML (HYPER TEXT MARKUP LANGUAGE) .

HTML

HTML .

HTML .

.

. , .

, ,

1 HTML

Chapter 10.indd 51 15/08/18 3:11 PM

52 53

HTML

Dir, Lang ,

--

-- Text

Background, Bgcolor, Text, Leftmargin, Topmargin

< h 1 > , . < h 6 >

< / h 1 > , < / h 2 > ,

Align

Align

-- Empty

--- --- Text

I : HTML .

. .

Thai Pongal

Pongal is a harvest festival dedicated to the Sun. It is a four-day festival which according to the Tamil calendar is usually celebrated from 14 January to 17 January.

Thai Pongal is one of the most important festivals celebrated by Tamil people in Tamil Nadu, Puducherry and the country of Sri Lanka, as well as Tamils worldwide, including those in Malaysia, Mauritius, South Africa, the United States, Singapore, Canada, Myanmar (Burma) and the UK.

Thai Pongal corresponds to Makara Sankranthi, the harvest festival celebrated throughout India.

Chapter 10.indd 52 15/08/18 3:11 PM

52 53

.

(a) .

(b) .

(c) .

II

HTML .

. .

My School My School: Chennai Girls Higher Secondary School, Rotler Street, Choolai, Chennai 600 112My Subjects: Tamil, English, Computer Application, Commerce, Accountancy, EconomicsMy Computer Teacher: Mr. K. Kannan, M.Com., M.CA., B.Ed.,

Re-Write the above HTML code to get the following output:

Chapter 10.indd 53 15/08/18 3:11 PM

54 55

- :1. HTML (a) Hyper Transfer Markup Language (b) Hyper Text Markup Language (c) Hyper Transfer Makeup Language (d) Hyper Text Makeup Language

2 . HTML

(a) (Tags) (b) (c) (d)

3. ?

(a) (Tags) (b) (c) (d)

4. HTML . : (a) [ ] (b) { } (c) ( ) (d) < >

5. HTML (a) . (b) . (c) . (d)

6. ? (a) < > (b) % (c) / (d) \

7. ?

(a) Head (b) Body (c) Title (d) Heading

8. ? (a) (b) (c)
(d)

9. HTML . . (a) (b) (c) (d)

10. ?

(a) % (b) # (c) @ (d) &

11. ? (a) bgcolor (c) background (c) text (d) color

Chapter 10.indd 54 15/08/18 3:11 PM

54 55

12. ? (a) margin (b) top (c) topmargin (d) leftmargin

13. HTML ? (a) 6 (b) 4 (c) 8 (d) 3

14. . (a) (b)
(c) (d)

15. HTML (a) (b)

(c) (d)

- (2 ):1. . HTML

. REFRESH /RELOAD . .

2 . , .

3. HTML ? Welcome to my web page 4 . HTML (comments) ? 5 . ?

- (3 ):1. ( Body) ?2 . HTML ?3 . ?4 . HTML ?

Chapter 10.indd 55 15/08/18 3:11 PM

56 PB

HTML . HTML . .

, HTML .

. .

. . .

Notepad Windows- .Getit Linux- .Windows Microsoft GUI .Linux Internet Explorer -

Mozilla Firefox Linux windows .

Chrome Google

:


2. Informatics Practices, A text book for CBSE class XII Sumita Arora Dhanpat Rai & Co.

3. Computer Application (Commerce) Text book of XII Department of Education SCERT, Kerala.

4. https://www.w3schools.com/html/default.asp

Chapter 10.indd 56 15/08/18 3:11 PM

PB 57

:

:

HTML .

HTML- .

.

,

.

11.1 HTML (Text Formatting Tags of HTML)

. ,

, , , ,

,

. ,

.

.

11.1.1 Bold, Italics, Underline , , , , . .

. Physical Style .

11.1 Physical Style

/.

. .

.

.

.

11HTML, CSS HTML , ,

III

Chapter 11.indd 57 15/08/18 6:09 PM

58 59

Text Formatting

Kancheepuram

Kancheepuram is part of Tondaimandalam

Kancheepuram is 72 km away from Chennai

It is the administrative headquarters of Kancheepuram District.

Kanchipuram is well-connected by road and rail.

Chennai International Airport is the nearest domestic and international airport to the town, which is located at Tirusulam in Kanchipuram district.

11.1

:

11.1.2

HTML Bold italic , . , .

.

. . .

Chapter 11.indd 58 15/08/18 3:49 PM

58 59

- Emphasized text

. (Italics) .

. . .

Additional Text Formatting Tags Welcome to Tamilnadu
Welcome to Tamilnadu

11.10

11.1.3

. / .

. (Container tags) .

Chapter 11.indd 59 15/08/18 3:49 PM

60 61

Small and Big tags

Govenment of Tamilnadu

Madurai Corporation welcomes you

Thank you! Visit again

11.11

:

Normal Text

SmallBig

11.1.4 (Highlighting text)

. . HTML . .

and . () .

Chapter 11.indd 60 15/08/18 3:49 PM

60 61

Highlighting text A Computer is an electronic device

11.12

:

11.1.5 Subscript and Superscript

(Subscript) . (.) (Water) H2O . H2O . 2 . .

(Super Scripts) . . a plus b the whole square . (a+b)2. , (Super Script) .

.

HTML . .

. .

Chapter 11.indd 61 15/08/18 3:49 PM

62 63

Subscript and Superscript The scientific notation of Water is H2O
(a+b)2 = a2 + 2ab + b2

: 11.13

:

The Scientific notation of Water is H20

(a+b)2=a+2ab+b2

11.1.6 (Inserting and Deleting)

. . .

. .

, . .

Chapter 11.indd 62 15/08/18 3:49 PM

62 63

Inserting and Deleting text I am coming from Madras Chennai

: 11.14

:

11.1.7 (Strike through):

. ( ) . . ( ) .

11.1.8 (Comparison of tags ):

. . , , . ,

. .

Chapter 11.indd 63 15/08/18 3:49 PM

64 65

.

.

.

.

.

.

.

.

.

.

.

.

HTML . .

11.1.9 (The Center Tag)

Align . . . .

.

:

text be centralize

Center the text Thiruvallur Thiruvallur was originally known as Thiruvallur which specifies the

sleeping position of the holy lord "Balaji" , in the Veeraragava swamy temple of Thiruvallur.

11.11 ( Centralize the text)

Chapter 11.indd 64 15/08/18 3:49 PM

64 65

:

11.2 , (Changing font style, size and color):

, . . . .

.

.

. (.) Times New Roman . Arial . .

.

.

:

Text to be displayed

face .

.

Size . 1 7 .

Chapter 11.indd 65 15/08/18 3:49 PM

66 67

. ,

20 % .

Color- . Color .

Changing Font Properties Font Size 1
Font Size 2
Font Size 3
Font Size 4
Font Size 5
Font Size 6
Font Size 7

11.11.

:

Chapter 11.indd 66 15/08/18 3:49 PM

66 67

HTML5 .

face (Multiple fonts with face attribute):

face . Face .

.

Welcome to HTML

, .

,

.

.

.

Bookman old style1 Broadway1 . ( ). Welcome to HTML Forte . Forte , Arial .

.

Times New Roman .

11.3 (Section Break)

(Horizontal Rules) , . .

.

Chapter 11.indd 67 15/08/18 3:49 PM

68 69

Horizontal Tag Tamil Language Tamil is a Dravidian language predominantly spoken by the Tamil people of India, Sri Lanka, Singapore, Malaysia, Mauritius and South Africa Tamil is an official language of India (Tamilnadu and Puducherry), Sri Lanka and Singapore.

11.12 HTML

:

Chapter 11.indd 68 15/08/18 3:50 PM

68 69

size, width, noshade color . , ,

.

:

(Size):

size . (pixels) . . 72 . . 1 . 3 .

(Width):

. . Width ,

. Width . 100%.

:

.

Noshade:

3D . noshade . noshade . noshade .

Color:

. Color ,

Color .

: HTML5 .

Chapter 11.indd 69 15/08/18 3:50 PM

70 71

Horizontal Line Attributes Rule with size 72pixels Rule with size 36pixels, 50% width Rule with size 18pixels, 30% width, in 2D Rule with size 9pixels, 50% width, 2D, in Green color

11.13: .

:

11.4 HTML- (Tables in HTML)

. . HTML 3.2 . HTML 3.2 .

Chapter 11.indd 70 15/08/18 3:50 PM

70 71

, . HTML- .

11.4.1 (Tags to create table elements)

There are five core tags are used to create a table in HTML. They are,

.

.

tag defined table columns

.

.

, .

11.4.2 (Creating Table)

With the following illustration, you can learn how to create a table in HTML.

Creating Table Books and Authors Book Author Publisher Foxpro 2.5 R.K. Taxali BPB Publications Visual Basic .NET Jeffrey R. Shapiro Tata McGraw Hill

11.14: HTML code to Table tags

Chapter 11.indd 71 15/08/18 3:50 PM

72 73

Core Java Vol 1 Horstmann Cornell Pearson

HTML . Books and Authors .

. , . . . , .

.

.

The output will be:

Tabl

e Bl

ock

Row

1

Column heading

Row 2 - Data

Row 3 - Data

Row 4 - Data

Table heading

Books and Authors

Book Author Publisher

Foxpro 2.5 R.K. Taxali BPB Publications

Visual Basic .NET Jeffrey R. Shapiro Tata McGraw Hill

Core Java Vol 1 Horstmann Cornell Pearson

{{{{

Row

2R

ow 4

Row

3

Chapter 11.indd 72 15/08/18 3:50 PM

72 73

:

Books and Authors

Book Author Publisher

Foxpro 2.5 R.K. Taxali BPB Publications

11.4.3 (Attributes of table)

. . :

1. Cellspacing

. .

2. Cellpadding

.

.

3. Border:

border , . Border . Border , HTML . .

4. Bordercolor:

.

Chapter 11.indd 73 15/08/18 3:50 PM

74 75

5. Align:

Align .

6. BGcolor

.

7. Height and Width

, Width Height .

.

Table with Attribute Class Boys Girls VI 150 165 VII 146 151 VIII 107 110

11.15: HTML

Chapter 11.indd 74 15/08/18 3:50 PM

74 75

:

Attributes of , and tags:

1. Align

. .

.

2. VAlign

.

.

3. Width

. .

4. BGcolor and Background

Bgcolor . Background .

5. Rowspan and Colspan

Rowspan .

Colspan .

Chapter 11.indd 75 15/08/18 3:50 PM

76 77

Attributes of td, tr and th tags Govt. Hr. Sec. School, Mullai Nagar, Thiruvallur Boys and Girls Strength during 2016-17 and 2017-18 Class Group 2016 - 17 2017 - 18 Boys Girls Boys Girls XI Science 75 82 65 96 Commerce 125 147 118 163 XII Science 86 97 71 106

11.16: ,

Chapter 11.indd 76 15/08/18 3:50 PM

76 77

Commerce 145 186 130 198

:

HTML (Lists in HTML)

HTML , .

.

1. / (Numbered List / Ordered List)

.. . . . . .

Chapter 11.indd 77 15/08/18 3:50 PM

78 79

Number List Tamil Telugu English Computer Application Commerce Accountancy Economics

11.17: HTML

:

/ (Attributes of Ordered List):

.

(1) Type (changing numbering style)

(2) Start (changing numbering order).

Chapter 11.indd 78 15/08/18 3:50 PM

78 79

Type Type . (1,2,3,).

1 1,2,3,4,.a a, b, c, d,

A A, B, C, D ..

i i, ii, iii, iv, v I I, II, III, IV, V ..

Start . 1 . Start .

Attribute of OL tag Physics Chemistry Biology Botany Zoology

11.18: OL

Chapter 11.indd 79 15/08/18 3:50 PM

80 81

:

2. / (Un-numbered List / Unordered List)

.

.

. .

Unordered List Chennai G Hr. Sec. School, Rotler Street, Chennai 600 112. Karnakata Sanga Hr. Sec. School, T. Nagar, Chennai 600 017. S.M.B. Jain Hr. Sec. School, T. Nagar, Chennai 600 017. Chennai G Hr. Sec. School, Nungambakkam, Chennai 600 034. Chennai G Hr. Sec. School, Saidapet West, Chennai 600 015 Santhome Hr. Sec. School, Mylapore, Chennai 600 004.

11.20: HTML

Chapter 11.indd 80 15/08/18 3:50 PM

80 81

:

(Attribute of Unordered List):

type .

Disc Square

Circle o

Attribute of UL tag Chennai G Hr. Sec. School, Rotler Street, Chennai 600 112. Karnakata Sanga Hr. Sec. School, T. Nagar, Chennai 600 017.

11.21: HTML

Chapter 11.indd 81 15/08/18 3:50 PM

82 83

S.M.B. Jain Hr. Sec. School, T. Nagar, Chennai 600 017. Chennai G Hr. Sec. School, Nungambakkam, Chennai 600 034. Chennai G Hr. Sec. School, Saidapet West, Chennai 600 015 Santhome Hr. Sec. School, Mylapore, Chennai 600 004.

:

3. ( Definition List)

. .

.

(1) (A definition term)

(2) (The definition description)

. .

.. .

.

Chapter 11.indd 82 15/08/18 3:50 PM

82 83

Definition List HTML: Hyper Text Markup Language Webpage: A web page is a document that is suitable for the World Wide Web and web browsers. A web browser displays a web page on a monitor or mobile device.

11.22: HTML

:

Definition List

(Nested Lists):

.

Chapter 11.indd 83 15/08/18 3:50 PM

84 85

Nested List Districts of Tamilnadu Chennai Madurai Coimbatore District of Kerala Thiruvananthapuram Palakkad Idukki

11.23: HTML

:

Chapter 11.indd 84 15/08/18 3:50 PM

84 85

(Links):

HTML- . .

HTML , ,

.

HTML- ,

(1) URL .

(2) Click .

HREF Hypertext Reference .

Structure of an anchor tag with href:

Text Clickable link

:

SCERT

Clickable text

URL to load

http://thscert.org/index.html . click

.

(Internal Links) :

. (Name) . ,

.

Chapter 11.indd 85 15/08/18 3:50 PM

86 87

South India South India

South India is the area encompassing the Indian states of Andhra Pradesh, Karnataka, Kerala, Tamil Nadu and Telangana as well as the union territories of Lakshadweep, Andaman and Nicobar Islands and Puducherry, occupying 19% of India's area (635,780 km2 or 245,480 sq mi).
Andhra Pradesh
Andhra Pradesh is one of the 29 states of India. Situated in the south-east of the country, it is the eighth-largest state in India. The largest city in Andhra Pradesh is Visakhapatnam.
Karnataka
Karnataka is a state in the south western region of India. It was formed on 1 November 1956, with the passage of the States Reorganisation Act. Originally known as the State of Mysore, it was renamed Karnataka in 1973. The capital and largest city is Bangalore (Bengaluru).

11.24: HTML :

Kerala

Kerala is a state in South India on the Malabar Coast. It was formed on 1 November 1956 following the States Reorganisation Act by combining Malayalam-speaking regions. It is divided into 14 districts with the capital being Thiruvananthapuram.
Tamilnadu
Tamil Nadu literally 'The Land of Tamils' or 'Tamil Country' is one of the 29 states of India. Its capital and largest city is Chennai (formerly known as Madras).

HTML Link Colors (Link) . . CSS

. .

Chapter 11.indd 86 15/08/18 3:50 PM

86 87

(External Link):

. HREF URL .

Links Welcome to
State Council of Educational Research and Training, Tamilnadu

11.25: / HTML

Linking two pages Applications of OpenOffice OpenOffice Writer OpenOffice Calc OpenOffice Impress

11.25: HTML :

Chapter 11.indd 87 15/08/18 3:50 PM

88 89

------------------------------------------------

OpenOffice Writer OpenOffice Writer

Writer has everything you would expect from a modern, fully equipped word processor.

It is simple enough for a quick memo, yet powerful enough to create complete books with contents, diagrams, indexes, etc. You're free to concentrate on your ideas while Writer makes them look great.
Back to Home
------------------------------------------------

OpenOffice Calc OpenOffice Calc

Calc is the spreadsheet application you've always wanted. Newcomers find it intuitive and easy to learn; professional data miners and number crunchers will appreciate the comprehensive range of advanced functions.

DataPilot is an advanced technology that makes it easy to pull in raw data from corporate databases; cross-tabulate, summarize, and convert it into meaningful information.
Back to Home
Chapter 11.indd 88 15/08/18 3:50 PM

88 89

------------------------------------------------

OpenOffice Impress OpenOffice Impress

Impress is a truly outstanding tool for creating effective multimedia presentations. Your presentations will stand out with 2D and 3D clip art, special effects, animation, and high-impact drawing tools.
Back to Home
, , , . Physical Style .

HTML - . .

.

, .

, .

(Horizontal Rules) . HTML .

.

HTML 3.2 .

HTML 5 .

HTML , . , .

HTML . HTML .

.

Chapter 11.indd 89 15/08/18 3:50 PM

90 91

1. HTML 10

.

.

2. HTML :

.

.

3. HTML :

Students studying Computer Subjects

SN SchoolNo. of Students

Comp. Science

Comp. Application

Comp. Technology

1 Govt. HSS, M.K.B. Nagar, Chennai 39 25 62 --2 Chennai G HSS, M.H. Road, Chennai 11 123 141 873 Dr. GMTTV HSS, Amman Koil St., Chennai 79 45 76 234 Chennai G HSS, Rotler St, Chennai 112 18 63 435 Chennai B HSS, G.Koil St., Chennai 84 31 52 15

4. 4 HTML .

Population( ) (11 : 228-229. 11.5 ) .

o Density, Urbanisation and Sex ratio.

( Density), ( Urbanisation) (Sex ratio) (11- : 229. 11.5.1, 11.5.2 11.5.3).

.

Chapter 11.indd 90 15/08/18 3:50 PM

90 91

-

:1. PHYSICAL STYLE ?

() , ,
() ,
, () , , () , ,

2. ?() () () ()

3. :() Subject and Super ()Subscript and Super() Subject and Superscript () Subscript and Superscript

4. () Style () Character() Font () List

5. () () () ()

6. :(a) tfoot - (1) Order list(b) start - (2) Hyperlink(c) href - (3) Highlight(d) mark - (4) Table

(a) (b) (c) (d) () 4 1 2 3 () 1 4 3 2 () 4 3 2 1 () 1 2 4 3

7. ?() 5 () 4 () 3 () 2

8. :() Inner List () Nested List() Outer List () Listing List

9. :(I) HTML .(II) HREF Hypertext Markup File

() I is correct () II is correct () I and II is correct () Both are wrong

Chapter 11.indd 91 15/08/18 3:50 PM

92 93

10. ? () link () name () local () Inter

- (2 ):1. (i) (ii) 2. ?3. HTML : Pd = 25 Q24. font .5. ?6. ?7. HTML- ?8. ?

- (3 ):1. HTML

I am studying Computer Science Application.2. .3. ?4. https://www.w3schools.com HTML . 5. .6. HTML .

A BC

-

1. HTML .

MODERN ATOMIC THEORYThe findings of modern atomic theory are given as follows: An atom is the smallest particle which takes part in chemical reaction. An atom is considered to be a divisible particle. The atoms of the same element may not be similar in all respects. eg: Isotopes (17Cl

35, 17Cl37)

The atoms of different elements may be similar in some respects. eg. Isobars (18Ar40, 20Ca

40)

2. .3. HTML .4. ? .5. HTML :

A BC D E G

F

Chapter 11.indd 92 15/08/18 3:50 PM

92 93

Text Formatting .

Font .

Table ..

Cell .

Border .

Column .

Row .

Ordered List .

Unordered List .

Definition List .

Link .

Hyperlink .

Internal Link .

Local Link Internal LinkExternal Link .

:


2. Informatics Practices, A text book for CBSE class XII Sumita Arora Dhanpat Rai & Co.

3. Computer Application (Commerce) Text book of XII Department of Education SCERT, Kerala.

4. https://www.w3schools.com/html/default.asp

Chapter 11.indd 93 15/08/18 3:50 PM

94 95

:

:

HTML .

, .

HTML .

12.1 (Inserting Images)

HTML , . , .

, ,

.

. , GIF, JPEG PNG . HTML-5 SVG . Photoshop, Picassa, GIMP .

12.1.1 (Familiar Image Formats)

GIF (Graphical Interchange Format)

. Compuserve . ,

, , ,

. 256 , . GIF (Playback) .

JPEG (Joint Photographic Experts Group)

JPEG , . GIF , JPEG .

12HTML

HTML - Adding Multimedia Elements and Forms

III HTML, CSS

Chapter 12.indd 94 15/08/18 4:01 PM

94 95

PNG (Portable Network Graphics)

GIF PNG . .

SVG (Scalable Vector Graphics)

SVG. 2001-, W3C . SVG .

12.1.2 HTML (Inserting Images with HTML document)

HTML src (Source) .

:

(OR)

:

Src . ,

URL .

:

Inserting Images Bharathiyar

12.1: HTML

Chapter 12.indd 95 15/08/18 4:01 PM

96 97

:

E:\CS_TestBook_Final\ Inserting images

Bharathiyar

File Edit View Favorites Tools Help

12.1.3 (Other Attributes of tag):

Src , .

Alt ( )

, alt .

:

Width Height:

Width Height . , (pixels) () .

Vspace (Vertical Space) Hspace (Horizontal Space):

Vspace Hspace .

Chapter 12.indd 96 15/08/18 4:01 PM

96 97

Inserting Images Mahakavi Bharathi

12.2: HTML

:

E:\CS_TestBook_Final\ Inserting imagesFile Edit View Favorites Tools Help

Mahakavi Bharathi

Align:

Align . .

Chapter 12.indd 97 15/08/18 4:01 PM

98 99

Bottom . .

Middle .

Top .

Align Left Right :

Align left right , , .

Attributes of tag Attributes of image tag This text is aligned in the bottom of the image by default

This text is aligned in the top of the image

This text is aligned on the middle of the image

12.3: HTML

:

D:\CS_TestBook_Final\


This text is aligned in the bottom of the image by default

This text is aligned in the top of the image

This text is aligned in the middle of the image

Attributes of image tag

Attributes of tag

Chapter 12.indd 98 15/08/18 4:01 PM

98 99

12.2 Marquee

(Scrolling text using )

HTML , , . , .

:

Text or image to be scroll

Height and Width

marquee .

.

Direction

. , . ,

. up, down, left right .

Behaviour:

. scroll, slide alternate .

Scrolldelay:

.

.

Scrollamount:

.

Loop:

marquee . infinite, marquee .

Chapter 12.indd 99 15/08/18 4:01 PM

100 101

Bgcolor:

marquee .

Hspace Vspace:

marquee .

. .

Marquee The Government of Tamilnadu , Directorate of School Education

Welcome to The State Council of Educational

Research and Training , Tamilnadu

12.4: marquee HTML

12.3 Adding Video and Sound

. HTML . / /

.

, / .

(url) / .

/ . . .

Src . src . alt, height, width and align .

:

Chapter 12.indd 100 15/08/18 4:01 PM

100 101

Adding Multimedi Files Welcome to The State Council of Educational Research and Traning , Tamilnadu

12.5: / HTML

:

12.3.1 (Background music):

, . / . HTML / . Src .

. loop . infinite .

:

Chapter 12.indd 101 15/08/18 4:01 PM

102 103

Inline Sound Welcome to The State Council of Educational Research and Training

, Tamilnadu

12.6: HTML

12.4 (Working with Forms)

, (Forms) . ,

, . ,

.

. HTML . , , , ,

.

submit , . name .

, , .

.

12.4.1 (Attributes frequently used with tag)

method action .

Method

method , , .get , ,

Chapter 12.indd 102 15/08/18 4:01 PM

102 103

URL .post , .

Action

action , . .

, (), Active Server Pages (ASP) . ( .)

Form elements

12.4.2 (Form Controls):

HTML , . , , , , ,

, Submit Reset .

D:\CS_TestBook_Final\ HTML - Form and Co..


Students Data Entry Form

Student Name: Text Boxes

Radio Buttons

Check boxes

Select box

Text AreaPush buttons

Gender:

Email:

Boy Girl

Subjects: Tamil Telugu English Physics Economics

City / Town: Madurai

Comments:

Clear Submit

12.1 HTML Form Controls

Chapter 12.indd 103 15/08/18 4:01 PM

104 105

12.4.2.1

. , .

:

Type:

type . type .

Text . . ,

.

Password ,

.

Checkbox

Check box . (tiny tick) .

..

Radio Button

. .

.

. ,

,

.

Reset

.

Submit

.

Button

.

Name:

Name , .

.

Chapter 12.indd 104 15/08/18 4:01 PM

104 105

Value:

.

Size:

. .

Maxlength:

( ) .

.

Login Form TamilNadu State Council of Educational Research and Training, Chennai

User Name:

Password:

12.7: ( ) HTML

Chapter 12.indd 105 15/08/18 4:01 PM

106 107

:

D:\CS_TestBook_Final\ Login Form

User Name:

Password:

Clear Login


TamilNadu State Council of Educational Research and Traning, Chennai

: action mailto .

HTML - Form and Controls Forms and Controls

Student Name:

Gender: Boy Girl

Subjects: Tamil Telugu English Physics

12.8: (, ) HTML

Chapter 12.indd 106 15/08/18 4:01 PM

106 107

Economics

:


Student Name :

Gender:

Subjects: Tamil

Clear

Telugu English

Submit

Physics Economics

Boy Girl

Forms and Controls


12.4.2.2

HTML . .

. .

:

Name .

Size

Size = 1

Size = 2

Multiple .

Chapter 12.indd 107 15/08/18 4:01 PM

108 109

Selected .

Value


Student Name:

City / Town: Chennai Madurai Coimbatore Kanyakumari

12.9: HTML ( )

:



Forms and ControlsStudent Name :

ChennaiMaduraiCoimbatoreKanniyakumari

City / Town:

Clear Submit

Chapter 12.indd 108 15/08/18 4:01 PM

108 109

12.4.2.3

. .

Name .

Rows .

Cols text area .( )


Student Name:

Email:

Comments:

12.10: (Text area- ) HTML

:



Forms and ControlsStudent Name:

Email:

Comments:

Clear Submit

Chapter 12.indd 109 15/08/18 4:01 PM

110 111

HTML - Form and Controls Students Data Entry Form

Student Name:

Email:

Gender: Boy Girl

Subjects: Tamil Telugu English Physics Economics

City / Town: Chennai Madurai Coimbatore Kanyakumari

Comments:

12.11: HTML

Chapter 12.indd 110 15/08/18 4:01 PM

110 111



Students Data Entry FormStudent Name:

Email:

Gender:

Subjects:

City / Town:

Comments:

Clear Submit

Madurai

Tamil Telugu English Physics Economics

Boy Girl

:

HTML .

GIF, JPEG PNG .

HTML src (Source)- .

HTML , .

HTML , / / .

/ .

, .

, HTML .

Chapter 12.indd 111 15/08/18 4:01 PM

112 113

.

HTML .

.

HTML , .

.

:

:

1. , HTML .2. HTML .

D:\CS_TestBook_Final\ Students Entry From


Govt. Hr. Sec. School, Thiruvallur

Name of the Student:

Date of Birth:

Mother Tongue:

Optional Subjects (Select any 2):Environmental ScienceHistory of SciencePolitical ScienceInformation Technology

Reset Submit

TamilTeluguMalayhalam

Boy GirlGender:

Chapter 12.indd 112 15/08/18 4:01 PM

112 113

-

.

1. W3C ? (A) JPEG (B) SVG (C) GIF (D) PNG

2. HTML : (A) Image (B) Picture (C) Img (D) Pic

3. HTML :

(A) (B) (C) (D)

4. HTML ? (A) (B) (C) (D)

5. ?

(A) Stop (B) Never Stop (C) Continue (D) Infinite

6. (A) method and action (B) name and size (C) post and get (D) type and name

7. HTML , (A) (B) (C) (D)

8. : (a) - (1) inline () (b) - (2) Video () (c) - (3) Multiline input ( ) (d) - (4) Password ( )

(a) (b) (c) (d) (A) 3 1 4 2 (B) 3 4 1 2 (C) 2 3 4 1 (D) 2 1 3 4

-

(2 ):1. .2.

Chapter 12.indd 113 15/08/18 4:01 PM

114 PB

3. / ?4. ?5. ?6. ?

-

(3 ):1. .2. HTML , ?3. .4. type .5. .

:

, .

GIF Graphical Interchange Format.

JPEG Joint Photographic Experts Group.

PNG Portable Network Graphics.

SVG Scalable Vector Graphics.

Photoshop Adobe

Picasa Lifescape

GIMP

HTML 5 w3c

W3C www - ,

:


2. Informatics Practices, A text book for CBSE class XII Sumita Arora Dhanpat Rai & Co.3. Computer Application (Commerce) Text book of XII Department of Education

SCERT, Kerala.4. https://www.w3schools.com/html/default.asp

Chapter 12.indd 114 15/08/18 4:01 PM

PB 115

:

,

CSS- .

HTML , CSS .

HTML- CSS .

:

HTML .

, ,

. ( )

.

, .

Usage of the tag h3

{ color:blue; font-family: "Copperplate Gothic Bold"; font-size:14pt; }

Welcome to learn HTML Welcome to learn CSS Welcome to lean JavaScript

13CSS

HTML, CSS III

Chapter 13.indd 115 15/08/18 4:10 PM

116 117

. .

.

HTML . HTML . (Page-Level Styles or Internal Style sheets) .

, HTML .

.

(Sitewide Style sheets or External Style Sheets) . .

HTML . ( inline Style) . HTML . .

, .

.

CSS ( )

(Sitewide Style Sheets):

(CSS) . . HTML- . CSS- , , , , , ,

, ,

Chapter 13.indd 116 15/08/18 4:10 PM

116 117

HTML . CSS (extension) .

(Advantages of CSS)

(Maintainability) - CSS ,

.

(Reusability) CSS- HTML .

(Easy to understand) .

(HakonWium Lie)

1994 ,10 CSS- . W3C CSS . CSS

. W3C .

.

CSS (Style definition rules)

.

HTML { : ; }

CSS (Selector) HTML . . ({ }) . . . (:) . (;) .

:

Chapter 13.indd 117 15/08/18 4:10 PM

118 119

P { Font-size : 16pt; color : red; font-weight : bold;}

. ,

.

, . .css .

CSS

CSS-Frequently using Text formatting properties and values

..

Predefined_Color_Name P { color:pink; }H1 { color : MediumSeaGreen; }

Text-align Center / Left / Right / Justify P{ Text-align : center;}

Font-family Font_name P{ Font-family : Times New Roman;}

Chapter 13.indd 118 15/08/18 4:10 PM

118 119

Font-style Normal / Italic P{ Font-family : Times New Roman; Font-style : Italic;}

() Font-weight Normal / Bold P

{ Font-family : Times New Roman; Font-style : Italic; Font-weight : bold;}

Font-size Size in pixels P{ Font-family : Times New Roman; Font-style : Italic; Font-size : 14px;}

Background Colour

Predefined_Color_Name Body

{

background-color : violet;

}

Border Border thickness

border style Predefined_borderColor_Name

H2 { border : 2px solid red; }

HTML 140 Background-

imageURL (image name with extension)

Body

{

background-image : url (Flower.gif );

}

Chapter 13.indd 119 15/08/18 4:10 PM

120 121

Background-repeat

norepeat Body

{


background-repeat : norepeat;

}

Background-position

Direction Body

{


background-repeat : norepeat;

background-position : right top;

} Margin-top

Margin-bottom

Margin-left

Margin-right

Margin size in pixels P

{

Margin-top : 50px;

Margin-left : 50px;

}

CSS :

notepad .

.

.css .

Chapter 13.indd 120 15/08/18 4:10 PM

120 121

P {

font-style : Italic;

color :MediumSeaGreen;

}

H1

{

border:2px solid red;

}

.css .

13.1 CSS

CSS HTML-

CSS HTML . , . rel = stylesheet

type = text/css

href .css .

Mystyle.cssH1{ font-family : "Comic Sans MS"; Font-weight : Bold; border:2px solid blue;}P { font-style : Italic; color :MediumSeaGreen;}

13.2 HTML CSS

Chapter 13.indd 121 15/08/18 4:10 PM

122 123

--- CSS_Test.htm --- Demonstration of using CSS Welcome to CSS

CSS was invented by HakonWium Lie on October 10, 1994 and maintained through

a group of people within the W3C called the CSS Working Group. The CSS Working Group creates documents called specifications. When a specification has been discussed and officially ratified by W3C members, it becomes a recommendation.

Output will be:

Chapter 13.indd 122 15/08/18 4:10 PM

122 123

--- Back_Color.css ---body{ background-color : pink;}

--- Background_CSS.htm --- Changing Background using CSS Welcome to CSS

13.2 CSS

CSS . . /*.....this is a comment in style sheet.....*/. .

CSS - Workshop1. CSS- .2. . HTML

CSS- .

:

, HTML .

.

.

CSS .

CSS , . HTML .

CSS (mark up) HTML XHTML- .

HTML . .

Chapter 13.indd 123 15/08/18 4:10 PM

124 125

-

:1. CSS () Cascading Style Schools () Cascading Style Scheme () Cascading Style Sheets () Cascading Style Shares

2. ? () () () ()

3. CSS : () Sitewide Style Sheets () Internal Style Sheets () Inline Style Sheets () Internal Inline Sheets

4. CSS ? () .ssc ) .css () .csc () .htm

5. ? () () () HTML ()

6. CSS ? () ( ) () [ ] () { } ()

7. . () : ) ; () . () ,

8. ? () Font-Style () Font-Weight () Font-Property () Font-Bold

9. ? () /* */ () !* *! () () \* *\

10. CSS ? ()p{color:red; text-align:center}; () p {color:red; text-align:center} () p {color:red; text-align:center;} () p (color:red;text-align:center;)

-

(2 ):1. ?2. CSS ?3. CSS- HTML .4. ?5. CSS .

Chapter 13.indd 124 15/08/18 4:10 PM

124 125

-

(3 ):1. CSS ?2. CSS .3.

CSS .4. , CSS

.

-

(5 ):1. CSS HTML : Font Name : Cooper Black Style : Bold Italics Color : Blue

The State Institute of Education (SIE) was established in 1965 to provide for systematic study of problems relating to School Education under the administration of Directorate of School Education.

2. CSS- .

-

- HTML

- HTML

-

:

Mastering HTML, CSS & JavaScript Web Publishing Laura Lemay, Rafe Colburn, Jennifer Kyrnin BPB Publications.

Informatics Practices, A text book for CBSE class XII SumitaArora DhanpatRai& Co.

Computer Application (Commerce) Text book of XII Department of Education SCERT, Kerala.

https://www.w3schools.com/html/default.asp

Chapter 13.indd 125 15/08/18 4:10 PM

126 127

.

(Client Side)

.

,

,

.

HTML CSS (Webpages) .

.

(Internet)

.

14.1 (Introduction to JavaScript):

4, 1995, Netscape Sun Inc. JavaScript 1.0 . HTML

14JavaScript

IV

(Common Gateway Interface (CGI) .

.

,

.

(client-side technology) CGI

. ,

.

, submit

.

14.2 (Advantages of Java Script

Programming Language)

HTML (Static Web page) .

.

(Dynamic Web Page) .

Chapter 14.indd 126 15/08/18 4:25 PM

126 127

(Validation). , .

(Textboxes) .

.

14.3 - HTML (Using JavaScript in HTML page with tag) :

... . - , . .

Hyper Text Markup Language (HTML) Dynamic Hyper Text Markup Language (DHTML) .

JavaScript code

Language . , . HTML (EXtensible HyperText Markup Language - XHTML) .

Type "text/javascript" .

14.3.1 (Steps to follow to code Java Script Language)

HTML .

.

. : Internet Explorer,

Chapter 14.indd 127 15/08/18 4:25 PM

128 129

Google Chrome .

, Open . ,

"Refresh" F5 .

14.3.2 (First JavaScript Program)

My First JavaScript Program document.write("Hello World!")

Listing 14.1 Simple JavaScript Program

Output:

14.4

(Lexical Structure of a JavaScript Program)

. .

. ,

.

Chapter 14.indd 128 15/08/18 4:25 PM

128 129

, ,

.

(, , ,

).

.

// . /* */ .

(;) . .

. , .

. -

.

.

.

14.5 (Java Script Variables):

.

. Var - . .

14.5.1 :

. ,

.

,

. ,

.

.

.

.

.

Chapter 14.indd 129 15/08/18 4:25 PM

130 131

var

. -

.

var no; or var no1,no2;

var no; no , var no1,no2; no1 no2 .

14.5.2 (Rules for Naming Variables)

1. (_) . .

2. , . ,

.

3. (Case sensitive). , Register Number register number .

4. .

5. - .

. .

14.5.3 (Scope of Variables):

,

.

.

.

.

14.5.4 (Assigning values to variables):

:

Chapter 14.indd 130 15/08/18 4:25 PM

130 131

var numericData1 = 522;

var stringData = "JavaScript has strings\n It sure does";

var numericData = 3.14;

var booleanData = true;

Demo Program - Declaring Variables in JavaScript

var numericData1 = 522;

var stringData = " JavaScript has strings\n It sure does";

var numericData = 3.14;

var booleanData = true;

document.write("Numeric Data : "+numericData1);

document.write("
String Data : "+stringData);

document.write("
Floating Data : "+numericData);

Listing 14.2 Declaring Variables (

Output

var .

Chapter 14.indd 131 15/08/18 4:25 PM

132 133

var no1=50, no2=5065;

-

.

. ,

. ,

var value=100;

var value=JavaScript;

14.5.4 (JavaScript Literals)

.

. , , ,

. ,

var int_const=250; //Integer constant//

var float_const=250.85; //Floating point constant//

var char_const=A; //Character constant//

var string_const=Raman; //String constant//

var boolean_const=true; //Boolean constant//

14.5.1 (Type casting in JavaScript).

, . - .

.

14.6 (JavaScript Operators and Expressions)

. , , ,

.

Chapter 14.indd 132 15/08/18 4:25 PM

132 133

-

. ,

.

. .

, .

.

.

. .

14.6.1 (Arithmetic Operators)

(+), (), (*), (/), (%) .

+ var sum = 20 + 120 Variable sum = 140- var diff = 20 120 Variable diff = 100

* var prod = 10 * 100 Variable prod = 1000

/ var res = 100/522 Variable res = 5.22

% var rem = 100 % 522Variable rem = 22 ( r e m a i n d e r )

14.1

Demo Program To test Arithmetic Operators in JavaScript

Listing 14.3 Using Arithmetic Operators ( )

Chapter 14.indd 133 15/08/18 4:25 PM

134 135

var value1 = 522, value2=10;

document.write("
Data1 : "+value1);

document.write("
Data2 : "+value2);

var sum = value1+value2;

var diff = value1-value2;

var prod = value1*value2;

var res = value1/value2;

var rem = value1%value2;

document.write("

The Sum of Data1 and Data2 : "+sum);

document.write("
The Difference of Data1 and Data2 : "+diff);

document.write("
The Product of Data1 and Data2 : "+prod);

document.write("
The Result after Division of Data1 and Data2 : "+res);

document.write("
The Remainder after Division of Data1 and Data2 : "+rem);

Output:

14.6.2 (Assignment Operators)

.

.

Chapter 14.indd 134 15/08/18 4:25 PM

134 135

= - , . .

,

var number1=10;

var number2=number1;

var name=Computer Science;

var booleanvar=true;

.

= . ,

var m = n = z = 25; // 25 //

,

var x = 102 + 5 - 50; // x set to 57 //

+=, -=, *=, /= and %=

+=

var sum = 120;sum += 20;

Variable sum = 140

-=

var diff = 120;diff = 20;

Variable diff = 100

*=

var prod = 100;prod *=10;

Variable prod = 1000

/=

Var res = 522;Res/=100

Variable res = 5.22

%=

Var rem = 522;rem %= 100

Variable rem = 22 ( r e m a i n d e r )

14.2

Chapter 14.indd 135 15/08/18 4:25 PM

136 137

Demo Program - To test Arithmetic Shorthand Operators in JavaScript Demo Program - To test Arithmetic Shorthand Operators in JavaScript var value1 = 522, value2=10; document.write("
Data1 : "+value1); document.write("
Data2 : "+value2); var sum = value1; sum+=value2; var diff = value1; diff-=value2; var prod = value1; prod*=value2; var res = value1; res/=value2; var rem = value1; rem%=value2; document.write("

The Sum of Data1 and Data2 Using += : "+sum); document.write("
The Difference of Data1 and Data2 Using -= : "+diff); document.write("
The Product of Data1 and Data2 Using *= : "+prod); document.write("
The Result after Division of Data1 and Data2 using /= : "+res);document.write("
The Remainder after Division of Data1 and Data2 Using %= : "+rem);

Listing 14.4 Using Arithmetic Shorthand Operators ( )

Output:

Chapter 14.indd 136 15/08/18 4:25 PM

136 137

:

1. ,

.

2. ,

.

3. .

14.6.3 (Comparison Operators):

. == (), != (), < (), > (), = ( ) .

.

x=10 y=20 == (Equality) x==y False

!= (In-equality) x!=y True

< (Less-than) x (Greater-than) x>y False

=y False

14.3

Demo Program - To test Relational(Comparison) Operators in JavaScript

14.5

Chapter 14.indd 137 15/08/18 4:25 PM

138 139

var value1 = 522, value2=10; document.write("

Whether Data1 = Data2 : "+(value1==value2)); document.write("
Whether Data1 < Data2 : "+(value1value2)); document.write("
Whether Data1 = Data2 : "+(value1>=value2)); document.write("
Whether Data1 != Data2 : "+(value1!=value2));

:

14.6.4 (Logical Operators):

() . . && (AND), || (OR) ! (NOT) .

&&((45))((expr1) && (expr2))

( AND) expr1 expr2 .

True

Chapter 14.indd 138 15/08/18 4:25 PM

138 139

||((45))((expr1) || (expr2))

( OR) expr1 expr2

.

True

!!(10>5)!(expr1)

( NOT) expr1

.

False

14.4

:

. ,

. . :

&& (AND) .

|| (OR) .

! (NOT) .

Demo Program - To test Logical Operators in JavaScript var value1 = 522, value2=10; document.write("
Data2 : "+value2); var res1=((value1>100) && (value1>601)); var res2=((value1>100) || (value1>601)); var res3=(!(value1!=value2)); document.write("

Whether Data1>100 AND Data1>601 : "+res1); document.write("

Whether Data1>600 OR Data1>601 : "+res2); document.write("
Whether !Data1 != Data2 : "+res3);

14.6

Chapter 14.indd 139 15/08/18 4:25 PM

140 141

:

14.6.5 (String Operators):

- + .

+ .

Demo Program - To Concatenating (+) Operators in JavaScript var String1 = "Java"; var String2 = "Script"; var String3=String1+String2; document.write("
String1 : "+String1); document.write("
String2 : "+String2); document.write("

Concatenated String of String1 and String2 : "+String3);

14.7

:

Chapter 14.indd 140 15/08/18 4:25 PM

140 141

14.6.6 (Increment and Decrement Operators):

++ 1 . , 1 , . ++

. ++ . . ++ , .

.

var m = 1, n = ++m; // m and n are both 2

var m = 1, n = m++; // m is 2, n is 1

- . ,

1 , ++ -- . ,

1 , . 1

var m = 2, n = --m; // m and n are both 1

var m = 2, n = m--; // n is 2, n is 1

Demo Program - ++ and -- Operators in JavaScript var number1 = 150; var number2 = number1++; document.write("
Post Increment - number++"); document.write("Number1 = "+number1+" Number2 = "+number2); document.write("
Pre Increment - ++number"); var number1 = 150; var number2 = ++number1; document.write("Number1 = "+number1+" Number2 = "+number2); var number1 = 150; var number2 = number1--;

14.8 ++

Chapter 14.indd 141 15/08/18 4:25 PM

142 143

document.write("
Post Decrement - number--"); document.write("Number1 = "+number1+" Number2 = "+number2); document.write("
Pre Decrement - --number"); var number1 = 150; var number2 = --number1; document.write("Number1 = "+number1+" Number2 = "+number2);

:

14.6.7 + - :

+ .

( ).

14.6.8 typeof :

type of . .

.

Chapter 14.indd 142 15/08/18 4:25 PM

142 143

typeof operand

or

typeof(operand)

type of , , , . type of .

Type of

Number numberBoolean Boolean

String string

Functions function

Undefined undefined

Demo Program - To test typeof Operator in JavaScript var value1 = 522, value2="JavaSript"; value3=true;document.write("
Value1 ="+value1+" and its data Type is : "+typeof(value1));document.write ("
Value2 ="+value2+" and its data Type is : "+typeof(value2));document.write ("
Value3 ="+value3+" and its data Type is : "+typeof(value3));

14.9

:

Chapter 14.indd 143 15/08/18 4:25 PM

144 145

14.6.9 (?:) (Conditional Operator):

-

.

var variablename=(condition) ? value1 : value2;

. ,

.

.

var result=(10>15) ?100 :150;

, . 150 result .

Demo Program - To test Conditional Operator in JavaScript var value1 = 522, value2=150, value3; value3=(value1

144 145

14.7

(JavaScript Popup Or Dialog Boxes)

.

.

,

. - : Alert , confirm Prompt .

14.7.1 Alert (Alert Dialog Box):

Alert . , .

, , Alert . Alert Ok . .

Alert

Alert(Message);

(or) Window.alert(Message);

:

alert(Name is compulsory entry);

(or) window.alert(Name is compulsory entry);

Demo Program - To test Alert Dialog Box in JavaScript var value1 = 522, value2=10; window.alert("Data1 : "+value1); alert(Data1 :+value2);

14.11

Chapter 14.indd 145 15/08/18 4:25 PM

146 147

:

14.7.2 Confirm (Confirm ):

confirm . OK Cancel . ok confirm() . Cancel Confirm() .

Confirm

confi rm(message);

(or)

window.confi rm(message);

:

confi rm(Hai Do you want to continue:);

(or)

window.confi rm(Hai Do you want to continue:);

Demo Program - To test Confi rm Dialog Box in JavaScript var value1 = 522, value2=10; window.confi rm("Data1 : "+value1); confi rm("Data2 :"+value2);

Listing 14.12 Confi rm Dialog Box

Chapter 14.indd 146 15/08/18 4:25 PM

்கணினி பயன்பாடு்கள் · 4. தனிப்்படை...

Documents