এট্রিবিউট কি এবং কিভাবে ব্যবহৃত হয়

HTML এট্রিবিউটস্

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 এট্রিবিউটস্   

ট্যাগ	এট্রিবিউটস্
<font>	size="5" face="Tahoma" color="red"
<h1>….<h6> <p>	align="center" align="left" align="right" title="Bangladesh"
<body>	bgcolor="green" background="../images/ele.png"
<div>	id="book" class="pen" align="center"
<img> <table>	height="100px" width="50px"  border="5px"
<input />	type="text" name="TextField"

উদাহরণ প্রোগ্রাম

<html>
<head>
<title> http://techlivebd.blogspot.com/</title>
</head>
<body bgcolor=" green">
<font size="5" face="Tahoma" color="red">
This is a paragraph.
</font>
</body>
</html>

একটা  নোটপ্যাড  open  করে  উপরের code  টুকু  লিখে  file  মেনু  থেকে  Save as এ ক্লিক করে File name:  index.html  ,   Save as type : All files,  দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে পাশে প্রদর্শিত ছবির মত দেখাবে।

Read More

HTML ট্যাগ কি?

যা জানবো...

এইচটিএমএল এর সাধারন ট্যাগ সমূহ এবং এগুলোর কাজের সাধারন বিবরণ সম্পর্কে জানা খুবই গুরুত্বপূর্ণ। আমরা সহজেই এখান থেকে এইচটিএমএল এর সাধারন ট্যাগ সমূহ এবং এগুলোর কাজের সাধারন বিবরণ জেনে নিতে পারব।

লেখক সম্পর্কে

লেখকঃ অসীম কুমার
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।

HTML ট্যাগ কি?

Tag

HTML এ প্রোগ্রাম লেখার জন্য  <>  এবং </> দুইটা চিহ্ন এবং এর মধ্যে কিছু Word যেমন html, head, title, body  ইত্যাদি  Keyword  ব্যবহার করা হয়। <> বা </> চিহ্ন এবং এর মাঝে লেখা একটি Keyword কে একত্রে ট্যাগ বলা হয়। যেমন <html>  এবং </html> । <body> হল body শুরু ট্যাগ এবং </ body> হল body শেষ ট্যাগ।

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

ট্যাগ সমূহ	বর্ণনা
<html> </html>	HTML ডকুমেন্ট নির্দেশ করে।
<head></head>	প্রোগ্রামের head  অংশ নির্দেশ করে ।
<title></title>	ডকুমেন্ট টাইটেল নির্দেশ করে।
<body></body>	প্রোগ্রামের মূল content অংশ নির্দেশ করে।
<a></a>	Anchor ট্যাগ।
<abbr></abbr>	Abbreviation ট্যাগ।
<b></b>	Bold টেক্সট নির্দেশ করে।
<i></i>	Italic টেক্সট নির্দেশ করে।
<big></big>	স্বাভাবিকের চেয়ে বড় টেক্সট নির্দেশ করে।
<small></small>	স্বাভাবিকের চেয়ে ছোট টেক্সট নির্দেশ করে।
<blockquote> </blockquote>	বিশেষ উদ্ধৃতি প্রকাশ করতে ব্যবহৃত হয়।
<br / >	একটা লাইন ব্রেক তৈরি করে ।
<code></code>	কম্পিউটার কোড টেক্সট প্রকাশ করে।
<table></table>	টেবিল তৈরিতে ব্যবহৃত হয়।
<col></col>	টেবিলের কলাম তৈরিতে ব্যবহৃত হয়।
<td></td>	টেবিলের সেল তৈরিতে ব্যবহৃত হয়।
<tr></tr>	টেবিলের সারি তৈরিতে ব্যবহৃত হয়।
<form></form>	ফরম তৈরিতে ব্যবহৃত হয়।
<h1></h1>	হেডার ট্যাগ 1-6 পর্যন্ত হয়।
<hr/>	সমান্তরাল রেখা তৈরি করে।
<img/>	ছবি যুক্ত করতে ব্যবহৃত হয়।
<input></input>	ফরমের ইনপুট ফিল্ড তৈরিতে ব্যবহৃত হয়।
<li></li>	লিষ্ট তৈরিতে ব্যবহৃত হয়।
<meta></meta>	Meta ট্যাগ
<ol></ol>	অর্ডার লিষ্ট তৈরিতে ব্যবহৃত হয়।
<ul></ul>	আনঅর্ডার লিষ্ট তৈরিতে ব্যবহৃত হয়।
<p></p>	প্যারাগ্রাফ নির্দেশ করে
<pre></pre>	pre-formatted টেক্সট তৈরিতে ব্যবহৃত হয়।
<tt></tt>	টেলিটাইপ টেক্সট নির্দেশ করে।
<strong></strong>	Strong টেক্সট নির্দেশ করে।
<sub></sub>	subscripted text নির্দেশ করে।
<sup></sup>	superscripted text নির্দেশ করে।

Read More

প্রোগ্রাম লেখার পদ্ধতি

প্রোগ্রাম লেখার পদ্ধতি

যে কোন প্রোগ্রাম লেখার জন্যই কোন একটা এডিটর ব্যবহার করে কোডিং করতে হয়। HTML এ প্রোগ্রাম লেখার জন্য প্রাথমিকভাবে এডিটর হিসেবে উইন্ডোজ অপারেটিং সিস্টেমের ডিফল্ট এডিটর notepad ব্যবহার করা যেতে পারে এবং বাড়তি সুবিধা পাবার জন্য এডভান্স এডিটর হিসেবে Dreamweaver এবং Notepad++ ব্যবহার করা ভাল। HTML এ লেখা প্রোগ্রাম .html এক্সটেনশন যেমন index.html দ্বারা Save করে যেকোন ব্রাউজার যেমন Internet explorer, Mozilla Firefox , Google chrome এবং Opera দ্বারা দেখা যাবে।

HTML এ লেখা প্রোগ্রামের মৌলিক অংশ সমূহ

<html>
<head>
<title> http://techlivebd.blogspot.com/</title>
</head>
<body>
Hallo Friends How Are You, I am Rasel Ahmed Eshan
This is my first web page. I am learning now HTML.
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

HTML এ লেখা প্রোগ্রামের বিভিন্ন অংশ বিশ্লেষণ

প্রোগ্রামের মধ্যে <> এবং < /> দুইটা চিহ্ন এবং এর মধ্যে কিছু 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 হিসেবে http://techlivebd.blogspot.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. লেখা হয়েছে যা ব্রাউজারের মূল অংশে প্রদর্শিত হচ্ছে।

Read More

HTML এর ইতিহাস

HTML বা Hyper Text Mark Up Language তৈরি করেছেন টিম বার্নাস-লী। HTML তৈরির উদ্দেশ্য ছিল বৈজ্ঞানিক গবেষণার তথ্য উপাত্ত দ্রুত পৃথিবীর বিভ্ন্নি স্থানে আদান প্রদানের ব্যবস্থা করা। ১৯৯০ সালের দিকে NCSA কর্তৃক ডেভলপকৃত মোজাইক ব্রাউজারের মাধ্যমে HTML পরিচিতি লাভ করে। ১৯৯৭ এর জানুয়ারীতে WC3 কর্তৃক প্রথম ডেভলপকৃত HTML3.2 প্রকাশিত হয়। একই বছরে শেষে ডিসেম্বরে WC3 HTML এর নতুন সংস্করণ HTML4.2 প্রকাশ করে। ২০১০ সালে বর্তমানে প্রচলিত HTML এর সর্বশেষ ভার্সন HTML5 জনসম্মূখে পরিচিতি লাভ করে।

Read More

HTML কি?

HTML একটা কম্পিউটার ল্যাঙ্গুয়েজ, যা পৃথিবীর বিশাল তথ্য-ভান্ডারকে ইন্টারনেটের মাধ্যমে প্রদর্শনের সুযোগ তৈরি করে দিয়েছে। একটা ওয়েব পেজের মূল গঠন তৈরি হয় HTML দিয়ে। HTML কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়, একে Hyper Text Mark Up Language বলা হয়। Mark Up Language এক সেট Mark Up ট্যাগের সমন্বয়ে গঠিত হয়। একটা ওয়েব পেজের বিভিন্ন অংশ ব্রাউজারের মাধ্যমে কিভাবে প্রদর্শিত হবে, তা HTML এ Mark Up ট্যাগ সমূহ ব্যবহার করে প্রকাশ করা হয় । 

Read More

ওয়েব ডিজাইন টিউটোরিয়াল [পর্ব-০৪] :: এইচটিএমএল, প্যারাগ্রাফ এবং ইমেজ

আজ ওয়েব ডিজাইন ধারাবাহিক টিউটোরিয়াল এর চতুর্থ পর্ব শুরু করতে যাচ্ছি । গত পর্বে আমরা এইচটিএমএল এর ট্যাগ, লাইন ব্রেক-আপ, হেডিং নিয়ে আলোচনা করেছিলাম । আজ আমরা এইচটিএমএল প্যারাগ্রাফ, লিস্ট এবং ইমেজ নিয়ে আলোচনা করবো । ওয়েব পেইজ ডিজাইন করার জন্য এইচটিএমএল প্যারাগ্রাফ, লিস্ট এবং ইমেজ খুবই গুরুত্বপূর্ণ । আমরা প্রথমে এইচটিএমএল প্যারাগ্রাফ নিয়ে আলোচনা করবো । এরপর এইচটিএমএল লিস্ট নিয়ে আলোচনা করবো এবং এইচটিএমএল ইমেজ নিয়ে আলোচনা করবো । যাইহোক, কথা না বাড়িয়ে এখন আমরা আমদের মূল আলোচনা শুরু করবো ।

এইচটিএমএল প্যারাগ্রাফ

এইচটিএমএল এ কোন টেক্সট লেখার জন্য সাধারণত প্যারাগ্রাফ ট্যাগ ব্যবহার করা হয় । প্যারাগ্রাফ ট্যাগ ব্যবহার করে আমরা টেক্সটকে কয়েকটি ভাগে বিভক্ত করে ফেলতে পারি । আপনাদের কাছে বিষয়টি পরিষ্কার করার জন্য এখন একটি উদাহরণ দিচ্ছি । প্রথমে নিচের কোডটুকু একটি টেক্সট এডিটর যেমন নোটপ্যাড প্লাস প্লাস এ লিখে index.html নামে সেভ করুন;

1 2 3 4 5 6 7 8 9 10

<!DOCTYPE HTML> <html> <head>  <title> HTML Paragraph </title> </head> <body>  <p> Bangladesh is our Country. It is a very beautiful Country. </p>  <p> It is a small country. But it has a Large Population. </p> </body> </html>

এবার কোডটুকু একটি ব্রাউজারে প্রদর্শন করার দেখতে পারবেন যে আমরা যে টেক্সট ব্যবহার করেছি তা দুইটি অনুচ্ছেদে বিভক্ত হয়ে গেছে । অর্থাৎ index.html ফাইলটি একটু ব্রাউজারে প্রদর্শন করালে নিচের চিত্রের মত দেখতে পাবেন;

আমরা দুইটি প্যারাগ্রাফ ট্যাগ ব্যবহার করেছি । প্রথম প্যারাগ্রাফ ট্যাগ শুরু হয়েছে সাত নম্বর লাইন এ । এরপর দ্বিতীয় প্যারাগ্রাফ ট্যাগ শুরু হয়েছে আট নম্বর লাইনে ।

এইচটিএমএল লিস্ট

এইচটিএমএল লিস্ট ব্যবহার করে আপনি কোন কিছুর তালিকা প্রকাশ করতে পারেন । আমরা ওয়েবসাইটের মেনু তৈরি করার সময় সাধারণত এইচটিএমএল লিস্ট ব্যবহার করে থাকি । এছাড়া, আমরা কোন কিছু পয়েন্ট আকারে লিখতে চাইলে এইচটিএমএল লিস্ট ব্যবহার করি । এইচটিএমএল  এ সাধারণত দুই ধরনের লিস্ট রয়েছে । এ দুইটি লিস্ট হচ্ছে;

১। Order List (অর্ডার লিস্ট)

২ । Unorder List (আন অর্ডার লিস্ট)

Order List (অর্ডার লিস্ট): আমরা কোন তালিকা যখন ক্রমিক সংখ্যা অনুযায়ী লিখে থাকি তখন আমরা এইচটিএমএল অর্ডার লিস্ট ব্যবহার করতে পারি । এখন একটা উদাহরণ দিলে ব্যাপারটি আপনাদের কাছে সম্পূর্ণ পরিষ্কার হয়ে যাবে । এজন্য নিচের কোডটুকু লিখে index.html নামে সেভ করুন;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<!DOCTYPE HTML> <html> <head>  <title> HTML Order List </title> </head> <body>  <ol>  <li> HTML </li>  <li> CSS </li>  <li> JavaScript </li>  <li> PHP </li>  <li> WordPress </li>  </ol> </body> </html>

এবার index.html ফাইলটি ব্রাউজারে প্রদর্শন করান তাহলে আপনি নিচের চিত্রের মত দেখতে পারবেন;

কোড বিশ্লেষণঃ আমরা সাত নম্বর লাইনে ol ব্যবহার করেছি । ol মানে হচ্ছে Order List এবং প্রতিটি লিস্ট এর জন্য ol এর ভিতরে li ব্যবহার করা হয় ।

Un order List (আন অর্ডার লিস্ট): আমরা কোন তালিকা যখন ক্রমিক সংখ্যা অনুযায়ী না লিখে লিস্ট প্রকাশ করে থাকি তখন আমরা এইচটিএমএল আন অর্ডার লিস্ট ব্যবহার করতে পারি । এখন একটা উদাহরণ দিলে ব্যাপারটি আপনাদের কাছে সম্পূর্ণ পরিষ্কার হয়ে যাবে । এজন্য নিচের কোডটুকু লিখে index.html নামে সেভ করুন;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<!DOCTYPE HTML> <html> <head>  <title> HTML Un Order List </title> </head> <body>  <ul>  <li> HTML </li>  <li> CSS </li>  <li> JavaScript </li>  <li> PHP </li>  <li> WordPress </li>  </ul> </body> </html>

এবার index.html ফাইলটি ব্রাউজারে প্রদর্শন করান তাহলে আপনি নিচের চিত্রের মত দেখতে পারবেন;

কোড বিশ্লেষণঃ আমরা সাত নম্বর লাইনে ul ব্যবহার করেছি । ul মানে হচ্ছে Un Order List এবং প্রতিটি লিস্ট এর জন্য ul এর ভিতরে li ব্যবহার করা হয় ।

এইচটিএমএল ইমেজ

ওয়েবসাইটের জন্য ইমেজ ব্যবহার করা খুবই গুরুত্বপূর্ণ । একটি ওয়েবসাইটের লোগো থেকে শুরু করে বিভিন্ন অংশে ইমেজ ব্যবহার করা হয় । এইচটিএমএল ইমেজ ব্যবহার করার জন্য <img src="" /> ট্যাগ ব্যবহার করা হয় । src="এখানে এক্সটেনশন সহ ইমেজের নাম লিখতে হবে" । আপনাদের বুঝার সুবিধার্থে আমি আপনাদের কাছে এখন একটি উদাহরণ দিবো ।

এজন্য নিচের কোডটুকু লিখে index.html নামে সেভ করুন;

1 2 3 4 5 6 7 8

<!DOCTYPE HTML> <head>  <title> HTML Images </title> </head> <body>  <img src="images.jpg" /> </body> </html>

এবার index.html ফাইলটি ব্রাউজারে প্রদর্শন করান তাহলে আপনি নিচের চিত্রের মত দেখতে পারবেন;

একটা বিষয় খেয়াল রাখবেন, আপনার ইমেজ এবং এইচটিএমএল ফাইল যদি একসাথে থাকে তাহলে এই পদ্ধতিতে কাজ করবে । যদি, আপনার index.html ফাইলটি ডেক্সটপ এ এবং ইমেজ ফাইল একটি images ফোল্ডার এর ভিতরে থাকে তাহলে আপনাকে <img src="images/images-name.png" /> এভাবে লিখতে হবে ।

সেলফ ওয়ার্ক

আমি আজ এইচটিএমএল প্যারাগ্রাফ, লিস্ট এবং ইমেজ নিয়ে আলোচনা করেছি । আজকের আলোচনার উপর ভিত্তি করে এখন আমি আপনাদের কিছু প্রশ্ন দিচ্ছি, আপনারা টেকটিউনস কমেন্ট এ এসব প্রশ্নের উত্তর দিবেন ।

১ । এইচটিএমএল প্যারাগ্রাফ ট্যাগ ব্যবহার করা হয় কেন?

২ । লিস্ট কয় ধরনের?

৩। অর্ডার লিস্ট এ ol কেন লেখা হয়?

৪। আন অর্ডার লিস্ট এ ul কেন লেখা হয়?

৫ । কেউ যদি <img src="logo" /> এভাবে লিখে তাহলে কি ইমেজ প্রদর্শিত হবে?

আজকের আলোচনার বিষয়বস্তু মনোযোগ সহকারে পড়ুন আর প্র্যাকটিস করুন তাহলে আজকের প্রশ্নের উত্তর সহজেই দিতে পারবেন - ইনশাল্লাহ্‌ ।

আজকের টিউটোরিয়ালটি এখানেই শেষ করছি । বুঝতে কোন অসুবিধা হলে কমেন্ট এর মাধ্যমে জানাবেন । আগামী পর্বে থাকছে; এইচটিএমএল লিংক এবং টেবিল ।

Read More