HTML মাষ্টার ক্লাস ০২!!

 


এইচটিএমএল কম্পিউটার কোডের উপাদান (HTML Computer Code Elements)

HTML Computer Code Elements

AbuJubair Mahin

Computer Code

var person = {
     firstName:"John",
     lastName:"Doe",
     age:50,
     eyeColor:"blue"
}

এইচটি এম এল কম্পিউটার কোডের উপাদান (HTML Computer Code Elements)

সাধারণত, এইচটিএমএল পরিবর্তনশীল letter size, এবং পরিবর্তনশীল letter spacing ব্যবহার করে।

কম্পিউটার কোড এর উদাহরণ প্রদর্শনের সময় এটি ঘটা আশানুরূপ নয় ।

সকল <kbd>, <samp>, and <code> উপাদানগুলো স্থায়ী letter size এবং spacing সাপোর্ট করে ।

 

HTML Keyboard Formatting

এইচটিএমএল <kbd> উপাদান কীবোর্ড ইনপুট কে সংজ্ঞায়িত করে:

উদাহরনঃ

<p>To open a file, select:</p>

<p><kbd>File | Open...</kbd></p>

 

ফলাফলঃ

To open a file, select:

File | Open...

 

HTML Sample Formatting

এইচটিএমএল <samp> উপাদান কম্পিউটার আউটপুট কে সংজ্ঞায়িত করে:

উদাহরনঃ

<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>

 

ফলাফলঃ

demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189

 

HTML Code Formatting

এইচটিএমএল <code> উপাদান প্রোগ্রামিং কোড কে সংজ্ঞায়িত করে:

উদাহরনঃ

<code>
var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
</code>

 

ফলাফলঃ

var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

 

<code> উপাদান অতিরিক্ত হোয়াইটস্পেস এবং লাইন ব্রেক সংরক্ষণ করে না:

উদাহরনঃ

<p>Coding Example:</p>

<code>
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
}
</code>

 

 

ফলাফলঃ

Coding Example:


var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
}

 

এই সমস্যা সমাধানের জন্য, কোডগুলোকে <pre> এলিমেন্টে এর ভিতরে রাখতে হবে:

উদাহরনঃ

<p>Coding Example:</p>

<code>
<pre>
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
}
</pre>
</code>

 

ফলাফলঃ

Coding Example:

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
}

 

HTML Variable Formatting

এইচটিএমএল <var> উপাদান গাণিতিক ভেরিয়েবলকে সংজ্ঞায়িত করে:

উদাহরনঃ

<p>Einstein wrote:</p>

<p><var>E = m c<sup>2</sup></var></p>

 

ফলাফলঃ

Einstein wrote:

E = m c2

 

এইচটিএমএল Computer Code এলিমেন্টস

Tagবিবরণ
<code>প্রোগ্রামিং কোড কে সংজ্ঞায়িত করে
<kbd>কীবোর্ড ইনপুট কে সংজ্ঞায়িত করে
<samp>কম্পিউটার আউটপুট কে সংজ্ঞায়িত করে
<var>গাণিতিক ভেরিয়েবল কে সংজ্ঞায়িত করে
<pre>পূর্ববিন্যাসিত টেক্সট কে সংজ্ঞায়িত করে

এইচটিএমএল কমেন্ট (HTML Comment)

HTML Comment Tags এইচটিএমএল কমেন্ট ট্যাগ

HTML source  এ আপনি নিম্নোক্ত syntax ব্যাবহার করে comments করতে পারেনঃ

<!-- এখানে  আপনার Comment লিখুন -->

নোটঃ এখানে অবশ্যই মনে রাখতে হবে যে একটি  বিস্ময় সূচক চিহ্ন (!)  শুরুর ট্যাগ এ ব্যাবহার করা হয়েছে। কিন্তু সমাপ্তি ট্যাগ হিসেবে কোন (!) ব্যবহার করা হয়নি।

 

Comments গুলি browser এ প্রদর্শিত হয় না কিন্তু তারা HTML document এ সাহায্য করে থাকে।

Comments দ্বারা আপনি আপনার HTML এ  notifications and reminders ঠিক করে দিতে পারবেন।

উদাহরনঃ

<!-- এখানে  আপনার Comment লিখুন -->

<p>এখানে  আপনার paragraph লিখুন .</p>

<!-- কোন information মনে রাখার জন্য এখানে যোগ করুন -->

 

 

HTML debugging এর জন্য comment  অসাধারন কাজ করে, কেননা আপনি HTML code line এর বাইরে comment করতে পারেন এবং কমেন্ট দেখে ত্রুটি খুজে বের করতে পারবেন।

উদাহরনঃ

<!-- Do not display this at the moment

<img border="0" src="pic_mountain.jpg" alt="Mountain">

-->

 

 

Conditional Comments (শর্তাধীন Comment)

HTML এ Conditional Comment ব্যাবহারে আপনি বাধার সম্মুখীন হতে পারেনঃ

<!--[if IE 8]>

.... some HTML here ....

endif]-->

Conditional comment সংবলিত HTML tag কেবলমাত্র Internet Explorer দ্বারা ই কার্যকর হতে পারে।

 

Software Program Tags

HTML comment tag গুলি বিভিন্ন HTML software program দ্বারা তৈরি হতে পারে।

উদাহরণসরূপঃ  <!--webbot bot-->  tag টি  HTML comment এর ভিতরে FrontPage এবং Expression Web দ্বারা মোড়ান থাকে।

নিয়ম হিসেবে এইসব tag কে রেখে দেয়া হয় software টিকে সহায়তা করার জন্য, যা দ্বারা এটি তৈরি করা হয়েছে।

এইচটিএমএল এর সিএসএস (HTML Style – CSS)

HTML Styles - CSS

 উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgray}
h1   {color:blue}
p    {color:green}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

 

সিএসএস দ্বারা এইচটিএমএল কে স্টাইল করা

সিএসএস(css) এর পূর্ণ নাম হল Cascading Style Sheets ।

তিনভাবে স্টাইল কে এইচটিএমএল এর সাথে যুক্ত করা যায়

• Inline-স্টাইল attribute ব্যবহার করে এইচটিএমএল এর সাথে যুক্ত করা যায়

• Internal- <style> এলিমেন্ট এইচটিএমএল এর head সেকশন এর মধ্যে যুক্ত করা যায়

• External- এক বা একাধিক বাইরের সিএসএস ফাইল যুক্ত করে কাজ করা যায়।

তবে সব থেকে কমন হল বাইরে থেকে একটি সিএসএস ফাইল যুক্ত করা। কিন্তু আমরা এইখানে internal স্টাইল ব্যবহার করব। কারন এতে আমাদের জন্য স্টাইল এর জন্য ভিন্ন ভিন্ন ফাংশন গুলো বুজতে ঝুব সুবিধা হবে।

 

সিএসএস syntax

সিএসএস স্টাইলিং এর জন্য নিন্মোক্ত সিনটেক্স ব্যবহার করা হয়

element { property:value ; property:value }

 

এই element হল এইচটিএমএল এর একটি উপাদানের নাম। property হল সিএসএস একটি প্রপার্টি। value হল সিএসএস প্রপার্টি এর একটি মান।

অনেকগুলো স্টাইল থাকলে তাহলে সেগুলো সেমিকোলন দিয়ে আলাদা করতে হয়।

 

Inline স্টাইল (inline css)

এইচটিএমএল উপাদানের ক্ষেত্রে একটি ইউনিক স্টাইল এর জন্য inline styling খুবই উপযোগী। এই উদাহরনে ইনলাইন স্টাইল এর মাধ্যমে একটি ইউনিক heading এর টেক্সট এর কালার পরিবর্তন করা হচ্ছে

উদাহরণ

<h1 style="color:blue">This is a Blue Heading

 

 

Internal স্টাইল (internal css)

একটি পেজ এর সকল এইচটিএমএল উপাদানের জন্য একটি কমন স্টাইল ব্যবহার করা হয়েছে আর তা হল internal style sheet।

সাধারনত এটি <style> এলিমেন্ট এর সাহায্যে হেড সেকশন এর মধ্যে ইনক্লুড করতে হয়।

উদাহারন

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1   {color:blue}
p    {color:green}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

 

External স্টাইল (External সিএসএস)

অনেকগুলো পেজ এর স্টাইল নিয়ন্ত্রণ করার জন্য এই পধতি চালানো হয়। এই ক্ষেত্রে মাত্র সিএসএস ফাইল এর একটি উপাদান পরিবর্তন করার মাধ্যমে বাকি সবগুলো পেজ এর পরিবর্তন করা সম্ভব। হেড সেকশন এর মধ্যে external সিএসএস ফাইল এর লিঙ্ক করে দিতে হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="styles.css">
 </head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
 
সিএসএস ফন্টস
সিএসএস এর color প্রপার্টি দ্বারা এইচটিএমএল পেজ এর টেক্সট এর কালার কি হবে তা ডিফাইন করা হয়। সিএসএস এর font-family দ্বারা টেক্সট এর ফন্ট কোন ফন্ট হবে তা ডিফাইন করে। সিএসএস এর font-size প্রপার্টি দ্বারা টেক্সট এর আকার কতটুকু হবে তা ডিফাইন করে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color:blue;
    font-family:verdana;
    font-size:300%;
}
p  {
    color:red;
    font-family:courier;
    font-size:160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
তবে <font> ট্যাগ টি এইচটিএমএল এর পুরাতন ভার্সন এ কাজ করে এইচটিএমএল৫ এ কাজ করে না।
 
সিএসএস বক্স মডেল
প্রত্যেকটি এইচটিএমএল এর উপাদানের জন্য একটি বক্স নির্দিষ্ট করা থাকে কিন্তু আমরা তখনি এটা দেখতে পারব যখন আমরা সিএসএস এর মধ্যে border প্রপার্টি ঘোষণা করব
উদাহরণ
p {
    border:1px solid black;
}
border এর মধ্যে ফাকা তৈরি করার জন্য আমরা padding প্রপার্টি ব্যবহার করব
উদাহারন
p {
    border:1px solid black;
    padding:10px;
}
বর্ডার এর বাইরে মার্জিন এর জন্য আমরা margin প্রপার্টি ব্যবহার করব
উদাহরণ
p {
    border:1px solid black;
    padding:10px;
    margin:30px;
 }
সিএসএস উদাহরণ এ px ব্যবহার করা হয়েছে এতে পিক্সেল বুঝায়
 
ID Attribute
উপরের সবগুলো উদাহরণ এ সিএসএস এর সাধারন নিয়ম ব্যবহার করা হয়েছে।
যদি কোন একটি নির্দিষ্ট স্টাইল নির্দিষ্ট কোন এইচটিএমএল এর উপাদানের ক্ষেত্রে প্রয়োগ করতে হয় তাহলে id attribute প্রথমে এইচটিএমএল এর মধ্যে যোগ করতে হবে
উদাহরণ
<p id="p01">I am different</p>
 
এরপর id কে সিএসএস এর মধ্যে কল করে স্টাইল যোগ করতে হবে
উদাহরণ
p#p01 {
    color:blue;
}
 
Class attribute
কোন নির্দিষ্ট উপাদানের ধরন পরিবর্তন করার জন্য ক্লাস (class) attribute এইচটিএমএল এর উপাদানের মধ্যে যোগ করতে হয়
উদাহরণ
<p class="error">I am different</p>
একন আপনি নির্দিষ্ট ক্লাস এর সাথে সকল এলিমেন্ট এ ভিন্ন ভিন্ন স্টাইল দিতে পারবেন।
উদাহরণ
p.error {
    color:red;
}
নোটঃ id ব্যবহার করা হয় একটি ইউনিক উপাদানের জন্য এবং class ব্যবহার করা হয় একটি এলিমেন্ট এর গ্রুপ এর জন্য।
 
সীমাবদ্ধতা
পুরাতন এইচটিএমএল ভার্সন এর অনেক ট্যাগস এবং attributes ব্যবহার করা হয় স্টাইল documents এ। কিন্রু এইগুলো এইচটিএমএল ৫ এ সাপোর্ট করে না।
যে উপাদান বা elements গুলো বাদ দিতে হবে ব্যবহার করা বাদ দিতে হবে: <font>, <center> এবং <strike>.
যে attribute গুলো বাদ দিতে হবে: color এবং bgcolor
 
একনজরে প্রপার্টি গুলো
Inline styling এ এইচটিএমএল এর স্টাইল attribute এর ব্যবহার
Internal css এ এইচটিএমএল এর <style> এলিমেন্ট এর ব্যবহার
External css এ এইচটিএমএল এর <link> উপাদানের ব্যবহার
সেকশন এ <style> এবং <link> elements যুক্ত করার জন্য এইচটিএমএল এর <head> এলিমেন্ট এর ব্যবহার
Text কালার করার জন্য এ সিএসএস এর কালার প্রপার্টি এর ব্যবহার
Text এর ফন্ট নির্দারণের জন্য সিএসএস এর font-family প্রপার্টি এর ব্যবহার
Text এর ফন্ট সািইজ নির্দারণের জন্য সিএসএস এর font-size প্রপার্টি এর ব্যবহার
উপাদানের বর্ডার দেখানোর জন্য সিএসএস এর border প্রপার্টি এর ব্যবহার
বর্ডার এর ভিতরে স্পেস নির্দারনের জন্য সিএসএস এর padding প্রপার্টি এর ব্যবহার
বর্ডার এর বাহিরের দিকের স্পেস নির্দারনের জন্য সিএসএস এর margin প্রপার্টি এর ব্যবহার
এইচটিএমএল স্টাইল ট্যাগ
<style> - একটি document মধ্যে সমস্ত স্টাইল এর তথ্যকে সঙ্গায়িত করে
<link> -  document এবং external রিসোর্স ফাইল এর মধ্যে সম্পর্ক নির্দারণ করে

এইচটিএমএল লিঙ্ক (HTML Link)
প্রায় সকল ওয়েবপেজ এ লিঙ্ক রয়েছে। লিঙ্ক এ ক্লিক করার মাধ্যমে ব্যবহারকারী এক পেজ থেকে অন্য পেজে যেতে পারে।
এইচটিএমএল লিঙ্ক - হাইপারলিঙ্ক
হাইপারলিঙ্ক হচ্ছে একটি Text, বা ছবি যার উপর ক্লিক করার মাধ্যমে আপনি অন্য আরেকটি ওয়েবপেজে/ডকুমেন্ড এ চলে যেতে পারে।
 
এইচটিএমএল লিঙ্ক - সিনট্যাক্স
এইচ টি এম এল এ লিঙ্ক সিনট্যাক্সগুলো কিভাবে গঠিত হয় নিচে তাঁর উদাহরন তুলে ধরা হল, <a> ট্যাগ দ্বারা লিঙ্ককে সঙ্গায়িত করা হয়।
লিঙ্ক সিনট্যাক্স
<a href="url">link text</a>
উদাহরনঃ
<a href="http://bangla.salearningschool.com/html/">Visit our HTML tutorial</a>
 
ফলাফলঃ
Visit our HTML tutorial
এখানে href অ্যাট্রিবিউট ওয়েব পেজ এর গন্তব্যকে নির্দেশ করে করে যেমন, http://bangla.salearningschool.com/html/
আর link text (Visit our HTML tutorial) হল প্রদর্শিত অংশ যার উপর ক্লিক করলে আপনি একটি নির্দিষ্ট ওয়েব পেজ এ স্থানান্তিরিত হবেন।
নেটঃ link text সবসময়ই টেক্স হতে হবে এমন কোন কথা নেই, এটি ছবি বা এইচটিএমএল এর যেকোন উপাদান হতে পারে।
 
লোকাল লিঙ্ক
উপরের উদাহরণে একটি সংয়সম্পূর্ণ ওয়েব এড্রেস (URL) ব্যবহার করা হয়েছে।
একটি লোকাল লিঙ্ক (একই ওয়েব সাইটের লিঙ্ক) নির্দিষ্ট করা হয় আপেক্ষিক URL এর সাহায্যে (http://www.... ব্যতীত)
যেমনঃ
<a href="html_images.asp">HTML Images</a>
 
এইচটিএমএল লিঙ্ক - কালার এবং আইকন
আপনি যখন কোন লিঙ্ক এর উপর নিয়ে যান তখন সাধারণত দুপ্রকার ঘটনা ঘটতে পারেঃ
১. মাউস এর তীর টিহ্নটি একটা ছোট হাতের রুপ নিতে পারে।
২. লিঙ্ক এর বিষয়বস্তু যেমন লিঙ্ক টেক্সট ইত্যাদির কালার পরিবর্তন হয়ে থাকে।
সাধারনত লিঙ্কগুলো যে কোন ব্রাউজার এ নিম্নোক্তভাবে দেখা যায়
১. অদেখা লিঙ্কগুলোর নিচে আন্ডার লাইন এবং এদের কালার নীল হয়।
২. দেখা লিঙ্কগুলোর নিচেও আন্ডার লাইন থাকে কিন্তু এদের কালার সাধারনত রক্তবর্ণ হয়।
৩. একটা সচল লিঙ্কএর নিচেও একইভাবে আন্ডার লাইন কিন্তু লাল কালারের হয়ে থাকে।
আপনি style ব্যবহার করে ডিফল্ট কালার ও আন্ডারলাইন পরিবর্তন করতে পারেন।
উদাহরণঃ
<style>
a:link    {color:#000000; background-color:transparent; text-decoration:none}
a:visited {color:#000000; background-color:transparent; text-decoration:none}
a:hover   {color:#ff0000; background-color:transparent; text-decoration:underline}
a:active  {color:#ff0000; background-color:transparent; text-decoration:underline}
</style>
এইচটিএমএল লিঙ্ক - টার্গেট অ্যাট্রিবিউট
target অ্যাট্রিবউট নির্দারণ করে ডকুমেন্টটি কোথায় খুলবে।
উদাহরণস্বরূপ ডকুমেন্টটি একই উইন্ডোতে খুলতে পারে বা নতুন ট্যাব এও খুলতে পারেঃ
<a href="http://bangla.salearningschool.com/html/" target="_blank">Visit our HTML tutorial</a>
 
ফলাফল
Visit our HTML tutoria
 
Target Valueবিবরণ
_blankলিঙ্ককৃত ডকুমেন্টটি নতুন একটি উইন্ডো বা ট্যাব এ খোলে
_selfলিঙ্ককৃত ডকুমেন্টটি যে ফ্রেমে ক্লিক করেছেন সেই একই ফ্রেমে খুলবে (এটিই ডিফল্ট হিসেবে থাকে)
_parentলিঙ্ককৃত ডকুমেন্টটি মুল ফ্রেমে খোলে
_topলিঙ্ককৃতডকুমেন্টটি সম্পূর্ণ উইন্ডো জুড়ে খোলে
framenameলিঙ্ককৃত ডকুমেন্টটি নির্দিষ্ট নামের ফ্রেমে খোলে
 
আপনার ওয়েব পেজটি যদি একটি ফ্রেম লক করা থাকে, তাহলে target="_top" ব্যহার করে লক ভেঙ্গে ফেলতে পারেন।
উদাহরণঃ
<a href="http://bangla.salearningschool.com/html/" target="_top">Visit our HTML tutorial</a>
 
ফলাফলঃ
ইচটিএমএল লিঙ্ক - ইমেজ/ছবি লিঙ্ক হিসেবে ব্যবহার
ইমেজকে লিঙ্ক হিসেবে ব্যবহার করা খুবই সাধারণ
উদাহরণঃ
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
 
ফলাফলঃ
smiley
 
এইচটিএমএল লিঙ্ক - id অ্যাট্রিবিউট
<a> এলিমেন্ট এর সাথে একটি id অ্যাট্রিবউট যোগ করুন
<a id="tips">Useful Tips Section</a>
 
<a> এলিমেন্ট এ একটি লিঙ্ক সংযুক্তকরণ
<a href="#tips">Visit the Useful Tips Section</a>
 
<a> এলিমেন্ট এ অন্য পেজ এর একটি লিঙ্ক যুক্তকরণ
<a href="http://bangla.salearningschool.com/html_links.htm#tips">Visit the Useful Tips Section</a>
 
 
সারসংক্ষেপ
• এইচটিএমএল <a> এলিমেন্ট এর ব্যবহার লিঙ্ককে সঙ্গালিত করে
• এইচটিএমএল href অ্যাট্রিবউট এর ব্যবহার লিঙ্ক এর এড্রেসকে সঙ্গায়িত করে
• এইচটিএমএল target অ্যাট্রিবউট এর ব্যবহার  লিঙ্কটি কোথায় খুলবে তা বোঝায়
• এইচটিএমএল <img> এলিমেন্ট এর ব্যবহার ইমেজ/ছবিকে লিঙ্ক সিহেবে ব্যবহার করে
• এইচটিএমএল id অ্যাট্রিবউট (id="value") এর ব্যবহার বুকমার্ক ডিফাইন করার জন্য ব্যবহৃত হয়
• এইচটিএমএল href অ্যাট্রিবউট (href="#value") এর ব্যবহার বুকমার্ক এ ঠিকানা বুঝায়
এইচটি এম এল ইমেজ (HTML Image)
উদাহরণঃ
DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountains</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px">
</body>
</html>
 
 
ফলাফলঃ
Spectacular Mountains
pic_mountain
অবশ্যই ইমেজ (ছবির) উচ্চতা এবং প্রসস্থতা উল্লেখ করে দিতে হবে। যদি উচ্চতা এবং প্রসস্থতা নির্দিষ্ট করে না দেয়া হয়ে তাহলে পেজে ইমেজ লোড হওয়ার সময় ইমেজটি ফ্লিক (পেজের সাথে ছবিটি সামঞ্জস্য হওয়ার সময় ছবিটি লাফালাফি) করবে।
 
এইচটিএমএল ইমেজ সিনট্যাক্স
এইচটিএমএল এ ইমেজকে <img> ট্যাগ দ্বারা সংজ্ঞায়িত করা হয়।
<img> ট্যাগ এর ভিতরে শুধুমাত্র্ অ্যাট্রিবিউট থাকে এবং এর কোন ক্লোজিং ট্যাগ থাকে না।
src অ্যাট্রিবিউটম ইমেজ এর ইউআরএল (ওয়েব ঠিকানা বা ইমেজ এর অবস্থান এর ঠিকানা) কে সংজ্ঞায়িত করে।
<img src="url" alt="some_text">
 
 
Alt অ্যাট্রিবিউট
Alt অ্যাট্রিবিউট দ্বারা ওয়েব এ যদি কোন কারনে ইমেজ লোড না হতে পারে তাহলে উক্ত ইমেজ এর বিকল্প হিসেবে কি Text প্রদর্শিত হবে তা নির্ধারণ করে।
Alt অ্যাট্রিবিউট এর ভেলু (মান) হবে আপনি যে Text টি ইমেজ লোড না হলে প্রদর্শন করতে চান সেই Text.
<img src="html5.gif" alt="The official HTML5 Icon">
 
ফলাফল
The official HTML5 Icon
 
Alt অ্যাট্রিবিউট অবশ্যই প্রদান করত হবে। এটি ছাড়া একটি ওয়েব পেজ সঠিকভাবে যাচাই করা যায় না।
 
এইচটিএমএল স্ক্রিন রিডার
স্ক্রিণ রিডার সফটওয়্যারগুলো পর্দায় কি প্রদর্শিত সকলকিছু পড়তে পারে।
ওয়েব এ ব্যবহৃত এইচটিএমএল কোড Text থেকে বক্তৃতা, শব্দের আইকন বা যেকোন প্রতীকি আউটপুট পুনরুদ্ধার করতে পারে।
স্ক্রিণ রিডার সাধারণত যারা অন্ধ, দৃষ্টিপ্রতিবন্ধি, অশিক্ষিতদের জন্য ব্যবহৃত হয়।
নোট: স্ক্রিন রিডার Alt অ্যাট্রিবিউট পড়তে পারে।
 
ছবির আকার - প্রস্থ এবং উচ্চতা
ইমেজ (ছবির) width (প্রস্থ) এবং height (উচ্চতা) নির্ধারণের জন্য আপনি style অ্যাট্রিবিউট ব্যবহার করতে পারেন।
এর মান পিক্সেল দ্বারা নির্ধারণ করা হয় (মান এর পরে px লিখতে হয়):
<img src="Mountain.jpg" alt="Mountain View" style="width:128px;height:128px">
 
ফলাফল:
pic_mountain
 
 
বিকল্প হিসেবে আপনি width এবং height অ্যাট্রিবিউট ব্যবহার করতে পারেন।
এর মান পিক্সেল দ্বারা নির্ধারণ করা হয় (মান এর পরে px লিখতে হয়):
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
 
 
Width এবং Height বা Style?
উভয় width, height, এবং style অ্যাট্রিবিউট লেটেস্ট HTML5 সাপর্ট করে।
আমরা আপনাকে style অ্যাট্রিবিউট ব্যবহারের পরামর্শ দেব। এটি স্টাইল শীটকে ইমেজ এর ডিফল্ট আকার পরিবর্তন করতে বাধা দেয়।
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body><img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128"></body>
</html>
অন্য ফোল্ডার এর ছবি যদি উল্লেখ করে দেয়া না হয় তাহলে ব্রাউজার ছবি খুঁজে পেতে ওয়েব পেজ এর একই ফোল্ডার এ খোঁজ করে। ওয়েব পেজ এ এটিই সাধারণ, যদি আপনি কোন সাব ফোল্ডার এ ইমেজটি রাখেন তাহলে এভাবে তা উল্লেখ করে দিতে হবে:
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
ব্রাউজার যদি ইমেজটি খুঁজে না পায় তাহলে সে একটি ব্রোকেন লিঙ্ক আইকন প্রদশণ করবে। উদাহরণ
<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px">
ফলাফল
HTML5 Icon
 
অন্য সার্ভারের ছবি
কিছু ওয়েব সাইট তাদের ইমেজগুলো ইমেজ সার্ভারে লোড করে রাখে, আসলে আপনি বিশ্বের যে কোনো ওয়েব ঠিকানার ইমেজ এ প্রবেশ করতে পারেন:
<img src="http://www.rasta.edu.pk/images/EducationTraining1.jpg">
ফলাফল
 
অ্যানিমেটেড ছবি
GIF ফরমেট অ্যানিমেটেড ইমেজ সমর্থন করে।
<img src="Tree.gif" alt="Rain Tree" style="width:240px;height:320px">
ফলাফল
Stormy-island-cell-phone-wallpaper-animated-240x320
নোট: অ্যানিমেটেড ইমেজ ও ননঅ্যানিমেটেড ইমেজ এর সিনটেক্স এ কোন পার্থক্য নেই।
লিঙ্ক হিসেবে ইমেজ ব্যবহার
ইমেজকে লিঙ্ক হিসেবে ব্যবহার করা খুবই সাধারণ ব্যাপার

   <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
 
ইমেজ ম্যাপ
একটি ইজেজ এর জন্য আপনি ক্লিক করা যায় এমনভাবে ইমেজ ম্যাপ তৈরি করতে পারেন।
উদাহরণ
usemap="#planetmap" style="width:145px;height:126px">
<map name="Bangladesh">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
 
 
ফলাফল
Planets
 
SunMercuryVenus
 
ইমেজ ফ্লোটিং
আপনি ইজেমকে প্যারাগ্রাফ এর বাম বা ডানে ভাসমান অবস্থায় রাখতে পারেন
উদাহরণ
<p>
60px;height:40px">
A paragraph with an image. The image floats to the left of the text.
</p>
 
 
ফলাফল:
Bangladesh Flag
A paragraph with an image. The image floats to the left of the text.
 
 
 অধ্যায় সারসংক্ষেপ
  • এইচটিএমএল এ <img> এলিমেন্ট ইমেজকে সংজ্ঞায়িত করে।
  • এইচটিএমএল এ src অ্যাট্রিবিউট ইমেজ এর ফাইল নেমকে সংজ্ঞায়িত করে।
  • এইচটিএমএল এ alt অ্যাট্রিবিউট ইমেজ এর বিকল্প টেক্সকে সংজ্ঞায়িত করে।
  • এইচটিএমএল এ width এবং height অ্যাট্রিবিউট ইমেজ এর আকারকে সংজ্ঞায়িত করে।
  • সিএসএস এ width and height প্রোপার্টি ইমেজ এর আকারকে সংজ্ঞায়িত করে (বিকল্পভাবে)।
  • সিএসএস এ float প্রোপার্টি ইমেজকে ফ্লোট করতে সহায়তা করে।
  • এইচটিএমএল এ usemap অ্যাট্রিবিউট ইমেজ ম্যাপ তৈরি করতে ব্যবহৃত হয়।
  • এইচটিএমএল এ <map> এলিমেন্ট ইমেজ ম্যাপকে সংজ্ঞায়িত করতে ব্যবহৃত হয়।
  • এইচটিএমএল এ <area> এলিমেন্ট ইমেজ ম্যাপ এর কোন এরিয়া ব্যবহার করতে তা সংজ্ঞায়িত করে।
এইচটিএমএল টেবিল (HTML Table)
HTML টেবিল ব্যবহার করে আমরা কোন web পেজে বিভিন্ন ধরনের পরিসংখ্যানমূলক ডেটা পাঠকের নিকট আকর্ষণীয় ভাবে উপস্থাপন করতে পারবো।
HTML টেবিলের উদাহরন
এই পর্যায়ে আমরা একটি HTML টেবিলের উদাহরন দেখব:
সিরিয়াল নাম্বারনামের প্রথম অংশনামের শেষ অংশনাম্বার
১.আলআমিন৯০
২.মেহেদিহাসান৮৫
৩.রোজিনাআক্তার৭৭
৪.মাহফুজুররহমান৭৬
৫.তানজিলাআক্তার৬৯
 
এই টেবিলটি তৈরি করার জন্য আপনি নিচের কোডটি কপি করে আপনার ব্লগে ব্যবহার করতে পারেন।
<table style="width:100%">
 <tr>
<th> সিরিয়াল নাম্বার </th>
 <th> নামের প্রথম অংশ </th>
 <th> নামের শেষ অংশ </th>
 <th>  প্রাপ্ত নাম্বার </th>
 </tr>
 <tr>
 <td> ১.</td>
 <td> আল</td>
 <td> আমিন</td>
<td> ৯০</td>
 </tr>
<tr>
 <td> ২.</td>
 <td> মেহেদি</td>
 <td> হাসান</td>
<td> ৮৫</td>
 </tr>
 </table>
 
এইভাবে আপনি <tr> থেকে </tr> পর্যন্ত অংশ পর্য়ন্ত অংশটুকু বার বার ব্যবহার করে টেবিলের সাইজ বাড়াতে পারেন।
এবার এই টেবিলে ব্যবহৃত গুরুত্বপূর্ণ ট্যাগ এর ব্যবহার সম্পর্কে কিছু তথ্য জানি।
<table> এবং </table> ট্যাগ দ্বারা কোন টেবিলের শুরু এবং শেষ চিহ্নিত করা হয়।
<tr> এবং </tr> ট্যাগ দ্বারা কোন টেবিলে ব্যবহৃত row বা সারির শুরু এবং শেষ নির্দেশ করা হয়।
<td> এবং </td> ট্যাগ দ্বারা কোন টেবিলের row বা সারিগুলোকে ছোট ছোট সেলে বিভক্ত করা হয়।
<th>  এবং </th> ট্যাগ দিয়ে কোন টেবিলের হেডিংকে চিন্হিত করা হয়। [সাধারনত এই ট্যাগ ব্যবহার করলে লেখাগুলো ‘Bold’ বা মোটা হয়ে web-পেজে দেখাবে।]
 
HTML টেবিলে Border ট্যাগ এর ব্যবহার
HTML টেবিলকে আকর্ষনিয় করতে আমরা অনেক সময় Border ট্যাগ ব্যবহার করে থাকি। এই ট্যাগ ব্যবহার করে টেবিলের বর্ডার প্রয়োজন অনুযায়ি মোটা এবং চিকন করে উপস্থাপন করতে পারবেন।
 
উদাহরন:
<table border="1" style="width:100%">
 <tr>
 <td>হাসান</td>
 <td>জামিল</td>
 <td>৫০</td>
 </tr>
 <tr>
 <td>কবির</td>
 <td>খান</td>
 <td>৯১</td>
 </tr>
</table>
এখানে “<table border="1" style="width:100%">” দ্বারা একই টেবিলের Border মোটা বা চিকন ভাবে উপস্থাপন করতে পারবেন। "1" এর মান ইচ্ছে মত পরিবর্তন করে বর্ডার পরিবর্তন করতে পারবেন।
 
এইচটিএমএল লিস্ট (HTML tag list)
HTML List ট্যাগ কি এবং এটা কিভাবে HTML এ কাজ করে ?
একটা ওয়েব পেজকে সুন্দর করে সাজানো এবং তথ্য উপস্থাপনার অন্যতম পদ্ধতি লিষ্ট । HTML এর মাধ্যমে দুই ধরণের লিষ্ট তৈরি করা যায়, একটি হচ্ছে অর্ডার লিষ্ট এবং অপরটি হচ্ছে আনঅর্ডার লিষ্ট । অর্ডার লিষ্টে বিভিন্ন তথ্যকে পর্যায়ক্রমিকভাবে সাজিয়ে উপস্থাপন করা হয় এবং প্রতিটা লাইনের শুরুতে ক্রমিক সংখ্যা থাকে। অন্যদিকে আন অর্ডার লিষ্টে প্রতিটা লাইনের সামনে ছোট বৃত্তাকার বা বর্গাকার চিহ্ন থাকে। HTML এর মাধ্যমে আন অর্ডার লিষ্ট তৈরি করার জন্য <ul></ul> এবং অর্ডার লিষ্ট তৈরি করার জন্য <ol></ol> ট্যাগ ব্যবহার করা হয়।
Unordered List
এটিই সবচেয়ে বেশি ব্যবহৃত হয় প্রফেশনালি। <ul></ul> এর ভিতরে রাখতে হবে এবং <li></li> এলিমেন্টের ভতর একটা একটা করে আইটেম রাখতে হবে। প্রদর্শন করবে তালিকা আকারে কোন নাম্বারিং থাকবেনা। বাই ডিফল্ট একটা গোল চিহ্ন প্রতিটি আইটেমের বাপাশে থাকে।
<html>
<head>
<title>your website name</title>
</head>
<body>
<ul>
<li>Bangla</li>
<li>English</li>
<li>Social Science</li>
<li>Mathemetaics</li>
</ul>
</body>
</html>
আপনার ওয়েব ব্রাউজার এ রান করার তার দেখতে নিচের মতো দেখতে পারবেন ।
  • Bangla
  • English
  • Social Science
  • Mathemetaics
Ordered List
কখনও নাম্বার দিয়ে তালিকা প্রয়োজন হতে পারে তখন <ol></ol> এর ভিতর li ট্যাগ দিয়ে বানাতে পারেন ।
<html>
<head>
<title>your website name</title>
</head>
<body>
<ol start="10">
2.<li>iPad</li>
3.<li>iPhone</li>
4.<li>MacBook Air</li>
5.</ol>
</body>
</html>
আপনার ওয়েব ব্রাউজার এ রান করার তার দেখতে নিচের মতো দেখতে পারবেন ।
  1. iPad
  2. iPhone
  3. MacBook Air
হয়তো ভাবছেন <ol start="10"> লিখার পর বাকি সব গুল 10,11,12 তালিকা কি করে করলাম । একটু লক্ষ করেন <ol start=" পর আমি “10” লিখছি যার কারনে 10 থেকে তালিকা শুরু হইছে । আর তিনটি তালিকা থাকার কারনে ১০,১১,১২ পর্যন্ত প্রদশন করছেন । আপনারা যদি <ol start=" লিখার পরে “49” দিন এবং ট্যাগ শেষ করেন তাহলে ৪৯ থেকেই আপনার তালিকা শুরু হবে ।
এইচটিএমএল ব্লক (HTML Block and Inline Elements)
উদাহরণঃ
<div style="background-color:black; color:white; padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
 
ফলাফলঃ
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
এইচটিএমএল এর ব্লক উপাদান এবং ইনলাইন উপাদান
প্রায় প্রত্যেক এইচটিএমএল উপাদানকে ব্লক লেভেল উপাদান বা ইনলাইন উপাদান হিসেবে চিহ্নিত করা হয়ে থাকে। যখন ব্রাউজার এ ডিসপ্লে করা হয় তখন সাধারনত ব্লক লেভেল উপাদানগুলো নতুন লাইন থেকে শুরু হয়।
Examples: <h1>, <p>, <ul>, <table>
ইনলাইন উপাদান গুলো কোন লাইন এর বিরতি ছারাই শুরু হয়
Examples: <b>, <td>, <a>, <img>
 
এইচটিএমএল DIV Element
<div> একটি ব্লক লেভেল উপাদান যা অন্য এইচটিএমএল উপাদান এর সাথে container হিসেবে ব্যবহার করা যায়। এই <div> উপাদানের কোন স্পেশাল অর্থ নেই। এর জন্য কোন attribute এর দরকার পরে না। কিন্ত স্টাইল এবং ক্লাস হল কমন। কারন এটি ব্লক লেভেল উপাদান যা ব্রাউজার এ লাইন এর বিরতি হিসেবে প্রকাশ করে।
 
এইচটিএমএল <span> element
<span> একটি ইনলাইন উপাদান যা টেক্সট এর সাথে container হিসেবে ব্যবহার করা যায়। এই <span> উপাদানের কোন স্পেশাল অর্থ নেই। এর জন্য কোন attribute এর দরকার পরে না। কিন্ত স্টাইল এবং ক্লাস হল কমন। <div> উপাদান এর মতন <span> অটোমেতিক ফরম্যাট নেই।
উদাহরণঃ
<h1>My <span style="color:red">Important</span>Heading</h1>
 
ফলাফলঃ
My ImportantHeading
 
এইচটিএমএল grouping ট্যাগ
<div>-ডকুমেন্ট কে ব্লক- লেভেল হিসেবে ডিফাইন করার জন্য
<span>- ডকুমেন্ট কে ইনলাইন হিসেবে ডিফাইন করার জন্য
এইচটিএমএল ক্লাসেস (HTML Classes)
HTML Classes
সিএসএস এর মাধ্যমে বিভিন্ন ক্লাস এর এর স্টাইল সেট করে দেওয়া যায়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>

<div class="cities">
 <h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
</p>
 </div> 

</body>
</html>
 
Classing ব্লক elements
এইচটিএমএল <div> একটি ব্লক লেভেল উপাদান। অন্যান্য এইচটিএমএল এর উপাদানের ক্ষেত্রে এটি container হিসেবে কাজ করতে পারে। সবগুলো এইচটিএমএল উপাদানের div এর ক্লাস এর নাম এক রাখলে সিএসএস স্টাইল থেকে সবগুলোর ক্ষেত্রে সমান এফেক্ট ফেলান সম্বভ।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
 </head>
<body>

<div class="cities">
 <h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
 </div>

<div class="cities">
 <h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="cities">
 <h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</body>
</html>
 
Classing inline elements
এইচটিএমএল এর <span> উপাদান একটি ইনলাইন উপাদান যা container এর টেক্সট এর জন্য ব্যবহার হয়ে থাকে। সবগুলো এইচটিএমএল উপাদানের span এর ক্লাস এর নাম এক রাখলে সিএসএস স্টাইল থেকে সবগুলোর ক্ষেত্রে সমান এফেক্ট ফেলান সম্বভ।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
span.red {color:red;}
 </style>
</head>
<body>

<h1>My <span class="red">Important</span> Heading</h1>

</body>
</html>
 
এইচটিএমএল লেআউট (HTML Layout)
ইচটিএমএল লেআউট (HTML Layouts)
বিভিন্ন ওয়েবসাইটে অনেক সময়ই লক্ষ্য করা যায় যে লিখাগুলো কয়েকটি কলামে বিভক্ত করা থাকে। যেমন, ম্যাগাজিন, নিউজপেপার ইত্যাদি।
HTML এ <div> tag এর ব্যবহার করে layout design বা কলামে বিভক্ত করা যায়।
div element ব্যবহার করে প্রায় layout করা হয়, কারন div ব্যবহার করলে একে সহজেই CSS দিয়ে এর অবস্থান ও সবকিছু design করে নেয়া যায়।
নিচের উদাহরণটিতে চারটি div ব্যবহার করে কয়েকটি কলাম তৈরি করা হল-
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright © W3Schools.com
</div>
</body>
উপরোক্ত html এর CSS part টুকু নিম্নরুপ
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}
 </style>
 
ফলাফলঃ
Table
 
HTML5 ব্যবহার করে ওয়েবসাইট বিন্যাস
HTML5 দিয়ে খুব সুন্দরভাবে ও সহজেই একটা website এর layout তৈরি করা যায়।
HTML5 এর কিছু নতুন Tag ব্যবহার করে সহজেই website এর বিভিন্ন part আলাদা করা যায়।
 
header = এই tag ব্যবহার করে website এর header section কে বুঝানো হয়।
nav = এই tag ব্যবহার করে মেনুর আইটেমগুলোর link করা হয়।
section = এই tag ব্যবহার করে কোন document এর section বুঝানো হয়।
article = এই tag দিয়ে একটি article বুঝানো হয়।
aside = এই tag দিয়ে পেজ এর sidebar বুঝানো হয়।
footer = এই tag দিয়ে পেজ এর সর্বনিম্ন অংশ বা footer part বুঝানো হয়।
নিচের উদাহরনে <header>, <nav>, <section>, এবং <footer> ব্যবহার করে layout তৈরি করা দেখানো হল-
<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>
<footer>
Copyright © W3Schools.com
</footer>
</body>
 
 
উপরোক্ত html এর CSS নিম্নে দেয়া হল-
<style>
 header {
     background-color:black;
     color:white;
     text-align:center;
     padding:5px; 
 }
 nav {
     line-height:30px;
     background-color:#eeeeee;
     height:300px;
     width:100px;
     float:left;
     padding:5px; 
 }
 section {
     width:350px;
     float:left;
     padding:10px; 
 }
 footer {
     background-color:black;
     color:white;
     clear:both;
     text-align:center;
     padding:5px; 
 }
টেবিল ব্যবহার করে HTML বিন্যাস
Table tag ব্যবহার করে html layout তৈরি করা যায়।
<body>
 
 <table class="lamp">
 <tr>
   <th>
     <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
   </th>
   <td>
     The table element was not designed to be a layout tool.
   </td>
 </tr>
 </table>
 
 </body>
 
উপরোক্ত html এর CSS নিম্নে দেয়া হল-
<style>
 table.lamp {
     width:100%;
     border:1px solid #d4d4d4;
 }
 table.lamp th, td {
     padding:10px;
 }
 table.lamp th {
     width:40px;
 }
 </style>



























Tags
















Previous Post


Next Post