শিখুন এইচটিএমএল
শিখুন এইচটিএমএল লেবেলটি সহ পোস্টগুলি দেখানো হচ্ছে৷ সকল পোস্ট দেখান
শিখুন এইচটিএমএল লেবেলটি সহ পোস্টগুলি দেখানো হচ্ছে৷ সকল পোস্ট দেখান

এইচটিএমএলঃ পর্ব- ৭ঃ paragraph ট্যাগ এবং এর অ্যাট্রিবিউট

৭:৩০ PM 0 Comment
এইচটিএমএলঃ পর্ব- ৭ঃ paragraph ট্যাগ এবং এর অ্যাট্রিবিউট
৭ম অধ্যায়
paragraph ট্যাগ এবং এর অ্যাট্রিবিউট

একে প্যারাগ্রাফ ট্যাগ বলে, একে দিয়ে কোন ওয়েবপেজে প্যারাগ্রাফ লেখা যায়।

<p>
Bangladesh, east of India on the Bay of Bengal, is South Asian country of lush greenery and many waterways. Its Padma (Ganges), Meghna and Jamuna rivers create fertile alluvial plains, and travel by boat is common. On the southern coast, the Sundarbans, an enormous mangrove forest shared with India, are home to the Royal Bengal tiger.
</p>

এই ট্যাগের মাঝে প্যারাগ্রাফ টেক্সট থাকে।
নিচে একটি নমুনা এইচটিএমএল কোড, এটা লিখলে বাংলাদেশ সম্পর্কে প্যারাগ্রাফ দেখা যাবে দেখা যাবে।

<body>
<p>
Bangladesh, east of India on the Bay of Bengal, is South Asian country of lush greenery and many waterways. Its Padma (Ganges), Meghna and Jamuna rivers create fertile alluvial plains, and travel by boat is common. On the southern coast, the Sundarbans, an enormous mangrove forest shared with India, are home to the Royal Bengal tiger.
</p>
</body>






এই ট্যাগগুলোর একটি অ্যাট্রিবিউট আছে। যেমন,
অ্যাট্রিবিউট
কাজ
মান
align
প্যারাগ্রাফের এলাইনমেন্ট বা কোন পাশে অবস্থান করবে তা নির্ধারণ করবে।
Justify, left, right, center




একটা নমুনা পেজ, ট্রাই করে দেখতে সোর্স কোড,



<body bgcolor="green" text="yellow">
<h1>
Bangladesh
</h1>
<p align="left">
Bangladesh, east of India on the Bay of Bengal, is South Asian country of lush greenery and many waterways.
Its Padma (Ganges), Meghna and Jamuna rivers create fertile alluvial plains, and travel by boat is common.
On the southern coast, the Sundarbans, an enormous mangrove forest shared with India, are home to the Royal Bengal tiger.
Collected from wikipedia.
</p>
</body>
বিভাগঃ
আরও পড়ুন

এইচটিএমএলঃ পর্ব- ৬ঃ h1, h2, h3, h4, h5 ট্যাগ এবং এর অ্যাট্রিবিউট

৭:৩০ PM 0 Comment
এইচটিএমএলঃ পর্ব- ৬ঃ h1, h2, h3, h4, h5 ট্যাগ এবং এর অ্যাট্রিবিউট
৬ষ্ঠ অধ্যায়

h1, h2, h3, h4, h5 ট্যাগ এবং এর অ্যাট্রিবিউট


এদেরকে হেডার ট্যাগ বলা হয়।

<h1> HTML h1 Tag is for Largest Header </h1>
<h4> HTML h4 tag is the smallest Header </h4>

এই ট্যাগের মাঝে এইচটিএমএল এর হেডার টেক্সট থাকে। মানে আমরা কোন ওয়েবপেজের কোন লেখা আকর্ষণীয় করে বা বড় করে প্রদর্শন করতে এই ট্যাগ গুলো ব্যাবহার করতে পারি।
এরকম ৫টি ট্যাগ আছে।
নিচে একটি নমুনা এইচটিএমএল কোড, এটা লিখলে কেবল ৪টি হেডার দেখা যাবে।

<body>
<h1>Header 1 </h1>
<h2>Header 2 </h2>
<h3>Header 3 </h3>
<h4>Header 4 </h4>
<h5>Header 5 </h5>
</body>

  

এই ট্যাগগুলোর একটি অ্যাট্রিবিউট আছে। যেমন,
অ্যাট্রিবিউট
কাজ
মান
align
হেডারের এলাইনমেন্ট বা কোন পাশে অবস্থান করবে তা নির্ধারণ করবে।
Justify, left, right, center




একটা নমুনা পেজ, ট্রাই করে দেখতে সোর্স কোড,






<body bgcolor="green" text="yellow"> 
<h1 align="justify">Header 1 </h1>
<h2 align="left">Header 2 </h2>
<h3 align="center">Header 3 </h3>
<h4 align="right">Header 4 </h4>
<h5 align="center">Header 5 </h5>
</body>
বিভাগঃ
আরও পড়ুন

এইচটিএমএলঃ পর্ব- ৫ঃ body ট্যাগ এবং এর অ্যাট্রিবিউট

৭:২৮ PM 0 Comment
এইচটিএমএলঃ পর্ব- ৫ঃ body ট্যাগ এবং এর অ্যাট্রিবিউট

৫ম অধ্যায়

<body> ট্যাগ এবং এর অ্যাট্রিবিউট





একে বডি ট্যাগ বলা হয়।

<body> HTML Display Contents Here </body>

এই ট্যাগের মাঝে এইচটিএমএল এর ডিস্প্লে কন্টেন্ট থাকে। মানে আমরা কোন ওয়েবপেজের যে অংশ দেখি সেটা এই ট্যাগের মাঝেই থাকে।

যেমন একটি নমুনা এইচটিএমএল ফাইল, এটা লিখলে কেবল HTML Means Hypertext markup language.Tim Barners Lee Developed The Language লেখাটুকু দেখা যাবে। 


<body background="http://www.techonthenet.com/images/logo.png">

<p>HTML Means Hypertext markup language.Tim Barners Lee Developed The Language<p>

</body>





এই ট্যাগের বেশ কিছু অ্যাট্রিবিউট আছে। যেমন,

অ্যাট্রিবিউট
কাজ
মান
bgcolor
ওয়েবপেজের ব্যাকগ্রাউন্ড কালার নির্ধারণ করে
রঙের নাম বা হেক্সাডেসিম্যাল নাম্বার। যেমন, orange
background
ওয়েবপেজের ব্যাকগ্রাউন্ডে কোন ছবি সংযোজন
ছবির লিঙ্ক বা URL যেমন, http://google.com/image.png
link
ওয়েবপেজের লিঙ্ক গুলোর রঙ নির্ধারণ করে
রঙের নাম বা হেক্সাডেসিম্যাল নাম্বার। যেমন, red
vlink
ভিজিট করা হয়ে গেছে, এমন লিঙ্কের রঙ নির্ধারণ করে
রঙের নাম বা হেক্সাডেসিম্যাল নাম্বার। যেমন, black
text
ওয়েবপেজের সব লেখার রঙ নির্ধারণ করে
রঙের নাম বা হেক্সাডেসিম্যাল নাম্বার। যেমন, blue


একটা নমুনা পেজ, ট্রাই করে দেখতে সোর্স কোড,




<body text='white' bgcolor='green'>

<!-- paragraph here -->
<p>
<b>HTML</b> Means Hypertext markup language.Tim Barners Lee Developed The Language
<p>


</body>



এর আরো অনেক অ্যাট্রিবিউট আছে, যা নতুনদের তেমন দরকার নেই। তবুও কেউ চাইলে এখানে থেকে নিতে পারো।  
বিভাগঃ
আরও পড়ুন

এইচটিএমএলঃ পর্ব- ৪ঃ কমেন্ট ট্যাগ

৭:২৭ PM 0 Comment
এইচটিএমএলঃ পর্ব- ৪ঃ কমেন্ট ট্যাগ <!- Comment ->
চতুর্থ অধ্যায়
&lt;!...&gt; ট্যাগ এবং এর অ্যাট্রিবিউট



একে কমেন্ট ট্যাগ বলা হয়।

&lt;!...&gt; হল কোড লেখকের মন্তব্য ও স্বাক্ষরের জায়গা।




যেমন একটি নমুনা এইচটিএমএল ফাইল,এটা লিখলে কেবল HTML Means Hypertext markup language.Tim Barners Lee Developed The Language লেখাটুকু দেখা যাবে। বাকিটা উহ্য থাকবে।



&lt;p&gt;HTML Means Hypertext markup language.Tim Barners Lee Developed The Language&lt;p&gt;








এই ট্যাগ সোর্স কোডে কমেন্ট লিখতে ব্যবহার হয়। তুমি যদি অনেক কোড লিখো, তবে গেঞ্জাম মনে হবে। তাই এটা দিয়ে মাঝে মাঝে লিখে দিতে পারো কোন কোড কি কাজে ব্যাবহার হচ্ছে।

কমেন্ট ট্যাগের কোনও অ্যাট্রিবিউট নেই।


       
বিভাগঃ
আরও পড়ুন

এইচটিএমএলঃ পর্ব- ৩ঃ এইচটিএমএল- এর ট্যাগ ও অ্যাট্রিবিউট গুলো

৭:২৬ PM 0 Comment
এইচটিএমএলঃ পর্ব- ৩ঃ এইচটিএমএল- এর ট্যাগ ও অ্যাট্রিবিউট গুলো
তৃতীয় অধ্যায়
এইচটিএমএল ট্যাগ ও অ্যাট্রিবিউট


&lt;/&gt;


আমার মতে যে কোডগুলো এইচটিএমএলের বিভিন্ন কন্টেন্টকে একটি কাঙ্ক্ষিত রুপ প্রদান করে তাই ট্যাগ।একে বৈশিষ্ট্য ধারণকারীও বলা যায়।

আর,ট্যাগগুলোর আচরণ ও ধরন কিরুপ হবে,সেটা নির্ধারণ করে অ্যাট্রিবিউট।

প্রতিটি ট্যাগের জন্য আলাদা আলাদা অ্যাট্রিবিউট আছে।

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

আগে বিভিন্ন ট্যাগ ও অ্যাট্রিবিউট আয়ত্তে আনার পর তুমি সিএসএসে শান দিতে পারবে।

এখন নমুনা দেখাই,

&lt;b&gt;&lt;/b&gt;

এখানে, &lt;&gt; হল একটা ট্যাগের শুরু। এবং &lt;/&gt; হল শেষ। এইচটিএমএল ভাষায় স্টার্ট ট্যাগ এবং এন্ড ট্যাগ।

আবার,
&lt;b color="red"&gt;&lt;/b&gt;

এখানে কালার (color) হল অ্যাট্রিবিউট এবং কালার অ্যাট্রিবিউটের মান হল red.
এর মান হবে কোনও রঙের নাম বা হেক্সাডেসিম্যাল কোড নম্বর দিয়ে। এই হেক্সাডেসিম্যাল কালার কোড এখানে পাবে সকল রঙের জন্য।

এবার অনেকগুলো ট্যাগ আর অ্যাট্রিবিউট সহ ট্যাগ দেই, দেখো চেস্টা করে।

&lt;font color="red"&gt;Bangladesh&lt;/font&gt;
&lt;font color="green"&gt;Bangladesh&lt;/font&gt;
&lt;font color="yellow"&gt;Bangladesh&lt;/font&gt;
&lt;b&gt;Bangladesh&lt;/b&gt;

একটি ওয়েবসাইটের ডিজাইন কিরুপ হবে তা ঠিক করে সিএসএস। CSS হল Cascading Style Sheets। নামেই বোঝা যাচ্ছে এটা স্টাইল বিষয়ক

কিছু করে। সিএসএস নিয়ে পরে আলোচনা করা যাবে। এখন ট্যাগ গুলো আলোচনা করি।

এখন আমরা বিভিন্ন ট্যাগ ব্যাখ্যা করবো।


 



বিভাগঃ
আরও পড়ুন

আসুন বাংলায় শিখি এইচটিএমএলঃ পর্ব- ২ঃ কিভাবে লিখবো এইচটিএমএল?

৬:২৫ PM 0 Comment
আসুন বাংলায় শিখি এইচটিএমএলঃ পর্ব- ২ঃ কিভাবে লিখবো এইচটিএমএল?
দ্বিতীয় অধ্যায়
কিভাবে লিখবো এইচটিএমএল?

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

                   যেমন, 

CoffeeCup HTML Editor,
Google Web Designerইত্যাদি।
          







আগের অধ্যায়ে বলেছি যে তুমি নোটপ্যাড ব্যবহার করতে পারো। কিভাবে করবে তার জন্য আগের অধ্যায় দেখ।
তবে লেখার জন্য ভালো হল কফিকাপ। কারন এটির IDE সোজা। গুগল ওয়েব ডিজাইনার যারা ব্যাবহার করে তাদের আগে থেকেই এর অনেক সেটিং ও ফাংশন জানা থাকতে হয়।

তাহলে তোমার এইচটিএমএল এডিটর চালু করে তৈরি হয়ে যাও। এখনি একটি কোড লিখো,
<! It’s My First HTML Page >
<html>
<head>
<title>Mypage</title>
</head>
<body>
How are You?
</body>
</html>

এখন উপরের কোড ব্যাখ্যা করব,
<! It’s My First HTML Page >
কমেন্ট সেকশন
এখানে কমেন্ট লিখতে হয়, এটা মেইন পেজে দেখা যায় না।

<html>
এইচটিএমএল ট্যাগ
এই ট্যাগ সম্পূর্ণ কোড ধারন করে এবং এই ট্যাগ ছাড়া এইচটিএমএল অচল।
<html> এবং <body> ট্যাগের মাঝে পেজের আইকন, টাইটেল ধারন করে।

<head>…</head>
হেড সেকশন
টাইটেল,আইকন ইত্যাদি মৌলিক তথ্য ধারন করে।

<title>Mypage</title>
টাইটেল ট্যাগ
টাইটেল নির্ধারণ করে।

<body>
বডি সেকশন
এই ট্যাগ মূল পেজ ধারন করে যেটা ব্রাউজারের মধ্যে প্রদর্শিত হয়।

How are You?
বডি সেকশনের এলিমেনট
এলিমেনট, যেটা বর্তমানে এই পেজের একমাত্র এলিমেনট

</body>
Body এন্ড ট্যাগ
আগের <body> ট্যাগের এন্ড ট্যাগ
</html>
Html এন্ড ট্যাগ
আগের <html> ট্যাগের এন্ড ট্যাগ
এখানেই পেজ শেষ।




আচ্ছা,
ট্যাগ কি?
আমার মতে যে কোডগুলো এইচটিএমএলের বিভিন্ন কন্টেন্টকে একটি কাঙ্ক্ষিত রুপ প্রদান করে তাই ট্যাগ।একে বৈশিষ্ট্য ধারণকারীও বলা যায়।
আর,ট্যাগগুলোর আচরণ ও ধরন কিরুপ হবে,সেটা নির্ধারণ করে অ্যাট্রিবিউট।
প্রতিটি ট্যাগের জন্য আলাদা আলাদা অ্যাট্রিবিউট আছে।
এইচটিএমএল এবং ওয়েব ডিজাইন শেখা তেমন কঠিন কিছু না। তোমার খালি প্রয়োজন একটি কম্পিউটার, ইন্টারনেট সংযোগ সহ।
          আগে বিভিন্ন ট্যাগ ও অ্যাট্রিবিউট আয়ত্তে আনার পর তুমি সিএসএসে শান দিতে পারবে, তারপর  জেএস এবং অন্যান্য কিছু ।
          একটি ওয়েবসাইটের ডিজাইন কিরুপ হবে তা ঠিক করে সিএসএস। CSS হল Cascading Style Sheets। নামেই বোঝা যাচ্ছে 
এটা স্টাইল বিষয়ক কিছু করে। সিএসএস নিয়ে পরে আলোচনা করা যাবে। আপাতত আমরা ট্যাগ নিয়াএ আলোচনা করবো।
আজ এই পর্যন্তই, আল্লাহ হাফেজ।


বিভাগঃ
আরও পড়ুন

আসুন বাংলায় শিখি এইচটিএমএলঃ পর্ব- ১ঃ শুরু করবো এইচটিএমএল ও ব্রাউজারের এর জন্ম কথা দিয়ে

৭:০১ PM 0 Comment
আসুন বাংলায় শিখি এইচটিএমএলঃ পর্ব- ১ঃ শুরু করবো এইচটিএমএল ও ব্রাউজারের এর জন্ম কথা দিয়ে
প্রথম অধ্যায়
শুরু করবো এইচটিএমএল ও ব্রাউজারের এর জন্ম কথা দিয়ে,

সম্পূর্ণ নতুনদের কোর্স, আমার লেখা ভালো লাগলে ব্লগ দেখে আসবেন।

১৯৮০ সালে HTTP এর উদ্ভাবকএবং ইউরোপের সারন (CERN) এর গবেষক টিম বারনারস লী এই ভাষার প্রাথমিক রুপ দেন এবং এর উন্নতি দিন দিন বাড়তে থাকে। তিনিই এই  ল্যাংগুয়েজের প্রোটোটাইপ তৈরি করেন।
টিম বারনারস লী



প্রথমে কেবল একটি ডকুমেন্ট পেজ থেকে অপর একটি ডকুমেন্ট পেজ এ স্থানান্তর করা ছাড়া আর কিছু করা হত না। 
কিন্তু ইন্টারনেটের জনপ্রিয়তা বাড়ার সাথে সাথে এইচটিএমএল এরও জনপ্রিয়তা বাড়তে থাকে এবং উন্নতি ঘটতে থাকে।

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

এই ওয়েবপেজ ওয়েব ব্রাউজার অথবা অন্যান্য HTML সমর্থিত সফটওয়্যার দিয়ে ওপেন করা যায়। 
ব
র্তমানের জনপ্রিয় ওয়েব ব্রাউজার হল গুগল ক্রোম, মজিলা ফায়ারফক্স ,ইন্টারনেট এক্সপ্লোরার ,সাফারি ,অপেরা ইত্যাদি।

একটা কথা, এটি কিন্তু প্রোগ্রামিং ল্যাঙ্গুয়েজ বলা যায় না।এটি একটি মার্কআপ ল্যাঙ্গুয়েজ। 

 এটি কোনও মেশিন কোড তৈরি করতে পারবেনা।


ওয়েবপেজ তৈরিঃ এইচটিএমএল লিখব কীসে?

                                                                                 
CoffeeCup HTML Editor,

Google Web Designer

পাশের সফটওয়্যার গুলো ছাড়া তুমি নোটপ্যাড ব্যবহার করতে পারো।
নোটপ্যাড দিয়ে শুধু তুমি টাইপ “All Files” এবং Encoding “utf-8” করে দাও।
আর নামের শেষে .html যোগ করো।
মজার ব্যাপার হল, এইচটিএমএল এমন একটি ল্যাঙ্গুয়েজ যেটা দিয়ে তুমি নিজেই নতুন কিছু বানিয়ে ফেলতে পারো।এই ল্যাঙ্গুয়েজ সি++ ,জাভা ,জাভা অ্যাপলেট, জাভা স্ক্রিপ্ট এবং আর অনেক কিছু সমর্থন করে।
ওয়েবপেজ বা এইচটিএমএল ডকুমেন্ট স্থির হতে পারে, কিন্তু নানা রকম ট্যাগ, অ্যাট্রিবিউট ও স্ক্রিপ্ট দিয়ে একে প্রাণবন্ত করে তোলা যায়।
ট্যাগ ও অ্যাট্রিবিউট গুলোর মাধ্যমে,
·         সাধারণ টেক্সট লিখতে পারব।
·         টেক্সট ও পেজে রঙ যোগ করতে পারব।
·         বাটন তৈরি করতে পারব।
·         টেবিল তৈরি করতে পারব।
·         চার্ট তৈরি করতে পারব।
·         স্থির ও সচল ( .GIF) ছবি সংযোজন করতে পারব।
·         সাউন্ড ট্র্যাক ও ভিডিও সংযোজন করতে পারব।
·         হাইপারলিঙ্ক করতে পারব।
·         স্ক্রিপ্ট লাগাতে পারব।



ওয়েব পেজ প্রদর্শনঃ
ওয়েবপেজ প্রদর্শন করা হয় ওয়েব ব্রাউজার দিয়ে। ওয়েব ব্রাউজার হল একটি বিশেষ ধরনের প্রোগ্রাম সফটওয়্যার যা সার্ভার এক্সেস,ওয়েবপেজ প্রদর্শন, হার্ডড্রাইভ এক্সেস ও ডাটা ট্রান্সফার করতে পারে।


 ব্রাউজারের ইতিহাসঃ
প্রথম ইউনিক্স ওএস ভিত্তিক গ্রাফিক্স ব্রাউজার তৈরি হয় ১৯৯২ সালে। তারপর ১৯৯৩ সালে আমেরিকার NCSA (National Center for Super Computer Applications) এর মার্ক এন্দ্রিসন ও এরিক বিনা “মোজাইক” ব্রাউজার তৈরি করেন।এই ১৯৯৩ সালেই “মোজাইকের” ম্যাকিনটস ও উইন্ডোজ এর উপযোগী সংস্করণ প্রকাশিত হয়।

মোজাইক ব্রাউজার                            
নেটস্কেপ কমিউনিকেসন

১৯৯৪ সালের প্রথম দিকে মার্ক এন্দ্রিসন ও আর অনেকে NCSA ছেড়ে দিয়ে নেটস্কেপ কমিউনিকেশন প্রতিষ্ঠা করেন এবং “নেটস্কেপ নেভিগেটর” ব্রাউজার তৈরি করে বাজারজাত করেন।
এর পরের বছর, ১৯৯৫ সালে মাইক্রোসফট কোম্পানি “ইন্টারনেট এক্সপ্লোরার” তৈরি করে বাজারজাত করে ব্রাউজার জগতে স্থান করে নেয়।



বর্তমানে সর্বাধিক জনপ্রিয় ব্রাউজার হল “গুগল ক্রোম”। এছাড়া অন্যান্য জনপ্রিয় ব্রাউজার গুলো হল,
·   অপেরা।
·         মোজিলা ফায়ারফক্স।
·         সাফারি।
·         ইয়ানডেক্স।
·         ইন্টারনেট এক্সপ্লোরার।

                         
প্রত্যেকটি ওয়েব ব্রাউজারে থকে একটি বিশেষ ইন্টারপ্রেটার বা কোড ডিকোডার যা ওয়েবপেজের বিভিন্ন কোড,এঙ্কর,ইম্বেড ও অন্যান্য কন্টেন্ট অনুবাদ করে সরল একটি ওয়েবপেজ হিসাবে প্রদর্শন করে।
 আজ এই পর্যন্তই। আল্লাহ হাফেয। আমার ব্লগ।
বিভাগঃ
আরও পড়ুন
এতে সদস্যতা: পোস্টগুলি (Atom)

মোট পাতাদর্শিত