HTML শিখুন খুব সহজে(ফুল টিউটোরিয়াল) পর্বঃ৩
HTML প্যারাগ্রাফ
যে কোন ডকুমেন্ট এক বা একাধিক প্যারাগ্রাফের মাধ্যমে লেখা হয়। HTML এ প্যারাগ্রাফ তৈরির জন্য <p> বা প্যরাগ্রাফ ট্যাগ ব্যবহার করা হয়। যেমন <p>This is a paragraph.</p>। ব্রাউজারের মাধ্যমে প্রতিটা প্যারাগ্রাফ প্রদর্শন করা হলে প্রতিটা প্যারাগ্রাফের পর একটা করে লাইন ব্রেক তৈরি হয়। যদি কখনো প্যারাগ্রাফের মধ্যেই লাইন ব্রেকের প্রয়োজন হয় তাহলে লাইনের শেষে <br /> ট্যাগ ব্যবহার করা হয়।
উদাহরণ প্রোগ্রাম
<html>
<head>
<title>www.google.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>
<head>
<title>www.google.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>
একটি নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করুন, আপনি web browser-এ preview দেখতে পাবেন ।
টেক্সট ফরমেটিং
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> ইত্যাদি ট্যাগ সমূহ ব্যবহার করা হয়।
উদাহরণ প্রোগ্রাম
<html>
<head>
<title>www.google.com</title>
</head>
<body bgcolor="green">
<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 /> <address>
(Written by Anonymous<br />
Address: www.examplesite.com<br />
E-mail: anonymous@mail.com)</address>This is an example of Address <br />
</p>
</body>
</html>
<head>
<title>www.google.com</title>
</head>
<body bgcolor="green">
<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 /> <address>
(Written by Anonymous<br />
Address: www.examplesite.com<br />
E-mail: anonymous@mail.com)</address>This is an example of Address <br />
</p>
</body>
</html>
একটি নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করুন, আপনি web browser-এ preview দেখতে পাবেন ।
ফন্ট ট্যাগ এর ব্যবহার
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" দ্বারা প্রকাশ করছে লেখাটির রং হবে লাল।
উদাহরণ প্রোগ্রাম
<html>
<head>
<title>www.google.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>
<head>
<title>www.google.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>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে পাশে প্রদর্শিত ছবির মত দেখাবে।
স্টাইলের ব্যবহার
Style, HTML এর একটি নতুন এট্রিবিউটস, এর মাধ্যমে HTML এর মধ্যেই CSS ব্যবহারের সুযোগ সৃষ্টি হয়। Style তথা CSS ব্যবহারের মাধ্যমে ওয়েব পেজের বিভিন্ন উপাদানের ডিজাইন তৈরি করা হয়। অন্যান্য এট্রিবিউটস যেমন align="center", align="left", bgcolor="green", height="100px", width="50px, bgcolor="green" ইত্যাদির মাধ্যমে যদিও ডিজাইন তৈরি করা যায়, তবে এক্ষেত্রে Style ব্যবহারে বিশেষ সুবিধা পাওয়া যায়।
উদাহরণ প্রোগ্রাম: অন্যান্য এট্রিবিউটস্ ব্যবহার করে
<html>
<head>
<title>www.google.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>
<head>
<title>www.google.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>
উদাহরণ প্রোগ্রাম: স্টাইল ব্যবহার করে
<html>
<head>
<title>www.google.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>
<head>
<title>www.google.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 করুন।
![[Grameenphone] গ্রামীন সিমে সামান্য ট্রিকের মাধ্যমে অল্প টাকায় নিয়ে নিন বেশি এমবি। সব গ্রামীনফোন ইউজারই নিতে পারবেন](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_ugSoqEa-iebyXIoxL4x1xfJot7-fqH_WgRpoGxmOk6b9ZyysTRK6mRpxklJ1Kc5_Hj1gOiNkXWFQp39m_EBkNRullXbzhCiM-CHDLpckqdPqmiop4741yGU5HdmJ7qYTR_EdgjMw=w72-h72-p-k-no-nu)
No comments