html - sysnovahyper text markup language) হর্ে রনরমেি সকল ওর্েব...
TRANSCRIPT
1
HTML ওয়েব তৈরি রিখন রনয়েই
2
সরিপতর
HTMLXHTML এর পরররিরি 3 HTMLXHTML এর সমপরকে 3 কলারকৌশল 3 টল 4 ওরেব বনাম রিনট 4 শর হরে 4 ববরসক বকাড বসট করা 5 বটকসট ব াগ এবং ফরমেট করা 7 বনরটং টযাগ 10 অযাডভানসড বটকসট ফরমেরটং 10 রং এবং ওরেব 13 বহরডং 13 রলট 15 রলংক 16 বলআউট এবং বটরবল 18 অযাডভানসড বটরবল ফরমেট 22 ছরব 28 সব একরিি করা 31 একরট ছরব ব াগ করা 33 সাধারণ একরট বটরবল ব াগ 34 িধান বরডর িথয 38 রফরনরশং টাি 39 রি আপরন আররা িারলরে ব রি িান 39 পরররশষট ১ ছরবর ফাইল ফরমেট 41 পরররশষট ২ 44 পরররশষট ৩ 45
3
HTMLXHTML এর পরররিরি
এই ডকরমনটরট Interactive Media Center এর অনলাইন রটউরটাররোল Introduction to HTMLXHTML এর রবিরণর াগয সংসকরন এরট পাওো ারব এখারন httplibraryalbanyeduimchtml_tut
HTMLXHTML এর সমপরকে
HTML (Hyper Text Markup Language) এবং এর সামপররিক রপ XHTML (Extensible Hyper Text Markup Language) হরে রনরমেি সকল ওরেব পািার মল রভরি রিও নিন ধররণর ি রি এবং বকারডংরের অপশন আরছ ব মন PHP ASP XML ও অনয রকছ িথারপ টরযারডশনাল মাকেআপ লযাঙগরেজ হরে বস ােগা ব খান বথরক ldquoসকল ওরেবrdquo শর হে
বিেমান সমরে HTML এর সবেরশষ সংসকরণ হরে ldquoHTML5rdquo এবং রিও এরিারিন এরট অরফরসোরল আরসরন রকছরিন হরলা এরট অরফরসোরল বযবহি হরে বরাউজাররর িরিরট হালনাগারি আররা ববরশ করর HTML5 কষমিা ি হরে এই রটউরটাররোরল আমরা HTML XHTML এবং HTML5 এর ববশ রকছ রবষে রনরে আরলািনা কররবা ববরশরভাগ বকষরিই এই রিনটরটর মরধয বিমন বকারনা পাথেকয বনই রিও খন িরকার পড়রব িখন পররবিেনগরলা বনাট করা হরব
রকছ ওরেব সমপািনার সফটওোররর িকাশকরা বরলন ব ওরেব পািা তিররর জনয আপরন রি িারির বিাগরাাম বযবহার কররন িরব HTML জানা জররী নে রিও সকল বকষরি এরট সরিক নে িাে সকল বকষরিই HTML সমপরকে রকছটা জঞান অনতিঃ িরকারী
এই রটউরটাররোরল ববরসক HTML বকাড বলখার বযপারর আমরা আপনারক গাইড কররবা এটা বজরন রাখা জররী ব রনরজ রলরখ ও বযবহার করার বিরে অনয বকারনা উপারে বকাড বশখা ও বঝা াে না এই রটউরটাররেোল আপনারক বকাড সমপরকে জঞান বরি করার পরথ একধাপ এরগরে রনরে ারব
কলারকৌশল
অরনক বলাক এমন ভারব ওরেব পািার বকাড রলখরি বিষটা করর ব রনা িারা টামে বপপার রলখরছ িারা এরকবারর শর বথরক শর করর এবং তররখকভারব মাঝ হরে বশরষ িরল াে HTMLXHTML বকাড দই ধররণর টযাগ রিরে গরিি হে িারা হরলা করনটইনার টযাগ এবং রসরঙগল পাটে টযাগ ারক ldquoনন-করনটইনারrdquo টযাগও বরল
করনটইনার টযারগর শর ও বশষ অংশ থারক আর মারঝ িারক িার উপািান ব গরলা টযাগরট রনেনতরন করর একরট উিারণ হরলা এমন একরট টযাগ া বটকসটরক ববালড করর ltstronggtltstronggt এখারন ltstronggt হরলা শরর অংশ এবং ltstronggt হরলা বশরষর অংশ
4
আপরন রি এই বছাট বকাড অংশরট রলখরি িান িরব িা বিখরি এমন হরব ltstronggtThis is
boldltstronggt এবং বিখরবন ব টযারগর দই অংরশর বভিররর বলখারক ববালড রহরসরব বিখারে
রসরঙগল পাটে টযারগর একরট উিাহরণ হরে লাইন ববরক টযাগ ltbrgt া শধ একরট বটকসরটর লাইনরক রনরিেষট জােগাে থারমরে বিে এটা বযবহার করা হে ব বাকযরট থামারনা লাগরব িার বশরষর শরের পর
ওরেব পািাে ব রহি অরনক বকাড থাকরব িাই বকান টযাগরট বখালা বা বনধ আরছ িা মরন রাখা করিন হরে ারব সবরিরে ভারলা উপাে হরে একই সারথ টযারগর শর ও বশরষর অংশ রলরখ বফলা িারপর িার মধযকার রবষেবসত এরট টযাগ বনধ জরনি িরেটনাবশি রটা সমসযার িরিকার করর এবং এই রটউরটাররোরল এ পিরিই বযবহার করা হরেরছ
রসরঙগল পাটে টযাগ িরকাররর সমেই ি করা ারব
টল
সাধারণ ওোডে িরসসররই HTML এবং XHTML বকাড বলখা াে রকনত এটা মরন রাখা জররী ব বকাড বলখার জনয কখরনাই Word WordPerfect OpenOffice বা এধররণর বকারনা ওোডে িরসসর বযবহার করা ারব না ldquoহাই এনডrdquo ওোডে িরসসরগরলা এরিাই সমাটে ব িারা িারির রনজসব ফরমেরটর বকাড িরবশ করাে
বযবহার করার জনয সবরিরে ভারলা সফটওোর হরে এরকবারর সাধরণ HTML বলখার জনয সবরিরে উপ ি হরে NotePad রকছ বিাগরাাম শধমাি ওরেব পািা তিররর জনযই রবরশ ভারব রডজাইন করা হরেরছ ব মন
Dreamweaver এ HTML বলখার জনয রবরশষ ফাংশন আরছ া আপনারক বসাজা বকাড রলখরি বিে HTMLKit এর মরিা রকছ বিাগরাাম আরছ া code insertion বিাগরাাম রহরসরব কাজ করর ব খারন বযবহারকারীরক বকাড রলখরি হেনা িার বিরল বিাগরাামরক HTMLXHTML বলক িরবশ করারি রনরিেশ করর রিও এই বিাগরাামগরল বকাড বলখা সহজ করর রিরেরছ িথারপ বকাড জানাও জররী
এই রটউরটাররোরল আমরা আপনারক NotePad এই ধররণর বিাগরাাম বযবহার কররি পরামশে বিরবা
ওরেব বনাম রিনট
আমরা জারন ব একই সারথ কাজ করা এবং অনলাইরন উিাহরণ অনসরণ করা করিন িাই আমারির এই রটউরটাররোরলর একরট রিরনটড সংসকরণও আরছ া এখান বথরক ডাউনরলাড কররি পাররন িারপর আপরন রিরনটড সংসকরণ পড়রি পাররন এবং করমপউটারর ধাপগরল সমপািন কররি পাররন
শর হরে
আপনার ওরেব িরজকট শর করার জনয আপনার সাইটরট সরিকভারব বসটাপ কররি হরব সাইরটর গিন এরকবারর সহজ আপনার িরজরকটর একরট ldquoরট বফালডারrdquo থাকরব ব টারি সাইটরট সমপরকেি সকল ফাইল থাকরব রট বফালডাররর বভিরর
5
( ারক আসরল ব ldquoরটrdquo ই বলরি হরব িা নে আপনার ইোমরিা নাম রিরি পাররন) রনরিেষট ধররণর ফাইরলর জনয আলািা সাব-রফালডার থাকরব ব রহি ওরেব পািার HTML ফাইলগরল রট বফালডারর হারররে ব রি পারর িাই আমরা ছরবগরলা images বফালডারর PDF ফাইল PDF বফালডারর এমন করর সবগরলা সারজরে রাখরবা ডারনর ডাোগরাারম রিনরট HTML পািা এবং দইরট সাব বফালডার সমবরলি একরট টযানডাডে ওরেব সাইরটর গিন বিখারনা হরলা
রট এবং িরোজনীে সাব বফালডার সহ আপরন আপনার করমপউটারর খন আপনার সাইটরট বসটাপ কররবন সারথ সারথই আপরন আপনার িথম ওরেব পািা তিরর শর কররি পাররন মরন করন এটা আপনার বহামরপজ হরব রি অনয বকারনা রনরিেশনা না বিো থারক িরব আপনার বহামরপরজর নাম রনরির একরট হরব
indexhtm
indexhtml
defaulthtm
defaulthtml
থা থ নামরট আপনার সাইরটর বহাট সাভোররর পররিালক ওরেব মাটার কিেক রনধোররি হরব ববরশরভাগ ওরেব সাভোররর নারমর একরট িারলকা থারক খন একজন সাইরটর রভরজটর িার বরাউজারর একরট ওরেব সাইরটর URL টাইপ করর িখন বরাউজাররটরক বহাট সাভোরর পািারনা হে বহাট সাভোররট িখন সবেংরিেভারব রলরটর িম অনসারর বহামরপজ খরজ এবং িা পাওো মািই এরট ও এটার সারথ সংরিষট সকল ফাইল রভরজটররর করমপউটারর বিরণ করর বসখান বথরক বরাউজার িারপর রিরন একি করর
রি সাভোর HTML ফাইরলর সংগরাহ বথরক শরর বহামরপরজর নাম খরজ না পাে িরব সবেংরিেভারব রিিীে নারমর ফাইল খরজ রি িাও না পাে িরব িিীে নাম এবং এভারব বাকী গরলা িাই আপনার উরিি শরর নারমর একরট ফাইল নাম বিো ারি ফাইল খজরি রগরে আপনার বহাট সাভোররর সমে নষট না হে
NotePad ( বা আপরন ব বিাগরাাম বযবহার কররি িান) এ একরট নিন ডকরমনট খলন এবং িারপর রট বফালডারর উপররর ব রকারনা একরট নারম বহামরপজরট সংরকষণ করন
ববরসক বকাড বসট করা
একরট ওরেব পািা দই অংরশ রবভি বহড এবং বরড বহড এর মরধয বপরজর িথয থারক ব মন বমটা টযাগ কখন এরট বানারনা হরেরছ এবং বকারডর রবসতাররি রববরণ বরডরি থারক িাই া আপরন পািাে বিখরি পান বহরডর মধযকার ডাটা বিখা াে না রিও বরডরি ldquoরজরনসগরলrdquo বকমন বিখারব িার রনরিেশনা এরি থাকরি পারর বহড এবং বরড সহ সকল টযাগ lthtmlgtlthtmlgt টযারগর মরধয থারক ারক ldquoপরম করনটইনারrdquo টযাগ বলা হে ব রট বরাউজাররক বরল ব এর মরধয া রকছ আরছ িা একরট ওরেব পািা
ডান রিরক বিখারনার মরিা করর HTML টযারগর শর এবং বশষ অংশ lthtmlgtlthtmlgt রলখন
lthtmlgt
lthtmlgt
6
এখন HTML পািার জনয বহড টযারগর শর এবং বশষ অংশ রলখন ারি িা ডারনর উিাহররণর মরিা বিখা াে
িারন এখন বরড টযাগ ব াগ করন
ফাইল সংরকষণ করন
এখন আপনার ওরেব পািাে রকছ বলখা ব াগ করন ারি পরীকষা করার সমে আপরন িা বিখরি পাররন এটা অবশযই বরডর মরধয রলখরি হরব বরড টযারগর শর এবং বশষ অংরশর মারঝ
এখন আপনার ওরেব বরাউজার িাল করন এটা হরি পারর Internet Explorer Firefox
Mozilla Safari Opera বা আপনার া পছনদ আপনার নিন ওরেব পািারট খলন এবং ফাইলরট বিখন ববরশরভাগ বরাউজারর আপনারক এভারব ফাইলরট খলরি হরব File এ রিক করর Open ( বা Open File) এ রিক করন িারপর আপনার সংররকষি ফাইলরটরি রগরে OK রিক করন
lthtmlgt
ltheadgt
ltheadgt
lthtmlgt
lthtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
lthtmlgt
ltheadgt
ltheadgt
ltbodygt
This is my first Web
page
ltbodygt
lthtmlgt
7
আপনার পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এখন আপনার ওরেব পািার বহড অংরশ রকছ িথয ব াগ করন ারি িা আপনার রভরজটররর জনয উপকারী হে
বহড টযারগর মরধয title টযাগ ব াগ করন এবং আপনার ওরেব পািার একরট রশররানাম রিন রশররানামরট ফাইরলর নাম নে বরং এরট বরাউজাররর উপররর বারর বিখা ারব এবং রভরজটর বকান পািাে আরছ িা রিরিি করর পািারট রকরসর সমপরকে িা রনধোরন কররি সািে ইরিন িা বযবহার করর
পািারট সংরকষন করর আবার বিখন বরাউজাররর এরকবারর উপররর বারর পািার রশররানামরট বিখরি পাররবন
বনাট িরিবার সংররকষি পািারট বিখার জনয বারবার FilegtOpen ইিযারি করা লাগরব না শধ পািারট সংররকষি হরেরছ রকনা িা রনরিি হরে বরাউজাররর Refresh বা Reload বাটরন রিক করন (রকান বরাউজার বযবহার কররছন িার উপর রনভের করর)
বটকসট ব াগ এবং ফরমেট করা পরবিেী ধাপ সমরহ আপরন বিখরবন কী করর আপনার ওরেব পািাে বটকসট ব াগ কররি পাররন এবং িা বিখার জনয ফরমেট কররি পাররন আপনার ওরেব পািার বরডরি একরট পযারাগরাাফ টযাগ ব াগ করর শর করন ডারন বকাডরট বিখারনা হরলা
পযারাগরাাফ হরে অনযিম একরট উপািান া রিরিি করার জনয HTML রডজাইন করা হরেরছ বিখন পযারাগরাাফরট p টযাগ িারা রনরিেরশি হরে ltpgtltpgt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
This is my first Web
page
ltbodygt
lthtmlgt
8
বনাট এই বটকসরট রক ডারনর উিাহররনর বলখারক এর িথম দরট শে অন ােী Lorem Ipsum বলা হে এরট একরট িযারসকাল লযারটন রিনা া রনেরমি রিনটার গরাারফক আরটেট এবং ওরেব রডজাইনার কিেক ldquoডারমrdquo বটকসট রহরসরব বযবহি হে রডজাইন ওরেব পািা রকংবা রিনটকি বররসউর এর নমনা বিখারি ব রহি বটকসরট English এ আরছ এবং ববরশরভাগ বলাক লযারটন পড়রি পারর না িাই রডজাইন বকমন বিখারব িার জনয এরট বযবহার করা হে সারথ সারথ রক বলখা আরছ িার রিক বথরক মনর াগ সরাে Lorem Ipsum এর ভারলা একরট উৎস হরে এর ওরেব সাইট httpwwwlipsumcom ব খারন এরট সমপরকে আররা জানরি পাররবন এবং নমনা করপ কররি পাররবন এই রটউরটাররোরলর জনয আপনারক Lorem Ipsum বযবহার কররি হরব না আপনার া ইো িাই টাইপ কররি পাররবন
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtLorem ipsum dolor
sit
amet consectetur
adipisicing
elit sed do eiusmod
tempor
incididunt ut labore et
dolore
magna aliqua Ut enim
ad
minim veniam quis
nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea
commodo
consequat Duis aute
irure dolor
in reprehenderit in
voluptate
velit esse cillum
dolore eu
fugiat nulla pariatur
Excepteur
sint occaecat cupidatat
non
proident sunt in culpa
qui
officia deserunt mollit
anim id
est laborumltpgt
ltbodygt
lthtmlgt
9
বকারনা সরনদহ বনই ব রক করর করনটইনার টযাগগরলা ফরমের করা হে িার পযাটানে আপরন লকষয করররছন করনটইনার টযারগর বশরষর অংরশ সবেিা একরট সামরন বহলারনা সলযাস থাকরব এই সলযাসরটই আপনার বরাউজাররক বরল ব টযাগরট এখারনই বশষ এবং বনধ করা হরেরছ
িলন পযারাগরাাফরটর িথম রকছ শে ববালড করর আপনার বটকসটরক আররকট ফরমেট করা াক ডারনর মরিা করর strong টযাগ ব াগ করন বরাউজারর বিখারনার সমে এরট বকমন বিখারে পাইলরট সংরকষন করর িা আপনার বরাউজারর বিখন
বখোল করন শধমাি strong টযারগর মরধয থাকা শেগরলাই ববালড রহরসরব বিখারে রিক এভারবই করনটইনার টযাগগরলা কাজ করর
বটকসটরক ইিারলক করর বিখারনার জনয আররকরট করনটইনার টযাগ আরছ এটা হরলা ltemgtltemgt ববালড করা অংশ বারি বটকসরটর অনয অংরশ এই টযাগরট িরোগ করর বিখন কীভারব কররি হরব িা ডারনর উিাহররণ বিো হরলা
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpltstronggtLorem ipsum
dolorltstronggt sit amet
consectetur adipisicing
elit sed
do eiusmod tempor
incididunt
ut labore et dolore magna
aliqua Ut enim ad minim
veniam quis nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea commodo
consequatltpgt
ltbodygt
lthtmlgt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtltstronggtLorem ipsum
dolorltstronggt sit amet
consectetur
ltemgtadipisicing
elitltemgt sed do eiusmod
tempor incididunt ut
labore et
dolore magna aliqua Ut
enim
ad minim veniam quis
nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea commodo
consequatltpgt
ltbodygt
lthtmlgt
10
বনরটং টযাগ
একরট বলখাংশ বা অনয বকারনা বসতরি একারধক টযাগ িরোগ করা হরল বকান িরম িারির শর এবং বশষ অংশ আসরব িা বনরটং টযাগ িারা বঝারনা হে ব মন বটকসরটর বকারনা অংশ একই সারথ ববালড এবং ইিারলক হরি পারর strong এবং emphasis টযারগর সরিক বনরটং হরব রনরির মরিা
ltstronggtltemgtThis is bold and italicsltemgtltstronggt
strong টযাগরট ldquoবাইররrdquo ব খারন emphasis টযাগরট ldquoবভিররrdquo এবং বটকসরট আরছ মারঝ
আপরন টযাগগরলা এভারবও বনট কররি পাররিন
ltemgtltstronggtThis is bold and italicsltstronggtltemgt
ভলভারব বনট করা টযারগর বারহর-রভির-মারঝ িমরট থাকরব না ভলভারব বনট করা টযারগর একরট উিাহরণ হরে
ltstronggtltemgtThis is bold and italicsltstronggtltemgt
ওরেরবর আরগর রিরন ভলভারব বনট করা টযারগ সাধারণি বকারনা সমসযা কররিা না রকনত ব রহি ওোলেড ওোইড ওরেব তিরর হরে বগরছ িাই বরাউজারগরলারক একই টযানডারডে ি থাকা জররী হরে পড়রছ
বিেমারনর XHTML HTML এর আররা থা থ সংসকরণ রহরসরব বরণেি হরেরছ অরনক বকষরিই এরট সরিক XHTML এর রনেম সরিক বনরটং টযাগ বলখা এবং অনযানয গরতবপণে রবষে রনরিেষট করর আধরনক বরাউজারগরলা এই সকল রনেম ররনষঠভারব বমরন িরল রি আপনার বকাড সরিকভারব XHTML এর রনেম বমরন না িরল িরব িা মরনটরর সরিকভারব নাও বিখারি পারর
HTML এবং XHTML এর রনেম সমপরকে আররা জানরি World Wide Web Consortium এর ওরেব সাইট wwww3xorg রভরজট করন এই সংসথারট ওরেব সংরিষট সকল রজরনরসর মান রনধোরণ করর
অযাডভানসড বটকস ফরমেরটং
বটকসট ববালড এবং ইিারলক করার সারথ সারথ HTML বযবহার করর আররা উননি উপারে িার সজজা পররবিেন করা াে এর মরধয বলখাে রং বিো ফনট রনেনতরন এবং বলখার সাইজ পররবিেন করা ারব
ফনট টযাগ ltfontgtltfontgt এর মাধযরম ফরনটর উপসথাপনা রনেনতরন করা হে ডারনর উিাহররণ ফরনটর সাইজ ৩ রনরিেষট করা আরছ ফরনটর সাইজ ১ বথরক ৭ এর মরধয রনরিেষট করা াে ব খারন ১ সবরিরে বছাট এবং ৭ সবরিরে বড়
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtltfont size=3gtThis
text is
font size 3ltfontgtltpgt
ltbodygt
lthtmlgt
11
রডফলট সাইজ হরে ৩ ববরশরভাগ বকষরিই অরধকাংশ বরাউজার ldquoসাধরণিrdquo এই সাইজরটই বিখাে
আপরন ফরনটর সাইরজর মান ১ বথরক ৭ প েনত করর বিখরি পাররন রনরির িারলকাে সবগরলা সাইরজ বটকসট বকমন বিখারব িা বিখারনা হরলা মরন রাখন ফরনটর সরিক সাইজ অরনক রবষরের উপর রনরভর করর ব মন আপনার মরনটর রিরনর সাইজ
Font size 1
Font size 2
Font size 3
Font size 4
Font size 5
Font size 6
Font size 7
বরাউজাররর বসরটংস অন ােীও ফরনটর সাইজ রনরিেষট করা াে ফনট সাইজ অযারটররবউরট + বা - রিরে এরট করা হে ডারনর উিাহররন ফরনটর সাইজ +২ বযবহার করা হরেরছ এর মারন হরে বরাউজাররর রডফলট সাইজ বথরক ২ সাইজ বড় করর ফনটরট বিখারব
HTML এর রনেম অন ােী এই ফনট সাইজগরলা রভরজটররর বরাউজাররর বসরটংসরক অগরাাহয কররব অনয কথাে আপনার ওরেব পািার রভরজটর রি িার বরাউজাররর ফনট বসরটংসরক কারটামাইজ করর িরব ফনট টযারগ বযবহি সাইজ অযরটররবউট বসটার ldquoরনরজর মরিাrdquo করে রনরে বনে এবং আপনার মরিা কররই বলখারট বিখারব
িাহরল + বা - আসরল রক বলা ারব না কারণ িরিরট বরাউজাররর রডফলট ফনট সাইজ এরকক রকম হরব এবং বটকসট বিখরি বকমন হরব িা রনণেে করা সমভব নে কারণ এরট বমরশন বথরক বমরশরন পররবরিেি হে রনরির উিাহরণরট আপনারক রকছটা ধারণা বিরব রকনত আসরল এরট বকমন বিখারব িা বিখরি আপরন পািারট অনয বমরশরন অনয বরাউজার বসরটংসএ বিখরি পাররন
12
This Font size +1
This Font size +2
This Font size +3
This Font size +4
This Font size +5
This Font size +6
This Font size +7
This is font size -1
This is font size -2
This is font size -3
This is font size -4
This is font size -5
This is font size -6
This is font size -7
এরট সমভব ব উপররর উিাহররণর মরধয ববশ রকছ বিখরি একই রকম লাগরছ এর কারন রকছ বরাউজারর বড় বা বছাট ফনট বিখারনার একরট সীমাররখা বটরন বিে পড়া ােনা এমন বটকসট তিররর বকারনা মারনই হেনা এটা হরি পারর ওরনক বড় রকংবা অরনক বছাট হরল
বটকসট ফরমেট করার আররকরট উপাে হরে রং এর বযবহার রং িার নাম অনসারর রনরিেষট করা াে ব মন red blue বা ForestGreen RGB ( Red Green Blue) মান বযবহার কররও িারির রনধোরণ করা াে ওরেরব রংরক সবরিরে সাধারণ ভারব বযবহার করার উপাে হরে িারির বহকসারডরসরমল মান বযবহার করা িরিযক পিরির উিাহরণ রনরি বিো হরলা
ltfont color=redgtThis is red specified as a color nameltfontgt
ltfont color=25500gtThis is red specified as an RGB valueltfontgt
ltfont color=ff0000gtThis is red specified in hexadecimalltfontgt
13
রং এবং ওরেব
ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে
রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব
ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল
bull Color and the Web
(httplibraryalbanyeduimcwebcolorindexhtm) the
Interactive Media Centers online tutorial
bull Browser Safe Color Chart
(httplibraryalbanyeduimcwebcolorshtm) online chart
of Web safe colors from the Interactive Media Center
bull Color Names Chart
(httpwwww3schoolscomhtmlhtml_colornamesasp) online
chart from the W3 Schools
bull The Browser Safe Color Pallet
(httpwwwlyndacomhexasp) online guide from Lynda
Weinman
বহরডং
ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক
বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে
মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব
I Introduction
A Welcome
II Main Message
A Part 1 - What I did on my summer vacation
1 Getting to the airport
2 Flying on the airplane
a Visiting Alaska
14
b Seeing a bear
3 Flying home
B Summing my vacation
III Conclusion
এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত
বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল
lth1gtThis is heading H1lth1gt
খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব
এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lth1gtThis is an example
of the
h1 taglth1gt
ltbodygt lthtmlgt
15
রলট
রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন
রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল
1 Dinner at 800 pm 2 Lunch at noon
3 Snacks at 1100 am
এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltolgt
ltligtDinner at 800 pmltligt
ltligtLunch at noonltligt
ltligtSnacks at 1100 amltligt
ltolgt
মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব
অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল
bull Apples
bull Oranges
bull grapes
এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltulgt
ltligtApplesltligt
ltligtOrangesltligt
ltligtgrapesltligt
ltulgt
16
আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব
উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর
উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস
রলংক
রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর
দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ
এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল
এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা
lta href=httpwwwalbanyedugtLink to UAlbanyltagt
বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল
lta
href=httpwwwalbanyeducommunicationindexhtmlgtLink
to the Communication Department home page ltagt
এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড
17
ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml
এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন
রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব
lta href=page4htmlgtPrevious Pageltagt
এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না
anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে
lta name=topgtltagt
আর এটারি রলঙক করার জনয
lta href=topgtGo to the top of this pageltagt
ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন
বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব
আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে
lta href=page5htmltopgtTop of Page 5ltagt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lta name=topgtltagt
ltpgtWelcome to my Web
page
You can go to the top of
the
page by lta href=topgtby
clicking hereltagtltpgt
ltbodygt
lthtmlgt
18
বলআউট এবং বটরবল
ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব
ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign
ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে
ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব
বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা
টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ
19
ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয
ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন
বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে
বটরবল টযাগ - lttablegtlttablegt
বটরবল বরা টযাগ - lttrgtlttrgt
বটরবল বসল টযাগ - lttdgtlttdgt
রনরি একরট সাধারণ বটরবল বিখারনা হরলা
এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা
lttablegtlttablegt
বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা
lttablegt
lttablegt
20
এখন আমরা িথম বটরবল বরা টযাগ ি কররবা
lttablegt
lttrgtlttrgt
lttablegt
িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরট এরকম করর তিরর হরব
রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরটর গিন এমন হরব
বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব
lttable border=1gt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন
21
উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না
এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা
Text Object
Text Object
বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন
বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo
nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে
বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom
nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব
Text Object
Text Object
22
আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব
আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব
lttable border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ
lttable width=300 border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে
অযাডভানসড বটরবল ফরমেট
বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন
বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ
এরি বকারনা Cell padding বনই
এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ
23
রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে
lttable width=284 border=1 cellspacing=0 cellpad-
ding=10gt
lttrgt
lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt
lttablegt
Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন
আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল
বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব
cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক
cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ
24
cell padding ৮ রপরকসল
বটরবল বডোর ৪ রপরকসল
cell spacing ১০ রপরকসল
বটরবল ৩০০ রপরকসল িওড়া
এই বটরবরলর বকাড হরে
lttable width=300 border=4 cellspacing=10 cellpad-
ding=8gt
lttrgt
lttdgtCell Padding 8 pixelslttdgt
lttdgtTable borders are 4 pixelslttdgt
lttrgt
lttrgt
lttdgtCell spacing is 10 pixelslttdgt
lttdgtThe table is 300 pixels widelttdgt
lttrgt
lttablegt
বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা
বটরবরল রিন ভারব রং ব াগ করা াে
1 বটরবরলর বযাকগরাাউনড রং
2 বসরলর বযাকগরাাউনড রং
3 বডোররর রং
রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
2
সরিপতর
HTMLXHTML এর পরররিরি 3 HTMLXHTML এর সমপরকে 3 কলারকৌশল 3 টল 4 ওরেব বনাম রিনট 4 শর হরে 4 ববরসক বকাড বসট করা 5 বটকসট ব াগ এবং ফরমেট করা 7 বনরটং টযাগ 10 অযাডভানসড বটকসট ফরমেরটং 10 রং এবং ওরেব 13 বহরডং 13 রলট 15 রলংক 16 বলআউট এবং বটরবল 18 অযাডভানসড বটরবল ফরমেট 22 ছরব 28 সব একরিি করা 31 একরট ছরব ব াগ করা 33 সাধারণ একরট বটরবল ব াগ 34 িধান বরডর িথয 38 রফরনরশং টাি 39 রি আপরন আররা িারলরে ব রি িান 39 পরররশষট ১ ছরবর ফাইল ফরমেট 41 পরররশষট ২ 44 পরররশষট ৩ 45
3
HTMLXHTML এর পরররিরি
এই ডকরমনটরট Interactive Media Center এর অনলাইন রটউরটাররোল Introduction to HTMLXHTML এর রবিরণর াগয সংসকরন এরট পাওো ারব এখারন httplibraryalbanyeduimchtml_tut
HTMLXHTML এর সমপরকে
HTML (Hyper Text Markup Language) এবং এর সামপররিক রপ XHTML (Extensible Hyper Text Markup Language) হরে রনরমেি সকল ওরেব পািার মল রভরি রিও নিন ধররণর ি রি এবং বকারডংরের অপশন আরছ ব মন PHP ASP XML ও অনয রকছ িথারপ টরযারডশনাল মাকেআপ লযাঙগরেজ হরে বস ােগা ব খান বথরক ldquoসকল ওরেবrdquo শর হে
বিেমান সমরে HTML এর সবেরশষ সংসকরণ হরে ldquoHTML5rdquo এবং রিও এরিারিন এরট অরফরসোরল আরসরন রকছরিন হরলা এরট অরফরসোরল বযবহি হরে বরাউজাররর িরিরট হালনাগারি আররা ববরশ করর HTML5 কষমিা ি হরে এই রটউরটাররোরল আমরা HTML XHTML এবং HTML5 এর ববশ রকছ রবষে রনরে আরলািনা কররবা ববরশরভাগ বকষরিই এই রিনটরটর মরধয বিমন বকারনা পাথেকয বনই রিও খন িরকার পড়রব িখন পররবিেনগরলা বনাট করা হরব
রকছ ওরেব সমপািনার সফটওোররর িকাশকরা বরলন ব ওরেব পািা তিররর জনয আপরন রি িারির বিাগরাাম বযবহার কররন িরব HTML জানা জররী নে রিও সকল বকষরি এরট সরিক নে িাে সকল বকষরিই HTML সমপরকে রকছটা জঞান অনতিঃ িরকারী
এই রটউরটাররোরল ববরসক HTML বকাড বলখার বযপারর আমরা আপনারক গাইড কররবা এটা বজরন রাখা জররী ব রনরজ রলরখ ও বযবহার করার বিরে অনয বকারনা উপারে বকাড বশখা ও বঝা াে না এই রটউরটাররেোল আপনারক বকাড সমপরকে জঞান বরি করার পরথ একধাপ এরগরে রনরে ারব
কলারকৌশল
অরনক বলাক এমন ভারব ওরেব পািার বকাড রলখরি বিষটা করর ব রনা িারা টামে বপপার রলখরছ িারা এরকবারর শর বথরক শর করর এবং তররখকভারব মাঝ হরে বশরষ িরল াে HTMLXHTML বকাড দই ধররণর টযাগ রিরে গরিি হে িারা হরলা করনটইনার টযাগ এবং রসরঙগল পাটে টযাগ ারক ldquoনন-করনটইনারrdquo টযাগও বরল
করনটইনার টযারগর শর ও বশষ অংশ থারক আর মারঝ িারক িার উপািান ব গরলা টযাগরট রনেনতরন করর একরট উিারণ হরলা এমন একরট টযাগ া বটকসটরক ববালড করর ltstronggtltstronggt এখারন ltstronggt হরলা শরর অংশ এবং ltstronggt হরলা বশরষর অংশ
4
আপরন রি এই বছাট বকাড অংশরট রলখরি িান িরব িা বিখরি এমন হরব ltstronggtThis is
boldltstronggt এবং বিখরবন ব টযারগর দই অংরশর বভিররর বলখারক ববালড রহরসরব বিখারে
রসরঙগল পাটে টযারগর একরট উিাহরণ হরে লাইন ববরক টযাগ ltbrgt া শধ একরট বটকসরটর লাইনরক রনরিেষট জােগাে থারমরে বিে এটা বযবহার করা হে ব বাকযরট থামারনা লাগরব িার বশরষর শরের পর
ওরেব পািাে ব রহি অরনক বকাড থাকরব িাই বকান টযাগরট বখালা বা বনধ আরছ িা মরন রাখা করিন হরে ারব সবরিরে ভারলা উপাে হরে একই সারথ টযারগর শর ও বশরষর অংশ রলরখ বফলা িারপর িার মধযকার রবষেবসত এরট টযাগ বনধ জরনি িরেটনাবশি রটা সমসযার িরিকার করর এবং এই রটউরটাররোরল এ পিরিই বযবহার করা হরেরছ
রসরঙগল পাটে টযাগ িরকাররর সমেই ি করা ারব
টল
সাধারণ ওোডে িরসসররই HTML এবং XHTML বকাড বলখা াে রকনত এটা মরন রাখা জররী ব বকাড বলখার জনয কখরনাই Word WordPerfect OpenOffice বা এধররণর বকারনা ওোডে িরসসর বযবহার করা ারব না ldquoহাই এনডrdquo ওোডে িরসসরগরলা এরিাই সমাটে ব িারা িারির রনজসব ফরমেরটর বকাড িরবশ করাে
বযবহার করার জনয সবরিরে ভারলা সফটওোর হরে এরকবারর সাধরণ HTML বলখার জনয সবরিরে উপ ি হরে NotePad রকছ বিাগরাাম শধমাি ওরেব পািা তিররর জনযই রবরশ ভারব রডজাইন করা হরেরছ ব মন
Dreamweaver এ HTML বলখার জনয রবরশষ ফাংশন আরছ া আপনারক বসাজা বকাড রলখরি বিে HTMLKit এর মরিা রকছ বিাগরাাম আরছ া code insertion বিাগরাাম রহরসরব কাজ করর ব খারন বযবহারকারীরক বকাড রলখরি হেনা িার বিরল বিাগরাামরক HTMLXHTML বলক িরবশ করারি রনরিেশ করর রিও এই বিাগরাামগরল বকাড বলখা সহজ করর রিরেরছ িথারপ বকাড জানাও জররী
এই রটউরটাররোরল আমরা আপনারক NotePad এই ধররণর বিাগরাাম বযবহার কররি পরামশে বিরবা
ওরেব বনাম রিনট
আমরা জারন ব একই সারথ কাজ করা এবং অনলাইরন উিাহরণ অনসরণ করা করিন িাই আমারির এই রটউরটাররোরলর একরট রিরনটড সংসকরণও আরছ া এখান বথরক ডাউনরলাড কররি পাররন িারপর আপরন রিরনটড সংসকরণ পড়রি পাররন এবং করমপউটারর ধাপগরল সমপািন কররি পাররন
শর হরে
আপনার ওরেব িরজকট শর করার জনয আপনার সাইটরট সরিকভারব বসটাপ কররি হরব সাইরটর গিন এরকবারর সহজ আপনার িরজরকটর একরট ldquoরট বফালডারrdquo থাকরব ব টারি সাইটরট সমপরকেি সকল ফাইল থাকরব রট বফালডাররর বভিরর
5
( ারক আসরল ব ldquoরটrdquo ই বলরি হরব িা নে আপনার ইোমরিা নাম রিরি পাররন) রনরিেষট ধররণর ফাইরলর জনয আলািা সাব-রফালডার থাকরব ব রহি ওরেব পািার HTML ফাইলগরল রট বফালডারর হারররে ব রি পারর িাই আমরা ছরবগরলা images বফালডারর PDF ফাইল PDF বফালডারর এমন করর সবগরলা সারজরে রাখরবা ডারনর ডাোগরাারম রিনরট HTML পািা এবং দইরট সাব বফালডার সমবরলি একরট টযানডাডে ওরেব সাইরটর গিন বিখারনা হরলা
রট এবং িরোজনীে সাব বফালডার সহ আপরন আপনার করমপউটারর খন আপনার সাইটরট বসটাপ কররবন সারথ সারথই আপরন আপনার িথম ওরেব পািা তিরর শর কররি পাররন মরন করন এটা আপনার বহামরপজ হরব রি অনয বকারনা রনরিেশনা না বিো থারক িরব আপনার বহামরপরজর নাম রনরির একরট হরব
indexhtm
indexhtml
defaulthtm
defaulthtml
থা থ নামরট আপনার সাইরটর বহাট সাভোররর পররিালক ওরেব মাটার কিেক রনধোররি হরব ববরশরভাগ ওরেব সাভোররর নারমর একরট িারলকা থারক খন একজন সাইরটর রভরজটর িার বরাউজারর একরট ওরেব সাইরটর URL টাইপ করর িখন বরাউজাররটরক বহাট সাভোরর পািারনা হে বহাট সাভোররট িখন সবেংরিেভারব রলরটর িম অনসারর বহামরপজ খরজ এবং িা পাওো মািই এরট ও এটার সারথ সংরিষট সকল ফাইল রভরজটররর করমপউটারর বিরণ করর বসখান বথরক বরাউজার িারপর রিরন একি করর
রি সাভোর HTML ফাইরলর সংগরাহ বথরক শরর বহামরপরজর নাম খরজ না পাে িরব সবেংরিেভারব রিিীে নারমর ফাইল খরজ রি িাও না পাে িরব িিীে নাম এবং এভারব বাকী গরলা িাই আপনার উরিি শরর নারমর একরট ফাইল নাম বিো ারি ফাইল খজরি রগরে আপনার বহাট সাভোররর সমে নষট না হে
NotePad ( বা আপরন ব বিাগরাাম বযবহার কররি িান) এ একরট নিন ডকরমনট খলন এবং িারপর রট বফালডারর উপররর ব রকারনা একরট নারম বহামরপজরট সংরকষণ করন
ববরসক বকাড বসট করা
একরট ওরেব পািা দই অংরশ রবভি বহড এবং বরড বহড এর মরধয বপরজর িথয থারক ব মন বমটা টযাগ কখন এরট বানারনা হরেরছ এবং বকারডর রবসতাররি রববরণ বরডরি থারক িাই া আপরন পািাে বিখরি পান বহরডর মধযকার ডাটা বিখা াে না রিও বরডরি ldquoরজরনসগরলrdquo বকমন বিখারব িার রনরিেশনা এরি থাকরি পারর বহড এবং বরড সহ সকল টযাগ lthtmlgtlthtmlgt টযারগর মরধয থারক ারক ldquoপরম করনটইনারrdquo টযাগ বলা হে ব রট বরাউজাররক বরল ব এর মরধয া রকছ আরছ িা একরট ওরেব পািা
ডান রিরক বিখারনার মরিা করর HTML টযারগর শর এবং বশষ অংশ lthtmlgtlthtmlgt রলখন
lthtmlgt
lthtmlgt
6
এখন HTML পািার জনয বহড টযারগর শর এবং বশষ অংশ রলখন ারি িা ডারনর উিাহররণর মরিা বিখা াে
িারন এখন বরড টযাগ ব াগ করন
ফাইল সংরকষণ করন
এখন আপনার ওরেব পািাে রকছ বলখা ব াগ করন ারি পরীকষা করার সমে আপরন িা বিখরি পাররন এটা অবশযই বরডর মরধয রলখরি হরব বরড টযারগর শর এবং বশষ অংরশর মারঝ
এখন আপনার ওরেব বরাউজার িাল করন এটা হরি পারর Internet Explorer Firefox
Mozilla Safari Opera বা আপনার া পছনদ আপনার নিন ওরেব পািারট খলন এবং ফাইলরট বিখন ববরশরভাগ বরাউজারর আপনারক এভারব ফাইলরট খলরি হরব File এ রিক করর Open ( বা Open File) এ রিক করন িারপর আপনার সংররকষি ফাইলরটরি রগরে OK রিক করন
lthtmlgt
ltheadgt
ltheadgt
lthtmlgt
lthtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
lthtmlgt
ltheadgt
ltheadgt
ltbodygt
This is my first Web
page
ltbodygt
lthtmlgt
7
আপনার পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এখন আপনার ওরেব পািার বহড অংরশ রকছ িথয ব াগ করন ারি িা আপনার রভরজটররর জনয উপকারী হে
বহড টযারগর মরধয title টযাগ ব াগ করন এবং আপনার ওরেব পািার একরট রশররানাম রিন রশররানামরট ফাইরলর নাম নে বরং এরট বরাউজাররর উপররর বারর বিখা ারব এবং রভরজটর বকান পািাে আরছ িা রিরিি করর পািারট রকরসর সমপরকে িা রনধোরন কররি সািে ইরিন িা বযবহার করর
পািারট সংরকষন করর আবার বিখন বরাউজাররর এরকবারর উপররর বারর পািার রশররানামরট বিখরি পাররবন
বনাট িরিবার সংররকষি পািারট বিখার জনয বারবার FilegtOpen ইিযারি করা লাগরব না শধ পািারট সংররকষি হরেরছ রকনা িা রনরিি হরে বরাউজাররর Refresh বা Reload বাটরন রিক করন (রকান বরাউজার বযবহার কররছন িার উপর রনভের করর)
বটকসট ব াগ এবং ফরমেট করা পরবিেী ধাপ সমরহ আপরন বিখরবন কী করর আপনার ওরেব পািাে বটকসট ব াগ কররি পাররন এবং িা বিখার জনয ফরমেট কররি পাররন আপনার ওরেব পািার বরডরি একরট পযারাগরাাফ টযাগ ব াগ করর শর করন ডারন বকাডরট বিখারনা হরলা
পযারাগরাাফ হরে অনযিম একরট উপািান া রিরিি করার জনয HTML রডজাইন করা হরেরছ বিখন পযারাগরাাফরট p টযাগ িারা রনরিেরশি হরে ltpgtltpgt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
This is my first Web
page
ltbodygt
lthtmlgt
8
বনাট এই বটকসরট রক ডারনর উিাহররনর বলখারক এর িথম দরট শে অন ােী Lorem Ipsum বলা হে এরট একরট িযারসকাল লযারটন রিনা া রনেরমি রিনটার গরাারফক আরটেট এবং ওরেব রডজাইনার কিেক ldquoডারমrdquo বটকসট রহরসরব বযবহি হে রডজাইন ওরেব পািা রকংবা রিনটকি বররসউর এর নমনা বিখারি ব রহি বটকসরট English এ আরছ এবং ববরশরভাগ বলাক লযারটন পড়রি পারর না িাই রডজাইন বকমন বিখারব িার জনয এরট বযবহার করা হে সারথ সারথ রক বলখা আরছ িার রিক বথরক মনর াগ সরাে Lorem Ipsum এর ভারলা একরট উৎস হরে এর ওরেব সাইট httpwwwlipsumcom ব খারন এরট সমপরকে আররা জানরি পাররবন এবং নমনা করপ কররি পাররবন এই রটউরটাররোরলর জনয আপনারক Lorem Ipsum বযবহার কররি হরব না আপনার া ইো িাই টাইপ কররি পাররবন
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtLorem ipsum dolor
sit
amet consectetur
adipisicing
elit sed do eiusmod
tempor
incididunt ut labore et
dolore
magna aliqua Ut enim
ad
minim veniam quis
nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea
commodo
consequat Duis aute
irure dolor
in reprehenderit in
voluptate
velit esse cillum
dolore eu
fugiat nulla pariatur
Excepteur
sint occaecat cupidatat
non
proident sunt in culpa
qui
officia deserunt mollit
anim id
est laborumltpgt
ltbodygt
lthtmlgt
9
বকারনা সরনদহ বনই ব রক করর করনটইনার টযাগগরলা ফরমের করা হে িার পযাটানে আপরন লকষয করররছন করনটইনার টযারগর বশরষর অংরশ সবেিা একরট সামরন বহলারনা সলযাস থাকরব এই সলযাসরটই আপনার বরাউজাররক বরল ব টযাগরট এখারনই বশষ এবং বনধ করা হরেরছ
িলন পযারাগরাাফরটর িথম রকছ শে ববালড করর আপনার বটকসটরক আররকট ফরমেট করা াক ডারনর মরিা করর strong টযাগ ব াগ করন বরাউজারর বিখারনার সমে এরট বকমন বিখারে পাইলরট সংরকষন করর িা আপনার বরাউজারর বিখন
বখোল করন শধমাি strong টযারগর মরধয থাকা শেগরলাই ববালড রহরসরব বিখারে রিক এভারবই করনটইনার টযাগগরলা কাজ করর
বটকসটরক ইিারলক করর বিখারনার জনয আররকরট করনটইনার টযাগ আরছ এটা হরলা ltemgtltemgt ববালড করা অংশ বারি বটকসরটর অনয অংরশ এই টযাগরট িরোগ করর বিখন কীভারব কররি হরব িা ডারনর উিাহররণ বিো হরলা
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpltstronggtLorem ipsum
dolorltstronggt sit amet
consectetur adipisicing
elit sed
do eiusmod tempor
incididunt
ut labore et dolore magna
aliqua Ut enim ad minim
veniam quis nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea commodo
consequatltpgt
ltbodygt
lthtmlgt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtltstronggtLorem ipsum
dolorltstronggt sit amet
consectetur
ltemgtadipisicing
elitltemgt sed do eiusmod
tempor incididunt ut
labore et
dolore magna aliqua Ut
enim
ad minim veniam quis
nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea commodo
consequatltpgt
ltbodygt
lthtmlgt
10
বনরটং টযাগ
একরট বলখাংশ বা অনয বকারনা বসতরি একারধক টযাগ িরোগ করা হরল বকান িরম িারির শর এবং বশষ অংশ আসরব িা বনরটং টযাগ িারা বঝারনা হে ব মন বটকসরটর বকারনা অংশ একই সারথ ববালড এবং ইিারলক হরি পারর strong এবং emphasis টযারগর সরিক বনরটং হরব রনরির মরিা
ltstronggtltemgtThis is bold and italicsltemgtltstronggt
strong টযাগরট ldquoবাইররrdquo ব খারন emphasis টযাগরট ldquoবভিররrdquo এবং বটকসরট আরছ মারঝ
আপরন টযাগগরলা এভারবও বনট কররি পাররিন
ltemgtltstronggtThis is bold and italicsltstronggtltemgt
ভলভারব বনট করা টযারগর বারহর-রভির-মারঝ িমরট থাকরব না ভলভারব বনট করা টযারগর একরট উিাহরণ হরে
ltstronggtltemgtThis is bold and italicsltstronggtltemgt
ওরেরবর আরগর রিরন ভলভারব বনট করা টযারগ সাধারণি বকারনা সমসযা কররিা না রকনত ব রহি ওোলেড ওোইড ওরেব তিরর হরে বগরছ িাই বরাউজারগরলারক একই টযানডারডে ি থাকা জররী হরে পড়রছ
বিেমারনর XHTML HTML এর আররা থা থ সংসকরণ রহরসরব বরণেি হরেরছ অরনক বকষরিই এরট সরিক XHTML এর রনেম সরিক বনরটং টযাগ বলখা এবং অনযানয গরতবপণে রবষে রনরিেষট করর আধরনক বরাউজারগরলা এই সকল রনেম ররনষঠভারব বমরন িরল রি আপনার বকাড সরিকভারব XHTML এর রনেম বমরন না িরল িরব িা মরনটরর সরিকভারব নাও বিখারি পারর
HTML এবং XHTML এর রনেম সমপরকে আররা জানরি World Wide Web Consortium এর ওরেব সাইট wwww3xorg রভরজট করন এই সংসথারট ওরেব সংরিষট সকল রজরনরসর মান রনধোরণ করর
অযাডভানসড বটকস ফরমেরটং
বটকসট ববালড এবং ইিারলক করার সারথ সারথ HTML বযবহার করর আররা উননি উপারে িার সজজা পররবিেন করা াে এর মরধয বলখাে রং বিো ফনট রনেনতরন এবং বলখার সাইজ পররবিেন করা ারব
ফনট টযাগ ltfontgtltfontgt এর মাধযরম ফরনটর উপসথাপনা রনেনতরন করা হে ডারনর উিাহররণ ফরনটর সাইজ ৩ রনরিেষট করা আরছ ফরনটর সাইজ ১ বথরক ৭ এর মরধয রনরিেষট করা াে ব খারন ১ সবরিরে বছাট এবং ৭ সবরিরে বড়
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtltfont size=3gtThis
text is
font size 3ltfontgtltpgt
ltbodygt
lthtmlgt
11
রডফলট সাইজ হরে ৩ ববরশরভাগ বকষরিই অরধকাংশ বরাউজার ldquoসাধরণিrdquo এই সাইজরটই বিখাে
আপরন ফরনটর সাইরজর মান ১ বথরক ৭ প েনত করর বিখরি পাররন রনরির িারলকাে সবগরলা সাইরজ বটকসট বকমন বিখারব িা বিখারনা হরলা মরন রাখন ফরনটর সরিক সাইজ অরনক রবষরের উপর রনরভর করর ব মন আপনার মরনটর রিরনর সাইজ
Font size 1
Font size 2
Font size 3
Font size 4
Font size 5
Font size 6
Font size 7
বরাউজাররর বসরটংস অন ােীও ফরনটর সাইজ রনরিেষট করা াে ফনট সাইজ অযারটররবউরট + বা - রিরে এরট করা হে ডারনর উিাহররন ফরনটর সাইজ +২ বযবহার করা হরেরছ এর মারন হরে বরাউজাররর রডফলট সাইজ বথরক ২ সাইজ বড় করর ফনটরট বিখারব
HTML এর রনেম অন ােী এই ফনট সাইজগরলা রভরজটররর বরাউজাররর বসরটংসরক অগরাাহয কররব অনয কথাে আপনার ওরেব পািার রভরজটর রি িার বরাউজাররর ফনট বসরটংসরক কারটামাইজ করর িরব ফনট টযারগ বযবহি সাইজ অযরটররবউট বসটার ldquoরনরজর মরিাrdquo করে রনরে বনে এবং আপনার মরিা কররই বলখারট বিখারব
িাহরল + বা - আসরল রক বলা ারব না কারণ িরিরট বরাউজাররর রডফলট ফনট সাইজ এরকক রকম হরব এবং বটকসট বিখরি বকমন হরব িা রনণেে করা সমভব নে কারণ এরট বমরশন বথরক বমরশরন পররবরিেি হে রনরির উিাহরণরট আপনারক রকছটা ধারণা বিরব রকনত আসরল এরট বকমন বিখারব িা বিখরি আপরন পািারট অনয বমরশরন অনয বরাউজার বসরটংসএ বিখরি পাররন
12
This Font size +1
This Font size +2
This Font size +3
This Font size +4
This Font size +5
This Font size +6
This Font size +7
This is font size -1
This is font size -2
This is font size -3
This is font size -4
This is font size -5
This is font size -6
This is font size -7
এরট সমভব ব উপররর উিাহররণর মরধয ববশ রকছ বিখরি একই রকম লাগরছ এর কারন রকছ বরাউজারর বড় বা বছাট ফনট বিখারনার একরট সীমাররখা বটরন বিে পড়া ােনা এমন বটকসট তিররর বকারনা মারনই হেনা এটা হরি পারর ওরনক বড় রকংবা অরনক বছাট হরল
বটকসট ফরমেট করার আররকরট উপাে হরে রং এর বযবহার রং িার নাম অনসারর রনরিেষট করা াে ব মন red blue বা ForestGreen RGB ( Red Green Blue) মান বযবহার কররও িারির রনধোরণ করা াে ওরেরব রংরক সবরিরে সাধারণ ভারব বযবহার করার উপাে হরে িারির বহকসারডরসরমল মান বযবহার করা িরিযক পিরির উিাহরণ রনরি বিো হরলা
ltfont color=redgtThis is red specified as a color nameltfontgt
ltfont color=25500gtThis is red specified as an RGB valueltfontgt
ltfont color=ff0000gtThis is red specified in hexadecimalltfontgt
13
রং এবং ওরেব
ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে
রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব
ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল
bull Color and the Web
(httplibraryalbanyeduimcwebcolorindexhtm) the
Interactive Media Centers online tutorial
bull Browser Safe Color Chart
(httplibraryalbanyeduimcwebcolorshtm) online chart
of Web safe colors from the Interactive Media Center
bull Color Names Chart
(httpwwww3schoolscomhtmlhtml_colornamesasp) online
chart from the W3 Schools
bull The Browser Safe Color Pallet
(httpwwwlyndacomhexasp) online guide from Lynda
Weinman
বহরডং
ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক
বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে
মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব
I Introduction
A Welcome
II Main Message
A Part 1 - What I did on my summer vacation
1 Getting to the airport
2 Flying on the airplane
a Visiting Alaska
14
b Seeing a bear
3 Flying home
B Summing my vacation
III Conclusion
এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত
বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল
lth1gtThis is heading H1lth1gt
খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব
এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lth1gtThis is an example
of the
h1 taglth1gt
ltbodygt lthtmlgt
15
রলট
রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন
রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল
1 Dinner at 800 pm 2 Lunch at noon
3 Snacks at 1100 am
এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltolgt
ltligtDinner at 800 pmltligt
ltligtLunch at noonltligt
ltligtSnacks at 1100 amltligt
ltolgt
মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব
অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল
bull Apples
bull Oranges
bull grapes
এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltulgt
ltligtApplesltligt
ltligtOrangesltligt
ltligtgrapesltligt
ltulgt
16
আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব
উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর
উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস
রলংক
রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর
দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ
এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল
এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা
lta href=httpwwwalbanyedugtLink to UAlbanyltagt
বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল
lta
href=httpwwwalbanyeducommunicationindexhtmlgtLink
to the Communication Department home page ltagt
এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড
17
ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml
এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন
রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব
lta href=page4htmlgtPrevious Pageltagt
এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না
anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে
lta name=topgtltagt
আর এটারি রলঙক করার জনয
lta href=topgtGo to the top of this pageltagt
ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন
বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব
আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে
lta href=page5htmltopgtTop of Page 5ltagt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lta name=topgtltagt
ltpgtWelcome to my Web
page
You can go to the top of
the
page by lta href=topgtby
clicking hereltagtltpgt
ltbodygt
lthtmlgt
18
বলআউট এবং বটরবল
ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব
ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign
ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে
ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব
বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা
টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ
19
ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয
ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন
বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে
বটরবল টযাগ - lttablegtlttablegt
বটরবল বরা টযাগ - lttrgtlttrgt
বটরবল বসল টযাগ - lttdgtlttdgt
রনরি একরট সাধারণ বটরবল বিখারনা হরলা
এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা
lttablegtlttablegt
বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা
lttablegt
lttablegt
20
এখন আমরা িথম বটরবল বরা টযাগ ি কররবা
lttablegt
lttrgtlttrgt
lttablegt
িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরট এরকম করর তিরর হরব
রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরটর গিন এমন হরব
বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব
lttable border=1gt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন
21
উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না
এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা
Text Object
Text Object
বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন
বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo
nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে
বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom
nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব
Text Object
Text Object
22
আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব
আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব
lttable border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ
lttable width=300 border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে
অযাডভানসড বটরবল ফরমেট
বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন
বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ
এরি বকারনা Cell padding বনই
এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ
23
রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে
lttable width=284 border=1 cellspacing=0 cellpad-
ding=10gt
lttrgt
lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt
lttablegt
Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন
আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল
বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব
cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক
cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ
24
cell padding ৮ রপরকসল
বটরবল বডোর ৪ রপরকসল
cell spacing ১০ রপরকসল
বটরবল ৩০০ রপরকসল িওড়া
এই বটরবরলর বকাড হরে
lttable width=300 border=4 cellspacing=10 cellpad-
ding=8gt
lttrgt
lttdgtCell Padding 8 pixelslttdgt
lttdgtTable borders are 4 pixelslttdgt
lttrgt
lttrgt
lttdgtCell spacing is 10 pixelslttdgt
lttdgtThe table is 300 pixels widelttdgt
lttrgt
lttablegt
বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা
বটরবরল রিন ভারব রং ব াগ করা াে
1 বটরবরলর বযাকগরাাউনড রং
2 বসরলর বযাকগরাাউনড রং
3 বডোররর রং
রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
3
HTMLXHTML এর পরররিরি
এই ডকরমনটরট Interactive Media Center এর অনলাইন রটউরটাররোল Introduction to HTMLXHTML এর রবিরণর াগয সংসকরন এরট পাওো ারব এখারন httplibraryalbanyeduimchtml_tut
HTMLXHTML এর সমপরকে
HTML (Hyper Text Markup Language) এবং এর সামপররিক রপ XHTML (Extensible Hyper Text Markup Language) হরে রনরমেি সকল ওরেব পািার মল রভরি রিও নিন ধররণর ি রি এবং বকারডংরের অপশন আরছ ব মন PHP ASP XML ও অনয রকছ িথারপ টরযারডশনাল মাকেআপ লযাঙগরেজ হরে বস ােগা ব খান বথরক ldquoসকল ওরেবrdquo শর হে
বিেমান সমরে HTML এর সবেরশষ সংসকরণ হরে ldquoHTML5rdquo এবং রিও এরিারিন এরট অরফরসোরল আরসরন রকছরিন হরলা এরট অরফরসোরল বযবহি হরে বরাউজাররর িরিরট হালনাগারি আররা ববরশ করর HTML5 কষমিা ি হরে এই রটউরটাররোরল আমরা HTML XHTML এবং HTML5 এর ববশ রকছ রবষে রনরে আরলািনা কররবা ববরশরভাগ বকষরিই এই রিনটরটর মরধয বিমন বকারনা পাথেকয বনই রিও খন িরকার পড়রব িখন পররবিেনগরলা বনাট করা হরব
রকছ ওরেব সমপািনার সফটওোররর িকাশকরা বরলন ব ওরেব পািা তিররর জনয আপরন রি িারির বিাগরাাম বযবহার কররন িরব HTML জানা জররী নে রিও সকল বকষরি এরট সরিক নে িাে সকল বকষরিই HTML সমপরকে রকছটা জঞান অনতিঃ িরকারী
এই রটউরটাররোরল ববরসক HTML বকাড বলখার বযপারর আমরা আপনারক গাইড কররবা এটা বজরন রাখা জররী ব রনরজ রলরখ ও বযবহার করার বিরে অনয বকারনা উপারে বকাড বশখা ও বঝা াে না এই রটউরটাররেোল আপনারক বকাড সমপরকে জঞান বরি করার পরথ একধাপ এরগরে রনরে ারব
কলারকৌশল
অরনক বলাক এমন ভারব ওরেব পািার বকাড রলখরি বিষটা করর ব রনা িারা টামে বপপার রলখরছ িারা এরকবারর শর বথরক শর করর এবং তররখকভারব মাঝ হরে বশরষ িরল াে HTMLXHTML বকাড দই ধররণর টযাগ রিরে গরিি হে িারা হরলা করনটইনার টযাগ এবং রসরঙগল পাটে টযাগ ারক ldquoনন-করনটইনারrdquo টযাগও বরল
করনটইনার টযারগর শর ও বশষ অংশ থারক আর মারঝ িারক িার উপািান ব গরলা টযাগরট রনেনতরন করর একরট উিারণ হরলা এমন একরট টযাগ া বটকসটরক ববালড করর ltstronggtltstronggt এখারন ltstronggt হরলা শরর অংশ এবং ltstronggt হরলা বশরষর অংশ
4
আপরন রি এই বছাট বকাড অংশরট রলখরি িান িরব িা বিখরি এমন হরব ltstronggtThis is
boldltstronggt এবং বিখরবন ব টযারগর দই অংরশর বভিররর বলখারক ববালড রহরসরব বিখারে
রসরঙগল পাটে টযারগর একরট উিাহরণ হরে লাইন ববরক টযাগ ltbrgt া শধ একরট বটকসরটর লাইনরক রনরিেষট জােগাে থারমরে বিে এটা বযবহার করা হে ব বাকযরট থামারনা লাগরব িার বশরষর শরের পর
ওরেব পািাে ব রহি অরনক বকাড থাকরব িাই বকান টযাগরট বখালা বা বনধ আরছ িা মরন রাখা করিন হরে ারব সবরিরে ভারলা উপাে হরে একই সারথ টযারগর শর ও বশরষর অংশ রলরখ বফলা িারপর িার মধযকার রবষেবসত এরট টযাগ বনধ জরনি িরেটনাবশি রটা সমসযার িরিকার করর এবং এই রটউরটাররোরল এ পিরিই বযবহার করা হরেরছ
রসরঙগল পাটে টযাগ িরকাররর সমেই ি করা ারব
টল
সাধারণ ওোডে িরসসররই HTML এবং XHTML বকাড বলখা াে রকনত এটা মরন রাখা জররী ব বকাড বলখার জনয কখরনাই Word WordPerfect OpenOffice বা এধররণর বকারনা ওোডে িরসসর বযবহার করা ারব না ldquoহাই এনডrdquo ওোডে িরসসরগরলা এরিাই সমাটে ব িারা িারির রনজসব ফরমেরটর বকাড িরবশ করাে
বযবহার করার জনয সবরিরে ভারলা সফটওোর হরে এরকবারর সাধরণ HTML বলখার জনয সবরিরে উপ ি হরে NotePad রকছ বিাগরাাম শধমাি ওরেব পািা তিররর জনযই রবরশ ভারব রডজাইন করা হরেরছ ব মন
Dreamweaver এ HTML বলখার জনয রবরশষ ফাংশন আরছ া আপনারক বসাজা বকাড রলখরি বিে HTMLKit এর মরিা রকছ বিাগরাাম আরছ া code insertion বিাগরাাম রহরসরব কাজ করর ব খারন বযবহারকারীরক বকাড রলখরি হেনা িার বিরল বিাগরাামরক HTMLXHTML বলক িরবশ করারি রনরিেশ করর রিও এই বিাগরাামগরল বকাড বলখা সহজ করর রিরেরছ িথারপ বকাড জানাও জররী
এই রটউরটাররোরল আমরা আপনারক NotePad এই ধররণর বিাগরাাম বযবহার কররি পরামশে বিরবা
ওরেব বনাম রিনট
আমরা জারন ব একই সারথ কাজ করা এবং অনলাইরন উিাহরণ অনসরণ করা করিন িাই আমারির এই রটউরটাররোরলর একরট রিরনটড সংসকরণও আরছ া এখান বথরক ডাউনরলাড কররি পাররন িারপর আপরন রিরনটড সংসকরণ পড়রি পাররন এবং করমপউটারর ধাপগরল সমপািন কররি পাররন
শর হরে
আপনার ওরেব িরজকট শর করার জনয আপনার সাইটরট সরিকভারব বসটাপ কররি হরব সাইরটর গিন এরকবারর সহজ আপনার িরজরকটর একরট ldquoরট বফালডারrdquo থাকরব ব টারি সাইটরট সমপরকেি সকল ফাইল থাকরব রট বফালডাররর বভিরর
5
( ারক আসরল ব ldquoরটrdquo ই বলরি হরব িা নে আপনার ইোমরিা নাম রিরি পাররন) রনরিেষট ধররণর ফাইরলর জনয আলািা সাব-রফালডার থাকরব ব রহি ওরেব পািার HTML ফাইলগরল রট বফালডারর হারররে ব রি পারর িাই আমরা ছরবগরলা images বফালডারর PDF ফাইল PDF বফালডারর এমন করর সবগরলা সারজরে রাখরবা ডারনর ডাোগরাারম রিনরট HTML পািা এবং দইরট সাব বফালডার সমবরলি একরট টযানডাডে ওরেব সাইরটর গিন বিখারনা হরলা
রট এবং িরোজনীে সাব বফালডার সহ আপরন আপনার করমপউটারর খন আপনার সাইটরট বসটাপ কররবন সারথ সারথই আপরন আপনার িথম ওরেব পািা তিরর শর কররি পাররন মরন করন এটা আপনার বহামরপজ হরব রি অনয বকারনা রনরিেশনা না বিো থারক িরব আপনার বহামরপরজর নাম রনরির একরট হরব
indexhtm
indexhtml
defaulthtm
defaulthtml
থা থ নামরট আপনার সাইরটর বহাট সাভোররর পররিালক ওরেব মাটার কিেক রনধোররি হরব ববরশরভাগ ওরেব সাভোররর নারমর একরট িারলকা থারক খন একজন সাইরটর রভরজটর িার বরাউজারর একরট ওরেব সাইরটর URL টাইপ করর িখন বরাউজাররটরক বহাট সাভোরর পািারনা হে বহাট সাভোররট িখন সবেংরিেভারব রলরটর িম অনসারর বহামরপজ খরজ এবং িা পাওো মািই এরট ও এটার সারথ সংরিষট সকল ফাইল রভরজটররর করমপউটারর বিরণ করর বসখান বথরক বরাউজার িারপর রিরন একি করর
রি সাভোর HTML ফাইরলর সংগরাহ বথরক শরর বহামরপরজর নাম খরজ না পাে িরব সবেংরিেভারব রিিীে নারমর ফাইল খরজ রি িাও না পাে িরব িিীে নাম এবং এভারব বাকী গরলা িাই আপনার উরিি শরর নারমর একরট ফাইল নাম বিো ারি ফাইল খজরি রগরে আপনার বহাট সাভোররর সমে নষট না হে
NotePad ( বা আপরন ব বিাগরাাম বযবহার কররি িান) এ একরট নিন ডকরমনট খলন এবং িারপর রট বফালডারর উপররর ব রকারনা একরট নারম বহামরপজরট সংরকষণ করন
ববরসক বকাড বসট করা
একরট ওরেব পািা দই অংরশ রবভি বহড এবং বরড বহড এর মরধয বপরজর িথয থারক ব মন বমটা টযাগ কখন এরট বানারনা হরেরছ এবং বকারডর রবসতাররি রববরণ বরডরি থারক িাই া আপরন পািাে বিখরি পান বহরডর মধযকার ডাটা বিখা াে না রিও বরডরি ldquoরজরনসগরলrdquo বকমন বিখারব িার রনরিেশনা এরি থাকরি পারর বহড এবং বরড সহ সকল টযাগ lthtmlgtlthtmlgt টযারগর মরধয থারক ারক ldquoপরম করনটইনারrdquo টযাগ বলা হে ব রট বরাউজাররক বরল ব এর মরধয া রকছ আরছ িা একরট ওরেব পািা
ডান রিরক বিখারনার মরিা করর HTML টযারগর শর এবং বশষ অংশ lthtmlgtlthtmlgt রলখন
lthtmlgt
lthtmlgt
6
এখন HTML পািার জনয বহড টযারগর শর এবং বশষ অংশ রলখন ারি িা ডারনর উিাহররণর মরিা বিখা াে
িারন এখন বরড টযাগ ব াগ করন
ফাইল সংরকষণ করন
এখন আপনার ওরেব পািাে রকছ বলখা ব াগ করন ারি পরীকষা করার সমে আপরন িা বিখরি পাররন এটা অবশযই বরডর মরধয রলখরি হরব বরড টযারগর শর এবং বশষ অংরশর মারঝ
এখন আপনার ওরেব বরাউজার িাল করন এটা হরি পারর Internet Explorer Firefox
Mozilla Safari Opera বা আপনার া পছনদ আপনার নিন ওরেব পািারট খলন এবং ফাইলরট বিখন ববরশরভাগ বরাউজারর আপনারক এভারব ফাইলরট খলরি হরব File এ রিক করর Open ( বা Open File) এ রিক করন িারপর আপনার সংররকষি ফাইলরটরি রগরে OK রিক করন
lthtmlgt
ltheadgt
ltheadgt
lthtmlgt
lthtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
lthtmlgt
ltheadgt
ltheadgt
ltbodygt
This is my first Web
page
ltbodygt
lthtmlgt
7
আপনার পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এখন আপনার ওরেব পািার বহড অংরশ রকছ িথয ব াগ করন ারি িা আপনার রভরজটররর জনয উপকারী হে
বহড টযারগর মরধয title টযাগ ব াগ করন এবং আপনার ওরেব পািার একরট রশররানাম রিন রশররানামরট ফাইরলর নাম নে বরং এরট বরাউজাররর উপররর বারর বিখা ারব এবং রভরজটর বকান পািাে আরছ িা রিরিি করর পািারট রকরসর সমপরকে িা রনধোরন কররি সািে ইরিন িা বযবহার করর
পািারট সংরকষন করর আবার বিখন বরাউজাররর এরকবারর উপররর বারর পািার রশররানামরট বিখরি পাররবন
বনাট িরিবার সংররকষি পািারট বিখার জনয বারবার FilegtOpen ইিযারি করা লাগরব না শধ পািারট সংররকষি হরেরছ রকনা িা রনরিি হরে বরাউজাররর Refresh বা Reload বাটরন রিক করন (রকান বরাউজার বযবহার কররছন িার উপর রনভের করর)
বটকসট ব াগ এবং ফরমেট করা পরবিেী ধাপ সমরহ আপরন বিখরবন কী করর আপনার ওরেব পািাে বটকসট ব াগ কররি পাররন এবং িা বিখার জনয ফরমেট কররি পাররন আপনার ওরেব পািার বরডরি একরট পযারাগরাাফ টযাগ ব াগ করর শর করন ডারন বকাডরট বিখারনা হরলা
পযারাগরাাফ হরে অনযিম একরট উপািান া রিরিি করার জনয HTML রডজাইন করা হরেরছ বিখন পযারাগরাাফরট p টযাগ িারা রনরিেরশি হরে ltpgtltpgt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
This is my first Web
page
ltbodygt
lthtmlgt
8
বনাট এই বটকসরট রক ডারনর উিাহররনর বলখারক এর িথম দরট শে অন ােী Lorem Ipsum বলা হে এরট একরট িযারসকাল লযারটন রিনা া রনেরমি রিনটার গরাারফক আরটেট এবং ওরেব রডজাইনার কিেক ldquoডারমrdquo বটকসট রহরসরব বযবহি হে রডজাইন ওরেব পািা রকংবা রিনটকি বররসউর এর নমনা বিখারি ব রহি বটকসরট English এ আরছ এবং ববরশরভাগ বলাক লযারটন পড়রি পারর না িাই রডজাইন বকমন বিখারব িার জনয এরট বযবহার করা হে সারথ সারথ রক বলখা আরছ িার রিক বথরক মনর াগ সরাে Lorem Ipsum এর ভারলা একরট উৎস হরে এর ওরেব সাইট httpwwwlipsumcom ব খারন এরট সমপরকে আররা জানরি পাররবন এবং নমনা করপ কররি পাররবন এই রটউরটাররোরলর জনয আপনারক Lorem Ipsum বযবহার কররি হরব না আপনার া ইো িাই টাইপ কররি পাররবন
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtLorem ipsum dolor
sit
amet consectetur
adipisicing
elit sed do eiusmod
tempor
incididunt ut labore et
dolore
magna aliqua Ut enim
ad
minim veniam quis
nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea
commodo
consequat Duis aute
irure dolor
in reprehenderit in
voluptate
velit esse cillum
dolore eu
fugiat nulla pariatur
Excepteur
sint occaecat cupidatat
non
proident sunt in culpa
qui
officia deserunt mollit
anim id
est laborumltpgt
ltbodygt
lthtmlgt
9
বকারনা সরনদহ বনই ব রক করর করনটইনার টযাগগরলা ফরমের করা হে িার পযাটানে আপরন লকষয করররছন করনটইনার টযারগর বশরষর অংরশ সবেিা একরট সামরন বহলারনা সলযাস থাকরব এই সলযাসরটই আপনার বরাউজাররক বরল ব টযাগরট এখারনই বশষ এবং বনধ করা হরেরছ
িলন পযারাগরাাফরটর িথম রকছ শে ববালড করর আপনার বটকসটরক আররকট ফরমেট করা াক ডারনর মরিা করর strong টযাগ ব াগ করন বরাউজারর বিখারনার সমে এরট বকমন বিখারে পাইলরট সংরকষন করর িা আপনার বরাউজারর বিখন
বখোল করন শধমাি strong টযারগর মরধয থাকা শেগরলাই ববালড রহরসরব বিখারে রিক এভারবই করনটইনার টযাগগরলা কাজ করর
বটকসটরক ইিারলক করর বিখারনার জনয আররকরট করনটইনার টযাগ আরছ এটা হরলা ltemgtltemgt ববালড করা অংশ বারি বটকসরটর অনয অংরশ এই টযাগরট িরোগ করর বিখন কীভারব কররি হরব িা ডারনর উিাহররণ বিো হরলা
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpltstronggtLorem ipsum
dolorltstronggt sit amet
consectetur adipisicing
elit sed
do eiusmod tempor
incididunt
ut labore et dolore magna
aliqua Ut enim ad minim
veniam quis nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea commodo
consequatltpgt
ltbodygt
lthtmlgt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtltstronggtLorem ipsum
dolorltstronggt sit amet
consectetur
ltemgtadipisicing
elitltemgt sed do eiusmod
tempor incididunt ut
labore et
dolore magna aliqua Ut
enim
ad minim veniam quis
nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea commodo
consequatltpgt
ltbodygt
lthtmlgt
10
বনরটং টযাগ
একরট বলখাংশ বা অনয বকারনা বসতরি একারধক টযাগ িরোগ করা হরল বকান িরম িারির শর এবং বশষ অংশ আসরব িা বনরটং টযাগ িারা বঝারনা হে ব মন বটকসরটর বকারনা অংশ একই সারথ ববালড এবং ইিারলক হরি পারর strong এবং emphasis টযারগর সরিক বনরটং হরব রনরির মরিা
ltstronggtltemgtThis is bold and italicsltemgtltstronggt
strong টযাগরট ldquoবাইররrdquo ব খারন emphasis টযাগরট ldquoবভিররrdquo এবং বটকসরট আরছ মারঝ
আপরন টযাগগরলা এভারবও বনট কররি পাররিন
ltemgtltstronggtThis is bold and italicsltstronggtltemgt
ভলভারব বনট করা টযারগর বারহর-রভির-মারঝ িমরট থাকরব না ভলভারব বনট করা টযারগর একরট উিাহরণ হরে
ltstronggtltemgtThis is bold and italicsltstronggtltemgt
ওরেরবর আরগর রিরন ভলভারব বনট করা টযারগ সাধারণি বকারনা সমসযা কররিা না রকনত ব রহি ওোলেড ওোইড ওরেব তিরর হরে বগরছ িাই বরাউজারগরলারক একই টযানডারডে ি থাকা জররী হরে পড়রছ
বিেমারনর XHTML HTML এর আররা থা থ সংসকরণ রহরসরব বরণেি হরেরছ অরনক বকষরিই এরট সরিক XHTML এর রনেম সরিক বনরটং টযাগ বলখা এবং অনযানয গরতবপণে রবষে রনরিেষট করর আধরনক বরাউজারগরলা এই সকল রনেম ররনষঠভারব বমরন িরল রি আপনার বকাড সরিকভারব XHTML এর রনেম বমরন না িরল িরব িা মরনটরর সরিকভারব নাও বিখারি পারর
HTML এবং XHTML এর রনেম সমপরকে আররা জানরি World Wide Web Consortium এর ওরেব সাইট wwww3xorg রভরজট করন এই সংসথারট ওরেব সংরিষট সকল রজরনরসর মান রনধোরণ করর
অযাডভানসড বটকস ফরমেরটং
বটকসট ববালড এবং ইিারলক করার সারথ সারথ HTML বযবহার করর আররা উননি উপারে িার সজজা পররবিেন করা াে এর মরধয বলখাে রং বিো ফনট রনেনতরন এবং বলখার সাইজ পররবিেন করা ারব
ফনট টযাগ ltfontgtltfontgt এর মাধযরম ফরনটর উপসথাপনা রনেনতরন করা হে ডারনর উিাহররণ ফরনটর সাইজ ৩ রনরিেষট করা আরছ ফরনটর সাইজ ১ বথরক ৭ এর মরধয রনরিেষট করা াে ব খারন ১ সবরিরে বছাট এবং ৭ সবরিরে বড়
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtltfont size=3gtThis
text is
font size 3ltfontgtltpgt
ltbodygt
lthtmlgt
11
রডফলট সাইজ হরে ৩ ববরশরভাগ বকষরিই অরধকাংশ বরাউজার ldquoসাধরণিrdquo এই সাইজরটই বিখাে
আপরন ফরনটর সাইরজর মান ১ বথরক ৭ প েনত করর বিখরি পাররন রনরির িারলকাে সবগরলা সাইরজ বটকসট বকমন বিখারব িা বিখারনা হরলা মরন রাখন ফরনটর সরিক সাইজ অরনক রবষরের উপর রনরভর করর ব মন আপনার মরনটর রিরনর সাইজ
Font size 1
Font size 2
Font size 3
Font size 4
Font size 5
Font size 6
Font size 7
বরাউজাররর বসরটংস অন ােীও ফরনটর সাইজ রনরিেষট করা াে ফনট সাইজ অযারটররবউরট + বা - রিরে এরট করা হে ডারনর উিাহররন ফরনটর সাইজ +২ বযবহার করা হরেরছ এর মারন হরে বরাউজাররর রডফলট সাইজ বথরক ২ সাইজ বড় করর ফনটরট বিখারব
HTML এর রনেম অন ােী এই ফনট সাইজগরলা রভরজটররর বরাউজাররর বসরটংসরক অগরাাহয কররব অনয কথাে আপনার ওরেব পািার রভরজটর রি িার বরাউজাররর ফনট বসরটংসরক কারটামাইজ করর িরব ফনট টযারগ বযবহি সাইজ অযরটররবউট বসটার ldquoরনরজর মরিাrdquo করে রনরে বনে এবং আপনার মরিা কররই বলখারট বিখারব
িাহরল + বা - আসরল রক বলা ারব না কারণ িরিরট বরাউজাররর রডফলট ফনট সাইজ এরকক রকম হরব এবং বটকসট বিখরি বকমন হরব িা রনণেে করা সমভব নে কারণ এরট বমরশন বথরক বমরশরন পররবরিেি হে রনরির উিাহরণরট আপনারক রকছটা ধারণা বিরব রকনত আসরল এরট বকমন বিখারব িা বিখরি আপরন পািারট অনয বমরশরন অনয বরাউজার বসরটংসএ বিখরি পাররন
12
This Font size +1
This Font size +2
This Font size +3
This Font size +4
This Font size +5
This Font size +6
This Font size +7
This is font size -1
This is font size -2
This is font size -3
This is font size -4
This is font size -5
This is font size -6
This is font size -7
এরট সমভব ব উপররর উিাহররণর মরধয ববশ রকছ বিখরি একই রকম লাগরছ এর কারন রকছ বরাউজারর বড় বা বছাট ফনট বিখারনার একরট সীমাররখা বটরন বিে পড়া ােনা এমন বটকসট তিররর বকারনা মারনই হেনা এটা হরি পারর ওরনক বড় রকংবা অরনক বছাট হরল
বটকসট ফরমেট করার আররকরট উপাে হরে রং এর বযবহার রং িার নাম অনসারর রনরিেষট করা াে ব মন red blue বা ForestGreen RGB ( Red Green Blue) মান বযবহার কররও িারির রনধোরণ করা াে ওরেরব রংরক সবরিরে সাধারণ ভারব বযবহার করার উপাে হরে িারির বহকসারডরসরমল মান বযবহার করা িরিযক পিরির উিাহরণ রনরি বিো হরলা
ltfont color=redgtThis is red specified as a color nameltfontgt
ltfont color=25500gtThis is red specified as an RGB valueltfontgt
ltfont color=ff0000gtThis is red specified in hexadecimalltfontgt
13
রং এবং ওরেব
ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে
রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব
ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল
bull Color and the Web
(httplibraryalbanyeduimcwebcolorindexhtm) the
Interactive Media Centers online tutorial
bull Browser Safe Color Chart
(httplibraryalbanyeduimcwebcolorshtm) online chart
of Web safe colors from the Interactive Media Center
bull Color Names Chart
(httpwwww3schoolscomhtmlhtml_colornamesasp) online
chart from the W3 Schools
bull The Browser Safe Color Pallet
(httpwwwlyndacomhexasp) online guide from Lynda
Weinman
বহরডং
ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক
বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে
মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব
I Introduction
A Welcome
II Main Message
A Part 1 - What I did on my summer vacation
1 Getting to the airport
2 Flying on the airplane
a Visiting Alaska
14
b Seeing a bear
3 Flying home
B Summing my vacation
III Conclusion
এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত
বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল
lth1gtThis is heading H1lth1gt
খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব
এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lth1gtThis is an example
of the
h1 taglth1gt
ltbodygt lthtmlgt
15
রলট
রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন
রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল
1 Dinner at 800 pm 2 Lunch at noon
3 Snacks at 1100 am
এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltolgt
ltligtDinner at 800 pmltligt
ltligtLunch at noonltligt
ltligtSnacks at 1100 amltligt
ltolgt
মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব
অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল
bull Apples
bull Oranges
bull grapes
এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltulgt
ltligtApplesltligt
ltligtOrangesltligt
ltligtgrapesltligt
ltulgt
16
আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব
উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর
উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস
রলংক
রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর
দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ
এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল
এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা
lta href=httpwwwalbanyedugtLink to UAlbanyltagt
বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল
lta
href=httpwwwalbanyeducommunicationindexhtmlgtLink
to the Communication Department home page ltagt
এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড
17
ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml
এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন
রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব
lta href=page4htmlgtPrevious Pageltagt
এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না
anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে
lta name=topgtltagt
আর এটারি রলঙক করার জনয
lta href=topgtGo to the top of this pageltagt
ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন
বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব
আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে
lta href=page5htmltopgtTop of Page 5ltagt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lta name=topgtltagt
ltpgtWelcome to my Web
page
You can go to the top of
the
page by lta href=topgtby
clicking hereltagtltpgt
ltbodygt
lthtmlgt
18
বলআউট এবং বটরবল
ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব
ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign
ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে
ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব
বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা
টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ
19
ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয
ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন
বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে
বটরবল টযাগ - lttablegtlttablegt
বটরবল বরা টযাগ - lttrgtlttrgt
বটরবল বসল টযাগ - lttdgtlttdgt
রনরি একরট সাধারণ বটরবল বিখারনা হরলা
এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা
lttablegtlttablegt
বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা
lttablegt
lttablegt
20
এখন আমরা িথম বটরবল বরা টযাগ ি কররবা
lttablegt
lttrgtlttrgt
lttablegt
িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরট এরকম করর তিরর হরব
রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরটর গিন এমন হরব
বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব
lttable border=1gt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন
21
উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না
এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা
Text Object
Text Object
বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন
বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo
nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে
বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom
nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব
Text Object
Text Object
22
আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব
আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব
lttable border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ
lttable width=300 border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে
অযাডভানসড বটরবল ফরমেট
বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন
বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ
এরি বকারনা Cell padding বনই
এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ
23
রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে
lttable width=284 border=1 cellspacing=0 cellpad-
ding=10gt
lttrgt
lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt
lttablegt
Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন
আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল
বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব
cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক
cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ
24
cell padding ৮ রপরকসল
বটরবল বডোর ৪ রপরকসল
cell spacing ১০ রপরকসল
বটরবল ৩০০ রপরকসল িওড়া
এই বটরবরলর বকাড হরে
lttable width=300 border=4 cellspacing=10 cellpad-
ding=8gt
lttrgt
lttdgtCell Padding 8 pixelslttdgt
lttdgtTable borders are 4 pixelslttdgt
lttrgt
lttrgt
lttdgtCell spacing is 10 pixelslttdgt
lttdgtThe table is 300 pixels widelttdgt
lttrgt
lttablegt
বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা
বটরবরল রিন ভারব রং ব াগ করা াে
1 বটরবরলর বযাকগরাাউনড রং
2 বসরলর বযাকগরাাউনড রং
3 বডোররর রং
রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
4
আপরন রি এই বছাট বকাড অংশরট রলখরি িান িরব িা বিখরি এমন হরব ltstronggtThis is
boldltstronggt এবং বিখরবন ব টযারগর দই অংরশর বভিররর বলখারক ববালড রহরসরব বিখারে
রসরঙগল পাটে টযারগর একরট উিাহরণ হরে লাইন ববরক টযাগ ltbrgt া শধ একরট বটকসরটর লাইনরক রনরিেষট জােগাে থারমরে বিে এটা বযবহার করা হে ব বাকযরট থামারনা লাগরব িার বশরষর শরের পর
ওরেব পািাে ব রহি অরনক বকাড থাকরব িাই বকান টযাগরট বখালা বা বনধ আরছ িা মরন রাখা করিন হরে ারব সবরিরে ভারলা উপাে হরে একই সারথ টযারগর শর ও বশরষর অংশ রলরখ বফলা িারপর িার মধযকার রবষেবসত এরট টযাগ বনধ জরনি িরেটনাবশি রটা সমসযার িরিকার করর এবং এই রটউরটাররোরল এ পিরিই বযবহার করা হরেরছ
রসরঙগল পাটে টযাগ িরকাররর সমেই ি করা ারব
টল
সাধারণ ওোডে িরসসররই HTML এবং XHTML বকাড বলখা াে রকনত এটা মরন রাখা জররী ব বকাড বলখার জনয কখরনাই Word WordPerfect OpenOffice বা এধররণর বকারনা ওোডে িরসসর বযবহার করা ারব না ldquoহাই এনডrdquo ওোডে িরসসরগরলা এরিাই সমাটে ব িারা িারির রনজসব ফরমেরটর বকাড িরবশ করাে
বযবহার করার জনয সবরিরে ভারলা সফটওোর হরে এরকবারর সাধরণ HTML বলখার জনয সবরিরে উপ ি হরে NotePad রকছ বিাগরাাম শধমাি ওরেব পািা তিররর জনযই রবরশ ভারব রডজাইন করা হরেরছ ব মন
Dreamweaver এ HTML বলখার জনয রবরশষ ফাংশন আরছ া আপনারক বসাজা বকাড রলখরি বিে HTMLKit এর মরিা রকছ বিাগরাাম আরছ া code insertion বিাগরাাম রহরসরব কাজ করর ব খারন বযবহারকারীরক বকাড রলখরি হেনা িার বিরল বিাগরাামরক HTMLXHTML বলক িরবশ করারি রনরিেশ করর রিও এই বিাগরাামগরল বকাড বলখা সহজ করর রিরেরছ িথারপ বকাড জানাও জররী
এই রটউরটাররোরল আমরা আপনারক NotePad এই ধররণর বিাগরাাম বযবহার কররি পরামশে বিরবা
ওরেব বনাম রিনট
আমরা জারন ব একই সারথ কাজ করা এবং অনলাইরন উিাহরণ অনসরণ করা করিন িাই আমারির এই রটউরটাররোরলর একরট রিরনটড সংসকরণও আরছ া এখান বথরক ডাউনরলাড কররি পাররন িারপর আপরন রিরনটড সংসকরণ পড়রি পাররন এবং করমপউটারর ধাপগরল সমপািন কররি পাররন
শর হরে
আপনার ওরেব িরজকট শর করার জনয আপনার সাইটরট সরিকভারব বসটাপ কররি হরব সাইরটর গিন এরকবারর সহজ আপনার িরজরকটর একরট ldquoরট বফালডারrdquo থাকরব ব টারি সাইটরট সমপরকেি সকল ফাইল থাকরব রট বফালডাররর বভিরর
5
( ারক আসরল ব ldquoরটrdquo ই বলরি হরব িা নে আপনার ইোমরিা নাম রিরি পাররন) রনরিেষট ধররণর ফাইরলর জনয আলািা সাব-রফালডার থাকরব ব রহি ওরেব পািার HTML ফাইলগরল রট বফালডারর হারররে ব রি পারর িাই আমরা ছরবগরলা images বফালডারর PDF ফাইল PDF বফালডারর এমন করর সবগরলা সারজরে রাখরবা ডারনর ডাোগরাারম রিনরট HTML পািা এবং দইরট সাব বফালডার সমবরলি একরট টযানডাডে ওরেব সাইরটর গিন বিখারনা হরলা
রট এবং িরোজনীে সাব বফালডার সহ আপরন আপনার করমপউটারর খন আপনার সাইটরট বসটাপ কররবন সারথ সারথই আপরন আপনার িথম ওরেব পািা তিরর শর কররি পাররন মরন করন এটা আপনার বহামরপজ হরব রি অনয বকারনা রনরিেশনা না বিো থারক িরব আপনার বহামরপরজর নাম রনরির একরট হরব
indexhtm
indexhtml
defaulthtm
defaulthtml
থা থ নামরট আপনার সাইরটর বহাট সাভোররর পররিালক ওরেব মাটার কিেক রনধোররি হরব ববরশরভাগ ওরেব সাভোররর নারমর একরট িারলকা থারক খন একজন সাইরটর রভরজটর িার বরাউজারর একরট ওরেব সাইরটর URL টাইপ করর িখন বরাউজাররটরক বহাট সাভোরর পািারনা হে বহাট সাভোররট িখন সবেংরিেভারব রলরটর িম অনসারর বহামরপজ খরজ এবং িা পাওো মািই এরট ও এটার সারথ সংরিষট সকল ফাইল রভরজটররর করমপউটারর বিরণ করর বসখান বথরক বরাউজার িারপর রিরন একি করর
রি সাভোর HTML ফাইরলর সংগরাহ বথরক শরর বহামরপরজর নাম খরজ না পাে িরব সবেংরিেভারব রিিীে নারমর ফাইল খরজ রি িাও না পাে িরব িিীে নাম এবং এভারব বাকী গরলা িাই আপনার উরিি শরর নারমর একরট ফাইল নাম বিো ারি ফাইল খজরি রগরে আপনার বহাট সাভোররর সমে নষট না হে
NotePad ( বা আপরন ব বিাগরাাম বযবহার কররি িান) এ একরট নিন ডকরমনট খলন এবং িারপর রট বফালডারর উপররর ব রকারনা একরট নারম বহামরপজরট সংরকষণ করন
ববরসক বকাড বসট করা
একরট ওরেব পািা দই অংরশ রবভি বহড এবং বরড বহড এর মরধয বপরজর িথয থারক ব মন বমটা টযাগ কখন এরট বানারনা হরেরছ এবং বকারডর রবসতাররি রববরণ বরডরি থারক িাই া আপরন পািাে বিখরি পান বহরডর মধযকার ডাটা বিখা াে না রিও বরডরি ldquoরজরনসগরলrdquo বকমন বিখারব িার রনরিেশনা এরি থাকরি পারর বহড এবং বরড সহ সকল টযাগ lthtmlgtlthtmlgt টযারগর মরধয থারক ারক ldquoপরম করনটইনারrdquo টযাগ বলা হে ব রট বরাউজাররক বরল ব এর মরধয া রকছ আরছ িা একরট ওরেব পািা
ডান রিরক বিখারনার মরিা করর HTML টযারগর শর এবং বশষ অংশ lthtmlgtlthtmlgt রলখন
lthtmlgt
lthtmlgt
6
এখন HTML পািার জনয বহড টযারগর শর এবং বশষ অংশ রলখন ারি িা ডারনর উিাহররণর মরিা বিখা াে
িারন এখন বরড টযাগ ব াগ করন
ফাইল সংরকষণ করন
এখন আপনার ওরেব পািাে রকছ বলখা ব াগ করন ারি পরীকষা করার সমে আপরন িা বিখরি পাররন এটা অবশযই বরডর মরধয রলখরি হরব বরড টযারগর শর এবং বশষ অংরশর মারঝ
এখন আপনার ওরেব বরাউজার িাল করন এটা হরি পারর Internet Explorer Firefox
Mozilla Safari Opera বা আপনার া পছনদ আপনার নিন ওরেব পািারট খলন এবং ফাইলরট বিখন ববরশরভাগ বরাউজারর আপনারক এভারব ফাইলরট খলরি হরব File এ রিক করর Open ( বা Open File) এ রিক করন িারপর আপনার সংররকষি ফাইলরটরি রগরে OK রিক করন
lthtmlgt
ltheadgt
ltheadgt
lthtmlgt
lthtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
lthtmlgt
ltheadgt
ltheadgt
ltbodygt
This is my first Web
page
ltbodygt
lthtmlgt
7
আপনার পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এখন আপনার ওরেব পািার বহড অংরশ রকছ িথয ব াগ করন ারি িা আপনার রভরজটররর জনয উপকারী হে
বহড টযারগর মরধয title টযাগ ব াগ করন এবং আপনার ওরেব পািার একরট রশররানাম রিন রশররানামরট ফাইরলর নাম নে বরং এরট বরাউজাররর উপররর বারর বিখা ারব এবং রভরজটর বকান পািাে আরছ িা রিরিি করর পািারট রকরসর সমপরকে িা রনধোরন কররি সািে ইরিন িা বযবহার করর
পািারট সংরকষন করর আবার বিখন বরাউজাররর এরকবারর উপররর বারর পািার রশররানামরট বিখরি পাররবন
বনাট িরিবার সংররকষি পািারট বিখার জনয বারবার FilegtOpen ইিযারি করা লাগরব না শধ পািারট সংররকষি হরেরছ রকনা িা রনরিি হরে বরাউজাররর Refresh বা Reload বাটরন রিক করন (রকান বরাউজার বযবহার কররছন িার উপর রনভের করর)
বটকসট ব াগ এবং ফরমেট করা পরবিেী ধাপ সমরহ আপরন বিখরবন কী করর আপনার ওরেব পািাে বটকসট ব াগ কররি পাররন এবং িা বিখার জনয ফরমেট কররি পাররন আপনার ওরেব পািার বরডরি একরট পযারাগরাাফ টযাগ ব াগ করর শর করন ডারন বকাডরট বিখারনা হরলা
পযারাগরাাফ হরে অনযিম একরট উপািান া রিরিি করার জনয HTML রডজাইন করা হরেরছ বিখন পযারাগরাাফরট p টযাগ িারা রনরিেরশি হরে ltpgtltpgt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
This is my first Web
page
ltbodygt
lthtmlgt
8
বনাট এই বটকসরট রক ডারনর উিাহররনর বলখারক এর িথম দরট শে অন ােী Lorem Ipsum বলা হে এরট একরট িযারসকাল লযারটন রিনা া রনেরমি রিনটার গরাারফক আরটেট এবং ওরেব রডজাইনার কিেক ldquoডারমrdquo বটকসট রহরসরব বযবহি হে রডজাইন ওরেব পািা রকংবা রিনটকি বররসউর এর নমনা বিখারি ব রহি বটকসরট English এ আরছ এবং ববরশরভাগ বলাক লযারটন পড়রি পারর না িাই রডজাইন বকমন বিখারব িার জনয এরট বযবহার করা হে সারথ সারথ রক বলখা আরছ িার রিক বথরক মনর াগ সরাে Lorem Ipsum এর ভারলা একরট উৎস হরে এর ওরেব সাইট httpwwwlipsumcom ব খারন এরট সমপরকে আররা জানরি পাররবন এবং নমনা করপ কররি পাররবন এই রটউরটাররোরলর জনয আপনারক Lorem Ipsum বযবহার কররি হরব না আপনার া ইো িাই টাইপ কররি পাররবন
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtLorem ipsum dolor
sit
amet consectetur
adipisicing
elit sed do eiusmod
tempor
incididunt ut labore et
dolore
magna aliqua Ut enim
ad
minim veniam quis
nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea
commodo
consequat Duis aute
irure dolor
in reprehenderit in
voluptate
velit esse cillum
dolore eu
fugiat nulla pariatur
Excepteur
sint occaecat cupidatat
non
proident sunt in culpa
qui
officia deserunt mollit
anim id
est laborumltpgt
ltbodygt
lthtmlgt
9
বকারনা সরনদহ বনই ব রক করর করনটইনার টযাগগরলা ফরমের করা হে িার পযাটানে আপরন লকষয করররছন করনটইনার টযারগর বশরষর অংরশ সবেিা একরট সামরন বহলারনা সলযাস থাকরব এই সলযাসরটই আপনার বরাউজাররক বরল ব টযাগরট এখারনই বশষ এবং বনধ করা হরেরছ
িলন পযারাগরাাফরটর িথম রকছ শে ববালড করর আপনার বটকসটরক আররকট ফরমেট করা াক ডারনর মরিা করর strong টযাগ ব াগ করন বরাউজারর বিখারনার সমে এরট বকমন বিখারে পাইলরট সংরকষন করর িা আপনার বরাউজারর বিখন
বখোল করন শধমাি strong টযারগর মরধয থাকা শেগরলাই ববালড রহরসরব বিখারে রিক এভারবই করনটইনার টযাগগরলা কাজ করর
বটকসটরক ইিারলক করর বিখারনার জনয আররকরট করনটইনার টযাগ আরছ এটা হরলা ltemgtltemgt ববালড করা অংশ বারি বটকসরটর অনয অংরশ এই টযাগরট িরোগ করর বিখন কীভারব কররি হরব িা ডারনর উিাহররণ বিো হরলা
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpltstronggtLorem ipsum
dolorltstronggt sit amet
consectetur adipisicing
elit sed
do eiusmod tempor
incididunt
ut labore et dolore magna
aliqua Ut enim ad minim
veniam quis nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea commodo
consequatltpgt
ltbodygt
lthtmlgt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtltstronggtLorem ipsum
dolorltstronggt sit amet
consectetur
ltemgtadipisicing
elitltemgt sed do eiusmod
tempor incididunt ut
labore et
dolore magna aliqua Ut
enim
ad minim veniam quis
nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea commodo
consequatltpgt
ltbodygt
lthtmlgt
10
বনরটং টযাগ
একরট বলখাংশ বা অনয বকারনা বসতরি একারধক টযাগ িরোগ করা হরল বকান িরম িারির শর এবং বশষ অংশ আসরব িা বনরটং টযাগ িারা বঝারনা হে ব মন বটকসরটর বকারনা অংশ একই সারথ ববালড এবং ইিারলক হরি পারর strong এবং emphasis টযারগর সরিক বনরটং হরব রনরির মরিা
ltstronggtltemgtThis is bold and italicsltemgtltstronggt
strong টযাগরট ldquoবাইররrdquo ব খারন emphasis টযাগরট ldquoবভিররrdquo এবং বটকসরট আরছ মারঝ
আপরন টযাগগরলা এভারবও বনট কররি পাররিন
ltemgtltstronggtThis is bold and italicsltstronggtltemgt
ভলভারব বনট করা টযারগর বারহর-রভির-মারঝ িমরট থাকরব না ভলভারব বনট করা টযারগর একরট উিাহরণ হরে
ltstronggtltemgtThis is bold and italicsltstronggtltemgt
ওরেরবর আরগর রিরন ভলভারব বনট করা টযারগ সাধারণি বকারনা সমসযা কররিা না রকনত ব রহি ওোলেড ওোইড ওরেব তিরর হরে বগরছ িাই বরাউজারগরলারক একই টযানডারডে ি থাকা জররী হরে পড়রছ
বিেমারনর XHTML HTML এর আররা থা থ সংসকরণ রহরসরব বরণেি হরেরছ অরনক বকষরিই এরট সরিক XHTML এর রনেম সরিক বনরটং টযাগ বলখা এবং অনযানয গরতবপণে রবষে রনরিেষট করর আধরনক বরাউজারগরলা এই সকল রনেম ররনষঠভারব বমরন িরল রি আপনার বকাড সরিকভারব XHTML এর রনেম বমরন না িরল িরব িা মরনটরর সরিকভারব নাও বিখারি পারর
HTML এবং XHTML এর রনেম সমপরকে আররা জানরি World Wide Web Consortium এর ওরেব সাইট wwww3xorg রভরজট করন এই সংসথারট ওরেব সংরিষট সকল রজরনরসর মান রনধোরণ করর
অযাডভানসড বটকস ফরমেরটং
বটকসট ববালড এবং ইিারলক করার সারথ সারথ HTML বযবহার করর আররা উননি উপারে িার সজজা পররবিেন করা াে এর মরধয বলখাে রং বিো ফনট রনেনতরন এবং বলখার সাইজ পররবিেন করা ারব
ফনট টযাগ ltfontgtltfontgt এর মাধযরম ফরনটর উপসথাপনা রনেনতরন করা হে ডারনর উিাহররণ ফরনটর সাইজ ৩ রনরিেষট করা আরছ ফরনটর সাইজ ১ বথরক ৭ এর মরধয রনরিেষট করা াে ব খারন ১ সবরিরে বছাট এবং ৭ সবরিরে বড়
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtltfont size=3gtThis
text is
font size 3ltfontgtltpgt
ltbodygt
lthtmlgt
11
রডফলট সাইজ হরে ৩ ববরশরভাগ বকষরিই অরধকাংশ বরাউজার ldquoসাধরণিrdquo এই সাইজরটই বিখাে
আপরন ফরনটর সাইরজর মান ১ বথরক ৭ প েনত করর বিখরি পাররন রনরির িারলকাে সবগরলা সাইরজ বটকসট বকমন বিখারব িা বিখারনা হরলা মরন রাখন ফরনটর সরিক সাইজ অরনক রবষরের উপর রনরভর করর ব মন আপনার মরনটর রিরনর সাইজ
Font size 1
Font size 2
Font size 3
Font size 4
Font size 5
Font size 6
Font size 7
বরাউজাররর বসরটংস অন ােীও ফরনটর সাইজ রনরিেষট করা াে ফনট সাইজ অযারটররবউরট + বা - রিরে এরট করা হে ডারনর উিাহররন ফরনটর সাইজ +২ বযবহার করা হরেরছ এর মারন হরে বরাউজাররর রডফলট সাইজ বথরক ২ সাইজ বড় করর ফনটরট বিখারব
HTML এর রনেম অন ােী এই ফনট সাইজগরলা রভরজটররর বরাউজাররর বসরটংসরক অগরাাহয কররব অনয কথাে আপনার ওরেব পািার রভরজটর রি িার বরাউজাররর ফনট বসরটংসরক কারটামাইজ করর িরব ফনট টযারগ বযবহি সাইজ অযরটররবউট বসটার ldquoরনরজর মরিাrdquo করে রনরে বনে এবং আপনার মরিা কররই বলখারট বিখারব
িাহরল + বা - আসরল রক বলা ারব না কারণ িরিরট বরাউজাররর রডফলট ফনট সাইজ এরকক রকম হরব এবং বটকসট বিখরি বকমন হরব িা রনণেে করা সমভব নে কারণ এরট বমরশন বথরক বমরশরন পররবরিেি হে রনরির উিাহরণরট আপনারক রকছটা ধারণা বিরব রকনত আসরল এরট বকমন বিখারব িা বিখরি আপরন পািারট অনয বমরশরন অনয বরাউজার বসরটংসএ বিখরি পাররন
12
This Font size +1
This Font size +2
This Font size +3
This Font size +4
This Font size +5
This Font size +6
This Font size +7
This is font size -1
This is font size -2
This is font size -3
This is font size -4
This is font size -5
This is font size -6
This is font size -7
এরট সমভব ব উপররর উিাহররণর মরধয ববশ রকছ বিখরি একই রকম লাগরছ এর কারন রকছ বরাউজারর বড় বা বছাট ফনট বিখারনার একরট সীমাররখা বটরন বিে পড়া ােনা এমন বটকসট তিররর বকারনা মারনই হেনা এটা হরি পারর ওরনক বড় রকংবা অরনক বছাট হরল
বটকসট ফরমেট করার আররকরট উপাে হরে রং এর বযবহার রং িার নাম অনসারর রনরিেষট করা াে ব মন red blue বা ForestGreen RGB ( Red Green Blue) মান বযবহার কররও িারির রনধোরণ করা াে ওরেরব রংরক সবরিরে সাধারণ ভারব বযবহার করার উপাে হরে িারির বহকসারডরসরমল মান বযবহার করা িরিযক পিরির উিাহরণ রনরি বিো হরলা
ltfont color=redgtThis is red specified as a color nameltfontgt
ltfont color=25500gtThis is red specified as an RGB valueltfontgt
ltfont color=ff0000gtThis is red specified in hexadecimalltfontgt
13
রং এবং ওরেব
ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে
রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব
ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল
bull Color and the Web
(httplibraryalbanyeduimcwebcolorindexhtm) the
Interactive Media Centers online tutorial
bull Browser Safe Color Chart
(httplibraryalbanyeduimcwebcolorshtm) online chart
of Web safe colors from the Interactive Media Center
bull Color Names Chart
(httpwwww3schoolscomhtmlhtml_colornamesasp) online
chart from the W3 Schools
bull The Browser Safe Color Pallet
(httpwwwlyndacomhexasp) online guide from Lynda
Weinman
বহরডং
ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক
বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে
মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব
I Introduction
A Welcome
II Main Message
A Part 1 - What I did on my summer vacation
1 Getting to the airport
2 Flying on the airplane
a Visiting Alaska
14
b Seeing a bear
3 Flying home
B Summing my vacation
III Conclusion
এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত
বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল
lth1gtThis is heading H1lth1gt
খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব
এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lth1gtThis is an example
of the
h1 taglth1gt
ltbodygt lthtmlgt
15
রলট
রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন
রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল
1 Dinner at 800 pm 2 Lunch at noon
3 Snacks at 1100 am
এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltolgt
ltligtDinner at 800 pmltligt
ltligtLunch at noonltligt
ltligtSnacks at 1100 amltligt
ltolgt
মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব
অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল
bull Apples
bull Oranges
bull grapes
এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltulgt
ltligtApplesltligt
ltligtOrangesltligt
ltligtgrapesltligt
ltulgt
16
আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব
উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর
উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস
রলংক
রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর
দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ
এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল
এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা
lta href=httpwwwalbanyedugtLink to UAlbanyltagt
বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল
lta
href=httpwwwalbanyeducommunicationindexhtmlgtLink
to the Communication Department home page ltagt
এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড
17
ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml
এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন
রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব
lta href=page4htmlgtPrevious Pageltagt
এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না
anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে
lta name=topgtltagt
আর এটারি রলঙক করার জনয
lta href=topgtGo to the top of this pageltagt
ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন
বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব
আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে
lta href=page5htmltopgtTop of Page 5ltagt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lta name=topgtltagt
ltpgtWelcome to my Web
page
You can go to the top of
the
page by lta href=topgtby
clicking hereltagtltpgt
ltbodygt
lthtmlgt
18
বলআউট এবং বটরবল
ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব
ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign
ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে
ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব
বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা
টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ
19
ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয
ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন
বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে
বটরবল টযাগ - lttablegtlttablegt
বটরবল বরা টযাগ - lttrgtlttrgt
বটরবল বসল টযাগ - lttdgtlttdgt
রনরি একরট সাধারণ বটরবল বিখারনা হরলা
এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা
lttablegtlttablegt
বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা
lttablegt
lttablegt
20
এখন আমরা িথম বটরবল বরা টযাগ ি কররবা
lttablegt
lttrgtlttrgt
lttablegt
িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরট এরকম করর তিরর হরব
রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরটর গিন এমন হরব
বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব
lttable border=1gt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন
21
উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না
এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা
Text Object
Text Object
বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন
বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo
nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে
বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom
nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব
Text Object
Text Object
22
আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব
আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব
lttable border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ
lttable width=300 border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে
অযাডভানসড বটরবল ফরমেট
বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন
বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ
এরি বকারনা Cell padding বনই
এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ
23
রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে
lttable width=284 border=1 cellspacing=0 cellpad-
ding=10gt
lttrgt
lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt
lttablegt
Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন
আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল
বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব
cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক
cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ
24
cell padding ৮ রপরকসল
বটরবল বডোর ৪ রপরকসল
cell spacing ১০ রপরকসল
বটরবল ৩০০ রপরকসল িওড়া
এই বটরবরলর বকাড হরে
lttable width=300 border=4 cellspacing=10 cellpad-
ding=8gt
lttrgt
lttdgtCell Padding 8 pixelslttdgt
lttdgtTable borders are 4 pixelslttdgt
lttrgt
lttrgt
lttdgtCell spacing is 10 pixelslttdgt
lttdgtThe table is 300 pixels widelttdgt
lttrgt
lttablegt
বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা
বটরবরল রিন ভারব রং ব াগ করা াে
1 বটরবরলর বযাকগরাাউনড রং
2 বসরলর বযাকগরাাউনড রং
3 বডোররর রং
রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
5
( ারক আসরল ব ldquoরটrdquo ই বলরি হরব িা নে আপনার ইোমরিা নাম রিরি পাররন) রনরিেষট ধররণর ফাইরলর জনয আলািা সাব-রফালডার থাকরব ব রহি ওরেব পািার HTML ফাইলগরল রট বফালডারর হারররে ব রি পারর িাই আমরা ছরবগরলা images বফালডারর PDF ফাইল PDF বফালডারর এমন করর সবগরলা সারজরে রাখরবা ডারনর ডাোগরাারম রিনরট HTML পািা এবং দইরট সাব বফালডার সমবরলি একরট টযানডাডে ওরেব সাইরটর গিন বিখারনা হরলা
রট এবং িরোজনীে সাব বফালডার সহ আপরন আপনার করমপউটারর খন আপনার সাইটরট বসটাপ কররবন সারথ সারথই আপরন আপনার িথম ওরেব পািা তিরর শর কররি পাররন মরন করন এটা আপনার বহামরপজ হরব রি অনয বকারনা রনরিেশনা না বিো থারক িরব আপনার বহামরপরজর নাম রনরির একরট হরব
indexhtm
indexhtml
defaulthtm
defaulthtml
থা থ নামরট আপনার সাইরটর বহাট সাভোররর পররিালক ওরেব মাটার কিেক রনধোররি হরব ববরশরভাগ ওরেব সাভোররর নারমর একরট িারলকা থারক খন একজন সাইরটর রভরজটর িার বরাউজারর একরট ওরেব সাইরটর URL টাইপ করর িখন বরাউজাররটরক বহাট সাভোরর পািারনা হে বহাট সাভোররট িখন সবেংরিেভারব রলরটর িম অনসারর বহামরপজ খরজ এবং িা পাওো মািই এরট ও এটার সারথ সংরিষট সকল ফাইল রভরজটররর করমপউটারর বিরণ করর বসখান বথরক বরাউজার িারপর রিরন একি করর
রি সাভোর HTML ফাইরলর সংগরাহ বথরক শরর বহামরপরজর নাম খরজ না পাে িরব সবেংরিেভারব রিিীে নারমর ফাইল খরজ রি িাও না পাে িরব িিীে নাম এবং এভারব বাকী গরলা িাই আপনার উরিি শরর নারমর একরট ফাইল নাম বিো ারি ফাইল খজরি রগরে আপনার বহাট সাভোররর সমে নষট না হে
NotePad ( বা আপরন ব বিাগরাাম বযবহার কররি িান) এ একরট নিন ডকরমনট খলন এবং িারপর রট বফালডারর উপররর ব রকারনা একরট নারম বহামরপজরট সংরকষণ করন
ববরসক বকাড বসট করা
একরট ওরেব পািা দই অংরশ রবভি বহড এবং বরড বহড এর মরধয বপরজর িথয থারক ব মন বমটা টযাগ কখন এরট বানারনা হরেরছ এবং বকারডর রবসতাররি রববরণ বরডরি থারক িাই া আপরন পািাে বিখরি পান বহরডর মধযকার ডাটা বিখা াে না রিও বরডরি ldquoরজরনসগরলrdquo বকমন বিখারব িার রনরিেশনা এরি থাকরি পারর বহড এবং বরড সহ সকল টযাগ lthtmlgtlthtmlgt টযারগর মরধয থারক ারক ldquoপরম করনটইনারrdquo টযাগ বলা হে ব রট বরাউজাররক বরল ব এর মরধয া রকছ আরছ িা একরট ওরেব পািা
ডান রিরক বিখারনার মরিা করর HTML টযারগর শর এবং বশষ অংশ lthtmlgtlthtmlgt রলখন
lthtmlgt
lthtmlgt
6
এখন HTML পািার জনয বহড টযারগর শর এবং বশষ অংশ রলখন ারি িা ডারনর উিাহররণর মরিা বিখা াে
িারন এখন বরড টযাগ ব াগ করন
ফাইল সংরকষণ করন
এখন আপনার ওরেব পািাে রকছ বলখা ব াগ করন ারি পরীকষা করার সমে আপরন িা বিখরি পাররন এটা অবশযই বরডর মরধয রলখরি হরব বরড টযারগর শর এবং বশষ অংরশর মারঝ
এখন আপনার ওরেব বরাউজার িাল করন এটা হরি পারর Internet Explorer Firefox
Mozilla Safari Opera বা আপনার া পছনদ আপনার নিন ওরেব পািারট খলন এবং ফাইলরট বিখন ববরশরভাগ বরাউজারর আপনারক এভারব ফাইলরট খলরি হরব File এ রিক করর Open ( বা Open File) এ রিক করন িারপর আপনার সংররকষি ফাইলরটরি রগরে OK রিক করন
lthtmlgt
ltheadgt
ltheadgt
lthtmlgt
lthtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
lthtmlgt
ltheadgt
ltheadgt
ltbodygt
This is my first Web
page
ltbodygt
lthtmlgt
7
আপনার পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এখন আপনার ওরেব পািার বহড অংরশ রকছ িথয ব াগ করন ারি িা আপনার রভরজটররর জনয উপকারী হে
বহড টযারগর মরধয title টযাগ ব াগ করন এবং আপনার ওরেব পািার একরট রশররানাম রিন রশররানামরট ফাইরলর নাম নে বরং এরট বরাউজাররর উপররর বারর বিখা ারব এবং রভরজটর বকান পািাে আরছ িা রিরিি করর পািারট রকরসর সমপরকে িা রনধোরন কররি সািে ইরিন িা বযবহার করর
পািারট সংরকষন করর আবার বিখন বরাউজাররর এরকবারর উপররর বারর পািার রশররানামরট বিখরি পাররবন
বনাট িরিবার সংররকষি পািারট বিখার জনয বারবার FilegtOpen ইিযারি করা লাগরব না শধ পািারট সংররকষি হরেরছ রকনা িা রনরিি হরে বরাউজাররর Refresh বা Reload বাটরন রিক করন (রকান বরাউজার বযবহার কররছন িার উপর রনভের করর)
বটকসট ব াগ এবং ফরমেট করা পরবিেী ধাপ সমরহ আপরন বিখরবন কী করর আপনার ওরেব পািাে বটকসট ব াগ কররি পাররন এবং িা বিখার জনয ফরমেট কররি পাররন আপনার ওরেব পািার বরডরি একরট পযারাগরাাফ টযাগ ব াগ করর শর করন ডারন বকাডরট বিখারনা হরলা
পযারাগরাাফ হরে অনযিম একরট উপািান া রিরিি করার জনয HTML রডজাইন করা হরেরছ বিখন পযারাগরাাফরট p টযাগ িারা রনরিেরশি হরে ltpgtltpgt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
This is my first Web
page
ltbodygt
lthtmlgt
8
বনাট এই বটকসরট রক ডারনর উিাহররনর বলখারক এর িথম দরট শে অন ােী Lorem Ipsum বলা হে এরট একরট িযারসকাল লযারটন রিনা া রনেরমি রিনটার গরাারফক আরটেট এবং ওরেব রডজাইনার কিেক ldquoডারমrdquo বটকসট রহরসরব বযবহি হে রডজাইন ওরেব পািা রকংবা রিনটকি বররসউর এর নমনা বিখারি ব রহি বটকসরট English এ আরছ এবং ববরশরভাগ বলাক লযারটন পড়রি পারর না িাই রডজাইন বকমন বিখারব িার জনয এরট বযবহার করা হে সারথ সারথ রক বলখা আরছ িার রিক বথরক মনর াগ সরাে Lorem Ipsum এর ভারলা একরট উৎস হরে এর ওরেব সাইট httpwwwlipsumcom ব খারন এরট সমপরকে আররা জানরি পাররবন এবং নমনা করপ কররি পাররবন এই রটউরটাররোরলর জনয আপনারক Lorem Ipsum বযবহার কররি হরব না আপনার া ইো িাই টাইপ কররি পাররবন
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtLorem ipsum dolor
sit
amet consectetur
adipisicing
elit sed do eiusmod
tempor
incididunt ut labore et
dolore
magna aliqua Ut enim
ad
minim veniam quis
nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea
commodo
consequat Duis aute
irure dolor
in reprehenderit in
voluptate
velit esse cillum
dolore eu
fugiat nulla pariatur
Excepteur
sint occaecat cupidatat
non
proident sunt in culpa
qui
officia deserunt mollit
anim id
est laborumltpgt
ltbodygt
lthtmlgt
9
বকারনা সরনদহ বনই ব রক করর করনটইনার টযাগগরলা ফরমের করা হে িার পযাটানে আপরন লকষয করররছন করনটইনার টযারগর বশরষর অংরশ সবেিা একরট সামরন বহলারনা সলযাস থাকরব এই সলযাসরটই আপনার বরাউজাররক বরল ব টযাগরট এখারনই বশষ এবং বনধ করা হরেরছ
িলন পযারাগরাাফরটর িথম রকছ শে ববালড করর আপনার বটকসটরক আররকট ফরমেট করা াক ডারনর মরিা করর strong টযাগ ব াগ করন বরাউজারর বিখারনার সমে এরট বকমন বিখারে পাইলরট সংরকষন করর িা আপনার বরাউজারর বিখন
বখোল করন শধমাি strong টযারগর মরধয থাকা শেগরলাই ববালড রহরসরব বিখারে রিক এভারবই করনটইনার টযাগগরলা কাজ করর
বটকসটরক ইিারলক করর বিখারনার জনয আররকরট করনটইনার টযাগ আরছ এটা হরলা ltemgtltemgt ববালড করা অংশ বারি বটকসরটর অনয অংরশ এই টযাগরট িরোগ করর বিখন কীভারব কররি হরব িা ডারনর উিাহররণ বিো হরলা
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpltstronggtLorem ipsum
dolorltstronggt sit amet
consectetur adipisicing
elit sed
do eiusmod tempor
incididunt
ut labore et dolore magna
aliqua Ut enim ad minim
veniam quis nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea commodo
consequatltpgt
ltbodygt
lthtmlgt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtltstronggtLorem ipsum
dolorltstronggt sit amet
consectetur
ltemgtadipisicing
elitltemgt sed do eiusmod
tempor incididunt ut
labore et
dolore magna aliqua Ut
enim
ad minim veniam quis
nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea commodo
consequatltpgt
ltbodygt
lthtmlgt
10
বনরটং টযাগ
একরট বলখাংশ বা অনয বকারনা বসতরি একারধক টযাগ িরোগ করা হরল বকান িরম িারির শর এবং বশষ অংশ আসরব িা বনরটং টযাগ িারা বঝারনা হে ব মন বটকসরটর বকারনা অংশ একই সারথ ববালড এবং ইিারলক হরি পারর strong এবং emphasis টযারগর সরিক বনরটং হরব রনরির মরিা
ltstronggtltemgtThis is bold and italicsltemgtltstronggt
strong টযাগরট ldquoবাইররrdquo ব খারন emphasis টযাগরট ldquoবভিররrdquo এবং বটকসরট আরছ মারঝ
আপরন টযাগগরলা এভারবও বনট কররি পাররিন
ltemgtltstronggtThis is bold and italicsltstronggtltemgt
ভলভারব বনট করা টযারগর বারহর-রভির-মারঝ িমরট থাকরব না ভলভারব বনট করা টযারগর একরট উিাহরণ হরে
ltstronggtltemgtThis is bold and italicsltstronggtltemgt
ওরেরবর আরগর রিরন ভলভারব বনট করা টযারগ সাধারণি বকারনা সমসযা কররিা না রকনত ব রহি ওোলেড ওোইড ওরেব তিরর হরে বগরছ িাই বরাউজারগরলারক একই টযানডারডে ি থাকা জররী হরে পড়রছ
বিেমারনর XHTML HTML এর আররা থা থ সংসকরণ রহরসরব বরণেি হরেরছ অরনক বকষরিই এরট সরিক XHTML এর রনেম সরিক বনরটং টযাগ বলখা এবং অনযানয গরতবপণে রবষে রনরিেষট করর আধরনক বরাউজারগরলা এই সকল রনেম ররনষঠভারব বমরন িরল রি আপনার বকাড সরিকভারব XHTML এর রনেম বমরন না িরল িরব িা মরনটরর সরিকভারব নাও বিখারি পারর
HTML এবং XHTML এর রনেম সমপরকে আররা জানরি World Wide Web Consortium এর ওরেব সাইট wwww3xorg রভরজট করন এই সংসথারট ওরেব সংরিষট সকল রজরনরসর মান রনধোরণ করর
অযাডভানসড বটকস ফরমেরটং
বটকসট ববালড এবং ইিারলক করার সারথ সারথ HTML বযবহার করর আররা উননি উপারে িার সজজা পররবিেন করা াে এর মরধয বলখাে রং বিো ফনট রনেনতরন এবং বলখার সাইজ পররবিেন করা ারব
ফনট টযাগ ltfontgtltfontgt এর মাধযরম ফরনটর উপসথাপনা রনেনতরন করা হে ডারনর উিাহররণ ফরনটর সাইজ ৩ রনরিেষট করা আরছ ফরনটর সাইজ ১ বথরক ৭ এর মরধয রনরিেষট করা াে ব খারন ১ সবরিরে বছাট এবং ৭ সবরিরে বড়
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtltfont size=3gtThis
text is
font size 3ltfontgtltpgt
ltbodygt
lthtmlgt
11
রডফলট সাইজ হরে ৩ ববরশরভাগ বকষরিই অরধকাংশ বরাউজার ldquoসাধরণিrdquo এই সাইজরটই বিখাে
আপরন ফরনটর সাইরজর মান ১ বথরক ৭ প েনত করর বিখরি পাররন রনরির িারলকাে সবগরলা সাইরজ বটকসট বকমন বিখারব িা বিখারনা হরলা মরন রাখন ফরনটর সরিক সাইজ অরনক রবষরের উপর রনরভর করর ব মন আপনার মরনটর রিরনর সাইজ
Font size 1
Font size 2
Font size 3
Font size 4
Font size 5
Font size 6
Font size 7
বরাউজাররর বসরটংস অন ােীও ফরনটর সাইজ রনরিেষট করা াে ফনট সাইজ অযারটররবউরট + বা - রিরে এরট করা হে ডারনর উিাহররন ফরনটর সাইজ +২ বযবহার করা হরেরছ এর মারন হরে বরাউজাররর রডফলট সাইজ বথরক ২ সাইজ বড় করর ফনটরট বিখারব
HTML এর রনেম অন ােী এই ফনট সাইজগরলা রভরজটররর বরাউজাররর বসরটংসরক অগরাাহয কররব অনয কথাে আপনার ওরেব পািার রভরজটর রি িার বরাউজাররর ফনট বসরটংসরক কারটামাইজ করর িরব ফনট টযারগ বযবহি সাইজ অযরটররবউট বসটার ldquoরনরজর মরিাrdquo করে রনরে বনে এবং আপনার মরিা কররই বলখারট বিখারব
িাহরল + বা - আসরল রক বলা ারব না কারণ িরিরট বরাউজাররর রডফলট ফনট সাইজ এরকক রকম হরব এবং বটকসট বিখরি বকমন হরব িা রনণেে করা সমভব নে কারণ এরট বমরশন বথরক বমরশরন পররবরিেি হে রনরির উিাহরণরট আপনারক রকছটা ধারণা বিরব রকনত আসরল এরট বকমন বিখারব িা বিখরি আপরন পািারট অনয বমরশরন অনয বরাউজার বসরটংসএ বিখরি পাররন
12
This Font size +1
This Font size +2
This Font size +3
This Font size +4
This Font size +5
This Font size +6
This Font size +7
This is font size -1
This is font size -2
This is font size -3
This is font size -4
This is font size -5
This is font size -6
This is font size -7
এরট সমভব ব উপররর উিাহররণর মরধয ববশ রকছ বিখরি একই রকম লাগরছ এর কারন রকছ বরাউজারর বড় বা বছাট ফনট বিখারনার একরট সীমাররখা বটরন বিে পড়া ােনা এমন বটকসট তিররর বকারনা মারনই হেনা এটা হরি পারর ওরনক বড় রকংবা অরনক বছাট হরল
বটকসট ফরমেট করার আররকরট উপাে হরে রং এর বযবহার রং িার নাম অনসারর রনরিেষট করা াে ব মন red blue বা ForestGreen RGB ( Red Green Blue) মান বযবহার কররও িারির রনধোরণ করা াে ওরেরব রংরক সবরিরে সাধারণ ভারব বযবহার করার উপাে হরে িারির বহকসারডরসরমল মান বযবহার করা িরিযক পিরির উিাহরণ রনরি বিো হরলা
ltfont color=redgtThis is red specified as a color nameltfontgt
ltfont color=25500gtThis is red specified as an RGB valueltfontgt
ltfont color=ff0000gtThis is red specified in hexadecimalltfontgt
13
রং এবং ওরেব
ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে
রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব
ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল
bull Color and the Web
(httplibraryalbanyeduimcwebcolorindexhtm) the
Interactive Media Centers online tutorial
bull Browser Safe Color Chart
(httplibraryalbanyeduimcwebcolorshtm) online chart
of Web safe colors from the Interactive Media Center
bull Color Names Chart
(httpwwww3schoolscomhtmlhtml_colornamesasp) online
chart from the W3 Schools
bull The Browser Safe Color Pallet
(httpwwwlyndacomhexasp) online guide from Lynda
Weinman
বহরডং
ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক
বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে
মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব
I Introduction
A Welcome
II Main Message
A Part 1 - What I did on my summer vacation
1 Getting to the airport
2 Flying on the airplane
a Visiting Alaska
14
b Seeing a bear
3 Flying home
B Summing my vacation
III Conclusion
এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত
বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল
lth1gtThis is heading H1lth1gt
খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব
এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lth1gtThis is an example
of the
h1 taglth1gt
ltbodygt lthtmlgt
15
রলট
রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন
রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল
1 Dinner at 800 pm 2 Lunch at noon
3 Snacks at 1100 am
এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltolgt
ltligtDinner at 800 pmltligt
ltligtLunch at noonltligt
ltligtSnacks at 1100 amltligt
ltolgt
মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব
অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল
bull Apples
bull Oranges
bull grapes
এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltulgt
ltligtApplesltligt
ltligtOrangesltligt
ltligtgrapesltligt
ltulgt
16
আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব
উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর
উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস
রলংক
রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর
দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ
এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল
এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা
lta href=httpwwwalbanyedugtLink to UAlbanyltagt
বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল
lta
href=httpwwwalbanyeducommunicationindexhtmlgtLink
to the Communication Department home page ltagt
এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড
17
ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml
এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন
রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব
lta href=page4htmlgtPrevious Pageltagt
এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না
anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে
lta name=topgtltagt
আর এটারি রলঙক করার জনয
lta href=topgtGo to the top of this pageltagt
ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন
বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব
আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে
lta href=page5htmltopgtTop of Page 5ltagt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lta name=topgtltagt
ltpgtWelcome to my Web
page
You can go to the top of
the
page by lta href=topgtby
clicking hereltagtltpgt
ltbodygt
lthtmlgt
18
বলআউট এবং বটরবল
ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব
ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign
ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে
ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব
বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা
টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ
19
ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয
ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন
বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে
বটরবল টযাগ - lttablegtlttablegt
বটরবল বরা টযাগ - lttrgtlttrgt
বটরবল বসল টযাগ - lttdgtlttdgt
রনরি একরট সাধারণ বটরবল বিখারনা হরলা
এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা
lttablegtlttablegt
বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা
lttablegt
lttablegt
20
এখন আমরা িথম বটরবল বরা টযাগ ি কররবা
lttablegt
lttrgtlttrgt
lttablegt
িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরট এরকম করর তিরর হরব
রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরটর গিন এমন হরব
বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব
lttable border=1gt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন
21
উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না
এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা
Text Object
Text Object
বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন
বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo
nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে
বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom
nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব
Text Object
Text Object
22
আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব
আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব
lttable border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ
lttable width=300 border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে
অযাডভানসড বটরবল ফরমেট
বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন
বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ
এরি বকারনা Cell padding বনই
এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ
23
রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে
lttable width=284 border=1 cellspacing=0 cellpad-
ding=10gt
lttrgt
lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt
lttablegt
Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন
আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল
বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব
cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক
cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ
24
cell padding ৮ রপরকসল
বটরবল বডোর ৪ রপরকসল
cell spacing ১০ রপরকসল
বটরবল ৩০০ রপরকসল িওড়া
এই বটরবরলর বকাড হরে
lttable width=300 border=4 cellspacing=10 cellpad-
ding=8gt
lttrgt
lttdgtCell Padding 8 pixelslttdgt
lttdgtTable borders are 4 pixelslttdgt
lttrgt
lttrgt
lttdgtCell spacing is 10 pixelslttdgt
lttdgtThe table is 300 pixels widelttdgt
lttrgt
lttablegt
বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা
বটরবরল রিন ভারব রং ব াগ করা াে
1 বটরবরলর বযাকগরাাউনড রং
2 বসরলর বযাকগরাাউনড রং
3 বডোররর রং
রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
6
এখন HTML পািার জনয বহড টযারগর শর এবং বশষ অংশ রলখন ারি িা ডারনর উিাহররণর মরিা বিখা াে
িারন এখন বরড টযাগ ব াগ করন
ফাইল সংরকষণ করন
এখন আপনার ওরেব পািাে রকছ বলখা ব াগ করন ারি পরীকষা করার সমে আপরন িা বিখরি পাররন এটা অবশযই বরডর মরধয রলখরি হরব বরড টযারগর শর এবং বশষ অংরশর মারঝ
এখন আপনার ওরেব বরাউজার িাল করন এটা হরি পারর Internet Explorer Firefox
Mozilla Safari Opera বা আপনার া পছনদ আপনার নিন ওরেব পািারট খলন এবং ফাইলরট বিখন ববরশরভাগ বরাউজারর আপনারক এভারব ফাইলরট খলরি হরব File এ রিক করর Open ( বা Open File) এ রিক করন িারপর আপনার সংররকষি ফাইলরটরি রগরে OK রিক করন
lthtmlgt
ltheadgt
ltheadgt
lthtmlgt
lthtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
lthtmlgt
ltheadgt
ltheadgt
ltbodygt
This is my first Web
page
ltbodygt
lthtmlgt
7
আপনার পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এখন আপনার ওরেব পািার বহড অংরশ রকছ িথয ব াগ করন ারি িা আপনার রভরজটররর জনয উপকারী হে
বহড টযারগর মরধয title টযাগ ব াগ করন এবং আপনার ওরেব পািার একরট রশররানাম রিন রশররানামরট ফাইরলর নাম নে বরং এরট বরাউজাররর উপররর বারর বিখা ারব এবং রভরজটর বকান পািাে আরছ িা রিরিি করর পািারট রকরসর সমপরকে িা রনধোরন কররি সািে ইরিন িা বযবহার করর
পািারট সংরকষন করর আবার বিখন বরাউজাররর এরকবারর উপররর বারর পািার রশররানামরট বিখরি পাররবন
বনাট িরিবার সংররকষি পািারট বিখার জনয বারবার FilegtOpen ইিযারি করা লাগরব না শধ পািারট সংররকষি হরেরছ রকনা িা রনরিি হরে বরাউজাররর Refresh বা Reload বাটরন রিক করন (রকান বরাউজার বযবহার কররছন িার উপর রনভের করর)
বটকসট ব াগ এবং ফরমেট করা পরবিেী ধাপ সমরহ আপরন বিখরবন কী করর আপনার ওরেব পািাে বটকসট ব াগ কররি পাররন এবং িা বিখার জনয ফরমেট কররি পাররন আপনার ওরেব পািার বরডরি একরট পযারাগরাাফ টযাগ ব াগ করর শর করন ডারন বকাডরট বিখারনা হরলা
পযারাগরাাফ হরে অনযিম একরট উপািান া রিরিি করার জনয HTML রডজাইন করা হরেরছ বিখন পযারাগরাাফরট p টযাগ িারা রনরিেরশি হরে ltpgtltpgt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
This is my first Web
page
ltbodygt
lthtmlgt
8
বনাট এই বটকসরট রক ডারনর উিাহররনর বলখারক এর িথম দরট শে অন ােী Lorem Ipsum বলা হে এরট একরট িযারসকাল লযারটন রিনা া রনেরমি রিনটার গরাারফক আরটেট এবং ওরেব রডজাইনার কিেক ldquoডারমrdquo বটকসট রহরসরব বযবহি হে রডজাইন ওরেব পািা রকংবা রিনটকি বররসউর এর নমনা বিখারি ব রহি বটকসরট English এ আরছ এবং ববরশরভাগ বলাক লযারটন পড়রি পারর না িাই রডজাইন বকমন বিখারব িার জনয এরট বযবহার করা হে সারথ সারথ রক বলখা আরছ িার রিক বথরক মনর াগ সরাে Lorem Ipsum এর ভারলা একরট উৎস হরে এর ওরেব সাইট httpwwwlipsumcom ব খারন এরট সমপরকে আররা জানরি পাররবন এবং নমনা করপ কররি পাররবন এই রটউরটাররোরলর জনয আপনারক Lorem Ipsum বযবহার কররি হরব না আপনার া ইো িাই টাইপ কররি পাররবন
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtLorem ipsum dolor
sit
amet consectetur
adipisicing
elit sed do eiusmod
tempor
incididunt ut labore et
dolore
magna aliqua Ut enim
ad
minim veniam quis
nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea
commodo
consequat Duis aute
irure dolor
in reprehenderit in
voluptate
velit esse cillum
dolore eu
fugiat nulla pariatur
Excepteur
sint occaecat cupidatat
non
proident sunt in culpa
qui
officia deserunt mollit
anim id
est laborumltpgt
ltbodygt
lthtmlgt
9
বকারনা সরনদহ বনই ব রক করর করনটইনার টযাগগরলা ফরমের করা হে িার পযাটানে আপরন লকষয করররছন করনটইনার টযারগর বশরষর অংরশ সবেিা একরট সামরন বহলারনা সলযাস থাকরব এই সলযাসরটই আপনার বরাউজাররক বরল ব টযাগরট এখারনই বশষ এবং বনধ করা হরেরছ
িলন পযারাগরাাফরটর িথম রকছ শে ববালড করর আপনার বটকসটরক আররকট ফরমেট করা াক ডারনর মরিা করর strong টযাগ ব াগ করন বরাউজারর বিখারনার সমে এরট বকমন বিখারে পাইলরট সংরকষন করর িা আপনার বরাউজারর বিখন
বখোল করন শধমাি strong টযারগর মরধয থাকা শেগরলাই ববালড রহরসরব বিখারে রিক এভারবই করনটইনার টযাগগরলা কাজ করর
বটকসটরক ইিারলক করর বিখারনার জনয আররকরট করনটইনার টযাগ আরছ এটা হরলা ltemgtltemgt ববালড করা অংশ বারি বটকসরটর অনয অংরশ এই টযাগরট িরোগ করর বিখন কীভারব কররি হরব িা ডারনর উিাহররণ বিো হরলা
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpltstronggtLorem ipsum
dolorltstronggt sit amet
consectetur adipisicing
elit sed
do eiusmod tempor
incididunt
ut labore et dolore magna
aliqua Ut enim ad minim
veniam quis nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea commodo
consequatltpgt
ltbodygt
lthtmlgt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtltstronggtLorem ipsum
dolorltstronggt sit amet
consectetur
ltemgtadipisicing
elitltemgt sed do eiusmod
tempor incididunt ut
labore et
dolore magna aliqua Ut
enim
ad minim veniam quis
nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea commodo
consequatltpgt
ltbodygt
lthtmlgt
10
বনরটং টযাগ
একরট বলখাংশ বা অনয বকারনা বসতরি একারধক টযাগ িরোগ করা হরল বকান িরম িারির শর এবং বশষ অংশ আসরব িা বনরটং টযাগ িারা বঝারনা হে ব মন বটকসরটর বকারনা অংশ একই সারথ ববালড এবং ইিারলক হরি পারর strong এবং emphasis টযারগর সরিক বনরটং হরব রনরির মরিা
ltstronggtltemgtThis is bold and italicsltemgtltstronggt
strong টযাগরট ldquoবাইররrdquo ব খারন emphasis টযাগরট ldquoবভিররrdquo এবং বটকসরট আরছ মারঝ
আপরন টযাগগরলা এভারবও বনট কররি পাররিন
ltemgtltstronggtThis is bold and italicsltstronggtltemgt
ভলভারব বনট করা টযারগর বারহর-রভির-মারঝ িমরট থাকরব না ভলভারব বনট করা টযারগর একরট উিাহরণ হরে
ltstronggtltemgtThis is bold and italicsltstronggtltemgt
ওরেরবর আরগর রিরন ভলভারব বনট করা টযারগ সাধারণি বকারনা সমসযা কররিা না রকনত ব রহি ওোলেড ওোইড ওরেব তিরর হরে বগরছ িাই বরাউজারগরলারক একই টযানডারডে ি থাকা জররী হরে পড়রছ
বিেমারনর XHTML HTML এর আররা থা থ সংসকরণ রহরসরব বরণেি হরেরছ অরনক বকষরিই এরট সরিক XHTML এর রনেম সরিক বনরটং টযাগ বলখা এবং অনযানয গরতবপণে রবষে রনরিেষট করর আধরনক বরাউজারগরলা এই সকল রনেম ররনষঠভারব বমরন িরল রি আপনার বকাড সরিকভারব XHTML এর রনেম বমরন না িরল িরব িা মরনটরর সরিকভারব নাও বিখারি পারর
HTML এবং XHTML এর রনেম সমপরকে আররা জানরি World Wide Web Consortium এর ওরেব সাইট wwww3xorg রভরজট করন এই সংসথারট ওরেব সংরিষট সকল রজরনরসর মান রনধোরণ করর
অযাডভানসড বটকস ফরমেরটং
বটকসট ববালড এবং ইিারলক করার সারথ সারথ HTML বযবহার করর আররা উননি উপারে িার সজজা পররবিেন করা াে এর মরধয বলখাে রং বিো ফনট রনেনতরন এবং বলখার সাইজ পররবিেন করা ারব
ফনট টযাগ ltfontgtltfontgt এর মাধযরম ফরনটর উপসথাপনা রনেনতরন করা হে ডারনর উিাহররণ ফরনটর সাইজ ৩ রনরিেষট করা আরছ ফরনটর সাইজ ১ বথরক ৭ এর মরধয রনরিেষট করা াে ব খারন ১ সবরিরে বছাট এবং ৭ সবরিরে বড়
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtltfont size=3gtThis
text is
font size 3ltfontgtltpgt
ltbodygt
lthtmlgt
11
রডফলট সাইজ হরে ৩ ববরশরভাগ বকষরিই অরধকাংশ বরাউজার ldquoসাধরণিrdquo এই সাইজরটই বিখাে
আপরন ফরনটর সাইরজর মান ১ বথরক ৭ প েনত করর বিখরি পাররন রনরির িারলকাে সবগরলা সাইরজ বটকসট বকমন বিখারব িা বিখারনা হরলা মরন রাখন ফরনটর সরিক সাইজ অরনক রবষরের উপর রনরভর করর ব মন আপনার মরনটর রিরনর সাইজ
Font size 1
Font size 2
Font size 3
Font size 4
Font size 5
Font size 6
Font size 7
বরাউজাররর বসরটংস অন ােীও ফরনটর সাইজ রনরিেষট করা াে ফনট সাইজ অযারটররবউরট + বা - রিরে এরট করা হে ডারনর উিাহররন ফরনটর সাইজ +২ বযবহার করা হরেরছ এর মারন হরে বরাউজাররর রডফলট সাইজ বথরক ২ সাইজ বড় করর ফনটরট বিখারব
HTML এর রনেম অন ােী এই ফনট সাইজগরলা রভরজটররর বরাউজাররর বসরটংসরক অগরাাহয কররব অনয কথাে আপনার ওরেব পািার রভরজটর রি িার বরাউজাররর ফনট বসরটংসরক কারটামাইজ করর িরব ফনট টযারগ বযবহি সাইজ অযরটররবউট বসটার ldquoরনরজর মরিাrdquo করে রনরে বনে এবং আপনার মরিা কররই বলখারট বিখারব
িাহরল + বা - আসরল রক বলা ারব না কারণ িরিরট বরাউজাররর রডফলট ফনট সাইজ এরকক রকম হরব এবং বটকসট বিখরি বকমন হরব িা রনণেে করা সমভব নে কারণ এরট বমরশন বথরক বমরশরন পররবরিেি হে রনরির উিাহরণরট আপনারক রকছটা ধারণা বিরব রকনত আসরল এরট বকমন বিখারব িা বিখরি আপরন পািারট অনয বমরশরন অনয বরাউজার বসরটংসএ বিখরি পাররন
12
This Font size +1
This Font size +2
This Font size +3
This Font size +4
This Font size +5
This Font size +6
This Font size +7
This is font size -1
This is font size -2
This is font size -3
This is font size -4
This is font size -5
This is font size -6
This is font size -7
এরট সমভব ব উপররর উিাহররণর মরধয ববশ রকছ বিখরি একই রকম লাগরছ এর কারন রকছ বরাউজারর বড় বা বছাট ফনট বিখারনার একরট সীমাররখা বটরন বিে পড়া ােনা এমন বটকসট তিররর বকারনা মারনই হেনা এটা হরি পারর ওরনক বড় রকংবা অরনক বছাট হরল
বটকসট ফরমেট করার আররকরট উপাে হরে রং এর বযবহার রং িার নাম অনসারর রনরিেষট করা াে ব মন red blue বা ForestGreen RGB ( Red Green Blue) মান বযবহার কররও িারির রনধোরণ করা াে ওরেরব রংরক সবরিরে সাধারণ ভারব বযবহার করার উপাে হরে িারির বহকসারডরসরমল মান বযবহার করা িরিযক পিরির উিাহরণ রনরি বিো হরলা
ltfont color=redgtThis is red specified as a color nameltfontgt
ltfont color=25500gtThis is red specified as an RGB valueltfontgt
ltfont color=ff0000gtThis is red specified in hexadecimalltfontgt
13
রং এবং ওরেব
ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে
রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব
ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল
bull Color and the Web
(httplibraryalbanyeduimcwebcolorindexhtm) the
Interactive Media Centers online tutorial
bull Browser Safe Color Chart
(httplibraryalbanyeduimcwebcolorshtm) online chart
of Web safe colors from the Interactive Media Center
bull Color Names Chart
(httpwwww3schoolscomhtmlhtml_colornamesasp) online
chart from the W3 Schools
bull The Browser Safe Color Pallet
(httpwwwlyndacomhexasp) online guide from Lynda
Weinman
বহরডং
ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক
বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে
মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব
I Introduction
A Welcome
II Main Message
A Part 1 - What I did on my summer vacation
1 Getting to the airport
2 Flying on the airplane
a Visiting Alaska
14
b Seeing a bear
3 Flying home
B Summing my vacation
III Conclusion
এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত
বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল
lth1gtThis is heading H1lth1gt
খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব
এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lth1gtThis is an example
of the
h1 taglth1gt
ltbodygt lthtmlgt
15
রলট
রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন
রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল
1 Dinner at 800 pm 2 Lunch at noon
3 Snacks at 1100 am
এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltolgt
ltligtDinner at 800 pmltligt
ltligtLunch at noonltligt
ltligtSnacks at 1100 amltligt
ltolgt
মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব
অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল
bull Apples
bull Oranges
bull grapes
এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltulgt
ltligtApplesltligt
ltligtOrangesltligt
ltligtgrapesltligt
ltulgt
16
আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব
উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর
উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস
রলংক
রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর
দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ
এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল
এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা
lta href=httpwwwalbanyedugtLink to UAlbanyltagt
বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল
lta
href=httpwwwalbanyeducommunicationindexhtmlgtLink
to the Communication Department home page ltagt
এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড
17
ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml
এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন
রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব
lta href=page4htmlgtPrevious Pageltagt
এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না
anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে
lta name=topgtltagt
আর এটারি রলঙক করার জনয
lta href=topgtGo to the top of this pageltagt
ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন
বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব
আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে
lta href=page5htmltopgtTop of Page 5ltagt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lta name=topgtltagt
ltpgtWelcome to my Web
page
You can go to the top of
the
page by lta href=topgtby
clicking hereltagtltpgt
ltbodygt
lthtmlgt
18
বলআউট এবং বটরবল
ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব
ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign
ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে
ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব
বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা
টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ
19
ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয
ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন
বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে
বটরবল টযাগ - lttablegtlttablegt
বটরবল বরা টযাগ - lttrgtlttrgt
বটরবল বসল টযাগ - lttdgtlttdgt
রনরি একরট সাধারণ বটরবল বিখারনা হরলা
এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা
lttablegtlttablegt
বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা
lttablegt
lttablegt
20
এখন আমরা িথম বটরবল বরা টযাগ ি কররবা
lttablegt
lttrgtlttrgt
lttablegt
িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরট এরকম করর তিরর হরব
রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরটর গিন এমন হরব
বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব
lttable border=1gt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন
21
উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না
এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা
Text Object
Text Object
বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন
বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo
nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে
বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom
nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব
Text Object
Text Object
22
আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব
আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব
lttable border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ
lttable width=300 border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে
অযাডভানসড বটরবল ফরমেট
বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন
বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ
এরি বকারনা Cell padding বনই
এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ
23
রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে
lttable width=284 border=1 cellspacing=0 cellpad-
ding=10gt
lttrgt
lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt
lttablegt
Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন
আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল
বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব
cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক
cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ
24
cell padding ৮ রপরকসল
বটরবল বডোর ৪ রপরকসল
cell spacing ১০ রপরকসল
বটরবল ৩০০ রপরকসল িওড়া
এই বটরবরলর বকাড হরে
lttable width=300 border=4 cellspacing=10 cellpad-
ding=8gt
lttrgt
lttdgtCell Padding 8 pixelslttdgt
lttdgtTable borders are 4 pixelslttdgt
lttrgt
lttrgt
lttdgtCell spacing is 10 pixelslttdgt
lttdgtThe table is 300 pixels widelttdgt
lttrgt
lttablegt
বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা
বটরবরল রিন ভারব রং ব াগ করা াে
1 বটরবরলর বযাকগরাাউনড রং
2 বসরলর বযাকগরাাউনড রং
3 বডোররর রং
রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
7
আপনার পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এখন আপনার ওরেব পািার বহড অংরশ রকছ িথয ব াগ করন ারি িা আপনার রভরজটররর জনয উপকারী হে
বহড টযারগর মরধয title টযাগ ব াগ করন এবং আপনার ওরেব পািার একরট রশররানাম রিন রশররানামরট ফাইরলর নাম নে বরং এরট বরাউজাররর উপররর বারর বিখা ারব এবং রভরজটর বকান পািাে আরছ িা রিরিি করর পািারট রকরসর সমপরকে িা রনধোরন কররি সািে ইরিন িা বযবহার করর
পািারট সংরকষন করর আবার বিখন বরাউজাররর এরকবারর উপররর বারর পািার রশররানামরট বিখরি পাররবন
বনাট িরিবার সংররকষি পািারট বিখার জনয বারবার FilegtOpen ইিযারি করা লাগরব না শধ পািারট সংররকষি হরেরছ রকনা িা রনরিি হরে বরাউজাররর Refresh বা Reload বাটরন রিক করন (রকান বরাউজার বযবহার কররছন িার উপর রনভের করর)
বটকসট ব াগ এবং ফরমেট করা পরবিেী ধাপ সমরহ আপরন বিখরবন কী করর আপনার ওরেব পািাে বটকসট ব াগ কররি পাররন এবং িা বিখার জনয ফরমেট কররি পাররন আপনার ওরেব পািার বরডরি একরট পযারাগরাাফ টযাগ ব াগ করর শর করন ডারন বকাডরট বিখারনা হরলা
পযারাগরাাফ হরে অনযিম একরট উপািান া রিরিি করার জনয HTML রডজাইন করা হরেরছ বিখন পযারাগরাাফরট p টযাগ িারা রনরিেরশি হরে ltpgtltpgt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
This is my first Web
page
ltbodygt
lthtmlgt
8
বনাট এই বটকসরট রক ডারনর উিাহররনর বলখারক এর িথম দরট শে অন ােী Lorem Ipsum বলা হে এরট একরট িযারসকাল লযারটন রিনা া রনেরমি রিনটার গরাারফক আরটেট এবং ওরেব রডজাইনার কিেক ldquoডারমrdquo বটকসট রহরসরব বযবহি হে রডজাইন ওরেব পািা রকংবা রিনটকি বররসউর এর নমনা বিখারি ব রহি বটকসরট English এ আরছ এবং ববরশরভাগ বলাক লযারটন পড়রি পারর না িাই রডজাইন বকমন বিখারব িার জনয এরট বযবহার করা হে সারথ সারথ রক বলখা আরছ িার রিক বথরক মনর াগ সরাে Lorem Ipsum এর ভারলা একরট উৎস হরে এর ওরেব সাইট httpwwwlipsumcom ব খারন এরট সমপরকে আররা জানরি পাররবন এবং নমনা করপ কররি পাররবন এই রটউরটাররোরলর জনয আপনারক Lorem Ipsum বযবহার কররি হরব না আপনার া ইো িাই টাইপ কররি পাররবন
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtLorem ipsum dolor
sit
amet consectetur
adipisicing
elit sed do eiusmod
tempor
incididunt ut labore et
dolore
magna aliqua Ut enim
ad
minim veniam quis
nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea
commodo
consequat Duis aute
irure dolor
in reprehenderit in
voluptate
velit esse cillum
dolore eu
fugiat nulla pariatur
Excepteur
sint occaecat cupidatat
non
proident sunt in culpa
qui
officia deserunt mollit
anim id
est laborumltpgt
ltbodygt
lthtmlgt
9
বকারনা সরনদহ বনই ব রক করর করনটইনার টযাগগরলা ফরমের করা হে িার পযাটানে আপরন লকষয করররছন করনটইনার টযারগর বশরষর অংরশ সবেিা একরট সামরন বহলারনা সলযাস থাকরব এই সলযাসরটই আপনার বরাউজাররক বরল ব টযাগরট এখারনই বশষ এবং বনধ করা হরেরছ
িলন পযারাগরাাফরটর িথম রকছ শে ববালড করর আপনার বটকসটরক আররকট ফরমেট করা াক ডারনর মরিা করর strong টযাগ ব াগ করন বরাউজারর বিখারনার সমে এরট বকমন বিখারে পাইলরট সংরকষন করর িা আপনার বরাউজারর বিখন
বখোল করন শধমাি strong টযারগর মরধয থাকা শেগরলাই ববালড রহরসরব বিখারে রিক এভারবই করনটইনার টযাগগরলা কাজ করর
বটকসটরক ইিারলক করর বিখারনার জনয আররকরট করনটইনার টযাগ আরছ এটা হরলা ltemgtltemgt ববালড করা অংশ বারি বটকসরটর অনয অংরশ এই টযাগরট িরোগ করর বিখন কীভারব কররি হরব িা ডারনর উিাহররণ বিো হরলা
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpltstronggtLorem ipsum
dolorltstronggt sit amet
consectetur adipisicing
elit sed
do eiusmod tempor
incididunt
ut labore et dolore magna
aliqua Ut enim ad minim
veniam quis nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea commodo
consequatltpgt
ltbodygt
lthtmlgt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtltstronggtLorem ipsum
dolorltstronggt sit amet
consectetur
ltemgtadipisicing
elitltemgt sed do eiusmod
tempor incididunt ut
labore et
dolore magna aliqua Ut
enim
ad minim veniam quis
nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea commodo
consequatltpgt
ltbodygt
lthtmlgt
10
বনরটং টযাগ
একরট বলখাংশ বা অনয বকারনা বসতরি একারধক টযাগ িরোগ করা হরল বকান িরম িারির শর এবং বশষ অংশ আসরব িা বনরটং টযাগ িারা বঝারনা হে ব মন বটকসরটর বকারনা অংশ একই সারথ ববালড এবং ইিারলক হরি পারর strong এবং emphasis টযারগর সরিক বনরটং হরব রনরির মরিা
ltstronggtltemgtThis is bold and italicsltemgtltstronggt
strong টযাগরট ldquoবাইররrdquo ব খারন emphasis টযাগরট ldquoবভিররrdquo এবং বটকসরট আরছ মারঝ
আপরন টযাগগরলা এভারবও বনট কররি পাররিন
ltemgtltstronggtThis is bold and italicsltstronggtltemgt
ভলভারব বনট করা টযারগর বারহর-রভির-মারঝ িমরট থাকরব না ভলভারব বনট করা টযারগর একরট উিাহরণ হরে
ltstronggtltemgtThis is bold and italicsltstronggtltemgt
ওরেরবর আরগর রিরন ভলভারব বনট করা টযারগ সাধারণি বকারনা সমসযা কররিা না রকনত ব রহি ওোলেড ওোইড ওরেব তিরর হরে বগরছ িাই বরাউজারগরলারক একই টযানডারডে ি থাকা জররী হরে পড়রছ
বিেমারনর XHTML HTML এর আররা থা থ সংসকরণ রহরসরব বরণেি হরেরছ অরনক বকষরিই এরট সরিক XHTML এর রনেম সরিক বনরটং টযাগ বলখা এবং অনযানয গরতবপণে রবষে রনরিেষট করর আধরনক বরাউজারগরলা এই সকল রনেম ররনষঠভারব বমরন িরল রি আপনার বকাড সরিকভারব XHTML এর রনেম বমরন না িরল িরব িা মরনটরর সরিকভারব নাও বিখারি পারর
HTML এবং XHTML এর রনেম সমপরকে আররা জানরি World Wide Web Consortium এর ওরেব সাইট wwww3xorg রভরজট করন এই সংসথারট ওরেব সংরিষট সকল রজরনরসর মান রনধোরণ করর
অযাডভানসড বটকস ফরমেরটং
বটকসট ববালড এবং ইিারলক করার সারথ সারথ HTML বযবহার করর আররা উননি উপারে িার সজজা পররবিেন করা াে এর মরধয বলখাে রং বিো ফনট রনেনতরন এবং বলখার সাইজ পররবিেন করা ারব
ফনট টযাগ ltfontgtltfontgt এর মাধযরম ফরনটর উপসথাপনা রনেনতরন করা হে ডারনর উিাহররণ ফরনটর সাইজ ৩ রনরিেষট করা আরছ ফরনটর সাইজ ১ বথরক ৭ এর মরধয রনরিেষট করা াে ব খারন ১ সবরিরে বছাট এবং ৭ সবরিরে বড়
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtltfont size=3gtThis
text is
font size 3ltfontgtltpgt
ltbodygt
lthtmlgt
11
রডফলট সাইজ হরে ৩ ববরশরভাগ বকষরিই অরধকাংশ বরাউজার ldquoসাধরণিrdquo এই সাইজরটই বিখাে
আপরন ফরনটর সাইরজর মান ১ বথরক ৭ প েনত করর বিখরি পাররন রনরির িারলকাে সবগরলা সাইরজ বটকসট বকমন বিখারব িা বিখারনা হরলা মরন রাখন ফরনটর সরিক সাইজ অরনক রবষরের উপর রনরভর করর ব মন আপনার মরনটর রিরনর সাইজ
Font size 1
Font size 2
Font size 3
Font size 4
Font size 5
Font size 6
Font size 7
বরাউজাররর বসরটংস অন ােীও ফরনটর সাইজ রনরিেষট করা াে ফনট সাইজ অযারটররবউরট + বা - রিরে এরট করা হে ডারনর উিাহররন ফরনটর সাইজ +২ বযবহার করা হরেরছ এর মারন হরে বরাউজাররর রডফলট সাইজ বথরক ২ সাইজ বড় করর ফনটরট বিখারব
HTML এর রনেম অন ােী এই ফনট সাইজগরলা রভরজটররর বরাউজাররর বসরটংসরক অগরাাহয কররব অনয কথাে আপনার ওরেব পািার রভরজটর রি িার বরাউজাররর ফনট বসরটংসরক কারটামাইজ করর িরব ফনট টযারগ বযবহি সাইজ অযরটররবউট বসটার ldquoরনরজর মরিাrdquo করে রনরে বনে এবং আপনার মরিা কররই বলখারট বিখারব
িাহরল + বা - আসরল রক বলা ারব না কারণ িরিরট বরাউজাররর রডফলট ফনট সাইজ এরকক রকম হরব এবং বটকসট বিখরি বকমন হরব িা রনণেে করা সমভব নে কারণ এরট বমরশন বথরক বমরশরন পররবরিেি হে রনরির উিাহরণরট আপনারক রকছটা ধারণা বিরব রকনত আসরল এরট বকমন বিখারব িা বিখরি আপরন পািারট অনয বমরশরন অনয বরাউজার বসরটংসএ বিখরি পাররন
12
This Font size +1
This Font size +2
This Font size +3
This Font size +4
This Font size +5
This Font size +6
This Font size +7
This is font size -1
This is font size -2
This is font size -3
This is font size -4
This is font size -5
This is font size -6
This is font size -7
এরট সমভব ব উপররর উিাহররণর মরধয ববশ রকছ বিখরি একই রকম লাগরছ এর কারন রকছ বরাউজারর বড় বা বছাট ফনট বিখারনার একরট সীমাররখা বটরন বিে পড়া ােনা এমন বটকসট তিররর বকারনা মারনই হেনা এটা হরি পারর ওরনক বড় রকংবা অরনক বছাট হরল
বটকসট ফরমেট করার আররকরট উপাে হরে রং এর বযবহার রং িার নাম অনসারর রনরিেষট করা াে ব মন red blue বা ForestGreen RGB ( Red Green Blue) মান বযবহার কররও িারির রনধোরণ করা াে ওরেরব রংরক সবরিরে সাধারণ ভারব বযবহার করার উপাে হরে িারির বহকসারডরসরমল মান বযবহার করা িরিযক পিরির উিাহরণ রনরি বিো হরলা
ltfont color=redgtThis is red specified as a color nameltfontgt
ltfont color=25500gtThis is red specified as an RGB valueltfontgt
ltfont color=ff0000gtThis is red specified in hexadecimalltfontgt
13
রং এবং ওরেব
ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে
রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব
ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল
bull Color and the Web
(httplibraryalbanyeduimcwebcolorindexhtm) the
Interactive Media Centers online tutorial
bull Browser Safe Color Chart
(httplibraryalbanyeduimcwebcolorshtm) online chart
of Web safe colors from the Interactive Media Center
bull Color Names Chart
(httpwwww3schoolscomhtmlhtml_colornamesasp) online
chart from the W3 Schools
bull The Browser Safe Color Pallet
(httpwwwlyndacomhexasp) online guide from Lynda
Weinman
বহরডং
ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক
বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে
মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব
I Introduction
A Welcome
II Main Message
A Part 1 - What I did on my summer vacation
1 Getting to the airport
2 Flying on the airplane
a Visiting Alaska
14
b Seeing a bear
3 Flying home
B Summing my vacation
III Conclusion
এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত
বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল
lth1gtThis is heading H1lth1gt
খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব
এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lth1gtThis is an example
of the
h1 taglth1gt
ltbodygt lthtmlgt
15
রলট
রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন
রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল
1 Dinner at 800 pm 2 Lunch at noon
3 Snacks at 1100 am
এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltolgt
ltligtDinner at 800 pmltligt
ltligtLunch at noonltligt
ltligtSnacks at 1100 amltligt
ltolgt
মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব
অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল
bull Apples
bull Oranges
bull grapes
এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltulgt
ltligtApplesltligt
ltligtOrangesltligt
ltligtgrapesltligt
ltulgt
16
আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব
উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর
উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস
রলংক
রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর
দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ
এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল
এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা
lta href=httpwwwalbanyedugtLink to UAlbanyltagt
বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল
lta
href=httpwwwalbanyeducommunicationindexhtmlgtLink
to the Communication Department home page ltagt
এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড
17
ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml
এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন
রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব
lta href=page4htmlgtPrevious Pageltagt
এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না
anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে
lta name=topgtltagt
আর এটারি রলঙক করার জনয
lta href=topgtGo to the top of this pageltagt
ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন
বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব
আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে
lta href=page5htmltopgtTop of Page 5ltagt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lta name=topgtltagt
ltpgtWelcome to my Web
page
You can go to the top of
the
page by lta href=topgtby
clicking hereltagtltpgt
ltbodygt
lthtmlgt
18
বলআউট এবং বটরবল
ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব
ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign
ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে
ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব
বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা
টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ
19
ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয
ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন
বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে
বটরবল টযাগ - lttablegtlttablegt
বটরবল বরা টযাগ - lttrgtlttrgt
বটরবল বসল টযাগ - lttdgtlttdgt
রনরি একরট সাধারণ বটরবল বিখারনা হরলা
এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা
lttablegtlttablegt
বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা
lttablegt
lttablegt
20
এখন আমরা িথম বটরবল বরা টযাগ ি কররবা
lttablegt
lttrgtlttrgt
lttablegt
িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরট এরকম করর তিরর হরব
রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরটর গিন এমন হরব
বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব
lttable border=1gt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন
21
উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না
এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা
Text Object
Text Object
বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন
বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo
nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে
বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom
nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব
Text Object
Text Object
22
আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব
আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব
lttable border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ
lttable width=300 border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে
অযাডভানসড বটরবল ফরমেট
বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন
বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ
এরি বকারনা Cell padding বনই
এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ
23
রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে
lttable width=284 border=1 cellspacing=0 cellpad-
ding=10gt
lttrgt
lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt
lttablegt
Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন
আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল
বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব
cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক
cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ
24
cell padding ৮ রপরকসল
বটরবল বডোর ৪ রপরকসল
cell spacing ১০ রপরকসল
বটরবল ৩০০ রপরকসল িওড়া
এই বটরবরলর বকাড হরে
lttable width=300 border=4 cellspacing=10 cellpad-
ding=8gt
lttrgt
lttdgtCell Padding 8 pixelslttdgt
lttdgtTable borders are 4 pixelslttdgt
lttrgt
lttrgt
lttdgtCell spacing is 10 pixelslttdgt
lttdgtThe table is 300 pixels widelttdgt
lttrgt
lttablegt
বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা
বটরবরল রিন ভারব রং ব াগ করা াে
1 বটরবরলর বযাকগরাাউনড রং
2 বসরলর বযাকগরাাউনড রং
3 বডোররর রং
রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
8
বনাট এই বটকসরট রক ডারনর উিাহররনর বলখারক এর িথম দরট শে অন ােী Lorem Ipsum বলা হে এরট একরট িযারসকাল লযারটন রিনা া রনেরমি রিনটার গরাারফক আরটেট এবং ওরেব রডজাইনার কিেক ldquoডারমrdquo বটকসট রহরসরব বযবহি হে রডজাইন ওরেব পািা রকংবা রিনটকি বররসউর এর নমনা বিখারি ব রহি বটকসরট English এ আরছ এবং ববরশরভাগ বলাক লযারটন পড়রি পারর না িাই রডজাইন বকমন বিখারব িার জনয এরট বযবহার করা হে সারথ সারথ রক বলখা আরছ িার রিক বথরক মনর াগ সরাে Lorem Ipsum এর ভারলা একরট উৎস হরে এর ওরেব সাইট httpwwwlipsumcom ব খারন এরট সমপরকে আররা জানরি পাররবন এবং নমনা করপ কররি পাররবন এই রটউরটাররোরলর জনয আপনারক Lorem Ipsum বযবহার কররি হরব না আপনার া ইো িাই টাইপ কররি পাররবন
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtLorem ipsum dolor
sit
amet consectetur
adipisicing
elit sed do eiusmod
tempor
incididunt ut labore et
dolore
magna aliqua Ut enim
ad
minim veniam quis
nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea
commodo
consequat Duis aute
irure dolor
in reprehenderit in
voluptate
velit esse cillum
dolore eu
fugiat nulla pariatur
Excepteur
sint occaecat cupidatat
non
proident sunt in culpa
qui
officia deserunt mollit
anim id
est laborumltpgt
ltbodygt
lthtmlgt
9
বকারনা সরনদহ বনই ব রক করর করনটইনার টযাগগরলা ফরমের করা হে িার পযাটানে আপরন লকষয করররছন করনটইনার টযারগর বশরষর অংরশ সবেিা একরট সামরন বহলারনা সলযাস থাকরব এই সলযাসরটই আপনার বরাউজাররক বরল ব টযাগরট এখারনই বশষ এবং বনধ করা হরেরছ
িলন পযারাগরাাফরটর িথম রকছ শে ববালড করর আপনার বটকসটরক আররকট ফরমেট করা াক ডারনর মরিা করর strong টযাগ ব াগ করন বরাউজারর বিখারনার সমে এরট বকমন বিখারে পাইলরট সংরকষন করর িা আপনার বরাউজারর বিখন
বখোল করন শধমাি strong টযারগর মরধয থাকা শেগরলাই ববালড রহরসরব বিখারে রিক এভারবই করনটইনার টযাগগরলা কাজ করর
বটকসটরক ইিারলক করর বিখারনার জনয আররকরট করনটইনার টযাগ আরছ এটা হরলা ltemgtltemgt ববালড করা অংশ বারি বটকসরটর অনয অংরশ এই টযাগরট িরোগ করর বিখন কীভারব কররি হরব িা ডারনর উিাহররণ বিো হরলা
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpltstronggtLorem ipsum
dolorltstronggt sit amet
consectetur adipisicing
elit sed
do eiusmod tempor
incididunt
ut labore et dolore magna
aliqua Ut enim ad minim
veniam quis nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea commodo
consequatltpgt
ltbodygt
lthtmlgt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtltstronggtLorem ipsum
dolorltstronggt sit amet
consectetur
ltemgtadipisicing
elitltemgt sed do eiusmod
tempor incididunt ut
labore et
dolore magna aliqua Ut
enim
ad minim veniam quis
nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea commodo
consequatltpgt
ltbodygt
lthtmlgt
10
বনরটং টযাগ
একরট বলখাংশ বা অনয বকারনা বসতরি একারধক টযাগ িরোগ করা হরল বকান িরম িারির শর এবং বশষ অংশ আসরব িা বনরটং টযাগ িারা বঝারনা হে ব মন বটকসরটর বকারনা অংশ একই সারথ ববালড এবং ইিারলক হরি পারর strong এবং emphasis টযারগর সরিক বনরটং হরব রনরির মরিা
ltstronggtltemgtThis is bold and italicsltemgtltstronggt
strong টযাগরট ldquoবাইররrdquo ব খারন emphasis টযাগরট ldquoবভিররrdquo এবং বটকসরট আরছ মারঝ
আপরন টযাগগরলা এভারবও বনট কররি পাররিন
ltemgtltstronggtThis is bold and italicsltstronggtltemgt
ভলভারব বনট করা টযারগর বারহর-রভির-মারঝ িমরট থাকরব না ভলভারব বনট করা টযারগর একরট উিাহরণ হরে
ltstronggtltemgtThis is bold and italicsltstronggtltemgt
ওরেরবর আরগর রিরন ভলভারব বনট করা টযারগ সাধারণি বকারনা সমসযা কররিা না রকনত ব রহি ওোলেড ওোইড ওরেব তিরর হরে বগরছ িাই বরাউজারগরলারক একই টযানডারডে ি থাকা জররী হরে পড়রছ
বিেমারনর XHTML HTML এর আররা থা থ সংসকরণ রহরসরব বরণেি হরেরছ অরনক বকষরিই এরট সরিক XHTML এর রনেম সরিক বনরটং টযাগ বলখা এবং অনযানয গরতবপণে রবষে রনরিেষট করর আধরনক বরাউজারগরলা এই সকল রনেম ররনষঠভারব বমরন িরল রি আপনার বকাড সরিকভারব XHTML এর রনেম বমরন না িরল িরব িা মরনটরর সরিকভারব নাও বিখারি পারর
HTML এবং XHTML এর রনেম সমপরকে আররা জানরি World Wide Web Consortium এর ওরেব সাইট wwww3xorg রভরজট করন এই সংসথারট ওরেব সংরিষট সকল রজরনরসর মান রনধোরণ করর
অযাডভানসড বটকস ফরমেরটং
বটকসট ববালড এবং ইিারলক করার সারথ সারথ HTML বযবহার করর আররা উননি উপারে িার সজজা পররবিেন করা াে এর মরধয বলখাে রং বিো ফনট রনেনতরন এবং বলখার সাইজ পররবিেন করা ারব
ফনট টযাগ ltfontgtltfontgt এর মাধযরম ফরনটর উপসথাপনা রনেনতরন করা হে ডারনর উিাহররণ ফরনটর সাইজ ৩ রনরিেষট করা আরছ ফরনটর সাইজ ১ বথরক ৭ এর মরধয রনরিেষট করা াে ব খারন ১ সবরিরে বছাট এবং ৭ সবরিরে বড়
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtltfont size=3gtThis
text is
font size 3ltfontgtltpgt
ltbodygt
lthtmlgt
11
রডফলট সাইজ হরে ৩ ববরশরভাগ বকষরিই অরধকাংশ বরাউজার ldquoসাধরণিrdquo এই সাইজরটই বিখাে
আপরন ফরনটর সাইরজর মান ১ বথরক ৭ প েনত করর বিখরি পাররন রনরির িারলকাে সবগরলা সাইরজ বটকসট বকমন বিখারব িা বিখারনা হরলা মরন রাখন ফরনটর সরিক সাইজ অরনক রবষরের উপর রনরভর করর ব মন আপনার মরনটর রিরনর সাইজ
Font size 1
Font size 2
Font size 3
Font size 4
Font size 5
Font size 6
Font size 7
বরাউজাররর বসরটংস অন ােীও ফরনটর সাইজ রনরিেষট করা াে ফনট সাইজ অযারটররবউরট + বা - রিরে এরট করা হে ডারনর উিাহররন ফরনটর সাইজ +২ বযবহার করা হরেরছ এর মারন হরে বরাউজাররর রডফলট সাইজ বথরক ২ সাইজ বড় করর ফনটরট বিখারব
HTML এর রনেম অন ােী এই ফনট সাইজগরলা রভরজটররর বরাউজাররর বসরটংসরক অগরাাহয কররব অনয কথাে আপনার ওরেব পািার রভরজটর রি িার বরাউজাররর ফনট বসরটংসরক কারটামাইজ করর িরব ফনট টযারগ বযবহি সাইজ অযরটররবউট বসটার ldquoরনরজর মরিাrdquo করে রনরে বনে এবং আপনার মরিা কররই বলখারট বিখারব
িাহরল + বা - আসরল রক বলা ারব না কারণ িরিরট বরাউজাররর রডফলট ফনট সাইজ এরকক রকম হরব এবং বটকসট বিখরি বকমন হরব িা রনণেে করা সমভব নে কারণ এরট বমরশন বথরক বমরশরন পররবরিেি হে রনরির উিাহরণরট আপনারক রকছটা ধারণা বিরব রকনত আসরল এরট বকমন বিখারব িা বিখরি আপরন পািারট অনয বমরশরন অনয বরাউজার বসরটংসএ বিখরি পাররন
12
This Font size +1
This Font size +2
This Font size +3
This Font size +4
This Font size +5
This Font size +6
This Font size +7
This is font size -1
This is font size -2
This is font size -3
This is font size -4
This is font size -5
This is font size -6
This is font size -7
এরট সমভব ব উপররর উিাহররণর মরধয ববশ রকছ বিখরি একই রকম লাগরছ এর কারন রকছ বরাউজারর বড় বা বছাট ফনট বিখারনার একরট সীমাররখা বটরন বিে পড়া ােনা এমন বটকসট তিররর বকারনা মারনই হেনা এটা হরি পারর ওরনক বড় রকংবা অরনক বছাট হরল
বটকসট ফরমেট করার আররকরট উপাে হরে রং এর বযবহার রং িার নাম অনসারর রনরিেষট করা াে ব মন red blue বা ForestGreen RGB ( Red Green Blue) মান বযবহার কররও িারির রনধোরণ করা াে ওরেরব রংরক সবরিরে সাধারণ ভারব বযবহার করার উপাে হরে িারির বহকসারডরসরমল মান বযবহার করা িরিযক পিরির উিাহরণ রনরি বিো হরলা
ltfont color=redgtThis is red specified as a color nameltfontgt
ltfont color=25500gtThis is red specified as an RGB valueltfontgt
ltfont color=ff0000gtThis is red specified in hexadecimalltfontgt
13
রং এবং ওরেব
ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে
রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব
ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল
bull Color and the Web
(httplibraryalbanyeduimcwebcolorindexhtm) the
Interactive Media Centers online tutorial
bull Browser Safe Color Chart
(httplibraryalbanyeduimcwebcolorshtm) online chart
of Web safe colors from the Interactive Media Center
bull Color Names Chart
(httpwwww3schoolscomhtmlhtml_colornamesasp) online
chart from the W3 Schools
bull The Browser Safe Color Pallet
(httpwwwlyndacomhexasp) online guide from Lynda
Weinman
বহরডং
ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক
বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে
মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব
I Introduction
A Welcome
II Main Message
A Part 1 - What I did on my summer vacation
1 Getting to the airport
2 Flying on the airplane
a Visiting Alaska
14
b Seeing a bear
3 Flying home
B Summing my vacation
III Conclusion
এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত
বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল
lth1gtThis is heading H1lth1gt
খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব
এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lth1gtThis is an example
of the
h1 taglth1gt
ltbodygt lthtmlgt
15
রলট
রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন
রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল
1 Dinner at 800 pm 2 Lunch at noon
3 Snacks at 1100 am
এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltolgt
ltligtDinner at 800 pmltligt
ltligtLunch at noonltligt
ltligtSnacks at 1100 amltligt
ltolgt
মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব
অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল
bull Apples
bull Oranges
bull grapes
এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltulgt
ltligtApplesltligt
ltligtOrangesltligt
ltligtgrapesltligt
ltulgt
16
আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব
উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর
উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস
রলংক
রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর
দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ
এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল
এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা
lta href=httpwwwalbanyedugtLink to UAlbanyltagt
বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল
lta
href=httpwwwalbanyeducommunicationindexhtmlgtLink
to the Communication Department home page ltagt
এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড
17
ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml
এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন
রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব
lta href=page4htmlgtPrevious Pageltagt
এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না
anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে
lta name=topgtltagt
আর এটারি রলঙক করার জনয
lta href=topgtGo to the top of this pageltagt
ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন
বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব
আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে
lta href=page5htmltopgtTop of Page 5ltagt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lta name=topgtltagt
ltpgtWelcome to my Web
page
You can go to the top of
the
page by lta href=topgtby
clicking hereltagtltpgt
ltbodygt
lthtmlgt
18
বলআউট এবং বটরবল
ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব
ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign
ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে
ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব
বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা
টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ
19
ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয
ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন
বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে
বটরবল টযাগ - lttablegtlttablegt
বটরবল বরা টযাগ - lttrgtlttrgt
বটরবল বসল টযাগ - lttdgtlttdgt
রনরি একরট সাধারণ বটরবল বিখারনা হরলা
এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা
lttablegtlttablegt
বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা
lttablegt
lttablegt
20
এখন আমরা িথম বটরবল বরা টযাগ ি কররবা
lttablegt
lttrgtlttrgt
lttablegt
িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরট এরকম করর তিরর হরব
রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরটর গিন এমন হরব
বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব
lttable border=1gt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন
21
উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না
এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা
Text Object
Text Object
বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন
বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo
nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে
বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom
nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব
Text Object
Text Object
22
আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব
আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব
lttable border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ
lttable width=300 border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে
অযাডভানসড বটরবল ফরমেট
বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন
বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ
এরি বকারনা Cell padding বনই
এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ
23
রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে
lttable width=284 border=1 cellspacing=0 cellpad-
ding=10gt
lttrgt
lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt
lttablegt
Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন
আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল
বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব
cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক
cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ
24
cell padding ৮ রপরকসল
বটরবল বডোর ৪ রপরকসল
cell spacing ১০ রপরকসল
বটরবল ৩০০ রপরকসল িওড়া
এই বটরবরলর বকাড হরে
lttable width=300 border=4 cellspacing=10 cellpad-
ding=8gt
lttrgt
lttdgtCell Padding 8 pixelslttdgt
lttdgtTable borders are 4 pixelslttdgt
lttrgt
lttrgt
lttdgtCell spacing is 10 pixelslttdgt
lttdgtThe table is 300 pixels widelttdgt
lttrgt
lttablegt
বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা
বটরবরল রিন ভারব রং ব াগ করা াে
1 বটরবরলর বযাকগরাাউনড রং
2 বসরলর বযাকগরাাউনড রং
3 বডোররর রং
রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
9
বকারনা সরনদহ বনই ব রক করর করনটইনার টযাগগরলা ফরমের করা হে িার পযাটানে আপরন লকষয করররছন করনটইনার টযারগর বশরষর অংরশ সবেিা একরট সামরন বহলারনা সলযাস থাকরব এই সলযাসরটই আপনার বরাউজাররক বরল ব টযাগরট এখারনই বশষ এবং বনধ করা হরেরছ
িলন পযারাগরাাফরটর িথম রকছ শে ববালড করর আপনার বটকসটরক আররকট ফরমেট করা াক ডারনর মরিা করর strong টযাগ ব াগ করন বরাউজারর বিখারনার সমে এরট বকমন বিখারে পাইলরট সংরকষন করর িা আপনার বরাউজারর বিখন
বখোল করন শধমাি strong টযারগর মরধয থাকা শেগরলাই ববালড রহরসরব বিখারে রিক এভারবই করনটইনার টযাগগরলা কাজ করর
বটকসটরক ইিারলক করর বিখারনার জনয আররকরট করনটইনার টযাগ আরছ এটা হরলা ltemgtltemgt ববালড করা অংশ বারি বটকসরটর অনয অংরশ এই টযাগরট িরোগ করর বিখন কীভারব কররি হরব িা ডারনর উিাহররণ বিো হরলা
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpltstronggtLorem ipsum
dolorltstronggt sit amet
consectetur adipisicing
elit sed
do eiusmod tempor
incididunt
ut labore et dolore magna
aliqua Ut enim ad minim
veniam quis nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea commodo
consequatltpgt
ltbodygt
lthtmlgt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtltstronggtLorem ipsum
dolorltstronggt sit amet
consectetur
ltemgtadipisicing
elitltemgt sed do eiusmod
tempor incididunt ut
labore et
dolore magna aliqua Ut
enim
ad minim veniam quis
nostrud
exercitation ullamco
laboris nisi
ut aliquip ex ea commodo
consequatltpgt
ltbodygt
lthtmlgt
10
বনরটং টযাগ
একরট বলখাংশ বা অনয বকারনা বসতরি একারধক টযাগ িরোগ করা হরল বকান িরম িারির শর এবং বশষ অংশ আসরব িা বনরটং টযাগ িারা বঝারনা হে ব মন বটকসরটর বকারনা অংশ একই সারথ ববালড এবং ইিারলক হরি পারর strong এবং emphasis টযারগর সরিক বনরটং হরব রনরির মরিা
ltstronggtltemgtThis is bold and italicsltemgtltstronggt
strong টযাগরট ldquoবাইররrdquo ব খারন emphasis টযাগরট ldquoবভিররrdquo এবং বটকসরট আরছ মারঝ
আপরন টযাগগরলা এভারবও বনট কররি পাররিন
ltemgtltstronggtThis is bold and italicsltstronggtltemgt
ভলভারব বনট করা টযারগর বারহর-রভির-মারঝ িমরট থাকরব না ভলভারব বনট করা টযারগর একরট উিাহরণ হরে
ltstronggtltemgtThis is bold and italicsltstronggtltemgt
ওরেরবর আরগর রিরন ভলভারব বনট করা টযারগ সাধারণি বকারনা সমসযা কররিা না রকনত ব রহি ওোলেড ওোইড ওরেব তিরর হরে বগরছ িাই বরাউজারগরলারক একই টযানডারডে ি থাকা জররী হরে পড়রছ
বিেমারনর XHTML HTML এর আররা থা থ সংসকরণ রহরসরব বরণেি হরেরছ অরনক বকষরিই এরট সরিক XHTML এর রনেম সরিক বনরটং টযাগ বলখা এবং অনযানয গরতবপণে রবষে রনরিেষট করর আধরনক বরাউজারগরলা এই সকল রনেম ররনষঠভারব বমরন িরল রি আপনার বকাড সরিকভারব XHTML এর রনেম বমরন না িরল িরব িা মরনটরর সরিকভারব নাও বিখারি পারর
HTML এবং XHTML এর রনেম সমপরকে আররা জানরি World Wide Web Consortium এর ওরেব সাইট wwww3xorg রভরজট করন এই সংসথারট ওরেব সংরিষট সকল রজরনরসর মান রনধোরণ করর
অযাডভানসড বটকস ফরমেরটং
বটকসট ববালড এবং ইিারলক করার সারথ সারথ HTML বযবহার করর আররা উননি উপারে িার সজজা পররবিেন করা াে এর মরধয বলখাে রং বিো ফনট রনেনতরন এবং বলখার সাইজ পররবিেন করা ারব
ফনট টযাগ ltfontgtltfontgt এর মাধযরম ফরনটর উপসথাপনা রনেনতরন করা হে ডারনর উিাহররণ ফরনটর সাইজ ৩ রনরিেষট করা আরছ ফরনটর সাইজ ১ বথরক ৭ এর মরধয রনরিেষট করা াে ব খারন ১ সবরিরে বছাট এবং ৭ সবরিরে বড়
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtltfont size=3gtThis
text is
font size 3ltfontgtltpgt
ltbodygt
lthtmlgt
11
রডফলট সাইজ হরে ৩ ববরশরভাগ বকষরিই অরধকাংশ বরাউজার ldquoসাধরণিrdquo এই সাইজরটই বিখাে
আপরন ফরনটর সাইরজর মান ১ বথরক ৭ প েনত করর বিখরি পাররন রনরির িারলকাে সবগরলা সাইরজ বটকসট বকমন বিখারব িা বিখারনা হরলা মরন রাখন ফরনটর সরিক সাইজ অরনক রবষরের উপর রনরভর করর ব মন আপনার মরনটর রিরনর সাইজ
Font size 1
Font size 2
Font size 3
Font size 4
Font size 5
Font size 6
Font size 7
বরাউজাররর বসরটংস অন ােীও ফরনটর সাইজ রনরিেষট করা াে ফনট সাইজ অযারটররবউরট + বা - রিরে এরট করা হে ডারনর উিাহররন ফরনটর সাইজ +২ বযবহার করা হরেরছ এর মারন হরে বরাউজাররর রডফলট সাইজ বথরক ২ সাইজ বড় করর ফনটরট বিখারব
HTML এর রনেম অন ােী এই ফনট সাইজগরলা রভরজটররর বরাউজাররর বসরটংসরক অগরাাহয কররব অনয কথাে আপনার ওরেব পািার রভরজটর রি িার বরাউজাররর ফনট বসরটংসরক কারটামাইজ করর িরব ফনট টযারগ বযবহি সাইজ অযরটররবউট বসটার ldquoরনরজর মরিাrdquo করে রনরে বনে এবং আপনার মরিা কররই বলখারট বিখারব
িাহরল + বা - আসরল রক বলা ারব না কারণ িরিরট বরাউজাররর রডফলট ফনট সাইজ এরকক রকম হরব এবং বটকসট বিখরি বকমন হরব িা রনণেে করা সমভব নে কারণ এরট বমরশন বথরক বমরশরন পররবরিেি হে রনরির উিাহরণরট আপনারক রকছটা ধারণা বিরব রকনত আসরল এরট বকমন বিখারব িা বিখরি আপরন পািারট অনয বমরশরন অনয বরাউজার বসরটংসএ বিখরি পাররন
12
This Font size +1
This Font size +2
This Font size +3
This Font size +4
This Font size +5
This Font size +6
This Font size +7
This is font size -1
This is font size -2
This is font size -3
This is font size -4
This is font size -5
This is font size -6
This is font size -7
এরট সমভব ব উপররর উিাহররণর মরধয ববশ রকছ বিখরি একই রকম লাগরছ এর কারন রকছ বরাউজারর বড় বা বছাট ফনট বিখারনার একরট সীমাররখা বটরন বিে পড়া ােনা এমন বটকসট তিররর বকারনা মারনই হেনা এটা হরি পারর ওরনক বড় রকংবা অরনক বছাট হরল
বটকসট ফরমেট করার আররকরট উপাে হরে রং এর বযবহার রং িার নাম অনসারর রনরিেষট করা াে ব মন red blue বা ForestGreen RGB ( Red Green Blue) মান বযবহার কররও িারির রনধোরণ করা াে ওরেরব রংরক সবরিরে সাধারণ ভারব বযবহার করার উপাে হরে িারির বহকসারডরসরমল মান বযবহার করা িরিযক পিরির উিাহরণ রনরি বিো হরলা
ltfont color=redgtThis is red specified as a color nameltfontgt
ltfont color=25500gtThis is red specified as an RGB valueltfontgt
ltfont color=ff0000gtThis is red specified in hexadecimalltfontgt
13
রং এবং ওরেব
ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে
রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব
ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল
bull Color and the Web
(httplibraryalbanyeduimcwebcolorindexhtm) the
Interactive Media Centers online tutorial
bull Browser Safe Color Chart
(httplibraryalbanyeduimcwebcolorshtm) online chart
of Web safe colors from the Interactive Media Center
bull Color Names Chart
(httpwwww3schoolscomhtmlhtml_colornamesasp) online
chart from the W3 Schools
bull The Browser Safe Color Pallet
(httpwwwlyndacomhexasp) online guide from Lynda
Weinman
বহরডং
ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক
বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে
মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব
I Introduction
A Welcome
II Main Message
A Part 1 - What I did on my summer vacation
1 Getting to the airport
2 Flying on the airplane
a Visiting Alaska
14
b Seeing a bear
3 Flying home
B Summing my vacation
III Conclusion
এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত
বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল
lth1gtThis is heading H1lth1gt
খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব
এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lth1gtThis is an example
of the
h1 taglth1gt
ltbodygt lthtmlgt
15
রলট
রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন
রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল
1 Dinner at 800 pm 2 Lunch at noon
3 Snacks at 1100 am
এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltolgt
ltligtDinner at 800 pmltligt
ltligtLunch at noonltligt
ltligtSnacks at 1100 amltligt
ltolgt
মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব
অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল
bull Apples
bull Oranges
bull grapes
এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltulgt
ltligtApplesltligt
ltligtOrangesltligt
ltligtgrapesltligt
ltulgt
16
আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব
উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর
উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস
রলংক
রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর
দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ
এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল
এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা
lta href=httpwwwalbanyedugtLink to UAlbanyltagt
বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল
lta
href=httpwwwalbanyeducommunicationindexhtmlgtLink
to the Communication Department home page ltagt
এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড
17
ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml
এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন
রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব
lta href=page4htmlgtPrevious Pageltagt
এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না
anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে
lta name=topgtltagt
আর এটারি রলঙক করার জনয
lta href=topgtGo to the top of this pageltagt
ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন
বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব
আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে
lta href=page5htmltopgtTop of Page 5ltagt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lta name=topgtltagt
ltpgtWelcome to my Web
page
You can go to the top of
the
page by lta href=topgtby
clicking hereltagtltpgt
ltbodygt
lthtmlgt
18
বলআউট এবং বটরবল
ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব
ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign
ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে
ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব
বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা
টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ
19
ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয
ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন
বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে
বটরবল টযাগ - lttablegtlttablegt
বটরবল বরা টযাগ - lttrgtlttrgt
বটরবল বসল টযাগ - lttdgtlttdgt
রনরি একরট সাধারণ বটরবল বিখারনা হরলা
এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা
lttablegtlttablegt
বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা
lttablegt
lttablegt
20
এখন আমরা িথম বটরবল বরা টযাগ ি কররবা
lttablegt
lttrgtlttrgt
lttablegt
িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরট এরকম করর তিরর হরব
রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরটর গিন এমন হরব
বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব
lttable border=1gt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন
21
উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না
এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা
Text Object
Text Object
বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন
বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo
nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে
বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom
nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব
Text Object
Text Object
22
আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব
আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব
lttable border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ
lttable width=300 border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে
অযাডভানসড বটরবল ফরমেট
বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন
বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ
এরি বকারনা Cell padding বনই
এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ
23
রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে
lttable width=284 border=1 cellspacing=0 cellpad-
ding=10gt
lttrgt
lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt
lttablegt
Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন
আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল
বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব
cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক
cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ
24
cell padding ৮ রপরকসল
বটরবল বডোর ৪ রপরকসল
cell spacing ১০ রপরকসল
বটরবল ৩০০ রপরকসল িওড়া
এই বটরবরলর বকাড হরে
lttable width=300 border=4 cellspacing=10 cellpad-
ding=8gt
lttrgt
lttdgtCell Padding 8 pixelslttdgt
lttdgtTable borders are 4 pixelslttdgt
lttrgt
lttrgt
lttdgtCell spacing is 10 pixelslttdgt
lttdgtThe table is 300 pixels widelttdgt
lttrgt
lttablegt
বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা
বটরবরল রিন ভারব রং ব াগ করা াে
1 বটরবরলর বযাকগরাাউনড রং
2 বসরলর বযাকগরাাউনড রং
3 বডোররর রং
রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
10
বনরটং টযাগ
একরট বলখাংশ বা অনয বকারনা বসতরি একারধক টযাগ িরোগ করা হরল বকান িরম িারির শর এবং বশষ অংশ আসরব িা বনরটং টযাগ িারা বঝারনা হে ব মন বটকসরটর বকারনা অংশ একই সারথ ববালড এবং ইিারলক হরি পারর strong এবং emphasis টযারগর সরিক বনরটং হরব রনরির মরিা
ltstronggtltemgtThis is bold and italicsltemgtltstronggt
strong টযাগরট ldquoবাইররrdquo ব খারন emphasis টযাগরট ldquoবভিররrdquo এবং বটকসরট আরছ মারঝ
আপরন টযাগগরলা এভারবও বনট কররি পাররিন
ltemgtltstronggtThis is bold and italicsltstronggtltemgt
ভলভারব বনট করা টযারগর বারহর-রভির-মারঝ িমরট থাকরব না ভলভারব বনট করা টযারগর একরট উিাহরণ হরে
ltstronggtltemgtThis is bold and italicsltstronggtltemgt
ওরেরবর আরগর রিরন ভলভারব বনট করা টযারগ সাধারণি বকারনা সমসযা কররিা না রকনত ব রহি ওোলেড ওোইড ওরেব তিরর হরে বগরছ িাই বরাউজারগরলারক একই টযানডারডে ি থাকা জররী হরে পড়রছ
বিেমারনর XHTML HTML এর আররা থা থ সংসকরণ রহরসরব বরণেি হরেরছ অরনক বকষরিই এরট সরিক XHTML এর রনেম সরিক বনরটং টযাগ বলখা এবং অনযানয গরতবপণে রবষে রনরিেষট করর আধরনক বরাউজারগরলা এই সকল রনেম ররনষঠভারব বমরন িরল রি আপনার বকাড সরিকভারব XHTML এর রনেম বমরন না িরল িরব িা মরনটরর সরিকভারব নাও বিখারি পারর
HTML এবং XHTML এর রনেম সমপরকে আররা জানরি World Wide Web Consortium এর ওরেব সাইট wwww3xorg রভরজট করন এই সংসথারট ওরেব সংরিষট সকল রজরনরসর মান রনধোরণ করর
অযাডভানসড বটকস ফরমেরটং
বটকসট ববালড এবং ইিারলক করার সারথ সারথ HTML বযবহার করর আররা উননি উপারে িার সজজা পররবিেন করা াে এর মরধয বলখাে রং বিো ফনট রনেনতরন এবং বলখার সাইজ পররবিেন করা ারব
ফনট টযাগ ltfontgtltfontgt এর মাধযরম ফরনটর উপসথাপনা রনেনতরন করা হে ডারনর উিাহররণ ফরনটর সাইজ ৩ রনরিেষট করা আরছ ফরনটর সাইজ ১ বথরক ৭ এর মরধয রনরিেষট করা াে ব খারন ১ সবরিরে বছাট এবং ৭ সবরিরে বড়
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
ltpgtltfont size=3gtThis
text is
font size 3ltfontgtltpgt
ltbodygt
lthtmlgt
11
রডফলট সাইজ হরে ৩ ববরশরভাগ বকষরিই অরধকাংশ বরাউজার ldquoসাধরণিrdquo এই সাইজরটই বিখাে
আপরন ফরনটর সাইরজর মান ১ বথরক ৭ প েনত করর বিখরি পাররন রনরির িারলকাে সবগরলা সাইরজ বটকসট বকমন বিখারব িা বিখারনা হরলা মরন রাখন ফরনটর সরিক সাইজ অরনক রবষরের উপর রনরভর করর ব মন আপনার মরনটর রিরনর সাইজ
Font size 1
Font size 2
Font size 3
Font size 4
Font size 5
Font size 6
Font size 7
বরাউজাররর বসরটংস অন ােীও ফরনটর সাইজ রনরিেষট করা াে ফনট সাইজ অযারটররবউরট + বা - রিরে এরট করা হে ডারনর উিাহররন ফরনটর সাইজ +২ বযবহার করা হরেরছ এর মারন হরে বরাউজাররর রডফলট সাইজ বথরক ২ সাইজ বড় করর ফনটরট বিখারব
HTML এর রনেম অন ােী এই ফনট সাইজগরলা রভরজটররর বরাউজাররর বসরটংসরক অগরাাহয কররব অনয কথাে আপনার ওরেব পািার রভরজটর রি িার বরাউজাররর ফনট বসরটংসরক কারটামাইজ করর িরব ফনট টযারগ বযবহি সাইজ অযরটররবউট বসটার ldquoরনরজর মরিাrdquo করে রনরে বনে এবং আপনার মরিা কররই বলখারট বিখারব
িাহরল + বা - আসরল রক বলা ারব না কারণ িরিরট বরাউজাররর রডফলট ফনট সাইজ এরকক রকম হরব এবং বটকসট বিখরি বকমন হরব িা রনণেে করা সমভব নে কারণ এরট বমরশন বথরক বমরশরন পররবরিেি হে রনরির উিাহরণরট আপনারক রকছটা ধারণা বিরব রকনত আসরল এরট বকমন বিখারব িা বিখরি আপরন পািারট অনয বমরশরন অনয বরাউজার বসরটংসএ বিখরি পাররন
12
This Font size +1
This Font size +2
This Font size +3
This Font size +4
This Font size +5
This Font size +6
This Font size +7
This is font size -1
This is font size -2
This is font size -3
This is font size -4
This is font size -5
This is font size -6
This is font size -7
এরট সমভব ব উপররর উিাহররণর মরধয ববশ রকছ বিখরি একই রকম লাগরছ এর কারন রকছ বরাউজারর বড় বা বছাট ফনট বিখারনার একরট সীমাররখা বটরন বিে পড়া ােনা এমন বটকসট তিররর বকারনা মারনই হেনা এটা হরি পারর ওরনক বড় রকংবা অরনক বছাট হরল
বটকসট ফরমেট করার আররকরট উপাে হরে রং এর বযবহার রং িার নাম অনসারর রনরিেষট করা াে ব মন red blue বা ForestGreen RGB ( Red Green Blue) মান বযবহার কররও িারির রনধোরণ করা াে ওরেরব রংরক সবরিরে সাধারণ ভারব বযবহার করার উপাে হরে িারির বহকসারডরসরমল মান বযবহার করা িরিযক পিরির উিাহরণ রনরি বিো হরলা
ltfont color=redgtThis is red specified as a color nameltfontgt
ltfont color=25500gtThis is red specified as an RGB valueltfontgt
ltfont color=ff0000gtThis is red specified in hexadecimalltfontgt
13
রং এবং ওরেব
ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে
রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব
ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল
bull Color and the Web
(httplibraryalbanyeduimcwebcolorindexhtm) the
Interactive Media Centers online tutorial
bull Browser Safe Color Chart
(httplibraryalbanyeduimcwebcolorshtm) online chart
of Web safe colors from the Interactive Media Center
bull Color Names Chart
(httpwwww3schoolscomhtmlhtml_colornamesasp) online
chart from the W3 Schools
bull The Browser Safe Color Pallet
(httpwwwlyndacomhexasp) online guide from Lynda
Weinman
বহরডং
ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক
বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে
মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব
I Introduction
A Welcome
II Main Message
A Part 1 - What I did on my summer vacation
1 Getting to the airport
2 Flying on the airplane
a Visiting Alaska
14
b Seeing a bear
3 Flying home
B Summing my vacation
III Conclusion
এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত
বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল
lth1gtThis is heading H1lth1gt
খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব
এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lth1gtThis is an example
of the
h1 taglth1gt
ltbodygt lthtmlgt
15
রলট
রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন
রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল
1 Dinner at 800 pm 2 Lunch at noon
3 Snacks at 1100 am
এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltolgt
ltligtDinner at 800 pmltligt
ltligtLunch at noonltligt
ltligtSnacks at 1100 amltligt
ltolgt
মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব
অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল
bull Apples
bull Oranges
bull grapes
এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltulgt
ltligtApplesltligt
ltligtOrangesltligt
ltligtgrapesltligt
ltulgt
16
আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব
উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর
উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস
রলংক
রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর
দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ
এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল
এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা
lta href=httpwwwalbanyedugtLink to UAlbanyltagt
বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল
lta
href=httpwwwalbanyeducommunicationindexhtmlgtLink
to the Communication Department home page ltagt
এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড
17
ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml
এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন
রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব
lta href=page4htmlgtPrevious Pageltagt
এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না
anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে
lta name=topgtltagt
আর এটারি রলঙক করার জনয
lta href=topgtGo to the top of this pageltagt
ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন
বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব
আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে
lta href=page5htmltopgtTop of Page 5ltagt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lta name=topgtltagt
ltpgtWelcome to my Web
page
You can go to the top of
the
page by lta href=topgtby
clicking hereltagtltpgt
ltbodygt
lthtmlgt
18
বলআউট এবং বটরবল
ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব
ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign
ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে
ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব
বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা
টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ
19
ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয
ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন
বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে
বটরবল টযাগ - lttablegtlttablegt
বটরবল বরা টযাগ - lttrgtlttrgt
বটরবল বসল টযাগ - lttdgtlttdgt
রনরি একরট সাধারণ বটরবল বিখারনা হরলা
এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা
lttablegtlttablegt
বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা
lttablegt
lttablegt
20
এখন আমরা িথম বটরবল বরা টযাগ ি কররবা
lttablegt
lttrgtlttrgt
lttablegt
িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরট এরকম করর তিরর হরব
রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরটর গিন এমন হরব
বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব
lttable border=1gt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন
21
উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না
এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা
Text Object
Text Object
বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন
বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo
nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে
বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom
nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব
Text Object
Text Object
22
আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব
আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব
lttable border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ
lttable width=300 border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে
অযাডভানসড বটরবল ফরমেট
বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন
বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ
এরি বকারনা Cell padding বনই
এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ
23
রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে
lttable width=284 border=1 cellspacing=0 cellpad-
ding=10gt
lttrgt
lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt
lttablegt
Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন
আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল
বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব
cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক
cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ
24
cell padding ৮ রপরকসল
বটরবল বডোর ৪ রপরকসল
cell spacing ১০ রপরকসল
বটরবল ৩০০ রপরকসল িওড়া
এই বটরবরলর বকাড হরে
lttable width=300 border=4 cellspacing=10 cellpad-
ding=8gt
lttrgt
lttdgtCell Padding 8 pixelslttdgt
lttdgtTable borders are 4 pixelslttdgt
lttrgt
lttrgt
lttdgtCell spacing is 10 pixelslttdgt
lttdgtThe table is 300 pixels widelttdgt
lttrgt
lttablegt
বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা
বটরবরল রিন ভারব রং ব াগ করা াে
1 বটরবরলর বযাকগরাাউনড রং
2 বসরলর বযাকগরাাউনড রং
3 বডোররর রং
রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
11
রডফলট সাইজ হরে ৩ ববরশরভাগ বকষরিই অরধকাংশ বরাউজার ldquoসাধরণিrdquo এই সাইজরটই বিখাে
আপরন ফরনটর সাইরজর মান ১ বথরক ৭ প েনত করর বিখরি পাররন রনরির িারলকাে সবগরলা সাইরজ বটকসট বকমন বিখারব িা বিখারনা হরলা মরন রাখন ফরনটর সরিক সাইজ অরনক রবষরের উপর রনরভর করর ব মন আপনার মরনটর রিরনর সাইজ
Font size 1
Font size 2
Font size 3
Font size 4
Font size 5
Font size 6
Font size 7
বরাউজাররর বসরটংস অন ােীও ফরনটর সাইজ রনরিেষট করা াে ফনট সাইজ অযারটররবউরট + বা - রিরে এরট করা হে ডারনর উিাহররন ফরনটর সাইজ +২ বযবহার করা হরেরছ এর মারন হরে বরাউজাররর রডফলট সাইজ বথরক ২ সাইজ বড় করর ফনটরট বিখারব
HTML এর রনেম অন ােী এই ফনট সাইজগরলা রভরজটররর বরাউজাররর বসরটংসরক অগরাাহয কররব অনয কথাে আপনার ওরেব পািার রভরজটর রি িার বরাউজাররর ফনট বসরটংসরক কারটামাইজ করর িরব ফনট টযারগ বযবহি সাইজ অযরটররবউট বসটার ldquoরনরজর মরিাrdquo করে রনরে বনে এবং আপনার মরিা কররই বলখারট বিখারব
িাহরল + বা - আসরল রক বলা ারব না কারণ িরিরট বরাউজাররর রডফলট ফনট সাইজ এরকক রকম হরব এবং বটকসট বিখরি বকমন হরব িা রনণেে করা সমভব নে কারণ এরট বমরশন বথরক বমরশরন পররবরিেি হে রনরির উিাহরণরট আপনারক রকছটা ধারণা বিরব রকনত আসরল এরট বকমন বিখারব িা বিখরি আপরন পািারট অনয বমরশরন অনয বরাউজার বসরটংসএ বিখরি পাররন
12
This Font size +1
This Font size +2
This Font size +3
This Font size +4
This Font size +5
This Font size +6
This Font size +7
This is font size -1
This is font size -2
This is font size -3
This is font size -4
This is font size -5
This is font size -6
This is font size -7
এরট সমভব ব উপররর উিাহররণর মরধয ববশ রকছ বিখরি একই রকম লাগরছ এর কারন রকছ বরাউজারর বড় বা বছাট ফনট বিখারনার একরট সীমাররখা বটরন বিে পড়া ােনা এমন বটকসট তিররর বকারনা মারনই হেনা এটা হরি পারর ওরনক বড় রকংবা অরনক বছাট হরল
বটকসট ফরমেট করার আররকরট উপাে হরে রং এর বযবহার রং িার নাম অনসারর রনরিেষট করা াে ব মন red blue বা ForestGreen RGB ( Red Green Blue) মান বযবহার কররও িারির রনধোরণ করা াে ওরেরব রংরক সবরিরে সাধারণ ভারব বযবহার করার উপাে হরে িারির বহকসারডরসরমল মান বযবহার করা িরিযক পিরির উিাহরণ রনরি বিো হরলা
ltfont color=redgtThis is red specified as a color nameltfontgt
ltfont color=25500gtThis is red specified as an RGB valueltfontgt
ltfont color=ff0000gtThis is red specified in hexadecimalltfontgt
13
রং এবং ওরেব
ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে
রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব
ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল
bull Color and the Web
(httplibraryalbanyeduimcwebcolorindexhtm) the
Interactive Media Centers online tutorial
bull Browser Safe Color Chart
(httplibraryalbanyeduimcwebcolorshtm) online chart
of Web safe colors from the Interactive Media Center
bull Color Names Chart
(httpwwww3schoolscomhtmlhtml_colornamesasp) online
chart from the W3 Schools
bull The Browser Safe Color Pallet
(httpwwwlyndacomhexasp) online guide from Lynda
Weinman
বহরডং
ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক
বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে
মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব
I Introduction
A Welcome
II Main Message
A Part 1 - What I did on my summer vacation
1 Getting to the airport
2 Flying on the airplane
a Visiting Alaska
14
b Seeing a bear
3 Flying home
B Summing my vacation
III Conclusion
এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত
বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল
lth1gtThis is heading H1lth1gt
খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব
এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lth1gtThis is an example
of the
h1 taglth1gt
ltbodygt lthtmlgt
15
রলট
রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন
রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল
1 Dinner at 800 pm 2 Lunch at noon
3 Snacks at 1100 am
এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltolgt
ltligtDinner at 800 pmltligt
ltligtLunch at noonltligt
ltligtSnacks at 1100 amltligt
ltolgt
মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব
অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল
bull Apples
bull Oranges
bull grapes
এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltulgt
ltligtApplesltligt
ltligtOrangesltligt
ltligtgrapesltligt
ltulgt
16
আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব
উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর
উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস
রলংক
রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর
দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ
এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল
এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা
lta href=httpwwwalbanyedugtLink to UAlbanyltagt
বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল
lta
href=httpwwwalbanyeducommunicationindexhtmlgtLink
to the Communication Department home page ltagt
এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড
17
ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml
এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন
রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব
lta href=page4htmlgtPrevious Pageltagt
এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না
anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে
lta name=topgtltagt
আর এটারি রলঙক করার জনয
lta href=topgtGo to the top of this pageltagt
ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন
বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব
আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে
lta href=page5htmltopgtTop of Page 5ltagt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lta name=topgtltagt
ltpgtWelcome to my Web
page
You can go to the top of
the
page by lta href=topgtby
clicking hereltagtltpgt
ltbodygt
lthtmlgt
18
বলআউট এবং বটরবল
ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব
ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign
ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে
ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব
বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা
টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ
19
ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয
ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন
বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে
বটরবল টযাগ - lttablegtlttablegt
বটরবল বরা টযাগ - lttrgtlttrgt
বটরবল বসল টযাগ - lttdgtlttdgt
রনরি একরট সাধারণ বটরবল বিখারনা হরলা
এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা
lttablegtlttablegt
বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা
lttablegt
lttablegt
20
এখন আমরা িথম বটরবল বরা টযাগ ি কররবা
lttablegt
lttrgtlttrgt
lttablegt
িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরট এরকম করর তিরর হরব
রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরটর গিন এমন হরব
বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব
lttable border=1gt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন
21
উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না
এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা
Text Object
Text Object
বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন
বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo
nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে
বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom
nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব
Text Object
Text Object
22
আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব
আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব
lttable border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ
lttable width=300 border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে
অযাডভানসড বটরবল ফরমেট
বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন
বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ
এরি বকারনা Cell padding বনই
এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ
23
রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে
lttable width=284 border=1 cellspacing=0 cellpad-
ding=10gt
lttrgt
lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt
lttablegt
Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন
আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল
বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব
cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক
cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ
24
cell padding ৮ রপরকসল
বটরবল বডোর ৪ রপরকসল
cell spacing ১০ রপরকসল
বটরবল ৩০০ রপরকসল িওড়া
এই বটরবরলর বকাড হরে
lttable width=300 border=4 cellspacing=10 cellpad-
ding=8gt
lttrgt
lttdgtCell Padding 8 pixelslttdgt
lttdgtTable borders are 4 pixelslttdgt
lttrgt
lttrgt
lttdgtCell spacing is 10 pixelslttdgt
lttdgtThe table is 300 pixels widelttdgt
lttrgt
lttablegt
বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা
বটরবরল রিন ভারব রং ব াগ করা াে
1 বটরবরলর বযাকগরাাউনড রং
2 বসরলর বযাকগরাাউনড রং
3 বডোররর রং
রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
12
This Font size +1
This Font size +2
This Font size +3
This Font size +4
This Font size +5
This Font size +6
This Font size +7
This is font size -1
This is font size -2
This is font size -3
This is font size -4
This is font size -5
This is font size -6
This is font size -7
এরট সমভব ব উপররর উিাহররণর মরধয ববশ রকছ বিখরি একই রকম লাগরছ এর কারন রকছ বরাউজারর বড় বা বছাট ফনট বিখারনার একরট সীমাররখা বটরন বিে পড়া ােনা এমন বটকসট তিররর বকারনা মারনই হেনা এটা হরি পারর ওরনক বড় রকংবা অরনক বছাট হরল
বটকসট ফরমেট করার আররকরট উপাে হরে রং এর বযবহার রং িার নাম অনসারর রনরিেষট করা াে ব মন red blue বা ForestGreen RGB ( Red Green Blue) মান বযবহার কররও িারির রনধোরণ করা াে ওরেরব রংরক সবরিরে সাধারণ ভারব বযবহার করার উপাে হরে িারির বহকসারডরসরমল মান বযবহার করা িরিযক পিরির উিাহরণ রনরি বিো হরলা
ltfont color=redgtThis is red specified as a color nameltfontgt
ltfont color=25500gtThis is red specified as an RGB valueltfontgt
ltfont color=ff0000gtThis is red specified in hexadecimalltfontgt
13
রং এবং ওরেব
ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে
রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব
ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল
bull Color and the Web
(httplibraryalbanyeduimcwebcolorindexhtm) the
Interactive Media Centers online tutorial
bull Browser Safe Color Chart
(httplibraryalbanyeduimcwebcolorshtm) online chart
of Web safe colors from the Interactive Media Center
bull Color Names Chart
(httpwwww3schoolscomhtmlhtml_colornamesasp) online
chart from the W3 Schools
bull The Browser Safe Color Pallet
(httpwwwlyndacomhexasp) online guide from Lynda
Weinman
বহরডং
ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক
বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে
মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব
I Introduction
A Welcome
II Main Message
A Part 1 - What I did on my summer vacation
1 Getting to the airport
2 Flying on the airplane
a Visiting Alaska
14
b Seeing a bear
3 Flying home
B Summing my vacation
III Conclusion
এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত
বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল
lth1gtThis is heading H1lth1gt
খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব
এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lth1gtThis is an example
of the
h1 taglth1gt
ltbodygt lthtmlgt
15
রলট
রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন
রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল
1 Dinner at 800 pm 2 Lunch at noon
3 Snacks at 1100 am
এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltolgt
ltligtDinner at 800 pmltligt
ltligtLunch at noonltligt
ltligtSnacks at 1100 amltligt
ltolgt
মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব
অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল
bull Apples
bull Oranges
bull grapes
এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltulgt
ltligtApplesltligt
ltligtOrangesltligt
ltligtgrapesltligt
ltulgt
16
আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব
উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর
উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস
রলংক
রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর
দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ
এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল
এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা
lta href=httpwwwalbanyedugtLink to UAlbanyltagt
বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল
lta
href=httpwwwalbanyeducommunicationindexhtmlgtLink
to the Communication Department home page ltagt
এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড
17
ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml
এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন
রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব
lta href=page4htmlgtPrevious Pageltagt
এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না
anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে
lta name=topgtltagt
আর এটারি রলঙক করার জনয
lta href=topgtGo to the top of this pageltagt
ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন
বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব
আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে
lta href=page5htmltopgtTop of Page 5ltagt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lta name=topgtltagt
ltpgtWelcome to my Web
page
You can go to the top of
the
page by lta href=topgtby
clicking hereltagtltpgt
ltbodygt
lthtmlgt
18
বলআউট এবং বটরবল
ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব
ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign
ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে
ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব
বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা
টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ
19
ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয
ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন
বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে
বটরবল টযাগ - lttablegtlttablegt
বটরবল বরা টযাগ - lttrgtlttrgt
বটরবল বসল টযাগ - lttdgtlttdgt
রনরি একরট সাধারণ বটরবল বিখারনা হরলা
এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা
lttablegtlttablegt
বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা
lttablegt
lttablegt
20
এখন আমরা িথম বটরবল বরা টযাগ ি কররবা
lttablegt
lttrgtlttrgt
lttablegt
িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরট এরকম করর তিরর হরব
রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরটর গিন এমন হরব
বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব
lttable border=1gt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন
21
উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না
এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা
Text Object
Text Object
বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন
বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo
nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে
বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom
nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব
Text Object
Text Object
22
আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব
আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব
lttable border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ
lttable width=300 border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে
অযাডভানসড বটরবল ফরমেট
বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন
বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ
এরি বকারনা Cell padding বনই
এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ
23
রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে
lttable width=284 border=1 cellspacing=0 cellpad-
ding=10gt
lttrgt
lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt
lttablegt
Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন
আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল
বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব
cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক
cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ
24
cell padding ৮ রপরকসল
বটরবল বডোর ৪ রপরকসল
cell spacing ১০ রপরকসল
বটরবল ৩০০ রপরকসল িওড়া
এই বটরবরলর বকাড হরে
lttable width=300 border=4 cellspacing=10 cellpad-
ding=8gt
lttrgt
lttdgtCell Padding 8 pixelslttdgt
lttdgtTable borders are 4 pixelslttdgt
lttrgt
lttrgt
lttdgtCell spacing is 10 pixelslttdgt
lttdgtThe table is 300 pixels widelttdgt
lttrgt
lttablegt
বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা
বটরবরল রিন ভারব রং ব াগ করা াে
1 বটরবরলর বযাকগরাাউনড রং
2 বসরলর বযাকগরাাউনড রং
3 বডোররর রং
রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
13
রং এবং ওরেব
ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে
রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব
ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল
bull Color and the Web
(httplibraryalbanyeduimcwebcolorindexhtm) the
Interactive Media Centers online tutorial
bull Browser Safe Color Chart
(httplibraryalbanyeduimcwebcolorshtm) online chart
of Web safe colors from the Interactive Media Center
bull Color Names Chart
(httpwwww3schoolscomhtmlhtml_colornamesasp) online
chart from the W3 Schools
bull The Browser Safe Color Pallet
(httpwwwlyndacomhexasp) online guide from Lynda
Weinman
বহরডং
ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক
বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে
মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব
I Introduction
A Welcome
II Main Message
A Part 1 - What I did on my summer vacation
1 Getting to the airport
2 Flying on the airplane
a Visiting Alaska
14
b Seeing a bear
3 Flying home
B Summing my vacation
III Conclusion
এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত
বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল
lth1gtThis is heading H1lth1gt
খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব
এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lth1gtThis is an example
of the
h1 taglth1gt
ltbodygt lthtmlgt
15
রলট
রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন
রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল
1 Dinner at 800 pm 2 Lunch at noon
3 Snacks at 1100 am
এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltolgt
ltligtDinner at 800 pmltligt
ltligtLunch at noonltligt
ltligtSnacks at 1100 amltligt
ltolgt
মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব
অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল
bull Apples
bull Oranges
bull grapes
এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltulgt
ltligtApplesltligt
ltligtOrangesltligt
ltligtgrapesltligt
ltulgt
16
আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব
উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর
উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস
রলংক
রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর
দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ
এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল
এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা
lta href=httpwwwalbanyedugtLink to UAlbanyltagt
বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল
lta
href=httpwwwalbanyeducommunicationindexhtmlgtLink
to the Communication Department home page ltagt
এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড
17
ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml
এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন
রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব
lta href=page4htmlgtPrevious Pageltagt
এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না
anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে
lta name=topgtltagt
আর এটারি রলঙক করার জনয
lta href=topgtGo to the top of this pageltagt
ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন
বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব
আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে
lta href=page5htmltopgtTop of Page 5ltagt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lta name=topgtltagt
ltpgtWelcome to my Web
page
You can go to the top of
the
page by lta href=topgtby
clicking hereltagtltpgt
ltbodygt
lthtmlgt
18
বলআউট এবং বটরবল
ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব
ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign
ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে
ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব
বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা
টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ
19
ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয
ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন
বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে
বটরবল টযাগ - lttablegtlttablegt
বটরবল বরা টযাগ - lttrgtlttrgt
বটরবল বসল টযাগ - lttdgtlttdgt
রনরি একরট সাধারণ বটরবল বিখারনা হরলা
এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা
lttablegtlttablegt
বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা
lttablegt
lttablegt
20
এখন আমরা িথম বটরবল বরা টযাগ ি কররবা
lttablegt
lttrgtlttrgt
lttablegt
িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরট এরকম করর তিরর হরব
রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরটর গিন এমন হরব
বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব
lttable border=1gt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন
21
উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না
এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা
Text Object
Text Object
বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন
বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo
nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে
বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom
nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব
Text Object
Text Object
22
আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব
আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব
lttable border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ
lttable width=300 border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে
অযাডভানসড বটরবল ফরমেট
বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন
বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ
এরি বকারনা Cell padding বনই
এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ
23
রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে
lttable width=284 border=1 cellspacing=0 cellpad-
ding=10gt
lttrgt
lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt
lttablegt
Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন
আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল
বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব
cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক
cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ
24
cell padding ৮ রপরকসল
বটরবল বডোর ৪ রপরকসল
cell spacing ১০ রপরকসল
বটরবল ৩০০ রপরকসল িওড়া
এই বটরবরলর বকাড হরে
lttable width=300 border=4 cellspacing=10 cellpad-
ding=8gt
lttrgt
lttdgtCell Padding 8 pixelslttdgt
lttdgtTable borders are 4 pixelslttdgt
lttrgt
lttrgt
lttdgtCell spacing is 10 pixelslttdgt
lttdgtThe table is 300 pixels widelttdgt
lttrgt
lttablegt
বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা
বটরবরল রিন ভারব রং ব াগ করা াে
1 বটরবরলর বযাকগরাাউনড রং
2 বসরলর বযাকগরাাউনড রং
3 বডোররর রং
রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
14
b Seeing a bear
3 Flying home
B Summing my vacation
III Conclusion
এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত
বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল
lth1gtThis is heading H1lth1gt
খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব
এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lth1gtThis is an example
of the
h1 taglth1gt
ltbodygt lthtmlgt
15
রলট
রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন
রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল
1 Dinner at 800 pm 2 Lunch at noon
3 Snacks at 1100 am
এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltolgt
ltligtDinner at 800 pmltligt
ltligtLunch at noonltligt
ltligtSnacks at 1100 amltligt
ltolgt
মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব
অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল
bull Apples
bull Oranges
bull grapes
এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltulgt
ltligtApplesltligt
ltligtOrangesltligt
ltligtgrapesltligt
ltulgt
16
আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব
উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর
উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস
রলংক
রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর
দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ
এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল
এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা
lta href=httpwwwalbanyedugtLink to UAlbanyltagt
বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল
lta
href=httpwwwalbanyeducommunicationindexhtmlgtLink
to the Communication Department home page ltagt
এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড
17
ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml
এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন
রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব
lta href=page4htmlgtPrevious Pageltagt
এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না
anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে
lta name=topgtltagt
আর এটারি রলঙক করার জনয
lta href=topgtGo to the top of this pageltagt
ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন
বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব
আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে
lta href=page5htmltopgtTop of Page 5ltagt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lta name=topgtltagt
ltpgtWelcome to my Web
page
You can go to the top of
the
page by lta href=topgtby
clicking hereltagtltpgt
ltbodygt
lthtmlgt
18
বলআউট এবং বটরবল
ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব
ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign
ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে
ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব
বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা
টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ
19
ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয
ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন
বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে
বটরবল টযাগ - lttablegtlttablegt
বটরবল বরা টযাগ - lttrgtlttrgt
বটরবল বসল টযাগ - lttdgtlttdgt
রনরি একরট সাধারণ বটরবল বিখারনা হরলা
এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা
lttablegtlttablegt
বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা
lttablegt
lttablegt
20
এখন আমরা িথম বটরবল বরা টযাগ ি কররবা
lttablegt
lttrgtlttrgt
lttablegt
িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরট এরকম করর তিরর হরব
রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরটর গিন এমন হরব
বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব
lttable border=1gt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন
21
উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না
এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা
Text Object
Text Object
বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন
বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo
nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে
বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom
nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব
Text Object
Text Object
22
আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব
আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব
lttable border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ
lttable width=300 border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে
অযাডভানসড বটরবল ফরমেট
বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন
বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ
এরি বকারনা Cell padding বনই
এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ
23
রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে
lttable width=284 border=1 cellspacing=0 cellpad-
ding=10gt
lttrgt
lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt
lttablegt
Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন
আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল
বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব
cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক
cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ
24
cell padding ৮ রপরকসল
বটরবল বডোর ৪ রপরকসল
cell spacing ১০ রপরকসল
বটরবল ৩০০ রপরকসল িওড়া
এই বটরবরলর বকাড হরে
lttable width=300 border=4 cellspacing=10 cellpad-
ding=8gt
lttrgt
lttdgtCell Padding 8 pixelslttdgt
lttdgtTable borders are 4 pixelslttdgt
lttrgt
lttrgt
lttdgtCell spacing is 10 pixelslttdgt
lttdgtThe table is 300 pixels widelttdgt
lttrgt
lttablegt
বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা
বটরবরল রিন ভারব রং ব াগ করা াে
1 বটরবরলর বযাকগরাাউনড রং
2 বসরলর বযাকগরাাউনড রং
3 বডোররর রং
রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
15
রলট
রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন
রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল
1 Dinner at 800 pm 2 Lunch at noon
3 Snacks at 1100 am
এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltolgt
ltligtDinner at 800 pmltligt
ltligtLunch at noonltligt
ltligtSnacks at 1100 amltligt
ltolgt
মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব
অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল
bull Apples
bull Oranges
bull grapes
এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল
ltulgt
ltligtApplesltligt
ltligtOrangesltligt
ltligtgrapesltligt
ltulgt
16
আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব
উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর
উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস
রলংক
রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর
দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ
এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল
এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা
lta href=httpwwwalbanyedugtLink to UAlbanyltagt
বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল
lta
href=httpwwwalbanyeducommunicationindexhtmlgtLink
to the Communication Department home page ltagt
এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড
17
ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml
এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন
রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব
lta href=page4htmlgtPrevious Pageltagt
এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না
anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে
lta name=topgtltagt
আর এটারি রলঙক করার জনয
lta href=topgtGo to the top of this pageltagt
ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন
বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব
আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে
lta href=page5htmltopgtTop of Page 5ltagt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lta name=topgtltagt
ltpgtWelcome to my Web
page
You can go to the top of
the
page by lta href=topgtby
clicking hereltagtltpgt
ltbodygt
lthtmlgt
18
বলআউট এবং বটরবল
ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব
ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign
ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে
ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব
বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা
টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ
19
ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয
ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন
বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে
বটরবল টযাগ - lttablegtlttablegt
বটরবল বরা টযাগ - lttrgtlttrgt
বটরবল বসল টযাগ - lttdgtlttdgt
রনরি একরট সাধারণ বটরবল বিখারনা হরলা
এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা
lttablegtlttablegt
বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা
lttablegt
lttablegt
20
এখন আমরা িথম বটরবল বরা টযাগ ি কররবা
lttablegt
lttrgtlttrgt
lttablegt
িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরট এরকম করর তিরর হরব
রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরটর গিন এমন হরব
বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব
lttable border=1gt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন
21
উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না
এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা
Text Object
Text Object
বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন
বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo
nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে
বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom
nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব
Text Object
Text Object
22
আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব
আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব
lttable border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ
lttable width=300 border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে
অযাডভানসড বটরবল ফরমেট
বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন
বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ
এরি বকারনা Cell padding বনই
এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ
23
রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে
lttable width=284 border=1 cellspacing=0 cellpad-
ding=10gt
lttrgt
lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt
lttablegt
Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন
আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল
বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব
cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক
cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ
24
cell padding ৮ রপরকসল
বটরবল বডোর ৪ রপরকসল
cell spacing ১০ রপরকসল
বটরবল ৩০০ রপরকসল িওড়া
এই বটরবরলর বকাড হরে
lttable width=300 border=4 cellspacing=10 cellpad-
ding=8gt
lttrgt
lttdgtCell Padding 8 pixelslttdgt
lttdgtTable borders are 4 pixelslttdgt
lttrgt
lttrgt
lttdgtCell spacing is 10 pixelslttdgt
lttdgtThe table is 300 pixels widelttdgt
lttrgt
lttablegt
বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা
বটরবরল রিন ভারব রং ব াগ করা াে
1 বটরবরলর বযাকগরাাউনড রং
2 বসরলর বযাকগরাাউনড রং
3 বডোররর রং
রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
16
আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব
উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর
উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস
রলংক
রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর
দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ
এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল
এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা
lta href=httpwwwalbanyedugtLink to UAlbanyltagt
বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল
lta
href=httpwwwalbanyeducommunicationindexhtmlgtLink
to the Communication Department home page ltagt
এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড
17
ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml
এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন
রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব
lta href=page4htmlgtPrevious Pageltagt
এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না
anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে
lta name=topgtltagt
আর এটারি রলঙক করার জনয
lta href=topgtGo to the top of this pageltagt
ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন
বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব
আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে
lta href=page5htmltopgtTop of Page 5ltagt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lta name=topgtltagt
ltpgtWelcome to my Web
page
You can go to the top of
the
page by lta href=topgtby
clicking hereltagtltpgt
ltbodygt
lthtmlgt
18
বলআউট এবং বটরবল
ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব
ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign
ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে
ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব
বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা
টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ
19
ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয
ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন
বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে
বটরবল টযাগ - lttablegtlttablegt
বটরবল বরা টযাগ - lttrgtlttrgt
বটরবল বসল টযাগ - lttdgtlttdgt
রনরি একরট সাধারণ বটরবল বিখারনা হরলা
এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা
lttablegtlttablegt
বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা
lttablegt
lttablegt
20
এখন আমরা িথম বটরবল বরা টযাগ ি কররবা
lttablegt
lttrgtlttrgt
lttablegt
িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরট এরকম করর তিরর হরব
রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরটর গিন এমন হরব
বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব
lttable border=1gt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন
21
উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না
এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা
Text Object
Text Object
বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন
বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo
nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে
বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom
nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব
Text Object
Text Object
22
আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব
আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব
lttable border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ
lttable width=300 border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে
অযাডভানসড বটরবল ফরমেট
বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন
বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ
এরি বকারনা Cell padding বনই
এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ
23
রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে
lttable width=284 border=1 cellspacing=0 cellpad-
ding=10gt
lttrgt
lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt
lttablegt
Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন
আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল
বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব
cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক
cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ
24
cell padding ৮ রপরকসল
বটরবল বডোর ৪ রপরকসল
cell spacing ১০ রপরকসল
বটরবল ৩০০ রপরকসল িওড়া
এই বটরবরলর বকাড হরে
lttable width=300 border=4 cellspacing=10 cellpad-
ding=8gt
lttrgt
lttdgtCell Padding 8 pixelslttdgt
lttdgtTable borders are 4 pixelslttdgt
lttrgt
lttrgt
lttdgtCell spacing is 10 pixelslttdgt
lttdgtThe table is 300 pixels widelttdgt
lttrgt
lttablegt
বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা
বটরবরল রিন ভারব রং ব াগ করা াে
1 বটরবরলর বযাকগরাাউনড রং
2 বসরলর বযাকগরাাউনড রং
3 বডোররর রং
রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
17
ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml
এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন
রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব
lta href=page4htmlgtPrevious Pageltagt
এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না
anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে
lta name=topgtltagt
আর এটারি রলঙক করার জনয
lta href=topgtGo to the top of this pageltagt
ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন
বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব
আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে
lta href=page5htmltopgtTop of Page 5ltagt
lthtmlgt
ltheadgt
lttitlegtMy Web
Pagelttitlegt
ltheadgt
ltbodygt
lta name=topgtltagt
ltpgtWelcome to my Web
page
You can go to the top of
the
page by lta href=topgtby
clicking hereltagtltpgt
ltbodygt
lthtmlgt
18
বলআউট এবং বটরবল
ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব
ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign
ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে
ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব
বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা
টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ
19
ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয
ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন
বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে
বটরবল টযাগ - lttablegtlttablegt
বটরবল বরা টযাগ - lttrgtlttrgt
বটরবল বসল টযাগ - lttdgtlttdgt
রনরি একরট সাধারণ বটরবল বিখারনা হরলা
এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা
lttablegtlttablegt
বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা
lttablegt
lttablegt
20
এখন আমরা িথম বটরবল বরা টযাগ ি কররবা
lttablegt
lttrgtlttrgt
lttablegt
িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরট এরকম করর তিরর হরব
রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরটর গিন এমন হরব
বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব
lttable border=1gt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন
21
উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না
এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা
Text Object
Text Object
বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন
বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo
nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে
বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom
nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব
Text Object
Text Object
22
আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব
আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব
lttable border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ
lttable width=300 border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে
অযাডভানসড বটরবল ফরমেট
বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন
বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ
এরি বকারনা Cell padding বনই
এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ
23
রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে
lttable width=284 border=1 cellspacing=0 cellpad-
ding=10gt
lttrgt
lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt
lttablegt
Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন
আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল
বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব
cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক
cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ
24
cell padding ৮ রপরকসল
বটরবল বডোর ৪ রপরকসল
cell spacing ১০ রপরকসল
বটরবল ৩০০ রপরকসল িওড়া
এই বটরবরলর বকাড হরে
lttable width=300 border=4 cellspacing=10 cellpad-
ding=8gt
lttrgt
lttdgtCell Padding 8 pixelslttdgt
lttdgtTable borders are 4 pixelslttdgt
lttrgt
lttrgt
lttdgtCell spacing is 10 pixelslttdgt
lttdgtThe table is 300 pixels widelttdgt
lttrgt
lttablegt
বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা
বটরবরল রিন ভারব রং ব াগ করা াে
1 বটরবরলর বযাকগরাাউনড রং
2 বসরলর বযাকগরাাউনড রং
3 বডোররর রং
রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
18
বলআউট এবং বটরবল
ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব
ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign
ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে
ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব
বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা
টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ
19
ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয
ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন
বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে
বটরবল টযাগ - lttablegtlttablegt
বটরবল বরা টযাগ - lttrgtlttrgt
বটরবল বসল টযাগ - lttdgtlttdgt
রনরি একরট সাধারণ বটরবল বিখারনা হরলা
এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা
lttablegtlttablegt
বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা
lttablegt
lttablegt
20
এখন আমরা িথম বটরবল বরা টযাগ ি কররবা
lttablegt
lttrgtlttrgt
lttablegt
িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরট এরকম করর তিরর হরব
রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরটর গিন এমন হরব
বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব
lttable border=1gt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন
21
উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না
এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা
Text Object
Text Object
বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন
বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo
nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে
বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom
nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব
Text Object
Text Object
22
আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব
আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব
lttable border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ
lttable width=300 border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে
অযাডভানসড বটরবল ফরমেট
বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন
বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ
এরি বকারনা Cell padding বনই
এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ
23
রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে
lttable width=284 border=1 cellspacing=0 cellpad-
ding=10gt
lttrgt
lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt
lttablegt
Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন
আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল
বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব
cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক
cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ
24
cell padding ৮ রপরকসল
বটরবল বডোর ৪ রপরকসল
cell spacing ১০ রপরকসল
বটরবল ৩০০ রপরকসল িওড়া
এই বটরবরলর বকাড হরে
lttable width=300 border=4 cellspacing=10 cellpad-
ding=8gt
lttrgt
lttdgtCell Padding 8 pixelslttdgt
lttdgtTable borders are 4 pixelslttdgt
lttrgt
lttrgt
lttdgtCell spacing is 10 pixelslttdgt
lttdgtThe table is 300 pixels widelttdgt
lttrgt
lttablegt
বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা
বটরবরল রিন ভারব রং ব াগ করা াে
1 বটরবরলর বযাকগরাাউনড রং
2 বসরলর বযাকগরাাউনড রং
3 বডোররর রং
রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
19
ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয
ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন
বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে
বটরবল টযাগ - lttablegtlttablegt
বটরবল বরা টযাগ - lttrgtlttrgt
বটরবল বসল টযাগ - lttdgtlttdgt
রনরি একরট সাধারণ বটরবল বিখারনা হরলা
এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা
lttablegtlttablegt
বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা
lttablegt
lttablegt
20
এখন আমরা িথম বটরবল বরা টযাগ ি কররবা
lttablegt
lttrgtlttrgt
lttablegt
িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরট এরকম করর তিরর হরব
রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরটর গিন এমন হরব
বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব
lttable border=1gt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন
21
উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না
এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা
Text Object
Text Object
বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন
বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo
nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে
বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom
nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব
Text Object
Text Object
22
আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব
আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব
lttable border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ
lttable width=300 border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে
অযাডভানসড বটরবল ফরমেট
বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন
বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ
এরি বকারনা Cell padding বনই
এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ
23
রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে
lttable width=284 border=1 cellspacing=0 cellpad-
ding=10gt
lttrgt
lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt
lttablegt
Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন
আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল
বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব
cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক
cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ
24
cell padding ৮ রপরকসল
বটরবল বডোর ৪ রপরকসল
cell spacing ১০ রপরকসল
বটরবল ৩০০ রপরকসল িওড়া
এই বটরবরলর বকাড হরে
lttable width=300 border=4 cellspacing=10 cellpad-
ding=8gt
lttrgt
lttdgtCell Padding 8 pixelslttdgt
lttdgtTable borders are 4 pixelslttdgt
lttrgt
lttrgt
lttdgtCell spacing is 10 pixelslttdgt
lttdgtThe table is 300 pixels widelttdgt
lttrgt
lttablegt
বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা
বটরবরল রিন ভারব রং ব াগ করা াে
1 বটরবরলর বযাকগরাাউনড রং
2 বসরলর বযাকগরাাউনড রং
3 বডোররর রং
রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
20
এখন আমরা িথম বটরবল বরা টযাগ ি কররবা
lttablegt
lttrgtlttrgt
lttablegt
িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরট এরকম করর তিরর হরব
রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন
lttablegt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
এখন বটরবলরটর গিন এমন হরব
বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব
lttable border=1gt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt
lttablegt
বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন
21
উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না
এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা
Text Object
Text Object
বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন
বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo
nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে
বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom
nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব
Text Object
Text Object
22
আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব
আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব
lttable border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ
lttable width=300 border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে
অযাডভানসড বটরবল ফরমেট
বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন
বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ
এরি বকারনা Cell padding বনই
এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ
23
রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে
lttable width=284 border=1 cellspacing=0 cellpad-
ding=10gt
lttrgt
lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt
lttablegt
Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন
আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল
বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব
cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক
cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ
24
cell padding ৮ রপরকসল
বটরবল বডোর ৪ রপরকসল
cell spacing ১০ রপরকসল
বটরবল ৩০০ রপরকসল িওড়া
এই বটরবরলর বকাড হরে
lttable width=300 border=4 cellspacing=10 cellpad-
ding=8gt
lttrgt
lttdgtCell Padding 8 pixelslttdgt
lttdgtTable borders are 4 pixelslttdgt
lttrgt
lttrgt
lttdgtCell spacing is 10 pixelslttdgt
lttdgtThe table is 300 pixels widelttdgt
lttrgt
lttablegt
বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা
বটরবরল রিন ভারব রং ব াগ করা াে
1 বটরবরলর বযাকগরাাউনড রং
2 বসরলর বযাকগরাাউনড রং
3 বডোররর রং
রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
21
উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না
এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা
Text Object
Text Object
বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন
বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo
nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে
বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom
nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব
Text Object
Text Object
22
আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব
আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব
lttable border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ
lttable width=300 border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে
অযাডভানসড বটরবল ফরমেট
বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন
বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ
এরি বকারনা Cell padding বনই
এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ
23
রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে
lttable width=284 border=1 cellspacing=0 cellpad-
ding=10gt
lttrgt
lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt
lttablegt
Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন
আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল
বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব
cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক
cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ
24
cell padding ৮ রপরকসল
বটরবল বডোর ৪ রপরকসল
cell spacing ১০ রপরকসল
বটরবল ৩০০ রপরকসল িওড়া
এই বটরবরলর বকাড হরে
lttable width=300 border=4 cellspacing=10 cellpad-
ding=8gt
lttrgt
lttdgtCell Padding 8 pixelslttdgt
lttdgtTable borders are 4 pixelslttdgt
lttrgt
lttrgt
lttdgtCell spacing is 10 pixelslttdgt
lttdgtThe table is 300 pixels widelttdgt
lttrgt
lttablegt
বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা
বটরবরল রিন ভারব রং ব াগ করা াে
1 বটরবরলর বযাকগরাাউনড রং
2 বসরলর বযাকগরাাউনড রং
3 বডোররর রং
রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
22
আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব
আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব
lttable border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ
lttable width=300 border=1gt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt
lttablegt
এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে
অযাডভানসড বটরবল ফরমেট
বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন
বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ
এরি বকারনা Cell padding বনই
এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ
23
রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে
lttable width=284 border=1 cellspacing=0 cellpad-
ding=10gt
lttrgt
lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt
lttablegt
Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন
আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল
বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব
cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক
cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ
24
cell padding ৮ রপরকসল
বটরবল বডোর ৪ রপরকসল
cell spacing ১০ রপরকসল
বটরবল ৩০০ রপরকসল িওড়া
এই বটরবরলর বকাড হরে
lttable width=300 border=4 cellspacing=10 cellpad-
ding=8gt
lttrgt
lttdgtCell Padding 8 pixelslttdgt
lttdgtTable borders are 4 pixelslttdgt
lttrgt
lttrgt
lttdgtCell spacing is 10 pixelslttdgt
lttdgtThe table is 300 pixels widelttdgt
lttrgt
lttablegt
বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা
বটরবরল রিন ভারব রং ব াগ করা াে
1 বটরবরলর বযাকগরাাউনড রং
2 বসরলর বযাকগরাাউনড রং
3 বডোররর রং
রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
23
রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে
lttable width=284 border=1 cellspacing=0 cellpad-
ding=10gt
lttrgt
lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt
lttablegt
Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন
আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল
বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব
cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক
cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ
24
cell padding ৮ রপরকসল
বটরবল বডোর ৪ রপরকসল
cell spacing ১০ রপরকসল
বটরবল ৩০০ রপরকসল িওড়া
এই বটরবরলর বকাড হরে
lttable width=300 border=4 cellspacing=10 cellpad-
ding=8gt
lttrgt
lttdgtCell Padding 8 pixelslttdgt
lttdgtTable borders are 4 pixelslttdgt
lttrgt
lttrgt
lttdgtCell spacing is 10 pixelslttdgt
lttdgtThe table is 300 pixels widelttdgt
lttrgt
lttablegt
বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা
বটরবরল রিন ভারব রং ব াগ করা াে
1 বটরবরলর বযাকগরাাউনড রং
2 বসরলর বযাকগরাাউনড রং
3 বডোররর রং
রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
24
cell padding ৮ রপরকসল
বটরবল বডোর ৪ রপরকসল
cell spacing ১০ রপরকসল
বটরবল ৩০০ রপরকসল িওড়া
এই বটরবরলর বকাড হরে
lttable width=300 border=4 cellspacing=10 cellpad-
ding=8gt
lttrgt
lttdgtCell Padding 8 pixelslttdgt
lttdgtTable borders are 4 pixelslttdgt
lttrgt
lttrgt
lttdgtCell spacing is 10 pixelslttdgt
lttdgtThe table is 300 pixels widelttdgt
lttrgt
lttablegt
বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা
বটরবরল রিন ভারব রং ব াগ করা াে
1 বটরবরলর বযাকগরাাউনড রং
2 বসরলর বযাকগরাাউনড রং
3 বডোররর রং
রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
25
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব
এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0
cellspacing=0gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
26
এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন
lttable width=300 border=1 cellpadding=0
cellspacing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ
এই বটরবরলর বকাড হরে
lttable width=300 border=1 cellpadding=0 cellspac-
ing=0
bgcolor=993300gt
lttrgt
lttd bgcolor=993366gtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttrgt
lttd bgcolor=FFCC33gtampnbsplttdgt
lttd bgcolor=0000FFgtampnbsplttdgt
lttrgt
lttablegt
রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ
বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
27
বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং
রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-
banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে
বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর
এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ
বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ
রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ
এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে
lttable width=267 border=0 cellpadding=0
cellspacing=0
background=imagesclock_60jpggt
lttrgt
lttd width=171 back-
ground=imgesduck_smalljpggtampnbsplttdgt
lttd width=96gt lttdgt
lttrgt
lttrgt
lttdgtampnbsplttdgt
lttdgtampnbsplttdgt
lttrgt
lttablegt
অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
28
বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে
lttable align=leftgt
lttable align=centergt
lttable align=rightgt
রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না
ছরব
ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন
ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা
ltimg src=nameofyouimagegif gt
এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ
এই ছরবর জনয বকাড হরে
ltimg src=imagesdogonhatjpg alt= width=205
height=170 gt
এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল
লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange
Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
29
ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা
আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ
এই ছরবর জনয বকাড হরে
ltimg src=imagesorangedotgif alt=Orange dot 40 x 40
width=40
height=40 gt
ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না
এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ
বকাডরট হরে
ltimg src=imagesorangedotgif alt=Orange dot as line
width=300
height=4 border=0 gt
বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না
ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে
ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
30
এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ
ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে
ltimg src=yourimagegif alt= align=left gt
ltimg src=yourimagegif alt= align=right gt
Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব
অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
31
এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে
ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe
hot rod automobile width=300 height=261 gt
সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা
সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা
এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন
বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন
এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা
lthtmlgt
lthtmlgt
শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
32
বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtmlgt
lthtmlgt
Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype
বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space
অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
lthtmlgt
াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন
head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
lthtmlgt
এখন body টযারগর শর এবং বশষ অংশ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgtltheadgt
ltbodygtltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
33
রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন
একরট ছরব ব াগ করা
পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea
derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন
আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltcentergt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
34
এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt
ltbodygt
lthtmlgt
ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
ltbodygt
lthtmlgt
সাধারণ একরট বটরবল ব াগ
এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন
রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
35
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10
TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-
transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage
width=800 height=208 gtltcentergt
lttablegt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
36
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-
nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center
cellpadding=6 cellspacing=0gt
lttrgt
lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noon lttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে
আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt lttable
width=800 border=0 align=center cellpadding=6 cell-
spacing=0gt
lttrgt
lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am
to 600
pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
37
এবং Hours শরের দপারশ strong টযাগ
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-
tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-
tionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys
Garage width=800 height=208 gtltcentergt
lttable width=800 border=0 align=center cellpad-
ding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=Arialgt ltstronggtHours
ltstronggtMonday through Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
38
িধান বরডর িথয
এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব
িসথ ৮০০ রপরকসল
বডোর ১ রপরকসল
cel l paddi ng ১০ রপরকসল
cel l spaci ng ০ রপরকসল
বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব
বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top
বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন
এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা
বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন
lttable width=800
border=1
align=center
cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left
valign=topgtlttdgt
lttrgt
lttablegt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
39
রফরনরশং টাি
িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে
ltp align=centergtltstronggtltfont face=ArialgtSammys Garage
ampamp
Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
পররা পািার বকাড বিখরি পরররশষট ৩ বিখন
সংরকষণ করর পািারট বরাউজারর বিখন
িারন আপনার পািারট বকমন বিখারে
রি আপরন আররা িারলরে ব রি িান
HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা
আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
40
ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না
The Interactive Media Centers Introduction to Web Design
online tutorial at httplibraryalbanyeduimcwebdesign
The IMCs Color and the Web online Tutorial at
httplibraryalbanyeduimcwebcolor
The IMC HTMLXHTML tag list at
httplibraryalbanyeduimctagsheethtm
The World Wide Web Consortium at httpwwww3org
আপনার ওরেব তিররর জনয শভকামনা রইল
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
41
পরররশষট ১
ছরবর ফাইল ফরমেট
ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা
JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর
ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
42
একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব
GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে
অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই
হরে না
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
43
ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে
PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
44
পরররশষট ২
lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift To-
day we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our restora-
tion shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
45
পরররশষট ৩
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN
httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSammys Garage - Demo page for IMC HTMLXHTML
Tutoriallttitlegt
ltheadgt
ltbodygt
ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage
width=800
height=208 gtltcentergt
lttable width=800 border=0 align=center cellpadding=6
cellspacing=0gt
lttrgt
lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt
Monday through
Friday - 800 am to 600 pmltbr gt
Saturday - 800 am to 1200 noonltfontgtlttdgt
lttrgt
lttablegt
lttable width=800 border=1 align=center cellpadding=10
cellspacing=0
bgcolor=FFFFFFgt
lttrgt
lttd align=left valign=topgtlth1 align=centergtWelcome to
Sammys Garage Home
Pagelth1gt
ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp
Restoration
Shopltfontgtltstronggt has been in business since 1957 We started
in a small building
just off of La Cienega Boulevard with only one bay and lift
Today we occupy a 35000
square foot building that is centrally located near the Santa
Monica Airport No matter
what your automotive needs are we do it allltpgt
ltulgt
ltligtFull automobile restorationltligt
ltligtStandard vehicle serviceltligt
ltligtShow-quality detailingltligt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt
46
ltligtAccident repairltligt
ltulgt
ltpgtAlthough we service nearly all makes and models our
restoration shop specializes in
American Iron Included are modern manufacturers such as lta
href=httpwwwfordcomgtFordltagt lta
href=httpwwwgmcomgtGeneral
Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt
Long-gone marques
such as American Motors Willys Hudson and Studebaker also
find careful attention
here at Sammysltpgt
ltpgtltemgtYou are invited to inspect our shop anytime during normal
business
hoursltemgtltpgtlttdgt
lttrgt
lttablegt
ltp align=centergtltstronggtltfont face=Arial Helvetica sans-
serifgtSammys Garage
ampamp Restoration Shopltbr gt
1234 Airport Avenueltbr gt
Los Angeles CA 90405ltfontgtltstronggtltpgt
ltbodygt
lthtmlgt