HTML Ebook

এইচিটএমএল ইবুক ১.০ TutoHost.
com/bangla/html
k
0 o
1. Bo
-
E
এইচিটএমএল ই-বুক ১.০
TM st
H o
L
H
েলখকঃ অসীম কুমা পাল

to
Tu
Page: 1 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html
েলখকঃ অসীম কমমা পমল
অসীম কমমা
k
১৯৮৭ সমেল
0 o
কি�য়ময়
জ��হণ কোন।
1. Bo
২০১০ সমেল
িতিন কি�য়ম পিলেটকিনক ইনি�িটউট স�মদনমঃ মমহবুব িটউেটম
েথেক িডে�মমম পমস কোন। িতিন
বমংলমেদেশ িশ�মমূলক
-
ঢমকম �েকৗশল �যুি� িব�িবদযমলেয়
অনলমইন �কমশনমগেলম
ইেলকি�ক E
িব. এস. িস ইন ইেলকি�কযমল
ইি�িনয়মিাং
এনড
এ
এেকবমো হমেতগেন োলম
যময়। এ েদেশা তুন
TM st
পড়েছন। িতিন ওেয়ব েডভলপেমনট
সমমজ তথয�যুি�েত নতুন নতুন েমধম
এবং মমইেয়মকেন�লমোা উপো
একি�ত হেয় �মন অজরেনা জ� কমজ
ধমামবমিহক িটউেটমিায়মল িলেখ সবমা
H o
কো যমে�। িবষয়িট একিট িনাব িব�েবা

L
নজো আেসন। এছমড়মও িতিন
মেতম। আর এই সৃজনশীল বযি�েদা িশ�ম
H
েটকিটউনস, িটউেটমিায়মলিবিডসহ েবশ

কমযরয়ম ও উ�মবনী শি�া �কমশনম
িকছু বমংলম �ো িলেখ থমেকন।
ধারাবািহক এইচিটএমএল িটউেটমিায়মল যা
to
এখন ই-বুক আকাের �কাশ করা হেলা।
বতরমমেন িতিন িটউেটমেহমে� কমরাত �যুি� েলখক অসীম কমমোা হমত ধো
Tu
আেছন। “এইচিটএমএল বমংলম ই-বুক ১.০”

সবমইেক ওেয়ব েডভলপেমেনটা িশখমা
�থম পদে�প িহেসেব এিােয় িনেয় যমেব
আিথরক সহেযমিাতময় বেল আশম কিা।
িটউেটমেহম� TutoHost.com
�ুা িািডং
িনলুামা ইয়মসিমন AmusingOcean.com

Page: 2 of 54
সূিচ প�ঃ
• HTML িক?
k
• HTML এর ইিতহাস
ে�া�াম েলখার প�িত
0 o
•
• টয্া সমুহ ও বয্বহা
1. Bo
• ইিলেমন্ িক এবং িকভােব বয্বহ হয়
• এি�িবউট িক এবং িকভােব বয্বহ হয়
• েহিডং টয্া ও বয্বহা
• HTML পয্ারা�া
-
• েট�ট ফরেমিটং
ফন্ টয্া এর বয্বহা
•
•
• E
�াইেলর বয্বহা
িলংক �কােশর প�িত
TM st
• ছিব �কাশ
• েটিবল ও েটিবল �কাশ প�িত
• িলে�র বয্বহা
H o
• HTML ফমর
L
• ে�ম এর বয্বহা
H
• আই ে�ম এর বয্বহা
• রং ও েকাড
• েল আউট প�িত
to
• HTML এ িসএসএস এর বযবহার

• েহড
• েমটা টয্া
Tu
• HTML এ ি�� এর বয্বহা

• ওেয়েব অিডও ফাইল চালােনার প�িত
• ওেয়েব িভিডও ফাইল চালােনার প�িত
• ওেয়েব �াস ফাইল চালােনার প�িত
Page: 3 of 54
১. HTML িক?
এখােন ধারাবািহক ভােব বাংলা ভাষায় HTML এর উপর িটউেটািরয়াল েলখা হেয়েছ । ডান পােশর ধারাবািহক িলংক
k
েথেক HTML স�িকর্ িব�ািরত �ান অজর্ করা যােব।
0 o
1. Bo
HTML একটা কি�উটার লয্া�ুেয়, যা পৃিথবীর িবশাল তথয-
ভান্ডারে ইন্টারেনেট মাধয্ে �দশর্েন সুেযা ৈতির কের িদেয়েছ।
একটা ওেয়ব েপেজর মূল গঠন ৈতির হয় HTML িদেয়। HTML
-
েকান ে�া�ািমং লয্া�ুেয় নয়, এেক Hyper Text Mark Up
Language বলা হয়। Mark Up Language এক েসট Mark
E Up টয্ােগ সম�েয় গিঠত হয়। একটা ওেয়ব েপেজর িবিভ� অংশ

�াউজােরর মাধয্ে িকভােব �দিশর্ হেব, তা HTML এ Mark
Up টয্া সমূহ বয্বহা কের �কাশ করা হয় ।
TM st
H o
HTML এর ইিতহাস
L
H
HTML বা Hyper Text Mark Up Language ৈতির কেরেছন িটম বানর্া-লী। এখােন
এইচিটএমএল এর সংি�� ইিতহাস তুেল ধরা হেলা।
to
HTML বা Hyper Text Mark Up Language ৈতির কেরেছন

িটম বানর্া-লী। HTML ৈতিরর উে�� িছল ৈব�ািনক গেবষণার তথয
Tu
উপা� �ত পৃিথবীর িবিভ্ �ােন আদান �দােনর বয্ব� করা। ১৯৯০

সােলর িদেক NCSA কতৃ্ র েডভলপকৃত েমাজাইক �াউজােরর মাধয্ে
HTML পিরিচিত লাভ কের। ১৯৯৭ এর জানুয়ারীে WC3 কতৃরক
�থম েডভলপকৃত HTML3.2 �কািশত হয়। একই বছের েশেষ
িডেস�ের WC3 HTML এর নতুন সং�রণ HTML4.2 �কাশ
কের। ২০১০ সােল বতর্মাে �চিলত HTML এর সবর্েশ ভাসর্
HTML5 জনস�ূেখ পিরিচিত লাভ কের।
Page: 4 of 54
২. ে�া�াম েলখার প�িত

েয েকান ে�া�াম েলখার জ�ই েকান একটা এিডটর বয্বহা কের েকািডং করেত হয়।এখােন এইচিটএমএল এ
ে�া�াম েলখার সাধারন প�িত, একিট �াথিমক ে�ােজ� এবং সাধারন টয্াগসমূ িনেয় আেলাচনা করা হেব।
k
েয েকান ে�া�াম েলখার জ�ই েকান একটা এিডটর বয্বহা কের
েকািডং করেত হয়। HTML এ ে�া�াম েলখার জ� �াথিমকভােব
0 o
এিডটর িহেসেব উইেন্ডা অপােরিটং িসে�েমর িডফ� এিডটর
notepad বয্বহা করা েযেত পাের এবং বাড়িত সুিবধ পাবার জ�
1. Bo
এডভা� এিডটর িহেসেব Dreamweaver এবং Notepad++
বয্বহা করা ভাল। HTML এ েলখা ে�া�াম .html এ�েটনশন
েযমন index.html �ারা Save কের েযেকান �াউজার েযমন
Internet explorer, Mozilla Firefox , Google chrome
এবং Opera �ারা েদখা যােব।
E -
HTML এ েলখা ে�া�ােমর েমৗিলক অংশ সমূহ
<html>
TM st
<head>
<title> www.tutohost.com</title>
</head>
H o
<body>
L
This is my first web page. I am learning now HTML.
H
</body>
</html>
একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File
to
name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট
Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব।
Tu
Page: 5 of 54
HTML এ েলখা ে�া�ােমর িবিভ� অংশ িবে�ষণ

ে�া�ােমর মেধয <> এবং < /> দুইট িচ� এবং এর মেধয িকছু Word েযমন html, head, title,
k
body এগুেলাে Keyword বেল এবং <> বা < /> িচ� এবং এর মােঝ েলখা একিট Keyword েক
টয্া বলা হয়। েযমন <head> অথর head টয্াগ HTML এ দু ধরেনর টয্া রেয়েছ , <> িচ� ও
0 o
keyword িনেয গিঠত টয্াগে শু টয্া এবং < /> িচ� ও keyword িনেয গিঠত টয্াগে েশষ টয্া
বেল েযমন < title> অথর title শু টয্া এবং <title /> অথর title েশষ টয্াগ
1. Bo
<html> বা html টয্া:
HTML এ ে�া�াম েলখার জ� সম� code েক <html> </html> এর মােঝ েলখা হয়।
E -
<head> বা head টয্া:
<head></head> এর েভতের <title> </title> টয্া েলখা হয় যার মাধয্ে ওেয়বসাইেটর title বা
TM st
িশেরানাম �দশর্ের বয্ব� করা হয়। এই code এ title িহেসেব www.tutohost.com েলখা হেয়েছ যা
�াউজােরর title bar এ েদখা যাে�। এছাড়া css এর stylesheet েক head টয্ােগ মেধয্ call করা
হয়।
H o
L
<body> বা body টয্া:
H
<body> বা body টয্া খুবই গুরু�পূণ একিট ওেয়ব সাইেটর মূল Content সমূহ Body টয্ােগ
মেধয অব�ান কের । <body></body> টয্েগ মেধয্ িবিভ� Text , Image, Table ইতয্াি
to
ফরেমিটং এর জ� িবিভ� টয্া সমূহ েলখা হয় । এই code এ <body></body> টয্েগ মেধয This
is my first web page. I am learning now HTML. েলখা হেয়েছ যা �াউজােরর মূল অংেশ
�দিশর্ হে�।
Tu
Page: 6 of 54
৩. HTML টয্া িক?

এইচিটএমএল এর সাধারন টয্া সমূহ
এবং এগুেলা কােজর সাধারন িববরণ
k
স�েকর জানা খুবই গুরু�পূণ আমরা
সহেজই এখান েথেক এইচিটএমএল এর
0 o
সাধারন টয্া সমূহ এবং এগুেলা
কােজর সাধারন িববরণ েজেন িনেত
1. Bo
পারব।
E -
HTML এ ে�া�াম েলখার জ� <> এবং
</> দুইট িচ� এবং এর মেধয িকছু Word েযমন
TM st
html, head, title, body ইতয্াি Keyword
বয্বহা করা হয়। <> বা </> িচ� এবং এর মােঝ
েলখা একিট Keyword েক একে� টয্া বলা হয়।
H o
েযমন <html> এবং </html> । <body> হল

L
body শু টয্া এবং </ body> হল body েশষ
H
টয্াগ
to
HTML এর সাধারন টয্া সমূহ

Tu
টয্া সমূহ বণর্ন

<html> </html> HTML ডকুেমন িনেদর্ কের।
<head></head> ে�া�ােমর head অংশ িনেদর্ কের ।
<title></title> ডকুেমন টাইেটল িনেদর্ কের।
<body></body> ে�া�ােমর মূল content অংশ িনেদর্ কের।
<a></a> Anchor টয্াগ
<abbr></abbr> Abbreviation টয্াগ
<b></b> Bold েট�ট িনেদর্ কের।
Page: 7 of 54
<i></i> Italic েট�ট িনেদর্ কের।

<big></big> �াভািবেকর েচেয় বড় েট�ট িনেদর্ কের।
<small></small> �াভািবেকর েচেয় েছাট েট�ট িনেদর্ কের।
<blockquote> </blockquote> িবেশষ উ�ৃিত �কাশ করেত বয্বহ হয়।
<br / > একটা লাইন ে�ক ৈতির কের ।
k
<code></code> কি�উটার েকাড েট�ট �কাশ কের।
<table></table> েটিবল ৈতিরেত বয্বহ হয়।
0 o
<col></col> েটিবেলর কলাম ৈতিরেত বয্বহ হয়।
<td></td> েটিবেলর েসল ৈতিরেত বয্বহ হয়।
1. Bo
<tr></tr> েটিবেলর সাির ৈতিরেত বয্বহ হয়।
<form></form> ফরম ৈতিরেত বয্বহ হয়।
<h1></h1> েহডার টয্া 1-6 পযর্ হয়।
<hr/> সমা�রাল েরখা ৈতির কের।
-
<img/> ছিব যু� করেত বয্বহ হয়।
E<input></input>
<li></li>
<meta></meta>
ফরেমর ইনপুট িফ� ৈতিরেত বয্বহ হয়।
িল� ৈতিরেত বয্বহ হয়।
Meta টয্া
TM st
<ol></ol> অডর্া িল� ৈতিরেত বয্বহ হয়।
<ul></ul> আনঅডর্া িল� ৈতিরেত বয্বহ হয়।
<p></p> পয্ারা�া িনেদর্ কের
H o
<pre></pre> pre-formatted েট�ট ৈতিরেত বয্বহ হয়।

L
<tt></tt> েটিলটাইপ েট�ট িনেদর্ কের।
H
<strong></strong> Strong েট�ট িনেদর্ কের।

<sub></sub> subscripted text িনেদর্ কের।
<sup></sup> superscripted text িনেদর্ কের।
to
Tu
Page: 8 of 54
৪. HTML ইিলেমন্
HTML এ েযেকান শু এবং েশষ
টয্ােগ মােঝর অংশেক ইিলেমন্ বলা
k
হয়। েযমন <h1> This is an example
of element.</h1> । এখােন <h1>
0 o
েহডার1 শু এবং </h1> েহডার1 েশষ
টয্ােগ মােঝ This is an example of
1. Bo
element. েলখা হেয়েছ, তাই “This is
an example of element.” একিট
ইিলেমন্ট িকছু িকছু টয্ােগ েকান
ইিলেমন্ থােক না েযমন <br /> ,<img
-
/> ইতয্ািদ
E
TM st
শর টয্া ইিলেমন্ েশষ টয্া
H o
L
<h1> This is an element. </h1>
H
<p> This is paragraph. </p>

<br />
<img />
to
Tu
সাধারণতঃ েয সকল টয্ােগ েশষ টয্া থােক না তােদর ইিলেমন্ট থােক না। এ
ধরেণর শু টয্ােগ মেধয্ / িচ�িট অ�ভূর্ থােক, এবং এর আেগ একটা ে�স
িদেত হয়।
Page: 9 of 54
৫. HTML এি�িবউটস
HTML এি�িবউটস সবর্ািধ গুরু�পূ এবং অতয্ �েয়াজনীয় একিট িবষয়। HTML টয্ােগ কাযর্�মতাে বিধর্
করার জ� এি�িবউটস বয্বহা করা হয়। এখােন উদাহরণ সহ HTML এি�িবউটস স�েকর িব�ািরত আেলাচনা করা
হেব।
k
HTML এ এি�িবউটস ইিলেমন্ এর আনুসাি� তথয �কাশ কের
0 o
। মূলত HTML এ টয্ােগ কাযর্�মতাে বিধর্ করার জ�
এি�িবউটস বয্বহা করা হয়। েযমন <font size="5"
1. Bo
face="Tahoma" color="red"> This is a
paragraph.</font> এখােন size="5" অংশিট হল font
টয্ােগ একিট এি�িবউট, যা �কাশ করেছ ইিলেমন্ অথর্া This is
a paragraph. েলখািটর সাইজ েকমন হেব। এছাড়া
-
face="Tahoma" �কাশ করেছ েলখািটর font হেব Tahoma
এবং color="red" �ারা �কাশ করেছ েলখািটর রং হেব লাল।
E
TM st
H o
িকছু HTML এি�িবউটস

L
H
টয্া এি�িবউটস
<font> size="5" face="Tahoma" color="red"
to
<h1>….<h6> <p> align="center" align="left"

align="right" title="Bangladesh"
<body> bgcolor="green"
Tu
background="../images/ele.png"
<div> id="book" class="pen"
align="center"
<img> <table> height="100px" width="50px"
border="5px"
<input /> type="text" name="TextField"
Page: 10 of 54
উদাহরণ ে�া�াম
<html>
<head>
k
</head>
<body bgcolor=" green">
0 o
<font size="5" face="Tahoma" color="red">
This is a paragraph.
</font>
1. Bo
</body>
</html>
E -
একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের
File name: index.html , Save as type : All files, িদেয় save কের index.html
ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব।
TM st
H o
L
H
to
Tu
Page: 11 of 54
৬. েহিডং
এইচিটএমএল এ েহিডং টয্া একিট গুরু�পূ টয্া । সাধারনত এর মাধয্ে েকান পয্ারা�ােফ িশেরানাম েলখা হয়।
এ অধয্াে আমরা েহিডং এর েকািডং প�িত স�েকর জানেবা।
k
HTML এর মাধয্ে েকান ডকুেমন বা পয্ারা�ােফ িশেরানাম েলখার
জ� েহিডং টয্া বয্বহা করা হয়। HTML এ েমাট ছয় ধরেণর েহিডং
0 o
টয্া রেয়েছ এগুেল হল <h1> </h1> , <h2> </h2> , <h3>
</h3> , <h4> </h4> , <h5> </h5> এবং <h6> </h6> । যিদ
1. Bo
বড় সাইেজর অ�ের িশেরানাম েলখার �েয়াজন হয় তাহেল <h1> </h1>
টয্ােগ মােঝ েলখা হয়। এবং অ�া� গুেল বয্বহা করেল েলখার সাইজ
আে� আে� েছাট হেব।
E -
<html>
TM st
<head>
</head>
H o

L
<h1>This is an example of heading 1</h1>
H

to

</body>
</html>
Tu
একটা েনাটপয্া open কের

উপেরর code টুক িলেখ file
েমন েথেক Save as এ ি�ক কের
File name: index.html
, Save as type : All files,
িদেয় save কের index.html
ফাইলিট Mozilla Firefox িদেয়
open করেল পােশ �দিশর্ ছিবর
মত েদখােব।
Page: 12 of 54
৭. পয্ারা�া
পয্ারা�া টয্াগি সবর্ািধ গুরপূণর এবং অতয্ �েয়াজনীয় একিট টয্াগ পয্ারা�া টয্ােগ েভতেরই েট�টগুেল
িবিভ�ভােব �কািশত হয়। এখােন পয্ারা�া টয্া স�েকর উদাহরণসহ িব�ািরত িববরণ েদওয়া হেব।
k
েয েকান ডকুেমন এক বা একািধক পয্ারা�ােফ মাধয্ে েলখা হয়।
HTML এ পয্ারা�ফ ৈতিরর জ� <p> বা পয্রা�া টয্া বয্বহা করা
0 o
হয়। েযমন <p>This is a paragraph.</p>। �াউজােরর মাধয্ে
�িতটা পয্ারা�া �দশর্ করা হেল �িতটা পয্ারা�ােফ পর একটা কের
লাইন ে�ক ৈতির হয়। যিদ কখেনা পয্ারা�ােফ মেধয্ লাইন ে�েকর
1. Bo
�েয়াজন হয় তাহেল লাইেনর েশেষ <br /> টয্া বয্বহা করা হয়।
E -
TM st
<html>
<head>
H o
L
</head>
H

<p>This is a paragraph.</p>
<p>
to
Tu
</p>
<p>
This is a paragraph.<br />
</p>
</body>
</html>
Page: 13 of 54
একটা েনাটপয্া open কের উপেরর code

টুক িলেখ file েমন েথেক Save as এ ি�ক
k
কের File name: index.html , Save
as type : All files, িদেয় save কের
0 o
index.html ফাইলিট Mozilla Firefox
িদেয় open করেল পােশ �দিশর্ ছিবর মত
েদখােব।
1. Bo
-
E
TM st
H o
L
৮. েট�ট ফরেমিটং
H
ওেয়বসাইেট আমরা েয েট�টগুেল েদিখ তা েছাট, বড়, েবা�, ইটািলকসহ িবিভ� ফরেমেট হেয় থােক। এখােন েট�ট
ফরেমিটং করার িবিভ� প�িত স�েকর িব�ািরত আেলাচনা করা হেব ।
to
Microsoft Word এ Bold, Italic, Underline,

Tu
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
<html>
<head>
<title>www.tutohost.com</title>
k
</head>
<body bgcolor="green">
0 o
<p>
1. Bo
<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 />
E
<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 />
TM st
<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
H o
example of Abbreviation. <br />

L
(<var>x</var> is a variable.)This is an example of Variable <br />
H
(<code>Computer code text.</code>) This is an example of Code.
<br />
to
<address>
(Written by Ashim<br />
Address: www.tutohost.com<br />
E-mail:ashimkumar50@yahoo.com)
Tu
</address>This is an example of Address <br />

</p>
</body>
</html>
Page: 15 of 54
একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File
name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট
Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব।
k
0 o
1. Bo
-
E
TM st
H o
L
H
to
Tu
Page: 16 of 54
৯. ফন্ টয্া
HTML এর মাধয্ে েকান ডকুেমন্ট সু�রভাে উপ�াপন করার জ� <font> বা ফন্ টয্া খুবই গুরু�পূ
ভূিমকা পালন কের। এখােন ফন্ টয্া বয্বহাের িব�ািরত প�িত আেলাচনা করা হেব।
k
0 o
HTML এর মাধয্ে েকান ডকুেমন্ট সু�রভাে
উপ�াপন করার জ� <font> বা ফন্ টয্া খুবই
1. Bo
গুরু�পূ ভূিমকা পালন কের।<font size="5"
face="Tahoma" color="red"> Bangladesh
is a beautiful country.</font> এখােন
size="5" অংশিট হল font টয্ােগ একিট এি�িবউট,
যা �কাশ করেছ ইিলেমন্ অথর্া Bangladesh is a
-
beautiful country. েলখািটর সাইজ েকমন হেব।
E এছাড়া face="Tahoma" �কাশ করেছ েলখািটর

font হেব Tahoma এবং color="red" �ারা �কাশ
করেছ েলখািটর রং হেব লাল।
TM st
H o
L
H
<html>
<head>
</head>
to

<font size="2" face="Verdana">
Tu
</font>
<br />
<font size="5" face="Tahoma" color="red" >
Bangladesh is a beautiful country.
</font>
</body>
</html>
Page: 17 of 54
ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব।
k
0 o
1. Bo
-
E
TM st
H o
L
১০. �াইেলর বয্বহা
H
িসএসএস (Cascading Style Sheet files) মাধয্ে ওেয়বসাইটেক অেনক সু� কের েতালা যায়। এখােন
HTML ইিলেমেন্ট সােথ �াইেলর বয্বহা �ণালী িনেয় িব�ািরত আেলাচনা করা হেব।
to
Style, HTML এর একিট নতুন এি�িবউটস, এর মাধয্ে

Tu
HTML এর মেধয্ CSS বয্বহাের সুেযা সৃি� হয়।

Style তথা CSS বয্বহাের মাধয্ে ওেয়ব েপেজর িবিভ�
উপাদােনর িডজাইন ৈতির করা হয়। অ�া� এি�িবউটস
েযমন align="center", align="left",
bgcolor="green", height="100px",
width="50px, bgcolor="green" ইতয্ািদ মাধয্ে
যিদও িডজাইন ৈতির করা যায়, তেব এে�ে� Style বয্হাের
িবেশষ সুিবধ পাওয়া যায়।
Page: 18 of 54
উদাহরণ ে�া�াম: অ�া� এি�িবউটস বয্বহা কের

<html>
k
<head>
</head>
0 o
<font size="2" face="Verdana">
1. Bo
</font>
<br />
<font size="5" face="Tahoma" color="red" >
-
</font>
</body>
E </html>
উদাহরণ ে�া�াম: �াইল বয্বহা কের

TM st
<html>
<head>
H o
</head>
L
H
<font style="font-family:Verdana; font-size:15px" >

</font>
<br />
to
<font style=" font-size:25px; font-family:Tahoma; color:red;" >

</font>
</body>
Tu
</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
১১. িলংক
একটা পাতার সােথ আেরকিট পাতার েযাগােযাগ �াপন করা হয় িলংেকর মাধয্ে । এখােন এইচিটএমএল এ
িলংক �কাশ করার প�িত স�েকর িব�ািরত আেলাচনা করা হেব।
k
একটা ওেয়ব সাইটেক বয্বহা বা�ব কের েতালার ে�ে�
িলংেকর বয্বহা খুবই গুরু�পূণ Link এর আিভধািনক
0 o
অথর সংযু� করা। অথর্া একটা ওেয়ব েপেজর সােথ অ�
একটা েপজেক যু� করাই হল িলংিকং। HTML এ
1. Bo
িলংিকং করার জ� <a> টয্গ বা anchor টয্া বয্বহা
করা হয়। েযমন <a href="http://www.
tutohost.com/"> www. tutohost.com </a>
। অথর্া েয েপেজর সােথ িলংক ৈতির করেত হেব তার
এে�স href="…………….. " এর মেধয েলখেত হেব, এবং িলংেক েয েলখািট �দশর্ করেব তা <a
-
href=" ">…………………..</a> এর মেধয েলখেত হেব।
E
TM st
<html>
<head>
H o
</head>
L
H
<a href="http://www. tutohost.com/"> www. tutohost.com

</a> <br />
<a href="mailto:admin@tutohost.com">
admin@tutohost.com</a>
to
</body>
</html>
একটা েনাটপয্া open কের উপেরর code

Tu
টুক িলেখ file েমন েথেক Save as এ ি�ক

কের File name: index.html , Save
as type : All files, িদেয় save কের
index.html ফাইলিট Mozilla Firefox
িদেয় open করেল পােশ �দিশর্ ছিবর মত
Page: 20 of 54
১২. ছিব সংেযাজন

ওেয়ব সাইেট ছিব সংেযাজন, ছিবর মাধয্ে িলংক করা এবং িবিভ� সাইেজর ছিব �দশর্েণ প�িত আেলাচনা করা
হেয়েছ।
k
একটা ওেয়ব েপেজর গুরু�পূ উপাদান সমূেহর একিট হে�
ইেমজ । ওেয়বেপেজ ইেমেজর উপযু� বয্বহাের মাধয্ে
0 o
েপজিট বয্বহারকারীেদ কােছ েযমন আকষর্ণী হেয় ওেঠ
েতমিন বয্বহা বা�বও হয়। আকষর্নী েনিভেগশন বার,
বাটন, বয্ানা, ইতয্ািদে ইেমেজর বয্বহা অপিরহাযর্
1. Bo
ওেয়ব েপেজ ইেমজ বা ছিব যু� করার জ� �েয়াজনীয়
টয্াগি হে� <img> । এর েকান েশষ টয্া েনই। শুধুমা
<img> িদেয় েকান কাজ হয় না, এর সােথ সবসময়ই src
এি�িবউটিট বয্বহা করেত হয়। েযমন <img
-
src=”pic.png”> , তাহেল pic.png ইেমজিট �দিশর্
E হেব।
TM st
পূবর ��িত
েড�টেপ একটা webpage নােম folder িনেত হেব এর মেধয pic.png নােম save করা একটা ছিব
H o
রাখেত হেব।
L
H
to
<html>
<head>
Tu
</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
k
একটা Notepad Open কের উপেরর Code টুক
0 o
িলেখ File েমন েথেক Save as এ ি�ক কের
File name িহেসেব index.html বা
1. Bo
home.html অথবা েযেকান নাম.html িদেয়,
Save as type িহেসেব All files িসেল� কের
এরপর Save বাটেন ি�ক করেত হেব। এরপর
save করা index.html ফাইলিটেক webpage
-
folder এর মেধয রাখেত হেব। এখন Mozilla
Firefox িদেয় index.html open করেল
E
পােশর ছিবর মত েদখােব।
TM st
H o
L
অনলাইেন সাভর্াে েকান ইেমজ আপেলাড করা থাকেল উ� ইেমজ যু� করার জ� তার এে�স pic.png
H
এর �ােন েলখেত হেব। েযমন
<img src="http://www.tutohost.com/bangla/html/images/pic.png">
to
১৩. েটিবল সংেযাজন

Tu
ওেয়ব েপেজ তথয উপা� পিরসংখয্া উপ�াপন করার একিট অ�তম প�া হে� েটিবল বয্বহা করা। HTML এ
table ৈতিরর িবিভ� িবষয় এখােন আেলাচনা করা হেয়েছ ।
িদেন িদেন ইন্টারেন আজ সবেচেয় বড় তথয ভান্ডাে পিরণত হেয়েছ। তথয

উপা� পিরসংখয্া িচ� িভিডও ইতয্ািদ সংিম�েণ একটা ওেয়বেপেজ েকান
িবষয়ব�েক যতটা আকষর্ণী এবং পিরপূণর্ভাে উপ�াপন করা যায়, অ�া�
িমিডয়ায় তা স�ব হয় না। ওেয়ব েপেজ তথয উপা� পিরসংখয্া উপ�াপন
করার একিট অ�তম প�া হে� েটিবল বয্বহা করা। েটিবল ৈতিরর জ�
েটিবল টয্া <table> বয্বহা করা হয়।
Page: 22 of 54
<html>
<head>
k
</head>
<body bgcolor=" #00CC99" style="text-align:center">
0 o
<table border="1">
<tr>
1. Bo
<th>SL</th>
<th>Book</th>
<th>Pen</th>
<th>Box</th>
</tr>
-
<tr>
E <td>01</td>
<td>100</td>
<td>200</td>
TM st
<td>400</td>
</tr> <tr>
<td>02</td>
H o
<td>300</td>
L
<td>600</td>
H
<td>300</td>
</tr> <tr>
<td>03</td>
<td>500</td>
to
<td>800</td>
<td>200</td>
</tr>
</table>
Tu
</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
ে�া�াম আেলাচনা
<table border="1"> এখােন border="1" এর মাধয্ে েটিবেলর জ� িসে�ল বডর্া বয্বহা করা
k
হেয়েছ , �েয়াজন অনুসাে 1 এর �ােন 2,3,4 ইতয্াি বয্বহা করা যােব।
েটিবেলর �িতটা সাির ৈতিরর জ� <tr></tr> বয্বহা করা হয়, এবং �িতটা েসল ৈতিরর জ�
0 o
<td></td>বয্বহা করা হয়।
<th></th> এর মাধয্ে েটিবল েহডার ৈতির করা হেয়েছ।<th>Book</th> এর মেধয্ Book
1. Bo
েলখািট একটু েমাটা েদখােব।
-
েটিবেলর মেধয েকান েসল খািল রাখার জ� <td></td> এর মােঝ িকছু না েলখেলই হেব। শুধুমা
<td></td>
E বয্বহা করেত হেব।
সাইেটর েনিভেগশন বার ৈতিরর জ� েটিবল বয্বহা করা েযেত পাের, এে�ে� �িতটা েসেলর েলখার সােথ
িলংক ৈতির কের িদেলই হেব েযমন <td><a href="www.tutohost.com">
TM st
Tutohost</a></td> অথবা <th><a href="www.tutohost.com"> Tutohost</a></th>
H o
L
H
১৪. এইচিটএমএল িল�

to
একিট ওেয়বেপেজ িল� বা তািলকােক সু�রভেব �কাশ করার জ� েয এইচিটএমএল

েকাড বয্বহা করা হয়, তার সৃজনশীল প�িত িনেয় এখােন আেলাচনা করা হেয়েছ।
একটা ওেয়ব েপজেক সু� কের সাজােনা এবং তথয উপ�াপনার অ�তম প�িত
Tu
িল� । HTML এর মাধয্ে দু ধরেণর িল� ৈতির করা যায়, একিট হে� অডর্া
িল� এবং অপরিট হে� আনঅডর্া িল� । অডর্া িলে� িবিভ� তথয্ে
পযর্ায়�িমকভাে সািজেয় উপ�াপন করা হয় এবং �িতটা লাইেনর শুরু �িমক
সংখয্ থােক। অ�িদেক আন অডর্া িলে� �িতটা লাইেনর সামেন েছাট বৃ�াকার বা
বগর্াকা িচ� থােক। HTML এর মাধয্ে আন অডর্র িল� ৈতির করার জ�
<ul></ul> এবং অডর্া িল� ৈতির করার জ� <ol></ol> টয্া বয্বহা করা
হয়।
Page: 24 of 54
<html>
k
<head>
0 o
</head>
1. Bo
<h4>Disc Type list</h4>
<ul type="disc">
<li>Home</li>
<li>About Us</li>
-
<li>Contact Us</li>
E </ul>
<h4>Circle Type list</h4>
<ul type="circle">
TM st
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul><h4>Square Type list</h4>
H o
<ul type="square">
L
<li>Pragaph</li>
H
<li>Table</li>
<li>List</li>
</ul>
to
</body>
</html>

Tu

name: index.html , Save as type : All files, িদেয় save
কের index.html ফাইলিট Mozilla Firefox িদেয়
Page: 25 of 54
<html>
<head>
k
</head>
0 o
<h3>Alphabet Type list</h3>
1. Bo
<ol type="A">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ol>
-
<h3>Number Type list</h3>
E <ol type="1">
<li>HTML</li>
<li>CSS</li>
TM st
<li>PHP</li>
</ol>
<h3>Roman Number Type
H o
list</h3>
L
<ol type="I">
<li>Pragaph</li>
H
<li>Table</li>
<li>List</li>
</ol>
to
</body>
</html>
Tu

name: index.html , Save as type : All files, িদেয় save
কের index.html ফাইলিট Mozilla Firefox িদেয়
Page: 26 of 54
১৫. এইচিটএমএল ফমর

এইচিটএমএল ফমর তথয ইনপুট েনওয়াসহ নানা রকম কােজ বয্বহ হয়। িবেশষ কের ি�ি�ং ে�া�ািমং ভাষার সােথ
এই ফেমর্ তথয্গুে সংযু� হেয় কাজ কের থােক।এখােন এইচিটএমএল এর মাধয্ে ফমর ৈতির , বয্বহা এবং বা�ব
�েজ� স�েকর আেলাচনা করা হেব।
k
0 o
এইচিটএমএল ফমর একিট গুরু�পূ আেলাচয িবষয়। িবেশষ কের ডাইনািমক এবং ডাটােবজ িনভর্ ওেয়ব
1. Bo
সাইেটর লগ ইন িসে�ম, েভািটং িসে�ম, কন্টা ফমর সহ ইউজার ইনফরেমশন সং�হ করার জ�
এইচিটএমএল ফমর বয্বহ হেয় থােক। একিট এইচিটএমএল ফমর েবশ িকছু উপাদােনর সম�েয় গিঠত হয়।
এগুেল হে� ,
-
১. েট�ট ব�
E ২. েট�ট এিরয়া
৩. েরিডও বাটন
৪. সাবিমট বাটন
TM st
৫. েচক ব�
৬. �পডাউন িল�
H o
L
H
<html>
to
<head>
</head>
<body bgcolor=" #000">
Tu
<center>
<font face="SolaimanLipi" color="#fe0321" size="6">
আপনার তথয িদেয় সাহাযয করুন
</font>
< /br>< /br>
<form name="information" method="post"
action="information.php">
নাম:
</font>
<input type="text" value="আপনার নাম িলখুন"
Page: 27 of 54
name="name"><br /><br />

িপতার নাম:
</font>
<input type="text" value="আপনার িপতার নাম িলখুন"
k
name="name">
<br /><br />
0 o
<font face ="SolaimanLipi" color="#fe0321" size="4">
িঠকানা:
1. Bo
</font>
<textarea rows="3" cols="20"></textarea><br />
আপিন িক পুরু:
</font>
-
<input type="radio" value="male" name="gender">
E <br />
আপিন িক মিহলা:
TM st
</font>
<input type="radio" value="female" name="gender">
<br />
H o
আপিন েয শহের থােকন:

L
</font>
H
<select name="district">
<option> কুি�য় </option>
<option> ঢাকা</option>
<option>খুলনা</option>
to
<option>িসেলট</option>
<option>েভড়ামারা</option>
<option>যেশার</option>
Tu
</select><br /><br />

িশ�াগত েযাগয্ত:
</font> <br />
<input type="checkbox" value="checkbox1"
name="checkbox">
এস.এস.িস
</font>
<br />
<input type="checkbox" value="checkbox"
Page: 28 of 54
name="checkbox">
এইস.এস.িস
</font><br /><br />
<input type="submit" name="submit" value="জমা করু">
k
<br /><br />
<input type="reset" value="মুেছ েফলুন" name="clear">
0 o
</form>
</center>
1. Bo
</body>
</html>
-
E
TM st
H o
L
H
to
Tu
Page: 29 of 54
১৬. HTML ে�ম

HTML এর মাধয্ে েকান ওেয়ব েপজেক একািধক ভােগ িবভ� করার জ� আেগর িদেন ে�ম বয্বহা করা হত।
িদেন িদেন ে�েমর বযবহার কেম এেসেছ। তেব html স�েকর �ান ভান্ডা সমৃ� করার জ� ে�ম স�েকর্ িকছুটা
ধারণা থাকা দরকার।
k
0 o
HTML এর মাধয্ে েকান ওেয়ব েপজেক একািধক ভােগ িবভ�
1. Bo
করার জ� আেগর িদেন ে�ম বয্বহা করা হত। িদেন িদেন ে�েমর
বয্বহা কেম এেসেছ। বতর্মা সমেয় ে�েমর বয্বহা েনই বলেলই
চেল, কারণ ে�ম বয্বহা কের ৈতিরকৃত স�ূণর েপজ একসােথ ি�ন্
করা েবশ ক�কর। এছাড়া এটা অেনেকর কােছই অপছে�র। এর
পিরবেতর েকান েপজেক একািধক অংেশ িবভ� করেত এখন CSS
-
বয্বহা করা হয়। তেব html স�েকর �ান ভান্ডা সমৃ� করার
E জ� ে�ম স�েকর্ িকছুটা ধারণা থাকা দরকার।

TM st
H o
<html>
L
<head>
H
</head>
<body bgcolor=" #000">
<frameset rows="12%,88%">
to
<frame src="style.html" scrolling="no">

<frameset cols="27%,74%">
<frame src="link.html">
<frame src="textfor.html" >
Tu
</frameset>
</frameset>
</body>
</html>
Page: 30 of 54
েয েকান নােম একটা েফা�ার ৈতির কের তার মেথয 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 করেল িনেচ �দিশর্
ছিবর মত েদখােব।
k
0 o
1. Bo
-
E
TM st
H o
L
H
to
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
১৭. আই ে�ম
একটা ওেয়ব েপেজর মেধয্ অপর এক বা একািধক ওেয়ব
েপজ �দশর্ করার অ�তম উপায় হে� আই ে�ম। েকান
িবষয় িব�ািরতভােব উপ�াপনার ে�ে� �াসি�ক িবষেয়র
উপর িবিভ� ওেয়ব েপেজর িলংক �কাশ করা গুরু�পূ,
k
পাশাপািশ উ� েপজিটেক সংি�� ােনর মেধয �িলং কের
�দশর্ করেত পারেল ম� হয় না।
0 o
1. Bo
<html>
<head>
-
</head>
<body bgcolor=" #f00">
E <center>
<h2 style="color:#f00">This is an example of
iframe.</h2><br />
TM st
<iframe src="http://www.tutohost.com/bangla/html/"
width="350" height="170">
<p>This rowser does not support iframes.</p>
H o
</iframe>
L
</center>
H
</body>
</html>
to
Tu
Page: 32 of 54
আই ে�ম ৈতিরর জ� <iframe></iframe> টয্া বয্বহা করা হয়।
width="350" height="170" এই দুি এি�িবউেটর মাধয্ে আই ে�ম এর আকৃিত েকমন হেব তার
িনেদর্ �দান করা হয়।
k
যিদ েকান �াউজার আই ে�ম সােপাটর না কের তাহেল <p>This rowser does not support
iframes.</p> এর জ� This rowser does not support iframes. েলখািট �দিশর্ হেব।
0 o
1. Bo
১৮. রং ও েকাড
ওেয়ব েপেজ রং এর বয্বহা খুবই গুরু�পূণ একটা ওেয়ব েপজ গিঠত হয় এক বা একািধক পয্ারা�া,
িশেরানাম, েটিবল, বয্া�উন্, বডর্া ইতয্ািদ সম�েয়। এ সকল উপাদােনর �েতয্কিটেত েকান না েকান
-
রং বয্বহা করেত হয়। রং ও েকাড বয্বহাের িব�ািরত প�িত স�েকর জানেত পারব।
E
TM st
ওেয়ব েপেজ রং এর বয্বহা খুবই গুরু�পূণ একটা ওেয়ব েপজ গিঠত
হয় এক বা একািধক পয্ারা�া, িশেরানাম, েটিবল, বয্া�াউন, বডর্া
ইতয্ািদ সম�েয়। এ সকল উপাদােনর �েতয্কিটেত েকান না েকান
রং বয্বহা করেত হয়। েকান একিট েপেজর বয্া�াউন কালার িনিদর্
H o
করার জ� <body> টয্ােগ মেধয body েলখার পর একটা ে�স

L
িদেয় bgcolor=" " েলখেত হেব এর পর " " এর মেধয BLACK,
H
SILVER, GRAY, WHITE, MAROON, RED,

PURPLE, FUSCHSIA, GREEN, LIME, OLIVE,
YELLOW, NAVY, BLUE, TEAL এবং AQUA এই
to
েষালিট রং এর েয েকান একিট েলখা হেল েপেজর বয্া�াউেন েসই েদখা যােব। েযেহতু case sensitive
নয় তাই েছাট হােতর অ�ের েলখেলও েকান সম�া েনই, েযমন েলখা হেয়েছ, <body
bgcolor="green"> ।
Tu
এছাড়া hexadecimal code বয্বহা কেরও বয্া�াউন কালার িনবর্াচ করা যায়। েযমন উপেরর েকাডিট
িনেচর মত েলখা যায় <body bgcolor="#00FF00"> ।
color piker েথেক সহেজই িবিভ� কালােরর জ� hexadecimal code সং�হ করা যায়। এছাড়া
িনেচর চাটর েথেকও কাজিট করা যােব। hexadecimal code এর শুরু একটা # িচ� িদেয় শু করেত
হয়।
Page: 33 of 54
k
0 o
1. Bo
-
E
TM st
H o
L
H
to
Tu
বয্া�াউন কালার েদওয়ার আরও একটা মজার প�িত আেছ। লাল, সবুজ আর নীল এই িতনিট রং হে�
েমৗিলক রং, আর অ� সব রং এই িতনিট রং এর সংিম�েন ৈতির। যিদ coding কের এই িতনিট রংেক
িমিশেয় নতুন রং ৈতির করা হয়, তাহেল ম� হয় না। এ কাজিট সুস� করেত সবুজ বয্া�াউেন্ জ�
িনেচর মত কের েলখা েযেত পাের
<body bgcolor="rgb(0,255,0)"> ।
Page: 34 of 54
এখােন rgb অথর হল red green blue আর (0,255,0) এর অথর হল রংিটেত যথা�েম লাল, সবুজ, নীল
রং এর পিরমান যথা�েম 0%, 100%, 0% কারন এখােন িবশু সবুজ রং েনয়া হেয়েছ। আর েয েকান রং
এর মান 0-255 পযর্ হেত পাের। েযেহতু g বা green এর মান 255 তাই তা 100%। িতনিট রং এর মান
0-255 এর মেধয পিরবতর্ কের ই�া অনুযায় নতুন নতুন রং ৈতির করা যােব ।
k
0 o
<html>
1. Bo
<head>
</head>
-
<h2 style=" color:#ff0000" >
E This is the body of your web site.

</h2>
<p style="color:#093">
TM st
This is a paragraph. <br />
H o

</p>
L
H
</body>
</html>
to
Tu
Page: 35 of 54
১৯. েল আউট
একটা ওেয়ব েপজ কতটা সু� হেব তা স�ূণর্রূ িনভর্ কের েপেজর েল
আউেটর উপর। আেগ শধুমা� HTML বয্বহা কেরই সকল ওেয়ব
সাইেটর েল আউট ৈতির করা হত। বতর্মাে HTML এর সােথ CSS
k
বয্বহা করা হয়। শুধুমা HTML বয্বহা কের েল আউট ৈতির করার
জ� <table> এর সাির ও কলাম বয্বহা করা হয়।
0 o
1. Bo
<html>
-
<head>
E </head>
TM st
<table width="400" border="0">
<tr>
H o
<td colspan="3" style="background-color: #93C;">

L
<h1> Web Page header</h1>
</td>
H
</tr>
<tr valign="top">
to
<td style="background-color: #C99;width:100px;text-

align:top;">
<p><b>Side bar</b><br />
<a href="#">PHP</a>
Tu
<br />
<a href="#">HTML</a>
<br />
<a href="#">CSS</a>
<a href="#">Wordpress</a>
</p></td>
<td style="background-
color:#EEEEEE;height:200px;width:400px;text-
align: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
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
k
paragraph.</p></td>
</tr>
0 o
<tr>
<td colspan="2" style="background-color:#999;text-
1. Bo
align:center;">
Copyright © 2012tutohost.com</td>
</tr>
</table>
-
</body>
E </html>
TM st
H o
L
H
to
Tu
Page: 37 of 54
২০. িস এস এস
বতর্মা সমেয় ওেয়ব েপেজর কাঠােমা ৈতির করা হয় HTML িদেয়, িডজাইন
ৈতির করা হয় CSS িদেয়, আর েট�ট জমা রাখা হয় ডাটােবেজ। তাই েকান
েপজেক আকষর্ণী কের েতালার পাশাপািশ বয্বহা বা�ব কের েতালার জ�
k
CSS এর ভূিমকা খুবই গুরু�পূণ এখান েথেক আমরা HTML এর সােথ
CSS যু� করার প�িত স�েকর িব�ািরত জানেত পারব।
0 o
বতর্মা সমেয় ওেয়ব েপেজর কাঠােমা ৈতির করা হয় HTML িদেয়,
িডজাইন ৈতির করা হয় CSS িদেয়, আর েট�ট জমা রাখা হয়
1. Bo
ডাটােবেজ। তাই েকান েপজেক আকষর্ণী কের েতালার পাশাপািশ
বয্বহা বা�ব কের েতালার জ� CSS এর ভূিমকা খুবই গুরু�পূণ HTML �ারা ৈতির েপেজ িতন
প�িতেত CSS যু� করা যায়।
-
১. এ�টানর্া �াইল িসট (External Style Sheet )
২. ইনটানর্া �াইল িসট (Internal Style Sheet)
E
এ�টানর্া �াইল িসট
৩. ইনলাইন �াইল িসট (Inline Style Sheet)
TM st
এ প�িতেত HTML ফাইল এবং CSS �াইল িসট দুি আলাদা িসেট রাখা হয়। এবং িনে�া� প�িতেত
HTML এর <head></head>টয্ােগ মেধয িলংক ৈতির কের েদয়া হয়।
H o
L
<head>
H
<link rel="stylesheet" type="text/css"

href="http://tutohost.com/bangla/style.css">
</head>
to
ইনটানর্া �াইল িসট

এ প�িতেত HTML এবং CSS �াইল একই িসেট <head></head> টয্ােগ মেধয রাখা হয়। এজ�
Tu
িনে�া� প�িতেত <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
ইনলাইন �াইল িসট

এ প�িতেত HTML এর �িতিট টয্ােগ মেধযই CSS �াইল যু� করা হয় । এজ� িনে�া� প�িতেত
style এি�িবউটস বয্বহা করা হয়।
k
<p style="margin-left:120px; font-weight: bold; color: #060;">
0 o
1. Bo
<html>
<head>
<link rel="stylesheet" type="text/css"
-
href="http://tutohost.com/bangla/style.css">
E <style>
body{background:green; font-family:Verdana; font-
size:15px;}
TM st
h3{font-size:25px; font-family:Tahoma; color:red;}
</style>
</head>
H o
L
<body >
H
<br />
<h3>
to

</h3>
<p style="color: #600">
This is a paragraph. This is a paragraph.<br />
Tu

</p>
</body>
</html>
Page: 39 of 54
k
0 o
1. Bo
-
E
TM st
H o
L
H
২১. েহড ইিলেমন্

েহড টয্া বা <head> এবং েহড ইিলেমন্ েযেকান HTML েপেজর একিট গুরু�পূ অংশ। এর মাধয্ে �াউজাের
েপজ স�িকর্ েবশ িকছু তথয �দশর্ করার পাশাপািশ সাচর ইিন্জ অপিটমাইেজশন এর মত গুরু�পূ কাজও স��
to
হয়।এখান েথেক আমরা েহড টয্া বা <head> এবং েহড ইিলেমন্ স�েকর িব�ািরত জানেত পারব।
েহড টয্া বা <head> এবং েহড ইিলেমন্ েযেকান HTML েপেজর

Tu
একিট গুরু�পূ অংশ। কারণ <head>….</head> এর মেধয অথর্া

েহড ইিলেমন্ িহেসেব <title> <link> <meta> <style> <script>
এ সকল গুরু�পূ টয্া সমূহ রাখা হয়। এগুেলা মাধয্ে �াউজাের েপজ
স�িকর্ েবশ িকছু তথয �দশর্ করার পাশাপািশ সাচর ইিন্জ
অপিটমাইেজশন এর মত গুরু�পূ কাজও স�� হয়।
Page: 40 of 54
টাইেটল
�াউজােরর টাইেটল বাের েপেজর টাইেটল �দশর্েন জ� <title> </title> টয্া বয্বহা করা হয়।
k
<title>আমােদর HTML িটউেটািরয়াল সমূহ</title>
0 o
উপেরর েকাড এর মাধয্ে �াউজােরর টাইেটল বাের “আমােদর HTML িটউেটািরয়াল সমূহ” েলখািট েদখা
1. Bo
যােব।
িলংক
-
CSS �াইল িসট এর সােথ িলংক করার জ� <link> </link> বয্বহা করা হয়।
E
<link rel="stylesheet" type="text/css" href="styles.css" />
েমটা ইিলেমন্
TM st
েমটা সাচর ইিন্জ অপিটমাইেজশেনর জ� গুরু�পূ কাজ কের থােক। িবষয়িট পববতর্ েলখায় িব�ািরত
আেলাচনা করা হেব।
H o
L
�াইল
H
ইনটানর্া �াইল িসট বয্বহাের জ� <style></style> টয্া বয্বহা করা হয়। েযমন
to
<head>
<style type="text/css">
body {background-color: red;}
p { margin-left: 20px;
Tu
font-weight: bold;
color: #006; }
</style>
</head>
Page: 41 of 54
ি��
জাভাি��, েজ েকােয়রী ইতয্াি ি�� যু� করার জ� <script> </script> টয্া বয্বহা করা হয়।
েযমন
k
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"
0 o
src="sliding_effect.js"></script>
1. Bo
িনেচর িলংক েথেক েসাসর ফাইল ডাউনেলাড কের Extract কের index.html ফাইলিট Mozilla
Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব।এবং �াউজােরর টাইেটল বাের “আমােদর
-
HTML িটউেটািরয়াল সমূহ” েলখািট েদখা যােব।
E
েসাসর ফাইল ডাউনেলাড
TM st
H o
L
H
to
Tu
Page: 42 of 54
২১. েমটা
েয েকান ওেয়ব সাইেটর জ�ই সাচর্ ইিন্জন অপিটমাইেজশন একিট গুরু� িবষয়। ওেয়ব েপেজ েমটা
টয্াগ বয্বহার কের এ গুরু�পূণর্ কাজিট কর এখান েথেক আমরা েমটা টয্াগ স�েকর্ িব�ািরত জানে
পারব।
k
একিট ওেয়ব সাইট তখনই জনি�য় হয় যখন তা মানুেষ �েয়াজেন আেস
0 o
এবং েয েকউ �েয়াজেনর সময় সহেজই সাচর ইিন্জেন মাধয্ে সাচর কের
সাইটিটেক খুেজঁ পায়। একিট ওেয়ব েপজ েযন সহেজই সাচর ইিন্জ খুেজ
1. Bo
পায় এ জ� ওেয়ব ে�া�ামারেদর েয কাজিট করেত হয়, তােক বলা হয়
সাচর ইিন্জ অপিটমাইেজশন। েয েকান ওেয়ব সাইেটর জ�ই সাচর ইিন্জ
অপিটমাইেজশন একিট গুরু�পূ িবষয়। ওেয়ব েপেজ েমটা টয্া বয্বহা
কের এ গুরু�পূ কাজিট করা হয়।
E -
http://www.tutohost.com/bangla/html/2.php েপজিটর েমটা টয্াে েলখা আেছ….
TM st
<meta name="description" content="এইচিটএমএল এ ে�া�াম েলখার সাধারন প�িত
এবং �াথিমক একিট ে�ােজ� ও সাধারন টয্াগগুে িনেয় আেলাচনা করা হেব।" />
H o
L
<meta name="keywords" content="এইচিটএমএল ে�া�াম েলখা, html bangla
H
tutorial" />
Google আমােদর সকেলর পিরিচত জনি�য় একিট সাচর ইিন্জন যিদ

http://www.tutohost.com/bangla/html/2.php িট Google সাচর ইিন্জ বয্বহা কের সাচর করা
to
হয় তাহেল িনেচর ছিবর মত আসেব।

Tu
Page: 43 of 54
�থেম েপেজর টাইেটল, তারপর িলংক এবং এর পর আেছ "এইচিটএমএল এ ে�া�াম েলখার সাধারন প�িত
এবং �াথিমক একিট ে�ােজ� ও সাধারন টয্াগগুে িনেয় আেলাচনা করা হেব।"
k
যা <meta name="description" content="……………………………………."
0 o
/> এর মেধয েলখা আেছ।
1. Bo
<meta name="keywords" content="……………………………………." />
এর মেধয েলখা আেছ "এইচিটএমএল ে�া�াম েলখা, html bangla tutorial" এেক িক ওয়াডর বলা হয়।
-
আমরা যখন েকান বাকয িলেখ সাচর ইিন্জে সাচর কির তখন সাচর ইিন্জ বাকয্িটে েভে� একািধক িক ওয়াডর
E
এ িবভ� কের সাচর কের। তাই িক ওয়াডর হে� সাচর ইিন্জে েকান ওেয়ব েপজ খুেজ পাওয়ার অ�তম
প�িত। এজ� HTML এর মাধয্ে েকান েপজ ৈতিরর সময়
TM st
<meta name="keywords" content="……………………………………." />
এর মেধয
স�াবয িক ওয়াডর গুেল যু� কের েদয়া হয়।

H o
L
H
<meta name="author" content="অসীম কুমা" />
েলখেকর নামেক সাচর ইিন্জে সাবিমট করার জ� <meta name="author"

to
content="……………"/> বয্বহা করা হয়।

Tu
ওেয়ব েপজ অেটা িরে�স করার জ�ও েমটা টয্া বয্বহা করা হয়।
<META HTTP-EQUIV="REFRESH"
CONTENT="15;URL=http://www.tutohost.com">
উপেরর েকাডিট বয্বহা করেল �িত ১৫ েসেকন্ অ�র অ�র http://www.tutohost.com েপজিট
একবার কের িরে�স হেব।
Page: 44 of 54
২৩. ি��
HTML েকান ে�া�ািমং লয্া�ুেয় নয়। তাই ওেয়ব েপেজও ে�া�ািমং এর সুিবধ যু� করার জ� িবিভ� ধরেনর
ি�ি�ং লয্া�ুেয় বয্বহা করা হয়, েযমন জাভাি��, েজ েকােয়রী ইতয্ািদ।জাভাি�, েজ েকােয়রী ইতয্াি
ি�� যু� করার জ� HTML এ <script> </script> টয্া বয্বহা করা হয়।এখান েথেক আমরা HTML
k
এ ি�� যু� করার প�িত স�েকর জানেত পারব।
0 o
HTML েকান ে�া�ািমং লয্া�ুেয় নয়। তাই ওেয়ব েপেজও
ে�া�ািমং এর সুিবধ যু� করার জ� িবিভ� ধরেনর ি�ি�ং
লয্া�ুেয় বয্হার করা হয়, েযমন জাভাি��, েজ েকােয়রী
1. Bo
ইতয্ািদ এর মাধয্ে ওেয়ব েপেজ েলাকাল টাইম �দশর্,
সময় িদন তািরখ �দশর্, �াউজার িচি�ত করা, সময় এবং
ইেভন্ এর উপর িভি� কের বয্বহারকারীে েকান িবেশষ বাতর্
�দশর্ করা সহ িবিভ� ধরেণর আকষর্ণী এবং গু�পূণর কাজ
-
করা স�ব হয়।
E
জাভাি��, েজ েকােয়রী ইতয্াি ি�� যু� করার জ� HTML এ <script> </script> টয্া
বয্বহা করা হয়। েযমন
TM st
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"
src="sliding_effect.js"></script>
H o
L
H
<html>
<head>
to
<script type="text/javascript">
function show_alert()
Tu
{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
ফাইলিট Mozila Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব।
k
0 o
1. Bo
-
E
যিদ Click Me বাটনিটেত ি�ক করা হয় তাহেল একিট এলাটর বে� Welcome to
www.tutohost.com েলখািট েদখা যােব।
TM st
২৪. অিডও সংেযাজন
H o
L
েকান িবষয়েক উপ�াপনার ে�ে�, েট�ট এবং ছিবর পাশাপািশ অিডও-িভিডও বয্বহা করেল িবষয়িট আেরা �াণব�
H
হেয় উেঠ। এখান েথেক আমরা HTML অিডও ফাইল যু� এবং িনয়�ণ করার প�িত স�েকর িব�ািরত জানেত
পারব।
েকান িবষয়েক উপ�াপনার ে�ে�, েট�ট এবং ছিবর পাশাপািশ অিডও-িভিডও বয্বহা করেল িবষয়িট আেরা
to
�াণব� হেয় উেঠ। ওেয়ব িমিডয়ার মাধয্ে এ কাজিট যতটা

ভােলাভােব করা যায় আর অ� েকােনা িমিডয়ায় মাধয্ে
তা স�ব নয়। HTML �ারা ৈতির েপেজ <embed>
Tu
টয্া বয্বহা কের সহেজই অিডও ফাইল যু� করা যায়

এবং িনয়�ণ করা যায়।
Page: 46 of 54
েড�টেপ একটা audio নােম folder িনেত হেব এর মেধয audio.mp3 নােম save করা একটা অিডও
ফাইল রাখেত হেব।
অনুশীল �েজ�
k
<html>
<head>
0 o
</head>
1. Bo
<body >
<p>
<center>
<embed src="audio.mp3" height="35" width="300"
controller="true" loop="false" autostart="false">
-
</embed>
E <h3 style="color:#F00">Click play button and enjoy

music.</h3>
</center>
TM st
</p>
</body>
</html>
H o
L
েড�টেপ ৈতির করা audio folder এর মেধয একটা েনাটপয্া open কের উপেরর code টুক িলেখ
H
file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All
files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্
ছিবর মত েদখােব।
to
�েজ� িবে�ষণ
অিডও যু� করার জ� <embed> টয্া বয্বহা করা হয়।
Tu
<embed src="audio.mp3" height="35" width="300"

controller="true" loop="false" autostart="false">
</embed>
src="audio.mp3" এখােন src="…………." এর মেধয অিডও ফাইেলর িলংক যু� করা হয়।
Page: 47 of 54
height="35" width="300" এর মাধয্ে �াউজাের �দিশর্ অিডও ে�য়ােরর আকৃিত িনধর্ার করা
হয়।
controller="true" এর মাধয্ে ওেয়ব েপেজ অিডও ে�য়ার �দশর্ করা হেব িকনা তার িনেদর্ �দান
k
করা হয়। যিদ controller="……….." এর মেধয true েলখা হয় তাহেল অিডও ে�য়ার �দিশর্ হেব
আর false েলখা হেল অিডও ে�য়ার �দিশর্ হেব না।
0 o
1. Bo
loop="false" এর মাধয্ে audio ফাইলিট িক একবার ে� হেব না লুপ আকাের বারবার ে� হেব তার
িনেদর্ �দান করা হয়। েযেহতু false েলখা আেছ; সুতরা একবার ে� হেব।
autostart="false" এর মাধয্ে audio ফাইলিট অেটাে� অথর্া ওেয়ব েপজ েলাড হওয়ার সােথ
-
সােথই ে� হেব, না অিডও ে�য়ােরর ে� বাটেন ি�ক করার পর ে� হেব তার িনেদর্ �দান করা হয়। েযেহতু
E
false েলখা আেছ; সুতরা অেটাে� হেব না, অিডও ে�য়ােরর ে� বাটেন ি�ক করার পর ে� হেব।
িনেদর্শন:
TM st
যিদ ওেয়ব েপেজ অিডও ে�য়ার �দিশর্ না হয় তাহেল QuickTime Player ই�টল কের িনন অথবা
�াউজােরর িনেদর্শন অনুযায় �েয়াজনীয় �াগ ইনস ই�টল কের িনন।
H o
L
২৫. িভিডও সংেযাজন
H
সংঘিটত বা�ব ঘটনােক পিরপূণ্ভাে

র উপ�াপনার ে�ে� িভিডও সবেচেয় উপেযাগী মাধয্ম।এখা েথেক আমরা
HTML এ িভিডও ফাইল যু� এবং িনয়�ণ করার প�িত স�েকর িব�ািরত
জানেত পারব।
to
সংঘিটত বা�ব ঘটনােক পিরপূণর্ভাে উপ�াপনার ে�ে� িভিডও সবেচেয়

উপেযাগী মাধয্ম ৈদনি�ন সংবাদ �কাশক ওেয়ব সাইটগুেল তােদর
Tu
ৈদনি�ন ঘটনাগুেলাে েট�ট এবং ইেমজ বয্বহাের মাধয্ে �কােশর

পাশাপািশ িভিডও �কােশর মাধয্ে আেরা েবিশ জনি�য়তা অজর্েন
সুেযা পাে�, এবং বয্বহারকারীর এ সকল ঘটনার বা�ব িচ� েদখা,
এবং জানার পাশাপািশ �েয়াজেন সং�হ কের রাখেত পারেছন। বতর্মাে
িভিডও শুধ মানুেষ িবেনাদন এবং বা�ব ঘটনা �কােশর মাধয্ম নয়,
এিট িশ�ার অ�তম বাহেন পিরণত হেয়েছ।
অসংখয িশ�ামূলক ওেয়ব সাইট িবিভ� িবষেয়র উপর �িতিদন নতুন

নতুন েট�ট িভি�ক িটউেটািরয়ােলর পাশাপািশ িভিডও িটউেটািরয়াল �কাশ করেছ। যা মানুষে পৃিথবীর েয
েকান �া� েথেক শুধুমা েশখা এবং জানার সেযাগই সৃি� করেছ না, �� িবিনময় এবং আেলাচনার মু�
Page: 48 of 54
�াটফমর ৈতিরর মাধয্ে পিরপূণর িশ�া িব�ােরও ভুিমকা রাখেছ। HTML�ারা ৈতির েপেজ <embed>
টয্া বয্বহা কের সহেজই িভিডও যু� করা যায় এবং িনয়�ণ করা যায়।
k
0 o
েড�টেপ একটা video নােম folder িনেত হেব এর মেধয video.wmv নােম save করা একটা িভিডও
ফাইল রাখেত হেব।
1. Bo
<html>
<head>
-
E </head>
<body >
<p>
TM st
<center>
<embed src="video.wmv" width="344" height="300"
autostart="false" controller="true" loop="false" >
H o
</embed>
L
<h3 style="color:#F00">Click the play button and enjoy
H
video.</h3>
</center>
</p>
</body>
to
</html>
Tu
েড�টেপ ৈতির করা 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
িভিডও যু� করার জ� <embed> টয্া বয্বহা করা হয়।
<embed src="video.wmv" width="344" height="300"

autostart="false" controller="true">
</embed>
k
0 o
src="video.wmv" এখােন src="…………." এর মেধয িভিডও ফাইেলর িলংক যু� করা হয়।
1. Bo
height="344" width="300" এর মাধয্ে �াউজাের �দিশর্ িভিডও ে�য়ােরর আকৃিত িনধর্ার
করা হয়।
E -
controller="true" এর মাধয্ে ওেয়ব েপেজ িভিডও ে�য়ার �দশর্ করা হেব িকনা তার িনেদর্ �দান
করা হয়। যিদ controller="……….." এর মেধয true েলখা হয় তাহেল িভিডও ে�য়ার �দিশর্
TM st
হেব আর false েলখা হেল িভিডও ে�য়ার �দিশর্ হেব না।
H o
loop="false" এর মাধয্ে িভিডও ফাইলিট িক একবার ে� হেব না লুপ আকাের বারবার ে� হেব তার
L
িনেদর্ �দান করা হয়। েযেহতু false েলখা আেছ; সুতরা একবার ে� হেব।
H
autostart="false" এর মাধয্ে িভিডও ফাইলিট অেটাে� অথর্া ওেয়ব েপজ েলাড হওয়ার সােথ
to
সােথই ে� হেব, না িভিডও ে�য়ােরর ে� বাটেন ি�ক করার পর ে� হেব তার িনেদর্ �দান করা হয়। েযেহতু
false েলখা আেছ; সুতরা অেটাে� হেব না, িভিডও ে�য়ােরর ে� বাটেন ি�ক করার পর ে� হেব।
Tu
যিদ ওেয়ব েপেজ অিডও ে�য়ার �দিশর্ না হয় তাহেল �াউজােরর িনেদর্শন অনুযায় �েয়াজনীয় �াগ ইনস
ই�টল কের িনন।
২৬. �াস সংেযাজন
Page: 50 of 54
�াস এিনেমশন ওেয়ব সাইেটর একিট অ�তম আকষর্ণী উপাদান। আকষর্ণী েনিভেগশন বার, বয্ানা, বাটন
ইতয্ািদে �ােসর এিনেমশন যু� কের েযমন ওেয়ব সাইেটর ইন্টারেফসে আকষর্ণী কের েতালা যায়, পাশাপািশ
সাইটিটও বয্বহা বা�ব হেয় উেঠ। এখান েথেক আমরা HTML এ �ােস ৈতির এিনেমশন অথর্া SWF ফাইল যু�
করার প�িত স�েকর িব�ািরত জানেত পারব।
�াস এিনেমশন ওেয়ব সাইেটর একিট অ�তম আকষর্ণী উপাদান। আকষর্ণী েনিভেগশন বার, বয্ানা,
k
বাটন ইতয্ািদে �ােসর এিনেমশন যু� কের েযমন ওেয়ব সাইেটর ইন্টারেফসে আকষর্ণী কের েতালা
যায়, পাশাপািশ সাইটিটও বয্বহা বা�ব হেয় উেঠ। HTML�ারা
0 o
ৈতির েপেজ <embed> টয্া বয্বহা কের অিডও এবং িভিডও এর
মত সহেজই �ােস ৈতির এিনেমশন অথর্া SWF ফাইল যু� করা
1. Bo
যায় ।
E -
েড�টেপ একটা flash নােম folder িনেত হেব এর মেধয
flash.swf নােম save করা একটা িভিডও ফাইল রাখেত হেব।
TM st
<html>
H o
<head>
L
H
</head>
<body >
<center>
to
<embed src="flash.swf" width="250" height="240">

</embed>
</center>
</body>
Tu
</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
k
0 o
1. Bo
�াস যু� করার জ� <embed> টয্া বয্বহা করা হয়।
<embed src="flash.swf" width="250" height="240">
-
</embed>
E
src="flash.swf" এখােন src="…………." এর মেধয �াস ফাইেলর িলংক যু� করা হয়।
width="250" height="240" এর মাধয্ে �াউজাের �দিশর্ �াস এিনেমশেনর আকৃিত িনধর্ার

TM st
করা হয়।
H o
L
িনেদর্শন: যিদ ওেয়ব েপেজ �াস এিনেমশন �দিশর্ না হয় তাহেল flash player অথবা �াউজােরর
H
িনেদর্শন অনুযায় �েয়াজনীয় �াগ ইনস ই�টল কের িনন।

to
Like Us on FaceBook
FaceBook.com/TutoHost
Tu
All Right Reserved By

TutoHost.com
Page: 52 of 54

HTML Ebook

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Ebook

Uploaded by

Copyright:

Available Formats

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

েলখকঃ অসীম কুমা পাল

েলখকঃ অসীম কমমা পমল

কো যমে�। িবষয়িট একিট িনাব িব�েবা

েটকিটউনস, িটউেটমিায়মলিবিডসহ েবশ

এখন ই-বুক আকাের �কাশ করা হেলা।

আেছন। “এইচিটএমএল বমংলম ই-বুক ১.০”

িনলুামা ইয়মসিমন AmusingOcean.com

• HTML এ িসএসএস এর বযবহার

• HTML এ ি�� এর বয্বহা

E Up টয্ােগ সম�েয় গিঠত হয়। একটা ওেয়ব েপেজর িবিভ� অংশ

HTML বা Hyper Text Mark Up Language ৈতির কেরেছন

উপা� �ত পৃিথবীর িবিভ্ �ােন আদান �দােনর বয্ব� করা। ১৯৯০

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

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

৩. HTML টয্া িক?

েযমন <html> এবং </html> । <body> হল

HTML এর সাধারন টয্া সমূহ

টয্া সমূহ বণর্ন

<i></i> Italic েট�ট িনেদর্ কের।

<pre></pre> pre-formatted েট�ট ৈতিরেত বয্বহ হয়।

<strong></strong> Strong েট�ট িনেদর্ কের।

<p> This is paragraph. </p>

িকছু HTML এি�িবউটস

<h1>….<h6> <p> align="center" align="left"

<body bgcolor=" green">

<h2>This is an example of heading 2</h2>

<h6>This is an example of heading 6</h6>

একটা েনাটপয্া open কের

<body bgcolor=" green">

একটা েনাটপয্া open কের উপেরর code

Microsoft Word এ Bold, Italic, Underline,

strikethrough, Subscript, Superscript ইতয্াি েট�ট

example of Abbreviation. <br />

(<code>Computer code text.</code>) This is an example of Code.

</address>This is an example of Address <br />

E এছাড়া face="Tahoma" �কাশ করেছ েলখািটর

<body bgcolor=" green">

Style, HTML এর একিট নতুন এি�িবউটস, এর মাধয্ে

HTML এর মেধয্ CSS বয্বহাের সুেযা সৃি� হয়।

উদাহরণ ে�া�াম: অ�া� এি�িবউটস বয্বহা কের

উদাহরণ ে�া�াম: �াইল বয্বহা কের

<font style="font-family:Verdana; font-size:15px" >

<font style=" font-size:25px; font-family:Tahoma; color:red;" >

একটা েনাটপয্া open কের

<a href="http://www. tutohost.com/"> www. tutohost.com

একটা েনাটপয্া open কের উপেরর code

টুক িলেখ file েমন েথেক Save as এ ি�ক

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

<h3> This is an example of image.</h3>

এর �ােন েলখেত হেব। েযমন

১৩. েটিবল সংেযাজন

িদেন িদেন ইন্টারেন আজ সবেচেয় বড় তথয ভান্ডাে পিরণত হেয়েছ। তথয

একটা েনাটপয্া open কের উপেরর code টুক িলেখ

১৪. এইচিটএমএল িল�

একিট ওেয়বেপেজ িল� বা তািলকােক সু�রভেব �কাশ করার জ� েয এইচিটএমএল

একটা েনাটপয্া open কের উপেরর code টুক িলেখ

file েমন েথেক Save as এ ি�ক কের File

একটা েনাটপয্া open কের উপেরর code টুক িলেখ

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

name="name"><br /><br />

আপিন েয শহের থােকন:

</select><br /><br />