Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
TutoHost.com/bangla/html

to
H
H o
TM st
EL
1. Bo
0 o

k

এইচিটএমএল ইবুক ১.০

এইচিটএমএল ই-বুক ১.০

Tu

েলখকঃ অসীম কুমা পাল...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

েলখকঃ অসীম কমমা পমল
১৯৮৭

সমেল

k

কমমা

to
H
H o
TM st
EL
1. Bo
0 o

অসীম

...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

•

ে�া�াম েলখার প�িত
টয্া সমুহ ও বয্বহা
ইিলেমন্ িক এবং িকভােব বয্বহ হয়
এি�িব...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

১. HTML িক?

to
H
H o
TM st
EL
1. Bo
0 o

েথেক HTML স�িকর্ িব�ািরত �ান অজর্ ...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

২. ে�া�াম েলখার প�িত

k

েয েকান ে�া�াম েলখার জ�ই েকান একটা এিডটর বয্বহা কের...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

HTML এ েলখা ে�া�ােমর িবিভ� অংশ িবে�ষণ

to
H
H o
TM st
EL
1. Bo
0 o

k

ে�া�া...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

৩. HTML টয্া িক?

Tu

to
H
H o
TM st
EL
1. Bo
0 o

k

এইচিটএমএল এর সাধারন টয...
Italic েট�ট িনেদর্ কের।
�াভািবেকর েচেয় বড় েট�ট িনেদর্ কের।
�াভািবেকর েচেয় েছাট েট�ট িনেদর্ কের।
িবেশষ উ�ৃিত �কাশ করেত বয্ব...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

৪. HTML ইিলেমন্

to
H
H o
TM st
EL
1. Bo
0 o

k

HTML এ েযেকান শু এবং েশষ
টয...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

৫. HTML এি�িবউটস
HTML এি�িবউটস সবর্ািধ গুরু�পূ এবং অতয্ �েয়াজনীয় একিট িবষয়। ...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

to
H
H o
TM st
EL
1. Bo
0 o

<html>
<head>
<title> www.tutohost.com</title>
...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

৬. েহিডং

k

এইচিটএমএল এ েহিডং টয্া একিট গুরু�পূ টয্া । সাধারনত এর মাধয্ে েক...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

৭. পয্ারা�া

k

পয্ারা�া টয্াগি সবর্ািধ গুরপূণর এবং অতয্ �েয়াজনীয় একিট টয্াগ...
এইচিটএমএল ইবুক ১.০

to
H
H o
TM st
EL
1. Bo
0 o

একটা েনাটপয্া open কের উপেরর code
টুক িলেখ file েমন েথেক Save as এ ি�ক
কে...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

to
H
H o
TM st
EL
1. Bo
0 o

<html>
<head>
<title>www.tutohost.com</title>
<...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

Tu

to
H
H o
TM st
EL
1. Bo
0 o

k

একটা েনাটপয্া open কের উপেরর code টুক িল...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

৯. ফন্ টয্া
HTML এর মাধয্ে েকান ডকুেমন্ট সু�রভাে উপ�াপন করার জ� <font> বা ফন...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

to
H
H o
TM st
EL
1. Bo
0 o

k

একটা েনাটপয্া open কের উপেরর code টুক িলেখ f...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

to
H
H o
TM st
EL
1. Bo
0 o

<html>
<head>
<title> www.tutohost.com</title>
...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

১১. িলংক

k

একটা পাতার সােথ আেরকিট পাতার েযাগােযাগ �াপন করা হয় িলংেকর মাধয্...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

১২. ছিব সংেযাজন

k

ওেয়ব সাইেট ছিব সংেযাজন, ছিবর মাধয্ে িলংক করা এবং িবিভ� স...
এইচিটএমএল ইবুক ১.০

to
H
H o
TM st
EL
1. Bo
0 o

একটা Notepad Open কের উপেরর Code টুক
িলেখ File েমন েথেক Save as এ ি�ক কের...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

উদাহরণ ে�া�াম

Tu

to
H
H o
TM st
EL
1. Bo
0 o

k

<html>
<head>
<title> www...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

ে�া�াম আেলাচনা

to
H
H o
TM st
EL
1. Bo
0 o

k

<table border="1"> এখােন bor...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

উদাহরণ ে�া�াম

to
H
H o
TM st
EL
1. Bo
0 o

k

<html>
<head>
<title> www.tut...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

উদাহরণ ে�া�াম

to
H
H o
TM st
EL
1. Bo
0 o

k

<html>
<head>
<title> www.tut...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

১৫. এইচিটএমএল ফমর

to
H
H o
TM st
EL
1. Bo
0 o

k

এইচিটএমএল ফমর তথয ইনপুট ে...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

name="name"><br /><br />
<font face="SolaimanLipi" color="#fe0321" size="4">...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

name="checkbox">
<font face="SolaimanLipi" color="#fe0321" size="4">
এইস.এস....
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

১৬. HTML ে�ম
HTML এর মাধয্ে েকান ওেয়ব েপজেক একািধক ভােগ িবভ� করার জ� আেগর িদ...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

to
H
H o
TM st
EL
1. Bo
0 o

k

েয েকান নােম একটা েফা�ার ৈতির কের তার মেথয s...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

to
H
H o
TM st
EL
1. Bo
0 o

একটা ওেয়ব েপেজর মেধয্ অপর এক বা একািধক ওেয়ব
েপজ...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

ে�া�াম আেলাচনা

to
H
H o
TM st
EL
1. Bo
0 o

k

আই ে�ম ৈতিরর জ� <iframe></if...
TutoHost.com/bangla/html

Tu

to
H
H o
TM st
EL
1. Bo
0 o

k

এইচিটএমএল ইবুক ১.০

বয্া�াউন কালার েদওয়ার আরও একটা মজার প�িত...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

to
H
H o
TM st
EL
1. Bo
0 o

উদাহরণ ে�া�াম

k

এখােন rgb অথর হল red green bl...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

১৯. েল আউট

to
H
H o
TM st
EL
1. Bo
0 o

k

একটা ওেয়ব েপজ কতটা সু� হেব তা স�...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

to
H
H o
TM st
EL
1. Bo
0 o

k

This is a paragraph.This is a paragraph. Thi...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

২০. িস এস এস

to
H
H o
TM st
EL
1. Bo
0 o

k

বতর্মা সমেয় ওেয়ব েপেজর কাঠােমা...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

ইনলাইন �াইল িসট

k

এ প�িতেত HTML এর �িতিট টয্ােগ মেধযই CSS �াইল যু� করা হয় ...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

to
H
H o
TM st
EL
1. Bo
0 o

k

একটা েনাটপয্া open কের উপেরর code টুক িলেখ f...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

টাইেটল

to
H
H o
TM st
EL
1. Bo
0 o

<title>আমােদর HTML িটউেটািরয়াল সমূহ</ti...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

ি��

k

জাভাি��, েজ েকােয়রী ইতয্াি ি�� যু� করার জ� <script> </script> টয্া ব...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

২১. েমটা

k

েয েকান ওেয়ব সাইেটর জ�ই সাচর্ ইিন্জন অপিটমাইেজশন একিট গুরু� িবষ...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

k

�থেম েপেজর টাইেটল, তারপর িলংক এবং এর পর আেছ "এইচিটএমএল এ ে�া�াম েলখার সাধ...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

২৩. ি��

to
H
H o
TM st
EL
1. Bo
0 o

এ ি�� যু� করার প�িত স�েকর জানেত পারব।
...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

to
H
H o
TM st
EL
1. Bo
0 o

k

একটা েনাটপয্া open কের উপেরর code টুক িলেখ f...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

েড�টেপ একটা audio নােম folder িনেত হেব এর মেধয audio.mp3 নােম save করা একটা ...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

height="35" width="300" এর মাধয্ে �াউজাের �দিশর্ অিডও ে�য়ােরর আকৃিত িনধর্ার ...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

�াটফমর ৈতিরর মাধয্ে পিরপূণর িশ�া িব�ােরও ভুিমকা রাখেছ। HTML�ারা ৈতির েপেজ <e...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

িভিডও যু� করার জ� <embed> টয্া বয্বহা করা হয়।

to
H
H o
TM st
EL
1. Bo
0 o

...
এইচিটএমএল ইবুক ১.০

TutoHost.com/bangla/html

�াস এিনেমশন ওেয়ব সাইেটর একিট অ�তম আকষর্ণী উপাদান। আকষর্ণী েনিভেগশন বার, বয্া...
TutoHost.com/bangla/html

to
H
H o
TM st
EL
1. Bo
0 o

k

এইচিটএমএল ইবুক ১.০

�েজ� িবে�ষণ

�াস যু� করার জ� <embed> টয্া বয...
Prochain SlideShare
Chargement dans…5
×

Tutohost.com html-ebook

787 vues

Publié le

HTML Note

Publié dans : Design
  • Soyez le premier à commenter

Tutohost.com html-ebook

  1. 1. TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o k এইচিটএমএল ইবুক ১.০ এইচিটএমএল ই-বুক ১.০ Tu েলখকঃ অসীম কুমা পাল Page: 1 of 54
  2. 2. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html েলখকঃ অসীম কমমা পমল ১৯৮৭ সমেল k কমমা to H H o TM st EL 1. Bo 0 o অসীম কি�য়ময় জ��হণ কোন। ২০১০ সমেল িতিন কি�য়ম পিলেটকিনক ইনি�িটউট স�মদনমঃ মমহবুব িটউেটম েথেক িডে�মমম পমস কোন। িতিন ঢমকম �েকৗশল �যুি� িব�িবদযমলেয় িব. এস. িস ইন ইেলকি�কযমল ইেলকি�ক ইি�িনয়মিাং পড়েছন। িতিন ওেয়ব এনড এবং এ েডভলপেমনট মমইেয়মকেন�লমোা উপো ধমামবমিহক িটউেটমিায়মল িলেখ সবমা নজো আেসন। এছমড়মও িতিন েটকিটউনস, িটউেটমিায়মলিবিডসহ েবশ িকছু বমংলম �ো িলেখ থমেকন। বমংলমেদেশ অনলমইন িশ�মমূলক �কমশনমগেলম এেকবমো হমেতগেন োলম যময়। এ েদেশা তুন সমমজ তথয�যুি�েত নতুন নতুন েমধম একি�ত হেয় �মন অজরেনা জ� কমজ কো যমে�। িবষয়িট একিট িনাব িব�েবা র মেতম। আ এই সৃজনশীল বযি�েদা িশ�ম কমযরয়ম ও উ�মবনী শি�া �কমশনম ধারাবািহক এইচিটএমএল িটউেটমিায়মল যা এখন ই-বুক আকাের �কাশ করা হেলা। Tu বতরমমেন িতিন িটউেটমেহমে� কমরাত �যুি� েলখক অসীম কমমোা হমত ধো আেছন। “এইচিটএমএল বমংলম ই-বুক ১.০” আিথরক সহেযমিাতময় সবমইেক ওেয়ব েডভলপেমেনটা িশখমা �থম পদে�প িহেসেব এিােয় িনেয় যমেব বেল আশম কিা। িটউেটমেহম� TutoHost.com �ুা িািডং িনলুামা ইয়মসিমন AmusingOcean.com Page: 2 of 54
  3. 3. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html • ে�া�াম েলখার প�িত টয্া সমুহ ও বয্বহা ইিলেমন্ িক এবং িকভােব বয্বহ হয় এি�িবউট িক এবং িকভােব বয্বহ হয় েহিডং টয্া ও বয্বহা HTML পয্ারা�া েট�ট ফরেমিটং ফন্ টয্া এর বয্বহা �াইেলর বয্বহা িলংক �কােশর প�িত ছিব �কাশ েটিবল ও েটিবল �কাশ প�িত িলে�র বয্বহা HTML ফমর ে�ম এর বয্বহা আই ে�ম এর বয্বহা রং ও েকাড েল আউট প�িত HTML এ িসএসএস এর বযবহার েহড েমটা টয্া HTML এ ি�� এর বয্বহা ওেয়েব অিডও ফাইল চালােনার প�িত ওেয়েব িভিডও ফাইল চালােনার প�িত ওেয়েব �াস ফাইল চালােনার প�িত to H H o TM st EL 1. Bo 0 o • HTML িক? HTML এর ইিতহাস k সূিচ প�ঃ • • • • • • • • • • • • • • • • • • • • Tu • • • • • Page: 3 of 54
  4. 4. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ১. HTML িক? to H H o TM st EL 1. Bo 0 o েথেক HTML স�িকর্ িব�ািরত �ান অজর্ করা যােব। k এখােন ধারাবািহক ভােব বাংলা ভাষায় HTML এর উপর িটউেটািরয়াল েলখা হেয়েছ । ডান পােশর ধারাবািহক িলংক HTML একটা কি�উটার লয্া�ুেয়, যা পৃিথবীর িবশাল তথয- ভান্ডারে ইন্টারেনেট মাধয্ে �দশর্েন সুেযা ৈতির কের িদেয়েছ। একটা ওেয়ব েপেজর মূল গঠন ৈতির হয় HTML িদেয়। HTML েকান ে�া�ািমং লয্া�ুেয় নয়, এেক Hyper Text Mark Up Language বলা হয়। Mark Up Language এক েসট Mark Up টয্ােগ সম�েয় গিঠত হয়। একটা ওেয়ব েপেজর িবিভ� অংশ �াউজােরর মাধয্ে িকভােব �দিশর্ হেব, তা HTML এ Mark Up টয্া সমূহ বয্বহা কের �কাশ করা হয় । HTML এর ইিতহাস HTML বা Hyper Text Mark Up Language ৈতির কেরেছন িটম বানর্া-লী। এখােন এইচিটএমএল এর সংি�� ইিতহাস তুেল ধরা হেলা। Tu HTML বা Hyper Text Mark Up Language ৈতির কেরেছন িটম বানর্া-লী। HTML ৈতিরর উে�� িছল ৈব�ািনক গেবষণার তথয উপা� �ত পৃিথবীর িবিভ্ �ােন আদান �দােনর বয্ব� করা। ১৯৯০ সােলর িদেক NCSA কতৃ্ েডভলপকৃত েমাজাইক �াউজােরর মাধয্ে র HTML পিরিচিত লাভ কের। ১৯৯৭ এর জানুয়ারীে WC3 কতৃরক �থম েডভলপকৃত HTML3.2 �কািশত হয়। একই বছের েশেষ িডেস�ের WC3 HTML এর নতুন সং�রণ HTML4.2 �কাশ কের। ২০১০ সােল বতর্মাে �চিলত HTML এর সবর্েশ ভাসর্ HTML5 জনস�ূেখ পিরিচিত লাভ কের। Page: 4 of 54
  5. 5. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ২. ে�া�াম েলখার প�িত k েয েকান ে�া�াম েলখার জ�ই েকান একটা এিডটর বয্বহা কের েকািডং করেত হয়।এখােন এইচিটএমএল এ ে�া�াম েলখার সাধারন প�িত, একিট �াথিমক ে�ােজ� এবং সাধারন টয্াগসমূ িনেয় আেলাচনা করা হেব। to H H o TM st EL 1. Bo 0 o েয েকান ে�া�াম েলখার জ�ই েকান একটা এিডটর বয্বহা কের েকািডং করেত হয়। HTML এ ে�া�াম েলখার জ� �াথিমকভােব এিডটর িহেসেব উইেন্ডা অপােরিটং িসে�েমর িডফ� এিডটর notepad বয্বহা করা েযেত পাের এবং বাড়িত সুিবধ পাবার জ� এডভা� এিডটর িহেসেব Dreamweaver এবং Notepad++ বয্বহা করা ভাল। HTML এ েলখা ে�া�াম .html এ�েটনশন েযমন index.html �ারা Save কের েযেকান �াউজার েযমন Internet explorer, Mozilla Firefox , Google chrome এবং Opera �ারা েদখা যােব। HTML এ েলখা ে�া�ােমর েমৗিলক অংশ সমূহ <html> <head> <title> www.tutohost.com</title> </head> <body> This is my first web page. I am learning now HTML. </body> </html> Tu একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। Page: 5 of 54
  6. 6. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html HTML এ েলখা ে�া�ােমর িবিভ� অংশ িবে�ষণ to H H o TM st EL 1. Bo 0 o k ে�া�ােমর মেধয <> এবং < /> দুইট িচ� এবং এর মেধয িকছু Word েযমন html, head, title, body এগুেলাে Keyword বেল এবং <> বা < /> িচ� এবং এর মােঝ েলখা একিট Keyword েক টয্া বলা হয়। েযমন <head> অথর head টয্াগ HTML এ দু ধরেনর টয্া রেয়েছ , <> িচ� ও keyword িনেয গিঠত টয্াগে শু টয্া এবং < /> িচ� ও keyword িনেয গিঠত টয্াগে েশষ টয্া বেল েযমন < title> অথর title শু টয্া এবং <title /> অথর title েশষ টয্াগ <html> বা html টয্া: HTML এ ে�া�াম েলখার জ� সম� code েক <html> </html> এর মােঝ েলখা হয়। <head> বা head টয্া: <head></head> এর েভতের <title> </title> টয্া েলখা হয় যার মাধয্ে ওেয়বসাইেটর title বা িশেরানাম �দশর্ের বয্ব� করা হয়। এই code এ title িহেসেব www.tutohost.com েলখা হেয়েছ যা �াউজােরর title bar এ েদখা যাে�। এছাড়া css এর stylesheet েক head টয্ােগ মেধয্ call করা হয়। <body> বা body টয্া: <body> বা body টয্া খুবই গুরু�পূণ একিট ওেয়ব সাইেটর মূল Content সমূহ Body টয্ােগ মেধয অব�ান কের । <body></body> টয্েগ মেধয্ িবিভ� Text , Image, Table ইতয্াি ফরেমিটং এর জ� িবিভ� টয্া সমূহ েলখা হয় । এই code এ <body></body> টয্েগ মেধয This is my first web page. I am learning now HTML. েলখা হেয়েছ যা �াউজােরর মূল অংেশ Tu �দিশর্ হে�। Page: 6 of 54
  7. 7. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ৩. HTML টয্া িক? Tu to H H o TM st EL 1. Bo 0 o k এইচিটএমএল এর সাধারন টয্া সমূহ এবং এগুেলা কােজর সাধারন িববরণ স�েকর জানা খুবই গুরু�পূণ আমরা সহেজই এখান েথেক এইচিটএমএল এর সাধারন টয্া সমূহ এবং এগুেলা কােজর সাধারন িববরণ েজেন িনেত পারব। HTML এ ে�া�াম েলখার জ� <> এবং </> দুইট িচ� এবং এর মেধয িকছু Word েযমন html, head, title, body ইতয্াি Keyword বয্বহা করা হয়। <> বা </> িচ� এবং এর মােঝ েলখা একিট Keyword েক একে� টয্া বলা হয়। েযমন <html> এবং </html> । <body> হল body শু টয্া এবং </ body> হল body েশষ টয্াগ HTML এর সাধারন টয্া সমূহ টয্া সমূহ <html> </html> <head></head> <title></title> <body></body> <a></a> <abbr></abbr> <b></b> বণর্ন HTML ডকুেমন িনেদর্ কের। ে�া�ােমর head অংশ িনেদর্ কের । ডকুেমন টাইেটল িনেদর্ কের। ে�া�ােমর মূল content অংশ িনেদর্ কের। Anchor টয্াগ Abbreviation টয্াগ Bold েট�ট িনেদর্ কের। Page: 7 of 54
  8. 8. Italic েট�ট িনেদর্ কের। �াভািবেকর েচেয় বড় েট�ট িনেদর্ কের। �াভািবেকর েচেয় েছাট েট�ট িনেদর্ কের। িবেশষ উ�ৃিত �কাশ করেত বয্বহ হয়। একটা লাইন ে�ক ৈতির কের । কি�উটার েকাড েট�ট �কাশ কের। েটিবল ৈতিরেত বয্বহ হয়। েটিবেলর কলাম ৈতিরেত বয্বহ হয়। েটিবেলর েসল ৈতিরেত বয্বহ হয়। েটিবেলর সাির ৈতিরেত বয্বহ হয়। ফরম ৈতিরেত বয্বহ হয়। to H H o TM st EL 1. Bo 0 o <i></i> <big></big> <small></small> <blockquote> </blockquote> <br / > <code></code> <table></table> <col></col> <td></td> <tr></tr> <form></form> <h1></h1> <hr/> <img/> <input></input> <li></li> <meta></meta> <ol></ol> <ul></ul> <p></p> <pre></pre> <tt></tt> <strong></strong> <sub></sub> <sup></sup> TutoHost.com/bangla/html k এইচিটএমএল ইবুক ১.০ েহডার টয্া 1-6 পযর্ হয়। সমা�রাল েরখা ৈতির কের। ছিব যু� করেত বয্বহ হয়। ফরেমর ইনপুট িফ� ৈতিরেত বয্বহ হয়। িল� ৈতিরেত বয্বহ হয়। Meta টয্া অডর্া িল� ৈতিরেত বয্বহ হয়। আনঅডর্া িল� ৈতিরেত বয্বহ হয়। পয্ারা�া িনেদর্ কের pre-formatted েট�ট ৈতিরেত বয্বহ হয়। েটিলটাইপ েট�ট িনেদর্ কের। Tu Strong েট�ট িনেদর্ কের। subscripted text িনেদর্ কের। superscripted text িনেদর্ কের। Page: 8 of 54
  9. 9. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ৪. HTML ইিলেমন্ to H H o TM st EL 1. Bo 0 o k HTML এ েযেকান শু এবং েশষ টয্ােগ মােঝর অংশেক ইিলেমন্ বলা হয়। েযমন <h1> This is an example of element.</h1> । এখােন <h1> েহডার1 শু এবং </h1> েহডার1 েশষ টয্ােগ মােঝ This is an example of element. েলখা হেয়েছ, তাই “This is an example of element.” একিট ইিলেমন্ট িকছু িকছু টয্ােগ েকান ইিলেমন্ থােক না েযমন <br /> ,<img /> ইতয্ািদ ইিলেমন্ েশষ টয্া <h1> <p> <br /> <img /> This is an element. This is paragraph. </h1> </p> Tu শর টয্া সাধারণতঃ েয সকল টয্ােগ েশষ টয্া থােক না তােদর ইিলেমন্ট থােক না। এ ধরেণর শু টয্ােগ মেধয্ / িচ�িট অ�ভূর্ থােক, এবং এর আেগ একটা ে�স িদেত হয়। Page: 9 of 54
  10. 10. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ৫. HTML এি�িবউটস HTML এি�িবউটস সবর্ািধ গুরু�পূ এবং অতয্ �েয়াজনীয় একিট িবষয়। HTML টয্ােগ কাযর্�মতাে বিধর্ করার জ� এি�িবউটস বয্বহা করা হয়। এখােন উদাহরণ সহ HTML এি�িবউটস স�েকর িব�ািরত আেলাচনা করা k হেব। to H H o TM st EL 1. Bo 0 o HTML এ এি�িবউটস ইিলেমন্ এর আনুসাি� তথয �কাশ কের । মূলত HTML এ টয্ােগ কাযর্�মতাে বিধর্ করার জ� এি�িবউটস বয্বহা করা হয়। েযমন <font size="5" face="Tahoma" color="red"> This is a paragraph.</font> এখােন size="5" অংশিট হল font টয্ােগ একিট এি�িবউট, যা �কাশ করেছ ইিলেমন্ অথর্া This is a paragraph. েলখািটর সাইজ েকমন হেব। এছাড়া face="Tahoma" �কাশ করেছ েলখািটর font হেব Tahoma এবং color="red" �ারা �কাশ করেছ েলখািটর রং হেব লাল। িকছু HTML এি�িবউটস Tu টয্া <font> <h1>….<h6> <p> <body> <div> <img> <table> <input /> এি�িবউটস size="5" face="Tahoma" color="red" align="center" align="left" align="right" title="Bangladesh" bgcolor="green" background="../images/ele.png" id="book" class="pen" align="center" height="100px" width="50px" border="5px" type="text" name="TextField" Page: 10 of 54
  11. 11. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" green"> <font size="5" face="Tahoma" color="red"> This is a paragraph. </font> k উদাহরণ ে�া�াম </body> </html> Tu একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব। Page: 11 of 54
  12. 12. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ৬. েহিডং k এইচিটএমএল এ েহিডং টয্া একিট গুরু�পূ টয্া । সাধারনত এর মাধয্ে েকান পয্ারা�ােফ িশেরানাম েলখা হয়। এ অধয্াে আমরা েহিডং এর েকািডং প�িত স�েকর জানেবা। to H H o TM st EL 1. Bo 0 o HTML এর মাধয্ে েকান ডকুেমন বা পয্ারা�ােফ িশেরানাম েলখার জ� েহিডং টয্া বয্বহা করা হয়। HTML এ েমাট ছয় ধরেণর েহিডং টয্া রেয়েছ এগুেল হল <h1> </h1> , <h2> </h2> , <h3> </h3> , <h4> </h4> , <h5> </h5> এবং <h6> </h6> । যিদ বড় সাইেজর অ�ের িশেরানাম েলখার �েয়াজন হয় তাহেল <h1> </h1> টয্ােগ মােঝ েলখা হয়। এবং অ�া� গুেল বয্বহা করেল েলখার সাইজ আে� আে� েছাট হেব। উদাহরণ ে�া�াম Tu <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" green"> <h1>This is an example of heading 1</h1> <h2>This is an example of heading 2</h2> <h3>This is an example of heading 3</h3> <h4>This is an example of heading 4</h4> <h5>This is an example of heading 5</h5> <h6>This is an example of heading 6</h6> </body> </html> একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব। Page: 12 of 54
  13. 13. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ৭. পয্ারা�া k পয্ারা�া টয্াগি সবর্ািধ গুরপূণর এবং অতয্ �েয়াজনীয় একিট টয্াগ পয্ারা�া টয্ােগ েভতেরই েট�টগুেল িবিভ�ভােব �কািশত হয়। এখােন পয্ারা�া টয্া স�েকর উদাহরণসহ িব�ািরত িববরণ েদওয়া হেব। to H H o TM st EL 1. Bo 0 o েয েকান ডকুেমন এক বা একািধক পয্ারা�ােফ মাধয্ে েলখা হয়। HTML এ পয্ারা�ফ ৈতিরর জ� <p> বা পয্রা�া টয্া বয্বহা করা হয়। েযমন <p>This is a paragraph.</p>। �াউজােরর মাধয্ে �িতটা পয্ারা�া �দশর্ করা হেল �িতটা পয্ারা�ােফ পর একটা কের লাইন ে�ক ৈতির হয়। যিদ কখেনা পয্ারা�ােফ মেধয্ লাইন ে�েকর �েয়াজন হয় তাহেল লাইেনর েশেষ <br /> টয্া বয্বহা করা হয়। Tu উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" green"> <p>This is a paragraph.</p> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is a paragraph.<br /> This is a paragraph.<br /> This is a paragraph.<br /> This is a paragraph.<br /> </p> </body> </html> Page: 13 of 54
  14. 14. এইচিটএমএল ইবুক ১.০ to H H o TM st EL 1. Bo 0 o একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব। k TutoHost.com/bangla/html ৮. েট�ট ফরেমিটং Tu ওেয়বসাইেট আমরা েয েট�টগুেল েদিখ তা েছাট, বড়, েবা�, ইটািলকসহ িবিভ� ফরেমেট হেয় থােক। এখােন েট�ট ফরেমিটং করার িবিভ� প�িত স�েকর িব�ািরত আেলাচনা করা হেব । Microsoft Word এ Bold, Italic, Underline, strikethrough, Subscript, Superscript ইতয্াি েট�ট ফরেমিটং এর জ� বয্বহ হয়। HTML এর ে�ে�ও Microsoft Word এর মত েট�ট ফরেমিটং এর িবেশষ গুর রেয়েছ। একিট ডকুেমন্ট সু�রভাে উপ�াপন করেত েট�ট ফরেমিটং িবষেয় উপযু� �ান থাকা দরকার। HTML এ েট�ট ফরেমিটং এর জ� <b>, <i>, <u>, <strike>, <sub>, <sup>, <big>, <small>, <strong>, <samp>, <tt>, <abbr>, <var>, <code>, <address> ইতয্িদ টয্া সমূহ বয্বহা করা হয়। Page: 14 of 54
  15. 15. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o <html> <head> <title>www.tutohost.com</title> </head> <body bgcolor="green"> k উদাহরণ ে�া�াম <p> <b> (Bold)</b> This is an example of bold. <br /> <i>(Italic)</i> This is an example of Italic. <br /> <u> (Underline) </u> This is an example of Underline. <br /> <strike>(Strike) </strike> This is an example of Strike. <br /> (CO<sub>2</sub>) This is an example of Subscript. <br /> (E=MC<sup>2</sup>) This is an example of Superscript. <br /> <big>(Big text)</big>This is an example of Big. <br /> <small>(Small text)</small>This is an example of Small. <br /> <strong>(Strong text)</strong>This is an example of Strong. <br /> <samp>(Sample text) </samp>This is an example of Sample. <br /> <tt>(Teletype)</tt>This is an example of Teletype. <br /> (<abbr> U.N.O</abbr> United Nations Organization.) This is an example of Abbreviation. <br /> (<var>x</var> is a variable.)This is an example of Variable <br /> (<code>Computer code text.</code>) This is an example of Code. <br /> Tu <address> (Written by Ashim<br /> Address: www.tutohost.com<br /> E-mail:ashimkumar50@yahoo.com) </address>This is an example of Address <br /> </p> </body> </html> Page: 15 of 54
  16. 16. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html Tu to H H o TM st EL 1. Bo 0 o k একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। Page: 16 of 54
  17. 17. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ৯. ফন্ টয্া HTML এর মাধয্ে েকান ডকুেমন্ট সু�রভাে উপ�াপন করার জ� <font> বা ফন্ টয্া খুবই গুরু�পূ to H H o TM st EL 1. Bo 0 o k ভূিমকা পালন কের। এখােন ফন্ টয্া বয্বহাের িব�ািরত প�িত আেলাচনা করা হেব। HTML এর মাধয্ে েকান ডকুেমন্ট সু�রভাে উপ�াপন করার জ� <font> বা ফন্ টয্া খুবই গুরু�পূ ভূিমকা পালন কের।<font size="5" face="Tahoma" color="red"> Bangladesh is a beautiful country.</font> এখােন size="5" অংশিট হল font টয্ােগ একিট এি�িবউট, যা �কাশ করেছ ইিলেমন্ অথর্া Bangladesh is a beautiful country. েলখািটর সাইজ েকমন হেব। এছাড়া face="Tahoma" �কাশ করেছ েলখািটর font হেব Tahoma এবং color="red" �ারা �কাশ করেছ েলখািটর রং হেব লাল। Tu উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" green"> <font size="2" face="Verdana"> This is a paragraph. </font> <br /> <font size="5" face="Tahoma" color="red" > Bangladesh is a beautiful country. </font> </body> </html> Page: 17 of 54
  18. 18. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o k একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। ১০. �াইেলর বয্বহা Tu িসএসএস (Cascading Style Sheet files) মাধয্ে ওেয়বসাইটেক অেনক সু� কের েতালা যায়। এখােন HTML ইিলেমেন্ট সােথ �াইেলর বয্বহা �ণালী িনেয় িব�ািরত আেলাচনা করা হেব। Style, HTML এর একিট নতুন এি�িবউটস, এর মাধয্ে HTML এর মেধয্ CSS বয্বহাের সুেযা সৃি� হয়। Style তথা CSS বয্বহাের মাধয্ে ওেয়ব েপেজর িবিভ� উপাদােনর িডজাইন ৈতির করা হয়। অ�া� এি�িবউটস েযমন align="center", align="left", bgcolor="green", height="100px", width="50px, bgcolor="green" ইতয্ািদ মাধয্ে যিদও িডজাইন ৈতির করা যায়, তেব এে�ে� Style বয্হাের িবেশষ সুিবধ পাওয়া যায়। Page: 18 of 54
  19. 19. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" green"> <font size="2" face="Verdana"> This is a paragraph. </font> <br /> <font size="5" face="Tahoma" color="red" > Bangladesh is a beautiful country. </font> </body> </html> k উদাহরণ ে�া�াম: অ�া� এি�িবউটস বয্বহা কের Tu উদাহরণ ে�া�াম: �াইল বয্বহা কের <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" green"> <font style="font-family:Verdana; font-size:15px" > This is a paragraph. </font> <br /> <font style=" font-size:25px; font-family:Tahoma; color:red;" > Bangladesh is a beautiful country. </font> </body> </html> একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব। Page: 19 of 54
  20. 20. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ১১. িলংক k একটা পাতার সােথ আেরকিট পাতার েযাগােযাগ �াপন করা হয় িলংেকর মাধয্ে । এখােন এইচিটএমএল এ িলংক �কাশ করার প�িত স�েকর িব�ািরত আেলাচনা করা হেব। to H H o TM st EL 1. Bo 0 o একটা ওেয়ব সাইটেক বয্বহা বা�ব কের েতালার ে�ে� িলংেকর বয্বহা খুবই গুরু�পূণ Link এর আিভধািনক অথর সংযু� করা। অথর্া একটা ওেয়ব েপেজর সােথ অ� একটা েপজেক যু� করাই হল িলংিকং। HTML এ িলংিকং করার জ� <a> টয্গ বা anchor টয্া বয্বহা করা হয়। েযমন <a href="http://www. tutohost.com/"> www. tutohost.com </a> । অথর্া েয েপেজর সােথ িলংক ৈতির করেত হেব তার এে�স href="…………….. " এর মেধয েলখেত হেব, এবং িলংেক েয েলখািট �দশর্ করেব তা <a href=" ">…………………..</a> এর মেধয েলখেত হেব। উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" green"> <a href="http://www. tutohost.com/"> www. tutohost.com </a> <br /> <a href="mailto:admin@tutohost.com"> admin@tutohost.com</a> </body> </html> Tu একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব। Page: 20 of 54
  21. 21. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ১২. ছিব সংেযাজন k ওেয়ব সাইেট ছিব সংেযাজন, ছিবর মাধয্ে িলংক করা এবং িবিভ� সাইেজর ছিব �দশর্েণ প�িত আেলাচনা করা হেয়েছ। to H H o TM st EL 1. Bo 0 o একটা ওেয়ব েপেজর গুরু�পূ উপাদান সমূেহর একিট হে� ইেমজ । ওেয়বেপেজ ইেমেজর উপযু� বয্বহাের মাধয্ে েপজিট বয্বহারকারীেদ কােছ েযমন আকষর্ণী হেয় ওেঠ েতমিন বয্বহা বা�বও হয়। আকষর্নী েনিভেগশন বার, বাটন, বয্ানা, ইতয্ািদে ইেমেজর বয্বহা অপিরহাযর্ ওেয়ব েপেজ ইেমজ বা ছিব যু� করার জ� �েয়াজনীয় টয্াগি হে� <img> । এর েকান েশষ টয্া েনই। শুধুমা <img> িদেয় েকান কাজ হয় না, এর সােথ সবসময়ই src এি�িবউটিট বয্বহা করেত হয়। েযমন <img src=”pic.png”> , তাহেল pic.png ইেমজিট �দিশর্ হেব। পূবর ��িত েড�টেপ একটা webpage নােম folder িনেত হেব এর মেধয pic.png নােম save করা একটা ছিব রাখেত হেব। Tu উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" green" style="text-align:center"> <h3> This is an example of image.</h3> <img src="pic.png"> </body> </html> Page: 21 of 54
  22. 22. এইচিটএমএল ইবুক ১.০ to H H o TM st EL 1. Bo 0 o একটা Notepad Open কের উপেরর Code টুক িলেখ File েমন েথেক Save as এ ি�ক কের File name িহেসেব index.html বা home.html অথবা েযেকান নাম.html িদেয়, Save as type িহেসেব All files িসেল� কের এরপর Save বাটেন ি�ক করেত হেব। এরপর save করা index.html ফাইলিটেক webpage folder এর মেধয রাখেত হেব। এখন Mozilla Firefox িদেয় index.html open করেল পােশর ছিবর মত েদখােব। k TutoHost.com/bangla/html অনলাইেন সাভর্াে েকান ইেমজ আপেলাড করা থাকেল উ� ইেমজ যু� করার জ� তার এে�স pic.png এর �ােন েলখেত হেব। েযমন <img src="http://www.tutohost.com/bangla/html/images/pic.png"> Tu ১৩. েটিবল সংেযাজন ওেয়ব েপেজ তথয উপা� পিরসংখয্া উপ�াপন করার একিট অ�তম প�া হে� েটিবল বয্বহা করা। HTML এ table ৈতিরর িবিভ� িবষয় এখােন আেলাচনা করা হেয়েছ । িদেন িদেন ইন্টারেন আজ সবেচেয় বড় তথয ভান্ডাে পিরণত হেয়েছ। তথয উপা� পিরসংখয্া িচ� িভিডও ইতয্ািদ সংিম�েণ একটা ওেয়বেপেজ েকান িবষয়ব�েক যতটা আকষর্ণী এবং পিরপূণর্ভাে উপ�াপন করা যায়, অ�া� িমিডয়ায় তা স�ব হয় না। ওেয়ব েপেজ তথয উপা� পিরসংখয্া উপ�াপন করার একিট অ�তম প�া হে� েটিবল বয্বহা করা। েটিবল ৈতিরর জ� েটিবল টয্া <table> বয্বহা করা হয়। Page: 22 of 54
  23. 23. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html উদাহরণ ে�া�াম Tu to H H o TM st EL 1. Bo 0 o k <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" #00CC99" style="text-align:center"> <table border="1"> <tr> <th>SL</th> <th>Book</th> <th>Pen</th> <th>Box</th> </tr> <tr> <td>01</td> <td>100</td> <td>200</td> <td>400</td> </tr> <tr> <td>02</td> <td>300</td> <td>600</td> <td>300</td> </tr> <tr> <td>03</td> <td>500</td> <td>800</td> <td>200</td> </tr> </table> </body> </html> একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব। Page: 23 of 54
  24. 24. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ে�া�াম আেলাচনা to H H o TM st EL 1. Bo 0 o k <table border="1"> এখােন border="1" এর মাধয্ে েটিবেলর জ� িসে�ল বডর্া বয্বহা করা হেয়েছ , �েয়াজন অনুসাে 1 এর �ােন 2,3,4 ইতয্াি বয্বহা করা যােব। েটিবেলর �িতটা সাির ৈতিরর জ� <tr></tr> বয্বহা করা হয়, এবং �িতটা েসল ৈতিরর জ� <td></td>বয্বহা করা হয়। <th></th> এর মাধয্ে েটিবল েহডার ৈতির করা হেয়েছ।<th>Book</th> এর মেধয্ Book েলখািট একটু েমাটা েদখােব। েটিবেলর মেধয েকান েসল খািল রাখার জ� <td></td> এর মােঝ িকছু না েলখেলই হেব। শুধুমা <td></td> বয্বহা করেত হেব। সাইেটর েনিভেগশন বার ৈতিরর জ� েটিবল বয্বহা করা েযেত পাের, এে�ে� �িতটা েসেলর েলখার সােথ <td><a href="www.tutohost.com"> িলংক ৈতির কের িদেলই হেব েযমন Tutohost</a></td> অথবা <th><a href="www.tutohost.com"> Tutohost</a></th> Tu ১৪. এইচিটএমএল িল� একিট ওেয়বেপেজ িল� বা তািলকােক সু�রভেব �কাশ করার জ� েয এইচিটএমএল েকাড বয্বহা করা হয়, তার সৃজনশীল প�িত িনেয় এখােন আেলাচনা করা হেয়েছ। একটা ওেয়ব েপজেক সু� কের সাজােনা এবং তথয উপ�াপনার অ�তম প�িত িল� । HTML এর মাধয্ে দু ধরেণর িল� ৈতির করা যায়, একিট হে� অডর্া িল� এবং অপরিট হে� আনঅডর্া িল� । অডর্া িলে� িবিভ� তথয্ে পযর্ায়�িমকভাে সািজেয় উপ�াপন করা হয় এবং �িতটা লাইেনর শুরু �িমক সংখয্ থােক। অ�িদেক আন অডর্া িলে� �িতটা লাইেনর সামেন েছাট বৃ�াকার বা বগর্াকা িচ� থােক। HTML এর মাধয্ে আন অডর্র িল� ৈতির করার জ� <ul></ul> এবং অডর্া িল� ৈতির করার জ� <ol></ol> টয্া বয্বহা করা হয়। Page: 24 of 54
  25. 25. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html উদাহরণ ে�া�াম to H H o TM st EL 1. Bo 0 o k <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" #00CC99" style="text-align:center"> <h4>Disc Type list</h4> <ul type="disc"> <li>Home</li> <li>About Us</li> <li>Contact Us</li> </ul> <h4>Circle Type list</h4> <ul type="circle"> <li>HTML</li> <li>CSS</li> <li>PHP</li> </ul><h4>Square Type list</h4> <ul type="square"> <li>Pragaph</li> <li>Table</li> <li>List</li> </ul> </body> </html> Tu একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব। Page: 25 of 54
  26. 26. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html উদাহরণ ে�া�াম to H H o TM st EL 1. Bo 0 o k <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" #00CC99" style="text-align:center"> <h3>Alphabet Type list</h3> <ol type="A"> <li>Home</li> <li>About Us</li> <li>Contact Us</li> </ol> <h3>Number Type list</h3> <ol type="1"> <li>HTML</li> <li>CSS</li> <li>PHP</li> </ol> <h3>Roman Number Type list</h3> <ol type="I"> <li>Pragaph</li> <li>Table</li> <li>List</li> </ol> Tu </body> </html> একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব। Page: 26 of 54
  27. 27. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ১৫. এইচিটএমএল ফমর to H H o TM st EL 1. Bo 0 o k এইচিটএমএল ফমর তথয ইনপুট েনওয়াসহ নানা রকম কােজ বয্বহ হয়। িবেশষ কের ি�ি�ং ে�া�ািমং ভাষার সােথ এই ফেমর্ তথয্গুে সংযু� হেয় কাজ কের থােক।এখােন এইচিটএমএল এর মাধয্ে ফমর ৈতির , বয্বহা এবং বা�ব �েজ� স�েকর আেলাচনা করা হেব। এইচিটএমএল ফমর একিট গুরু�পূ আেলাচয িবষয়। িবেশষ কের ডাইনািমক এবং ডাটােবজ িনভর্ ওেয়ব সাইেটর লগ ইন িসে�ম, েভািটং িসে�ম, কন্টা ফমর সহ ইউজার ইনফরেমশন সং�হ করার জ� এইচিটএমএল ফমর বয্বহ হেয় থােক। একিট এইচিটএমএল ফমর েবশ িকছু উপাদােনর সম�েয় গিঠত হয়। এগুেল হে� , ১. েট�ট ব� ২. েট�ট এিরয়া ৩. েরিডও বাটন ৪. সাবিমট বাটন ৫. েচক ব� ৬. �পডাউন িল� Tu উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" #000"> <center> <font face="SolaimanLipi" color="#fe0321" size="6"> আপনার তথয িদেয় সাহাযয করুন </font> < /br>< /br> <form name="information" method="post" action="information.php"> <font face="SolaimanLipi" color="#fe0321" size="4"> নাম:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </font> <input type="text" value="আপনার নাম িলখুন" Page: 27 of 54
  28. 28. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html name="name"><br /><br /> <font face="SolaimanLipi" color="#fe0321" size="4"> িপতার নাম: Tu to H H o TM st EL 1. Bo 0 o k </font> &nbsp; &nbsp; <input type="text" value="আপনার িপতার নাম িলখুন" name="name"> <br /><br /> <font face ="SolaimanLipi" color="#fe0321" size="4"> িঠকানা: </font> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <textarea rows="3" cols="20"></textarea><br /> <font face="SolaimanLipi" color="#fe0321" size="4"> আপিন িক পুরু: </font> <input type="radio" value="male" name="gender"> <br /> <font face="SolaimanLipi" color="#fe0321" size="4"> আপিন িক মিহলা: </font> <input type="radio" value="female" name="gender"> <br /> <font face="SolaimanLipi" color="#fe0321" size="4"> আপিন েয শহের থােকন: </font> <select name="district"> <option> কুি�য় </option> <option> ঢাকা</option> <option>খুলনা</option> <option>িসেলট</option> <option>েভড়ামারা</option> <option>যেশার</option> </select><br /><br /> <font face="SolaimanLipi" color="#fe0321" size="4"> িশ�াগত েযাগয্ত: </font> <br /> <input type="checkbox" value="checkbox1" name="checkbox"> <font face="SolaimanLipi" color="#fe0321" size="4"> এস.এস.িস </font> <br /> <input type="checkbox" value="checkbox" Page: 28 of 54
  29. 29. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html name="checkbox"> <font face="SolaimanLipi" color="#fe0321" size="4"> এইস.এস.িস to H H o TM st EL 1. Bo 0 o k </font><br /><br /> <input type="submit" name="submit" value="জমা করু"> <br /><br /> <input type="reset" value="মুেছ েফলুন" name="clear"> </form> </center> </body> </html> Tu একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। Page: 29 of 54
  30. 30. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ১৬. HTML ে�ম HTML এর মাধয্ে েকান ওেয়ব েপজেক একািধক ভােগ িবভ� করার জ� আেগর িদেন ে�ম বয্বহা করা হত। িদেন িদেন ে�েমর বযবহার কেম এেসেছ। তেব html স�েকর �ান ভান্ডা সমৃ� করার জ� ে�ম স�েকর্ িকছুটা to H H o TM st EL 1. Bo 0 o k ধারণা থাকা দরকার। HTML এর মাধয্ে েকান ওেয়ব েপজেক একািধক ভােগ িবভ� করার জ� আেগর িদেন ে�ম বয্বহা করা হত। িদেন িদেন ে�েমর বয্বহা কেম এেসেছ। বতর্মা সমেয় ে�েমর বয্বহা েনই বলেলই চেল, কারণ ে�ম বয্বহা কের ৈতিরকৃত স�ূণর েপজ একসােথ ি�ন্ করা েবশ ক�কর। এছাড়া এটা অেনেকর কােছই অপছে�র। এর পিরবেতর েকান েপজেক একািধক অংেশ িবভ� করেত এখন CSS বয্বহা করা হয়। তেব html স�েকর �ান ভান্ডা সমৃ� করার জ� ে�ম স�েকর্ িকছুটা ধারণা থাকা দরকার। Tu উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" #000"> <frameset rows="12%,88%"> <frame src="style.html" scrolling="no"> <frameset cols="27%,74%"> <frame src="link.html"> <frame src="textfor.html" > </frameset> </frameset> </body> </html> Page: 30 of 54
  31. 31. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o k েয েকান নােম একটা েফা�ার ৈতির কের তার মেথয style.html, link.html এবং textfor.html িতনিট html ফাইল রাখেত হেব এরপর একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। Tu ে�া�াম আেলাচনা <frameset rows="12%,88%"> এর মাধয্ে �থেম স�ূণর েপজটাের সাির বরাবর দুি অংেশ িবভ� করা হেয়েছ। <frameset cols="27%,74%"> এর মাধয্ে িনেচর সািরেক কলাম বরাবর দুি অংেশ িবভ� করা হেয়েছ। <frame src="style.html" scrolling="no"> এর মাধয্ে �থম ে�েমর মেধয style.html েপজিটেক �দশর্েন বয্ব� করা হেয়েছ। <frame src="link.html"> এবং <frame src="textfor.html" > এর মাধয্ে যথা�েম ২য় সািরর ১ম ও ২য় ে�েমর মেধয link.html এবং textfor.html েপজ দুিটে �দশর্েন বয্ব� করা হেয়েছ। Page: 31 of 54
  32. 32. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o একটা ওেয়ব েপেজর মেধয্ অপর এক বা একািধক ওেয়ব েপজ �দশর্ করার অ�তম উপায় হে� আই ে�ম। েকান িবষয় িব�ািরতভােব উপ�াপনার ে�ে� �াসি�ক িবষেয়র উপর িবিভ� ওেয়ব েপেজর িলংক �কাশ করা গুরু�পূ, পাশাপািশ উ� েপজিটেক সংি�� �ােনর মেধয �িলং কের �দশর্ করেত পারেল ম� হয় না। k ১৭. আই ে�ম উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" #f00"> <center> <h2 style="color:#f00">This is an example of iframe.</h2><br /> <iframe src="http://www.tutohost.com/bangla/html/" width="350" height="170"> <p>This rowser does not support iframes.</p> </iframe> </center> </body> </html> Tu একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। Page: 32 of 54
  33. 33. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ে�া�াম আেলাচনা to H H o TM st EL 1. Bo 0 o k আই ে�ম ৈতিরর জ� <iframe></iframe> টয্া বয্বহা করা হয়। width="350" height="170" এই দুি এি�িবউেটর মাধয্ে আই ে�ম এর আকৃিত েকমন হেব তার িনেদর্ �দান করা হয়। যিদ েকান �াউজার আই ে�ম সােপাটর না কের তাহেল <p>This rowser does not support iframes.</p> এর জ� This rowser does not support iframes. েলখািট �দিশর্ হেব। ১৮. রং ও েকাড ওেয়ব েপেজ রং এর বয্বহা খুবই গুরু�পূণ একটা ওেয়ব েপজ গিঠত হয় এক বা একািধক পয্ারা�া, িশেরানাম, েটিবল, বয্া�উন্, বডর্া ইতয্ািদ সম�েয়। এ সকল উপাদােনর �েতয্কিটেত েকান না েকান রং বয্বহা করেত হয়। রং ও েকাড বয্বহাের িব�ািরত প�িত স�েকর জানেত পারব। ওেয়ব েপেজ রং এর বয্বহা খুবই গুরু�পূণ একটা ওেয়ব েপজ গিঠত হয় এক বা একািধক পয্ারা�া, িশেরানাম, েটিবল, বয্া�াউন, বডর্া ইতয্ািদ সম�েয়। এ সকল উপাদােনর �েতয্কিটেত েকান না েকান রং বয্বহা করেত হয়। েকান একিট েপেজর বয্া�াউন কালার িনিদর্ করার জ� <body> টয্ােগ মেধয body েলখার পর একটা ে�স িদেয় bgcolor=" " েলখেত হেব এর পর " " এর মেধয BLACK, Tu SILVER, GRAY, WHITE, MAROON, RED, PURPLE, FUSCHSIA, GREEN, LIME, OLIVE, YELLOW, NAVY, BLUE, TEAL এবং AQUA এই েষালিট রং এর েয েকান একিট েলখা হেল েপেজর বয্া�াউেন েসই েদখা যােব। েযেহতু case sensitive নয় তাই েছাট হােতর অ�ের েলখেলও েকান সম�া েনই, েযমন েলখা হেয়েছ, <body bgcolor="green"> । এছাড়া hexadecimal code বয্বহা কেরও বয্া�াউন কালার িনবর্াচ করা যায়। েযমন উপেরর েকাডিট িনেচর মত েলখা যায় <body bgcolor="#00FF00"> । color piker েথেক সহেজই িবিভ� কালােরর জ� hexadecimal code সং�হ করা যায়। এছাড়া িনেচর চাটর েথেকও কাজিট করা যােব। hexadecimal code এর শুরু একটা # িচ� িদেয় শু করেত হয়। Page: 33 of 54
  34. 34. TutoHost.com/bangla/html Tu to H H o TM st EL 1. Bo 0 o k এইচিটএমএল ইবুক ১.০ বয্া�াউন কালার েদওয়ার আরও একটা মজার প�িত আেছ। লাল, সবুজ আর নীল এই িতনিট রং হে� েমৗিলক রং, আর অ� সব রং এই িতনিট রং এর সংিম�েন ৈতির। যিদ coding কের এই িতনিট রংেক িমিশেয় নতুন রং ৈতির করা হয়, তাহেল ম� হয় না। এ কাজিট সুস� করেত সবুজ বয্া�াউেন্ জ� িনেচর মত কের েলখা েযেত পাের <body bgcolor="rgb(0,255,0)"> । Page: 34 of 54
  35. 35. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o উদাহরণ ে�া�াম k এখােন rgb অথর হল red green blue আর (0,255,0) এর অথর হল রংিটেত যথা�েম লাল, সবুজ, নীল রং এর পিরমান যথা�েম 0%, 100%, 0% কারন এখােন িবশু সবুজ রং েনয়া হেয়েছ। আর েয েকান রং এর মান 0-255 পযর্ হেত পাের। েযেহতু g বা green এর মান 255 তাই তা 100%। িতনিট রং এর মান 0-255 এর মেধয পিরবতর্ কের ই�া অনুযায় নতুন নতুন রং ৈতির করা যােব । <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor="green"> <h2 style=" color:#ff0000" > This is the body of your web site. </h2> <p style="color:#093"> This is a paragraph.<br /> This is a paragraph. <br /> This is a paragraph.<br /> This is a paragraph.<br /> </p> </body> </html> Tu একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। Page: 35 of 54
  36. 36. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ১৯. েল আউট to H H o TM st EL 1. Bo 0 o k একটা ওেয়ব েপজ কতটা সু� হেব তা স�ূণর্রূ িনভর্ কের েপেজর েল আউেটর উপর। আেগ শধুমা� HTML বয্বহা কেরই সকল ওেয়ব সাইেটর েল আউট ৈতির করা হত। বতর্মাে HTML এর সােথ CSS বয্বহা করা হয়। শুধুমা HTML বয্বহা কের েল আউট ৈতির করার জ� <table> এর সাির ও কলাম বয্বহা করা হয়। Tu উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor="green"> <table width="400" border="0"> <tr> <td colspan="3" style="background-color: #93C;"> <h1> Web Page header</h1> </td> </tr> <tr valign="top"> <td style="background-color: #C99;width:100px;textalign:top;"> <p><b>Side bar</b><br /> <a href="#">PHP</a> <br /> <a href="#">HTML</a> <br /> <a href="#">CSS</a> <a href="#">Wordpress</a> </p></td> <td style="backgroundcolor:#EEEEEE;height:200px;width:400px;textalign:top;"><h2 style="color:#900">This is heading.</h2> <p style="color: #006">This is a paragraph.This is a paragraph. This is a paragraph.<br /> Page: 36 of 54
  37. 37. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o k This is a paragraph.This is a paragraph. This is a paragraph.<br /> This is a paragraph.This is a paragraph.This is a paragraph.<br /> This is a paragraph.This is a paragraph.This is a paragraph.</p></td> </tr> <tr> <td colspan="2" style="background-color:#999;textalign:center;"> Copyright © 2012tutohost.com</td> </tr> </table> </body> </html> Tu একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। Page: 37 of 54
  38. 38. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ২০. িস এস এস to H H o TM st EL 1. Bo 0 o k বতর্মা সমেয় ওেয়ব েপেজর কাঠােমা ৈতির করা হয় HTML িদেয়, িডজাইন ৈতির করা হয় CSS িদেয়, আর েট�ট জমা রাখা হয় ডাটােবেজ। তাই েকান েপজেক আকষর্ণী কের েতালার পাশাপািশ বয্বহা বা�ব কের েতালার জ� CSS এর ভূিমকা খুবই গুরু�পূণ এখান েথেক আমরা HTML এর সােথ CSS যু� করার প�িত স�েকর িব�ািরত জানেত পারব। বতর্মা সমেয় ওেয়ব েপেজর কাঠােমা ৈতির করা হয় HTML িদেয়, িডজাইন ৈতির করা হয় CSS িদেয়, আর েট�ট জমা রাখা হয় ডাটােবেজ। তাই েকান েপজেক আকষর্ণী কের েতালার পাশাপািশ বয্বহা বা�ব কের েতালার জ� CSS এর ভূিমকা খুবই গুরু�পূণ HTML �ারা ৈতির েপেজ িতন প�িতেত CSS যু� করা যায়। ১. এ�টানর্া �াইল িসট (External Style Sheet ) ২. ইনটানর্া �াইল িসট (Internal Style Sheet) ৩. ইনলাইন �াইল িসট (Inline Style Sheet) এ�টানর্া �াইল িসট এ প�িতেত HTML ফাইল এবং CSS �াইল িসট দুি আলাদা িসেট রাখা হয়। এবং িনে�া� প�িতেত HTML এর <head></head>টয্ােগ মেধয িলংক ৈতির কের েদয়া হয়। <head> <link rel="stylesheet" type="text/css" href="http://tutohost.com/bangla/style.css"> </head> ইনটানর্া �াইল িসট Tu এ প�িতেত HTML এবং CSS �াইল একই িসেট <head></head> টয্ােগ মেধয রাখা হয়। এজ� িনে�া� প�িতেত <style></style> টয্া বয্বহা করা হয়। <head> <style type="text/css"> body {background-color: red;} p { margin-left: 20px; font-weight: bold; color: #006; } </style> </head> Page: 38 of 54
  39. 39. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ইনলাইন �াইল িসট k এ প�িতেত HTML এর �িতিট টয্ােগ মেধযই CSS �াইল যু� করা হয় । এজ� িনে�া� প�িতেত style এি�িবউটস বয্বহা করা হয়। to H H o TM st EL 1. Bo 0 o <p style="margin-left:120px; font-weight: bold; color: #060;"> Tu উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> <link rel="stylesheet" type="text/css" href="http://tutohost.com/bangla/style.css"> <style> body{background:green; font-family:Verdana; fontsize:15px;} h3{font-size:25px; font-family:Tahoma; color:red;} </style> </head> <body > This is a paragraph. <br /> <h3> Bangladesh is a beautiful country. </h3> <p style="color: #600"> This is a paragraph. This is a paragraph.<br /> This is a paragraph. This is a paragraph.<br /> This is a paragraph. This is a paragraph.<br /> This is a paragraph. This is a paragraph.<br /> This is a paragraph. This is a paragraph.<br /> </p> </body> </html> Page: 39 of 54
  40. 40. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o k একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। ২১. েহড ইিলেমন্ Tu েহড টয্া বা <head> এবং েহড ইিলেমন্ েযেকান HTML েপেজর একিট গুরু�পূ অংশ। এর মাধয্ে �াউজাের েপজ স�িকর্ েবশ িকছু তথয �দশর্ করার পাশাপািশ সাচর ইিন্জ অপিটমাইেজশন এর মত গুরু�পূ কাজও স�� হয়।এখান েথেক আমরা েহড টয্া বা <head> এবং েহড ইিলেমন্ স�েকর িব�ািরত জানেত পারব। েহড টয্া বা <head> এবং েহড ইিলেমন্ েযেকান HTML েপেজর একিট গুরু�পূ অংশ। কারণ <head>….</head> এর মেধয অথর্া েহড ইিলেমন্ িহেসেব <title> <link> <meta> <style> <script> এ সকল গুরু�পূ টয্া সমূহ রাখা হয়। এগুেলা মাধয্ে �াউজাের েপজ স�িকর্ েবশ িকছু তথয �দশর্ করার পাশাপািশ সাচর ইিন্জ অপিটমাইেজশন এর মত গুরু�পূ কাজও স�� হয়। Page: 40 of 54
  41. 41. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html টাইেটল to H H o TM st EL 1. Bo 0 o <title>আমােদর HTML িটউেটািরয়াল সমূহ</title> k �াউজােরর টাইেটল বাের েপেজর টাইেটল �দশর্েন জ� <title> </title> টয্া বয্বহা করা হয়। উপেরর েকাড এর মাধয্ে �াউজােরর টাইেটল বাের “আমােদর HTML িটউেটািরয়াল সমূহ” েলখািট েদখা যােব। িলংক CSS �াইল িসট এর সােথ িলংক করার জ� <link> </link> বয্বহা করা হয়। <link rel="stylesheet" type="text/css" href="styles.css" /> েমটা ইিলেমন্ েমটা সাচর ইিন্জ অপিটমাইেজশেনর জ� গুরু�পূ কাজ কের থােক। িবষয়িট পববতর্ েলখায় িব�ািরত আেলাচনা করা হেব। �াইল ইনটানর্া �াইল িসট বয্বহাের জ� <style></style> টয্া বয্বহা করা হয়। েযমন Tu <head> <style type="text/css"> body {background-color: red;} p { margin-left: 20px; font-weight: bold; color: #006; } </style> </head> Page: 41 of 54
  42. 42. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ি�� k জাভাি��, েজ েকােয়রী ইতয্াি ি�� যু� করার জ� <script> </script> টয্া বয্বহা করা হয়। েযমন to H H o TM st EL 1. Bo 0 o <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="sliding_effect.js"></script> উদাহরণ ে�া�াম িনেচর িলংক েথেক েসাসর ফাইল ডাউনেলাড কের Extract কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব।এবং �াউজােরর টাইেটল বাের “আমােদর HTML িটউেটািরয়াল সমূহ” েলখািট েদখা যােব। Tu েসাসর ফাইল ডাউনেলাড Page: 42 of 54
  43. 43. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ২১. েমটা k েয েকান ওেয়ব সাইেটর জ�ই সাচর্ ইিন্জন অপিটমাইেজশন একিট গুরু� িবষয়। ওেয়ব েপেজ েমটা টয্াগ বয্বহার কের এ গুরু�পূণর্ কাজিট কর এখান েথেক আমরা েমটা টয্াগ স�েকর্ িব�ািরত জানে পারব। to H H o TM st EL 1. Bo 0 o একিট ওেয়ব সাইট তখনই জনি�য় হয় যখন তা মানুেষ �েয়াজেন আেস এবং েয েকউ �েয়াজেনর সময় সহেজই সাচর ইিন্জেন মাধয্ে সাচর কের সাইটিটেক খুেজঁ পায়। একিট ওেয়ব েপজ েযন সহেজই সাচর ইিন্জ খুেজ পায় এ জ� ওেয়ব ে�া�ামারেদর েয কাজিট করেত হয়, তােক বলা হয় সাচর ইিন্জ অপিটমাইেজশন। েয েকান ওেয়ব সাইেটর জ�ই সাচর ইিন্জ অপিটমাইেজশন একিট গুরু�পূ িবষয়। ওেয়ব েপেজ েমটা টয্া বয্বহা কের এ গুরু�পূ কাজিট করা হয়। http://www.tutohost.com/bangla/html/2.php েপজিটর েমটা টয্াে েলখা আেছ…. <meta name="description" content="এইচিটএমএল এ ে�া�াম েলখার সাধারন প�িত এবং �াথিমক একিট ে�ােজ� ও সাধারন টয্াগগুে িনেয় আেলাচনা করা হেব।" /> <meta name="keywords" content="এইচিটএমএল ে�া�াম েলখা, html bangla tutorial" /> Google আমােদর সকেলর পিরিচত জনি�য় একিট সাচর ইিন্জন যিদ http://www.tutohost.com/bangla/html/2.php িট Google সাচর ইিন্জ বয্বহা কের সাচর করা Tu হয় তাহেল িনেচর ছিবর মত আসেব। Page: 43 of 54
  44. 44. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html k �থেম েপেজর টাইেটল, তারপর িলংক এবং এর পর আেছ "এইচিটএমএল এ ে�া�াম েলখার সাধারন প�িত এবং �াথিমক একিট ে�ােজ� ও সাধারন টয্াগগুে িনেয় আেলাচনা করা হেব।" to H H o TM st EL 1. Bo 0 o যা <meta name="description" content="……………………………………." /> এর মেধয েলখা আেছ। <meta name="keywords" content="……………………………………." /> এর মেধয েলখা আেছ "এইচিটএমএল ে�া�াম েলখা, html bangla tutorial" এেক িক ওয়াডর বলা হয়। আমরা যখন েকান বাকয িলেখ সাচর ইিন্জে সাচর কির তখন সাচর ইিন্জ বাকয্িটে েভে� একািধক িক ওয়াডর এ িবভ� কের সাচর কের। তাই িক ওয়াডর হে� সাচর ইিন্জে েকান ওেয়ব েপজ খুেজ পাওয়ার অ�তম প�িত। এজ� HTML এর মাধয্ে েকান েপজ ৈতিরর সময় <meta name="keywords" content="……………………………………." /> এর মেধয স�াবয িক ওয়াডর গুেল যু� কের েদয়া হয়। <meta name="author" content="অসীম কুমা" /> Tu েলখেকর নামেক সাচর ইিন্জে সাবিমট করার জ� <meta name="author" content="……………"/> বয্বহা করা হয়। ওেয়ব েপজ অেটা িরে�স করার জ�ও েমটা টয্া বয্বহা করা হয়। <META HTTP-EQUIV="REFRESH" CONTENT="15;URL=http://www.tutohost.com"> উপেরর েকাডিট বয্বহা করেল �িত ১৫ েসেকন্ অ�র অ�র http://www.tutohost.com েপজিট একবার কের িরে�স হেব। Page: 44 of 54
  45. 45. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ২৩. ি�� to H H o TM st EL 1. Bo 0 o এ ি�� যু� করার প�িত স�েকর জানেত পারব। k HTML েকান ে�া�ািমং লয্া�ুেয় নয়। তাই ওেয়ব েপেজও ে�া�ািমং এর সুিবধ যু� করার জ� িবিভ� ধরেনর ি�ি�ং লয্া�ুেয় বয্বহা করা হয়, েযমন জাভাি��, েজ েকােয়রী ইতয্ািদ।জাভাি�, েজ েকােয়রী ইতয্াি ি�� যু� করার জ� HTML এ <script> </script> টয্া বয্বহা করা হয়।এখান েথেক আমরা HTML HTML েকান ে�া�ািমং লয্া�ুেয় নয়। তাই ওেয়ব েপেজও ে�া�ািমং এর সুিবধ যু� করার জ� িবিভ� ধরেনর ি�ি�ং লয্া�ুেয় বয্হার করা হয়, েযমন জাভাি��, েজ েকােয়রী ইতয্ািদ এর মাধয্ে ওেয়ব েপেজ েলাকাল টাইম �দশর্, সময় িদন তািরখ �দশর্, �াউজার িচি�ত করা, সময় এবং ইেভন্ এর উপর িভি� কের বয্বহারকারীে েকান িবেশষ বাতর্ �দশর্ করা সহ িবিভ� ধরেণর আকষর্ণী এবং গু�পূণর কাজ করা স�ব হয়। জাভাি��, েজ েকােয়রী ইতয্াি ি�� যু� করার জ� HTML এ <script> </script> টয্া বয্বহা করা হয়। েযমন <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="sliding_effect.js"></script> Tu উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> <script type="text/javascript"> function show_alert() {alert("Welcome to www.tutohost.com");} </script> </head> <body bgcolor="#009933" > <input type="button" style="margin-left:150px; width:100px; height:50px; font-size:18px; color:#F00" onclick="show_alert()" value="Click Me" /> </body> </html> Page: 45 of 54
  46. 46. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o k একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozila Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। যিদ Click Me বাটনিটেত ি�ক করা হয় তাহেল একিট এলাটর বে� Welcome to www.tutohost.com েলখািট েদখা যােব। ২৪. অিডও সংেযাজন েকান িবষয়েক উপ�াপনার ে�ে�, েট�ট এবং ছিবর পাশাপািশ অিডও-িভিডও বয্বহা করেল িবষয়িট আেরা �াণব� হেয় উেঠ। এখান েথেক আমরা HTML অিডও ফাইল যু� এবং িনয়�ণ করার প�িত স�েকর িব�ািরত জানেত পারব। Tu েকান িবষয়েক উপ�াপনার ে�ে�, েট�ট এবং ছিবর পাশাপািশ অিডও-িভিডও বয্বহা করেল িবষয়িট আেরা �াণব� হেয় উেঠ। ওেয়ব িমিডয়ার মাধয্ে এ কাজিট যতটা ভােলাভােব করা যায় আর অ� েকােনা িমিডয়ায় মাধয্ে তা স�ব নয়। HTML �ারা ৈতির েপেজ <embed> টয্া বয্বহা কের সহেজই অিডও ফাইল যু� করা যায় এবং িনয়�ণ করা যায়। পূবর ��িত Page: 46 of 54
  47. 47. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html েড�টেপ একটা audio নােম folder িনেত হেব এর মেধয audio.mp3 নােম save করা একটা অিডও ফাইল রাখেত হেব। k অনুশীল �েজ� to H H o TM st EL 1. Bo 0 o <html> <head> <title> www.tutohost.com</title> </head> <body > <p> <center> <embed src="audio.mp3" height="35" width="300" controller="true" loop="false" autostart="false"> </embed> <h3 style="color:#F00">Click play button and enjoy music.</h3> </center> </p> </body> </html> েড�টেপ ৈতির করা audio folder এর মেধয একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। �েজ� িবে�ষণ Tu অিডও যু� করার জ� <embed> টয্া বয্বহা করা হয়। <embed src="audio.mp3" height="35" width="300" controller="true" loop="false" autostart="false"> </embed> src="audio.mp3" এখােন src="…………." এর মেধয অিডও ফাইেলর িলংক যু� করা হয়। Page: 47 of 54
  48. 48. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html height="35" width="300" এর মাধয্ে �াউজাের �দিশর্ অিডও ে�য়ােরর আকৃিত িনধর্ার করা হয়। to H H o TM st EL 1. Bo 0 o k controller="true" এর মাধয্ে ওেয়ব েপেজ অিডও ে�য়ার �দশর্ করা হেব িকনা তার িনেদর্ �দান করা হয়। যিদ controller="……….." এর মেধয true েলখা হয় তাহেল অিডও ে�য়ার �দিশর্ হেব আর false েলখা হেল অিডও ে�য়ার �দিশর্ হেব না। loop="false" এর মাধয্ে audio ফাইলিট িক একবার ে� হেব না লুপ আকাের বারবার ে� হেব তার িনেদর্ �দান করা হয়। েযেহতু false েলখা আেছ; সুতরা একবার ে� হেব। autostart="false" এর মাধয্ে audio ফাইলিট অেটাে� অথর্া ওেয়ব েপজ েলাড হওয়ার সােথ সােথই ে� হেব, না অিডও ে�য়ােরর ে� বাটেন ি�ক করার পর ে� হেব তার িনেদর্ �দান করা হয়। েযেহতু false েলখা আেছ; সুতরা অেটাে� হেব না, অিডও ে�য়ােরর ে� বাটেন ি�ক করার পর ে� হেব। িনেদর্শন: যিদ ওেয়ব েপেজ অিডও ে�য়ার �দিশর্ না হয় তাহেল QuickTime Player ই�টল কের িনন অথবা �াউজােরর িনেদর্শন অনুযায় �েয়াজনীয় �াগ ইনস ই�টল কের িনন। ২৫. িভিডও সংেযাজন সংঘিটত বা�ব ঘটনােক পিরপূণ্ভাে উপ�াপনার ে�ে� িভিডও সবেচেয় উপেযাগী মাধয্ম।এখা েথেক আমরা র HTML এ িভিডও ফাইল যু� এবং িনয়�ণ করার প�িত স�েকর িব�ািরত জানেত পারব। Tu সংঘিটত বা�ব ঘটনােক পিরপূণর্ভাে উপ�াপনার ে�ে� িভিডও সবেচেয় উপেযাগী মাধয্ম ৈদনি�ন সংবাদ �কাশক ওেয়ব সাইটগুেল তােদর ৈদনি�ন ঘটনাগুেলাে েট�ট এবং ইেমজ বয্বহাের মাধয্ে �কােশর পাশাপািশ িভিডও �কােশর মাধয্ে আেরা েবিশ জনি�য়তা অজর্েন সুেযা পাে�, এবং বয্বহারকারীর এ সকল ঘটনার বা�ব িচ� েদখা, এবং জানার পাশাপািশ �েয়াজেন সং�হ কের রাখেত পারেছন। বতর্মাে িভিডও শুধ মানুেষ িবেনাদন এবং বা�ব ঘটনা �কােশর মাধয্ম নয়, এিট িশ�ার অ�তম বাহেন পিরণত হেয়েছ। অসংখয িশ�ামূলক ওেয়ব সাইট িবিভ� িবষেয়র উপর �িতিদন নতুন নতুন েট�ট িভি�ক িটউেটািরয়ােলর পাশাপািশ িভিডও িটউেটািরয়াল �কাশ করেছ। যা মানুষে পৃিথবীর েয েকান �া� েথেক শুধুমা েশখা এবং জানার সেযাগই সৃি� করেছ না, �� িবিনময় এবং আেলাচনার মু� Page: 48 of 54
  49. 49. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html �াটফমর ৈতিরর মাধয্ে পিরপূণর িশ�া িব�ােরও ভুিমকা রাখেছ। HTML�ারা ৈতির েপেজ <embed> টয্া বয্বহা কের সহেজই িভিডও যু� করা যায় এবং িনয়�ণ করা যায়। to H H o TM st EL 1. Bo 0 o k পূবর ��িত েড�টেপ একটা video নােম folder িনেত হেব এর মেধয video.wmv নােম save করা একটা িভিডও ফাইল রাখেত হেব। অনুশীল �েজ� Tu <html> <head> <title> www.tutohost.com</title> </head> <body > <p> <center> <embed src="video.wmv" width="344" height="300" autostart="false" controller="true" loop="false" > </embed> <h3 style="color:#F00">Click the play button and enjoy video.</h3> </center> </p> </body> </html> েড�টেপ ৈতির করা video folder এর মেধয একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। �েজ� িবে�ষণ Page: 49 of 54
  50. 50. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html িভিডও যু� করার জ� <embed> টয্া বয্বহা করা হয়। to H H o TM st EL 1. Bo 0 o k <embed src="video.wmv" width="344" height="300" autostart="false" controller="true"> </embed> src="video.wmv" এখােন src="…………." এর মেধয িভিডও ফাইেলর িলংক যু� করা হয়। height="344" width="300" এর মাধয্ে �াউজাের �দিশর্ িভিডও ে�য়ােরর আকৃিত িনধর্ার করা হয়। controller="true" এর মাধয্ে ওেয়ব েপেজ িভিডও ে�য়ার �দশর্ করা হেব িকনা তার িনেদর্ �দান করা হয়। যিদ controller="……….." এর মেধয true েলখা হয় তাহেল িভিডও ে�য়ার �দিশর্ হেব আর false েলখা হেল িভিডও ে�য়ার �দিশর্ হেব না। loop="false" এর মাধয্ে িভিডও ফাইলিট িক একবার ে� হেব না লুপ আকাের বারবার ে� হেব তার িনেদর্ �দান করা হয়। েযেহতু false েলখা আেছ; সুতরা একবার ে� হেব। Tu autostart="false" এর মাধয্ে িভিডও ফাইলিট অেটাে� অথর্া ওেয়ব েপজ েলাড হওয়ার সােথ সােথই ে� হেব, না িভিডও ে�য়ােরর ে� বাটেন ি�ক করার পর ে� হেব তার িনেদর্ �দান করা হয়। েযেহতু false েলখা আেছ; সুতরা অেটাে� হেব না, িভিডও ে�য়ােরর ে� বাটেন ি�ক করার পর ে� হেব। িনেদর্শন: যিদ ওেয়ব েপেজ অিডও ে�য়ার �দিশর্ না হয় তাহেল �াউজােরর িনেদর্শন অনুযায় �েয়াজনীয় �াগ ইনস ই�টল কের িনন। ২৬. �াস সংেযাজন Page: 50 of 54
  51. 51. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html �াস এিনেমশন ওেয়ব সাইেটর একিট অ�তম আকষর্ণী উপাদান। আকষর্ণী েনিভেগশন বার, বয্ানা, বাটন ইতয্ািদে �ােসর এিনেমশন যু� কের েযমন ওেয়ব সাইেটর ইন্টারেফসে আকষর্ণী কের েতালা যায়, পাশাপািশ সাইটিটও বয্বহা বা�ব হেয় উেঠ। এখান েথেক আমরা HTML এ �ােস ৈতির এিনেমশন অথর্া SWF ফাইল যু� করার প�িত স�েকর িব�ািরত জানেত পারব। to H H o TM st EL 1. Bo 0 o k �াস এিনেমশন ওেয়ব সাইেটর একিট অ�তম আকষর্ণী উপাদান। আকষর্ণী েনিভেগশন বার, বয্ানা, বাটন ইতয্ািদে �ােসর এিনেমশন যু� কের েযমন ওেয়ব সাইেটর ইন্টারেফসে আকষর্ণী কের েতালা যায়, পাশাপািশ সাইটিটও বয্বহা বা�ব হেয় উেঠ। HTML�ারা ৈতির েপেজ <embed> টয্া বয্বহা কের অিডও এবং িভিডও এর মত সহেজই �ােস ৈতির এিনেমশন অথর্া SWF ফাইল যু� করা যায় । পূবর ��িত েড�টেপ একটা flash নােম folder িনেত হেব এর মেধয flash.swf নােম save করা একটা িভিডও ফাইল রাখেত হেব। Tu অনুশীল �েজ� <html> <head> <title> www.tutohost.com</title> </head> <body > <center> <embed src="flash.swf" width="250" height="240"> </embed> </center> </body> </html> েড�টেপ ৈতির করা flash folder এর মেধয একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। Page: 51 of 54
  52. 52. TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o k এইচিটএমএল ইবুক ১.০ �েজ� িবে�ষণ �াস যু� করার জ� <embed> টয্া বয্বহা করা হয়। <embed src="flash.swf" width="250" height="240"> </embed> src="flash.swf" এখােন src="…………." এর মেধয �াস ফাইেলর িলংক যু� করা হয়। width="250" height="240" এর মাধয্ে �াউজাের �দিশর্ �াস এিনেমশেনর আকৃিত িনধর্ার করা হয়। িনেদর্শন: Tu িনেদর্শন: যিদ ওেয়ব েপেজ �াস এিনেমশন �দিশর্ না হয় তাহেল flash player অথবা �াউজােরর িনেদর্শন অনুযায় �েয়াজনীয় �াগ ইনস ই�টল কের িনন। Like Us on FaceBook FaceBook.com/TutoHost All Right Reserved By TutoHost.com Page: 52 of 54

×