Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
wmGmGm (3)
m¤cv`bvq
eyKwewW
www.bookbd.info
1
wmGmGm (3) 8g Aa¨vq
Ò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| Ò
¯^Z¡ : †jLK
ISBN : 00
3
wmGmGm (3) 8g Aa¨vq
DrmM©
we‡kl K…ZÁZv
†mKv›`vi ev`kv
CEO, Bongo Communications
Founder, 9ledge.com
4
wmGmGm (3) 8g Aa¨vq
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
5
wmGmGm (3) 8g Aa¨vq
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|
6
wmGmGm (3) 8g Aa¨vq
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 †cu․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¨ `iKvi 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¨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›`i 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|
7
wmGmGm (3) 8g Aa¨vq
†jL‡Ki K_v
gnvb Avj- vn ZvÕAvjvi A‡kl ïKwiqv, evsjv‡`‡k gvZ…fvlvq ÒwmGmGm GÛ wWfÓ eBwU
cvVK‡`i nv‡Z Zz‡j †`evi Rb¨| †`‡ki AMwYZ cvVK‡`i 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± †`Iqv
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‡`i mK‡ji Kg©Rxeb mdj I my›`i †nvK| GB Kvgbvq
8
wmGmGm (3) 8g Aa¨vq
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-
infobook7@gmail.com.
9
wmGmGm (3) 8g Aa¨vq
mywPcÎ GK bR‡i
gwWDj-1
11
wmGmGm (3) 8g Aa¨vq
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
.
12
wmGmGm (3) 8g Aa¨vq
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
13
wmGmGm (3) 8g Aa¨vq
29.1 t Id e¨env‡ii wbqg .......................................................................................................198
29.2 t Class e¨env‡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¨envi 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¨env‡ii †K․kj.................................................................................226
33.3 t †nvfv‡ii mv‡_ Image Spirites e¨envi..........................................................................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
14
wmGmGm (3) 8g Aa¨vq
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
15
wmGmGm (3) 8g Aa¨vq
Aa¨vq 01
B›Uvi‡bU Ges I‡qe wWRvBb Gi cÖv_wgK avibv
16
wmGmGm (3) 8g Aa¨vq
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¨enviKvix Aci mshy³ e¨enviKvixi 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‡`i 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¨i 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¨i Rb¨ Z_¨ mieivn Ki‡Z, A‡b¨i †`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`i c…ôv, wPÎ, †iLvwPÎ, kã Pjgvb Qwe I g‡Wjmg~n wfwRUi‡`i 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¨enviKvixiv Ab¨ BDwbfv©wmwUi e¨enviKvix‡`i mv‡_ mshy³ n‡Z cv‡i| GB mgq GB †cÖv‡R‡±i gyj j¶¨ wQj
M‡elK‡`i 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¨envi ï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|
17
wmGmGm (3) 8g Aa¨vq
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¨enviKvixiv 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 †`i‡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”
18
wmGmGm (3) 8g Aa¨vq
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¨enviKvix 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‡`i 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¨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‡`i 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¨envi 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¨i wWRvBb Kwc-†có Ki‡eb bv| G‡Z Avcbvi mvBU ev wWRvB‡b wei
c cÖwZwµqv ci‡e| Zvi †P‡q eis
mv`vgvUv †bwf‡Mkb e¨envi Ki‡jB fvj †`Lv‡e| g‡b Kwi, GKwU mvB‡Ui †bwf‡Mk‡b 3wU U¨ve Av‡Q, cÖ‡Z¨KwU
mvB‡Ui ¸i
Z¡c~Y© wefvM avib Ki‡Q, †hLv‡b Avcbwb wK¬K Ki‡jB wefv‡Mi me †cvó ev wWRvBb †`L‡Z
19
wmGmGm (3) 8g Aa¨vq
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¨enve 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
¸i
Z¡c~Y©| D`vnib ¯^iƒc Mashable (http://mashable.com)| j¶¨ Ki
b Zv‡`i †jv‡Mv Ges
†bwf‡Mkb|
5. AvKl©bxq †nvg‡cR: Avgiv Rvwb Apple memgq Zvi †µZv ev wfwRUi‡`i g‡bv‡hvM AvKl©‡bi Rb¨ Zv‡`i
†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¨envi K‡i| Avevi A‡b‡KB AwZwi³ cwigv‡Y
MÖvwW‡q›U Kvjvi e¨envi K‡i| GB Kvjvi ¸‡jvi AwZwi³ e¨envi hw`I mvB‡Ui AvDUjyK‡K KjywlZ K‡i| Z‡e
hw` cwigvbgZ e¨envi 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¨envi| cÖwZwU wWRvBb Gi mv‡_ mv‡_ wgj
†i‡L AvBK‡bi e¨envi 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‡`i‡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 infobook7@gmail.com, hv Avcbv‡`i mKj
mgm¨vi mgvavb Ges GB eB m¤ú‡K© †h †Kvb cÖ‡kœi DËi †`Iqvi Rb¨ •Zwi Av‡Q memgq| ZvB Avcbv‡`i hw`
GB eB‡q †Kvb wKQz eyS‡Z mgm¨v nq ev †Kvb cÖkœ †_‡K _v‡K Zvn‡j †gBj Ki
b GB wVKvbvq
infobook7@gmail.com.
20
wmGmGm (3) 8g Aa¨vq
21
wmGmGm (3) 8g Aa¨vq
Aa¨vq 02
22
wmGmGm (3) 8g Aa¨vq
2.1 CSS wK ?
cÖ_gZ CSS †m․›`h© ev ÷vBwjs Kivi Kv‡R e¨envi Kiv nq| Gi m¤ú~Y© i
c n‡Q Cascading Style Sheet
A_©vr †hB dvBj Gi g‡a¨ Avgv‡`i 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›`i (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¨envi 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 Ki
b http://www.bookbd.info|
2.2 †Kb CSS e¨envi 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|
23
wmGmGm (3) 8g Aa¨vq
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¨envi Ki‡Z n‡e| Avcwb hZ †ewk A¨vWfvÝW †j‡f‡ji KvR Rvb‡eb Ges e¨envi Ki‡eb,
Avcbvi KvR ZZ my›`i 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¨envi 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›`ifv‡e n‡q hvq| ZvB †ewki fvM mvBU-B wb‡R‡`i‡K †cR¸‡jv‡Z CSS3 (UPGRADE)
e¨envi ïi
K‡i‡Q| ZvB GLbB m‡e©vrK…ó mgq Advanced CSS †kLvi|
Avgv‡`i 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|
24
wmGmGm (3) 8g Aa¨vq
Aa¨vq 03
1 DIV wK?
2 DIV e¨env‡ii myweav wK ?
3 DIV I CSS Gi m¤úK© wK ?
25
wmGmGm (3) 8g Aa¨vq
3.1 DIV wK ?
Div Gi m¤ú~Y© i
c 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 ai
b Avgiv †h‡Kv‡bv GKwU i
g‡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 i
g Gi mv‡_I Zyjbv Ki‡Z cv‡ib| Z‡e GLv‡b Avcbvi
†Kvb eva¨evaKZv †bB| GB i
g ¸‡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¨envi Kivi myweav
HTML markup Gi †¶‡Î Div n‡Q GKwU hyMvš—Kvix Dcv`vb| Gi d‡j Avgv‡`i 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¨envi 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 `yi
n 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‡`i 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 myweav 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‡`i Rxe‡bi wK m¤úK© ? Avcbviv Aek¨B ej‡eb cvwb Avgv‡`i Rxeb| wVK
†Zgwb DIV Gi Rxeb n‡Q CSS| GB CSS webv DIV n‡Q cÖvYnxb GjvKv| CSS Qvov DIV e¨envi 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 Ri
wi|
26
wmGmGm (3) 8g Aa¨vq
Aa¨vq 04
HTML
1 HTML wK
2 HTML 5 Gi evRvi Pvwn`v
3 HTML dig¨vU
4 HTML dvBj •Zwi Kiv
4.1 HTML wK ?
27
wmGmGm (3) 8g Aa¨vq
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¨envi
K‡iB Avgiv Avgv‡`i 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‡`i Rb¨ †ewk myweavRbK| AvBwU wi‡j‡UW wewfbœ B-eyK
mg~n webv g~‡j¨ WvDb‡jvW Ki‡Z wfwRU Ki
b 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 ¸i
Z¡ 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‡`i †`‡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|
†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|
28
wmGmGm (3) 8g Aa¨vq
29
wmGmGm (3) 8g Aa¨vq
†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|
30
wmGmGm (3) 8g Aa¨vq
1| GwU n‡Q Avgv‡`i 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‡`i 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‡`i 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
31
wmGmGm (3) 8g Aa¨vq
Avgv‡`i 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‡`i †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‡`i 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)
32
wmGmGm (3) 8g Aa¨vq
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
33
wmGmGm (3) 8g Aa¨vq
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|
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|
34
wmGmGm (3) 8g Aa¨vq
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|
35
wmGmGm (3) 8g Aa¨vq
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
36
wmGmGm (3) 8g Aa¨vq
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
Ki
b 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|
37
wmGmGm (3) 8g Aa¨vq
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¨envi Kie Ges GB mdUIq¨viwU ‡Kvb ‡Kvb
G·‡Ubkb hy³ dvBj Gi GwWUi wn‡m‡e KvR Ki‡e||
Avgv‡`i myweavi Rb¨ Avgiv me¸‡jvI evQvB Ki‡Z cvwi, A_ev PvB‡j Avgv‡`i 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 Ki
b
http://www.bookbd.info|
GLvb †_‡K Select All G wK¬K K‡i ok wK¬K Kwi| Zvn‡jB Avgv‡`i G ch©š— installation cÖwµqv mgvß|
Gici Dreamweaver CS6 Pvjy n‡q hv‡e| Ges Welcome Screen cÖ`wk©Z n‡e|
38
wmGmGm (3) 8g Aa¨vq
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¶¨ Ki
b, 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
39
wmGmGm (3) 8g Aa¨vq
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|
40
wmGmGm (3) 8g Aa¨vq
Avgiv me‡P‡q †ewk †h eªvDRviwU e¨envi 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‡`i 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 •Zwi
Kiv hvq| GmKj wmGgGm Gi g‡a¨ me‡P‡q RbwcÖq nj Rygjv| Avi Rygjv e¨envi 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¨envi 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
41
wmGmGm (3) 8g Aa¨vq
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|
42
wmGmGm (3) 8g Aa¨vq
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|
43
wmGmGm (3) 8g Aa¨vq
WvDb‡jvW †k‡l wb‡Pi gZ GKwU DB‡Ûv Lyj‡e| GLvb †_‡K Next G wK¬K Ki‡Z n‡e|
44
wmGmGm (3) 8g Aa¨vq
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›Uvi‡b‡U AvZ¥Kg©ms¯
vb-2
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
45
wmGmGm (3) 8g Aa¨vq
Aa¨vq 05
46
wmGmGm (3) 8g Aa¨vq
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‡`i bvbv cÖKvi
Z_¨ w`‡q _v‡K| iPbv †jLvi Rb¨ Avgv‡`i †hme U¨vM e¨envi Ki‡Z n‡e Zv nj-
• h1-h6
GwU iPbvi wk‡ivbvg ev Heading wjL‡Z e¨envi 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¨envi 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¨envi 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¨envi 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>
47
wmGmGm (3) 8g Aa¨vq
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 -
†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œi
ct
<img src=" image/i1.jpg "width="960" height="640">
GLv‡b •`‡N©¨i Rb¨ height Ges cÖ‡¯
i Rb¨ width Gi gvb cwieZ©b K‡i w`‡jB Avgiv KvwLZ AvKvi cve|
GLv‡b Avgiv GB gvb¸‡jv `yBfv‡e wjL‡Z cvwi| †hgb- *GLv‡b px A_© n‡Q pixels Ges hLb
Avgiv % e¨envi Kie, ZLb QwewU Zvi RvqMv
Height="200px" S.MJ height="40%" Abymv‡i (†hgb-div, table) ¯
vb `Lj
Ki‡e|
5.3 t wfwWI, Mvb A_ev Ab¨ †h‡Kv‡bv dvBj e¨envi t
Qwe ev‡` Ab¨ †h‡Kv‡bv cÖKvi dvBj; †hgb- audio, video, Java applets, ActiveX, PDF, and Flash
BZ¨vw` e¨envi Kivi Rb¨ Avgv‡`i <object> ... </object> U¨vMwU e¨envi Ki‡Z n‡e| GLv‡b wfwWI,
A¨vwb‡gkb I swf Gi †¶‡Î Avgiv Av‡Mi g‡Zv height Ges width e¨envi 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>
49
wmGmGm (3) 8g Aa¨vq
<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‡`i‡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 infobook7@gmail.com, hv Avcbv‡`i mKj mgm¨vi mgvavb
Ges GB eB m¤ú‡K© †h †Kvb cÖ‡kœi DËi †`Iqvi Rb¨ •Zwi Av‡Q memgq| ZvB Avcbv‡`i hw` GB eB‡q †Kvb wKQ zeyS‡Z
mgm¨v nq ev †Kvb cÖkœ †_‡K _v‡K Zvn‡j †gBj Ki
b GB wVKvbvq infobook7@gmail.com.
50
wmGmGm (3) 8g Aa¨vq
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
51
wmGmGm (3) 8g Aa¨vq
Av‡Mi Aa¨vq ch©š— Avgiv hZUyKy wkLjvg, Zv‡Z †Zv Avgv‡`i I‡qemvBU •Zwi nj bv| Avgiv ïay c…ôv (Page)
•Zwi Kiv wkLjvg| GLb Avgiv wkLe wK K‡i Avgv‡`i KvR ¸‡jv‡K wKfv‡e AviI my›`i 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›`i; Gi A_© `vovq wK? Gi A_© n‡Q wZwb wbðqB Lye ÷vBwjk, ZvB
bv? n¨vu ZvB| AvgivI Avgv‡`i I‡qe †cR¸‡jv‡K AviI my›`i K‡i †Zvjvi Rb¨ ÷vBj e¨envi Kie|
6.1 t CSS wK ?
CSS Gi m¤úyY© i
c 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¨envi Kie| j¶¨ Ki
b GwU KL‡bv GKwU fv‡jv Kv‡Ri aib n‡Z cv‡i bv| jvB‡bi g‡a¨
wmGmGm †jLvi d‡j Avgv‡`i 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`I 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¨envi 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‡`i ÷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 †`e, Avi hZevi-B
Avgv‡`i ÷vBj e¨envi 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‡`i‡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|
52
wmGmGm (3) 8g Aa¨vq
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 †`Iqv n‡q‡Q| Avcwb GLv‡b Avcbvi myweavgZ Ab¨ †h‡Kv‡bv U¨vM;
†hgb- p, li, span BZ¨vw` e¨envi Ki‡Z cv‡ib|) Zvici Curly Braces (G‡K Avgiv mvavibZ Second
Bracket e‡j _vwK) Gi g‡a¨ Avgv‡`i ÷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¤§i
ct
<html>
<head>
<style type=”text/css”>
H1 {color:orange;}
</style>
</head>
<body>
<h1> Africa is Beautiful </h1/>
</body>
</html>
53
wmGmGm (3) 8g Aa¨vq
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‡`i ÷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¨envi 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‡`i 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 Ki
b http://www.bookbd.info|
54
wmGmGm (3) 8g Aa¨vq
cÖ_gwU n‡Q Avgv‡`i memgq e¨envi 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`e|
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`e| 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|
55
wmGmGm (3) 8g Aa¨vq
GLv‡b †Lqvj Ki
b, †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
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›Uvi‡b‡U AvZ¥Kg©ms¯
vb-2
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
56
wmGmGm (3) 8g Aa¨vq
I‡W¯‥ Ges AvDU‡mvwm©s
A¨vwdwj‡qU gv‡K©wUs
57
wmGmGm (3) 8g Aa¨vq
GLvb †_‡K ïi
n‡Q Avgv‡`i 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‡`i wewfbœ AvKv‡ii
d›U e¨venv‡ii cÖ‡qvRb co‡Z cv‡i| ZvB GwU Avgv‡`i 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‡`i 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‡`i Pvwn`v g‡Zv AvDUcyU cvIqvi Rb¨ Avgiv memgq CSS Gi
g‡a¨ font-size e‡j †`e| Z‡e GKwU welq Aek¨B †Lqvj ivLe †h, Avgiv d›U mvBR Avgv‡`i 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¨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 †`Iqv t
eZ©gvb I‡qe wWRvB‡bi evRvi NvuU‡j ev Ab¨vb¨‡`iI 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 †`Iqv hvq| Gi Rb¨ Avgv‡`i 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>
58
wmGmGm (3) 8g Aa¨vq
<html>
<head>
<style type="text/css">
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¨envi Kiv n‡q‡Q| Avcwb BQv Ki‡j
GLv‡b Avcbvi cQ›` g‡Zv Ab¨ †h‡Kv‡bv gvb e¨envi 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¨envi Ki‡Z n‡e| Responsive Design Gi †¶‡Î wbLyuZ gvc cvIqvi
Rb¨ Avcwb `kwg‡KI gvb wjL‡Z cv‡ib| †hgbt font-size:34.754308975%
59
wmGmGm (3) 8g Aa¨vq
7.3 t Pt w`‡q d›U mvBR †`Iqv t
Pt ej‡Z GLv‡b c‡q›U †evSv‡bv n‡q‡Q| Avcwb hw` Av‡M KL‡bv Microsoft Word e¨envi K‡i _v‡Kb, Z‡e
Avcwb GB welqwU ¯…xb Gi Dc‡i d›U mvBR †`Iqvi mgq †`‡L‡Qb| GLv‡b d›U mvBR †`Iqvi †¶‡Î †Kvb
eva¨evaKZv †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¨envi 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>
<style type="text/css">
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
60
wmGmGm (3) 8g Aa¨vq
†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>
<style type="text/css">
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>
<style type="text/css">
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>
61
wmGmGm (3) 8g Aa¨vq
</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|
62
wmGmGm (3) 8g Aa¨vq
Aa¨vq-08
63
wmGmGm (3) 8g Aa¨vq
8.1 t Font:
GZ¶b Avgiv †`Ljvg Avgv‡`i †jLv¸‡jv‡K wKfv‡e eo/†QvU Kie| wKš‧ Avgv‡`i †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‡`i‡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¨envi 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¨envi 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 Ki
b
http://www.bookbd.info|
GLb wb‡Pi Abykxjbx‡Z Avgiv †`Le wK K‡i d›U d¨vwgwj e¨envi Ki‡Z nq|
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
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>
64
wmGmGm (3) 8g Aa¨vq
AviI GKwU Abykxjbx t
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
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
66
wmGmGm (3) 8g Aa¨vq
<div>
We have a very big network of survicing Centers all over the country.
</div>
</body>
</html>
67
wmGmGm (3) 8g Aa¨vq
68
wmGmGm (3) 8g Aa¨vq
69
wmGmGm (3) 8g Aa¨vq
On that day, East Pakistan became <span> Bangladesh </span>.
</p>
</body>
</html>
8.7 t @font-face
GZw`b †W‡fjcvi‡`i ÒI‡q‡ei †¶‡Î wbivc`Ó d›U e¨envi 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¨envi Ki‡Z cv‡ib|
Avi GB myweavwU e¨envi Kivi Rb¨ Avcbv‡K @font-face wbqgwU e¨envi Ki‡Z n‡e| Avi GwU e¨envi 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;
70
wmGmGm (3) 8g Aa¨vq
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¨envi 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¨I Lye mnR mgvavb n‡Q
B›Uvi‡bU| AwWI-wfwWI KbfvU© Kivi Rb¨ †hgb wewfbœ Converter (i
cvš—iKvix mdUIq¨vi) cvIqv hvq,
wVK †Zgwb d›U i
cvš—‡ii Rb¨I mdUIq¨vi cvIqv hvq| Avi ZvQvov Google Gi wewfbœ d›U mvwf©mI Av‡Q|
†mLvb †_‡KI wj¼ K‡i d›U e¨envi Ki‡Z cv‡ib|
GLb Avgiv ‡`Le Av‡M •Zwi Kiv Avgv‡`i d›U d¨vwgwjwU wKfv‡e e¨envi Ki‡ev|
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@font-face
{
font-family: headers;
src: url('FRAHVIT.ttf'),
url ('forte.eot'); /* IE9 */
}
div
{
font-family:headers;
}
</style>
</head>
<body>
71
wmGmGm (3) 8g Aa¨vq
<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
GLv‡b,
1. Font
2. Font-weight
3. Font-style
4. Font-varient
72
wmGmGm (3) 8g Aa¨vq
73
wmGmGm (3)
72
wmGmGm (3)
9.1 t Text-Alignment
GB bvgwU †`‡LB Avcwb eyS‡Z cvi‡Qb †h GwU e¨envi K‡i Avgiv †jLv‡K wewfbœ Ae¯
v‡b cÖ`k©b Kivi Rb¨
e¨envi Ki‡ev| GB Property Gi wfZ‡i PviwU value †`Iqv 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>
<style type="text/css">
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>
73
wmGmGm (3)
75
wmGmGm (3)
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 Ki
b http://www.bookbd.info|
GLb Avgiv AvcvZZ AbykxjbxwU PP©v Kwi|
<DOCTYPE! Html>
<html>
<head>
<style type="text/css">
.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">
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">
Jackfruit is national fruit of Bangladesh. It has all the essential nutritions we need. When
it is ripen, it looks yellow in color.
76
wmGmGm (3)
It is found all over Bangladesh. Jackfruit is very tasty fruit.
</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.
It is found all over Bangladesh. Jackfruit is very tasty fruit.
</div>
</body>
</html>
Ex-2:
<DOCTYPE! Html>
<html>
<head>
<style type="text/css">
.mango {
height: 160px;
width: 235px;
text-align: center;
float: left;
border: thin grey solid;
margin:6x;
padding:6x;
}
</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">
77
wmGmGm (3)
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">
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">
Jackfruit is national fruit of Bangladesh. It has all the essential nutrition we need. When it
is ripen, it looks yellow in color.
It is found all over Bangladesh. Jackfruit is very tasty fruit.
</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|
78
wmGmGm (3)
79
wmGmGm (3)
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¨envi 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‡`i †U·U
†W‡Kv‡ikb e¨envi Ki‡Z n‡e| GiKg AviI A‡bK Kv‡Ri Rb¨ Avgv‡`i †U·U †W‡Kv‡ikb e¨envi 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¨envi Kiv nq|
<DOCTYPE html>
<html>
<head>
<style type="text/css">
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>
80
wmGmGm (3)
• 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¨envi 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>
<style type="text/css">
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¨envi Kiv Avi bv Kiv mgvb| Z‡e HTML G hLb Avgiv wj¼ e¨envi 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|
81
wmGmGm (3)
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
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>
<a href="#"> Menu one </a>
<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>
<style type="text/css">
span {text-decoration:overline;}
</style>
82
wmGmGm (3)
</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¨envi Ki‡j †jLvwU R¡j‡Z-wbf‡Z _vK‡e| GwU A‡bK mgq Header ev Banner •Zwi Kivi Rb¨ e¨envi
Kivi Rb¨ e¨envi Kiv nq| GwU e¨envi Kivi Rb¨ Av‡Mi g‡Zv text-decoration:blink wjL‡jB n‡e| wKš‧
GZ my›`i 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
Avcbviv †R‡b Lywk n‡eb †h, Avcbv‡`i‡K mn‡hvwMZv Kivi Rb¨ Avgiv •Zwi K‡iwQ Book Support center| Avi GB
Book Support center-Gi B-†gBj G¨v‡Wªm n‡jv infobook7@gmail.com, hv Avcbv‡`i mKj mgm¨vi mgvavb
Ges GB eB m¤ú‡K© †h †Kvb cÖ‡kœi DËi †`Iqvi Rb¨ •Zwi Av‡Q memgq| ZvB Avcbv‡`i hw` GB eB‡q †Kvb wKQ zeyS‡Z
mgm¨v nq ev †Kvb cÖkœ †_‡K _v‡K Zvn‡j †gBj Ki
b GB wVKvbvq infobook7@gmail.com.
83
wmGmGm (3)
. Clip Gi e¨envi
. Ellipsis Gi e¨envi
84
wmGmGm (3)
hw` div Gi wfZ‡i †jLv Lvc bv Lvq, Zvi Rb¨ GB property wU e¨envi Kiv nq| GLv‡b Avgiv `yBwU value
e¨envi Ki‡Z cvie| G¸‡jv n‡Q-
11.1 t Clip
GwU e¨envi 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>
<style type="text/css">
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 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">
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
85
wmGmGm (3)
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>
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>
<style type="text/css">
div {
border: black thin solid;
}
.fox {
white-space:nowrap;
overflow:hidden;
width:150px;
86
wmGmGm (3)
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>
87
wmGmGm (3)
88
wmGmGm (3)
89
wmGmGm (3)
12.1 t color †cÖvcvwU© Gi KvR
GB property wU Avcbviv Gi Av‡MB D`vni‡b e¨envi Ki‡Z †`‡L‡Qb| GwU Avgiv wewfbœ †jLvi g‡a¨ iO
cÖ`v‡bi Rb¨ e¨envi Ki‡ev| G‡Z Avgv‡`i †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¨envi 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¨envi 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¨envi 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 †`Iqv nj|
90
wmGmGm (3)
91
wmGmGm (3)
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|
92
wmGmGm (3)
1) Text-Shadow wK?
2) Text-Shadow wKfv‡e Ki‡Z nq|
3) Text-Shadow Qvqvi Ae¯
vb wbY©q Kiv|
93
wmGmGm (3)
13.1 t Text-Shadow
GwU †jLvi wb‡P Qvqv cÖ`v‡bi Rb¨ e¨envi 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) †`Iqv 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¨envi Kiv hvq| GwU Ackbvj| Avcwb PvB‡j e¨envi Ki‡eb, cÖ‡qvRb bv _vK‡j
e¨envi 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¨envi 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 Ki
b|
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
font-family:Arial;
text-shadow: 2px 2px 2px Grey;
font-size:4em;
}
</style>
</head>
<body>
<h1>Bongo Communications</h1>
</body>
</html>
94
wmGmGm (3)
Abykxjbx t
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
font-family:Arial;
text-shadow: 5px 8px 10px red;
font-size:4em;
}
</style>
</head>
<body>
<h1>Bongo Communications</h1>
</body>
</html>
95
wmGmGm (3)
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
96
wmGmGm (3)
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>
97
wmGmGm (3)
• 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>
98
wmGmGm (3)
• 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>
99
wmGmGm (3)
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›Uvi‡b‡U AvZ¥Kg©ms¯
vb-2
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
100
wmGmGm (3)
Aa¨vq-15 : e¨KMÖvDÛ
101
wmGmGm (3)
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¨envi Ki‡ev|
e¨vKMÖvDÛ‡K ÷vBwjs Gi Rb¨ Avgiv wewfbœ is, Qwe BZ¨vw` e¨envi Ki‡Z cvwi| is e¨envi Ki‡j †Kvb mgm¨v
†bB| Z‡e e¨vKMÖvDÛ wn‡m‡e hw` Avgiv Qwe e¨envi 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`e, 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>
102
wmGmGm (3)
GLv‡b j¶¨ Ki
b, Avgiv heading Gi Rb¨ Avjv`v is Ges paragraph Gi Rb¨ Avjv`v is e¨envi K‡iwQ|
wKš‧ GLv‡b CSS property wKš‧ GKUvB e¨envi K‡iwQ| hw` Avgiv heading ev paragraph Gi Rb¨ Avjv`v
Avjv`v background color e¨envi Ki‡Z PvB, Zvn‡j Avgv‡`i Avjv`v Avjv`v K‡i e‡j w`‡Z n‡e| wKš‧
Avgiv hw` Avjv`v Avjv`v iO e¨envi bv K‡i m¤ú~Y© c…ôvi Rb¨ GKUvB is e¨envi Ki‡Z PvB, Zvn‡j GB
background color property wU e¨envi 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¨envi 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);
103
wmGmGm (3)
}
</style>
</head>
<body>
<h1>Tanvir Ahmed</h1>
<p>Portfolio Website:www.metanvir.weebly.com</p>
</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>
104
wmGmGm (3)
<center>
<h1>Tanvir Ahmed</h1>
<p>Portfolio Website:www.metanvir.weebly.com</p>
</center>
</body>
</html>
cÖkœce© t
Avcbviv †R‡b Lywk n‡eb †h, Avcbv‡`i‡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 infobook7@gmail.com, hv Avcbv‡`i mKj mgm¨vi mgvavb
Ges GB eB m¤ú‡K© †h †Kvb cÖ‡kœi DËi †`Iqvi Rb¨ •Zwi Av‡Q memgq| ZvB Avcbv‡`i hw` GB eB‡q †Kvb wKQ zeyS‡Z
mgm¨v nq ev †Kvb cÖkœ †_‡K _v‡K Zvn‡j †gBj Ki
b GB wVKvbvq infobook7@gmail.com.
105
wmGmGm (3)
106
wmGmGm (3)
107
wmGmGm (3)
16.1 t e¨KMÖvD‡Û Qwe e¨envi
Avgv‡`i mvaviY c`©vi AvKvi (Normal Screen size) n‡Q 14 †_‡K 21 BwÂ| Avi †mB wn‡m‡e Avgv‡`i 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‡`i GiKg eo dvBj e¨venv‡ii Av‡M 2 evi wPš—v Ki‡Z n‡e| KviY Avgv‡`i
†`‡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¨enviKvix 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|
108
wmGmGm (3)
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¨envi bv K‡i, Gi †h‡Kv‡bv GKav‡ii †QvÆ GKwU
Ask e¨envi Kivi| G‡Z K‡i †hgb Avgv‡`i 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¨envi 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Õ)
109
wmGmGm (3)
110
wmGmGm (3)
17.1 t e¨KMªvD‡Ûi Ae¯’vb wba©vib
GwU e¨envi 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¨envi Ki‡Z n‡e Ges †mwU n‡Q
background-attachement:fixed
GwU e¨envi 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¨envi 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>
<style type="text/css">
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>
111
wmGmGm (3)
GLv‡b GKwU AwZwi³ U¨vM e¨envi Kiv n‡q‡Q hv background-repeat:no-repeat; GwU ïaygvÎ Avgv‡`i
e¨envi Kiv QwewU‡K ¯^qswµqfv‡e cybive„wË nIqv †_‡K †iva Ki‡e|
112
wmGmGm (3)
<html>
<head>
<style type="text/css">
body {
background-image:url(Images/green.gif);
background-position:right center;
background-repeat:no-repeat;
}
</style>
</head>
<body>
We are using a image here
</body>
</html>
113
wmGmGm (3)
114
wmGmGm (3)
115
wmGmGm (3)
116
wmGmGm (3)
117
wmGmGm (3)
118
wmGmGm (3)
17.10 t background position: left bottom
evgcv‡k wb‡P †`Lv‡bvi Rb¨ {background-position:left bottom}
<html>
<head>
<style type="text/css">
body {
background-image:url(Images/green.gif);
background-position:left bottom;
background-repeat:no-repeat;
}
</style>
</head>
<body>
We are using a image here
</body>
</html>
119
wmGmGm (3)
-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 †`Iqvi Rb¨ e¨envi Kiv nq|
AZGe Avcwb Gevi wbðqB x Ges y A¶ m¤ú‡K© avibv †c‡q‡Qb| GB x Ges y A¶ e¨envi K‡i Avgiv
†h‡Kv‡bv Qwe Ges div †K Avgv‡`i B‡Q g‡Zv RvqMvq wb‡Z cvie|
†Zv †hLv‡b wQjvg, % e¨envi K‡i Qwe‡K wbw`©ó ¯
v‡b emvb| GwU †jLvi dig¨vU n‡Q
background-position:50% 50%;
120
wmGmGm (3)
GLv‡b cÖ_‡g wjL‡Z n‡e x A‡¶i gvb| Zvici y A‡¶i gvb|
<html>
<head>
<style type="text/css">
body {
background-position:50% 50%;
background-image:url(Images/css3.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
We are using numerick values here
</body>
</html>
wUcmt % e¨envi Kivi me‡P‡q eo myweav n‡Q, Avcwb Avcbvi I‡qe †cR 14 Bw gwbUi G Pvjy Ki
b, Avi
56 Bw gwbUi G Pvjy Ki
b bv †Kb, Avcbvi Qwe Gi cwRkb GK`g wVKVvK †`Lv‡e| wKš‧ wc‡·j e¨envi
Ki‡j GB myweavwU cv‡eb bv|
ai
b, 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 Ki
b, †mB GKB †cR hw` GKwU U¨ve‡jU G I‡cb Kiv nq, Z‡e
e¨enviKvix 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 †`Iqv nqwb| ZvB Avcbv‡K
mKj wWfvBm Gi K_v gv_vq †i‡LB KvR Ki‡Z n‡e|
121
wmGmGm (3)
• 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>
<style type="text/css">
body {
background-position:100px 20px;
background-image:url(Images/css3.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
We are using numerick values here
</body>
</html>
<html>
<head>
<style type="text/css">
body {
background-position:10% 20%;
background-image:url(Images/css3.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
We are using numerick values here
</body>
</html>
122
wmGmGm (3)
123
wmGmGm (3)
18.1 t e¨vKMÖvDÛ wiwcU wK?
GwU m¤ú‡K© Av‡M wKQyUv Av‡jvPbv K‡iwQjvg| GB property wU e¨envi 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‡`i Pvwn`v g‡Zv Kv‡Ri myweav‡_© GB
property wU e¨envi 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>
<style type="text/css">
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>
124
wmGmGm (3)
<html>
<head>
<style type="text/css">
div {
border: 3px green dotted;
height: 250px;
width: 500px;
background-image:url(Images/picture.jpg);
background-repeat:repeat;
}
</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
125
wmGmGm (3)
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
div {
border: 2px blue dashed;
height: 300px;
width: 600px;
background-image:url(Images/picture.jpg);
background-repeat:repeat-y;
}
</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>
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|
126
wmGmGm (3)
18.3 t background repeat: y
repeat-y: GwU QwewU‡K Dj- ¤^fv‡e cybive„wË Ki‡e|
<html>
<head>
<style type="text/css">
div {
border: 1px black solid;
height: 300px;
width: 600px;
background-image:url(Images/picture.jpg);
background-repeat:repeat-y;
}
</style>
</head>
<body>
<h3>
This is the actual image
</h3>
<img src="Images/picture.jpg"/>
<br/>
<div>
This is how it looks when we repeat
</div>
</body>
</html>
127
wmGmGm (3)
<html>
<head>
<style type="text/css">
div {
border: 1px black solid;
height: 300px;
width: 600px;
background-image:url(Images/wood.jpg);
background-repeat:repeat;
}
</style>
</head>
<body>
<h3>
This is the actual image
</h3>
<img src="Images/wood.jpg"/>
<p>This is how it looks when we repeat</p>
<div></div>
</body>
</html>
128
wmGmGm (3)
<html>
<head>
<style type="text/css">
body {
background-image:url(Images/wood.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
We are using an image here
</body>
</html>
129
wmGmGm (3)
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›Uvi‡b‡U AvZ¥Kg©ms¯
vb-2
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
130
wmGmGm (3)
131
wmGmGm (3)
132
wmGmGm (3)
133
wmGmGm (3)
134
wmGmGm (3)
I‡W¯‥ Ges AvDU‡mvwm©s
A¨vwdwj‡qU gv‡K©wUs
135