css bangla-e-book-tutorial css3

wmGmGm (3) 8g Aa¨vq

1

cieZx© fvm©b : 2.0 [ Av‡iv wKQz †ewk ]

wmGmGm (3)

m¤cv`bvq

eyKwewW

www.bookbd.info


2

¯^Z¡ : †jLK

cÖKvkK : kixd nvmvb Zid`vi

Ávb‡Kvl cÖKvkbx

38/2K evsjvevRvi, XvKv-1100|

†dvb- 7118443, 8623251, 8112441

E-mail : [email protected]

[email protected]

cÖKvkKvj : †g 2013 Bs‡iwR

cÖQ` : †gvt †gvRv‡¤§j ûmvBb (mRj)

†gKvc : wek¦wRr `vm

K‡¤úvR : KgwcDUvi wjU¨v‡iwm nvDm

gy ªY : †bvfv †cÖm GÛ cvewj‡KkÝ

15/we, wgicyi †ivW XvKv-1205|

ÒAvgv‡`i cÖej B‛Qv _vKv m‡Ë¡I Avgiv eBwUi m¤cyb© Kwc Avc‡jvW

Ki‡Z cvijvg bv GRb¨ LyeB `ytwLZ | †Kbbv eBwU wcÖ›U Kwc evRv‡i

Av‡Q Avcbviv PvB‡j eBwU evsjv‡`‡ki †h †Kvb jvB‡eªwi †_‡K msMÖn

Ki‡Z cv‡ib| Ò

mailto:[email protected]


3

†dvb t 9667919

ISBN : 00

g~j¨ : UvKv gvÎ |


4

DrmM©

Av¤§y wg‡mm mvwdqv †eMg

AveŸy †gvt knx` Dj ¨v cv‡Uvqvix

we‡kl K…ZÁZv

†mKv›`vi ev`kv

CEO, Bongo Communications

Founder, 9ledge.com


5

eBwU wjL‡Z mn‡hvMx wn‡m‡e KvR K‡i‡Qb

†gv: kwid †nv‡mb (wknve)

Senior Developer

South Asian ICT

mvjgvb Rybv‡q`

Senior Developer

South Asian ICT

Bgivb †nv‡mb Senior Developer, Strategic consultant

South Asian ICT

Zvbfxi Bmjvg Senior Developer

South Asian ICT


6

GB eBwUi mv‡_ wd« hv i‡q‡Q

wd« wmwW

1. eBwUi mv‡_ GKwU wd« wmwW Av‡Q|

2. eB‡q e¨eüZ mKj †KvWmg~n D³ wmwW‡Z †`qv Av‡Q|

3. eB‡q e¨eüZ mKj cÖ‡R±mg~n D³ wmwW‡Z †`qv Av‡Q|

4. GQvov wmGmGm GwWUi wn‡m‡e cÖ‡qvRbxq mdUIq¨vi I wewfbœ eªvDRvi Avcbviv wmwW‡Z

cv‡eb|


7

fzwgKv (Introduction)

Kw¤úDUvi eZ©gvb weÁv‡bi GK ¯^v_©K Ae`vb| AvR Avgiv GB Kw¤úDUvi Gi Kvi‡YB

bZzb GK hy‡M cÖ‡ek Ki‡Z m¶g n‡qwQ| hv wKbv AvR Z_¨ cÖhyw³i hyM bv‡g cwiwPwZ

†c‡q‡Q| GB Z_¨‡K KZ `ªZ Ges ¯^v_©Kfv‡e gvby‡li Kv‡Q †c u․Qv‡bv hvq, Zv wb‡q

GLb weÁv‡bi GZ Av‡qvRb| GiB avivevwnKZvq B›Uvi‡bU n‡Q weÁv‡bi GKwU mdj

cÖ‡qvM|

eZ©gv‡b Z_¨ Av`vb cÖ`vb Gi GKwU Ab¨Zg gva¨g n‡jv I‡qemvBU| AvR G GB

I‡qemvBU Gi gva¨‡g †hvMv‡hvM †_‡K ïi K‡i cY¨ µq weµq Gi KvRwUI Kiv n‡q

_v‡K| Avi I‡qemvBU •Zwii Rb¨ ìKvi I‡qe wWRvB‡bi| I‡qe wWRvBbv‡ii g~j KvR

n‡Q †h †Kvb GKUv mvB‡Ui Rb¨ †Ug†c U •Zwi Kiv, GLv‡b _vK‡ebv †Kvb A¨vwc ‡Kkb|

†hgb jMBb wm‡÷g, wbDR‡jUvi, mvBbAvc, †cwR‡bkb, dvBj Avc‡jvW K‡i †WUv‡e‡R †mf

Kiv, B‡gR g¨vwbcy‡jkb, hw` mvB‡U weÁvcb _v‡K Zvn‡j cÖwZevi †cR †jvW nIqvi mgq

weÁvc‡bi cwieZ©b G¸wj A¨vwc ‡Kkb, I‡qe A¨vwc ‡Kkb BZ¨vw`| Gme •Zwi Ki‡Z n‡e

†cÖvM«vwgs fvlv Øviv| †h †Kvb ai‡bi A¨vwc ‡Kkb Qvov GKUv mvBU •Zwi KivB nj I‡qe

wWRvBb gyjZ, GB ai‡bi wWRvBb‡K ejv nq ÷¨vwUK wWRvBb| GLb ch©š— GB avibv wb‡q

I‡qe wWRvBb eëüZ n‡q Avm‡Q|

Avi GB eBwU †jLv n‡q‡Q I‡qe wWRvBb Gi G‡Kev‡i cÖ_g †_‡K †kl ch©š— hZ cÖKvi

†m․›`h©ea©b Z_v wWRvBb Kiv hvq, Zvi Dci| eZ©vgv‡b me mvBU-B wWRvBb Kiv n‡q _v‡K

CSS Gi gva¨‡g| hvi d‡j AvR AwaKvsk mvBU Gi evwn¨K iƒc ev `„k¨gvb Ask (Outlook)

my›ì n‡q _v‡K| Avi ZvB‡Zv, GB eBwU‡Z CSS Gi cÖcvwU©, f¨vwjD, GBPwUGgGj G

wmGmGm Gi mv‡_ KvR Kivi cwi‡ek •Zwi Kiv †_‡K ïi K‡i Gi wewfbœ bZzb wdPvimg~n

m¤ú‡K© we¯—vwiZ Av‡jvPbv Kiv n‡q‡Q|


8

†jL‡Ki K_v

gnvb Avj vn ZvÕAvjvi A‡kl ïKwiqv, evsjv‡`‡k gvZ…fvlvq ÒwmGmGm GÛ wWfÓ eBwU

cvVK‡ì nv‡Z Zz‡j †èvi Rb¨| †`‡ki AMwYZ cvVK‡ì Pvwn`v Avi Aby‡ivaB Avgv‡K GB

eBwU †jLvi Aby‡cÖiYv hywM‡q‡Q|

w`b w`b cÖhyw³ GwM‡q P‡j‡Q| †mB mv‡_ cwiewZ©Z Gi Gi Kvh©µg I †K․k‡j|

cÖwZw`b-B wbZ¨bZzb myweav †hvM n‡Q| I‡qe †W‡fjc‡g›U Gi evRv‡iI †hvM n‡Q

bvbvb iKg my‡hvM myweav| ZvB mKj‡K GB cwieZ©bkxj evRvi, my‡hvM myweav I

Kjv‡K․kj m¤c‡K© AeMZ Kivi Avgvi GB cÖqvm|

eBwU‡Z CSS m¤ú‡K© we¯—vwiZ Av‡jvPbv Kivi cvkvcvwk †ckv`vix Kv‡Ri Dcvq Ges

†UKwbK¸‡jv eY©bv Kiv n‡q‡Q, hv GKRb bZzb wk¶v_x©i †ckv`vix g‡bvfve •Zwi‡Z e¨vcK

fzwgKv cvjb Ki‡e| eB‡qi cÖwZwU Aa¨v‡q cÖ‡Z¨K Dcv`vbmg ~n D`vni‡Yi mvnv‡h¨ eySv‡bvi

†Póv Kiv n‡q‡Q| GQvovI GB eB‡qi †k‡l ev¯—egyLx wk¶vi Rb¨ K‡qKwU cÖ‡R± †Ìqv

n‡q‡Q| GB cÖ‡R±¸‡jv g~jZ ev¯—e KvR (Real Life Projects) m¤úwK©Z, †hLv‡b GKRb

I‡qe wWRvBbvi MÖvn‡Ki Pvwn`v c~i‡Y eªZ n‡Z cv‡ib|

Avkv KiwQ, GB eBwUi gva¨‡g I‡qe wWRvB‡bi GKRb bZzb wk¶v_©x †_‡K ïi K‡i

cÖ‡dkbvj e¨w³e‡M©i Rb¨ Kv‡Ri mnvqK n‡e|

Avcbv‡ì mK‡ji Kg©Rxeb mdj I my›ì †nvK| GB Kvgbvq

†gvt wgRvbyi ingvb

[email protected]

[email protected](facebook)

facebook.com/Ebookbd

facebook.com/mijanurrahmanbd


9

eB m¤c‡K© †h †Kvb ai‡bb Z_¨ I mgm¨vi Rb¨

†hvMv‡hvM Ki‚b :

01712901842 (Shihab) Email: [email protected]

www.bookbd.info eyKwewW n‡‛Q evsjv‡`kx cÖ‡dkbvj evsjv eB mg~‡ni I‡qemvBU| †hLvb †_‡K Avcwb B-

eyK webv g~‡j¨ WvDb‡jvW Ki‡Z cvi‡eb| †h eB¸‡jv Avcbv‡K AvBwU AvDU‡mvwm©s-G

cÖ‡dkbvj K¨vwiqvi M‡o Zzj‡Z mvnvh¨ Ki‡e| G QvovI wb‡R wb‡R †Kvb cÖKvi †Uªwbs

QvovB †h †Kvb wel‡qi Dci cÖ‡dkbvj `¶Zv AR©b Ki‡Z cv‡ib GB eB¸‡jv c‡o| Avi

Avcbv‡`i †Kvb civgk© _vK‡j Aek¨B Avgv‡`i‡K Rvbv‡eb, GB wVKvbvq t-

[email protected].


10

mywPcÎ GK bR‡i

gwWDj-1

Aa¨vq 01: B›Uvi‡bU Ges I‡qe wWRvBb Gi cÖv_wgK avibv....................................................15

1.1 t B›Uvi‡bU Gi BwZnvm........................................................................................................16

1.2 t B›Ui‡bU Gi

ïi..............................................................................................................16

1.3 t Iqv©ì IqvBW I‡qe-Gi BwZnvm..........................................................................................17

1.4 t wKfv‡e KvR K‡i ?...........................................................................................................17

1.5 t B›Uvi‡b‡Ui Browser ej‡Z wK eywS?....................................................................................17

1.6 t B›Uvi‡bU G A¨v‡W«mevi ev URL ej‡Z wK eywS? .....................................................................17

1.7 t I‡qe mvBU ev I‡qe †cR ej‡Z wK eywS?...............................................................................18

1.8 t I‡qe wWRvBb wK? ...........................................................................................................18

1.9 t I‡qe 2.0 wWRvBb wK?......................................................................................................18

Aa¨vq - 02 t CSS Gi cÖv_wgK avibv...................................................................................21

2.1 t CSS wK ?......................................................................................................................22

2.2 t †Kb CSS eënvi Ki‡ev ?.................................................................................................22

2.3 t CSS Gi DcKvwiZv.........................................................................................................22

2.4 t eZ©gvb cwiw wZ...............................................................................................................23

Aa¨vq- 03 t DIVGi cÖv_wgK avibv.....................................................................................24

3.1 t DIV wK ?.......................................................................................................................25

3.2 t Div eënvi Kivi myweav.....................................................................................................25

3.3 t DIV I CSS Gi m¤úK©.....................................................................................................25

Aa¨vq-04 t HTML............................................................................................................26

4.1 t HTML wK ?..................................................................................................................27

4.2 t evRvi Pvwn`v...................................................................................................................27

4.3 t HTML Format............................................................................................................27

4.4 t HTML file •Zwi Kiv......................................................................................................28

4.5 t Adobe Dreamweaver CS6.........................................................................................30

4.6 t Web Browser.............................................................................................................38

Aa¨vq-05t wKQy AwZ cÖ‡qvRbxq HTML TAGS...................................................................44

5.1 t iPbv/wbeÜ (Article) †jLv................................................................................................45

5.2 t Qwe eënvi.....................................................................................................................46

5.3 t wfwWI, Mvb A_ev Ab¨ †h‡Kv‡bv dvBj eënvi........................................................................47


11

Aa¨vq- 06 t †ewmK wm Gm

Gm.............................................................................................49

6.1 t CSS wK .....................................................................................................................50

6.1.1 t Inline CSS ...............................................................................................................50

6.1.2 t Internal CSS.............................................................................................................50

6.1.3 t External CSS............................................................................................................52

gwWDj 2: CSS 1 Ges 2

Aa¨vq - 07 t Font Size......................................................................................................55

7.1 t Font size .....................................................................................................................56

7.2 t % w`‡q d›U mvBR †Ìqv...................................................................................................56

7.3 t Pt w`‡q d›U mvBR †Ìqv...................................................................................................58

7.4 t Em w`‡q d›U mvBR †Ìqv................................................................................................58 .

Aa¨vq - 08 t wewfbœ cÖKvi d›U e¨venvi Kiv..........................................................................61

8.1 t Font ............................................................................................................................62

8.2 t Font family Gi cÖKvi‡f`................................................................................................62

8.3 t Generic font family......................................................................................................63

8.4 t Font style Gi eënvi......................................................................................................65

8.5 t Font variant Gi eënvi...................................................................................................66

8.6 t Font Weight Gi eënvi .................................................................................................67

8.7 t @ font-face..................................................................................................................68

Aa¨vq-09 t Text Align......................................................................................................72 9.1 t Text-Alignment.........................................................................................................73

Aa¨vq-10 t txeT Decorations..........................................................................................79

10.1 t Text decoration........................................................................................................80

Aa¨vq-11 t Text Overflow................................................................................................84

11.1 t Clip ..........................................................................................................................85

11.2 t Ellipsis .....................................................................................................................86

Aa¨vq-12 t Color...............................................................................................................89 12.1 t color †cÖvcvwU© Gi KvR ..................................................................................................90

Aa¨vq -13 t Text Shadow.................................................................................................92

13.1 t Text-Shadow............................................................................................................93

Aa¨vq - 14 t Text transform............................................................................................95 14.1 t Text-Transform........................................................................................................96


12

Aa¨vq-15 t Background.................................................................................................100

15.1 t Background............................................................................................................101

15.2 t Background Color..................................................................................................101

Aa¨vq-16 t mI dnuorgkcaBage....................................................................................106 16.1 t e¨KMÖvD‡Û Qwe e¨envi...................................................................................................107

Aa¨vq-17 t dnuorgkcaB position..................................................................................109

17.1 t e¨vKMªvD‡Ûi Ae¯vb wba©viY............................................................................................110

17.2 t background position: center center........................................................................110

17.3 t background position: center top.............................................................................111

17.4 t background position: center bottom.......................................................................112

17.5 t background position: right bottom.........................................................................113

17.6 t background position: right top...............................................................................114

17.7 t background position: right center..........................................................................115

17.8 t background position: left center.............................................................................116

17.9 t background position: left top..................................................................................117

17.10 t background position: left bottom.........................................................................118

17.11 t % / inch/pixel/em/e¨envi K‡i e¨KMÖvD‡Ûi Ae vb wbY©q................................................119 .

Aa¨vq-18 t background repeat ....................................................................................122 18.1 t e¨vKMªvDÛ wiwcU wK?.....................................................................................................123

18.2 t background repeat: x .............................................................................................123

18.3 t background repeat: y..............................................................................................126

18.4 t background repeat: repeat......................................................................................127

18.5 t background repeat: no-repeat.................................................................................128

Aa¨vq-19 t Background Size..........................................................................................130

19.1 t e¨vKMÖvDÛ mvBR wK? ....................................................................................................131

19.2 t background-size: px w`‡q .......................................................................................131

19.3 t background-size: % / px w`‡q .................................................................................131

Aa¨vq-20 t List...............................................................................................................133

20.1 t wjó ÷vBj Gi cÖKvi‡f`| .............................................................................................134

20.2 t AbyµwgK ZvwjKvi msÁv I D`vnib|................................................................................134

20.3 t µgwenxb ZvwjKvi msÁv I D`vnib|................................................................................134

20.4 t list-style: ...............................................................................................................134

Aa¨vq-21 t wj¼.................................................................................................................144

21.1 t Link wK? ..................................................................................................................145

21.2 t a:link / a:visited / a:hover / a: active......................................................................145


13

Aa¨vq-22 t CSS Box Model ...........................................................................................153

22.1 t Box-Model Gi e¨vL¨v................................................................................................154

22.2 t Margin....................................................................................................................154

22.3 t Padding..................................................................................................................155

Aa¨vq-23 t Margin........................................................................................................156

23.1 t margin-top..............................................................................................................157

23.2t margin-right............................................................................................................158

23.3 t margin-bottom.......................................................................................................160

23.4 t margin-left.............................................................................................................161

23.5 t shorthand margin...................................................................................................162

Aa¨vq-24 t Padding.....................................................................................................164

24.1 t Padding Gi e¨envi....................................................................................................165

Aa¨vq- 25 t Border........................................................................................166

25.1 t None ev border-style: none.................................................................................168

25.2 t Dotted ev border-style: dotted.............................................................................170

25.3 t Hidden ev border-style: hidden...........................................................................171

25.4 t Dashed ev border-style: dashed .........................................................................172

25.5 t Solid ev border-style: solid ................................................................................172

25.6 t Double ev border-style: double...........................................................................175

25.7 t Groove ev border-style: groove ..........................................................................174

25.8 t Ridge ev border-style: ridge................................................................................175 25.9 t Inset ev border-style: inset .................................................................................176

25.10 t Outset ev border-style: outset .............................................................................178

25.11 t Inherit ev border-style: inherit.............................................................................179 25.12 t Shorthand Border...............................................................................................184

Aa¨vq-26 t Outline........................................................................................................187

26.1 t Outline wK? .............................................................................................................188

Aa¨vq-27 t Grouped Ges Nested Selectors................................................................189

27.1 t grouping and selector.............................................................................................190

Aa¨vq-28 t External Style Sheet...................................................................................194

28.1 t External style sheet wK ? .........................................................................................195

28.2 t External style sheet e¨envi Kivi wbqg.......................................................................195

Aa¨vq-29 t Id, Class I Comments..............................................................................197


14

29.1 t Id eënv‡ii wbqg .......................................................................................................198

29.2 t Class eënv‡ii wbqg...................................................................................................199

29.3 t Comments..............................................................................................................201

Aa¨vq-30 t Position........................................................................................................203

30.1 t position wK ? ...........................................................................................................204

30.2 t position:static ........................................................................................................204

30.3 t position:absolute....................................................................................................205

30.4 t position:fixed.........................................................................................................205

30.5 t position:relative.....................................................................................................205

Aa¨vq-31 t CSS Dimension...........................................................................................206

31.1 t Dimension wK ?.......................................................................................................207

31.2 t Dimension Property ..............................................................................................207

Aa¨vq-32 t Opacity.........................................................................................................213 32.1 t Opacity wK ? ...............................................................................................214

32.2 t Qwe‡Z Opacity eënvi Kiv...................................................................................214

32.3 t Opacity active by hover..................................................................................216

32.4 t opacity w`‡q †jLvi iO cwieZ©b.............................................................................219

32.5 t paragraph Gi e¨vKMÖvDÛ opacity........................................................................221

Aa¨vq-33 t Image Spirites..............................................................................................224

33.1 t Image Spirites m¤ú‡K© wKQz eY©bv................................................................................225

33.2 t Image Spirites eënv‡ii †K․kj.................................................................................226

33.3 t †nvfv‡ii mv‡_ Image Spirites eënvi..........................................................................226

gwWDj-3 SSC3

Aa¨vq-34 t Cross Browser Compatibility...................................................................234

34.1 t eªvDRvi Kgc¨vwUwewjwU wK ? .........................................................................................235

34.2 t †gvwRjv dvqvid·.......................................................................................................235

34.3 t ¸Mj †µvg I mvdvwi....................................................................................................235

34.4 t A‡civ......................................................................................................................235

34.5 t B›Uvi‡bU

G·‡c vivi....................................................................................................236

Aa¨vq - 35 t CSS3 Borders I dnuorgkcaB................................................................238 35.1 t CSS3 G bZzb †hme border †cÖvcvwU© G‡m‡Q| ................................................................239

35.2 t Rounded Corners..................................................................................................239

35.3 t CSS Box Shadow..................................................................................................240


15

35.4 t Border Image........................................................................................................243

35.5 t Round property.....................................................................................................243

35.6 t Stretch...................................................................................................................243

35.7 t border-image.........................................................................................................243

Aa¨vq-36 t CSS3 Text Effects......................................................................................247

36.1 t Text-Shadow..........................................................................................................248

36.2 t Word-Wrap............................................................................................................249

Aa¨vq-37 t 2D and 3D..................................................................................................250

37.1 t Transform.............................................................................................................254

37.2 t rotate ().................................................................................................................254

37.3 t translate ().............................................................................................................256

37.4 t scale ()...................................................................................................................257

37.5 t skew ()..................................................................................................................258

37.6 t matrix().................................................................................................................260

37.7 t The rotateY() Method...........................................................................................263

37.8 t Transform Properties............................................................................................264

37.9 t 3D Transform Methods.........................................................................................265

Aa¨vq-38 t CSS3 Transitions........................................................................................267

38.1 t transition property..................................................................................................267

gwWDj-4 CSS Ges Div cÖ‡R±

cÖ‡R±-1 t Box Model......................................................................................................273

cÖ‡R±-2 t †Uwej (Table) ...................................................................................................274

cÖ‡R±-3 t Layout-1.........................................................................................................285

cÖ‡R±-4 t Layout-2 Adobe Dreamwaver CS6................................................................300

cÖ‡R±-5 t †bwf‡Mkb (Navigation)......................................................................................312

cÖ‡R±-6 t W«c WvDb †gby¨ ....................................................................................................325

cÖ‡R±-7 t †iwR‡÷«kb dg©.....................................................................................................332

cÖ‡R±-8 t B‡gR M¨vjvwi-1....................................................................................................342

cÖ‡R±-9 t B‡gR M¨vjvwi-2...................................................................................................345

cÖ‡R±-10 t wmGmGm-3 Box-Shadow...................................................................................385


16

Aa¨vq 01

B›Uvi‡bU Ges I‡qe wWRvBb Gi cÖv_wgK avibv

GB Aa¨vq †k‡l Avgiv Rvb‡Z cvi‡ev

1 B›Uvi‡bU Gi BwZnvm m¤ú©‡K

2 Iqv©ì IqvBW I‡qe-Gi BwZnvm m¤ú©‡K

3 B›Uvi‡b‡Ui Browser m¤ú©‡K avibv

4 B›Uvi‡bU G A¨v‡W«mevi ev URL m¤ú©‡K avibv

5 I‡qe mvBU ev I‡qe †cR m¤ú‡K© Rvbv

6 I‡qe wWRvBb wK, Zv m¤ú‡K© avibv

7 I‡qe 2.0 wWRvBb wK, Zv m¤ú‡K© avibv


17

1.1 t B›Uvi‡bU Gi BwZnvm

B›Uvi‡bU hv‡K ms‡¶‡c „`¨v †bU‟ wn‡m‡e WvKv nq| B›Uvi‡bU n‡jv Iqv©ì IqvBW wm‡÷g Ad Kw¤úDUvi

†bUIq©vK, †h †bUIqvK© e¨venvi K‡i GKRb eënviKvix Aci mshy³ eënviKvixi mv‡_ Z_¨ Av`vb cÖ`vb Ki‡Z

cv‡i| B›Uvi‡bU Avm‡j wek¦e¨vcx Qwo‡q _vKv me‡P‡q eo Kw¤úDUvi †bUIqvK©, †hwU‡Z Avgv‡ì Kw¤úDUviwU

mvavibZ hy³ n‡q fvPy©qvwj wKQy KvR Kivi AbygwZ cvq| Avi GKUz evwo‡q ej‡Z †M‡j ej‡Z nq †h, B›Uvi‡bU

n‡Q Kw¤úDUvi wbf©i •ewk¦K ZË¡ c×wZ| ci¯úi Gi mv‡_ m¤úK© hy³ A‡bK¸‡jv Kw¤úDUvi †Kw› «K wbiwewQbœ

†bUIqv‡K©i mgwóB n‡Q B›Uvi‡bU| cÖwZwU †bUIqv‡K©i mv‡_ kZ kZ A_ev nvRvi nvRvi Kw¤úDUvi hy³ _v‡K,

G¸‡jvi GKwU Ab¨wUi mv‡_ wewfbœ Z_¨ Av`vi cÖ`vb K‡i _v‡K| B›Uvi‡bU wek¦e¨vcx gvbyl‡K djcÖm~fv‡e Ges

m~j‡f G‡K A‡bï mv‡_ †hvMv‡hvM Ki‡Z m¶g K‡i‡Q| mbvZbx cÖPvi gva¨g mg~n †hgb †iwWI, †Uwjwfk‡bi

g‡ZvB B›Uvi‡b‡Ui †Kvb †K›`ªxf~Z mieivn c×wZ †bB| Zvi cwie‡Z© †h †Kvb e¨w³ hviv B›Uvi‡b‡U mshy³ Av‡Q

†m mivmwi Ab¨ †h †Kvb e¨vw³i mv‡_ †hvMv‡hvM i¶v Ki‡Z, A‡bï Rb¨ Z_¨ mieivn Ki‡Z, A‡bï †`qv Z_¨

msMÖn Ki‡Z A_ev Drcvw`Z cb¨mg~n Kg gy‡j¨ µq weµq Ki‡Z cv‡i| Z_¨ †LvuRvi Rb¨ †h cvZv Avgiv †`wL

†mwU n‡Q GKwU †cÖvMÖvg †hgb gvB‡µvmdU K‡c©v‡ik‡bi B›Uvi‡bU G·‡c vivi, dvqvid·, A‡civ, ¸Mj †µvg

BZ¨vw` hv Kw¤úDUv‡ii Z_¨vwì c…ôv, wPÎ, †iLvwPÎ, kã Pjgvb Qwe I g‡Wjmg~n wfwRUi‡ì mvg‡b Dc vcb

K‡i _v‡K|

1.2 t B›Ui‡bU Gi ïi“!

1969 mv‡j hy³ivóª miKvi GKwU Advanced Research Project Agency MVb K‡i †hwU cieZ©x‡Z

ARPANet wn‡m‡e cwiwPwZ cvq| GwUi D‡Ïk¨ wQj GKwU †bUIqvK© •Zwi Kiv hvi gva¨‡g GK BDwbf©vwmwUi

eënviKvixiv Ab¨ BDwbfv©wmwUi eënviKvix‡ì mv‡_ mshy³ n‡Z cv‡i| GB mgq GB †cÖv‡R‡±i gyj j¶¨ wQj

M‡elK‡ì g‡a¨ wbiwewQbœ Z_¨ Av`vb cÖ`vb Kiv| cie©Zx mg‡q wKQz Kw¤úDUvi G·cvU©, BwÄwbqvi Ges

jvB‡eªwiqvbiv ARPANet Gi eënvi ïi K‡i| †m mgq †bUIqvK© Gi gva¨‡g †hvMv‡hvM GZUv mnR wQ‡jv

bv|

cieZ©x‡Z 1972 mv‡j ARPANet Gi Rb¨ me©cÖ_g Ug wjbmb B-†gBj Avwe¯‥vi K‡ib Ges Hmgq cÖ_g

@ symbol e¨venvi Kiv nq|


18

wPÎ (1.1) : B›Uvi‡bU Kv‡bKkb cÖ‡mm

1.3 t Iqv©ì IqvBW I‡qe-Gi BwZnvm

Iqv©ì IqvBW I‡qe GKwU †M vevj Bbdi‡gkb wgwWqvg hvi gva¨‡g B›Uvi‡bU eënviKvixiv wjL‡Z I co‡Z

cv‡i| A‡b‡K fyj K‡i www †K B›Uvi‡bU Gi cÖwZkã g‡b K‡i _v‡Kb| Avm‡j Wwe D Wwe D Wwe D GKwU

mvwf©m †hwU Acv‡iU nq B›Uvi‡bU Gi gva¨‡g †hgb : B-†gBj| Wwe D Wwe D Wwe D wi‡m©vm BDRvi †ì‡K

AbygwZ †`q GK wi‡mvm© †_‡K Ab¨ wi‡mvm© G †h‡Z| Iqvì© IqvBW I‡qe A¨vwc ‡Kkb †hwU Iqvì© IqvBW I‡qe

eªvDRvi K¬v‡q›U bv‡g cwiwPZ| GB eªvDRvi dig¨v‡UW †U·U, B-g¨v‡Rm, mvDÛ Ab¨vb¨ Ae‡R± †hgb

nvBcviwjsK Kw¤úDUvi w¯…b G Dc vcb K‡i| 1991 mv‡ji 6 AvM÷ Awdwmqvwj m¨vi wUg evb©vm©-wj Iqvì©

IqvBW I‡qe (www) †K cwiwPZ Kivb| GB †cÖv‡R± G Zvi j¶¨ wQj: “To allow links to be made to

any information anywhere”

1.4 t wKfv‡e KvR K‡i?

Avwg Avevi I ejwQ Iqvì© IqvBW I‡qe Ges B›Uvi‡bU GKB welq bv| B›Uvi‡bU n‡jv me¸‡jv Kw¤úDUv‡ii

†bUIqvK© Avi I‡qe n‡jv B›Uvi‡b‡U hy³ Kw¤úDUv‡ii GKwU mvwf©m| I‡q‡ei Z_¨¸‡jv wewfbœ cvZvq mwbœ‡ewkZ

AvKv‡i _v‡K Ges cÖwZwU Avjv`v cvZvq ev wjs‡K wef³ _v‡K| cÖwZwU wjsKB BDwbK nq| GB Z_¨mgyn I‡qe

mvf©v‡i msiw¶Z _v‡K| Avi †h me Kw¤úDUvi †_‡K Z_¨¸‡jv †`Lv nq Zv‡ì‡K e‡j I‡qe K¬v‡q›U|

I‡qe‡cR¸‡jv eªvDRv‡ii gva¨‡g cÖ`wk©Z nq| AvaywbK I‡q‡e †U·U, Qwe, Gwb‡gkb, AwWI, wfwWImn bvbvb

ai‡bi wgwWqv mw¤§wjZ AvKv‡i †`Lv hvq| †jL‡Ki †jLv GKwU eB i‡q‡Q hvi bvg ÔÔweMxwbs RygjvÓ| GB eB‡qi

g‡a¨ Avcwb wK K‡i †Kvb iKg †cÖvMÖvwgs Ávb QvovB GKwU WvBbvwgK I‡qe mvBU •Zwi Ki‡eb, Zv wkL‡Z

cvi‡eb|

1.5 t B›Uvi‡b‡Ui Browser ej‡Z wK eywS?

I‡qe e«vDRvi nj Kw¤úDUv‡ii GKwU †cÖvMÖvg, hvi gva¨‡g Avgiv B›Uvi‡bU G †Kvb I‡qe †cR wfwRU Ki‡Z

cvwi| GKwU ÒI‡qe eªvDRviÓ †K ïaygvÎ ÒeªvDRviÓI ejv n‡q _v‡K| AvBwU wi‡j‡UW wewfbœ B-eyKmg~n webv

g~‡j¨ WvDb‡jvW Ki‡Z wfwRU Kib http://www.bookbd.info|

Avcwb Kw¤úDUvi eënvi Kivi Rb¨ †h †Kvb DB‡ÛvRB eënvi K‡ib bv †Kb (windows xp,windows

vista,windows 7) me DB‡Ûv‡RB GKwU Browser wWdë fv‡e BÝUj Kiv _v‡K, Zvi bvg n‡jv Internet

explorer,GLv‡b Internet Explorer n‡jv GKwU eªvDRvi, hvi gva¨‡g Avcwb †Kvb I‡qe‡cR wfwRU Ki‡Z

cv‡ib| evRv‡i A‡bK ai‡Yi eªvDRvi cvIqv hvq| Kg †ewk me eªvDRvi GKB iKg myweav cÖ`vb K‡i _v‡K| Z‡e

I‡qe eªvDRv‡ii eZ©gvb evRvi nv‡Z‡Mvbv K‡qKwUi `L‡j i‡q‡Q| Avi Avgiv memgq GB KqwU‡KB cÖvavb¨ w`‡q

KvR Kie| G¸‡jv njt Internet Explorer (†hwU Avcwb Kw¤úDUvi Gi mv‡_ Ggwb‡ZB cv‡eb), Mozilla

Firefox, Google Chrome, Opera, Safari BZ¨vw`|

1.6 t B›Uvi‡bU G A¨v‡W«mevi ev URL ej‡Z wK eywS?

A¨v‡W«mevi nj I‡qe eªvDRv‡ii Dc‡ii As‡k _vKv GKwU †U·U †jLvi RvqMv, †hLv‡b eZ©gvb I‡qe †c‡Ri

BDAviGj (URL) cÖ`wk©Z nq,Avi URL nj A¨v‡W«mev‡ii wfZi †h †jLv ¸‡jv _v‡K Zv‡K URL ejv nq|

A¨v‡W«mev‡i BDRvi g¨vbyq¨vwj BDAviGj emv‡Z cv‡ib| hLb Avgiv bZyb I‡qe‡cR G cÖ‡ek Kwi ZLb

A¨v‡W«mev‡ii BDAviGjwU ¯^qswµqfv‡e cwiewZ©Z nq| †Kvb GKwU I‡qe‡c‡Ri BDAviGj †`Lvi Rb¨


19

A¨v‡W«mev‡i j¶¨ Kiv nq| hw` BDRvi †Kvb wbw ©ó I‡qemvBU ev I‡qe‡cR wfwRU Ki‡Z Pvq Zvn‡j

A¨v‡W«mev‡i I‡qe A¨v‡W«mwU (URL) ewm‡q G›Uvi Pvc w`‡j eªvDRv‡i I‡qe‡cRwU Lyj‡e|

1.7 t I‡qe mvBU ev I‡qe †cR ej‡Z wK eywS?

I‡qe †cR Avi I‡qe mvBU GK K_v bq| †hgb- www.metanvir.weebly.com GKwU I‡qe mvBU| wKš‧

GB I‡qe mvBUwU A‡bK¸‡jv I‡qe †cRGi mgš‡q •Zwi n‡q‡Q| I‡qe mvBU nj ¯^Zš¿ HTML WKy‡g›U| I‡qe

mvBU nj A‡bK¸‡jv I‡qe †c‡Ri mgvnvi|

Avi B›Uvi‡b‡U I‡qemvBUB nj cÖvb †K›`ª| GLv‡bB mKj Z_¨ Rgv _v‡K| d‡j B›Uvi‡bU eënviKvix cÖ‡qvRbxq

dvBj, Z_¨ msMÖn Ges Av`vb cÖ`vb Ki‡Z cv‡i| Zvn‡j hv eySjvg Zv n‡jv, I‡qe mvBU n‡Q †Kvb GK mvBU

Gi bvg Avi I‡qe‡cR nj H mvBU Gi wfZi †h †cR ¸‡jv Av‡Q †m¸‡jv|

1.8 t I‡qe wWRvBb wK?

GB †jLv g~jZ Zv‡ì Rb¨ hviv I‡qe wWRvBwbs wkL‡Z Pvb ev I‡qe †W‡fjcvi n‡Z Pvb t I‡qe wWRvBb n‡Q

GKwU I‡qemvB‡Ui Rb¨ evwn‡ii KvVv‡gv •Zwi Kiv|

I‡qe wWRvBbv‡ii g~j KvR n‡Q †h, †Kvb GKwU mvB‡Ui Rb¨ †Ug‡c U •Zwi Kiv,GLv‡b _vK‡ebv †Kvb

A¨vwc ‡Kkb| †hgb jMBb wm‡÷g, wbDR‡jUvi, mvBbAvc, †cwR‡bkb, dvBj Avc‡jvW K‡i †WUv‡e‡R †mf

Kiv, B‡gR g¨vwbcy‡jkb, hw` mvB‡U weÁvcb _v‡K Zvn‡j cÖwZevi †cR †jvW nIqvi mgq weÁvc‡bi cwieZ©b

G¸wj A¨vwc ‡Kkb, I‡qe A¨vwc ‡Kkb BZ¨vw`| Gme •Zwi Ki‡Z n‡e †cÖvMÖvwgs fvlv Øviv| †h †Kvb ai‡bi

A¨vwc ‡Kkb Qvov GKwU mvBU •Zwi KivB nj I‡qe wWRvBb| g~jZ, GB ai‡bi wWRvBb‡K ejv nq ÷¨vwUK

wWRvBb| GLb ch©š— GB avibv wb‡q I‡qe wWRvBb eëüZ n‡q Avm‡Q| I‡qe wWRvBb wkL‡Z ‡hme Rvb‡Z

n‡e t

GBPwUGgGj : GwU GKwU gvK© Avc j¨vs¸‡qR| GwU †Kvb †cÖvMÖvwgs j¨vs¸‡qR bq, †kLv Lye mnR|

wmGmGm : GwUI gvK© Avc j¨vs¸‡qR|

d‡Uvkc : GLv‡b †h gyj KvRwU wkL‡Z n‡e Zv n‡jv wcGmwW †_‡K GBPwUGgGj †U¤c‡jU (PSD to HTML)

evbv‡bv| GQvov e¨vbvi, evUb, Gwb‡gkb •Zwi Kiv Gme Rvb‡Z n‡e|

1.9 t I‡qe 2.0 wWRvBb wK ?

Avgv‡ì g‡a¨ A‡b‡KB Rvwb Avevi GL‡bv A‡b‡KB Rvwb bv I‡qe 2.0 wWRvBb m¤ú‡K©| Avm‡j welqwU wK?

I‡qe 2.0 wWRvBb ej‡Z mvavib †Kvb wWRvBb‡K eySvq bv| I‡qe 2.0 wWRvBb GZUvB cÖk¯ GKwU welq †h,

Kvh©Z G‡K ¸wQ‡q ev GK K_v e‡j †kl Kiv hv‡e bv| †Zv Pjyb, I‡qe 2.0 wWRvBb ej‡Z Avgiv wK wK wel‡qi

cÖwZ j¶ w`‡ev, Zvi Rb¨ GKUy we¯—vwiZ Av‡jvPbvq Avmv hvK:

1. gvb m¤úbœ wWRvBb: I‡qe Ges wcÖ›U wgwWqv‡Z wjLv I wWRvB‡bi ¯‥xb †iRy‡jkb n‡e cÖk¯|

2. mvavib •emv`…k¨: I‡qe 2.0 wWRvBb n‡e mvavib •ewkó¨ gv‡bi Ges †hb †Kvb wKQyi cÖebZv †eva cÖKvk

Ki‡e| G‡¶‡Î j¶bxq †h, †ewki fvM I‡qi 2.0 gv‡bi wWRvB‡b mv`v is Gi eënvi cvIqv hvq|

3. AvKl©bxq †bwf‡Mkb: kw³kvjx I AvKl©bxq †bwf‡Mkb Ges cvVK gv‡bv‡hvM AvKl©b •Zwi Kivi gvb‡l fy‡jI

A‡bï wWRvBb Kwc-†có Ki‡eb bv| G‡Z Avcbvi mvBU ev wWRvB‡b weic cÖwZwµqv ci‡e| Zvi †P‡q eis

mv`vgvUv †bwf‡Mkb eënvi Ki‡jB fvj †`Lv‡e| g‡b Kwi, GKwU mvB‡Ui †bwf‡Mk‡b 3wU U¨ve Av‡Q, cÖ‡Z¨KwU

mvB‡Ui ¸iZ¡c~Y© wefvM avib Ki‡Q, †hLv‡b Avcbwb wK¬K Ki‡jB wefv‡Mi me †cvó ev wWRvBb †`L‡Z


20

cvi‡eb| Avevi †`Lyb, GKwU mvB‡Ui mvBWev‡i 20Uv wewfbœ wefv‡Mi wjsK Av‡Q, †bwf‡Mkb ev‡`B| GLb

wm×vš— wbb, †KvbwU Avcbvi Rb¨ DËg Ges mn‡R eënve Dc‡hvMx ? hw` Avcwb Avcbvi mvB‡Ui wWRvBb-†K

G‡jv‡g‡jv wjsK †`Lv‡bvi †_‡K †bwf‡Mkb w`‡qB `…wó‡MvPi Ki‡Z cv‡ib, Zvn‡j GwUB n‡e mv_K©

avibv/Kg©KvÛ|

4. AvKl©bxq †jv‡Mv: “Branding Is Everything” B›Uvi‡bU RM‡Z GB K_vwU 100% mZ¨| Avcbvi mvBUwU

hw` cÖ_g †`Lv‡ZB wfwRUi‡K AvKl©b Kiv‡Z bv cv‡i, Z‡e wØZxqevi †m Avi Avcbvi mvB‡U Avm‡e bv| G‡¶‡Î

ïay wWRvBb bv, Avcbvi mvB‡Ui K‡›U›UI wekvj fywgKv iv‡L| ZvB, GKwU BDwbK eªvÛ bvg, †jv‡Mv me‡P‡q

¸iZ¡c~Y©| D`vnib ¯îƒc Mashable (http://mashable.com)| j¶¨ Kib Zv‡ì †jv‡Mv Ges

†bwf‡Mkb|

5. AvKl©bxq †nvg‡cR: Avgiv Rvwb Apple memgq Zvi †µZv ev wfwRUi‡ì g‡bv‡hvM AvKl©‡bi Rb¨ Zv‡ì

†nvg‡c‡R AvK©lbxq me wWRvBb-Gi cÖvPyh©¨ iv‡L| hv wKbv I‡qe 2.0 wWRvBb mvB‡Ui eo D`vnib|

6. MÖvwW‡q›U, d¬vU Kvjvi: wKQy wKQy I‡qe 2.0 mvBU d¬vU Kvjvi eënvi K‡i| Avevi A‡b‡KB AwZwi³ cwigv‡Y

MÖvwW‡q›U Kvjvi eënvi K‡i| GB Kvjvi ¸‡jvi AwZwi³ eënvi hwÌ mvB‡Ui AvDUjyK‡K KjywlZ K‡i| Z‡e

hw` cwigvbgZ eënvi Kiv nq, ZLb †`L‡Z fvj jv‡M|

7. AvBKb: I‡qe 2.0 Gi me‡P‡q eo •ewkó¨ n‡Q AvBKb Gi eënvi| cÖwZwU wWRvBb Gi mv‡_ mv‡_ wgj

†i‡L AvBK‡bi eënvi Kivi Aa¨vqUv I‡qe 2.0 †_‡KB ïi n‡q‡Q| †cÖvMÖvwgs j¨vs¸‡qR wcGBPwc‡Z nv‡ZLwo

†bqv †_‡K ïi K‡i cÖ‡dkbvjx KvR Ki‡Z †jL‡Ki ÔÔwcGBPwc A¨vÛ gvB GmwKDGjÕÕ eBwU †`‡L wb‡Z

cv‡ib|

cÖkœce© t

Avcbviv †R‡b Lywk n‡eb †h, Avcbv‡ì‡K mn‡hvwMZv Kivi Rb¨ Avgiv •Zwi K‡iwQ Book Support center|

Avi GB Book Support center-Gi B-†gBj A¨v‡Wªm n‡jv [email protected], hv Avcbv‡ì mKj

mgm¨vi mgvavb Ges GB eB m¤ú‡K© †h †Kvb cÖ‡kœi DËi †Ìqvi Rb¨ •Zwi Av‡Q memgq| ZvB Avcbv‡ì hw`

GB eB‡q †Kvb wKQz eyS‡Z mgm¨v nq ev †Kvb cÖkœ †_‡K _v‡K Zvn‡j †gBj Kib GB wVKvbvq

[email protected].


21


22

Aa¨vq 02

CSS Gi cÖv_wgK avibv


1 CSS Gi cÖv_wgK avibv

2 †Kb CSS e¨envi Kie

3 CSS e¨env‡ii DcKvixZv

4 eZ©gvb evRv‡i CSS Gi ¸iZ¡


23

2.1 CSS wK ?

cÖ_gZ CSS †m․›`h© ev ÷vBwjs Kivi Kv‡R eënvi Kiv nq| Gi m¤ú~Y© ic n‡Q Cascading Style Sheet

A_©vr †hB dvBj Gi g‡a¨ Avgv‡ì HTML dvBj Gi †m․›`h©ea©b Gi KvR Kie|

Avm‡j CSS Qvov HTML e…_v| D`vniY wn‡m‡e ejv hvq, GKRb `wR© hLb Kvco Kv‡Ub kvU© evbv‡bvi Rb¨,

ZLb Zv †KejgvÎ wKQy Kvc‡oi UyKiv wn‡m‡eB _v‡K; GwU ZLwb GKwU cwic~Y© kvU© nq, hLb me¸‡jv UyK‡iv

GKmv‡_ K‡i †mjvB Kiv nq| mnR I ¯í mg‡q †cÖvMÖvg wjLvi Rb¨ †jL‡Ki ÔÔg¨v‡µvwgwWqv wWªgI‡qfviÕÕ eBwU

†`‡L wb‡Z cv‡ib|

GLv‡b, HTML ev DIV n‡Q †mB Kvc‡oi UyK‡iv| G¸‡jv‡K myweb¨¯— I my›ì (In Right Order With

Proper Styling) fv‡e Dc¯vcb K‡i CSS| †mjvB wenxb Kvc‡oi UyK‡iv‡K †hgb fvj †`Lv‡e bv, wVK †Zgwb

CSS Qvov Avcbvi HTML cwic~Y©Zv cv‡e bv|

c…w_exi cÖ‡Z¨KwU mvBU CSS eënvi K‡i| GKRb I‡qe †W‡fjcv‡ii me©cÖ_g wk¶Yxq welq-B n‡Q HTML I

CSS| Kvib GwU G‡Kev‡i mvavib GKwU Pvwn`v (Basic or Mandatory Requirement) ZvB CSS Aek¨B

Rvb‡Z n‡e| GwU Qvov eZ©gv‡b c…w_ex‡Z †Kvb mvBU Kiv nq bv| AvBwU wi‡j‡UW wewfbœ B-eyKmg~n webv g~‡j¨

WvDb‡jvW Ki‡Z wfwRU Kib http://www.bookbd.info|

2.2 †Kb CSS eënvi Kie ?

Dc‡ii Av‡jvPbv †_‡K Avgiv †gvUvgywU eyS‡Z cviwQ †h CSS Qvov KvR †Kvb fv‡eB Pj‡e bv| Zvici I wb‡Pi

D`vniYwU †`L‡jB Avcbviv eyS‡Z cvi‡eb CSS Qvov mvBU †`L‡Z †Kgb nq, Avi CSS _vK‡j †`L‡Z †Kgb

nq|

2.3 CSS Gi DcKvwiZv t

Avm‡j CSS Gi DcKvwiZv e‡j †evSv‡bv m¤¢e bq| Kvib Avgv‡ì HTML Gi †jLvi AvKvi †_‡K ïi K‡i

†jLvi iO, d›U, Qwei AvKvi, Qwei ÷vBj, wewfbœ cÖKvi †gby •Zwi, wj÷ •Zwi, wj÷ ¸‡jv †`L‡Z †Kgb n‡e,

wj¼¸‡jv †`L‡Z ‡Kgb n‡e BZ¨vw` mKj cÖKvi KvRB wbf©i Ki‡e CSS Gi Dci| GB fvlv-B n‡e gyjZt

Avgv‡ì DIV Ges CSS †kLvi wfwË| CSS Qvov Avgv‡ì DIV ¸‡jv wVKgZ KvR Ki‡Z cvi‡e bv| Kvib

DIV Gi AvKvi, ÷vBj, iO, vb wba©viY BZ¨vw` me-B Ki‡Z n‡e CSS w`‡q|

CSS Qvov mvBU CSS mn H GKB mvBU


24

Avi Avcwb memgq mevi mv‡_ Zvj wgwj‡q †Zv KvR Ki‡eb-B, cvi‡j †Póv Ki‡eb mevi †_‡K GwM‡q _vKvi|

Avi GwM‡q _vK‡Z n‡j wb‡R‡K memgq Avc‡W‡UW ivL‡Z n‡e| Avi †mRb¨B Avcbvi A¨vWfvÝW CSS

wkL‡ZB n‡e Ges eënvi Ki‡Z n‡e| Avcwb hZ †ewk A¨vWfvÝW †j‡f‡ji KvR Rvb‡eb Ges eënvi Ki‡eb,

Avcbvi KvR ZZ my›ì n‡e Ges Zvi mv‡_ mv‡_ cÖ‡dkbvj jyKI Avm‡e|

2.4 eZ©gvb cwiw¯’wZt

eZ©gv‡b †hme mvBU Pvjy Ae¯vq Av‡Q, GLbI Zvi †ewki fvMB Pj‡Q CSS2 w`‡q| Lye Kg mvBUB CSS3

eënvi Ki‡Q| GLb CSS3 †Z A‡bK †ewk myweav i‡q‡Q| hv Av‡M A‡bK Sv‡gjv wQj Zv GLb gvÎ GK jvBb

Gi †KvW wjL‡jB my›ìfv‡e n‡q hvq| ZvB †ewki fvM mvBU-B wb‡R‡ì‡K †cR¸‡jv‡Z CSS3 (UPGRADE)

eënvi ïi K‡i‡Q| ZvB GLbB m‡e©vrK…ó mgq Advanced CSS †kLvi|

Avgv‡ì GB eB‡Z Avcwb me nvjbvMv` Z_¨ cv‡eb| ZvB GB eBwU Avcbv‡K Aek¨B me‡P‡q fvj my‡hvM

w`‡Q| Avcwb hw` Lye fvjfv‡e GB eB‡q eY©bv Kiv Terems ¸‡jv iß Ki‡Z cv‡ib, Z‡e GB bZyb

Upgrading gv‡K©U Gi KvR¸‡jv Lye mn‡RB ai‡Z cvi‡eb|


25

Aa¨vq 03

DIVGi cÖv_wgK avibv


1 DIV wK?

2 DIV e¨env‡ii myweav wK ?

3 DIV I CSS Gi m¤úK© wK ?


26

3.1 DIV wK ?

Div Gi m¤ú~Y© ic n‡Q Division ev fvM| A_©vr Avgiv †h †cR wb‡q KvR Kie, Zv‡K †QvU †QvU fv‡M †f‡½

wb‡q KvR Kie| D`vniY wn‡m‡e ejv hvq †hgb aib Avgiv †h‡Kv‡bv GKwU ig‡K mvRve| Avcwb wbðqB

PvB‡eb †h‡Kv‡bv GKcvk †_‡K ïi Ki‡Zt Div Avcbv‡K wVK †mB myweavUvB w`‡e|

GwU‡K PvB‡j Avcwb GKwU A‡bK eo d¬¨vU Gi GKwU ig Gi mv‡_I Zyjbv Ki‡Z cv‡ib| Z‡e GLv‡b Avcbvi

†Kvb evaëvaKZv †bB| GB ig ¸‡jvi •`N ©/cÖ I Avcwb wVK K‡i †`‡eb Ges G¸‡jvi †KvbUv d¬¨v‡Ui

†Kvbw`‡K _vK‡e, ZvI Avcwb wVK K‡i †`‡eb|

3.2 Div eënvi Kivi myweav

HTML markup Gi †¶‡Î Div n‡Q GKwU hyMvš—Kvix Dcv`vb| Gi d‡j Avgv‡ì Kv‡Ri KZ †h myweav

n‡q‡Q, Zv e‡j †evSv‡bv m¤¢e bq| e wMs Gi Rb¨ me‡P‡q RbwcÖq wm.Gg.Gm IqvW©‡cÖm wb‡q KvR Kivi Rb¨

†jL‡Ki †jLv ÔÔweMxwbs IqvW©‡cÖmÕÕ I ÔÔA¨vWfvÝW IqvW©‡cÖmÕÕ eB `ywU c‡o wb‡Z cv‡ib|

DIV †K GK wn‡m‡e I‡qe Gi cÖvY ejv hvq| KviY GLb DIV Qvov HTML G †Kvb KvR nq bv| Av‡M GB

U¨vMwU bv _vKvq TABLE w`‡q KvR Ki‡Z nZ| Avi TABLE U¨vMwU m¤ú~Y© ‡cR G eënvi Ki‡Z nZ| †Kvb

wbw ©ó GKwU GjvKvq KvR Kiv ‡hZ bv| m¤ú~Y© †cRwU‡K ROW Ges COLLUMN w`‡q fvM K‡i KvR Ki‡Z

nZ| Avi G¸‡jvi AvKvi wVK ivLv wQj AviI yin KvR| wKfv‡e Avcwb GKwU I‡qemvBU‡K Lye mn‡R mvP©

BwÄb ev mvP© †iRvë Gi kx‡l© wb‡q Avm‡eb Ges mK‡ji wbKU Avcbvi mvBUwU‡K wKfv‡e cwiwPZ K‡i Zzj‡eb

Zv ÔÔmvP© BwÄb AcwUgvB‡RkbÓ eBwU †_‡K Rvb‡Z cvi‡eb|

wKš‧ GLb DIV _vKv‡Z Avgv‡ì Avi †mme Sv‡gjv †cvnv‡Z n‡e bv| GLb Avgiv DIV ¸‡jv‡K ‡hLv‡b PvB

†mLv‡b †`Lv‡Z cvie, †h‡Kv‡bv AvKvi w`‡Z cvie| evwK AviI hv hv m yweav Av‡Q, Zv †Zv Avgiv mvg‡bi

Aa¨vq¸‡jv‡Z †`L‡ZB cve|

3.3 DIV I CSS Gi m¤úK©

Avwg hw` ewj cvwbi mv‡_ Avgv‡ì Rxe‡bi wK m¤úK© ? Avcbviv Aek¨B ej‡eb cvwb Avgv‡ì Rxeb| wVK

†Zgwb DIV Gi Rxeb n‡Q CSS| GB CSS webv DIV n‡Q cÖvYnxb GjvKv| CSS Qvov DIV eënvi Kiv

Avi bv Kiv mgvb K_v| Kvib DIV Gi •`N¨©-cÖ¯ †_‡K ïi K‡i, Gi iO, †jLvi iO, †Kv_vq Ae¯vb Ki‡e,

Kvi cv‡k _vK‡e, Ab¨ †Kvb ÷vBj n‡e wKbv BZ¨vw` meB e‡j w`‡Z n‡e CSS w`‡q|

Zvn‡j GLb wbðqB eyS‡Z cvi‡Qb DIV Gi mv‡_ CSS KZ Riwi|


27

Aa¨vq 04

HTML

4.1 HTML wK ?


1 HTML wK

2 HTML 5 Gi evRvi Pvwn`v

3 HTML dig¨vU

4 HTML dvBj •Zwi Kiv


28

HTML Gi m¤úyY© iƒc n‡Q Hyper Text Markup Language. cÖZ¨KwU †cÖvMÖvg ev mdUIq¨vi †jLvi

Avjv`v Avjv`v fvlv i‡q‡Q| wVK †Zgwb I‡qe Gi me‡P‡q cwiwPZ GKwU fvlv n‡Q HTML. GB fvlv eënvi

K‡iB Avgiv Avgv‡ì mKj KvR m¤úbœ Kie|

mKj †cÖvMÖv‡gB GKwU wbw ©ó wbqg ev µgvbymv‡i wjL‡Z nq| wKš‧ GB Hyper Gi †¶‡Î †Kvb cÖKvi µg ev

Serial eRvq bv ivL‡jI mgm¨v nq bv| ZvB GwU Avgv‡ì Rb¨ †ewk myweavRbK| AvBwU wi‡j‡UW wewfbœ B-eyK

mg ~n webv g~‡j¨ WvDb‡jvW Ki‡Z wfwRU Kib http://www.bookbd.info|

4.2 evRvi Pvwn`v

†h‡nZy HTML GKwU Basic markup language ev mvavib mbv³Kib/wPwýZKib fvlv, ZvB Ab¨ †h‡Kv‡bv

cÖKvi I‡qe mswk ó fvlv (†hgbt CSS, php BZ¨vw`) †kLvi Av‡M Avcbv‡K Aek¨B HTML Rvb‡Z n‡e|

Avi ZvB HTML †kLvi ¸iZ¡ e¨vcK| cÖwZw`b, cÖwZ NÈvq GgbwK cÖwZ wgwb‡U wewfbœ d«xj¨vwÝs mvB‡U (†hgbt

http://www.freelancer.com BZ¨vw`) nvRvi nvRvi Kv‡Ri AW©vi †cv÷ n‡Q| Avcwb hw` wVKVvK fv‡e ïay

HTML Ges CSS Gi KvR wkL‡Z cv‡ib, Z‡e Avcwb mn‡RB †h‡Kv‡bv d«xj¨vwÝs mvB‡U KvR Ki‡Z cv‡ib| G

ai‡bi Db¥y³ evRv‡ii me‡P‡q eo myweav n‡Q Avcwb Avcbvi myweav g‡Zv KvR Ki‡Z cvi‡eb Ges Avcbvi

Kv‡Ri Dchy³ `vg Ges ¯^xK…wZ (Reasonable price and Recognition) cv‡eb|

GQvov Avcwb PvB‡j Avgv‡ì †`‡ki wewfbœ ¯bvgab¨ AvBwU †Kv¤úvwb ¸‡jv‡ZI A‡bK fvj m¤§vwb‡Z KvR Ki‡Z

cvi‡eb|

Avi wb‡Ri GKwU AvBwU dvg© †Lvjvi my‡hvM †Zv i‡q‡QB|

4.3 HTML Format:

†h‡nZy Avgiv HTML file •Zwi Kie, ZvB dvBj Gi ïi‡Z Aek¨B HTML wjL‡Z n‡e| Avi memgq g‡b

ivL‡Z n‡e †h, †hB tag ïi Kie, Zv Aek¨B †kl Ki‡Z n‡e| A_©vr, ïay <HTML> w`‡q ïi Ki‡jB n‡e

bv; G‡K </HTML> wj‡L †kl n‡q‡Q †evSv‡Z n‡e| Kvib Kw¤úDUvi‡K memgq e‡j w`‡Z n‡e †h, †Kvb KvR

†Kv_vq ïi n‡q‡Q Ges †kl n‡q‡Q| bZyev †m eyS‡Z cvi‡e bv| Avi GRb¨B cÖwZwU U¨vM †Rvov wn‡m‡e wjL‡Z

n‡e|

<tag> ….. </tag>

†hgbt Avgiv †Kvb †jLv‡K Bold (Mvp/†gvUv) K‡i †`Lv‡Z PvB‡j hZUyKy †jLv‡K Bold Ki‡Z PvB, Zv ej‡Z

n‡j, †hLvb †_‡K †jLv Bold nIqv ïi n‡e †mLv‡b wjL‡Z n‡e <b> Ges †hLv‡b †kl n‡e, †mLv‡b wjL‡Z

n‡e </b>. †evSvi myweavi Rb¨ Avgiv wb‡Pi D`vniYwU †`wL|

My name is <b>Tanvir Ahmed</b>

†`Lyb, Avgiv hZUyKy †jLv‡K Bold Ki‡Z †P‡qwQ, ZZZyKy †jLv‡K <b>…</b> U¨vM Gi †fZi †i‡LwQ| Zvn‡j

Gevi Avgiv cwic~Y© HTML dvBj Gi dig¨vUwU †`wL|

*GLv‡b wKQy e¨vwZµgI i‡q‡Q| </br> , <img../>,

<link…> P BZ¨vw` †Rvov wn‡m‡e wjL‡Z nq bv|


29

1| GLv‡b Avgiv †`L‡Z cvwQ †h WKy‡g›U UvBc ejv n‡q‡Q|

2| GLv‡b dvBj Gi UvBc ejv n‡q‡Q|

3| GB U¨vM Gi g‡a¨ Avgiv ÷vBj wjLe, CSS link Kie, SEO Kivi Rb¨ Ges Redirect Kivi Rb¨

<meta> Ges Javascript link Kie|

4| GB U¨vM Gi g‡a¨ Avgiv Avgv‡`i Div U¨vM¸‡jv wjLe|

AZGe Avgiv HTML dvBj Gi G‡Kev‡i mvavib Ae¯v (Basic format) †`Ljvg| AvBwU wi‡j‡UW wewfbœ

B-eyKmg~n webv g~‡j¨ WvDb‡jvW Ki‡Z wfwRU Kib http://www.bookbd.info

4.4 HTML file •Zwi Kiv

GLb Avgiv GKwU HTML dvBj •Zwi Kie| GwU Avgiv yBfv‡e Ki‡Z cvwi|

1| Notepad ev Wordpad w`‡q|

2| †h‡Kv‡bv HTML editor (hv HTML dvBj •Zwi Ges m¤úv`b Gi Kv‡R e¨envi Kiv nq) †hgb-Adobe

Dreamweaver, NetBeans BZ¨vw` w`‡q|

†h‡nZy Avgiv GLb gvÎ ïi KiwQ, ZvB Avgiv Kv‡Ri myweavi Rb¨ Notepad w`‡q KvR Kie|

• HTML dvBj •Zwi Kivi Rb¨ Avgiv cÖ_‡g †W¯‥Uc G wM‡q gvD‡mi ivBU evUb wK¬K Kwi| Gici †mLv‡b

GKwU ZvwjKv (Menu) Avm‡e| †mLvb †_‡K New > Text Document wbe©vPb Kwi|

Gici Desktop G †`L‡Z cve †h bZyb GKwU Text Document •Zwi n‡q †M‡Q

body U¨vM Gi AvM ch©š— Avgiv hZwKQyB wjwL bv

†Kb, Browser Zv ‡`Lv‡e bv|

ïaygvÎ Body U¨vM Gi ga¨w¯Z †jLv¸‡jvB Browser

show Ki‡e|

wKš‧ head U¨vM Gi cÖ‡qvRb Aek¨B Av‡Q|


30

wPÎ t bZyb †U·U WKy‡g›U •Zwi n‡q †M‡Q|

GLb double click K‡i text file wU Lywj| Zvici Avgiv wb‡Pi †c«vM«vgwU wjwL|

<html>

<body>

Bangladesh is my homeland

</body>

</html>

†cÖvMÖvg †jLv †k‡l GLb Avgiv G‡K save Kie| GRb¨ Avgiv evgcv‡k Dc‡i File–G wK¬K Kwi| Zvici save

as -G wK¬K Ki‡j wb‡Pi g‡Zv GKwU wPÎ Avm‡e|

†h‡nZz, GLv‡b <head> Gi †Kvb

KvR †bB, ZvB Avgiv GLv‡b

<head> e¨envi Kwiwb|


31

1| GwU n‡Q Avgv‡ì dvBj Gi †jv‡Kkb| A_©vr dvBjwU †hLv‡b Save n‡e|

2| hw` Avgiv dvBj Gi †jv‡Kkb cwieZ©b Ki‡Z PvB, Zvn‡j GLb †_‡K wbw ©ó (select) K‡i w`‡Z n‡e|

Avgiv myweavi Rb¨ †W¯‥Uc G ivLe|

3| GLv‡b Avgiv Avgv‡ì dvBj Gi bvg wjLe new.html Avi †h‡nZy Avgiv html wb‡q KvR KiwQ, ZvB dvBj

Gi †k‡l (extension) .html Aek¨B wjL‡Z n‡e|

4| GLv‡b Avgiv Save as type wn‡m‡e All files ivLe|

5| me KvR wVKVvK n‡q †M‡j GLv‡b (Save) wK¬K Ki‡jB Avgv‡ì KvwLZ †dvìvi (Desktop) G †mf n‡q

hv‡e|

Gevi Desktop G †`L‡Z cve †h new.html bv‡g GKwU bZyb dvBj •Zwi n‡q †M‡Q| GLb gvDm c‡q›Uvi †mB

dvBjwUi Dci †i‡L Wej wK¬K Ki‡j GwU eªvDRvi G Pvjy n‡e| mnR I ¯^í mg‡q †cÖvMÖvg wjLvi Rb¨ †jL‡Ki

ÔÔg¨v‡µvwgwWqv wWªgI‡qfviÕÕ eBwU †`‡L wb‡Z cv‡ib|

†jLvwU Chrome e«vDRv‡i Ggb †`Lv‡e t

4.5 t Adobe Dreamweaver CS6

I‡qe †W‡fjcvi‡ì Rb¨ Adobe Dreamweaver n‡Q GKwU Amvavib †U·U GwWUi| GKK_vq GwU eënvi

Ki‡j Avgv‡ì Avi Ab¨ †Kvb GwWUi eënvi Ki‡Z gb PvB‡e bv| Kvib GB GKwU mdUIq¨vi w`‡q Web

Development RM‡Zi †gvUvgywU me ai‡bi Language-B GwWU Kiv hvq| Avi Gi me‡P‡q eo myweav n‡Q

Gi code hinting myweav| A_©vr hLb Avcwb <html> wjL‡Z PvB‡eb, ZLb gvÎ <ht wjL‡jB GwU ¯qswµqfv‡e


32

Avgv‡ì Kvm©‡ii mv‡_ <html> †jLv wb‡q Avm‡e| ZLb hw` Avgiv Kx-†ev‡W© Enter Pvwc, Zvn‡j †mB

<html> †jLvwU P‡j Avm‡e| G‡Z K‡i Avgv‡ì †KvW †jLvi MwZ AviI †e‡o hv‡e|

Z‡e cÖwZwU mdUIq¨vi ev †Mg BÝUj Gi Rb¨ †hgb wKQy nvW©Iq¨vi KbwdMv‡ikb Gi cÖ‡qvRb nq, †Zgwb GiI

wKQy Pvwn`v i‡q‡Q| †Zv †`‡L †bB GBPgrKvi mdUIq¨viwU BÝUj Kivi Rb¨ Avgv‡ì Kw¤úDUv‡i wK ai‡bi

†gvUv‡gvwU nvW©Iq¨vi KbwdMv‡ikb _vK‡Z n‡e|

Windows

Intel® Pentium® 4 or AMD Athlon® 64 processor

Microsoft® Windows ® XP with Service Pack 3 or Windows 7 with Service Pack

1. Adobe® Creative Suite® 5.5 and CS6 applications also support Windows 8.

Refer to the CS6 FAQ for more information about Windows 8 support.*

512MB of RAM

1GB of available hard-disk space for installation; additional free space required

during installation (cannot install on removable flash storage devices)

1280x800 display with 16-bit video card

Java™ Runtime Environment 1.6 (included)

DVD-ROM drive

QuickTime 7.6.6 software required for HTML5 media playback (B›Uvi‡bU †_‡K

msM„nxZ)

Mac OS

Multicore Intel processor

Mac OS X v10.6.8 or v10.7. Adobe Creative Suite 5, CS5.5, and CS6 applications

support Mac OS X Mountain Lion (v10.8) when installed on Intel based

systems.**

512MB of RAM

1.8GB of available hard-disk space for installation; additional free space required

during installation (cannot install on a volume that uses a case-sensitive file

system or on removable flash storage devices)

1280x800 display with 16-bit video card

Java Runtime Environment 1.6

DVD-ROM drive

QuickTime 7.6.6 software required for HTML5 media playback (B›Uvi‡bU †_‡K

msM„nxZ)


33

Adobe Dreamweaver CS6 install Kivi Rb¨ cÖ_‡g wmwW‡Z _vKv Adobe Dreamweaver CS6

†dvìviwU Lywj|

Gi †fZ‡i _vKv Dreamweaver †jLv dvBjwU‡Z Wvej wK¬K Ki‡j wb‡Pi g‡Zv GKwU DB‡Ûv Avm‡e|

GLv‡b dvBjwU‡K AvbwRc K‡i wb‡Z ej‡e| GRb¨ GKwU †dvìv‡ii †jv‡Kkb e‡j w`‡Z n‡e, †hLv‡b dvBj

¸‡jv Rgv n‡e| GLv‡b Avgiv AvcvZZ †W·Uc †dvìviwU †`wL‡q w`‡qwQ| dvBj Gi †jv‡Kkb †`Lv‡bvi ci

Next G wK¬K Ki‡j GwU AvbwRc nIqv ïi Ki‡e| Gici GwU AvbwRc n‡q †M‡j Avgiv †h †dvìv‡ii K_v


34

e‡jwQjvg, †m †dvìv‡i †M‡j setup.exe bv‡g GKwU dvBj cvIqv hv‡e| I‡qemvB‡U AwaK cwigv‡Y wfwRUi

wb‡q Avmvi Rb¨ mvP© BwÄb AcwUgvB‡Rkb m¤ú‡K© cwic~Y© aviYv _vK‡Z nq| Avi G‡¶‡Î †jL‡Ki †jLv ÔÔmvP©

BwÄb AcwUgvB‡RkbÕÕ I ÔÔA¨vWfvÝW mvP© BwÄb AcwUgvB‡RkbÕÕ eB `ywU Avcbv‡K mvnvh¨ Ki‡e|

†mwU‡Z Wvej wK¬K Ki‡j wb‡Pi gZ BÝUj nIqv ïi Ki‡e|

Zvici wR‡Ám Ki‡e, Avgiv GUv‡K wK wn‡m‡e BÝUj Kie|

hw` GwU Avgv‡`i †Kbv n‡q _v‡K, Zvn‡j Avgiv GwU‡K mivmwi BÝUj Kie| Avi BÝUj G wK¬K Ki‡jB †m

GKwU wbw ©ó wmwiqvj b¤i PvB‡e| wmwiqvj b¤^iwU wVKVvK w`‡jB mdUIq¨viwU BÝUj nIqv ïi Ki‡e|


35

Avi hw` Avgv‡`i Kv‡Q †Kvb wmwiqvj bv¤vi bv _v‡K, Zvn‡j Avgiv Try †jLvi Dci wK¬K Kie| Zvici wb‡Pi

g‡Zv GKwU m¤§wZ cÎ (License Agreement) Avm‡e GLv‡b Accept G wK¬K Ki‡Z n‡e| mnR I ¯í mg‡q

†cÖvMÖvg wjLvi Rb¨ †jL‡Ki ÔÔg¨v‡µvwgwWqv wWªgI‡qfviÕÕ eBwU †`‡L wb‡Z cv‡ib|

Gici Avgv‡`i wR‡Ám Kiv n‡e mdUIq¨viwU‡K Avgiv †Kv_vq msi¶b Ki‡Z PvB|


36

GwU mvavibZ C:/ WªvB‡fi Program Files Gi g‡a¨ BÝUj Kiv n‡q _v‡K; Z‡e Avcwb PvB‡j Ab¨ †h‡Kv‡bv

WªvB‡f BÝUj Ki‡Z cv‡ib|

Gici Avgv‡`i mdUIq¨viwU BÝUj nIqv ïi n‡e Ges Dc‡ii gZ AMÖMwZ m~PK (Progress Bar) †`Lv‡e|

hLb GwU Pj‡Z _vK‡e ZLb BÝUj cÖwµqv m¤úbœ n‡Z Avi KZ mgq evwK Av‡Q, Zv cÖ`k©b Ki‡e| GwU A‡bK


37

mgq 10 wgwbU ej‡jI †ewkifvM mgq 5-6 wgwb‡UiI Kg mg‡q BÝUj n‡q hvq| Installation cÖwµqv m¤úbœ

n‡j wb‡Pi g‡Zv GKwU DB‡Ûv Avm‡e| AvBwU wi‡j‡UW wewfbœ B-eyKmg~n webv g~‡j¨ WvDb‡jvW Ki‡Z wfwRU

Kib http://www.bookbd.info|

GLvb †_‡K Launch Now G wK¬K Ki‡j mdUIq¨viwU Pvjy n‡q hv‡e|

wKš‧ Avgiv †h‡nZy GwU Trial ev cix¶vg~jK fv‡e BÝUj K‡iwQ, ZvB GwU Avgv‡K GKwU mZK©evZ©v †`Lv‡e †h

BÝUj Kivi w`b n‡Z Avwg Gi c‡ii 30 w`b ch©š— mdUIq¨viwU e¨envi Ki‡Z cvie| mnR I ¯í mg‡q

†cÖvMÖvg wjLvi Rb¨ †jL‡Ki ÔÔg¨v‡µvwgwWqv wWªgI‡qfviÕÕ eBwU †`‡L wb‡Z cv‡ib|


38

GLvb †_‡K Start Trial G wK¬K Ki‡Z n‡e| Zvici Avevi GKwU DB‡Ûv Avm‡e, †hLv‡b Rvb‡Z PvIqv n‡e †h

Avgiv wK wK ai‡bi †KvW GwWUi wn‡m‡e mdUIq¨viwU‡K eënvi Kie Ges GB mdUIq¨viwU ‡Kvb ‡Kvb

G·‡Ubkb hy³ dvBj Gi GwWUi wn‡m‡e KvR Ki‡e||

Avgv‡ì myweavi Rb¨ Avgiv me¸‡jvI evQvB Ki‡Z cvwi, A_ev PvB‡j Avgv‡ì BQvg‡Zv †h KqwU cÖ‡qvRb

wbe©vPb K‡i w`‡Z cvwi| Z‡e GwU Avgv‡K memgq wR‡Ám Ki‡e bv| ïay gvÎ cÖ_gevi hLb Pvjy n‡e, ZLb-B

GKevi wR‡Ám Ki‡e| AvBwU wi‡j‡UW wewfbœ B-eyKmg~n webv g~‡j¨ WvDb‡jvW Ki‡Z wfwRU Kib

http://www.bookbd.info|

GLvb †_‡K Select All G wK¬K K‡i ok wK¬K Kwi| Zvn‡jB Avgv‡ì G ch©š— installation cÖwµqv mgvß|

Gici Dreamweaver CS6 Pvjy n‡q hv‡e| Ges Welcome Screen cÖ wk©Z n‡e|


39

GwU cÖwZevi mdUIq¨viwU Pvjy nIqvi mgq cÖ`wk©Z n‡e| Z‡e Avcbvi Kv‡Q hw` weiw³Ki g‡b nq Zvn‡j GwU‡K

eÜ K‡iI ivL‡Z cvi‡eb|

eÜ K‡i ivLvi Rb¨ Welcome Screen wUi evg †Kvbvq j¶¨ Kib, Don‟t Show Again bv‡g GKwU

†PKe· i‡q‡Q| GwU‡Z GKevi wUK w`‡q w`‡j KL‡bv Avi †`Lv‡e bv| Z‡e Avgiv PvB‡j GB Welcome

Screen wU‡K Window †_‡K †diZ Avb‡Z cvie|

4.6 t Web Browser


40

Opera download Kiv hv‡e Zv‡`i Awdwmqvj mvBU http://www.opera.com †_‡K| e wMs Gi Rb¨

me‡P‡q RbwcÖq wm.Gg.Gm IqvW©‡cÖm wb‡q KvR Kivi Rb¨ †jL‡Ki †jLv ÔÔweMxwbs IqvW©‡cÖmÕÕ I ÔÔA¨vWfvÝW

IqvW©‡cÖmÕÕ eB `ywU c‡o wb‡Z cv‡ib|

GwU WvDb‡jvW Kivi Rb¨ mvBUwUi †gby¨ ev‡i Aew¯Z Browsers †gbyi Dci gvDm c‡q›Uvi ivL‡j GKwU

W«cWvDb †gby¨ Avm‡e| Ges GB †gby¨wUi †k‡lB †jLv i‡q‡Q Download Opera

GLv‡b wK¬K Ki‡j bZyb GKwU cvZv †jvW nIqv ïi Ki‡e| GLv‡b `ywU Ackb cvIqv hv‡e| cÖ_gwU

Kw¤úDUv‡ii Rb¨ Ges wØZxqwU †gvevBj wWfvB‡mi Rb¨| GLvb †_‡K Opera for PC, Mac & Linux G wK¬K

Ki‡j eªvDRviwUi executable file (.exe) WvDb‡jvW nIqv ïi n‡e|


41

Avgiv me‡P‡q †ewk †h eªvDRviwU eënvi K‡i _vwK, Zvi g‡a¨ dvqvid· Ab¨Zg| Z‡e GwU †h †gvwRjv

dvD‡Ûk‡bi •Zwi Zv nq‡Zv Avgiv A‡b‡KB Rvwb bv| GwU WvDb‡jvW Kiv hv‡e †gvwRjvi Awdwmqvj mvBU

http://mozilla.org †_‡K|

mvBUwU‡Z XyK‡jB Wvb cv‡k dvqvid· eªvDRvi WvDb‡jvW Kivi evUb cvIqv hv‡e| GLv‡b wK¬K Ki‡jB

WvDb‡jvW nIqv ïi n‡e| Gi mv‡_ mv‡_ bZyb Av‡iKwU cvZv Avm‡e, †hLv‡b Zv‡ì bZyb bZyb cY¨ I Dbœqb

m¤ú‡K© Rvbvi Rb¨ Avcbvi †gBj wVKvbv PvB‡e| Z‡e GwU HwQK (optional) Avcwb PvB‡j w`‡ZI cv‡ib| bvI

w`‡Z cv‡ib| †Kvb cÖKvi †cÖvMÖvwgs Ávb QvovB GLb wewfbœ wmGgGm Gi gva¨‡g †h‡Kvb ai‡Yi I‡qemvBU •Z wi

Kiv hvq| GmKj wmGgGm Gi g‡a¨ me‡P‡q RbwcÖq nj Rygjv| Avi Rygjv eënvi K‡i mn‡RB I‡qemvBU •Zwi

Ki‡Z †jL‡Ki ÔÔweMxwbs RygjvÕÕ eBwU †`‡L wb‡Z cv‡ib|

I‡qe †W‡fjc‡g‡›Ui KvR K‡ib A_P Ò¸Mj †µvgÓ eënvi K‡ib bv Ggb gvbyl Lye Kg-B cvIqv hv‡e| Avwg

wb‡RI e¨vw³MZ fv‡e GwUi †W‡fjcvi Uyjm Gi Rb¨ cQ›` I ¯^vQ›`¨ †eva Kwi| GwU WvDb‡jvW Kiv hv‡e

http://google.com/chrome GB wVKvbv †_‡K| †gvt wgRvbyi ingvb Gi ÔÔweMxwbs IqvW©‡cÖmÓ| GB eBwUi


42

gva¨‡g Avcwb wb‡R wb‡R †Kvb †cÖvMÖvwgs Ávb QvovB wKfv‡e RbwcÖq wm.Gg.Gm IqvW©‡cÖ‡mi gva¨‡g Avcbvi

I‡qemvBU ev e M •Zwi Ki‡Z cvi‡eb †m m¤ú‡K© †jLv n‡q‡Q| GLv‡b cÖ‡Z¨KwU welq mnR I mvejxj fvlvq

Qwei mv‡_ Dc vcb Kiv n‡q‡Q|

GLv‡b XzK‡j wVK gvSLv‡b WvDb‡jvW Kivi Rb¨ GKwU bxj †evZvg †`Lv hv‡e| GLv‡b wK¬K Ki‡j GKwU

cc-Avc e‡· m¤§wZ cÎ cÖ`wk©Z n‡e|

GLvb †_‡K Accept and Install G wK¬K Ki‡Z n‡e| wK¬K Kivi ci GKwU executable file install nIqvi

Rb¨ wR‡Ám Ki‡e|


43

wKš‧ GwU mivmwi e«vDRv‡ii BÝU‡jmb dvBj bq| GwU Avjv`v GKwU BÝUjvi| A_©vr GwU‡K Avgiv hLb Pvjy

Kie, ZLb GwU Google Chrome eªvDRvi WvDb‡jvW ïi Ki‡e Ges cieZ©x‡Z BÝUj Ki‡e|

ZvB WvDb‡jvW †kl n‡q †M‡j Avgiv BÝUjviwU‡K Wvej wK¬K K‡i Pvjy Ki‡jB GwU e«vDRvi WvDb‡jvW ïi

K‡i w`‡e|

hLb GwU WvDb‡jvW n‡Z _vK‡e ZLb wb‡Ri g‡Zv evwK _vKv mgq cÖ`k©b Ki‡e|


44

WvDb‡jvW †k‡l wb‡Pi gZ GKwU DB‡Ûv Lyj‡e| GLvb †_‡K Next G wK¬K Ki‡Z n‡e|

Next G wK¬K Ki‡jB eªvDRvi Pvjy n‡q hv‡e|

Ab¨vb¨ e«vDRv‡ii gZ Google Chrome I Syncronizing I e¨vKAvc myweav w`‡q _v‡K| syncrnize and

backup n‡Q Ggb GKwU myweav, hvi gva¨‡g Avgiv Avgv‡`i mKj Bookmark, History I Settings me

RvqMvq me T.N.R cve| Z‡e GB myweavi c~e©kZ© n‡Q sign in Ki‡Z n‡e| Signed In _vKv Ae¯vq Avcbvi

mKj Z_¨ Google Chrome Server-G msiw¶Z n‡Z _vK‡e| Ges Avcwb Avevi hLb Ab¨ ‡Kvb DivvBm

‡_‡K jM Bb Ki‡eb, ZLb Avcbvi mKj Z_¨ †mB wWfvB‡m P‡j Avm‡e|


45

weMxwbs Rygjv

A¨vWfvÝW Rygjv

cÖ‡dkbvj Rygjv

Rygjv †U¤ú‡jU †gwKs

weMxwbs IqvW©‡cÖm

A¨vWfvÝW IqvW©‡cÖm

cÖ‡dkbvj IqvW©‡cÖm

B›Uvi‡b‡U AvZ¥Kg©ms¯vb-1


B-Kgvm© A¨vÛ Rygjv! fvPz©gvU©

B-Kgvm©

g¨v‡µvwgwWqv wWªgI‡qfvi

mvP© BwÄb AcwUgvB‡Rkb

A¨vWfvÝW mvP© BwÄb AcwUgvB‡Rkb

cÖ‡dkbvj mvP© BwÄb AcwUgvB‡Rkb

d‡i· †UªwWs

B-gv‡K©wUs

GBP wU Gg Gj-5

A¨vWfvÝW GBPwUGgGj

wcGBPwc A¨vÛ gvB GmwKDGj

A¨vWfvÝW wcGBPwc A¨vÛ gvB GmwKDGj

Ae‡R± Awi‡q‡›UW wc.GBP.wc

†WUv‡em gvB GmwKDGj

wm †cÖvMÖvwgs

Rvfv †cÖvMÖvwgs

Rvfvw¯…Þ

Rygjv! †Ug‡c U †gwKs

A¨vWfvÝW d‡Uvkc

A¨vWfvÝW Bjv‡÷ªUi

cÖ‡dkbvj MÖvwd· wWRvBb

cÖ‡dkbvi Kw¤úDUvi †bUIqvwK©s

I‡W¯‥ Ges AvDU‡mvwm©s

A¨vwdwj‡qU gv‡K©wUs


46

Aa¨vq 05

wKQy AwZ cÖ‡qvRbxq HTML TAGS

GB Aa¨vq †k‡l Avgiv Rvb‡Z cvi‡ev :

1 HTML Gi AwZ cÖ‡qvRbxq U¨vM mg~n

2 ïay gvÎ HTML e¨envi K‡i GKwU c~b©v½ I‡qe †cR •Zwi

3 HTML G Qwei e¨venvi Kiv

4 wfwWI, Mvb Ges A¨vwb‡gk‡bi e¨envi Kiv


47

5.1 t iPbv/wbeÜ (Article) †jLv t

G ch©v‡q Avgiv wkLe wKfv‡e HTML–G GKwU AvwU©‡Kj wjL‡Z nq| Avgiv ¯‥yj Ges K‡j‡R wewfbœ mg‡q

wewfbœ wel‡q iPbv wj‡LwQ| wewfbœ I‡qe mvB‡UI GLb wewfbœ wel‡q wbeÜ ev Blog i‡q‡Q hv Avgv‡ì bvbv cÖKvi

Z_¨ w`‡q _v‡K| iPbv †jLvi Rb¨ Avgv‡ì †hme U¨vM eënvi Ki‡Z n‡e Zv nj-

• h1-h6

GwU iPbvi wk‡ivbvg ev Heading wjL‡Z eënvi Kiv nq| h1 n‡Q me‡P‡q eo (large font) I †gvUv

(Bold) †jLvi Rb¨| h2 n‡Q h1 Gi †P‡q GKUy †QvU, h3 Av‡iKUy †QvU; Gfv‡e h6 ch©š— ch©vqµ‡g †QvU

†jLvi Rb¨ eënvi Kiv nq|

GwU ‡jLvi wbqg n‡Q <h1> ... </h1>

• p

GwU w`‡q GKwU c¨viv Avjv`v Kiv nq| GwU †jLvi wbqg </P>......<P>

• br

HTML G Avgiv hZeviB space †`B bv †Kb, eªvDRvi ïaygvÎ GKwU space-B count Ki‡e (GKvwaK

Space Gi cÖ‡qvRb n‡j wjL‡Z n‡e)| wVK †Zgwb Avgiv hZeviB Enter Pvwc bv †Kb, eªvDRvi

GKwUI count Ki‡e bv| ZvB GK jvBb Gi †jLv †kl K‡i Ab¨ jvBb G hvIqvi Rb¨ <br/> eënvi Ki‡Z

n‡e| Z‡e g‡b ivL‡Z n‡e †h Avgiv hLb GKwU U¨vM †kl K‡i bZyb Av‡iKwU U¨vM ïi Kwi ZLb eªvDRvi wb‡R

†_‡KB GKwU line break (Avcbv Avcwb c‡ii jvBb G P‡j hvIqv) w`‡q †bq| Avi hw` KL‡bv GKvwaK jvBb

†eªK Gi cÖ‡qvRb c‡o, Z‡e Avgiv GKvwaKevi <br/> eënvi Ki‡Z cvie|

* Ab¨ U¨vM †Rvovq †Rvovq wjL‡Z n‡jI GwU GKeviB wjL‡Z nq|

e¨vm! n‡q †Mj Avcbvi HTML †kLv! GZUyKy cvi‡jB Avcwb mdjfv‡e GKwU Aby‡Q` (Article) iPbv Ki‡Z

cvi‡eb|

Zvn‡j Pjyb Avgiv Rjw` GKwU Article wj‡L †dwj|

<!DOCTYPE HTML>

<html>

<body>

<h1> My country </h1>

<h4>Basic Things About My Country</h4>

<p> The name of our country is Peoples Republic Of Bangladesh. It is populated

with 160 million people. It is a riverine country.

</p>

<h4>Freedom:</h4>

<p> Bangladesh got independence in 1971 from Pakistan. About 3 million

people died in that war of freedom.

</p>

</body>

</html>


48

CD S.MJ first_doc.html

GLb Av‡Mi wbqg Abyhvqx †mf K‡i eªvDRv‡i Open Kwi| GwU †`L‡Z GiKg n‡e -

wPÎt eªvDRv‡i wcÖwfD|

Zvn‡j Avgiv GLb †h‡Kv‡bv cÖKvi Aby‡Q` w`‡q HTML dvBj •Zwi Ki‡Z cvie|

5.2 t Qwe eënvi t

GKUy Av‡M †Zv Avgiv bZyb dvBj •Zwi Kiv Ges Zv‡Z †Kvb wKQy eo/†QvU K‡i †jLv wkLjvg| wKš‧ Gfv‡e

wjL‡j †Zv Avi Avgv‡ì I‡qe mvBU •Zwi n‡q hv‡e bv| Avgv‡ì‡K †jLvi mv‡_ wewfbœ cÖKvi Qwe, wfwWI, Mvb

BZ¨vw` mvBU G w`‡Z n‡e| e wMs Gi Rb¨ me‡P‡q RbwcÖq wm.Gg.Gm IqvW©‡cÖm wb‡q KvR Kivi Rb¨ †jL‡Ki

†jLv ÔÔweMxwbs IqvW©‡cÖmÕÕ I ÔÔA¨vWfvÝW IqvW©‡cÖmÕÕ eB `ywU c‡o wb‡Z cv‡ib|

Zvn‡j cÖ_‡g †`wL, wKfv‡e Qwe eënvi Kie|

HTML-G Qwe eënvi Ki‡Z n‡j wjL‡Z nq <img> A_©vr image Gi msw¶ß ic| GLb Avgiv i1.jpg

bv‡g GKwU Qwe Avgv‡ì HTML dvBj G eënvi Kie| GwU CDÕi Images †dvìv‡i †Ìqv Av‡Q| GLv‡b

Avcwb PvB‡j Avcbvi Kw¤úDUvi G _vKv Ab¨ †h‡Kv‡bv Qwe eënvi Ki‡Z cv‡ib| GwU GKwU GKK U¨vM weavq

G‡KI †Rvov wn‡m‡e wjL‡Z n‡ebv|

<html>

<body>

<h1> Tanvirs Party</h1>

<img src="image/i1.jpg" width="960" height="640">

</body>

</html>


49

CD S.MJ display_img.html

†jLv n‡q †M‡j h_vixwZ save K‡i eªvDRv‡i Pvjy Kwi| GwU †`L‡Z GiKg n‡e|

†h‡nZy Avgiv <img/> U¨vM Gi g‡a¨ Gi Drm (Source) e¨vwZZ Ab¨ wKQy wjwL bvB, ZvB Qwe Zvi wbR¯

(default) AvKv‡i cÖ`wk©Z n‡e| hw` Avgiv Gi •`N¨© Ges cÖ cwieZ©b Ki‡Z PvB, Zvn‡j U¨vM Gi g‡a¨

AwZwi³ hv wjL‡Z n‡e Zv wbgœict

<img src=" image/i1.jpg "width="960" height="640">

GLv‡b •`‡N©ï Rb¨ height Ges cÖ‡¯i Rb¨ width Gi gvb cwieZ©b K‡i w`‡jB Avgiv Kvw|LZ AvKvi cve

GLv‡b Avgiv GB gvb¸‡jv `yBfv‡e wjL‡Z cvwi| †hgb-

Height="200px" S.MJ height="40%"

5.3 t wfwWI, Mvb A_ev Ab¨ †h‡Kv‡bv dvBj eënvi t

Qwe ev‡` Ab¨ †h‡Kv‡bv cÖKvi dvBj; †hgb- audio, video, Java applets, ActiveX, PDF, and Flash

BZ¨vw` eënvi Kivi Rb¨ Avgv‡ì <object> ... </object> U¨vMwU eënvi Ki‡Z n‡e| GLv‡b wfwWI,

A¨vwb‡gkb I swf Gi †¶‡Î Avgiv Av‡Mi g‡Zv height Ges width eënvi Ki‡Z cvie| Avi GwU ‡jLvi

wbqg n‡Q t

<object data="Aji jhoro jhoro.mp3">

</object>

<object data="running_horse.mpeg4" height="300" width-"500"> </object>

Gevi Avgiv mvavib wRwbm¸‡jv wk‡L wbjvg| GLb Avgiv hv hv wkLjvg, Zv w`‡q GKwU m¤úyY© dvBj •Zwi Kie|

<!doctype html>

<html>

*GLv‡b px A_© n‡Q pixels Ges hLb

Avgiv % eënvi Kie, ZLb QwewU Zvi RvqMv

Abymv‡i (†hgb-div, table) ¯vb `Lj

Ki‡e|


50

<body>

<h1>Cox's Bazar</h1>

<h5> The Biggest Shore On the Earth</h5>

<img src="Images/cox_bazar.jpg" height="250" width="1048"/>

<h3> Location </h3>

<p> Cox's Bazar is situated in the Chittagong district on Bangladesh. When a traveller

comes to visit Bangladesh, it is a place they must see. Cox's Bazar (Bengali: K·evRvi) is a

town, a fishing port and district headquarters in Bangladesh. It is known for its wide

sandy beach which is the world's longest natural sandy sea beach.[2][3][4] It is an

unbroken 125 km sandy sea beach with a gentle slope. It is located 150 km south of the

industrial port Chittagong. Cox‟s Bazar is also known by the name "Panowa," the literal

translation of which means "yellow flower." Its other old name was "Palongkee.".</p>

<audio controls>

<source src="jodi mon kade.mp3" type="audio/mpeg"></audio>

</body>

</html>

cÖkœce© t

Avcbviv †R‡b Lywk n‡eb †h, Avcbv‡ì‡K mn‡hvwMZv Kivi Rb Avgiv •Zwi K‡iwQ Book Support center| Avi GB

Book Support center-Gi B-†gBj A¨v‡Wªm n‡jv [email protected], hv Avcbv‡ì mKj mgm vi mgvavb

Ges GB eB m¤ú‡K© †h †Kvb cÖ‡kœi DËi †Ìqvi Rb •Zwi Av‡Q memgq| ZvB Avcbv‡ì hw GB eB‡q †Kvb wKQ zeyS‡Z

mgm v nq ev †Kvb cÖkœ †_‡K _v‡K Zvn‡j †gBj Kib GB wVKvbvq [email protected].


51

Aa¨vq 06

†ewmK wm Gm Gm


1 CSS wK

2 CSS Gi cÖKvi †f`

3 wewfbœ cÖKvi CSS Gi •ewkô I e¨envi †K․kj


52

Av‡Mi Aa¨vq ch©š— Avgiv hZUyKy wkLjvg, Zv‡Z †Zv Avgv‡ì I‡qemvBU •Zwi nj bv| Avgiv ïay c…ôv (Page)

•Zwi Kiv wkLjvg| GLb Avgiv wkLe wK K‡i Avgv‡ì KvR ¸‡jv‡K wKfv‡e AviI my›ì K‡i †Zvjv| CSS

†kLvi Av‡M wKš‧ Aek¨B HTML Rvb‡Z n‡e| Kvib CSS memgq HTML Gi Dci KvR K‡i _v‡K| ZvB

HTML wenxb CSS e…_v| Kw¤úDUvi †bUIqvwK©s Gi cÖv_wgK welq †_‡K ïi K‡i A¨vWfvÝW †j‡f‡ji wewfbœ

welqmg~n wb‡q ÔÔcÖvKwUK¨vj Kw¤úDUvi †bUIqvwK©sÕÕ eBwU †jLv n‡q‡Q| PvB‡j eBwU c‡o wb‡Z cv‡ib|

hLb-B Avgiv KvD‡K ewj wZwb †`L‡Z my›ì; Gi A_© `vovq wK? Gi A_© n‡Q wZwb wbðqB Lye ÷vBwjk, ZvB

bv? n¨vu ZvB| AvgivI Avgv‡ì I‡qe †cR¸‡jv‡K AviI my›ì K‡i †Zvjvi Rb¨ ÷vBj eënvi Kie|

6.1 t CSS wK ?

CSS Gi m¤úyY© ic n‡Q Cascading Style Sheet.

CSS cÖavbZ wZb fv‡e ‡jLv hvq| h_vt-

K. Inline CSS

L. Internal CSS

M. External CSS

6.1.1 t Inline CSS:

GwU Avgiv U¨vM Gi g‡a¨ wj‡L _vwK| †hgb t

<h1 color="red" ; font-size="16pt">

my favourite color

</h1>

GwU memgq Bb jvBb, A_©vr jvBb Gi g‡a¨ KvR K‡i _v‡K| GwU Avgiv †hLv‡b cÖ‡qvRb ïay †mLv‡bB wjLe|

wKš‧ G ai‡bi ÷vBj Gi me‡P‡q eo mgm¨v n‡Q GwU ïaygvÎ †hLv‡b wjLe, †mLv‡bB KvR Ki‡e| Ab¨ †Kv_vI

cÖ‡qvRb n‡j Avgv‡K cybivq wjL‡Z n‡e| ZvB G ai‡bi ÷vBj Avgiv ïaygvÎ †hLv‡b e¨wZµg ÷vB‡ji cÖ‡qvRb

n‡e, †mLv‡bB eënvi Kie| j¶¨ Kib GwU KL‡bv GKwU fv‡jv Kv‡Ri aib n‡Z cv‡i bv| jvB‡bi g‡a¨

wmGmGm †jLvi d‡j Avgv‡ì GBPwUGgGj wnwRwewR †`Lv‡Z cv‡i; †hwU GKRb cÖ‡dkbvj †W‡fjcv‡ii Kv‡Ri

cwicwš| Avi jvB‡bi g‡a¨ wmGmGm _vK‡j eªvDRv‡ii Zv cÖ‡mm Ki‡Z mgq †ewk jv‡M weavq †c‡Ri MwZ

A‡bK nªvm cvq (hwÌ Zv K‡qK wgwj †m‡KÛ!) †Kvb cÖKvi †cÖvMÖvwgs Ávb QvovB GLb wewfbœ wmGgGm Gi

gva¨‡g †h‡Kvb ai‡Yi I‡qemvBU •Zwi Kiv hvq| GmKj wmGgGm Gi g‡a¨ me‡P‡q RbwcÖq nj Rygjv| Avi

Rygjv eënvi K‡i mn‡RB I‡qemvBU ‣Zix Ki‡Z †jL‡Ki ÔÔweMxwbs RygjvÕÕ eBwU †`‡L wb‡Z cv‡ib|

6.1.2 t Internal CSS:

GwU Avgiv memgq Head U¨vM Gi g‡a¨ wjLe| GLv‡b Avgv‡ì ÷vBj Ges HTML GKB dvBj Gi g‡a¨

_vK‡e| Gi me‡P‡q eo myweav n‡Q †h, †nW Gi g‡a¨ Avgiv GKevi Gi ÷vBj e‡j †è, Avi hZevi-B

Avgv‡ì ÷vBj eënvi Kivi cÖ‡qvRb co‡e, Avgiv bv wjL‡jI Head Gi g‡a¨ Aew¯Z CSS Gi ÷vBj Gi

myweav cve|

Z‡e Internal CSS m¤ú‡K© Rvbvi c~‡e© Avgv‡ì‡K CSS Gi Syntax fvjfv‡e eyS‡Z n‡e| wb‡Pi wPÎwU

fvjfv‡e †Lqvj Ki‡jB Avgiv CSS Syntax m¤ú‡K© cwi®‥vi avibv cve|


53

GLv‡b Selector ej‡Z Avgiv †hB U¨vM Gi g‡a¨ ÷vBwjs Gi myweav cÖ‡qvM Ki‡Z PvB, †mB U¨vMwU‡K cÖ_‡g

ej‡Z n‡e| (GLv‡b D`vniY Gi Rb¨ h1 †Ìqv n‡q‡Q| Avcwb GLv‡b Avcbvi myweavgZ Ab¨ †h‡Kv‡bv U¨vM;

†hgb- p, li, span BZ¨vw` eënvi Ki‡Z cv‡ib|) Zvici Curly Braces (G‡K Avgiv mvavibZ Second

Bracket e‡j _vwK) Gi g‡a¨ Avgv‡ì ÷vBwjs Gi Property I Value ¸‡jv‡K wjL‡Z n‡e| GwU hw` GLb

Avcbvi g‡b bvI _v‡K, ev KwVb g‡b nq; GKUyI bv Nve‡o mvg‡bi †h Abykxjbx Av‡Q, †m¸‡jv g‡bv‡hvM w`‡q

PP©v Ki‡Z _vKzb| wVK-B iß n‡q hv‡e| GwU †h dig¨vU G †jLv nq, Zv wb¤§ict

<html>

<head>

<style type=”text/css”>

H1 {color:orange;}

</style>

</head>

<body>

<h1> Africa is Beautiful </h1/>

</body>

</html>


54

CD †Z internal-style.html

GB wPÎwU‡Z †Lqvj Ki‡j †`L‡Z cve †h, cÖ_‡g Avgiv Head ïi K‡iwQ| Zvici †h‡nZy Avgv‡ì ÷vBwjs Gi

KvR Ki‡Z n‡e, ZvB ïi‡ZB wjLe ÷vBj UvBc| Zvici †_‡K Avgiv †h U¨vM Gi Rb¨ †h ÷vBj PvB, Zv

wjL‡Z n‡e| GB HTML dvBj G hZeviB Avgiv h1 U¨vM eënvi Kie, cÖ‡Z¨KwU †jLv-B Kgjv e‡Y©i †`Lv‡e|

GLv‡b wKQy welq j¶ ivL‡Z n‡e ‡h,

Internal Style Sheet memgq head Gi g‡a¨ †jLv nq|

ïi‡ZB Style type e‡j w`‡Z n‡e| Avi †h‡nZy <style> bv‡g GKwU U¨vM ïi n‡q‡Q, ZvB

HTML Gi Ab¨ me mvaviY U¨vM ¸‡jvi gZb GUv‡KI KvR †k‡l </style> †jLvi gva¨‡g eÜ K‡i

w`‡Z n‡e|

†hB U¨vM Gi g‡a¨ ÷vBj KvR Ki‡e, Zvi bvg Av‡M ej‡Z n‡e (†hgb- h1, p, span, li BZ¨vw`)

Zvici 2q eÜwb (Second Bracket) Gi g‡a¨ ivL‡Z nq|

Avi †bvUc¨v‡W KvR Kivi mgq Lye mveavbZvi mv‡_ UvBc Ki‡Z n‡e, †hb GKwU A¶i, eÜwb, D×…wZ

wPý, mgvb wPý ev` bv c‡o hvq| Kvib, hw` †Kv_vI †Kvb GKwU wKQy ev` c‡o hvq, Z‡e †m‡¶‡Î

eªvDRv‡i wKQy bv †`Lv‡bvi m¤¢vebv †ewk|

Z‡e cieZ©x‡Z hLb Avgiv Dreamweaver w`‡q KvR Kie, ZLb GB Sv‡gjv nIqvi m¤¢vebv cÖvq †bB

ej‡jB P‡j|

Avi me‡P‡q eo g‡b ivLvi e¨vcvi n‡Q GwU ïay gvÎ †hB †cR G _vK‡e H †cR Qvov GwU Ab¨ †Kv_vI

e¨venv‡ii my‡hvM Avgiv cve bv| I‡qemvB‡U AwaK cwigv‡Y wfwRUi wb‡q Avmvi Rb¨ mvP© BwÄb AcwUgvB‡Rkb

m¤ú‡K© cwic~Y© aviYv _vK‡Z nq| Avi G‡¶‡Î †jL‡Ki †jLv ÔÔmvP© BwÄb AcwUgvB‡RkbÕÕ I ÔÔA¨vWfvÝW mvP©

BwÄb AcwUgvB‡RkbÕÕ eB `ywU Avcbv‡K mvnvh¨ Ki‡e|

6.1.3 t External CSS:

GwU m¤ú~Y© Avjv`v GKwU dvBj| A_©vr G ch©š— Avgiv hv Av‡jvPbv K‡iwQ, Zv Avgv‡ì GKwU HTML dvBj

Gi g‡a¨B mxgve× wQj| wKš‧ hLb Avgiv External CSS wb‡q KvR Kie, ZLb cÖ‡qvRb n‡e yBwU dvBj Gi|

AvBwU wi‡j‡UW wewfbœ B-eyKmg~n webv g~‡j¨ WvDb‡jvW Ki‡Z wfwRU Kib http://www.bookbd.info|


55

cÖ_gwU n‡Q Avgv‡ì memgq eënvi Kiv HTML| GwUi extension n‡e .html |

Ges wØZxqwU n‡Q CSS A_©vr Cascading Style Sheet Gi G·‡Ubkb n‡e CSS |

GwU Avgiv memgq head Gi g‡a¨ link K‡i wè|

ev¯—‡e †`Lvi Rb¨ Avgiv GKwU bZyb dvBj •Zwi Kwi, hv‡Z Avgiv m¤ú~Y© Avjv`v GKwU CSS dvBj †K link

K‡i wè| bZyb dvBj ‣Zwi Kivi Rb¨ Av‡Mi g‡Zv †U·U WKy‡g›U I‡cb K‡i wb‡Pi g‡Zv K‡i wjLyb|

<html>

<head>

<link rel="stylesheet" type="text/css" href="CSS/home.css">

</head>

<body>

<h1> 30% off ! </h1>

<p>

Get 30 % off on all selected shoes from 16 October to 30 October.

</p>

</body>

</html>

†jLv †kl n‡j h_vixwZ File menu †_‡K Save as G wM‡q KvR m¤úbœ Kwi Ges D³ dvBjwUi Dci Double

click K‡i eªvDRv‡i cÖ`k©b Kwi| Zvn‡j Dc‡ii g‡Zv djvdj cÖ k©b Ki‡e|


56

GLv‡b †Lqvj Kib, †h home.css bv‡g GKwU style sheet Gi mv‡_ Avgv‡`i HTML dvBjwU‡K link Kiv

n‡q‡Q| GB dvBjwU wmwW‡Z †`qv Av‡Q|

weMxwbs Rygjv

A¨vWfvÝW Rygjv

cÖ‡dkbvj Rygjv








B-Kgvm©





d‡i· †UªwWs

B-gv‡K©wUs

GBP wU Gg Gj-5






wm †cÖvMÖvwgs

Rvfv †cÖvMÖvwgs

Rvfvw¯…Þ


A¨vWfvÝW d‡Uvkc





57



gwWDj 2 CSS 1 Ges 2

Aa¨vq : 07 Font Size


1 Font – size Gi eënvi cÖYvjx

2 % w`‡q d›U mvBR eënvi Kiv

3 Pt eënvi K‡i d›U mvBR †Ìqv

4 Em eënvi K‡i d›U mvBR †Ìqv

5 EmI Pt Gi g‡a¨ wnmve Kivi wbqg


58

GLvb †_‡K ïi n‡Q Avgv‡ì Avmj CSS †kLv| GB Aa¨vq †_‡K Avgiv ch©vqµ‡g mewKQyB wkLe|

7.1 t Font Size:

d›U mvBR ej‡Z GKwU †jLv ev †U·U Gi AvKvi‡K †evSvq| wewfbœ iKg Kv‡Ri †¶‡Î Avgv‡ì wewfbœ AvKv‡ii

d›U e¨venv‡ii cÖ‡qvRb co‡Z cv‡i| ZvB GwU Avgv‡ì me‡P‡q †ewk Kv‡R jvM‡e|

mvavibZ eªvDRvi Gi Av`k© (Default) d›U mvBR n‡Q 16 c‡q›U (16pt) | ZvB Avgiv hw` Avgv‡ì CSS G

†Kvb d›U mvBR Gi K_v D‡j L bv Kwi, Z‡e eªvDRvi h1-h6 U¨vM Gi ga¨ †jLv (Text) Qvov mKj †jLv‡KB

16 c‡q›U mvBR G cÖ k©b Ki‡e| ZvB Avgv‡ì Pvwn`v g‡Zv AvDUcyU cvIqvi Rb¨ Avgiv memgq CSS Gi

g‡a¨ font-size e‡j †è| Z‡e GKwU welq Aek¨B †Lqvj ivLe †h, Avgiv d›U mvBR Avgv‡ì wbqš¿‡b ivLe

wVK B; wKš‧ ZvB e‡j Heading Gi AvKvi Kwg‡q paragraph Gi g‡Zv Kie bv| Ges Paragraph Gi

AvKvi evwo‡q Heading Gi g‡Zv K‡i Zyje bv| †cÖvMÖvwgs j¨vs¸‡qR wcGBPwc‡Z nv‡ZLwo †bqv †_‡K ïi

K‡i cÖ‡dkbvjx KvR Ki‡Z †jL‡Ki ÔÔwcGBPwc A¨vÛ gvB GmwKDGjÕÕ eBwU †`‡L wb‡Z cv‡ib|

d›U mvBR Avgiv A‡bK fv‡e wjL‡Z cvwi| Z‡e mPivPi eëüZ wZbwU-B GLv‡b Av‡jvPbv Kiv nj|

1. % Gi gva¨‡g

2. Pt w`‡q

3. Em w`‡q

7.2 t % w`‡q d›U mvBR †Ìqv t

eZ©gvb I‡qe wWRvB‡bi evRvi NvuU‡j ev Ab¨vb¨‡ìI gyL †_‡K nqZ GKwU bZzb kã ï‡b _vK‡eb| Zv n‡Q

Responsive Web Design| GB Responsive Web Design Gi †¶‡Î wWfvBm Abyhvqx hv‡Z Avcbvi

text ¸‡jv AvK…wZ cwieZ©b Ki‡Z cv‡i (resize), †mwU wbwðZ Kivi Rb¨ d›U Gi mvBR % †jLv nq| GLb

Avgiv †`Le wK K‡i % Gi gva¨‡g d›U mvBR †Ìqv hvq| Gi Rb¨ Avgv‡ì Av‡Mi g‡Zv †bvUc¨vW Ly‡j wb‡Pi

†cÖvMÖvgwU wjL‡Z n‡e|

<html>

<head>

<style type="text/css">

h1 {font-size:150%}

p {font-size:60%}

</style>

</head>

<body>

<h1> Coca-cola</h1>

<p> This is a foreign company which is situated in north america </p>

</body>

</html>


59

<html>

<head>


h1 {font-size:150px;}

p {font-size:60px;}

</style>

</head>

<body>

<h1> Coca-cola</h1>

<p> This is a foreign company which is situated in north america </p>

</body>

</html>

CD †Z onu2.html

GLv‡b D`vni‡bi Rb¨ h1 {font-size:150%} I p {font-size:60%} eënvi Kiv n‡q‡Q| Avcwb BQv Ki‡j

GLv‡b Avcbvi cQ›` g‡Zv Ab¨ †h‡Kv‡bv gvb eënvi Ki‡Z cv‡ib| GLv‡b Av`k© gvb n‡Q 100%| Avcwb hw`

mvavib gv‡bi †P‡q Kg Pvb, Z‡e Gi gvb w`‡Z cv‡ib 100 Gi †P‡q Kg| Avi hw` mvavib AvKv‡ii †P‡q eo

†`Lv‡Z Pvb, Z‡e 100 Gi †ewk gvb eënvi Ki‡Z n‡e| Responsive Design Gi †¶‡Î wbLyuZ gvc cvIqvi

Rb¨ Avcwb `kwg‡KI gvb wjL‡Z cv‡ib| †hgbt font-size:34.754308975%


60

7.3 t Pt w`‡q d›U mvBR †Ìqv t

Pt ej‡Z GLv‡b c‡q›U †evSv‡bv n‡q‡Q| Avcwb hw` Av‡M KL‡bv Microsoft Word eënvi K‡i _v‡Kb, Z‡e

Avcwb GB welqwU ¯…xb Gi Dc‡i d›U mvBR †Ìqvi mgq †`‡L‡Qb| GLv‡b d›U mvBR †Ìqvi †¶‡Î †Kvb

evaëvaKZv †bB| Z‡e ev¯—e AwfÁZv †_‡K ejwQ, 8pt Gi †P‡q Kg Ges 72pt †ewk mvBR Gi d›U Gi

cÖ‡qvRb Avcbvi co‡e bv| †Kvb cÖKvi †cÖvMÖvwgs Ávb QvovB GLb wewfbœ wmGgGm Gi gva¨‡g †h‡Kvb ai‡Yi

I‡qemvBU •Zwi Kiv hvq| GmKj wmGgGm Gi g‡a¨ me‡P‡q RbwcÖq nj Rygjv| Avi Rygjv eënvi K‡i mn‡RB

I‡qemvBU •Zwi Ki‡Z †jL‡Ki ÔÔweMxwbs RygjvÕÕ eBwU †`‡L wb‡Z cv‡ib|

GLb Avgiv wb‡Pi Abykxjbx‡Z †`Le wKfv‡e pt w`‡q d›U mvBR w`‡Z nq|

<!DOCTYPE html>

<html>

<head>


h1 {font-size:36pt;}

p {font-size:18pt;}

</style>

</head>

<body>

<h3> Audit report of</h3>

<h1>Bongo Communications</h1>

<p> This is the annual business report of Bongo Communications for the year of 2012-13

</p>

</body>

</html>

CD †Z pt.html

7.4 t em w`‡q d›U mvBR †Ìqv t

Internet Explorer ev Ab¨ †h‡Kv‡bv cÖKvi eªvDRv‡i d›U wimvBwRs ÎywU Gov‡bvi Rb¨ A‡bK †cÖvMÖv‡gi-B pt ev

% Gi e`‡j em eënvi K‡i _v‡Kb| Avwg Av‡MI e‡jwQjvg †h eªvDRvi Gi Av`k© d›U mvBR n‡Q 16 pt|

myZivs GB wWdë d›U mvBR B n‡Q 1 em| A_©vr, GLv‡b Avcbv‡K GKUy wnmve K‡l Avcbv‡K d›U mvBR

wba©viY Ki‡Z n‡e|


61

†h c‡q›U mvBR Gi †jLv Avcwb em w`‡q †`Lv‡Z Pvb, Zv‡K Avcbvi 16 w`‡q fvM Ki‡Z n‡e| MvwYwZK fv‡e

ej‡Z †M‡j

Font size in em

hw` GiciI Avcbvi eyS‡Z mgm¨v nq, wPš—v bv K‡i wb‡Pi AbykxjbwU †`Lyb mewKQy cwi®‥vifv‡e eyS‡Z

cvi‡eb|

<!DOCTYPE html>

<html>

<head>


h1 {font-size:2.45em;}

p {font-size:1.2em;}

</style>

</head>

<body>

<h3> Breaking News</h3>

<h1>60% off in all products</h1>

<p> Get 60% off on our all selected products. Available from 16 September to 31

September.</p>

</body>

</html>

Ex-2:

<!DOCTYPE html>

<html>

<head>


h1 {font-size:5em;}

p {font-size:4em;}

</style>

</head>

<body>

<h3> Head Line </h3>

<h1>60% off in all products</h1>

<p> Get 60% off on our all selected products. Available from 16 September to 31

September.</p>

</body>


62

</html>

CD †Z em.html

Avgiv PvB‡j small, smaller, medium, large, larger BZ¨vw` e¨envi K‡iI d›U mvBR w`‡Z cvwi| e wMs

Gi Rb¨ me‡P‡q RbwcÖq wm.Gg.Gm IqvW©‡cÖm wb‡q KvR Kivi Rb¨ †jL‡Ki †jLv ÔÔweMxwbs IqvW©‡cÖmÕÕ I

ÔÔA¨vWfvÝW IqvW©‡cÖmÕÕ eB `ywU c‡o wb‡Z cv‡ib|


63

Aa¨vq-08

wewfbœ cÖKvi d›U e¨venvi Kiv


1 Font family Gi Kvh© cÖYvjx I eënvi

2 Font family Gi cÖKv‡f`

3 Generic font family Gi eënvi

4 Font style Gi eënvi

5 Font variant Gi eënvi

6 Font Weight Gi eënvi

7 Short-hand ev ms‡¶‡c d‡›Ui mKj cÖcvwU© Gi eënvi

†K․kj|


64

8.1 t Font:

GZ¶b Avgiv †`Ljvg Avgv‡ì †jLv¸‡jv‡K wKfv‡e eo/†QvU Kie| wKš‧ Avgv‡ì †jLv ¸‡jv ïay eo †QvU

Ki‡jB †Zv n‡e bv! G¸‡jvi g‡a¨ wKQyUv •ewPÎAvb‡j AviI AvKl©Yxq n‡e| Avi GB •ewPÎ Avgiv Avbe d›U

cwievi cwieZ©b K‡i |

GwU Avgiv yBfv‡e Ki‡Z cvwi| cÖ_gwU n‡Q font-family w`‡q| Avi c‡iiwU Ki‡Z cvwi Generic font ev

GKwU wbw ©ó d›U w`‡qI Ki‡Z cvwi|

8.2 t Font Family Gi cÖKvi‡f`

font-family ej‡Z †jLvi ev d›U Gi †MvÎ †evSvq| †hgb t Arial, Sans Serif BZ¨vw` †`L‡Z cÖvq KvQvKvwQ

d›U e‡j G‡ì‡K GKB cwiev‡i aiv nq| yBwU ev Zvi AwaK GKB iKg †`L‡Z d›U¸‡jv‡K wb‡q GKwU d›U

cwievi MwVZ| GwU eënvi Kivi GKwU myweav n‡Q A‡bK mgq mevi Kw¤úDUv‡i meiK‡gi d›U _v‡K bv| ZvB

d›U d¨vwgwj eënvi Ki‡j H cwiev‡ii ‡h‡Kv‡bv GKwU d›U H Kw¤úDUv‡i _vK‡j ev H d›U Gi KvQvKvwQ †Kvb

d›U _vK‡j †mwUB cÖ wk©Z nq| AvBwU wi‡j‡UW wewfbœ B-eyKmg~n webv g~‡j¨ WvDb‡jvW Ki‡Z wfwRU Kib


GLb wb‡Pi Abykxjbx‡Z Avgiv †`Le wK K‡i d›U d¨vwgwj eënvi Ki‡Z nq|

<!DOCTYPE html>

<html>

<head>


h1 {font-family:Arial,Helvetica;}

p {font-family:"Times New Roman",Georgia,Serif;}

</style>

</head>

<body>

<h1>Canvas</h1>

<p> We have the best advertising service in Bangladesh. We provide all kinds of outdoor

advertising. </p>

</body>

</html>


65

AviI GKwU Abykxjbx t

<!DOCTYPE html>

<html>

<head>


h1 {font-family:Calibri,vardana;}

p {font-family:"Arial black",Georgia,Sens-Serif;}

</style>

</head>

<body>

<h1>Canvas</h1>

<p> We have the best advertising service in Bangladesh. We provide all kinds of outdoor

advertising. </p>

</body>

</html>

CD †Z font family.html

8.3 t Generic font famiy

Generic family †Z ïay GKwU gvÎ d›U eënvi Kiv nq| GLv‡b Avcwb †hB d›U eënvi Ki‡eb wVK

(exactly) H d›UwU-B AvDUcyU G cv‡eb| Z‡e G‡¶‡Î hw` Avcbvi †Kvb eënviKvixi (User) Kw¤úDUv‡i H

wbw ©ó d›UwU bv _v‡K, Z‡e †m H †jLvUyKy wWdë d›U A_©vr Times New Roman G †`L‡e| †cÖvMÖvwgs

j¨vs¸‡qR wcGBPwc‡Z nv‡ZLwo †bqv †_‡K ïi K‡i cÖ‡dkbvjx KvR Ki‡Z †jL‡Ki ÔÔwcGBPwc A¨vÛ gvB

GmwKDGjÕÕ eBwU †`‡L wb‡Z cv‡ib|


66

<!DOCTYPE html>

<html>

<head>


p {font:harrington;}

h1 {font:forte;}

div {font:"cooper Black";}

</style>

<body>

<h1> Introducing:</h1>

<p>

The brand new Honda City Motorbike. It has a superb milage of 45kmpl.

</p>

<div>

We have a very big network of survicing Centers all over the country.

</div>

</body>

</html>


<!DOCTYPE html>

<html>

<head>


p {font:vani;}

h1 {font:Georgia;}

div {font:"Kalinga";}

</style>

<body>

<h1> Introducing:</h1>

<p>

The brand new Honda City Motorbike. It has a superb milage of 45kmpl.

</p>


67

<div>

We have a very big network of survicing Centers all over the country.

</div>

</body>

</html>

8.4 t Font Style Gi e¨envi

Font style Gi g‡a¨ Avgiv e‡j w`‡Z cvwi †h H d›UwU †`L‡Z BZvwjK n‡e wKbv, ev Oblique n‡e wKbv; bvwK

bigvj _vK‡e| Z‡e wb‡Pi Abykxjbx‡Z GKwU gRvi e¨vcvi j¶¨ Kib, yB RvqMv‡Z yB cÖKv‡ii ÷vBj cÖ‡qvM

Kiv m‡Ë¡I; `ywU-B GKB djvdj cÖ`k©b Ki‡e|

<!DOCTYPE HTML>

<html>

<head>


span {font-style:italic;}

p {font-style:oblique;}

</style>

</head>

<body>

<p> The Population Problem of Bangladesh is getting higher and higher.

In the recent reports of the <span> World Health Organizasion </span>

there will 20 crore people in Bangladesh by 2015. </p>

</body>

</html>


68

8.5 t Font variant Gi e¨envi

GB cÖcvwU© Gi g‡a¨ `yBwU Ackb i‡q‡Q| GKwU n‡Q bigvj| A_©vr Gi d‡j †jLv mvavib fv‡eB †`Lv‡e| Avi

Ab¨wU n‡Q small caps| A_©vr me¸‡jv A¶iB eo nv‡Zi n‡e, Z‡e cÖ_g A¶iwU evwK¸‡jvi †P‡q AvKv‡i

GKUy eo n‡e Avi| AviI fvjfv‡e †evSvi Rb¨ wb‡Pi Abykxjbx †`Lyb|

<!DOCTYPE HTML>

<html>

<head>


span {font-variant:small-caps}

</style>

</head>

<body>

<p>Sheikh Mujibur Rahman was a great politician and a patriot as well.

He was also called <span> Bongobondhu </span>- The friend of Bengol.

</p>

</body>

</html>

variant.html


69

8.6 t Font weight Gi eënvi

HTML G Avgiv †hfv‡e <b> U¨vM eënvi K‡i †jLv‡K †evì KiZvg, CSS G GB cÖcvwU© w`‡q Avgiv wVK H

GK-B KvR Ki‡ev| Z‡e GLv‡b Avgiv bold, bolder, 100, 200, 300 Gfv‡e 900 ch©š— eënvi Ki‡Z cvie|

<!DOCTYPE HTML>

<html>

<head>


span {font-weight:bolder;}

</style>

</head>

<body>

<p> It was the last eve of 1971. The day was 16 December.

On that day, East Pakistan became <span> Bangladesh </span>.

</p>

</body>

</html>


<!DOCTYPE HTML>

<html>

<head>


span {font-weight:bold;}

</style>

</head>

<body>



70


</p>

</body>

</html>


<!DOCTYPE HTML>

<html>

<head>


span {font-weight:small;}

</style>

</head>

<body>



</p>

</body>

</html>

weight.html

8.7 t @font-face

GZw`b †W‡fjcvi‡ì ÒI‡q‡ei †¶‡Î wbivc`Ó d›U eënvi Ki‡Z nZ| wKš‧ GLbKvi wPÎ wfbœ| GLb Avcwb

÷vBj wkU Gi mv‡_ d›UI wj¼ K‡i w`‡Z cv‡ib| Ges cieZ©x‡Z wewfbœ Div ev †cR G eënvi Ki‡Z cv‡ib|

Avi GB myweavwU eënvi Kivi Rb¨ Avcbv‡K @font-face wbqgwU eënvi Ki‡Z n‡e| Avi GwU eënvi Kivi

Rb¨ Avcbv‡K me©cÖ_‡g-

@font-face Gi g‡a¨ GKwU font-family •Zwi Ki‡Z n‡e| †hgb-

@font-face{

font-family: headerFont;


71

Avcbvi mvf©v‡ii †h‡Kv‡bv †dvìvi/wW‡i±wi‡Z †hme d›U cÖ‡qvRb †m¸‡jv ivL‡Z n‡e Ges url G Uv wj¼ K‡i

w`‡Z n‡e| †hgb-

src: url ('LATINWD.TTF')

hw` Avcbvi d›U dvBjwU Ab¨ †Kvb †Wv‡gBb G _v‡K, Z‡e wj¼wU n‡e GiKg t

src: url('http://www.bookbd.info/css3/latinwd.ttf')

e¨vm Gevi Avcbvi cQ›` g‡Zv Avcwb d›U eënvi Ki‡Z cvi‡eb| Z‡e wfbœ wfbœ †¶‡Î Avcbv‡K Avjv`v Avjv`v

font-family wW‡K¬qvi Kiv jvM‡e|

Z‡e GLv‡b †Lqvj ivL‡Z n‡e †h B›Uvi‡bU G·‡c vivi (ms‡¶‡c IE) Gi †¶‡Î d›U Gi UvBc n‡Z n‡e.eot

GwU Qvov Avcbvi †U·U bigvj Times New Roman-GB †`Lv‡e| Avi Chrome ev Ab¨ †Kvb eªvDRvi wb‡q

wPš—v Ki‡Z n‡e bv| Kvib Giv mvavib .TTF (True Type Font) mg_©b K‡i| Zvici Avevi Av‡iKwU K_v

i‡q hvq; Zv nj .eot ev Ab¨vb¨ G·‡UÝvb Gi d›U cve †Kv_vq ? wKš‧ Gi RbÏ Lye mnR mgvavb n‡Q

B›Uvi‡bU| AwWI-wfwWI KbfvU© Kivi Rb¨ †hgb wewfbœ Converter (icvš—iKvix mdUIq¨vi) cvIqv hvq,

wVK †Zgwb d›U icvš—‡ii RbÏ mdUIq¨vi cvIqv hvq| Avi ZvQvov Google Gi wewfbœ d›U mvwf©mI Av‡Q|

†mLvb †_‡KI wj¼ K‡i d›U eënvi Ki‡Z cv‡ib|

GLb Avgiv ‡`Le Av‡M •Zwi Kiv Avgv‡ì d›U d¨vwgwjwU wKfv‡e eënvi Ki‡ev|

<!DOCTYPE html>

<html>

<head>


@font-face

{

font-family: headers;

src: url('FRAHVIT.ttf'),

url ('forte.eot'); /* IE9 */

}

div

{

font-family:headers;

}

</style>

</head>

<body>


72

<p>Note that, Internet Explorer 9 only supports .eot fonts. If you don't have .eot fonts,

you can convert them from any type. You can find various kinds of font converters on the

web.</p>

<div>

We are working now on CSS3. So we dont have to think about "web safe fonts".

</div>

</body>

</html>

face.html

Everything under one property:

Avgiv PvB‡j Avjv`v Avjv`v property I value bv wj‡L GKwU cÖcvwU© Gi g‡a¨B me wKQy e‡j w`‡Z cvwi| wb‡P

GKwU D`vniY w`‡q †`Lv‡bv nj| AvBwU wi‡j‡UW wewfbœ B-eyKmg~n webv g~‡j¨ WvDb‡jvW Ki‡Z wfwRU Kib


GLv‡b,

1. Font

2. Font-weight

3. Font-style

4. Font-varient


73

wmGmGm (3)

72

Aa¨vq : 09 Text Align


1. mdjfv‡e GKwU iPbv †jLv

2. text alignment

wmGmGm (3)

73

9.1 t Text-Alignment

GB bvgwU †`‡LB Avcwb eyS‡Z cvi‡Qb †h GwU eënvi K‡i Avgiv †jLv‡K wewfbœ Ae¯v‡b cÖ k©b Kivi Rb¨

eënvi Ki‡ev| GB Property Gi wfZ‡i PviwU value †Ìqv hvq|

G¸‡jv nj-

• text-align:center Gi gva¨‡g Avcwb †jLv‡K gvSeivei cÖ`k©b Kiv‡Z cvi‡eb|

<!DOCTYPE HTML>

<html>

<head>


div {text-align:center;}

</style>

</head>

<body>

<div>

<h1> Our village </h1>

</div>

<p>

The name of our village is Dimukha. It is in Manikganj district. We have a pr mary

school, A kindergarten, a bus stand and a market.

Daily commodities are available here. But if anyone is sick or needs medical

attention, it's not available there.

</p>

</body>

</html>

wmGmGm (3)

74

wmwW†Z text align-center.html • text-align:left Gi gva¨‡g †jLv‡K evgcv‡k cÖ`k©b Ki‡Z cvi‡eb| (Avm‡j Default wn‡m‡e Avgv‡`i

†jLv Ggwb‡ZB evg †_‡K ïi nq| ZvB GwU e¨envi Kiv Avi bv Kiv mgvb K_v)| AvBwU wi‡j‡UW wewfbœ

B-eyKmg~n webv g~‡j¨ WvDb‡jvW Ki‡Z wfwRU Kib http://www.bookbd.info|

<!DOCTYPE HTML>

<html>

<head>


div {text-align:left;}

</style>

</head>

<body>

<div>


</div>

<p>

The name of our village is Dimukha. It is in Manikganj district. We have a

primary school, A kindergarten, a bus stand and a market.



</p>

</body>

</html>

wmGmGm (3)

75

• text-align:right Gi gva¨‡g †jLv‡K Wvbw`K eivei cÖ k©b Kiv hvq|

<!DOCTYPE HTML>

<html>

<head>


div {text-align:right;}

</style>

</head>

<body>

<div>


</div>

<p>

The name of our village is Dimukha. It is in Manikganj district. We have a

primary school, A kindergarten, a bus stand and a market.



</p>

</body>

</html>

wmwW‡Z text align-right.html

• text-align:justify GwU e¨envi Ki‡j Avcbvi †jLv¸‡jv •`N © eivei wKQyUv Qwo‡q wM‡q m¤ú~Y© RvqMv `Lj

Ki‡e; †hgbwU Avgiv cwÎKvi †ejvq †`‡L _vwK| cwÎKvq wKš‧ †Kvb Kjvg Gi g‡a¨ †jLv nIqvi ci cv‡k †Kvb

Lvwj RvqMv _v‡K bv| e wMs Gi Rb¨ me‡P‡q RbwcÖq wm.Gg.Gm IqvW©‡cÖm wb‡q KvR Kivi Rb¨ †jL‡Ki †jLv

ÔÔweMxwbs IqvW©‡cÖmÕÕ I ÔÔA¨vWfvÝW IqvW©‡cÖmÕÕ eB `ywU c‡o wb‡Z cv‡ib|

wmGmGm (3)

76

GB property wU †`L‡Z n‡j Kgc‡¶ yB ev Z‡ZvwaK div Gi cÖ‡qvRb n‡e| Ges ¯^fveZB ZLb id A_ev

class e¨envi Ki‡Z n‡e| id Ges class Gi Aa¨v‡q we¯—vwiZ Av‡jvPbv Ki‡ev|

AvBwU wi‡j‡UW wewfbœ B-eyK mg~n webv g~‡j¨ WvDb‡jvW Ki‡Z wfwRU Kib http://www.bookbd.info|

GLb Avgiv AvcvZZ AbykxjbxwU PP©v Kwi|

<DOCTYPE! Html>

<html>

<head>


.mango {

height: 250px;

width: 200px;

text-align: justify;

float: left;

border: thin grey solid;

margin:5px;

padding:5px;

}

</style>

</head>

<body>

<div class="mango">

Jackfruit is national fruit of Bangladesh. It has all the essential nutritions we need. When

it is ripen, it looks yellow in color.

It is found all over Bangladesh. Jackfruit is very tasty fruit.

</div>

<div class="mango">




</div>

<div class="mango">



wmGmGm (3)

77


</div>

<div class="mango">

Jackfruit is national fruit of Bangladesh. It has all the essential nutrition we need. When it

is ripen, it looks yellow in color.


</div>

</body>

</html>

Ex-2:

<DOCTYPE! Html>

<html>

<head>


.mango {

height: 160px;

width: 235px;

text-align: center;

float: left;

border: thin grey solid;

margin:6x;

padding:6x;

}

</style>

</head>

<body>

<div class="mango">




</div>

<div class="mango">

wmGmGm (3)

78




</div>

<div class="mango">




</div>

<div class="mango">

Jackfruit is national fruit of Bangladesh. It has all the essential nutrition we need. When it is ripen, it looks yellow in color.


</div>

</body>

</html>

CD †Z text align-justify.html

e wMs Gi Rb¨ me‡P‡q RbwcÖq wm.Gg.Gm IqvW©‡cÖm wb‡q KvR Kivi Rb¨ †jL‡Ki †jLv ÔÔweMxwbs IqvW©‡cÖmÕÕ I

ÔÔA¨vWfvÝW IqvW©‡cÖmÕÕ eB `ywU c‡o wb‡Z cv‡ib|

wmGmGm (3)

79

Aa¨vq-10 : Text Decorations


1. wKQz mvaviY HTML U¨vM|

2. mdjfv‡e GKwU iPbv (Article) †jLv|

wmGmGm (3)

80

10.1 t Text Decoration

Text decoration ej‡Z T.N.R m¾v‡K eySvq| A_©vr Avgiv hLb †Kvb †jLv‡K wj¼ wn‡m‡e eënvi Kwi,

ZLb Zvi wb‡P ¯^qswµqfv‡e GKwU `vM (Underline) P‡j Av‡m| wKš‧ Avgiv hLb CSS w`‡q Menu •Zwi

Kie, ZLb Avgiv †gby¨ Gi wb‡P wbðqB `vM †`Lv‡Z PvBe bv| ZLb †mB `vM `~i Kivi Rb¨ Avgv‡ì †U·U

†W‡Kv‡ikb eënvi Ki‡Z n‡e| GiKg AviI A‡bK Kv‡Ri Rb¨ Avgv‡ì †U·U †W‡Kv‡ikb eënvi Ki‡Z n‡e|

wb‡P ch©vqµ‡g G¸‡jv eY©bv Kiv nj| I‡qemvB‡U AwaK cwigv‡Y wfwRUi wb‡q Avmvi Rb¨ mvP© BwÄb

AcwUgvB‡Rkb m¤ú‡K© cwic~Y© aviYv _vK‡Z nq| Avi G‡¶‡Î †jL‡Ki †jLv ÔÔmvP© BwÄb AcwUgvB‡RkbÕÕ I

ÔÔA¨vWfvÝW mvP© BwÄb AcwUgvB‡RkbÕÕ eB `ywU Avcbv‡K mvnvh¨ Ki‡e|

• Underline: GwU †jLvi wb‡P `vM †`Lv‡bvi Rb¨ eënvi Kiv nq|

<DOCTYPE html>

<html>

<head>


span {text-decoration:underline;}

</style>

</head>

<body>

<p>

<span> Introduction: </span> The cow is an useful animal. It eats grass.

</p>

<p>

<span> Description: </span> It has two eyes, two legs, two ears and two horns.

</p>

</body>

</html>

wmGmGm (3)

81

• line through: Avgiv wewfbœ mgq wewfbœ cÖwZôv‡b vb cwieZ©‡bi Rb¨ weÁwß †`L‡Z cvB| †mLv‡b Zviv

Av‡Mi wVKvbv †K‡U w`‡q bZyb wVKvbv cÖ`k©b K‡i| †jLv KvUvi Rb¨ Avgiv †hgb gvS eivei GKwU `vM w`‡q

†K‡U †`B; wVK †Zgwb †jLvi gvSeivei `vM †`Lv‡bvi Rb¨ GwU eënvi Kiv nq| I‡qemvB‡U AwaK cwigv‡Y

wfwRUi wb‡q Avmvi Rb¨ mvP© BwÄb AcwUgvB‡Rkb m¤ú‡K© cwic~Y© aviYv _vK‡Z nq| Avi G‡¶‡Î †jL‡Ki †jLv

ÔÔmvP© BwÄb AcwUgvB‡RkbÕÕ I ÔÔA¨vWfvÝW mvP© BwÄb AcwUgvB‡RkbÕÕ eB `ywU Avcbv‡K mvnvh¨ Ki‡e|

<!DOCTYPE HTML>

<html>

<head>


span {text-decoration:line-through;}

</style>

</head>

<body>

<h1>Our phone no:</h1>

<span> 012-345-678-9 </span>

<p> 345-987-767-1 </p>

</body>

</html>

• None: mvavib Ae¯vq GwU eënvi Kiv Avi bv Kiv mgvb| Z‡e HTML G hLb Avgiv wj¼ eënvi Kwi,

ZLb Zvi wb‡P ¯qswµqfv‡e underline P‡j Av‡m| Avgiv hw` wj¼ Gi wb‡P `vM †`Lv‡Z bv PvB, ev †gby ‣Zwi

Kivi mgq underline AcmviY Ki‡Z PvB‡j CSS G text-decoration:none e‡j w`‡Z n‡e|

wmGmGm (3)

82

<!DOCTYPE HTML>

<html>

<head>


span a {text-decoration:none;}

</style>

</head>

<body>

<h1>Menu</h1>

<div>

<a href="#"> Menu one </a>|

<a href="#"> Menu two </a>|

<a href="#"> Menu three </a>|

</div>

<br/>

<span>

<a href="#"> Menu one </a>



</span>

</body>

</html>

• Overline: GwU underline Gi wecixZ| A_©vr underline G †jLvi wb‡P `vM †`Lvq, Avi overline G

†jLvi Dc‡i `vM †`Lvq| GwU †Zgb GKUv cÖ‡qvRb nqbv| Z‡e Avcwb PvB‡j Dc‡ii Abykxjbx‡Z text-

decoration:overline wj‡L †`L‡Z cv‡ib| e wMs Gi Rb¨ me‡P‡q RbwcÖq wm.Gg.Gm IqvW©‡cÖm wb‡q KvR

Kivi Rb¨ †jL‡Ki †jLv ÔÔweMxwbs IqvW©‡cÖmÕÕ I ÔÔA¨vWfvÝW IqvW©‡cÖmÕÕ eB `ywU c‡o wb‡Z cv‡ib|

AbykxjbxwU wb‡P †`Iqv nj

<!DOCTYPE HTML>

<html>

<head>


span {text-decoration:overline;}

</style>

wmGmGm (3)

83

</head>

<body>

<p>

<span> Introduction: </span> The cow is an useful animal. It eats grass.

</p>

<p>

<span> Description: </span> It has two eyes, two legs, two ears and two horns.

</p>

</body>

</html>

• Blink: Blink Gi evsjv cwifvlv n‡Q †PvL wcU wcU Kiv ev wSKwgK Kiv| Avcwb hw` CSS w`‡q

animation •Zwi Ki‡Z Pvb, Z‡e GwU Avcbvi Rb¨ †ek Kv‡R †`‡e| †Kvb text Gi decoration:blink

eënvi Ki‡j †jLvwU R¡j‡Z-wbf‡Z _vK‡e| GwU A‡bK mgq Header ev Banner •Zwi Kivi Rb¨ eënvi

Kivi Rb¨ eënvi Kiv nq| GwU eënvi Kivi Rb¨ Av‡Mi g‡Zv text-decoration:blink wjL‡jB n‡e| wKš‧

GZ my›ì cÖcvwU© Uv GKgvÎ cÖcvwU© Firefox-GB KvR Ki‡e| Chrome, Safari ev Internet Explorer

GUv‡K mg_©b K‡i bv|

cÖkœce© t


Book Support center-Gi B-†gBj G v‡Wªm n‡jv [email protected], hv Avcbv‡ì mKj mgm vi mgvavb



wmGmGm (3)

84

Aa¨vq-11: Text Overflow


. Clip Gi e¨envi

. Ellipsis Gi e¨envi

wmGmGm (3)

85

hw` div Gi wfZ‡i †jLv Lvc bv Lvq, Zvi Rb¨ GB property wU eënvi Kiv nq| GLv‡b Avgiv yBwU value

eënvi Ki‡Z cvie| G¸‡jv n‡Q-

11.1 t Clip

GwU eënvi Ki‡j div Gi AwZwi³ †jLv _vK‡j Zv hidden n‡q hv‡e| A_©vr eªvDRvi Zv cÖ`k©b Ki‡e bv|

<html>

<head>


div {

border: black thin solid;

}

.fox {

white-space:nowrap;

width:120px;

overflow:hidden;

text-overflow:clip;

}

</style>

<head>

<body>

<h1> This div is with the actual texts</h1>

<div>

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

Lorem ipsum dolor sit ametLorem ipsum dolor sit amet Lorem ipsum dolor sit amet


Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

</div>

<h1> This div is with the clipped texts</h1>

<div class="fox">



wmGmGm (3)

86


Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

</div>

</body>

</html>

11.2 t Ellipsis

GwU e¨envi Ki‡j div Gi g‡a¨ hZUyKy cÖ`k©b Kiv m¤¢e Ki‡e| Ges †k‡l wZbwU WU w`‡q eySv‡e †h AviI wKQy

†jLv GLv‡b Av‡Q, wKš‧ cÖ`k©b Kiv m¤¢e n‡Q bv| GLv‡b †KvW me GKB _vK‡e| ïay Av‡M †hLv‡b Avgiv text-

overflow:clip wj‡LwQjvg, †mLv‡b text-overflow:ellipsis wjL‡Z n‡e|

<html>

<head>


div {

border: black thin solid;

}

.fox {

white-space:nowrap;

overflow:hidden;

width:150px;

wmGmGm (3)

87

text-overflow:ellipsis;

}

</style>

</head>

<body>

<h1> This div is with the actual texts</h1>

<div>

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit

amet Lorem ipsum dolor sit ametLorem ipsum dolor sit amet Lorem ipsum dolor sit

amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit

amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

</div>

<h1> This div is with the ellipsified texts</h1>

<div class="fox">



Lorem ipsum dolor sit amet Lorem ipsum dolor sit... amet Lorem ipsum dolor sit

amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

</div>

</body>

</html>

wmGmGm (3)

88

wmGmGm (3)

89

Aa¨vq -12: Color


1) color †cÖvcvwU© Gi KvR

2) color †cÖvcvwU †jLvi cÖKvi‡f`

3) wewfbœ cÖKvi color †cÖvcvwU© Gi •ewkó¨ I eënvi †K․kj

4) color Gi Hexadecimal Code mn ZvwjKv

5) Hexadecimal Kvjvi †KvW eënvi

6) RGB Kvjvi †KvW eënvi

7) ïaygvÎ bvg w`‡q Kvjvi cÖ`k©b

wmGmGm (3)

90

12.1 t color †cÖvcvwU© Gi KvR

GB property wU Avcbviv Gi Av‡MB D`vni‡b eënvi Ki‡Z †`‡L‡Qb| GwU Avgiv wewfbœ †jLvi g‡a¨ iO

cÖ v‡bi Rb¨ eënvi Ki‡ev| G‡Z Avgv‡ì †cR¸‡jv †`L‡Z AviI bv›`wbK n‡e| GLv‡b Avgiv iO Gi bvg

wewfbœ fv‡e w`‡Z cvwi| wb‡P G¸‡jv ch©vqµ‡g eY©bv Kiv nj| †cÖvMÖvwgs j¨vs¸‡qR wcGBPwc‡Z nv‡ZLwo †bqv

†_‡K ïi K‡i cÖ‡dkbvjx KvR Ki‡Z †jL‡Ki ÔÔwcGBPwc A¨vÛ gvB GmwKDGjÕÕ eBwU †`‡L wb‡Z cv‡ib|

• ïay bvg w`‡qt CSS Gi g‡a¨ Avgiv ïay bvg w`‡qI iO eënvi Ki‡Z cvwi| †hgb t red, green, blue,

white, violet BZ¨vw`| Z‡e G‡¶‡Î GKUv wel‡q LyeB mveavb _vK‡Z n‡e; ‡mUv n‡Q bv‡gi evbvb| iO Gi

bv‡gi evbvb hw` fyj K‡ib, Zvn‡j eªvDRvi †Kvb iO cÖ`k©b Ki‡e bv|

• RGB value: GwU g~jZt wZbwU †g․wjK iO Gi mgš‡q MwVZ ixwZ hv‡Z jvj, meyR Ges bxj i‡Oi wgwjZ

gv‡bi wfwË‡Z GKwU wbw ©ó iO cvIqv hvq| GwU †jLvi wbqg n‡Q color:rgb (255,0,255) GLv‡b Avcwb

mewb¤§ 0 (k~b¨) †_‡K ïi K‡i m‡e©vP 255 ch©š— gvb eënvi Ki‡Z cvi‡eb| Qwe m¤úv`bvi mdUIq¨v‡i GB

ixwZwU †ek RbwcÖq| Kvib G‡Z LyeB D¾¡j iO cvIqv hvq; d‡j †`L‡ZI AvKl©Yxq g‡b nq| AbjvBb †_‡K

KvR cvIqvi wewfbœ †K․kj m¤ú‡K© we¯—vwiZ Rvb‡Z †jL‡Ki †jLv ÔÔB›Uvi‡b‡U AvZ¥Kg©ms¯vbÕÕ I ÔÔB›Uvi‡b‡U

AvZ¥Kg©ms¯vb-1ÕÕ eB `yBwUi mnvqZv wb‡Z cv‡ib|

• Hexadecimal value: GwU †jLvi wbqg n‡Q, # RRGGBB †hLv‡b cÖ_g `ywU gvb n‡Q jvj i‡Oi,

gv‡Si gvb `ywU n‡Q meyR i‡Oi Ges †k‡li gvb ywU n‡Q bxj i‡Oi Gi cÖ_‡g GKwU # (hash) wPý _v‡K| GB

value wU †`L‡Z Ggb nqt Color: # FFFF00 GwU eënvi K‡i Avcwb

255 x 255 x 255= 16 wgwjq‡biI †ewk i‡Oi cÖ‡qvM Ki‡Z cvi‡eb| AviI fvjfv‡e †evSvi Rb¨ wb‡P I‡qe

Rb¨ wbivc` i‡Oi GKwU ZvwjKv †Ìqv nj|

wmGmGm (3)

91

wmGmGm (3)

92

Avcbv‡K G¸‡jv gyL¯ ivL‡Z n‡e bv| G¸‡jv ïay Avcbv‡K iO¸‡jv m¤ú‡K© avibv †`Iqvi Rb¨ †`Iqv n‡q‡Q|

wmGmGm (3)

93

Aa¨vq-13 :Text Shadow


1) Text-Shadow wK?

2) Text-Shadow wKfv‡e Ki‡Z nq|

3) Text-Shadow Qvqvi Ae¯vb wbY©q Kiv|

wmGmGm (3)

94

13.1 t Text-Shadow

GwU †jLvi wb‡P Qvqv cÖ`v‡bi Rb¨ eënvi Kiv nq| GwU †jLvi wbqg n‡Q-

• cÖ_‡g Gi Avbyf~wgK Ae vb (Horizontal space) ej‡Z nq| Gi gvb wc‡·‡j w`‡Z nq|

• Zvici Gi Dj ¤ Ae¯vb (Vertical space) ej‡Z nq| Gi gvb wc‡·‡j w`‡Z nq|

• Gici iO ej‡Z nq| Avi Ab¨vb¨ CSS i‡Oi g‡Zv bvg (red, blue, orange) ev Gi †n·v‡Wwmgvj f¨wjD

(#fff,#099fd5) †Ìqv hvq| Gi gvb wc‡·j G w`‡Z nq| e wMs Gi Rb¨ me‡P‡q RbwcÖq wm.Gg.Gm

IqvW©‡cÖm wb‡q KvR Kivi Rb¨ †jL‡Ki †jLv ÔÔweMxwbs IqvW©‡cÖmÕÕ I ÔÔA¨vWfvÝW IqvW©†cÖmÕÕ eB `ywU c‡o wb‡Z

cv‡ib|

• PvB‡j AviI GKwU ÷vBj eënvi Kiv hvq| GwU Ackbvj| Avcwb PvB‡j eënvi Ki‡eb, cÖ‡qvRb bv _vK‡j

eënvi bv Ki‡jI Pj‡e| GwU n‡Q blur ev A¯úó Kivi gvb| GwU wc‡·j G w`‡Z nq| Avi GwU wjL‡Z n‡e

Avbyf~wgK I Dj ¤ Ae¯v‡bi gvb †jLvi ci Ges iO Gi bvg ejvi Av‡M| †hgb t

h1 {text-shadow: 2px 2px 3px orange;}

GLv‡b A¯úóZvi gvb (blur) eënvi Ki‡Z bv PvB‡j 3px ev` w`‡Z n‡e| ZLb GwU Gfv‡e wjL‡Z n‡et

h1 {text-shadow: 2px 2px orange;}

AviI fvjfv‡e †evSvi Rb¨ wb‡Pi AbykxjbxwU PP©v Kib|

<!DOCTYPE html>

<html>

<head>

<style>

h1

{

font-family:Arial;

text-shadow: 2px 2px 2px Grey;

font-size:4em;

}

</style>

</head>

<body>


</body>

</html>

wmGmGm (3)

95

Abykxjbx t

<!DOCTYPE html>

<html>

<head>

<style>

h1

{

font-family:Arial;

text-shadow: 5px 8px 10px red;

font-size:4em;

}

</style>

</head>

<body>


</body>

</html>

wmGmGm (3)

96

Aa¨vq -14 : Text transform


1) Text-Transform wK?

2) Text-Transform Gi cÖKvi‡f` I e¨envi †K․kj

3) Text-Transform lower case

4) Text-Transform capitalize

5) Text-Transform uppercase

wmGmGm (3)

97

14.1 t Text-Transform

GwU e¨envi Kiv nq †jLv‡K CSS Gi gva¨‡g †QvU nv‡Zi (lowercase) ev eo nv‡Zi (uppercase) Kivi

Rb¨| GB property Gi Aax‡b wZbwU value Avcbvi Kv‡R jvM‡e| G¸‡jv nj-

• Uppercase: Gi gva¨‡g Avcwb HTML G †QvU nv‡Zi/eo nv‡Zi †h‡Kv‡bv ai‡bi A¶i-B wjLyb bv †Kb,

mKj †jLvB eo nv‡Zi A¶‡i cÖ`wk©Z n‡e|

<!DOCTYPE html>

<html>

<head>

<style>

p{

text-transform:uppercase;

}

</style>

</head>

<body>

<p>This is some text.</p>

</body>

</html>

wmGmGm (3)

98

• Lowercase: GwU n‡Q Uppercase Gi m¤ú~Y© wecixZ| A_©vr GLv‡b mKj †jLvB †QvU nv‡Zi A¶‡i

cÖ wk©Z n‡e|

<!DOCTYPE html>

<html>

<head>

<style>

p {

text-transform:lowercase;

}

</style>

</head>

<body>

<p>THERE ARE SOME TEXT</p>

</body>

</html>

wmGmGm (3)

99

• Capitalize: GB property wU e¨env‡ii d‡j ev‡K¨i cÖwZwU k‡ãi cÖ_g A¶i eo nv‡Zi †`Lv‡e|

I‡qemvB‡U AwaK cwigv‡Y wfwRUi wb‡q Avmvi Rb¨ mvP© BwÄb AcwUgvB‡Rkb m¤ú‡K© cwic~Y© aviYv _vK‡Z nq|

Avi G‡¶‡Î †jL‡Ki †jLv ÔÔmvP© BwÄb AcwUgvB‡RkbÕÕ I ÔÔA¨vWfvÝW mvP© BwÄb AcwUgvB‡RkbÕÕ eB ywU

Avcbv‡K mvnvh¨ Ki‡e|

<!DOCTYPE html>

<html>

<head>

<style>

p{

text-transform:capitalize;

}

</style>

</head>

<body>

<p>This text is capitalized</p>

</body>

</html>

wmGmGm (3)

100

weMxwbs Rygjv

A¨vWfvÝW Rygjv

cÖ‡dkbvj Rygjv








B-Kgvm©





d‡i· †UªwWs

B-gv‡K©wUs

GBP wU Gg Gj-5






wm †cÖvMÖvwgs

Rvfv †cÖvMÖvwgs

Rvfvw¯…Þ


A¨vWfvÝW d‡Uvkc






wmGmGm (3)

101

Aa¨vq-15 : e¨KMÖvDÛ


1) e¨KMÖvDÛ wK?

2) e¨KMÖvDÛ G wK wK eënvi Kiv hv‡e|

3) e¨KMÖvD‡Û is eënvi Kivi †K․kj|

4) c¨vivMÖv‡di e¨KMÖvD‡Û is Gi eënvi|

5) wk‡ivbv‡gi e¨KMÖvD‡Û is Gi eënvi|

6) m¤ú~b© c„óvi e¨KMÖvD‡Û is Gi eënvi|

7) cÖ‡Z¨KwU wfbœ wfbœ wWf Gi Rb¨ e¨KMÖvD‡Û is Gi eënvi|

wmGmGm (3)

102

15.1 t Background

e¨vKMÖvDÛ n‡Q †Kvb †cR Gi Lvwj vb, hv Avgiv GLb ch©š— Lvwj †i‡LwQ Ges Gi is wQj bv (Default

wn‡m‡e mv`v wQj)| GB e¨vKMÖvDÛ A‡bK wKQyi n‡Z cv‡i| GwU m¤ú~Y© c…ôvi, div, †Uwej Gi BZ¨vw` wewfbœ

Gwj‡g›U Gi n‡Z cv‡i| wKš‧ Avgiv GwU‡K GLb †_‡K Avi Lvwj ivLe bv| Kvib Dc‡ii D`vniY¸‡jv j¶¨

Ki‡j eyS‡Z cvi‡eb †h †m¸‡jvi meB wQj mv`vKv‡jv| ZvB G¸‡jv‡K AviI …wó b›`b Ki‡Z Avgiv e¨vKMÖvDÛ

eënvi Ki‡ev|

e¨vKMÖvDÛ‡K ÷vBwjs Gi Rb¨ Avgiv wewfbœ is, Qwe BZ¨vw` eënvi Ki‡Z cvwi| is eënvi Ki‡j †Kvb mgm¨v

†bB| Z‡e e¨vKMÖvDÛ wn‡m‡e hw` Avgiv Qwe eënvi Ki‡Z PvB, †m wel‡q GKUy mveavbZv Aej¤^b Ki‡Z n‡e|

e¨vKMÖvDÛ m¤úwK©Z mewKQy wfZ‡i we¯—vwiZ Av‡jvPbv Kiv n‡q‡Q|

15.2 t Background color

GwU Avgiv †hB U¨vM ev Gwj‡g›U Gi Rb¨ wba©viY K‡i wè, wVK †mLv‡bB KvR Ki‡e| GwU h1, p, div, table,

span mn †h‡Kv‡bv U¨vM Gi wfZ‡iB †jLv hvq| wb‡P Avgiv GKwU D`vniY †`wL|

<!DOCTYPE html>

<html>

<head>

<style>

h1

{

background-color:#00ff00;

}

p

{

background-color:rgb(255,0,255);

}

</style>

</head>

<body>

<h1>Tanvir Ahmed</h1>

<p>Portfolio Website:www.metanvir.weebly.com</p>

</body>

</html>

wmGmGm (3)

103

GLv‡b j¶¨ Kib, Avgiv heading Gi Rb¨ Avjv`v is Ges paragraph Gi Rb¨ Avjv`v is eënvi K‡iwQ|

wKš‧ GLv‡b CSS property wKš‧ GKUvB eënvi K‡iwQ| hw` Avgiv heading ev paragraph Gi Rb¨ Avjv`v

Avjv`v background color eënvi Ki‡Z PvB, Zvn‡j Avgv‡ì Avjv`v Avjv`v K‡i e‡j w`‡Z n‡e| wKš‧

Avgiv hw` Avjv`v Avjv`v iO eënvi bv K‡i m¤ú~Y© c…ôvi Rb¨ GKUvB is eënvi Ki‡Z PvB, Zvn‡j GB

background color property wU eënvi Ki‡Z n‡e body U¨vM Gi g‡a¨| GwU wKš‧ `yB fv‡e Kiv hvq|

HTML I CSS †_‡K| Z‡e †ewkifvM †¶‡Î CSS †_‡KB Kiv nq| Gevi Avgiv †`Le wKfv‡e CSS †_‡K

wKfv‡e background color eënvi Ki‡ev| e wMs Gi Rb¨ me‡P‡q RbwcÖq wm.Gg.Gm IqvW©‡cÖm wb‡q KvR

Kivi Rb¨ †jL‡Ki †jLv ÔÔweMxwbs IqvW©‡cÖmÕÕ I ÔÔA¨vWfvÝW IqvW©‡cÖmÕÕ eB `ywU c‡o wb‡Z cv‡ib|

<!DOCTYPE html>

<html>

<head>

<style>

body

{

background-color:yellow;

}

h1

{

background-color:#00ff00;

}

p

{

background-color:rgb(255,0,255);

wmGmGm (3)

104

}

</style>

</head>

<body>



</body>

</html>

GLv‡b Avcbv‡`i †evSvi myweavi Rb¨ †Kvb wKQy cwieZ©b Kiv nqwb| ïaygvÎ body Gi Rb¨ GK jvBb ÷vBj

hy³ Kiv n‡q‡Q| Avcbviv PvB‡j GwU bZyb K‡i wb‡R‡`i BQvg‡Zv wjL‡Z cv‡ib| Avevi PvB‡j Av‡Mi

Abykxjbx‡Z GLv‡bi AwZwi³ GKwU jvBb hy³ Ki‡Z cv‡ib|

Gevi AviI fvj fv‡e †evSvi Rb¨ Avgiv AviI GKwU Abykxjbx PP©v Ki‡ev|

<!DOCTYPE html>

<html>

<head>

<style>

body

{background-color:tan;

Color:blue;}

</style>

</head>

<body>

wmGmGm (3)

105

<center>



</center>

</body>

</html>

cÖkœce© t


Book Support center-Gi B-†gBj A¨v‡Wªm n‡jv [email protected], hv Avcbv‡`i mKj mgm vi mgvavb



wmGmGm (3)

106

wmGmGm (3)

107

Aa¨vq-16: Background Image


. e¨KMÖvD‡Û Qwe e¨envi

. e¨KMÖvD‡Û Qwe e¨envi Kivi †K․kj

wmGmGm (3)

108

16.1 t e¨KMÖvD‡Û Qwe eënvi

Avgv‡ì mvaviY c ©vi AvKvi (Normal Screen size) n‡Q 14 †_‡K 21 BwÂ| Avi †mB wn‡m‡e Avgv‡ì H

AvqZ‡bi GKwU Qwei cwigvb n‡e cÖvq 500 wK‡jvevBU n‡Z 10 †gMvevBU ev Zvi †P‡qI †ewk| wKš‧ †h‡nZy

Avgiv evsjv‡`‡k KvR Ki‡ev (A‡bK mgq evB‡ii K¬v‡q›UivI mvBU `ªZ †jvW nIqvi Rb¨ †QvU mvBR cQ›`

K‡i/ AcwUgvBRW Pvq) ZvB Avgv‡ì GiKg eo dvBj e¨venv‡ii Av‡M 2 evi wPš—v Ki‡Z n‡e| KviY Avgv‡ì

†`‡k B›Uvi‡bU Gi MwZ LyeB axi| ZvB G ai‡bi dvBj m¤^wjZ mvBU †jvW n‡Z Kgc‡¶ 30 †m‡KÛ jvM‡e|

Avi †Kvb eënviKvix G ai‡bi mvBU KL‡bvB ågb (Browse) Ki‡e bv| †cÖvMÖvwgs j¨vs¸‡qR wcGBPwc‡Z

nv‡ZLwo †bqv †_‡K ïi K‡i cÖ‡dkbvjx KvR Ki‡Z †jL‡Ki ÔÔwcGBPwc A¨vÛ gvB GmwKDGjÕÕ eBwU †`‡L

wb‡Z cv‡ib|

Avi GRb¨B CSS G i‡q‡Q hyMvš—Kvix mgvavb| wb‡Pi Qwe¸‡jv j¶¨ Kwi|

Image size 328 kb Image

size-

3kb

wmGmGm (3)

109

cÖ_g QwewU j¶¨ K‡i †`Lyb, GB QwewU mvB‡R h‡_ó eo| wKš‧ Zvi Zyjbvq cv‡ki QwewU G‡Kev‡i Aí mvB‡Ri|

GLb Avcbvi g‡b n‡Z cv‡i, GB mi Qwe w`‡q wK n‡e ?

Avm‡j Avgiv †Póv Ki‡ev m¤ú~Y© e¨vKMÖvD‡Û Av¯— GKwU Qwe eënvi bv K‡i, Gi †h‡Kv‡bv GKav‡ii †QvÆ GKwU

Ask eënvi Kivi| G‡Z K‡i †hgb Avgv‡ì Hosting G RvqMv Kg jvM‡e, †Zgwb †cR Gi mvBR I K‡g

Avm‡e| d‡j `ªZ †jvW n‡e|

Dc‡ii eo QwewU‡K Avgiv mn‡RB gvB‡µvmdU †cB›U †cÖvMÖv‡gi mvnv‡h¨ j¤vjw¤^ fv‡e †K‡U wb‡Z cvwi| Avevi

†¶Î we‡k‡l Avgiv AvovAvwo ev j¤^vjw¤^ †K‡U wb‡Z cvwi| Zvici H mi QwewU‡K f ~wgi mgvš—iv‡j

(Horizontaly) ev Dj ¤^fv‡e (Verticaly) cybive„wË NUv‡Z (repeat) cvwi| Z‡e Gi Rb¨ Avevi Av‡iKwU

cÖcvwU© eënvi Ki‡Z n‡e; background-repeat:{repeat-x; A_ev repeat:y}

GwU †jLvi wbqg n‡”Q t

background-image:url (Ôgreen.jpgÕ);

GLv‡b url Gi wfZ‡i QwewU †h bv‡g Av‡Q Ges Zvi mwVK G·‡Ubkb (†hgb t .jpg .png .gif) wjL‡Z n‡e|

Z‡e G‡¶‡Î †Lqvj ivL‡Z n‡e †h, HTML dvBjwU †h †dvìvi G _vK‡e, †mB GKB †dvìv‡i hw` QwewU _v‡K,

Z‡e ïay bvg wjL‡jB n‡e| bq‡Zv QwewUi m¤ú~b© cv_ wjL‡Z n‡e| †hgb t

background-image:url (Ôimages/backgrounds/green.jpgÕ)

wmGmGm (3)

110

Aa¨vq-17: Background Position


1) e¨KMÖvD‡Ûi Ae¯vb wba©vib|

2) background position: center center

3) background position: center top

4) background position: center bottom

5) background position: right bottom

6) background position: right top

7) background position: right center

8) background position: left center

9) background position: left top

10) background position: left bottom

11) % / inch / pixel / em / e¨envi K‡i e¨KMÖvD‡Ûi Ae¯vb wbY©q|

wmGmGm (3)

111

17.1 t e¨KMªvD‡Ûi Ae¯’vb wba©vib

GwU eënvi Kiv nq e¨vKMÖvD‡Û †Kvb Qwe‡K hw` Avgiv GKeviB †`Lv‡Z PvB Ges GwU‡K †cR Gi wbw ©ó †Kvb

¯v‡b †`Lv‡Z PvB| Z‡e †m‡¶‡Î AviI GKwU property eënvi Ki‡Z n‡e Ges †mwU n‡Q

background-attachement:fixed

GwU eënvi bv Ki‡j Opera Ges Firefox G KvR Ki‡e bv| Avi B›Uvi‡bU G·‡c vivi G KvR Kiv‡Z PvB‡j

Zvi Rb¨ ! DOCTYPE e‡j w`‡Z n‡e G‡Kev‡i WKz‡g›U Gi Dc‡i|

GLv‡b Avgiv vbwU‡K (Position) wewfbœfv‡e wba©viY Ki‡Z cvwi| †m¸‡jv ch©vqµ‡g wb‡P eY©bv Kiv nj|

I‡qemvBU wWRvBb Kivi Rb¨ Avcbvi me©cÖ_g cÖ‡qvRb n‡e GBPwUGgGj †kLvi| Avi GBPwUGgGj j¨vs¸‡qR

m¤ú‡K© cwic~Y© Ávb AR©b Kivi Rb¨ †jL‡Ki ÔÔGBPwUGgGj-5ÕÕ eBwU c‡o wb‡Z cv‡ib|

• ïay bvg eënvi K‡it background-position: †jLvi ci, Avgiv GLv‡b wewfbœ ¯v‡bi bvg e‡j w`‡Z cvwi|

†hgbt

17.2 t background position: center center

G‡Kev‡i wVK gvSLv‡b †`Lv‡bvi Rb¨ {background-position:center center}

<html>

<head>


body {

background-image:url(Images/green.gif);

background-position:center center;

background-repeat:no-repeat;

}

</style>

</head>

<body>

We are using a centered image here

</body>

</html>

wmGmGm (3)

112

GLv‡b GKwU AwZwi³ U¨vM eënvi Kiv n‡q‡Q hv background-repeat:no-repeat; GwU ïaygvÎ Avgv‡ì

eënvi Kiv QwewU‡K ¯qswµqfv‡e cybive„wË nIqv †_‡K †iva Ki‡e|

17.3 t background position: center top

gvSLv‡b Dc‡i †`Lv‡bvi Rb¨ {background-position:center top}

<html>

<head>


body {


background-position:center top;


}

</style>

</head>

<body>

We are using a image here

</body>

</html>

wmGmGm (3)

113

17.4 t background position: center bottom

gvSLv‡b Wv‡b †`Lv‡bvi Rb¨ {background-position:right center}

<html>

<head>


body {


background-position:right center;


}

</style>

</head>

<body>


</body>

</html>

wmGmGm (3)

114

17.5 t background position: right bottom

gvSLv‡b wb‡P †`Lv‡bvi Rb¨ {background-position:center bottom}

<html>

<head>


body {


background-position:center bottom;


}

</style>

</head>

<body>


</body>

</html>

wmGmGm (3)

115

17.6 t background position: right top

Dc‡i Wv‡b †`Lv‡bvi Rb¨ {background-position:right top}

<html>

<head>


body {


background-position:right top;


}

</style>

</head>

<body>


</body>

</html>

wmGmGm (3)

116

17.7 t background position: right center

Wv‡b wb‡P †`Lv‡bvi Rb¨ {background-position:right bottom}

<html>

<head>


body {


background-position:right bottom;


}

</style>

</head>

<body>


</body>

</html>

wmGmGm (3)

117

17.8 t background position: left center

evgcv‡k gvSLv‡b †`Lv‡bvi Rb¨ {background-position:left center}

<html>

<head>


body {


background-position:left center;


}

</style>

</head>

<body>


</body>

</html>

wmGmGm (3)

118

17.9 t background position: left top

evgcv‡k Dc‡i †`Lv‡bvi Rb¨ {background-position:left top} (GwU Avm‡j default ¯vb| ZvB e¨envi

Kiv bv Kiv mgvb K_v|)

<html>

<head>


body {


background-position:left top;


}

</style>

</head>

<body>


</body>

</html>

wmGmGm (3)

119

17.10 t background position: left bottom

evgcv‡k wb‡P †`Lv‡bvi Rb¨ {background-position:left bottom}

<html>

<head>


body {


background-position:left bottom;


}

</style>

</head>

<body>


</body>

</html>

wmGmGm (3)

120

17.11 t % / inch / pixel / em / eënvi K‡i e¨vKMÖvD‡Ûi Ae¯’vb wbY©q|

% eënvi K‡i t GB % eënvi Ki‡Z n‡j Avcbv‡K x Ges y A¶ eyS‡Z n‡e| Avi GB x Ges y A¶

m¤ú‡K© ¯úó avibv _vK‡j Avcwb mvg‡b positioning Ges margin mn‡RB eyS‡Z cvi‡eb|

y

-x x

-y

x w`‡q eySvb nq horizontal axis ev Avbyf~wgK A¶| GwU fywg †hB mgvš—iv‡j Av‡Q, †mB eivei KvR K‡i|

Avi y w`‡q †evSv‡bv nq, vertical axis ev Dj ¤^ A¶| GwU Lvovfv‡e gvc †Ìqvi Rb¨ eënvi Kiv nq|

AZGe Avcwb Gevi wbðqB x Ges y A¶ m¤ú‡K© avibv †c‡q‡Qb| GB x Ges y A¶ eënvi K‡i Avgiv

†h‡Kv‡bv Qwe Ges div †K Avgv‡ì B‡Q g‡Zv RvqMvq wb‡Z cvie|

†Zv †hLv‡b wQjvg, % eënvi K‡i Qwe‡K wbw ©ó ¯v‡b emvb| GwU †jLvi dig¨vU n‡Q

background-position:50% 50%;

wmGmGm (3)

121

GLv‡b cÖ_‡g wjL‡Z n‡e x A‡¶i gvb| Zvici y A‡¶i gvb|

<html>

<head>


body {


background-image:url(Images/css3.jpg);


}

</style>

</head>

<body>

We are using numerick values here

</body>

</html>

wUcmt % eënvi Kivi me‡P‡q eo myweav n‡Q, Avcwb Avcbvi I‡qe †cR 14 BwÂ gwbUi G Pvjy Kib, Avi

56 BwÂ gwbUi G Pvjy Kib bv †Kb, Avcbvi Qwe Gi cwRkb GK`g wVKVvK †`Lv‡e| wKš‧ wc‡·j eënvi

Ki‡j GB myweavwU cv‡eb bv|

aib, Avcwb wc‡·j ev Ab¨ †h‡Kv‡bv †¯‥j G GKwU gvc wjL‡jb 10, Z‡e H †cRwUi gvc GKwU 14 BwÂ

gwbU‡i nq‡Zv wVKVvKB †`Lv‡e| wKš‧ wPš—v Kib, †mB GKB †cR hw` GKwU U¨ve‡jU G I‡cb Kiv nq, Z‡e

eënviKvix scroll Ki‡Z Ki‡Z wei³ n‡q hv‡e| mnR I ¯^í mg‡q †cÖvMÖvg wjLvi Rb¨ †jL‡Ki ÔÔg¨v‡µvwgwWqv

wWªgI‡qfviÕÕ eBwU †`‡L wb‡Z cv‡ib|

Gevi hw` H GKB †cR hw` GKwU 56 BwÂ gwbUi G †KD Pvjy K‡i, Z‡e Zv GK †Kvbvq R‡g _vK‡e| Kvib 2

BwÂ †Zv meRvqMv‡ZB 2 BwÂ| Zv‡K †Zv Avi AbycvZ Abyhvqx cwieZ©‡bi AbygwZ †Ìqv nqwb| ZvB Avcbv‡K

mKj wWfvBm Gi K_v gv_vq †i‡LB KvR Ki‡Z n‡e|

wmGmGm (3)

122

• Ab¨vb¨t Qwe ev div †K mwVK Ae¯v‡b Avbvi Rb¨ GwU me‡P‡q RbwcÖq c×wZ| GB c×wZwU‡ZI Av‡Mi g‡Zv

cÖ_‡g X Ges c‡i Y A‡¶i Rb¨ Avgiv px (wc‡·j), em, mm (wgwjwgUvi), in (BwÂ), cm (†mw›UwgUvi)

BZ¨vw` unit e¨envi Ki‡Z cvie|

<html>

<head>


body {

background-position:100px 20px;



}

</style>

</head>

<body>


</body>

</html>

<html>

<head>


body {




}

</style>

</head>

<body>


</body>

</html>

wmGmGm (3)

123

Aa¨vq-18: Background Repeat


1) e¨vKMÖvDÛ wiwcU wK?

2) e¨vKMÖvDÛ wiwcU †Kb e¨envi Kiv nq|

3) e¨vKMªvDÛ wiwc‡Ui e¨envi †K․kj|

4) background repeat: x

5) background repeat: y

6) background repeat: repeat

7) background repeat: no-repeat

wmGmGm (3)

124

18.1 t e¨vKMÖvDÛ wiwcU wK?

GwU m¤ú‡K© Av‡M wKQyUv Av‡jvPbv K‡iwQjvg| GB property wU eënvi bv Ki‡j eªvDRvi ¯qswµqfv‡e m¤ú~Y©

c`©v Ry‡o QwewUi cybive…wË (repeat) K‡i _v‡K| Gfv‡e Avgiv Avgv‡ì Pvwn`v g‡Zv Kv‡Ri myweav‡_© GB

property wU eënvi Ki‡ev| GwU †jLvi wbqg n‡Q t

{background-repeat:repeat}

18.2 t background repeat: x

repeat-x : GwU QwewU‡K Avbyf~wgKfv‡e cybive„wË Ki‡e|

<html>

<head>


div {

border: 1px black solid;

height: 300px;

width: 600px;

background-image:url(Images/picture.jpg);

background-repeat:repeat-x;

}

</style>

</head>

<body>

<h3>

This is the actual image

</h3>

<img src="Images/picture.jpg"/>

<br/>

<div>

<br/> <br/>

This is how it looks when we repeat

</div>

</body>

</html>

wmGmGm (3)

125

<html>

<head>


div {

border: 3px green dotted;

height: 250px;

width: 500px;


background-repeat:repeat;

}

</style>

</head>

<body>

<h3>


</h3>


<br/>

<div>

<br/> <br/>


wmGmGm (3)

126

</div>

</body>

</html>

<html>

<head>


div {

border: 2px blue dashed;

height: 300px;

width: 600px;


background-repeat:repeat-y;

}

</style>

</head>

<body>

<h3>


</h3>


<br/>

<div>

<br/> <br/>


</div>

</body>

</html>

GLv‡b GKwU div e¨envi Kiv n‡q‡Q ïay Avcbv‡`i †evSvi myweavi Rb¨| Avcbviv PvB‡j div Gi cwie‡Z©

body wjL‡Z cv‡ib| G‡Z K‡i QwewU m¤ú~Y© c…ôv Ry‡o cÖ`wk©Z n‡e| me‡P‡q RbwcÖq gv‡K©U‡c m I‡W¯‥ G KvR

Kivi me †K․kj AvqË¡ Ki‡Z †jL‡Ki ÔÔI‡W¯‥ A¨vÛ AvDU‡mvwm©sÕÕ eBwU msMÖn K‡i wb‡Z cv‡ib|

wmGmGm (3)

127

18.3 t background repeat: y

repeat-y: GwU QwewU‡K Dj ¤fv‡e cybive„wË Ki‡e|

<html>

<head>


div {


height: 300px;

width: 600px;


background-repeat:repeat-y;

}

</style>

</head>

<body>

<h3>


</h3>


<br/>

<div>


</div>

</body>

</html>

wmGmGm (3)

128

18.4 t background repeat: repeat

repeat: GwU QwewU‡K m¤ú~Y© c`©v Ry‡o cybive„wË Ki‡e|

<html>

<head>


div {


height: 300px;

width: 600px;

background-image:url(Images/wood.jpg);

background-repeat:repeat;

}

</style>

</head>

<body>

<h3>


</h3>

<img src="Images/wood.jpg"/>

<p>This is how it looks when we repeat</p>

<div></div>

</body>

</html>

wmGmGm (3)

129

18.5 t background repeat:no-repeat

no-repeat : GwU QwewU‡K cybive„wË nIqv †_‡K †iva Ki‡e|

<html>

<head>


body {

background-image:url(Images/wood.jpg);


}

</style>

</head>

<body>

We are using an image here

</body>

</html>

wmGmGm (3)

130

weMxwbs Rygjv

A¨vWfvÝW Rygjv

cÖ‡dkbvj Rygjv








B-Kgvm©





d‡i· †UªwWs

B-gv‡K©wUs

GBP wU Gg Gj-5






wm †cÖvMÖvwgs

Rvfv †cÖvMÖvwgs

Rvfvw¯…Þ


A¨vWfvÝW d‡Uvkc






wmGmGm (3)

131

Aa¨vq-19: Background Size


1. e¨vKMÖvDÛ mvBR wK?

2. e¨vKMÖvDÛ mvBR e¨env‡ii †K․kj|

3. background size: cover / contain

4. Background size: % / px w`‡q|

wmGmGm (3)

132

wmGmGm (3)

133

wmGmGm (3)

134

eyKwewW m¤cvw`Z Ab¨vb¨ eB mgyn

weMxwbs Rygjv

A¨vWfvÝW Rygjv

cÖ‡dkbvj Rygjv








B-Kgvm©





d‡i· †UªwWs

B-gv‡K©wUs

GBP wU Gg Gj-5






wm †cÖvMÖvwgs

Rvfv †cÖvMÖvwgs

Rvfvw¯…Þ


A¨vWfvÝW d‡Uvkc




wmGmGm (3)

135



css bangla-e-book-tutorial css3

Technology