এইচটিএমএল প্রতিক্রিয়াশীল ওয়েব ডিজাইন (HTML Responsive Web Design)
প্রতিক্রিয়াশীল ওয়েব ডিজাইন লেআউট যেভাবে তৈরি করবেন
প্রতিক্রিয়াশীল ওয়েব ডিজাইন আপনাকে নিজেই অথবা আপনি কিভাবে ফুটিয়ে তুলবেন সেটার উপর নির্ভর করবে।
নিচে একটি উদাহরন দেয়া হল
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>W3Schools Demo</h1>
<h2>Resize this responsive page!</h2>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
বুটস্ট্র্যাপ ব্যবহারের মাধ্যমে
আগেকার বিদ্যমান সিএসএস ফ্রেমওয়ার্ক এর মাধ্যমেও প্রতিক্রিয়াশীল ওয়েব ডিজাইন বানানো যায়। আর এখানে বুটস্ট্র্যাপ ই হল এইচ টি এম এল, সিএসএস এবং যে এস ফ্রেমওয়ার্ক এর সবচেয়ে জনপ্রিয় পদ্ধতি ।
বুটস্ট্র্যাপ আপনার সাইট কে যে কোন সাইজ যেমন, ল্যাপটপ বা কম্পিউটার এ ভালোভাবে দেখাতে সহায়তা করে।
উদাহরের সাহায্যে দেখানো হল
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="jumbotron"> <h1>W3Schools Demo</h1> <p>Resize this responsive page!</p> </div> <div class="row"> <div class="col-md-4"> <h2>London</h2> <p>London is the capital city of England.</p> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="col-md-4"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div> <div class="col-md-4"> <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> </div> </div> </body> </html>
HTML Iframe (এইচটিএমএল আইফ্রেম)
Iframe Syntax (iframe সিনট্যাক্স)
একটি iframe যোগ করার সিন্টেক্স হল :
<iframe src="URL" width="300" height="150"></iframe>
src অ্যাট্রিবিউট আইফ্রেম পৃষ্ঠার URL টি (ওয়েব ঠিকানা) নির্দিষ্ট করে
Iframe - এর উচ্চতা এবং প্রস্থতা নির্ধারন
Iframe - এর এর আকার নির্ধারণ করার জন্য height এবং width অ্যাট্রিবউট ব্যবহার করুন
অ্যাট্রিবিউট এর মান ডিফল্ট হিসেবে পিক্সেল এ থাকে, কিন্তু আপনি ইচ্ছা করলে একে পারসেন্ট হিসেবেও ব্যবহার করতে পারেন (যেমন: 80%)
উদাহরণ:
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
Iframe - এর বর্ডার মুছে ফেলা
ডিফল্ট হিসেবে iframe এর চারদিকে একটি কালো বর্ডার থাকে
বর্ডারটি মুছার জন্য একটি স্টাইল অ্যাট্রিবিউট যোগ করুন এবং CSS এর বর্ডার প্রোপার্টি ব্যবহার করুন
উদাহরণ :
<iframe src="demo_iframe.htm" style="border:none"></iframe>
CSS এর সাহায্যে iframe বর্ডার এর সাইজ, রং এবং স্টাইলও পরিবর্তন করা যায়
উদাহরণ :
<iframe src="demo_iframe.htm" style="border:5px dotted red"></iframe>
কোন একটি লিংক এর টার্গেট হিসাবে আইফ্রেম ব্যবহার করন
একটি আইফ্রেমকে কোন একটি লিঙ্ক এর টারগেট ফ্রেম হিসেবে ব্যবহার করা যায়
লিঙ্কটির target অ্যাট্রিবিউটটি অবশ্যই আইফ্রেম এর name অ্যাট্রিবিউটটিকে নির্দেশ করতে হবে
উদাহরণ :
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://bangla.salearningschool.com" target="iframe_a">http://bangla.salearningschool.com</a></p>
এইচটিএমএল এ আইফ্রেম ট্যাগ
এইচটিএমএল এ আইফ্রেম ট্যাগ হচ্ছে : </iframe>
যা একটি ইনলাইন ফ্রেম সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়।
এইচটিএমএল রঙ (HTML Color codes chart)
আমরা জানি একেকটি কালার হলো লাল, নীল এবং সবুজ এর সমন্বিত রূপ। সাধারনত, ১৪০ টি কালার আছে যেগুলো সব ওয়েব ব্রাউজারেই সাপোর্ট করে। এই ১৪০ টি নাম এইচ টি এম এল ৫ এবং সিএসএস ৫ এ উল্লেখ আছে। যার মধ্যে ১৭ টি এসেছে এইচ টি এম এল থেকে এবং ১২৭ টি এসেছে সিএসএস থেকে। নিচে সেইসব ১৪০ টি কালারের নাম এবং তাদের হেক্সাডেসিমেল কোড দেয়া হল।
এইচটিএমএল কালার সেড (HTML Color Shades )
HTML কালার সেড
লাল, সবুজ এবং নীল আলোর সংমিশ্রণে একটি কলারকে প্রদর্শন করা হয়।
গ্রে কালারের সেডসমূহ
সব রঙের আলোর সমান পরিমান বেবহার করে গ্রে কালার তৈরী করা হয়। নিচে কিছু গ্রে কালার সেডের হেক্সা কোড ও আরজিবি (RGB) কোড দেয়া হলো:
| Gray Shades | HEX | RGB |
| #000000 | rgb(0,0,0) | |
| #080808 | rgb(8,8,8) | |
| #101010 | rgb(16,16,16) | |
| #181818 | rgb(24,24,24) | |
| #202020 | rgb(32,32,32) | |
| #282828 | rgb(40,40,40) | |
| #303030 | rgb(48,48,48) | |
| #383838 | rgb(56,56,56) | |
| #404040 | rgb(64,64,64) | |
| #484848 | rgb(72,72,72) | |
| #505050 | rgb(80,80,80) | |
| #585858 | rgb(88,88,88) | |
| #606060 | rgb(96,96,96) | |
| #686868 | rgb(104,104,104) | |
| #707070 | rgb(112,112,112) | |
| #787878 | rgb(120,120,120) | |
| #808080 | rgb(128,128,128) | |
| #888888 | rgb(136,136,136) | |
| #909090 | rgb(144,144,144) | |
| #989898 | rgb(152,152,152) | |
| #A0A0A0 | rgb(160,160,160) | |
| #A8A8A8 | rgb(168,168,168) | |
| #B0B0B0 | rgb(176,176,176) | |
| #B8B8B8 | rgb(184,184,184) | |
| #C0C0C0 | rgb(192,192,192) | |
| #C8C8C8 | rgb(200,200,200) | |
| #D0D0D0 | rgb(208,208,208) | |
| #D8D8D8 | rgb(216,216,216) | |
| #E0E0E0 | rgb(224,224,224) | |
| #E8E8E8 | rgb(232,232,232) | |
| #F0F0F0 | rgb(240,240,240) | |
| #F8F8F8 | rgb(248,248,248) | |
| #FFFFFF | rgb(255,255,255) |
১৬ মিলিয়ন ভিন্ন ভিন্ন কালার
০ থেকে ২৫৫ রেঞ্জের মধ্যে লাল, সবুজ এবং নীলের সংমিশ্রণে প্রায় ১৬ মিলিয়ন ভিন্ন ভিন্ন কালার তৈরী করা সম্ভব। এখনকার মনিটরগুলো প্রায় ১৬৩৮৪ কালার দেখাতে সক্ষম। কালার কোডগুলোর দিকে লক্ষ্য করলে দেখা যায় কোডের রেঞ্জ ০ থেকে ২৫৫ এর মধ্যে পরিবর্তিত হচ্ছে।
স্টোন এজ
পূর্বে কম্পিউটার যখন শুধুমাত্র ২৫৬টি কালার সাপোর্ট করতো তখন ওয়েবের জন্য ২১৬টি নিরাপদ কালার ছিল যা সকল ব্রাউজারে সাপোর্ট করতো।
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
এইচটিএমএল স্ক্রিপ্ট (HTML Scripts)
এইচটিএমএল <script> ট্যাগ
জাভাস্ক্রিপ্ট এর মতো ক্লায়েন্ট সাইড স্ক্রিপ্ট কে সঙ্গায়িত করার জন্য <script> ট্যাগ ব্যবহার করা হয়।
<script> এর উপাদান (এলিমেন্ট) হিসেবে স্ক্রিপ্টিং স্টেটমেন্ট বা বাহিরের একটি স্ক্রিপ্ট ফাইলকে src এট্রিবউট দ্বারা লিঙ্ক করে।
জাভাস্ক্রিপ্ট এর সাধারণ ব্যবহার হচ্ছে ইমেজ (স্টিল ছবি) ব্যবহার কৌশল, ফর্ম যাচাইকরণ, এবং গতিশীল বস্তুর পরিবর্তন।
নিচের স্ক্রিপ্টটি ফলাফল হিসেবে Hello JavaScript! প্রদর্শন করে। এইচটিএমএল ইলিমিন্ট এর ভিতরে id="demo" হিসেবে লেখা হয়।
উদাহরণ
<!DOCTYPE html> <html> <body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script></body> </html>
ফলাফল
Hello JavaScript!
এইচটিএমএল <noscript> ট্যাগ
যদি ব্যবহারকারীর ব্রাউজারে স্ক্রিপ্ট ডিজাবল করা থাকে বা তার ব্রাউজার স্ক্রিপ্ট সমর্থন না করে তাহলে ব্যবহারকারীকে একটি বিকল্প কনটেন্ট প্রদর্শন করার জন্য <noscript> ট্যাগ ব্যবহার করা হয়। শুধুমাত্র ব্রাউজারে স্ক্রিপ্টিং ডিজাবল বা ব্রাউজার স্ক্রিপ্ট সমর্থন না করলেই <noscript> ট্যাগ এর কনটেন্ট প্রদর্শিত হয়।
উদাহরণ
<!DOCTYPE html> <html> <body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script><noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>A browser without support for JavaScript will show the text written inside the noscript element.</p> </body> </html>
ফলাফল:
Hello JavaScript!
A browser without support for JavaScript will show the text written inside the noscript element.
জাভাস্ক্রিপ্ট এর একটি পরীক্ষা (আমাদের জাভাস্ক্রিপ্ট টিওটোরিয়াল থেকে)
জাভাস্ক্রিপ্ট যা করতে পারে তার কিছু উদাহরণ নিচে দেওয়া হল:
JavaScript can change HTML content:
<!DOCTYPE html> <html> <body>
<h1>My First JavaScript</h1>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">This is a demonstration.</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</body>
</html>
ফলাফলঃ
My First JavaScript
JavaScript can change the content of an HTML element:
This is a demonstration.
JavaScript can change HTML styles:
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
ফলাফলঃ
My First JavaScript
JavaScript can change the style of an HTML element.
JavaScript can change HTML attributes
<!DOCTYPE html>
<html>
<body>
<script>
function light(sw) {
var pic;
if (sw == 0) {
pic = "pic_bulboff.gif"
} else {
pic = "pic_bulbon.gif"
}
document.getElementById('myImage').src = pic;
}
</script>
<img id="myImage" src="pic_bulboff.gif" width="100" height="180">
<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>
</body>
</html>
ফলাফলঃ
এইচটিএমএল scripts ট্যাগ
| ট্যাগ | বর্ণনা |
| <script> | client side script কে ডিফাইন করে |
| <noscript> | যদি client-side-script সাপোর্ট না করে তাহলে ইউজারদের জন্য বিকল্প কনটেন্ট ডিফাইন করে থাকে |
HTML Head (এইচটিএমএল হেড)
HTML Head (এইচটিএমএল হেড):
<head>…..</head> ট্যাগ দিয়ে head সেকশন গঠিত। head সেকশনে meta data অর্থাৎ ডকুমেন্ট সম্পর্কিত তথ্য থাকে।এই head সেকশন এ যা কিছু লেখা হয় তা ওয়েব পেইজ এ দেখা যায় না। head সেকশন এ সাধারণত নিম্মের ট্যাগগুলো থাকেঃ
Title, Meta, Link, Base, Style, Script
শিরোনাম ট্যাগ
এই ট্যাগের মাঝে যা লিখা হয় তা Browser এর টাইটেল বারে দেখা যায়। মূলত ওয়েব পেইজ content এর একটি সংক্ষিপ্ত টাইটেল এই ট্যাগের মাঝে লেখা হয়। যেমন আমি যদি ওয়েব পেইজ ডিজাইনের বিভিন্ন এলিমেন্ট নিয়ে একটি ওয়েব পেইজ বানাতে চাই তা হলে টাইটেল নিচের মত হলে ভাল হয়ঃ-
<title>web page design tutorial</title>
মেটা ট্যাগ
এই ট্যাগ ব্যাবহার করা হয় ডকুমেন্ট সম্পর্কিত সকল তথ্য সন্নিবেশ/বর্ণনা করার জন্য।মেটা ডাটা browser, search engine এবং অন্নান্য ওয়েব সারভিস দ্বারা বেবহৃত হয়। সার্চ ইঞ্জিন ইনডেক্সিং এর জন্য এ ট্যাগের গুরুত্ত অপরিসীম।
সার্চ ইঞ্জিনের জন্য keywords নির্ধারণ করাঃ
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
ওয়েব পেজ এর description নির্ধারণ করাঃ
<meta name="description" content="Free Web tutorials on HTML and CSS">
ওয়েব পেজ এর author নির্ধারণ করাঃ
<meta name="author" content="Hege Refsnes">
ওয়েব পেজ এর character set নির্ধারণ করাঃ
<meta charset="UTF-8">
৩০ সেকন্ড পরপর ওয়েব পেজ auto refresh করাঃ
<meta http-equiv="refresh" content="30">
লিঙ্ক ট্যাগ
Link ট্যাগটি দ্বারা একটি পেইজকে অন্য পেইজের সাথে বা এলিমেন্টের সাথে সম্পর্ক ইস্থাপন করা হয়।এই ট্যাগ টি সাধারণত স্টাইল শীট যোগ করার জন্য ব্যাবহার করা হয়।
<link rel="stylesheet" href="mystyle.css">
বেজ ট্যাগ
Base ট্যাগ টি দ্বারা ওয়েব সাইটের সকল লিঙ্ক জন্য এর একটি default অ্যাড্রেস বা default target সেট করিয়ে দেয়া হয়।যেমনঃ-
<base href="http://bangla.salearningschool.com" target="_blank">
যেহেতু আমরা base অ্যাড্রেসের target হিসেবে _blank দিয়েছি সেহেতু এই পেইজের কোন লিঙ্ক এ ক্লিক করলে নতুন একটি ট্যাব এ পেজটি ওপেন হবে।
স্টাইল ট্যাগ (Style Tag)
HTML ডকুমেন্টটিতে কি ধরণের ইস্টাইল ব্যাবহার হবে তা এই style ট্যাগ দ্বারা লেখা হয়। যেমনঃ-
<style>
body {background-color:yellow;}</style>
স্ক্রিপ্ট ট্যাগ (Script Tag)
Script ট্যাগটি Java script লেখার জন্য ব্যাবহার করা হয়। যেমন আমরা ওয়েব পেজ এ Hello JavaScript এই লেখাটুকো দেখাব demo নামক id ব্যাবহার করে।
<script>
function myFunction {document.getElementById("demo").innerHTML = "Hello JavaScript!";}
</script>
এইচটিএমএল ইনট্রিগুলো (HTML Entities)
এইচটিএমএল Entities
কিছু অক্ষর এইচটিএমএল এ সংরক্ষিত করা আছে। যদি আমরা কোন টেক্সট এ ছোট চিহ্ন (<) এবং বড় চিহ্ন (>) ব্যবহার করি ব্রাউজার তাদের ট্যাগ দিয়ে মিক্স করে দিতে পারে।
character entities এইচটিএমএল এ কিছু সংরক্ষিত অক্ষর দেখাতে সাহায্য করে।
character entity গুলো নিচের মতন
&entity_name;
OR
&#entity_number;
যদি আমরা ছোট চিহ্ন ডিসপ্লে করতে চাই তাহলে লিখব < বা <
নাম্বার এর পরিবর্তে নাম ব্যবহার করা বেশি উপকারী কারন এতে নামটা বেশি মনে থাকে। এর একটি অপকারিতা আছে কিছু কিছু ব্রাউজার entity নাম নাও পরতে পারে কিন্তু নাম্বার ঠিক পরতে পারে।
অবিচ্ছিন্ন স্থান (Non breaking space)
একই লাইন এ ফাকা জায়গা তৈরি করার জন্য ব্যবহার করা হয়। মনে রাখতে হবে ব্রাউজার সবসময় এইচটিএমএল পেজ এর অতিরিক্ত ফাকা জায়গা মুছে ফেলে কেবলমাত্র একটি ফাকা জায়গা রাখে। যদি আমি ১০ টি স্পেস দেই ব্রাউজার তার ৯ টাই মুছে ফেলে ১ টি লিখবে। যদি আমরা টেক্সট এ প্রকৃত ফাকা জায়গা পেতে চাই তাহলে ক্যারেক্টার ব্যবহার করতে হবে।
কিছু গুরুত্বপূর্ণ ক্যারেক্টার entities
| ফলাফল | বর্ণনা | নাম | প্রবেশকৃত নাম্বার |
| non-breaking space | |   | |
| < | less than | < | < |
| > | greater than | > | > |
| & | ampersand | & | & |
| ¢ | cent | ¢ | ¢ |
| £ | pound | £ | £ |
| ¥ | yen | ¥ | ¥ |
| € | euro | € | € |
| © | copyright | © | © |
| ® | registered trademark | ® | ® |
কিছু বৈশিষ্ট্যসূচক চিহ্ন
একটি বৈশিষ্ট্যসূচক চিহ্ন “glyph” লেখার বর্ণে যোগ করা হয়েছে। আবার কিছু বৈশিষ্ট্যসূচক চিহ্ন: grave ( ̀) এবং acute ( ́) কে বলা হয় accents (কথা)।
বৈশিষ্ট্যসূচক চিহ্ন বর্ণের উপরে , নিচে, পাশে এবং দুটি লেটার এর মাঝে হতে পারে। আলফানিউমেরিক ক্যারেক্টার এর কম্বিনেশন এ এই বৈশিষ্ট্যসূচক চিহ্নগুলো ব্যবহার করা হয়ে থাকে।
কিছু উদাহরণ নিচে দেওয়া হল
| চিহ্ন | বর্ণ | গঠন | ফলাফল |
| ̀ | a | à | à |
| ́ | a | á | á |
| ̂ | a | â | â |
| ̃ | a | ã | ã |
| ̀ | O | Ò | Ò |
| ́ | O | Ó | Ó |
| ̂ | O | Ô | Ô |
| ̃ | O | Õ | Õ |
এইচটিএমএল প্রতিক (HTML Symbols)
অনেক গানিতিক, প্রযুক্তিগত, মুদ্রার চিহ্ন নরমাল কীবোর্ড এ পাওয়া যায় না। এইচটিএমএল এর entity নাম ব্যবহার করে আমরা এই চিহ্ন গুলো নিয়ে আসতে পারি। যদি কোন entity নাম না থাকে তাহলে আমরা entity নাম্বার ব্যবহার করতে পারি decimal or hexadecimal রেফারেঞ্চ। যদি আমরা এইচটিএমএল পেজ কোন entity নাম বা কোন নাম্বার ব্যবহার করি তাহলে এই character গুলি সঠিক ফরম্যাট এ ডিসপ্লে করবে।
উদাহরণ
<p>I will display €</p> <p>I will display €</p> <p>I will display €</p>
এর ফলাফল পাওয়া যাবে
I will display €
I will display €
I will display €
কিছু গানিতিক চিহ্ন যা এইচটিএমএল সাপোর্ট করে
| Char | নাম্বার | Entity | বর্ণনা |
| ∀ | ∀ | ∀ | FOR ALL |
| ∂ | ∂ | ∂ | PARTIAL DIFFERENTIAL |
| ∃ | ∃ | ∃ | THERE EXISTS |
| ∅ | ∅ | ∅ | EMPTY SETS |
| ∇ | ∇ | ∇ | NABLA |
| ∈ | ∈ | ∈ | ELEMENT OF |
| ∉ | ∉ | ∉ | NOT AN ELEMENT OF |
| ∋ | ∋ | ∋ | CONTAINS AS MEMBER |
| ∏ | ∏ | ∏ | N-ARY PRODUCT |
| ∑ | ∑ | ∑ | N-ARY SUMMATION |
কিছু গ্রীক লেটার যা এইচটিএমএল সাপোর্ট করে
Char | নাম্বার | Entity | বর্ণনা |
| Α | Α | Α | গ্রীক ক্যাপিটাল লেটার আলফা |
| Β | Β | Β | গ্রীক ক্যাপিটাল লেটার বিটা |
| Γ | Γ | Γ | গ্রীক ক্যাপিটাল লেটার গামা |
| Δ | Δ | Δ | গ্রীক ক্যাপিটাল লেটার ডেলটা |
| Ε | Ε | Ε | গ্রীক ক্যাপিটাল লেটার EPSILON |
| Ζ | Ζ | Ζ | গ্রীক ক্যাপিটাল লেটার যেটা |
অন্যান্য আরও অনেক entities যা এইচটিএমএল সাপোর্ট করে
Char | নাম্বার | Entity | বর্ণনা |
| © | © | © | কপিরাইট চিহ্ন |
| ® | ® | ® | নিবন্ধন চিহ্ন |
| € | € | € | EURO চিহ্ন |
| ™ | ™ | ™ | ট্রেডমার্ক |
| ← | ← | ← | বামদিকের নির্দেশ |
| ↑ | ↑ | ↑ | উপরের নির্দেশ |
| → | → | → | ডানদিকের নির্দেশ |
| ↓ | ↓ | ↓ | নিচের দিকের নির্দেশ |
| ♠ | ♠ | ♠ | BLACK SPADE SUIT |
| ♣ | ♣ | ♣ | BLACK CLUB SUIT |
| ♥ | ♥ | ♥ | BLACK HEART SUIT |
| ♦ | ♦ | ♦ | BLACK DIAMOND SUIT |
এইচটিএমএল ইউনিফর্ম রিসোর্স লোকেটর (HTML Uniform Resource Locators)
URL- ইউনিফর্ম রিসোর্স লোকেটর
ওয়েব ব্রাউজার গুলি ওয়েব সার্ভার থেকে url ব্যবহার করার মাধ্যমে কোন পেজ কে গ্রহণ করে থাকে। এইচটিএমএল পেজ এর কোন লিঙ্ক কে ক্লিক করলে <a> ট্যাগ কোন ওয়েব এড্রেস কে নির্দেশ করে। ওয়েব এ কোন ডকুমেন্ট বা পেজ কে খুজে পাওয়ার জন্য URL ব্যবহার করা হয়।
একটি ওয়েব এড্রেস http://bangla.salearningschool.com/about-us.php নিচের নিয়মগুলোকে অনুসরন করে।
scheme://host.domain:port/path/filename
বর্ণনা
Scheme-ইন্টারনেট সার্ভিস এর ধরন কে ডিফাইন করে। (সাধারনভাবে http হয়ে থাকে)
Host-ডোমেইন এর host ডিফাইন করে (http এর ক্ষেত্রে ডিফল্ট হলত www)
Domain-ইন্টারনেট ডোমেইন এর নাম ডিফাইন করে (salearningschool.com)
port-host এর পোর্ট নাম্বার (http হল 80)
path- সার্ভার এর পাথ ডিফাইন করে (site এর প্রধান directory)
filename-ডকুমেন্ট বা ডাটার নাম
সাধারণ URL পরিকল্পনাগুলি
http (HyperText Transfer Protocol)- সাধারনত ওয়েব পেজ এর জন্য ব্যবহার করা হয়।
https (secure HyperText Transfer protocol)-নিরাপদ ওয়েব পেজ এর জন্য ব্যবহার করা হয়।
ftp (File Transfer Protocol)-ফাইল কে আপলোড বা ডাউনলোড করার জন্য
file-কম্পিউটার এর কোন ফাইল
URL এনকোডিং
ASCII character set এর মাধ্যমে URL গুলোকে ইন্টারনেট এ পাঠানো হয়। URL এ সবসময় character থাকে এবং তা ASCII তে পরিবর্তন করতে হয়। URL এনকোডিং নন ASCII characters গুলোকে “%” এ প্রতিস্থাপন করা হয় hexadecimal ডিজিট এর মাধ্যমে। URL এ কোন ফাকা জাইগা থাকে না ফাকা জায়গা গুলো (+) চিহ্ন অথবা %20 দিয়ে পুরন করা হয়।
ASCII এনকোডিং উদাহরণ
এইচটিএমএল ৫ এর ডিফল্ট character set গুলো হল UTF-8
| বর্ণ | Windows-1252 থেকে | UTF-8 থেকে |
| € | %80 | %E2%82%AC |
| £ | %A3 | %C2%A3 |
| © | %A9 | %C2%A9 |
| ® | %AE | %C2%AE |
| À | %C0 | %C3%80 |
| Á | %C1 | %C3%81 |
| Â | %C2 | %C3%82 |
| Ã | %C3 | %C3%83 |
| Ä | %C4 | %C3%84 |
| Å | %C5 | %C3%85 |
এইচটিএমএল ও এক্সএইচটিএমএল (HTML and XHTML)
XHTML কি
XHTML এর পূর্নরুপ হল EXtensible HyperText Markup Language। এটি অবিকল HTML এর মত তবে কিছুটা কঠোর। XHTML সব বড় বড় ব্রাউজারে সাপোর্ট করে।
কেন XHTML ব্যবহার করবো?
HTML কোডিং এ কোন ভুল থাকলেও অনেক সময় বিভিন্ন ব্রাউজ়ারে তা ধরা পড়েনা এবং ব্রাউজারে সুন্দর ভাবেই দেখা যায়। কিন্ত বর্তমানে বাজারে অনেক নতুন ব্রাউজার এসেছে। অনেকেই কম্পিউটার ছাড়াও মোবাইলে সাইট ভিজিট করছে। অনেক মোবাইল ব্রাউজার HTML এর ভুলগুলো সঠিকভাবে দেখাতে পারেনা। XHTML এ যেহেতু কোডিং সঠিকভাবে করতে হয় তাই XHTML ব্যবহার করাই শ্রেয়।
ডকুমেন্ট এর গঠন (Document Structure)
- XHTML DOCTYPE আবশ্যক XHTML কোডিং এর ক্ষেত্রে।
- এর মধ্যে xmlns attribute ও আবশ্যক।
- <html>, <head>, <title>, <body> ও আবশ্যক।
নিম্নে একটি XHTML ডেমো কোড দেয়া হলঃ<
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
some content
</body>
</html>
এক্সএইচটিএমএল এলিমেন্ট XHTML Elements
XHTML elements গুলো সঠিকভাবে বিন্যাস করতে হবে।
ভুলঃ <b><i>This text is bold and italic</b></i>
সঠিকঃ <b><i>This text is bold and italic</i></b>
- XHTML elements গুলো অবশ্যই সঠিকভাবে শেষ করতে হবে।
ভুলঃ <p>This is a paragraph
<p>This is another paragraph
সঠিকঃ
<p>This is a paragraph</p>
<p>This is another paragraph</p>
- XHTML elements গুলো lowercase বা ছোটহাতের হতে হবে।
ভুলঃ
<BODY>
<P>This is a paragraph</P>
</BODY>
সঠিকঃ
<body>
<p>This is a paragraph</p>
</body>
- XHTML documents এর অন্তত একটা root element থাকতে হবে।
এক্সএইচটিএমএল এট্রিবিউট XHTML Attributes
- Attribute names গুলো lowercase বা ছোটহাতের হতে হবে।
ভুলঃ <table WIDTH="100%">
সঠিকঃ <table width="100%">
- Attribute values গুলোও quoted করা থাকতে হবে।
ভুলঃ <table width=100%>
সঠিকঃ <table width="100%">
- Attribute সংক্ষিপ্ত করা যাবেনা।
ভুলঃ
<input type="checkbox" name="vehicle" value="car" checked />
<input type="text" name="lastname" disabled />
সঠিকঃ
<input type="checkbox" name="vehicle" value="car" checked="checked" />
<input type="text" name="lastname" disabled="disabled" />
কিভাবে HTML থেকে XHTML রুপান্তর করবো?
১। প্রতিটি পেজ এর প্রথম লাইনে XHTML <!DOCTYPE> যুক্ত করতে হবে।
২। প্রতিটি পেজ এর HTML elements এর মধ্যে xmlns attribute যুক্ত করতে হবে।
৩। প্রতিটি elements গুলো lowercase বা ছোটহাতের করতে হবে।
৪। প্রতিটি elements সঠিকভাবে বন্ধ করতে হবে।
৫। Attribute names গুলো lowercase বা ছোটহাতের করতে হবে।
৬। attribute values গুলো সঠিকভাবে Quote করতে হবে।