এইচটিএমএল HTML5 এর বিভিন্ন ট্যাগ ও এট্রিবিউট এর ব্যবহার পর্ব ০১ – বাংলা টিটোরিয়াল

এইচটিএমএল (HTML) এর বিভিন্ন ট্যাগ ও এট্রিবিউট এর ব্যবহার পর্ব ০১ – বাংলা টিটোরিয়াল

HTML এর বিভিন্ন ট্যাগ ও এট্রিবিউট এর ব্যবহার

  • এইচটিএমএল (HTML) এর অর্থ হচ্ছে Hyper Text Markup Language.এটা কোন প্রোগ্রামিংল্যাংগুয়েজ নয়, মার্কআপ ল্যাংগুয়েজ।
  • ওয়েব ডেভেলপার হতে হলে এই ল্যাংগুয়েজ টি সবার আগে ভালভাবে শিখতে হবে। তবে এটা শেখা খুব সহজ।
  • এটা শিখলেই আপনি একটা ওয়েব পেজ তৈরী করতে পারবেন। এরপর যদি সিএসএস শেখেন তাহলে ঐ পেজটিতে আরেকটু প্রান দিতে পারবেন
  • তারপর জাভাস্ক্রিপ্টের পালা,  জাভাস্ক্রিপ্ট শিখে এর এপ্লিকেশন করলে আপনার ঐ ওয়েবপেজটি ডাইনামিক হওয়া শূরু হল। সবশেষে পিএইচপি+ ডেটাবেস শিখলে আপনি পূর্নাঙ্গ ডেটাবেস Driven ওয়েবসাইট  তৈরী করতে পারবেন।

যে জিনিস লাগবে এইচটিএমএল শিখতে (অর্থ্যাৎ এইচটিএমএল কোড কোথায় লিখবেন)

নোটপ্যাড। Notepad open করে তৈরী হোন। যেহেতু নতুন তাই নোটপ্যাড দিয়েই শুরু করুন পরে অন্য কোন এডভান্সডএডিটরে সুইচ করবেন যেমন Netbeans বা Dreamweaver.আর যদি ড্রিমওয়েভার এ কাজের অভিজ্ঞতা থাকে তাহলে তাহলে এখনই শুরু করতে পারেন।

এইচটিএমএল শিখতে যে শব্দগুলি ভালভাবে জানা দরকার-

  • এইচটিএমএল এলিমেন্ট (Elements)
  • এইচটিএমএল ট্যাগ (Tag)
  • এইচটিএমএল অ্যাট্রিবিউট (Attribute)

HTML5 এইচটিএমএল

এলিমেন্টস(Elements): এলিমেন্টস হল HTML এর মুল কেন্দ্রবিন্দু। তারা HTML page এর প্রতেকটি টেক্সটের অংশকে বর্ননা করে। এলিমেন্টস গুলো ট্যাগ(tag) এর মাধ্যমে তৈরী। HTML এলিমেন্টগুলি অনেক স্তরে বিদ্যমান। সবকিছু যা আপনার চোখের সামনে Web page এ বিদ্যমান তা হতে পারে Paragraph text,  কোন ব্যনার, নেভিগেশন লিংক ইত্যাদি সব কিছুই elements এই পেজটির।

একটি এলিমেন্ট(Element) মুল তিনটি অংশ নিয়ে গঠিত। শুরু করার ট্যাগ(opening tag), এলিমেন্ট এর ধারনকৃত অংশ এবং শেষে বন্ধ করার ট্যাগ(closing tag)।

  1. <p> – opening paragraph tag
  2. Element Content – paragraph words
  3. </p> – closing tag

প্রত্যেক Web page এর অতিব প্রয়োজনীয় চারটি এলিমেন্ট(Element) থাকে এগুলো হলো্: HTML, head, title এবংbody elements। এগুলো বিষয়ে নিচে আলোচনা করা হয়েছে।

<html> Element…</html>

সবার প্রথমে HTML লেখার শুরুতে HTML শব্দের প্রথমে এবং শেষে less than  ও  greater than (< >) চিহ্ন দিতে হয়। যেমন: <html>। কোন কিছু লেখার পর শেষে </html> ট্যাগটি দিতে হবে। অর্থাৎ <html> Welcome to Bangladesh </html>। Welcome to Bangladesh এই লেখাটি Web page এ প্রদশিত হবে। আমরা খুব সহজেNotepad এ লিখে Web page তৈরী করতে পারি। এজন্য আমদের Notepad Open করতে হবে। প্রথমে

start মেনু All Programs > Accessories >Notepad

তারপর Notepad হবার পর নিম্নের কোডটি লিখবো

view source

print?

1.<html>

2.Welcome to Bangladesh

3.</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 এর টাইটেল বা শিরোনাম হিসাবে প্রদর্শিত হয়।

view source

print?

1.<html>

2.<head>

3.<title> My WebPage!</title>

4.</head>

5.</html>

<body> element

body element যা web page এর প্রদর্শিত সকল বিষয় গুলো ধারন করে। যে সব বিষয় গুলো আমরা web page এ দেখাতে চাই তা body element ট্যাগ এর মধ্যে রাখতে হয়।

view source

print?

1.<html>

2.<head>

3.<title>My WebPage!</title>

4.</head>

5.<body>

6.Hello World! All my content goes here!

7.</body>

8.</html>

এই কোডগুলি নোটপ্যাডে কপি পেস্ট করে.html extension দিয়ে সেভ করে যেকোন ব্রাউজারে খুলুন এবং নিজের তৈরী প্রথম ওয়েব পেজ দেখুন।

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

ট্যাগ এর প্রধান তিনটি অংশ আছে

ক. শুরু করার ট্যাগ(opening tag)

খ.ধারনকৃত অংশ(contents)

গ.শেষ করার ট্যাগ (closing tag)।

এইচটিএমএল ট্যাগ এর মাধ্যমে আপনি web page এ আপনার পছন্দ মত বার্তা পাঠাতে পারেন।

view source

print?

1.<p>A Paragraph Tag</p>

ট্যাগ এর বর্ণ ছোট হাতের অক্ষর হওয়া উচিত। নিচে আরো কতক গুলো ট্যাগ দেখানো হলো।

view source

print?

1.<body> Body Tag (acts as a content shell)

2.<p>Paragraph Tag</p>

3.<h2>Heading Tag</h2>

4.<b>Bold Tag</b>

5.<i>Italic Tag</i>

6.</body>

Closing ট্যাগ ছাড়া ট্যাগ:

কিছু কিছু ট্যাগ আছে যাদের closing tag দেয়ার প্রয়োজন নেই। তারা কোন এলিমেন্ট ধারন করে না। সে ট্যাগ টি হচ্ছে line break tag এবং তা <br/> রুপে প্রকাশ করা হয়। যা বিশেষ ভাবে ব্যবহার করা হয়। অর্থাৎ একটি লাইন লেখা বাদ দিয়ে অপর লাইন হতে লেখা শুরু করার জন্য এ ট্যাগ টি ব্যবহার করা হয়।

আরো কিছু ট্যাগ আছে যাদেরকে বিশেষভাবে ব্যবহার করা হয় যেমন ইমেজ ট্যাগ,  ইনপুট ট্যাগ।

view source

print?

1.<img src=”/./mypic.jpg” /> — Image Tag

2.<br /> — Line Break Tag

3.<input type=”text” size=”12″ /> — Input Field

প্রদর্শন:

–Line Break–

ট্যাগ কে সম্প্রসারন করার জন্য এট্রিবিউট ব্যবহার করা হয়। ধরুন যদি আমরা একটি টেবিল তৈরী করি তবেattributes ব্যবহার করে টেবিল এর প্রস্থ,  উচ্চতা ঠিক করতে পারি। আর attributes value দিয়ে টেবিল এর প্রস্থ ওউচ্চতার মান দিতে পারি।

view source

print?

1.<tag attributes =”value” attributes =”value”>

view source

print?

1.<table width=”150″ height=”100″>

Class বা  id attribute এর ব্যবহার প্রায় একই তবে কিছুটা ভিন্নতা আছে। Class বা  id attribute সরাসরি ইলিমেন্ট ফরমেটে কোন ভুমিকা নেই তবে পর্দার অন্তরালে এদের ভুমিকা আছে বিশেষ করে জাভাস্ক্রিপ্ট, সিএসএস (এগুলো সম্পর্কে পরবতি টিউটোরিয়াল এ আলোচনা করা হয়েছে।

view source

print?

1.<p>Paragraph type 1 Italics</p>

2.<p>Paragraph type 2 Bold</p>

প্রদর্শন

Paragraph type 1 Italics

Paragraph type 2 Bold

এইচটিএমএল নেম এট্রিবিউট (HTML Name Attribute)

Name attribute টি Class বা  id attribute হতে ভিন্ন। Name attribute টি প্রায়ই র্ফম বা অন্যান্য ইনপুট ইলিমেন্টের সাথে দেখা যায়।

view source

print?

1.<input type=”text” name=”TextField” />

প্রদর্শন:

এই attribute টি TextField প্রদর্শনের বিষয়ে ভুমিকা নেই তবে পর্দার অন্তরালে এর অনেক বেশি অবদান(javascript, css)

এইচটিএমএল টাইটেল এট্রিবিউট (HTML- Title attributes) 

এই attribute টি কোন এইচটিএমএল এলিমেন্ট এর শিরোনাম এবং ছোট popup টেক্স যুক্ত করে এমন ভাবে যুক্ত করে যখন ওয়েব পেজে ঐ শিরোনামের উপর মাউস রাখা হয় তখন ছোট popup টেক্সটি প্রদর্শন করে।

<h2 title=”Hello There!”>Titled Heading Tag</h2>

প্রদর্শন

Titled Heading Tag

এইচটিএমএল এলাইন এট্রিবিউট (HTML- align attributes) 

যদি আপনি এলিমেন্টের সমান্তরাল অবস্থান পরিবর্তন করতে চান তবে তা align attribute দিয়ে করতে পারেন। align বিভিন্ন ভবে করা যায় যেমন left, right & center। ডিফল্ট হিসাবে left align টি নির্বাচিত থাকে।

view source

print?

1.<h2 align=”center”>Centered Heading</h2>

Centered Heading

view source

print?

1.<h2 align=”left”>Left aligned heading</h2>

2.<h2 align=”center”>Centered Heading</h2>

3.<h2 align=”right”>Right aligned heading</h2>

Left aligned heading

Centered heading

Right aligned heading

Generic attributes:

Attribute দিয়ে ওয়েবপেজ কে সম্পুর্নভাবে কাস্টমাইজ করা যায়। নিচে টেবিলে কিছু এইট্রবিউট দেয়া হল যা অনেকHTML Tag এর সাথে সহজে ব্যবহার করা যায়।

Attribute

Options

Function

align

right, left, center

সমান্তাল (Horizontally) aligns tags

valign

top, middle, bottom

উলম্ব(Vertically) aligns tags

bgcolor

numeric, hexadecimal, RGB values

Element এর  background color নিদের্শ করে।

background

URL

Background image উপর element নিদের্শ করে।

id

ব্যবহারকারীর নির্দেশ অনুযায়ী

Element  এর Name যা Cascading Style Sheets (css) সাথে ব্যবহার করা হয়।

class

ব্যবহারকারীর নির্দেশ অনুযায়ী

Element  এর শ্রেনীবিন্যাস  যা Cascading Style Sheets (css) সাথে ব্যবহার করা হয়।

width

Numeric Value

Tables, images, or table cells এর width নির্দেশ  করে।

height

Numeric Value

Tables, images, or table cells এর height  নির্দেশ  করে।

title

ব্যবহারকারীর নির্দেশ অনুযায়ী

আপনার elements এর “Pop-up” title।

এইচটিএমএল প্যারাগ্রাফ টিউটোরিয়াল (HTML Paragraph Tutorial in Bangla)

কোন লেখা কাজকে প্রকাশ করার ক্ষেত্রে প্যারাগ্রাফ ট্যাগ ব্যবহার করা হয়। এটি খুবই সাধারন এবং মৌলিক।

<p> ট্যাগ দারা  অনুচ্ছেদ (প্যারাগ্রাফ) নিদের্শ করা হয়। এই ট্যাগ ব্যবহার করার ফলে প্যারাগ্রাফ টেক্সের উপরে নিচে অটোমেটিক ফাকা লাইন সৃষ্টি হয়।

view source

print?

1.<p>Avoid losing floppy disks with important school…</p>

2.<p>For instance, let’s say you had a HUGE school…</p>

প্রদর্শন:

Avoid losing floppy disks with important school/work projects on them. Use the web

to keep your content so you can access it from anywhere in the world. It’s also a quick

way to write reminders or notes to yourself. With simple html skills, (the ones you have gained so far)it is easy.

For instance, let’s say you had a HUGE school or work project to complete. Off hand,

the easiest way to transfer the documents from your house could be a 3.5″ floppy disk.

However, there is an alternative. Place your documents, photos, essays, or videos onto

your web server and access them from anywhere in the world.

এইচটিএমএল প্যারাগ্রাফ-জাস্টিফিকেশন (HTML paragraph –justification)

ওয়ার্ড ডকুমেন্টে এ আমরা যেভাবে কোন লেখাকে justify করে সবদিকে সমান করতাম তেমনি ভাবে এইচটিএমএল এjustify ব্যবহার করে একই কাজ করতে পারি।

view source

print?

1.<p align=”justify”>For instance, let’s say you had a HUGE school or work…</p>

প্রদর্শন:

For instance, let’s say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5″ floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.

এইচটিএমএল প্যারাগ্রাফ-মাঝামাঝি (HTML paragraph –centering)

ওয়ার্ড ডকুমেন্টে এর মত প্যারাগ্রাফ এর প্রতেকটি লাইন display window এর মধ্যে অবস্থান করবে।

view source

print?

1.<p align=”center”>For instance, let’s say you had a HUGE school or work…</p>

প্রদর্শন:

For instance, let’s say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5″ floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.

এইচটিএমএল প্যারাগ্রাফ-এলাইন ডানে (HTML paragraph –align right)

ওয়ার্ড ডকুমেন্টে এর মত প্যারাগ্রাফ এর প্রতেকটি লাইন display window এর ডানপাশে  অবস্থান করবে।

view source

print? বাকি টুকু দেখুন.

Level 0

আমি আইটি ব্লগ। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 6 বছর 4 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 24 টি টিউন ও 4 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 5 ফলোয়ার আছে এবং আমি টেকটিউনসে 10 টিউনারকে ফলো করি।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস