এইচটিএমএল (HTML) এর
অর্থ হচ্ছে Hyper Text Markup Language.এটা কোন
প্রোগ্রামিং ল্যাংগুয়েজ নয়,মার্কআপ ল্যাংগুয়েজ। ওয়েব ডেভেলপার হতে হলে
এই ল্যাংগুয়েজ টি সবার আগে ভালভাবে শিখতে হবে।তবে এটা শেখা খুব সহজ।
এটা শিখলেই আপনি একটা ওয়েব পেজ তৈরী করতে পারবেন।এরপর যদি সিএসএস শেখেন
তাহলে ঐ পেজটিতে আরেকটু প্রান দিতে পারবেন।
তারপর জাভাস্ক্রিপ্টের পালা,
জাভাস্ক্রিপ্ট শিখে এর এপ্লিকেশন করলে আপনার ঐ ওয়েব পেজটি
ডাইনামিক হওয়া শূরু হল।সবশেষে
পিএইচপি+ ডেটাবেস শিখলে আপনি পূর্নাঙ্গ ডেটাবেস Driven ওয়েবসাইট তৈরী করতে পারবেন।
যে জিনিস লাগবে এইচটিএমএল শিখতে (অর্থ্যাৎ এইচটিএমএল কোড কোথায় লিখবেন)
যে জিনিস লাগবে এইচটিএমএল শিখতে (অর্থ্যাৎ এইচটিএমএল কোড কোথায় লিখবেন)
নোটপ্যাড-
Notepad
open করে তৈরী হোন।যেহেতু নতুন তাই নোটপ্যাড দিয়েই শুরু
করুন পরে অন্য কোন এডভান্সড এডিটরে সুইচ করবেন যেমন NetBeans,Notepad++,Brackets বা Dreamweaver.
এইচটিএমএল শিখতে যে শব্দগুলি ভালভাবে জানা দরকার-
v এইচটিএমএল
এলিমেন্ট (Elements) / এইচটিএমএল অ্যাট্রিবিউট
(Attribute)
v এইচটিএমএল
ট্যাগ (Tag)
এলিমেন্টস(Elements):
এলিমেন্টস হল HTML এর মুল কেন্দ্রবিন্দু।তারা HTML page এর প্রতেকটি টেক্সটের অংশকে বর্ননা করে। এলিমেন্টস গুলো ট্যাগ(tag) এর মাধ্যমে তৈরী। HTML এলিমেন্টগুলি অনেক স্তরে বিদ্যমান।সবকিছু যা আপনার চোখের সামনে Web page এ বিদ্যমান তা হতে পারে Paragraph text, কোন ব্যনার,নেভিগেশন লিংক ইত্যাদি সব কিছুই elements এই পেজটির।
এলিমেন্টস হল HTML এর মুল কেন্দ্রবিন্দু।তারা HTML page এর প্রতেকটি টেক্সটের অংশকে বর্ননা করে। এলিমেন্টস গুলো ট্যাগ(tag) এর মাধ্যমে তৈরী। HTML এলিমেন্টগুলি অনেক স্তরে বিদ্যমান।সবকিছু যা আপনার চোখের সামনে Web page এ বিদ্যমান তা হতে পারে Paragraph text, কোন ব্যনার,নেভিগেশন লিংক ইত্যাদি সব কিছুই elements এই পেজটির।
একটি এলিমেন্ট(Element) মুল তিনটি অংশ নিয়ে গঠিত। শুরু করার ট্যাগ(opening
tag) ,এলিমেন্ট এর ধারনকৃত অংশ এবং শেষে বন্ধ করার ট্যাগ(closing
tag) ।
<p> - opening paragraph tag
Element Content - paragraph words
</p> - closing tag
প্রত্যেক Web page এর অতিব প্রয়োজনীয় চারটি এলিমেন্ট(Element) থাকে
এগুলো হলো্: HTML,head, title এবং body elements । এগুলো বিষয়ে নিচে
আলোচনা করা হয়েছে।
<html>
Element...</html>
সবার প্রথমে HTML লেখার
শুরুতে HTML শব্দের প্রথমে এবং শেষে less
than ও greater than ( < >) চিহ্ন দিতে হয়।
যেমন:
<html> । কোন
কিছু লেখার পর শেষে </html> closing ট্যাগটি
দিতে হবে।
অর্থাৎ <html>
Welcome to Bangladesh </html>। Welcome to Bangladesh এই
লেখাটি Web
page এ প্রদশিত হবে।আমরা খুব সহজে Notepad
এ লিখে Web page তৈরী করতে পারি। এজন্য আমদের Notepad
Open করতে হবে।
প্রথমে start মেনু All Programs > Accessories
>Notepad
তারপর Notepad হবার পর নিম্নের কোডটি লিখবো
<html>
<head>
<title> My First Website </title>
</head>
<body>
Welcome
to Bangladesh
</body>
</html>
এভাবে লেখার পর Notepad এর ফাইল মেনু হতে save এ ক্লিক করব তারপর index.html
নামে save করব।
সেভ করা ফাইলটিকে Double click করে open করবো । দেখবো যে লেখাটি Browser
এ open হয়েছে। খুব সহজে একটা web
Page তৈরী হয়ে গেলো।
<head>
element
একটি ডকুমেন্ট head, ডকুমেন্ট সস্বন্ধে মৌলিক
ধারনা দেয়।
<head>
elements যা পেজের header নির্দেশ করে। head elements এর মধ্যে রাখা ট্যাগ সরাসরি ব্রাউজারে প্রদর্শিত হয় না। আমরা টাইটেল এলিমেন্ট
এর মাধ্যমে প্রকাশ করতে পারি।
<title>
element
<head>
এলিমেন্ট এর মাঝে <title> এলিমেন্ট
রাখতে হয়।
যেই শব্দগুলো title
elements এর opening (<title>)এবং
closing(</title>) tag এর মধ্যে লেখা হয় তা browser
এর টাইটেল বা শিরোনাম হিসাবে প্রদর্শিত হয়।
<html>
<head>
<title> My WebPage!</title>
</head>
</html>
<body>
element
body
element যা web page এর প্রদর্শিত সকল
বিষয় গুলো ধারন করে।
যে সব বিষয় গুলো আমরা web page এ দেখাতে চাই
তা body element ট্যাগ এর মধ্যে রাখতে হয়।
<html>
<head>
<title>My
WebPage!</title>
</head>
<body>
Hello
World! All my content goes here!
</body>
</html>
এই কোডগুলি নোটপ্যাডে কপি পেস্ট করে .html
extension দিয়ে সেভ করে যেকোন ব্রাউজারে খুলুন এবং নিজের তৈরী
প্রথম ওয়েব পেজ দেখুন।
যখন আপনি এইচটিএমএল ডকুমেন্ট উপর হতে নিচ , ডান হতে বামে সব সময় আপনি ট্যাগ দেখতে পাবেন। এটি এমন ভাবে প্রদর্শিত হবে যেন paragraph দেখতে paragraph এর মতো, টেবিল দেখতে টেবিল এর মতো।
যখন আপনি এইচটিএমএল ডকুমেন্ট উপর হতে নিচ , ডান হতে বামে সব সময় আপনি ট্যাগ দেখতে পাবেন। এটি এমন ভাবে প্রদর্শিত হবে যেন paragraph দেখতে paragraph এর মতো, টেবিল দেখতে টেবিল এর মতো।
ট্যাগ এর প্রধান তিনটি অংশ আছে
v শুরু
করার ট্যাগ(opening tag)
v ধারনকৃত
অংশ(contents)
v শেষ
করার ট্যাগ (closing tag)।
এইচটিএমএল ট্যাগ এর মাধ্যমে আপনি web
page এ আপনার পছন্দ মত বার্তা পাঠাতে পারেন।
<p>A
Paragraph Tag</p>
ট্যাগ এর বর্ণ ছোট হাতের অক্ষর হওয়া উচিত। নিচে আরো কতক গুলো
ট্যাগ দেখানো হলো।
<body>
Body Tag (acts as a content shell)
<p>Paragraph
Tag</p>
<h2>Heading
Tag</h2>
<b>Bold
Tag</b>
<i>Italic
Tag</i>
</body>
Closing
ট্যাগ ছাড়া
ট্যাগ:
কিছু কিছু ট্যাগ আছে যাদের closing
tag দেয়ার প্রয়োজন নেই। তারা কোন এলিমেন্ট ধারন
করে না।সে
ট্যাগ টি হচ্ছে line break tag এবং তা
<br/> রুপে প্রকাশ করা হয়। যা বিশেষ ভাবে ব্যবহার
করা হয়।
অর্থাৎ একটি লাইন লেখা বাদ দিয়ে অপর লাইন হতে লেখা শুরু করার জন্য এ ট্যাগ টি
ব্যবহার করা হয়।
আরো কিছু ট্যাগ আছে যাদেরকে বিশেষভাবে ব্যবহার করা হয়
যেমন ইমেজ ট্যাগ, ইনপুট ট্যাগ।
<img
src="images/mypic.jpg" width=”150” height=”150” /> -- Image Tag
<br
/> -- Line Break Tag
<hr/>
-- Horizontal Line
<link
rel=”stylesheet” type=”text/css” href=”css/style.css” /> -- CSS External
Link
এইচটিএমএল ডকুমেন্ট DOC
type (HTML document - DOC type)
<!DOCTYPE html>
<html>
<head>
<!--- JS/CSS
file is to be added here -->
</head>
<body>
<h1>This is
my Headline 1</h1>
<p>demo
content goes here. </p>
</body>
</html>
প্রথম লাইনটি
<!DOCTYPE html> হচ্ছে ডকুমেন্টটি কি ধরনের তা বোঝানোর
(ব্রাউজারকে) জন্য দেয়া হয়। এইচটিএমএল এর কোন ভার্সন ব্যবহার করবেন সেটার উপর
ভিত্তি করেই এই ডিক্লেয়ারেশন টি দেয়া হয়। যেমন উপরের ডকুমেন্ট টি এইচটিএমএল ৫ এর
একটি ডকুমেন্ট । এরুপ যদি এটা XHTML এর ১.০ ভার্সন হতো তাহলে
ডিক্লেয়ারেশনটি দিতে হতো এভাবে
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
এটা হচ্ছে ট্রানজিশনাল অর্থ্যাৎ এইচটিএমএল এর সকল কিছু এই্
ডকুমেন্টে লেখা যাবে সাথে সাথে deprecated এলিমেন্টগুলিও ব্যবহার করা যাবে যেমন font। ফ্রেমসেট
ব্যবহার করা যাবেনা।
যাইহোক এভাবে "xhtml1-transitional.dtd"
এর জায়গায় "xhtml1-strict.dtd" দিলে
deprecated এলিমেন্টগুলি ব্যবহার করা যাবেনা।** এখন HTML5 আসার পর এগুলি আর সাধারনত ব্যবহার করেনা। HTML
5 এর ডিক্লেয়ারেশন দেয়া হয়।
<!DOCTYPE html>
যাইহোক এটা খুব গুরত্বপূর্ন কিছু নয়। কপি করে (X)HTML ডকুমেন্ট লেখার শুরুতে পেস্ট করে
দিলেই চলবে। তবে দিতে হবে কেননা না দিলে কিছু কিছূ ব্রাউজারে ঠিকমত আউটপুট আসেনা যেমন
ইন্টারন্টে এক্সপ্লোরার (IE)।
বর্তমানে
XHTML এই বেশি ব্যবহৃত হচ্ছে তাই এই সাইটেও HTML এর
মুরব্বি XHTML এরই টিউটোলিয়াল দেয়া হচ্ছে, যদিও উচ্চারন করছি HTML আসলে সব এইচটিএমএল এর
টিউটোলিয়ালগুলিতে আমরা XHTML এরই নিয়ম অনুসরন করেছি। আর একটা
দরকারী কথা, HTML এর সর্বশেষ ভার্সন HTML 5 আসার পর এখনতো এটাই বেশি ব্যবহার করা হচ্ছে বিশ্বের ওয়েবজুড়ে।
0 comments:
Post a Comment