்கணினி பயன்பாடு்கள் · 4. தனிப்்படை...
TRANSCRIPT
-
-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
XI Std Computer Applications Vol-2 TM Introduction Pages.indd 2 15/08/18 6:05 PM
-
III
. ,
. , . . ,
,
. . , ,
. , .
.
, .
, .
? , .
, .
QR , .
QR ?o , QR
, .o QR . o QR
.o , QR ,
, .
XI Std Computer Applications Vol-2 TM Introduction Pages.indd 3 15/08/18 6:05 PM
-
IV
12
/
(B.E./B.Tech)
,
/ / . .
(B.Sc.) - B.C.A. ( ) , , , , , / , , .
,
, , (B.P.O.)
LLB, - , , , , ,
,
,
XI Std Computer Applications Vol-2 TM Introduction Pages.indd 4 15/08/18 6:05 PM
-
V
/
- ( ), - ( ),- (), - (), - .-,-
,
, .
C.A. , C.M.A.
ICAI ,
, .
- , , , , , , , , (3D)
,
, , (B.P.O.)
XI Std Computer Applications Vol-2 TM Introduction Pages.indd 5 15/08/18 6:05 PM
-
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) , .
XI Std Computer Applications Vol-2 TM Introduction Pages.indd 6 15/08/18 6:05 PM
-
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
Background Colour change This is my browser with different colour
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
Background Colour change This is my browser with different colour
10.1
(ii)
text = color
(black) . .
Background Colour change This is my browser with different colour
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
tagMultiple lines without
tag10.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
:
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.
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 Tamilnadu11.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 711.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 PradeshAndhra 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.
KarnatakaKarnataka 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.
TamilnaduTamil 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, Tamilnadu11.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 HomeChapter 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 .
:
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.
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 image12.3: HTML
:
D:\CS_TestBook_Final\
File Edit View Favorites Tools Help
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..
File Edit View Favorites Tools Help
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
File Edit View Favorites Tools Help
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
:
D:\CS_TestBook_Final\ HTML - Form and Co..
Student Name :
Gender:
Subjects: Tamil
Clear
Telugu English
Submit
Physics Economics
Boy Girl
Forms and Controls
File Edit View Favorites Tools Help
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
HTML - Form and Controls Forms and Controls
Student Name:
City / Town: Chennai Madurai Coimbatore Kanyakumari
12.9: HTML ( )
:
D:\CS_TestBook_Final\ HTML - Form and Co..
File Edit View Favorites Tools Help
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 .( )
HTML - Form and Controls Forms and Controls
Student Name:
Email:
Comments:
12.10: (Text area- ) HTML
:
D:\CS_TestBook_Final\ HTML - Form and Co..
File Edit View Favorites Tools Help
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
D:\CS_TestBook_Final\ HTML - Form and Co..
File Edit View Favorites Tools Help
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
File Edit View Favorites Tools Help
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 - ,
:
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.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-image : url (Flower.gif );
background-repeat : norepeat;
}
Background-position
Direction Body
{
background-image : url (Flower.gif );
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("
Data1 : "+value1); document.write("
Data2 : "+value2); 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("
Data1 : "+value1); 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