Tag Archives: এইচটিএমএল
অ্যাপ এমএল স্থাপত্য (AppML Architecture)
নাজমুল ইসলাম
আধুনিক ওয়েব স্থাপত্য
AppML সমসাময়িক কৌশল এবং আধুনিক ওয়েব ডেভেলপমেন্ট এর ধারনাকে একত্রিত করে।
AppML গতি, সরলতা, এবং কম খরচে উপর নজর দেয়:
- সেবামূলক MVC আর্কিটেকচার
- অত্যন্ত কম ব্যান্ডউইথ খরচ
- ক্লাউড কম্পিউটিং জন্য অনুকূল
- উপস্থাপনা বা প্রেজেন্টেশন থেকে কন্টেন্টসময়হ সম্পূর্ণ আলাদা করা
- ইন্টেলিজেন্ট ঘোষণামূলক প্রোগ্রামিং
- দ্রুত এবং তৎপর ওয়েব ডেভেলপমেন্ট
- উচ্চ আকার পরিবর্তনযোগ্য এবং পরীক্ষাসক্ষম
- কনফিগারেশন এবং পুনরায় কনফিগার করা সহজ
- ব্যবহারকারীর অ্যাকাউন্ট এবং কর্মের জন্য নিপুণ সহায়তা
MVC আর্কিটেকচার
AppML এ MVC আর্কিটেকচার ব্যবহার
MVC বলতে বোঝায় মডেল, ভিউ, কন্ট্রোলার
- মডেল আপনার অ্যাপ্লিকেশন সম্পর্কে বর্ণনা দেয়
- ভিউ আপনার ডাটা প্রদশন করে
- কন্ট্রোলার আপনার অ্যাপ্লিকেশনকে নিয়ন্ত্রণ করে
উইকিপিডিয়া: মডেল, ভিউ, কন্ট্রোলার
মডেল - কেবল JSON
মডেল অ্যাপ্লিকেশনকে বর্ণনা করে
মডেল বিভিন্ন হার্ডওয়্যার এবং সফটওয়্যার প্ল্যাটফর্ম এ পুনরায় ব্যবহার করা যায় (সার্ভার, পিসি, আইফোন, ট্যাবলেট, ইত্যাদি)
মডেল উপস্থাপনা বা ইউজার ইন্টারফেস (UI) এর সাথে সংশ্লিষ্ট নয়।
মডেল JSON এর মধ্যে লিখিত হয়:
Model
{ "rowsperpage" : 10, "database" : { "connection" : "localmysql", "sql" : "SELECT CustomerName, City, Country FROM Customers", "orderby" : "CustomerName" }, "filteritems" : [ {"item" : "CustomerName", "label" : "Customer"}, {"item" : "City"}, {"item" : "Country"} ], "sortitems" : [ {"item" : "CustomerName", "label" : "Customer"}, {"item" : "City"}, {"item" : "Country"} ] }
ভিউ - কেবল এইচটিএমএল
ভিউ হচ্ছে ডাটা (এবং ইনপুট) দেখানোর জন্য ইউজার ইন্টারফেস (UI)
ভিউ HTML এবং CSS এ লেখা হয়:
এইচটিএমএল ভিউ
<!DOCTYPE html> <html lang="en-US"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="http://www.w3schools.com/appml/2.0.3/appml.js"></script> <body> <div class="container" appml-data="local?model=model_customers"> <h1>Customers</h1> <div appml-include-html="inc_listcommands.htm"></div> <div appml-include-html="inc_filter.htm"></div> <table class="table table-striped table-bordered"> <tr> <th>Customer</th> <th>City</th> <th>Country</th> </tr> <tr appml-repeat="records"> <td>{{CustomerName}}</td> <td>{{City}} </td> <td>{{Country}} </td> </tr> </table> </div> </body> </html>
নিয়ামক (কন্ট্রোলার) - ক্লায়েন্ট এবং / অথবা সার্ভার স্ক্রিপ্ট
একটি ক্লায়েন্ট স্ক্রিপ্ট হচ্ছে একটি ওয়েভ পেজ যা অ্যাপ্লিকেশনকে নিয়ন্ত্রণ করতে পারে।
- অ্যাপ এমএল মেথড এ সঙ্গায়িত ডাটা প্রদর্শন করতে পারে
- অ্যাপ এমএল এইচটিএমএল অ্যাট্রিবিউট এ সঙ্গায়িত ডাটা প্রদর্শন করতে পারে
- অ্যাপ এমএল অ্যাপ্লিকেশন এইচটিএমএল এ কারো সহায়তা ছাড়াই চালু হতে পারে (লুকানো ভাবে)
- (ঐচ্ছিক) অ্যাপ এমএল ওয়েব সার্ভার থেকে মডেল ডাটার জন্য অনুরোধ করতে পারে (এসকিউএল সার্ভার)।
- (ঐচ্ছিক) অ্যাপ এমএল ব্যবহারকারীরা ডাটা সম্পাদনা বা পরিবর্তন করতে পারে।
- (ঐচ্ছিক) অ্যাপ এমএল ওয়েব সার্ভারে ডাটা প্রদান করতে পারে।
সার্ভার স্ক্রিপ্ট অ্যাপ্লিকেশনকে নিন্মক্তভাবে নিয়ন্ত্রণ করতে পারে :
- গ্রাহকের (ব্রাউজার) কাছ থেকে অনুরোধ গ্রহণ করে
- গ্রাহককে ডাটা ফেরত দিয়ে
- গ্রাহকের কাছ থেকে ডাটা গ্রহণ করে
- সার্ভার এর ডাটা আপডেট করে
- অনুমোদন ও নিরাপত্তা তদারকী করে
প্রোগ্রামিং এর শিল্প
আবেদন আকার এবং কম জটিলতা রাখা, সকল প্রোগ্রামিং এর প্রধান সমস্যা।
কম্পিউটার অ্যাপ্লিকেশন এর জটিলতা নিয়ন্ত্রণ, প্রোগ্রামিং এর সঠিক কৌশল।
ঘোষণামূলক প্রোগ্রামিং
সফটওয়্যার উন্নয়ন প্রায়শই সময়সীমা এবং বাজেটের জন্য ক্ষতিগ্রস্থ হয়। সম্পন্ন সফটওয়্যার এ প্রায়ই প্রচুর কোডিং সমস্যা থাকে। এর কারণ হচ্ছে কোড উন্নয়ন, পরীক্ষা করা এবং পরিচালনা করা কঠিন।
কোডিং এর ক্ষেত্রে আপনাকে কিভাবে করতে হবে থেকে কি করতে হবে তা বর্ণনা করার উপর বেশি গুরুত্ব দিতে হবে।
অ্যাপ এমএল এ মডেল এবং ভিউ এ আপনার অ্যাপ্লিকেশন ঘোষণা করতে হবে।
অ্যাপ এমএল এ খুব কমই (অনেক সময় কিছুই নয়) কোডিং করতে হয়।
উইকিপিডিয়া: ঘোষণামূলক প্রোগ্রামিং
দ্রুত এবং তৎপর এপ্লিকেশন উন্নয়ন (ডেভেলপমেন্ট)
কম্পিউটার অ্যাপ্লিকেশন এর জটিলতা নিয়ন্ত্রণ, প্রোগ্রামিং এর সঠিক কৌশল।
আবেদন আকার এবং কম জটিলতা রাখা, সকল প্রোগ্রামিং এর প্রধান সমস্যা।
RAD হচ্ছে একটি সফটওয়্যার ডেভেলপমেন্ট মেথড যা দ্রুত প্রোটোটাইপিং এর উদ্দেশ্যে নুন্যতম পরিকল্পনা ব্যবহার করে।
অ্যাপ এমএল অতিদ্রুত প্রোটোটাইপিং সরবরাহ করে, ঐতিহ্যগত উন্নয়ন পদ্ধতির তুলনায় ১০০ গুণ দ্রুত।
অ্যাপ্লিকেশন প্রোটোটাইপ অ্যাপ্লিকেশন মডেল থেকে কোন কোডিং ছাড়াই সরাসরি চালু হতে পারে।
উইকিপিডিয়া: দ্রুত এপ্লিকেশন ডেভেলপমেন্ট
এজাইল সফটওয়্যার উন্নয়ন (Agile software development) হচ্ছে একটি ধাপে ধাপে উন্নয়নের একটি পদ্ধতি, যেখানে ব্যবহারকারী এবং ডেভেলপারদের প্রত্যেক্ষ সহযোগিতায় সমাধান তৈরি করা হয়।
অ্যাপ এমএল দিয়ে অ্যাপ্লিকেশন ধাপে ধাপে অল্প বৃদ্ধি করে, প্রোটোটাইপ থেকে সম্পন্ন অ্যাপ্লিকেশন লেখা যেতে পারে।
উইকিপিডিয়া: তৎপর সফটওয়্যার ডেভেলপমেন্ট
চলবে (To be continue)
HTML5 Quiz Test : 01
Your Score:
Your Ranking:
অ্যাপ এম এলঃ এইচটিএমএল অন্তর্ভুক্ত করা (AppML HTML Includes)
রিদওয়ান বিন শামীম
এইচটিএমএলের ভেতর এইচটিএমএল অন্তর্ভুক্ত করা
এইচটিএমএল পেজের সর্বত্র একটি আদর্শ এইচটিএমএল ফুটার (HTML footer) অন্তর্ভুক্ত করা হতে পারে এর আদর্শ উদাহরণ।
আদর্শ এইচটিএমএল ফুটারসমৃদ্ধ ফাইলের উদাহরণ নিচে দেয়া হল,
inc_footer.htm
<hr style="margin-top:10px;"> <p style="font-size:11px">2015© W3Schools. All rights reserved.</p> <hr>
এখানে "inc_footer.htm" অন্তর্ভুক্তির জন্য appml-include-html এট্রিবিউট ব্যবহৃত হয়েছে।
উদাহরণঃ
<!DOCTYPE html> <html lang="en-US"> <title>Customers</title> <link rel="stylesheet" href="style.css"> <script src="http://www.w3schools.com/appml/2.0.3/appml.js"></script> <body> <h1>Customers</h1> <table appml-data="customers.js"> <tr> <th>Customer</th> <th>City</th> <th>Country</th> </tr> <tr appml-repeat="records"> <td>{{CustomerName}}</td> <td>{{City}}</td> <td>{{Country}}</td> </tr> </table> <div appml-include-html="inc_footer.htm"></div> </body> </html>
এইচটিএমএল(5) স্টাইল গাইড এবং কোডিং কনভেনশন HTML(5) Style Guide and Coding Conventions
শরিফুল ইসলাম
Job category-Php Coder
এইচটিএমএল কোডিং এর নিয়ম
ওয়েব ডেভেলপাররা এইচটিএমএল এ কোডিং স্টাইল এবং syntax ব্যবহারের ক্ষেত্রে প্রায়ই দ্বিধান্বিত থাকেন।
২০০০ থেকে ২০১০ সালের মধ্যে অনেক ওয়েব ডেভেলপার এইচটিএমএলকে এক্সএইচটিএমএল এ রূপান্তরিত করে।
এক্সএইচটিএমএল দিয়ে ডেভেলপাররা সঠিক এবং সুন্দরভাবে কোডিং লিখতে বাধ্য হয়।
যখন এইচটিএমএল ৫ কোড ভ্যালিডেশন (বৈধ্যতা) নিয়ে আসে তখন এটি আরও সাবলিল হয়।
HTML5 দিয়ে, আপনি আপনার নিজেকে তৈরি করতে পারবেন শ্রেষ্ঠ অনুশীলন, স্টাইল গাইড এবং কোডিং কনভেনশন দ্বারা।
স্মার্ট এবং ভবিষ্যত প্রমান
এইচটিএমএল এ গঠনগত ভাবে কোডিং করলে তা অন্যদের জন্য বুজতে অনেক সহজ হয়।
ভবিষ্যতে এক্সএমএল রিডার এর মত প্রোগ্রাম আপনার এইচটিএমএল পরতে চাইতে পারে।
স্টাইল এ দক্ষতা আনতে হলে স্মার্ট, পরিপাটি, পরিষ্কার, এবং সুগঠিত হতে হবে।
সঠিক ডকুমেন্ট টাইপ
ডকুমেন্ট এর প্রথমে doctype লিখতে হবে
<!DOCTYPE html>
যদি ছোট হাতের অক্ষরে আমরা লিখি
<!DOCTYPE html>
ছোট হাতের এলিমেন্ট (উপাদান) এর নাম লিখতে হবে
উপাদানের নামের ক্ষেত্রে এইচটিএমএল ৫ একসাথে ছোট এবং বড় হাতের লেখাকে গ্রহন করে।
আমরা সবসময় সুপারিশ করি উপাদানের নাম ছোট হাতের অক্ষরে লেখার জন্য।
- একসাথে ছোট এবং বড় হাতের অক্ষর মিলে লেখা ভাল নয়।
- ডেভেলপারদের ছোট হাতের অক্ষরে লিখতে হবে (এক্সএইচটিএমএল হিসাবে)
- ছোট হাতের অক্ষরে লেখা পরিচ্ছন্ন দেখায়
- ছোট হাতের অক্ষরে লেখা সহজ।
খারাপ অনুশীলন
<SECTION> <p>This is a paragraph.</p> </SECTION>
আরও বেশি খারাপ অনুশীলন
<Section> <p>This is a paragraph.</p> </SECTION>
সঠিক অনুশীলন
<section> <p>This is a paragraph.</p> </section>
সকল এলিমেন্ট (উপাদান) এর সমাপনি বন্ধনী
এইচটিএমএল ৫ এ, সকল এলিমেন্ট এর বন্ধনী সমাপ্ত করার প্রয়োজন নেই। (উদাহরণ <p> এলিমেন্ট)
আমরা সবসময় বলি সকল ট্যাগ বা উপাদানকে সমাপ্ত করার জন্য।
খারাপ অনুশীলন
<section> <p>This is a paragraph. <p>This is a paragraph. </section>
সঠিক অনুশীলন
<section> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </section>
এইচটিএমএল এর ফাকা উপদানগুলোর ট্যাগ সমাপ্ত করা
এইচটিএমএল ৫ এ এই বিষয়টি অপশনাল
এটি গ্রহণযোগ্য
<meta charset="utf-8">
অথবা
<meta charset="utf-8" />
এক্সএইচটিএমএল এবং এক্সএমএল এ স্লাশ চিহ্ন (/) দরকার পরে।
যদি আপনি এক্সএমএল সফটওয়্যারকে পেজ অ্যাক্সেস করার অনুমতি দেন তাহলে, এই চিহ্নকে রেখে দেওয়ােই ভাল।
Attribute এর নাম ছোট হাতের হতে হবে
Attribute নামের ক্ষেত্রে এইচটিএমএল ৫ একসাথে ছোট এবং বড় হাতের লেখাকে গ্রহণ করে।
আমরা সবসময় এর নাম ছোট হাতের অক্ষরে লেখার জন্য সুপারিশ করি ।
- একসাথে ছোট এবং বড় হাতের অক্ষর মিলে লেখা ভাল নয়।
- ডেভেলপারদের ছোট হাতের অক্ষরে লিখতে হবে (এক্সএইচটিএমএল হিসাবে)
- ছোট হাতের অক্ষরে লেখা পরিচ্ছন্ন দেখায়
- ছোট হাতের অক্ষরে লেখা সহজ।
ভাল দেখায় না
<div CLASS="menu">
ভাল দেখায়
<div class="menu">
উদ্ধৃতি অ্যাট্রিবিউট মান
কোটেশন চিহ্ন ছাড়া attribute এর ভ্যালুকে লেখা এইচটিএমএল ৫ সাপোর্ট করে।
আমরা সবসময় সুপারিশ করি
- যদি ভ্যালুতে ফাকা স্থান থাকে তাহলে উদ্ধৃতি চিহ্ন ব্যবহার করতে হবে
- ভিন্ন ভিন্ন স্টাইল মিসিয়ে লেখা কখনই ভাল নয়
- কোটেশন দেয়া মান পড়া সহজ ।
নিচের কোডটি কাজ করবে না কারন ফাকা স্থান আছে :
<table class=table striped>
এটি কাজ করবে
<table class="table striped">
ইমেজ এট্রিবিউট
সবসময় ইমেজ এর সাথে alt attribute ব্যবহার করতে হবে। কারন যখন ছবি লোড না হবে তখন খুব প্রয়োজনীয়।
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
ইমেজ সাইজ নির্ধারণ করে দেওয়া উচিত কারন ব্রাউজার ইমেজ লোড হওয়ার পূর্বে তার জন্য জায়গা ফাকা রাখে
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Spaces এবং equal চিহ্ন
ফাকা জায়গা বেশি হলে কোন সমস্যা নেই
<link rel = "stylesheet" href = "styles.css">
কিন্তু ফাকা কম হলে তা পরতে সহজ এবং সুবিধার হয়
<link rel="stylesheet" href="styles.css">
লম্বা কোড লাইন এড়িয়ে চলুন
যখন এইচটিএমএল এডিটর ব্যবহার করা হয় তখন বাম পাস থেকে ডান পাশে স্ক্রল করা এক ধরনের বিরক্তিকর। এইজন্য ৮০ টি ক্যারেক্টার এর লাইন এ লিখতে হবে।
ফাকা line এবং Indentation
কোন কারন ছাড়া ফাকা লাইন করা উচিত নয়।
বড় বড় কোড এর জন্য তা ব্যবহার করা যাবে।
Indentation এর ক্ষেত্রে ট্যাব এর পরিবর্তে ২ টি স্পেস ব্যবহার করতে হবে।
কোন কারন ছাড়া ফাকা জায়গা এবং Indentation ব্যবহার করা উচিত নয়।
প্রয়োজনীয় নেই
<body> <h1>Famous Cities</h1> <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. It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family. </p> </body>
ভাল
<body> <h1>Famous Cities</h1> <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. It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.</p> </body>
টেবিল এর উদাহরণ
<table> <tr> <th>Name</th> <th>Description</th> </tr> <tr> <td>A</td> <td>Description of A</td> </tr> <tr> <td>B</td> <td>Description of B</td> </tr> </table>
লিস্ট এর উদাহরণ
<ol> <li>London</li> <li>Paris</li> <li>Tokyo</li> </ol>
<html> এবং body ট্যাগ বাদ দেওয়া
এইচটিএমএল ৫ এ <html>এবং <body> ট্যাগ বাদ দেওয়া হয়েছে
এইচটিএমএল ৫ এর ক্ষেত্রে উদাহরণ
<!DOCTYPE html> <head> <title>Page Title</title> </head> <h1>This is a heading</h1> <p>This is a paragraph.</p>
আমরা কখনই বলি না <html>এবং <body> ট্যাগ বাদ দেওয়ার জন্য।
<html> হল ডকুমেন্ট এর রুট। পেজ এর ভাষাকে এর মাঝে নির্দিষ্ট করে দিতে হয়।
<!DOCTYPE html> <html lang="en-US">
ল্যাঙ্গুয়েজ ডিক্লায়ার করা এসেম্বিলি অ্যাপলিকেশন (স্ক্রিণ রিডার) এবং সার্চ ইঞ্জিন এর জন্য গুরুত্বপূর্ণ ।
<html>এবং <body> ট্যাগ বাদ দেওয়া DOM এবং এক্সএমএল সফটওয়্যার ক্র্যাশ এর কারণ হতে পারে।
পুরাতন ব্রাউজার (IE9) এরর দেখাতে পারে যদি <body> না ব্যবহার না করা হয়।
<head> ট্যাগ কি বাদ দেওয়া
এইচটিএমএল ৫ এর ক্ষেত্রে এটি ঠিক আছে।
ডিফল্ট ভাবে ব্রাউজার বডি সেকশন এর পূর্বে সকল উপাদান যোগ করে হেড সেকশন এর মধ্যে । সুতরাং <head> ট্যাগ কে বাদ দেওয়া যেতে পারে।
উদাহরণ
<!DOCTYPE html> <html> <title>Page Title</title> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
Meta data
এইচটিএমএল ৫ এ <title> এলিমেন্ট অত্যাবশ্যকীয়। টাইটেলকে যথাসম্ভব অর্থবহ করুন।
<title>HTML5 Syntax and Coding Style</title>
সঠিকভাবে search engine এ ইনডেক্স করার ক্ষেত্রে ডকুমেন্ট এর মধ্যে ভাষা এবং ক্যারেক্টার encode কে ডিফাইন করে দিতে হবে
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>HTML5 Syntax and Coding Style</title> </head>
এইচটিএমএল কমেন্ট
ছোট কমেন্ট এক লাইনে লেকা যেতে পারে। <!--এই খানে লিখতে হবে-->
<!-- This is a comment -->
অনেক বড় কমেন্ট হলে আলাদা আলাদা লাইন এ লিখতে হবে।
<!-- This is a long comment example. This is a long comment example. This is a long comment example. This is a long comment example. This is a long comment example. This is a long comment example. -->
লম্বা কমেন্ট একাধিক লাইনে ভেঙ্গে লিখলে বুঝতে সুবিধা হয়।
স্টাইল শিট
Style শিট লিঙ্ক করার ক্ষেত্রে সাধারন syntax ব্যবহার করুন
<link rel="stylesheet" href="styles.css">
ছোট নিয়ম এক লাইন এ লিখতে হবে
p.into {font-family:"Verdana"; font-size:16em;}
বড় নিয়ম কয়েকটি লাইন এ লিখতে হবে
body { background-color: lightgrey; font-family: "Arial Black", Helvetica, sans-serif; font-size: 16em; color: black; }
- ব্রাকেট এর শুরুর আগে একটা স্পেস ব্যবহার করতে হবে,
- indentation এ দুইটি স্পেস ব্যবহার করতে হবে,
- প্রপার্টি এবং এর ভ্যালুর মাঝে কোলন এর পাশাপাশি একটি স্পেস ব্যবহার করতে হবে,
- কমা এবং সেমিকোলন এর পরে একটা স্পেস ব্যবহার করতে হবে,
- প্রত্যেক জোড়া প্রপার্টি ভ্যালু এর পরে সেমিকোলন ব্যবহার করতে হবে,
- কোটেশন ব্যবহার করতে হবে যদি ভ্যালু এর মাঝে একটা স্পেস থাকে,
- ৮০ ক্যারেক্টার এর উপরে কোন লাইনে রাখা যাবে না।
যেকোনো ধরনের লেখার ক্ষেত্রে স্পেস এর পরে কমা বা সেমিকোলন যুক্ত করা সাধারন নিয়ম।
এইচটিএমএল এর মধ্যে javascript লোড করা
সাধারন syntax ব্যবহার করে external javascript লোড করা যায়। এর জন্য কোন attribute এর দরকার পরে না।
<script src="myscript.js">
Javascript দিয়ে এইচটিএমএল কে অ্যাক্সেস করা
যদি এইচটিএমএল স্টাইল যদি পরিপাটি না হয় তাহলে javascript এ এরর আসতে পারে। এই দুইটি statement দুই ধরনের ফলাফল দেখাবে
var obj = getElementById("Demo")
var obj = getElementById("demo")
যদি সম্ভব হয় এইচটিএমএল এর উপাদানের সাথে javascript যোগ করার পর উপাদানের একই নাম ব্যবহার করতে হবে।
ফাইল এর নামের ক্ষেত্রে ছোট হাতের অক্ষর ব্যবহার
ফাইল এর নাম করনের ক্ষেত্রে অনেক ওয়েব সার্ভার কেস এর ব্যাপারে সক্রিয় (apache , unix)
london.jpg কখনই London.jpg নামে অ্যাক্সেস হবে না
অন্যান্য ওয়েব সার্ভার যেমন (Microsoft, IIS) খুব বেশি সক্রিয় না
London.jpg কে London.jpg বা london.jpg নামে অ্যাক্সেস করা যাবে।
যদি আপনি বড় ছোট হাতের অক্ষর একসাথে ব্যবহার করেন তাহলে অত্যন্ত সামঞ্জস্যপূর্ণ হতে হবে।
যদি আপনি সংবেদনশীল নয় এমন একটি সার্ভার থেকে সংবেদনশীল এমন একটি সার্ভার এ যান তাহলে ছোট ছোট এরর আপনার ওয়েব পেজকে নষ্ট করে দিতে পারে।
এই সকল সমস্যা থেকে প্রতিকারের জন্য ছোট হাতের অক্ষর ব্যবহার করতে হবে।
File extensions
এইচটিএমএল ফাইল এর এক্সটেনশন হল .html ( বা .htm)
সিএসএস ফাইল এর এক্সটেনশন হল .css
Javascript ফাইল এর এক্সটেনশন হল .js
এইচটিএমএল ৫ ব্রাউজার সাপোর্ট (HTML5 Browser Support)
শরিফুল ইসলাম
Job category-Php Coder
এইচটিএমএল ৫ ব্রাউজার সাপোর্ট
এইচটিএমএল ৫ সকল আধুনিক ব্রাউজার সাপোর্ট করে। সকল নতুন এবং পুরাতন ব্রাউজার অটোমেটিক ভাবে অচেনা elements গুলোকে ইনলাইন element হিসেবে চিহ্নিত করে। এই কারনে আপনি অচেনা element গুলোকে চিহ্নিত নিয়ন্ত্রণ করার জন্য পুরাতন ব্রাউজার গুলো শিখতে পারেন। আপনি অনেক আগের ভার্সন IE6(windows XP 2001) শিখতে পারেন যা এইচটিএমএল এর অজানা element গুলোকে নিয়ন্ত্রণ করতে পারে।
এইচটিএমএল ৫ element গুলোকে ব্লক element হিসেবে ডিফাইন করা
এইচটিএমএল৫ ৮টি নতুন element কে ডিফাইন করে থাকে। সবগুলোই ব্লক লেভেল elements। পুরাতন ব্রাউজার গুলোকে সঠিক ফরম্যাট এ ব্যবহার করার জন্য সিএসএস এর ডিসপ্লে প্রপার্টি কে ব্লক আকারে সেট করতে হয়।
উদাহরণ
Example
header, section, footer, aside, nav, main, article, figure {
display: block;
}
নতুন element এইচটিএমএল এ যোগ করা
ব্রাউজার এর কৌশল অনুযায়ী এইচটিএমএল এর যেকোনো নতুন element কে যোগ করতে পারেন । নিচের উদাহরণ এ একটি নতুন element <myHero> যোগ করা হয়েছে
<!DOCTYPE html> <html lang="en"> <head> <title>HTML5 Skeleton</title> <meta charset="utf-8"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <style> body {font-family: Verdana, sans-serif; font-size:0.8em;} header,nav, section,article,footer {border:1px solid grey; margin:5px; padding:8px;} nav ul {margin:0; padding:0;} nav ul li {display:inline; margin:5px;} </style> </head> <body> <header> <h1>HTML5 SKeleton</h1> </header> <nav> <ul> <li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li> <li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li> <li><a href="html5_canvas.asp">HTML5 Graphics</a></li> </ul> </nav> <section> <h1>Famous Cities</h1> <article> <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> </article> <article> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </article> <article> <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> </article> </section> <footer> <p>© 2014 W3Schools. All rights reserved.</p> </footer> </body> </html>
এইচটিএমএল ইনপুট বৈশিষ্ট্যাবলী (HTML Input Attributes)
শরিফুল ইসলাম
Job category-Php Coder
ভ্যালু attribute
ফর্ম এর শুরুতে ইনপুট ফিল্ড এর জন্য একটি প্রাথমিক ভ্যালু সেট করার জন্য value attribute ব্যবহার করা হয়
উদাহরণ
<form action=""> First name:<br> <input type="text" name="firstname" value="John"> <br> Last name:<br> <input type="text" name="lastname"> </form>
ফলাফল
কেবল পঠনযোগ্য অ্যাট্রিবিউট (Readonly attribute)
ইনপুট ফিল্ডের ভ্যালু শুধু পরতে পারবে কিন্তু কোন প্রকার পরিবর্তন করতে পারবে না এই readonly attribute দ্বারা
উদাহরণ
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
এই attribute এর জন্য কোন মান লাগবে না শুধু লিখতে হবে readonly=”readonly”
ফলাফল
নিষ্ক্রিয়করণ অ্যাট্রিবিউট (Disabled attribute)
ইনপুট ফিল্ডের কোন ডাটা এডিট করা যাবে না,বাবহার করা যাবে না, ক্লিক করা যাবে না এবং সাবমিট করা যাবে না এই রকম disable করে রাখার জন্য এই disable attribute ব্যবহার করা হয়
উদাহরণ
<form action=""> First name:<br> <input type="text" name="firstname" value="John" disabled> <br> Last name:<br> <input type="text" name="lastname"> </form>
এই attribute এর কোন মানের দরকার পরে না (disabled=”disabled”)
ফলাফল
আকার অ্যাট্রিবিউট (Size attribute)
ইনপুট ফিল্ডের এর character এর আকার size attribute দ্বারা করা হয়
উদাহরণ
<form action=""> First name:<br> <input type="text" name="firstname" value="John" size="40"> <br> Last name:<br> <input type="text" name="lastname"> </form>
ফলাফল
সর্বচ্চোআকার অ্যাট্রিবিউট (Maxlength attribute)
ম্যাক্সিমাম কতটি ক্যারেক্টার হতে পারে এর জন্য আমরা maxlength attribute ব্যবহার করব।
উদাহরণ
<form action=""> First name:<br> <input type="text" name="firstname" maxlength="10"> <br> Last name:<br> <input type="text" name="lastname"> </form>
ফলাফল
Maxlength দ্বারা নির্দিষ্ট character এর বেশি কোন ওয়ার্ড সাপোর্ট করে না। এই attribute কোন ফিডব্যাক প্রদান করে না। যদি ইউজার কে আমরা alert করতে চাই তাহলে আমাদের javascript বাবকার করতে হবে
ইনপুট নিষেধাজ্ঞা অব্যর্থ হয় না। javascript এর মাধ্যমে অবৈধ ভাবে ইনপুট করার অনেক উপায় আছে। নিরাপত্তার জন্য নিষেধাজ্ঞার পাশাপাশি রিসিভার (সার্ভার) দ্বারা চেক করা আবশ্যক.
এইচটিএমএল ৫ এর attribute গুলো
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- pattern (regexp)
- placeholder
- required
- step
এবং ফর্ম এর জন্য
- Autocomplete
- Novalidate
স্বয়ংকৃয়ভাবে সম্পূর্ণ বৈশিষ্ট্য (Autocomplete attribute)
কোন ইনপুট ফিল্ড আপনা থেকেই পরিপূর্ণ করবে কিনা এর জন্য autocomplete অন বা অফ ব্যবহার করা হয়। যদি তা অন করা থাকে তাহলে ব্রাউজার ইনপুট ফিল্ডের কোন ভ্যালু insert করার আগে আগেই অটোমেটিক পুরণ হয়ে যাবে যদি আগে এই ভ্যালুটি ইনপুট করা হয়ে থাকে। ফর্মের এর ক্ষেত্রে autocomplete অন রাখা সম্ভব নির্দিষ্ট কিছু ইনপুট ফিল্ডের এর জন্য তা অফ করে রাখা যাবে। autocomplete attribute ফর্মের এর ক্ষেত্রে কাজ করে এবং ইনপুট ফিল্ড এর ভিন্ন ভিন্ন ধরন যেমন text, search, url, tel, email, password, date picker, range, এবং color এই সব ক্ষেত্রে কাজ করে।
উদাহরণ
<form action="action_page.php" autocomplete="on"> First name:<input type="text" name="fname">
Last name: <input type="text" name="lname">
E-mail: <input type="email" name="email" autocomplete="off">
<input type="submit"> </form>
কিছু কিছু ব্রাউজার এর ক্ষেত্রে কাজের জন্য autocomplete ফাংশন চালু করা লাগতে পারে।
ফলাফল
Novalidate attribute
ফর্ম ডাটা সাবমিট করার পর এটাকে অবৈধ ঘোষণা করার জন্য এই attribute ব্যবহার করা হয়
উদাহরণ
<form action="action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
ফলাফল
অটোফোকাস বৈশিষ্ট্য (Autofocus attribute)
কোন ইনপুট ফিল্ড পেজ লোড হওয়ার সাথে সাথে ওই ঘরে কার্সর আনার জন্য এই attribute ব্যবহার করা হয়
উদাহরণ
First name:<input type="text" name="fname" autofocus>
ফলাফল
এইখানে firstname এর ঘরে কার্সর দেখা যাবে।
ফর্ম attribute
একাধিক ফর্মের input ফিল্ড কে একটি কমন ফর্ম এর ID দিয়ে চিহ্নিত করার জন্য এই attribute ব্যবহার করা হয়
উদাহরণ
যদিও ফর্ম এর বাইরে একটি ইনপুট ফিল্ড ব্যবহার করা হচ্ছে কিন্তু তারপরও এটি ফর্মের একটি অংশ
<form action="action_page.php" id="form1"> First name: <input type="text" name="fname">
<input type="submit" value="Submit"> </form>
Last name: <input type="text" name="lname" form="form1">
ফলাফল
The "Last name" field below is outside the form element, but still part of the form.
Last name:
Formaction attribute
Form action attribute একটি ফর্ম এর ফাইল এর URL চিহ্ন করে যেখানে যেয়ে ইনপুট ডাটা সাবমিট হবে। এই attribute দুটি টাইপ এ ব্যবহার করা হয় type=”submit”, type=”image”
উদাহরণ
ভিন্ন ভিন্ন action এ দুইটি বাটন দ্বারা দেখানো হল
<form action="action_page.php">
First name: <input type="text" name="fname">
Last name: <input type="text" name="lname">
<input type="submit" value="Submit">
<input type="submit" formaction="demo_admin.asp"
value="Submit as admin">
</form>
ফলাফল
Formenctype attribute
যখন সার্ভার এ ফর্ম ডাটা সাবমিট করা হবে তখন তা কিভাবে encode করা হবে এর জন্য আমরা এই attribute ব্যবহার করব পোস্ট মেথড এর ক্ষেত্রে । type=”submit” & type=”image” এই দুই ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।
উদাহরন
প্রথম সাবমিট বাটন ডিফল্ট encoded এবং দ্বিতীয় সাবমিট বাঁটন multipart/form-data হিসেবে encode করা হয়েছে
<form action="demo_post_enctype.asp" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
ফলাফল
Formmethod attribute
ফর্ম ডাটা url এ পাঠানোর ক্ষেত্রে HTTP মেথড বোঝার জন্য এই attribute ব্যবহার করা হয় । type=”submit” & type=”image” এই দুই ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।
উদাহরণ
দ্বিতীয় বাটন টি HTTP এই মেথড এর
<form action="action_page.php" method="get">
First name: <input type="text" name="fname">
Last name: <input type="text" name="lname">
<input type="submit" value="Submit">
<input type="submit" formmethod="post" formaction="demo_post.asp"
value="Submit using POST">
</form>
ফলাফল
Formnovalidate attribute
Input উপাদান কে সাবমিট করার পর তা অবৈধ ঘোষণা করার ক্ষেত্রে এই বুলিয়ান attribute ব্যবহার করা হয়। type=”submit” এই ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।
উদাহরণ
দুইটি সাবমিট বাটন একটি validate ছাড়া অন্যটি validate সহ
<form action="action_page.php">
E-mail: <input type="email" name="userid">
<input type="submit" value="Submit">
<input type="submit" formnovalidate value="Submit without validation">
</form>
ফলাফল
Formtarget attribute
ফর্ম সাবমিট করার পর কোথায় আমরা এর প্রতিক্রিয়া দেখতে চাই তা আমরা এই attribute এর মাধ্যমে করতে পারি। type=”submit” & type=”image” এই দুই ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।
উদাহরণ
ভিন্ন ভিন্ন টার্গেট এর জন্য দুইটি বাটন ব্যবহার করা হল
<form action="action_page.php">
First name: <input type="text" name="fname">
Last name: <input type="text" name="lname">
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form>
ফলাফল
উচ্চতা এবং প্রস্থ অ্যাট্রিবিউট Height and width attribute
ইনপুট ফিল্ডের আকার নির্ধারণ করার জন্য এই attribute ব্যবহার করা হয়। type=”image” ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।
উদাহরণ
Width এবং height সহ একটি ইমেজ যুক্ত বাটন দেখানো হল
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
ফলাফল
তালিকা বৈশিষ্ট্য (List attribute)
<datalist> উপাদান যাতে ইনপুট করার জন্য কিছু pre-defned অপশন থাকবে
উদাহরণ
Pre-defined ভ্যালু সহ একটি ইনপুট ফিল্ড
<input list="browsers">
<datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
ফলাফল
ন্যূনতম, সর্বোচ্চ অ্যাট্রিবিউট (Min, max attribute)
একটি ইনপুট ফিল্ড এর মিনিমাম এবং ম্যাক্সিমাম ডাটা ইনপুট করার ক্ষেত্রে এই attribute গুলো ব্যবহার করা হয় ভিন্ন ভিন্ন ধরনের ইনপুট ব্যবহার করা যায় number, range, date, datetime, datetime-local, month, time এবং week।
উদাহরন
মিনিমাম এবং ম্যাক্সিমাম ভ্যালু সহ একটি উদাহরণ
Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
ফলাফল
একাধিক অ্যাট্রিবিউট (Multiple attribute)
ইনপুট ফিল্ডে একাধিক ডাটা সাবমিট করার ক্ষেত্রে এই বুলিয়ান attribute ব্যবহার করা হয়।দুই ধরনের ইনপুটে কাজ করা যায় ইমেইল, ফাইল।
উদাহরণ
এই ইনপুট ফিল্ড এ অনেকগুলো ইমেজ আপলোড করা যাবে
Select images: <input type="file" name="img" multiple>
ফলাফল
প্যাটার্ন অ্যাট্রিবিউট (Pattern attribute)
Regular expression এই ধরনের ডাটা ইনপুট করার ক্ষেত্রে আমরা এই attribute ব্যবহার করব। এতে ফরম্যাট দেওয়া থাকে সেই অনুপাতে ডাটা ইনপুট দিতে হয়। এই টাইপ গুলো হল text, search, url, tel, email এবং password।
উদাহরণ
এই ইনপুট ফিল্ড এ ৩ টা লেটার ইনপুট করা যাবে যেখানে কোন নাম্বার বা special character থাকবে না
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
ফলাফল
স্থানধারক অ্যাট্রিবিউট (Placeholder attribute)
ইনপুট ফিল্ড এ কোন কিছু ইনপুট করার আগে হালকা ভাবে কোন লেখা ডিসপ্লে করার জন্য এই attribute ব্যবহার করা হয়। এই টাইপ গুলো হল text, search, url, tel, email এবং password।
উদাহরণ
<input type="text" name="fname" placeholder="First name">
ফলাফল
আবশ্যক অ্যাট্রিবিউট (Required attribute)
কোন ইউজার যেন কোন নির্দিষ্ট ইনপুট ফিল্ড ফাকা না রেখে ফর্ম সাবমিট করে সেই জন্য আমরা এই attribute ব্যবহার করব। এই টাইপ গুলো হল text, search, url, tel, email, password, date pickers, numbers, checkbox, radio, file.।
উদাহরণ
Username: <input type="text" name="usrname" required>
ফলাফল
ধাপ অ্যাট্রিবিউট (Step attribute)
ইনপুট ফিল্ড এ লিগাল নাম্বার ইনপুট দেওয়ার ক্ষেত্রে এই attribute টি ব্যবহার করা হয়। যেমন যদি স্টেপ ৩ হয় তাহলে লিগাল নাম্বার গুলো হবে -৩,০,৩,৬
এই attribute যেই ধরনের ইনপুট টাইপ গুলোর ক্ষেত্রে কাজ করতে পারে এইগুলো হল number, range, date, datetime, datetime-local, month, time এবং week.
উদাহরণ
<input type="number" name="points" step="3">
ফলাফল
এইচটিএমএল ইনপুট ধরন (HTML Input Types)
-মাসুদ-
আজকে আমরা জানবো এইচটিএমএল ইনপুট সম্পর্কে।
টেক্সট ইনপুট
সাধারন তথ্য গ্রহণ করতে টেক্সট ইনপুট ব্যবহৃত হয়। এধরনের ইনপুট এক লাইনের হয়ে থাকে।
<form> First name:<br> <input type="text" name="firstname"> <br> Last name:<br> <input type="text" name="lastname"> </form>
উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ
পাসওয়ার্ড ইনপুট
পাসওয়ার্ড গ্রহণের জন্য এ ধরনের ইনপুট ফিল্ড ব্যবহৃত হয়।
<form>
User name:<br>
<input type="text" name="username">
<br>
User password:<br>
<input type="password" name="psw">
</form>
উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ
পাসওয়ার্ড এর ঘরটিতে কোনকিছু লিখলে তা মাস্কিং হয়ে থাকবে অর্থ্যাত লেখাগুলো দেখা যাবেনা।
সাবমিট বাটন
ফরম পূরণ শেষে ফরম সাবমিট করতে সাবমিট বাটন ব্যবহৃত হয়।
যেমনঃ
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Masud">
<br>
Last name:<br>
<input type="text" name="lastname" value="Rana">
<br><br>
<input type="submit" value="Submit">
</form>
উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ
চেকবক্স
চেকবক্স ব্যবহৃত হয় যখন একের অধিক অপশন বাছাই করতে বলা হয়।
<form> <input type="checkbox" name="vehicle" value="Bike">I have a cycle <br> <input type="checkbox" name="vehicle" value="Car">I have a motorcycle </form>
উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ
রেডিও বাটন
রেডিও বাটন ব্যবহৃত হয় যখন একের অধিক অপশন থেকে একটি অপশন বাছাই করতে বলা হয়।লিঙ্গ নির্বাচন করতে রেডিও বাটন ব্যবহৃত হয়। যেমনঃ
<form> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form>
উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ
এইচটিএমএল ফরম (HTML Forms)
আজকে আমরা জানবো এইচটিএমএল ফর্ম কি এবং এর ব্যবহার সম্পর্কে। সাধারনত কোন ব্যাক্তির কাছ থেকে তথ্য গ্রহণ (ইনপুট) করতে এইচটিএমএল ফর্ম ব্যবহৃত হয়। যা <form> --- দ্বারা বোঝানো হয়। যেমনঃ
<form>
.
form elements
.
</form>
এইচটিএমএল ফর্ম এর মধ্যে ফর্ম এলিমেন্ট থাকে। তথ্য ইনপুট দেয়ার জন্য বিভিন্ন ধরনের ফর্ম এলিমেন্ট ব্যবহৃত হতে পারে যেমন চেকবক্স, রেডিও বাটন, সাবমিট বাটন ইত্যাদি।
টেক্সট ইনপুট
সাধারন তথ্য গ্রহণ করতে টেক্সট ইনপুট ব্যবহৃত হয়।
<form> First name:<br> <input type="text" name="firstname"> <br> Last name:<br> <input type="text" name="lastname"> </form>
উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ
নোটঃ ফর্ম নিজে নেজেই প্রদর্শিত হতে পারে না। ডিফল্ট টেক্সট ফিল্ড এর প্রসস্থতা হচ্ছে ২০ বর্ণ ।
চেকবক্স
চেকবক্স ব্যবহৃত হয় যখন একের অধিক অপশন বাছাই করতে বলা হয়।
রেডিও বাটন
<input type="radio"> রেডিও বাটনকে সঙ্গায়িত করে
রেডিও বাটন ব্যবহৃত হয় যখন একের অধিক অপশন থেকে একটি অপশন বাছাই করতে বলা হয়। লিঙ্গ নির্বাচন করতে রেডিও বাটন ব্যবহৃত হয়। যেমনঃ
<form> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form>
উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ
সাবমিট বাটন
ফরম পূরণ শেষে ফরম সাবমিট করতে সাবমিট বাটন ব্যবহৃত হয়।
যেমনঃ
<form action="action_page.php"> First name:<br> <input type="text" name="firstname" value="Masud"> <br> Last name:<br> <input type="text" name="lastname" value="Rana"> <br><br> <input type="submit" value="Submit"> </form>
উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ
আপনি যদি "Submit" বাটন এ ক্লিক করেন তাহলে এই ফর্ম এর ডাটা "action_page.php".পেজ এ পাঠিয়ে দেবে।
একটু লক্ষ্য করলে দেখবো যে উপরের কোডটি লেখার সময় আমরা <form action=”action_page.php”> লিখেছি। এটি লেখা হয়েছে ফরমটা কোথায় সাবমিট হবে তা বুঝিয়ে। এটাকে Attribute বলা হয়।
এইচটিএমএল ফরম উপাদানসমূহ (HTML Form Elements)
শরিফুল ইসলাম
Job category-Php Coder
<input>Element:
ফর্ম element এর মধ্যে সবচেয়ে গুরুত্বপূর্ণ element হল <input> element. এই element টি বিভিন্ন বিষয়ের উপর ভিক্তি করে বিভিন্ন রকম হয়ে থাকে।
<select> Element (drop-down-list):
উদাহরনঃ
<select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>
ফলাফল
<option> element পছন্দ মতন কনটেন্ট সিলেক্ট অপশন থেকে নির্বাচন করার জন্য ব্যবহার করা হয়। তালিকাতে সাধারনত প্রথম অপশন টি সিলেক্ট করা থাকে।
উদাহরণ
<option value="fiat" selected>Fiat</option>
ফলাফল
<textarea> Element
ইনপুট ফিল্ডের অনেকগুলো লাইন লিখার ক্ষেত্রে আমরা <textarea> ব্যবহার করে থাকি।
উদাহরণ
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
ফলাফল
<button> element
কোন বাটন কে ক্লিক করার জন্য আমরা এই element টি ব্যবহার করে থাকি।
উদাহরণ
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
ফলাফল
এইচটিএমএল ৫ <datalist> element
Pre-defined অপশন্স এর তালিকা থেকে ইনপুট এর উপাদান এর জন্য দাতালিস্ত ব্যবহার করা হয়। ইউজার রা pre-defined অপশন্স এর একটি তালিকা দেখতে পাবে ডাটা ইনপুট দেওয়ার জন্য। এই জন্য <datalist> element এর ভিতর ID attribute নিশ্চিতভাবে ডিফাইন করে দিতে হবে।
উদাহরণ
<form action="action_page.php"> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form>
ফলাফল
এইচটিএমএল ৫ <keygen> element
ইউজার রা নিরাপদ ভাবে বৈধতা ঘোষণা করার জন্য এই element ব্যবহার করা হয় । এই element এর মাধ্যমে একজোড়া ফিল্ড তৈরি হয় ফর্ম এর মধ্যে। যখন ফর্ম সাবমিট করা হয় দুই ধরনের key তৈরি হয়। একটি প্রাইভেট এবং পাবলিক। প্রাইভেট key লোকাল ভাবে জমা হয় এবং পাবলিক key সার্ভার এ পাঠানো হয়। client কে certify করার ক্ষেত্রে এই প্রাইভেট key ব্যবহার করা হয় যাতে ভবিষ্যতে এই ইউজার কে অথিনটিকেত করা যায়।
উদাহরণ
<form action="action_page.php">
Username: <input type="text" name="user">
Encryption: <keygen name="security">
<input type="submit">
form>
ফলাফল
এইচটিএমএল ৫ <output> element
কোন ক্যালকুলাসন করার জন্য এবং তার ফলাফল দেখানোর জন্য এই element ব্যবহার করা হয়
উদাহরণ
<form action="action_page.asp" oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0 <input type="range" id="a" name="a" value="50"> 100 + <input type="number" id="b" name="b" value="50"> = <output name="x" for="a b"></output> <br><br> <input type="submit"> </form>
ফলাফল
এইচটিএমএল ফর্ম elements
ট্যাগ | বর্ণনা |
<form> | ইউজার দের ইনপুট দেওয়ার জন্য ফর্ম |
<input> | ইনপুট কে নিয়ন্ত্রণ করার জন্য |
<textarea> | একের অধিক লাইন কে ইনপুট দেওয়ার জন্য |
<lable> | একটি ইনপুট এর লেবেল ডিফাইন করার জন্য |
<fieldset> | একটি ফর্মের মধ্যে গ্রুপ সম্পর্কিত উপাদান ডিফাইন করার জন্য |
<legend> <fieldset> | element এর নাম দেওয়ার জন্য (caption) |
<select> | ড্রপ ডাউন তালিকা ডিফাইন করার জন্য |
<optgroup> | গ্রুপ সম্পর্কিত অপশন ড্রপ ডাউন তালিকা থেকে পাওয়ার জন্য |
<option> | ড্রপ ডাউন লিস্ট থেকে অপশন সিলেক্ট করার জন্য |
<button> | বাটন কে ক্লিক করার ক্ষেত্রে |
<datalist> | pre-defined অপশন্স এর একটি তালিকা যা থেকে ইনপুট কে নিয়ন্ত্রণ করা যাবে। |
<keygen> | ফর্মের একজোড়া key ফিল্ড তৈরি করার জন্য |
<optput> | calculation এর ফলাফল পাওয়ার জন্য। |
এইচটিএমএল ও এক্সএইচটিএমএল (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 করতে হবে।
এইচটিএমএল ইউনিফর্ম রিসোর্স লোকেটর (HTML Uniform Resource Locators)
শরিফুল ইসলাম
Job category-Php Coder
ওয়েব ঠিকানার অন্য নাম হচ্ছে URL
একটি URL লেখার জন্য আমাদের টাইপ করতে হয় শব্দের সাহায্যে (http://bangla.salearningschool.com) বা ইন্টারনেট প্রটোকল এড্রেস (IP) টাইপ করে, যেমন (192.185.24.202)।
প্রায় সবাই এড্রেস বারে ডোমেইন নামকে টাইপ করে থাকে কারন নাম্বার এর থেকে নাম মনে রাখা সহজ।
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 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 Entities)
শরিফুল ইসলাম
Job category-Php Coder
কিছু সংরক্ষিত অক্ষর অবশ্যই character 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 Head (এইচটিএমএল হেড)
Atik Hasan
Webpage design & developer
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 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 Color Values
নামঃ মোঃ সাইদুল হক রিগান
এইচটিএমএল রঙের মান HTML Color Values
এইচ টি এম এল এ রঙকে হেক্সাডেসিমেল দ্বারা প্রকাশ করা হয়। এটি হল কোন রঙ এ লাল, সবুজ, এবং নীল (আরজিবি) এর মিশ্রণের পরিমাণ।
প্রতিটি আলোর উৎস জন্য সর্বনিম্ন মান ০ (হেক্স ০০) হয়. সর্বোচ্চ মান ২৫৫ হয় (হেক্স এফ এফ)
হেক্সাডেসিমেল মান লেখার আগে # চিহ্ন বসানো হয়। তারপর তিন বা ছয় হেক্স অক্ষর দ্বারা রঙ এর মান বসানো হয়।
তিন অক্ষর (#rgb) দিয়ে লিখলে তা স্বয়ংক্রিয়ভাবে অক্ষরে (#rrggbb) রূপান্তরিত হয়।
Color | Color 3 digit HEX | Color 6 digit HEX | Color RGB |
---|---|---|---|
#F00 | #FF0000 | rgb(255,0,0) | |
#0F0 | #00FF00 | rgb(0,255,0) | |
#00F | #0000FF | rgb(0,0,255) |
ধূসর রঙ এর মাত্রা (কালো থেকে সাদা) এর জন্য তিনটি রঙ এর সমান মান দ্বারা প্রকাশ করা যায়।
Color | Color 3 digit HEX | Color 6 digit HEX | Color RGB |
---|---|---|---|
#000 | #000000 | rgb(0,0,0) | |
#888 | #888888 | rgb(136,136,136) | |
#FFF | #FFFFFF | rgb(255,255,255) |
হেক্সাডেসিমালের মান অনুসারে কালার সাজানো
এইচটিএমএল রঙ (HTML Color codes chart)
এইচটিএমএল রঙ (HTML Color Names)
স্বর্ণা আখতার
স্বর্ণা আখতারআমরা জানি একেকটি কালার হলো লাল, নীল এবং সবুজ এর সমন্বিত রূপ। সাধারনত, ১৪০ টি কালার আছে যেগুলো সব ওয়েব ব্রাউজারেই সাপোর্ট করে। এই ১৪০ টি নাম এইচ টি এম এল ৫ এবং সিএসএস ৫ এ উল্লেখ আছে। যার মধ্যে ১৭ টি এসেছে এইচ টি এম এল থেকে এবং ১২৭ টি এসেছে সিএসএস থেকে। নিচে সেইসব ১৪০ টি কালারের নাম এবং তাদের হেক্সাডেসিমেল কোড দেয়া হল।
HTML Iframe (এইচটিএমএল আইফ্রেম)
একটি 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>
যা একটি ইনলাইন ফ্রেম সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়।
জাভাস্ক্রিপ্ট ইভেন্ট (JavaScript Events)
শরিফুল ইসলাম
Job category-Php Coder
এইচটিএমএল ইভেন্ট হল এমন কিছু জিনিস যা এইচটিএমএল এর উপাদানের মধ্যে ঘটে থাকে। যখন javascript এইচটিএমএল পেজ এর মধ্যে ব্যবহার হয় ,তখন javascript ওই ইভেন্ট গুলোর উপর প্রতিক্রিয়া করে।
এইচটিএমএল ইভেন্ট
একটি এইচটিএমএল ইভেন্ট তাই করে যা ব্রাউজার করে অথবা কোন ইউজার কিছু করে।
এখানে কিছু এইচটিএমএল ইভেন্ট দেয়া হল
- এইচটিএমএল ওয়েবপেজ লোড হওয়া শেষ হয়েছে
- ইনপুট ফিল্ড পরিবর্তন হয়েছে
- এইচটিএমএল বাটন এ ক্লিক করা হয়েছে।
আপনি যখন কিছু করতে চান তখন কোন ইভেন্ট ঘটতে পারে।
ইভেন্ট চিহ্নিত হওয়ার পর javascript আপনার কোড কার্যে পরিণত করে।
এইচটিএমএল জাভাস্ক্রিপ্ট কোড এর সাথে ইভেন্ট handler attribute ব্যবহারের অনুমতি দেয় এবং এইচটিএমএল এলিমেন্ট এর সাথে যুক্ত করতে হয়।
একক উদ্ধৃতি চিহ্ন দিয়ে:
<some-HTML-element some-event='some JavaScript'>
ডবল উদ্ধৃতি চিহ্ন দিয়ে:
<some-HTML-element some-event="some JavaScript">
এই উদাহরনে কোড এর মাধ্যমে বাটন এলিমেন্ট এর মধ্যে একটি onclick attribute ব্যবহার করা হয়েছে।
যেমন
<button onclick="getElementById('demo').innerHTML=Date()">The time is?</button>
উপরের উদাহরণ এ javascript কোড এর একটি উপাদান এবং সেই সাথে id=”demo” এ পরিবর্তন করবে।
পরবর্তী উদাহরনে innerhtml ব্যবহার করে javascript কোড নিজের উপাদানের কোন কনটেন্ট কে পরিবর্তন করবে।
যেমন
<button onclick="this.innerHTML=Date()">The time is?</button>
অনেকসময় javascript কোড কয়েক লাইনের হয়ে থাকে। ইভেন্ট অ্যাট্রিবউট ফাংশন কল করার ক্ষেত্রে এটি খুবই সাধারন।
যেমন :
<p>Click the button to display the date.</p> <button onclick="displayDate()">The time is?</button> <script> function displayDate() { document.getElementById("demo").innerHTML = Date(); } </script> <p id="demo"></p>
অধিক ব্যবহৃত এইচটিএমএল ইভেন্ট
ইভেন্ট |
বিবরণ |
Onchange | এইচটিএমএল উপাদান পরিবর্তন হয়। |
Onclick | ব্যবহারকারী এইচটিএমএল উপাদান এর উপর ক্লিক করতে পারে। |
Onmouseover | ব্যবহারকারী এইচটিএমএল উপাদান এর উপর মাউস মুভ করলে ইভেন্ট কার্যকর হয়। |
Onmouseout | ব্যবহারকারী এইচটিএমএল এর কোন উপাদান এর উপর থেকে মাউস সরালে ইভেন্ট কার্যকর হয়। |
Onkeydown | ব্যবহারকারী কিবোর্ড এর কোন বাটন প্রেস করলে ইভেন্ট কার্যকর হয়। |
Onload | ব্রাউজার পেজ লোড হওয়া বন্ধ করে। |
এইচটিএমএল প্রতিক্রিয়াশীল ওয়েব ডিজাইন (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 Layout)
Md. Mursedul Islam Sumon
Web Designer
এইচটিএমএল লেআউট (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>
ফলাফলঃ
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>
jQuery এ এইচটিএমএল এলিমেন্টস দূর করা
লেখকঃ মোস্তাফিজুর ফিরোজ ।
জেকোয়েরিতে খুব সহজে আগে থেকে থাকা এইচটিএমএল এলিমেন্টস দূর করা যায় ।
এলিমেন্টস বা উপাদান দূর করা
এলিমেন্টস বা উপাদান দূর করার জন্য দুই ধরণের জেকোয়েরি মেথডস আছে ।
- remove() : এটি এর সাব ক্যাটাগরি সহ সকল সিলেক্ট করা এলিমেন্টস দূর করে ।
- empty() : সাব ক্যাটাগরি এর সকল উপাদানকে দূর করে ।
jQuery remove() Method
jQuery remove() Method এর সাব ক্যাটাগরি সহ সকল সিলেক্ট করা এলিমেন্টস দূর করে ।
$("#div1").remove();
ফলাফল : remove()
jQuery empty() Method
jQuery empty() Method এর সাব ক্যাটাগরি এর সকল উপাদানকে দূর করে ।
$("#div1").empty();
ফলাফল : empty()
দূরকৃত এলিমেন্টস এর ফিল্টার করা
jQuery remove() method একটি প্যারামিটার সাপোর্ট করে তাই এটি দূরকৃত এলিমেন্টস এর ফিল্টার করতে পারে ।
এই প্যারামিটার টি যেকোন জেকোয়েরি সিলেক্টর হবে ।
নিচের উদাহরণ class="italic": ক্লাসের সকল <p> উপাদানগুলোকে দূর করবে ।
$("p").remove(".italic");
ফলাফল : দূরকৃত এলিমেন্টস এর ফিল্টার
জেকোয়েরি এইচটিএমএল রেফারেন্স
এছাড়া জেকোয়েরি এর সকল এইচটিএমএল কে উপরের পদ্ধতিতে দূর করতে পারবেন । এজন্য আপনি পূর্বে পোস্ট করা আমাদের সকল এইচটিএমএল রেফারেন্স গুলো দেখতে পারেন ।
এভাবে আপনি খুব সহজে জেকোয়েরিতে এইচটিএমএল এলিমেন্টস গুলো দূর করতে পারবেন
এইচটিএমএল ক্লাসেস (HTML Classes)
শরিফুল ইসলাম
Php Coder
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 Block and Inline Elements)
এইচটি এম এল ব্লক (HTML Block Elements)
নাম-শরিফুল ইসলাম
Php Coder
উদাহরণঃ
<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 Paragraphs
Paste the translated text here এইচটিএমএল অনুচ্ছেদ ________________________________________ এইচটিএমএল তথ্য গুলো অনুচ্ছেদ আকারে দেয়া হয় ________________________________________ এইচটিএমএল অনুচ্ছেদ এইচটিএমএল <p> উপাদান গুলকে অনুচ্ছেদ বলে । উদাহরন <p> এটা একটা অনুচ্ছেদ </p> <p> এটা আরেকটা অনুচ্ছেদ </p> ব্রাউজার সয়ংক্রিয় ভাবে শূন্য যাইগা যোগ করে দিবে অনুচ্ছেদ এর আগে ও পরেএইচটিএমএল দেখুন আপনি নিশ্চিত হতে পারবেন না কিভাবে এইচটিএমএল অনুচ্ছেদ দেখান হবে । ছোট অথবা বড় পর্দা এবং আকার পরিবর্তন করা উইন্ডোজ গুলো আলাদা আলাদা দেখাবে । এইচটিএমএল দিয়ে আপনি বাইরের জিনিস পরিবর্তন করতে পারবেন না, অথবা অতিরিক্ত ফাকা যাইগা অথবা বেশি সারি রেখে এইচটিএমএল সুত্র এর মাধ্যমে । আপনার ব্রাউজার টি পেজ দেখানোর সময় অতিরিক্ত ফাকা জাইগা অথবা সারি মুছে ফেলবে । যেকোনো ফাকা জাইগা অথবা ফাকা সারি একটা ফাকা জাইগা হিসেবে ধরা হবে । উদাহরন <p> এই অনুচ্ছেদটাতে অনেক ফাকা জাইগা আছে কিন্তু ব্রাউজার সেটা গণ্য করবে না </p> <p> ________________________________________ এইচটিএমএল লাইন ভাঙা কবিতার সমস্যা <p> বনি সাগরে শুয়ে থাকে </p> নিজে চেষ্টা করুন <pre> বনি সাগরে শুয়ে থাকে </pre> নিজে চেষ্টা করুন ট্যাগ বর্ণনা |
এইচটিএমএল এর ভিত্তি এর উদাহরন
Paste the translated text here এইচটিএমএল এর ভিত্তি এর উদাহরন ভয় পাবার কারন নেই যদি এই উদাহরন গুলো আপনি না শিখে থাকেন । আপনি পরবর্তী অধ্যায় এ শিখতে পারবেন । ________________________________________ এইচটিএমএল উপাত্ত সকল এইচটিএমএল দলিল একটি ঘোষণা দিয়ে শুরু হবে <!DOCTYPE html>. এইচটিএমএল দলিল নিজে নিজেই এটা দিয়ে শুরু হয় <html> এবং শেষ হয় </html>. এইচটিএমএল এর দৃশ্যমান অংশ গুলো <body> and </body> এর মধ্যে হয় । উদাহরন <!DOCTYPE html> <html> <body><h1>My First Heading</h1> <p>My first paragraph.</p> </body> Try it Yourself » ________________________________________ Try it Yourself » ________________________________________ Try it Yourself » ________________________________________ Try it Yourself » |
এইচটিএমএল কি? HTML Document Example
Paste the translated text here প্রথম পেইজঃ এইচটিএমএল কি? উওর: এইচটিএমএল ডকুমেন্ট (ওয়েব পেজ) বর্ণনা জন্য একটি মার্কআপ ভাষা. এইচটিএমএল ল্যাঙ্গুয়েজ অনেক গুলো টেক্সট এর মার্কআপ করা। কিছু মার্কআপ ট্যাগ এর সমন্বয়ে এইচটিএমএল ট্যাগ গুলো গঠিত। এইচটিএমএল ডকুমেন্ট এইচটিএমএল ট্যাগ দ্বারা বর্ননা করা হয়। প্রতিটি এইচটিএমএল ট্যাগ বিভিন্ন ডকুমেন্টের বিষয়বস্তু বর্ণনা করে থাকে। যেমনঃ <!DOCTYPE html> <html> <head> <title>Page Title</title> </head><body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> |
এইচটিএমএল লিস্ট (HTML tag list)
Tamim Ikbal
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>
আপনার ওয়েব ব্রাউজার এ রান করার তার দেখতে নিচের মতো দেখতে পারবেন ।
- iPad
- iPhone
- MacBook Air
হয়তো ভাবছেন <ol start="10"> লিখার পর বাকি সব গুল 10,11,12 তালিকা কি করে করলাম । একটু লক্ষ করেন <ol start=" পর আমি “10” লিখছি যার কারনে 10 থেকে তালিকা শুরু হইছে । আর তিনটি তালিকা থাকার কারনে ১০,১১,১২ পর্যন্ত প্রদশন করছেন । আপনারা যদি <ol start=" লিখার পরে “49” দিন এবং ট্যাগ শেষ করেন তাহলে ৪৯ থেকেই আপনার তালিকা শুরু হবে ।
Hyper Text Markup Language 5 : HTML5 হলো এইচটিএমএলের নতুন সংস্করণ
Hyper Text Markup Language 5
-----------------------------------------------------
HTML5 কি?
HTML5 হলো এইচটিএমএলের নতুন সংস্করণ এইচটিএমএল৫। HTML 4.01 এর পূর্ববর্তী সংস্করণ 1999 সালে প্রকাশিত হয়েছিল। তারপর থেকে অনেক পরিবর্তন হয়েছে। HTML5 এর কাজ এখনও চলছে। কিন্তু অনেক ট্যাগ বিভিন্ন ব্রাউজারে এখন কাজ করে।
HTML5 কিভাবে কাজ শুরু করেছে?
HTML5 এর ওয়ার্ল্ড ওয়াইড ওয়েব সাথে (W3C) এবং ওয়েব হাইপারটেক্সট অ্যাপ্লিকেশন প্রযুক্তি ওয়ার্কিং গ্রুপ (WHATWG) মধ্যে সহযোগিতা করে তৈরির কাজ চলছে। WHATWG ওয়েব ফর্ম এবং অ্যাপ্লিকেশন তৈরির কাজ করছে এবং W3C এক্সএইচটিএমএল 2.0 নিয়ে কাজ করছিল। 2006 সালে তারা HTML-এর একটি নতুন সংস্করণ তৈরি করার সিদ্ধান্ত নিয়েছে।
HTML5 এর জন্য কিছু নিয়ম প্রতিষ্ঠিত হয়:
নতুন বৈশিষ্ট্য সমূহ এইচটিএমএল, সিএসএস, DOM এবং জাভাস্ক্রিপ্ট উপর ভিত্তি করে তৈরি করা উচিত
আলাদা প্লাগিনের ব্যবহার কমানোর কথা বলা হয়েছে (যেমন: ফ্ল্যাশ)
উন্নত ত্রুটি পরিচালনার ব্যবস্থা
আরও একাধিক স্ক্রিপ্টিং প্রতিস্থাপন করার সুবিধা যুক্ত করা
HTML5 এর স্বাধীন ডিভাইস হতে হবে
উন্নয়ন প্রক্রিয়ায় জনগণের কাছে দৃশ্যমান হবে
************************************************************
আমার Microworker ইমেল:skmdrony@yahoo.com
জেনে নিন প্রয়োজনীয় কিছু বিশেষ এইচটিএমএল কোড
জেনে নিন প্রয়োজনীয় কিছু বিশেষ এইচটিএমএল কোড :
বর্তমান পৃথিবী হচ্ছে প্রযুক্তির বিশ্ব আর এই প্রযুক্তির বিশ্বে আর সব কিছু আমরা হাত বাড়ালেই পেয়ে যাই যেকোন মূহুর্তে যেকোন স্থানে। আর তাই এই বর্তমান পৃথিবী আরেক নামে ডাকা হয় ডিজিটাল পৃথিবী বলে। ডিজিটাল পৃথিবীর সবচেয়ে প্রধান অংশটির নাম হচ্ছে ইন্টারনেট। ইন্টারনেট ব্যবহারের ফলে সমস্ত বিশ্ব আমাদের হাতের মুঠোয় চলে এসেছে। আর ইন্টারনেটের প্রধান অংশ হচ্ছে ওয়েব সাইট। সমস্ত বিশ্বব্যাপী ওয়েব সাইট সমূহ জালের মতো বিস্তার করে আছে। আমাদের হয়তো এটার অনেকেরই ধারনা আছে যে একটি প্রকৃত ওয়েব সাইট তৈরির জন্য এইচটিএমএল বিষয়ে জানা অনেক গুরুত্ব পূর্ন বিষয়। আজকে আমি আপনাদের এইচটিএমএল এর কয়েকটি প্রয়োজনীয় কোড নিয়ে সংক্ষেপে কিছু আলোচনা করবো।
সাধারনত অক্ষরকে বোল্ড বা মোটা করার জন্য এইচটিএমএলে দুটি সহজ পদ্ধতি আছে, যথা:
<p style="font-weight:bold;">font-weight: bold</p>
<p style="font-weight:100;">font-weight: 100</p>
বিভিন্ন টেবিলে ব্যাকগ্রাউন্ড colure দেয়ার জন্য এইচটিএমএলে ব্যবহার করা হয় এ ধরনের ট্যাগ:
<table style="background-color:#FFFFE0;">
টেবিলটির হিডারে জন্য নিচের কোডটি অতি সহজে ব্যবহার করা যেতে পারে:
<th>Table Header</th><th>Table Header</th>
টেবিলের মাঝে সেলের পরিবর্তনের জন্য এই কোডটি ব্যবহার করা যেতে পারে:
<td>Table cell 1</td><td>Table cell 2</td>
এইচটিএমএলের সাহায্যে লিংকের সাথে বিভিন্ন ছবি ট্যাগ করার জন্য আমরা নিচের প্রচলিত কোডগুলো ব্যবহার করতে পারি।
<a href="http://www.travel-explorer.com/boracay-philippines/ target="_blank"><img src="http://www.html.am/images/html-codes/links/boracay-white-beach-sunset-300x225.jpg
সাধারনত ছবির পরিমাপ সহজে ধাবাহিক সুবিন্যস্ত করার জন্য নিচের কোডটি একই সাথে ব্যবহার করা যায়:
width="300" height="225"/></a>
ওয়েব সাইটে মূলত এইচটিএমএলের সাহায্যে টেক্সট বক্স বসানোর কোডটি এরকম হয়:
<textarea>This is where the user can enter text...</textarea>
সুতরাং আজ আমরা এইচটিএমএলের প্রয়োজনীয় কয়েকটি কোড সম্পর্কে জানলাম। আশাকরি কোডগুলো এইচটিএমএল কোড সাজাতে আপনাদের সহায়তা করবে। সুতরাং চেষ্টা করুন বারবার।
2. আমি এই ওয়েব সাইট থেকে বিষয় বেছে নিয়েছি:
http://salearningschool.com
এইচটিএমএল টেবিল (HTML Table)
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 Link)
এইচ টি এম এল লিঙ্ক
স্বর্ণা আখতার
সম্পাদনাঃ মোঃ রফিকুল ইসলাম
প্রায় সকল ওয়েবপেজ এ লিঙ্ক রয়েছে। লিঙ্ক এ ক্লিক করার মাধ্যমে ব্যবহারকারী এক পেজ থেকে অন্য পেজে যেতে পারে।
এইচটিএমএল লিঙ্ক - হাইপারলিঙ্ক
হাইপারলিঙ্ক হচ্ছে একটি Text, বা ছবি যার উপর ক্লিক করার মাধ্যমে আপনি অন্য আরেকটি ওয়েবপেজে/ডকুমেন্ড এ চলে যেতে পারে।
এইচটিএমএল লিঙ্ক - সিনট্যাক্স
এইচ টি এম এল এ লিঙ্ক সিনট্যাক্সগুলো কিভাবে গঠিত হয় নিচে তাঁর উদাহরন তুলে ধরা হল, <a> ট্যাগ দ্বারা লিঙ্ককে সঙ্গায়িত করা হয়।
লিঙ্ক সিনট্যাক্স
<a href="url">link text</a>
উদাহরনঃ
<a href="http://bangla.salearningschool.com/html/">Visit our HTML tutorial</a>
ফলাফলঃ
এখানে 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 ব্যবহার করে ডিফল্ট কালার ও আন্ডারলাইন পরিবর্তন করতে পারেন।
উদাহরণঃ
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>
ফলাফল
Target Value | বিবরণ |
---|---|
_blank | লিঙ্ককৃত ডকুমেন্টটি নতুন একটি উইন্ডো বা ট্যাব এ খোলে |
_self | লিঙ্ককৃত ডকুমেন্টটি যে ফ্রেমে ক্লিক করেছেন সেই একই ফ্রেমে খুলবে (এটিই ডিফল্ট হিসেবে থাকে) |
_parent | লিঙ্ককৃত ডকুমেন্টটি মুল ফ্রেমে খোলে |
_top | লিঙ্ককৃতডকুমেন্টটি সম্পূর্ণ উইন্ডো জুড়ে খোলে |
framename | লিঙ্ককৃত ডকুমেন্টটি নির্দিষ্ট নামের ফ্রেমে খোলে |
আপনার ওয়েব পেজটি যদি একটি ফ্রেম লক করা থাকে, তাহলে target="_top" ব্যহার করে লক ভেঙ্গে ফেলতে পারেন।
উদাহরণঃ
<a href="http://bangla.salearningschool.com/html/" target="_top">Visit our HTML tutorial</a>
ফলাফলঃ
এইচটিএমএল লিঙ্ক - ইমেজ/ছবি লিঙ্ক হিসেবে ব্যবহার
ইমেজকে লিঙ্ক হিসেবে ব্যবহার করা খুবই সাধারণ
উদাহরণঃ
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
ফলাফলঃ
এইচটিএমএল লিঙ্ক - 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 Style – CSS)
শরিফুল ইসলাম
Php Coder
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 Comment)
রাজু (DU)
এইচ টি এম এল এ কমেন্ট করার জন্য কমেন্ট ট্যাগ <!-- এবং --> ব্যবহার করা হয়।
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 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 Quotation and Citation Elements)
HTML Quotation and Citation Elements
শরিফুল ইসলাম
Job category-Php Coder
Email-bappiislam1988@gmail.com
Mob-01722806467
এইচটিএমএল এর কোটেশন (HTML Quotation and Citation Elements)
এইচটিএমএল <q> সংক্ষিপ্ত উদ্ধৃতি এর জন্য
সংক্ষিপ্ত উদ্ধৃতি এর জন্য এর জন্য <q> এলিমেন্ট ব্যবহার করা হয়। ব্রাউজার নিজে নিজে এই উদ্ধৃতির চিহ্ন বসিয়ে দেয়।
উদাহরণঃ
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
ফলাফলঃ
WWF's goal is to: Build a future where people live in harmony with nature.
এইচটিএমএল <blockquote> বড় উদ্ধৃতি এর জন্য
বড় উদ্ধৃতর জন্য <blockquote> ব্যবহার করা হয়। ব্রাউজার সাধারণত <blockquote> এর ভিতরের অংশ প্রদর্শন করে।
উদাহরণ
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
ফলাফলঃ
Here is a quote from WWF's website:
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
সংক্ষিপ্ত রূপ প্রকাশের জন্য এইচটিএমএল <abbr> এর ব্যবহার
কোন কিছুর সংক্ষিপ্ত রূপ প্রকাশ করার জন্য এইচটিএমএল এর <abbr> ব্যবহার করা হয়। ব্রাউজারে উক্ত আন্ডার লাইন করা শব্দ/শব্দসমষ্টি এর উপর মাউস পয়েন্টার নিলে উক্ত শব্দ/শব্দসমষ্টিি এর সম্পর্কিত বিস্তারিত তথ্য প্রদান করে। ফলে এটি ব্রাউজার, অনুবাদ এবং search engine এর ক্ষেত্রে গুরুত্তপূর্ণ তথ্য দেয়।
উদাহরণ
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
ফলাফলঃ
The WHO was founded in 1948.
যোগাযোগ এর ঠিকানা প্রকাশে এইচটিএমএল <address>
কোন আর্টিকেল এর মালিক এর যোগাযোগ এর তথ্য দেওয়ার ক্ষেত্রে আমরা <address> ব্যবহার করব। সাধারনত এটি ইতালিক আকারে দেখায়। প্রায় প্রত্যেক ব্রাউজার কোন লেখার শুরুতে এবং শেষে লাইন ব্রেক যুক্ত করে
উদাহরণঃ
<address>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
Written by Jon Doe.Visit us at:Example.comBox 564, DisneylandUSA
কাজের শিরোনাম লেখার জন্য <cite>
কোন কাজের শিরোনাম দেওয়ার ক্ষেত্রে আমরা <cite> ব্যবহার করব। প্রায় প্রত্যেক ব্রাউজার সাধারনভাবে এটিকে ইতালিক এ প্রদর্শন করে।
উদাহরণ
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
ফলাফলঃ
The Scream by Edward Munch. Painted in 1893.
এইচটিএমএল <bdo>
দ্বি মুখী লেখার জন্য এই উপাদান ব্যবহার করা হয়। যদি এটি ব্রাউজার সাপোর্ট করে তাহলে লেখাকে ডান পাস থেকে বাম দিকে অল্টাভাবে প্রদর্শন করে।
উদাহরণঃ
<bdo dir="rtl">This text will be written from right to left</bdo>
ফলাফলঃ
This text will be written from right to left
এইচটিএমএল উদ্ধৃতি, তলব এবং ডেফিনিশন এলিমেন্ট এর নাম এবং তাদের বর্ণনা নিচে দেওয়া হলঃ
ট্যাগ | বর্ণনা |
<abbr> | সংক্ষিপ্ত রূপ বুঝায় |
<address> | কোন ডকুমেন্ট এর লেখকের যোগাযোগের ঠিকানা প্রকাশ করতে ব্যবহৃত হয় |
<bdo> | টেক্সট এর অভিমুখ পরিবর্তন করার জন্য |
<blockquote> | কটেশন মার্ক যুক্ত অংশ যা অন্য কোন উৎস থেকে এসেছে |
<dfn> | কোন শব্দের সংজ্ঞা |
<q> | সংক্ষিপ্ত ইনলাইন কোটেশন এর ক্ষেত্রে। |
<cite> | কোন কাজের শিরোনাম। |
এইচটিএমএল এর টেক্সট ফরমেটিং (HTML Text Formatting Elements)
HTML Text Formatting Elements
শরিফুল ইসলাম
Job category-Php Coder
Email-bappiislam1988@gmail.com
Mob-01722806467
এইচটিএমএল ফরম্যাটিং elements (HTML Formatting Element)
গত অধ্যায়ে আপনারা জেনেছেন, HTML Style Attribute দ্বারা কিভাবে HTML Style কে পরিবর্তন করা যায়।
এ অধ্যায়ে আমরা HTML Formatting Element সম্পর্কে জানব। নিম্নে HTML Text Formatting Elements গুলোকে উদাহরণসহ তুলে ধরা হল-
এইচটিএমএল এর কিছু গুরুত্তপূর্ণ উপাদান আছে যা দিয়ে টেক্সট কে বিভিন্নরুপে সাজানো যায়।
যেমন আমরা বোল্ড এবং ইতালিক টেক্সট পাওয়ার জন্য ব্যবহার করব <b> এবং <i>। ফরম্যাটিং উপাদান দ্বারা কি ধরনের টেক্সট হতে পারে তা নিচে দেওয়া হল
- Bold text
- Important text
- Italic text
- Emphasized text
- Marked text
- Small text
- Deleted text
- Inserted text
- Subscripts
- Superscripts
এইচটিএমএল Bold এবং strong ফরম্যাট এর উদাহরণ
<b> এলিমেন্ট Text কে বোল্ড করে, Text কে কোন বিশেষ গুরুত্ব প্রদান করে না।
উদাহরণঃ
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body>
</html>
ফলাফলঃ
This text is normal.
This text is bold.
এইচটিএমএল এর <strong> এলিমেন্ট strong টেক্সট ডিফাইন করে যা শব্দ বা বাক্যটিকে বিশেষ গুরুত্ব প্রদান করে।
উদাহরণঃ
<p><strong>This text is strong</strong>.</p>
ফলাফলঃ
This text is strong.
এইচটিএমএল italic এবং emphasized ফরম্যাট
এইচটিএমএল এ <i> উপাদান দিয়ে ইতালিক টেক্সট ডিসপ্লে করা হয় কোন অতিরিক্ত গুরুত্ত প্রদান করা ব্যতীত।
উদাহরণঃ
<p><i>This text is italic</i>.</p>
ফলাফলঃ
This text is italic.
গুরুত্ব সহকারে emphasized টেক্সট দেখানোর জন্য <em> উপাদান ব্যবহার করা হয়
উদাহরণঃ
<p><em>This text is emphasized</em>.</p>
ফলাফলঃ
This text is emphasized.
দ্রষ্টব্য: ব্রাউজার গুলো <strong> কে <b> এবং <em> কে <i> আকারে ডিসপ্লে করে
যদিও এই ট্যাগ গুলোর মধ্যে অর্থগত ভিন্নতা রয়েছেঃ এখানে <b> এবং <i> বোল্ড এবং ইতালিক টেক্সট বুঝায় কিন্ত <strong> এবং <em> ট্যাগ বুঝায় যে টেক্সগুলো গুরুত্বপূর্ণ।
এইচটিএমএল small ফরম্যাটিং
<small> ট্যাগ ব্যবহার করে এইচটিএমএল এ ছোট আকারের লেখা দেখানো যায়
উদাহরণ
<h2>HTML <small>Small</small> Formatting</h2>
ফলাফলঃ
HTML Small Formatting
এইচটিএমএল marked ফরম্যাটিং:
হাইলাইট করা কোন টেক্সট ডিসপ্লে করার জন্য ব্যবহার করা হয় <mark> ট্যাগ
উদাহরণ
<h2>HTML <mark>Marked</mark> Formatting</h2>
ফলাফলঃ
HTML Marked Formatting
এইচটিএমএল deleted ফরম্যাটিং
কোন টেক্সট কে বাদ দেয়া বা মুছে ফেলা হয়েছে বুঝাতে টেক্সট এর গায়ে কাটা চিহ্ন দেখানোর জন্য <del> ট্যাগ ব্যবহার করা হয় ।
উদাহরণ
<p>My favorite color is <del>blue</del> red.</p>
ফলাফলঃ
My favorite color is blue red.
এইচটিএমএল inserted ফরম্যাটিং
কোন নতুন টেক্সট যুক্ত করা হয়েছে বূঝাতে টেক্সট এর নিচে দাগ দেখানোর জন্য আমরা <ins> ট্যাগ ব্যবহার করা হয়।
উদাহরণ
<p>My favorite <ins>color</ins> is red.</p>
ফলাফল
My favorite color is red.
এইচটিএমএল subscripts ফরম্যাটিং
সাধারন লাইনের নিচে কোন টেক্সট কে ডিসপ্লে করার জন্য আমরা <sub> ট্যাগটি ব্যবহার করব
উদাহরণ
<p>This is <sub>subscripted</sub> text.</p>
ফলাফলঃ
This is subscripted text.
এইচটিএমএল superscripts ফরম্যাটিং
সাধারন লাইনের উপরে কোন টেক্সট কে দেখানোর জন্য আমরা <sup> এই ট্যাগ টি ব্যবহার করা হয়
উদাহরণ
<p>This is <sup>superscripted</sup> text.</p>
ফলাফলঃ
This is superscripted text.
এইচটিএমএল এর টেক্সট ফরম্যাটিং এর জন্য ট্যাগ গুলো নিচে পর্যায় ক্রমে দেখানো হলঃ
Tag | Description (বর্ণনা) |
<b> | কোন text কে bold করতে এ tag ব্যবহার করা হয়। |
<strong> | গুরুত্বপূর্ণ Text কে তুলে ধরতে এই tag ব্যবহৃত হয়। |
<i> | কোন text কে italic করতে এই tag ব্যবহৃত হয়। |
<em> | Emphasized text কে তুলে ধরতে এটি ব্যবহৃত হয়। |
<small> | ছোট কোন Text কে তুলে ধরা এই tag এর দ্বারা। |
<u> | Text কে underline করতে একে ব্যবহার করা হয়। |
<mark> | কোন text কে হাইলাইট করতে <mark> tag ব্যবহার করা হয়। |
<del> | Text কে remove করতে এই tag ব্যবহৃত হয়। |
<ins> | কোন text কে add করতে এটি ব্যবহৃত হয়। |
<sub> | Subscripted text কে চিহ্নিত করতে এই element ব্যবহৃত হয়। |
<sup> | Superscripted text কে চিহ্নিত করতে এই element ব্যবহৃত হয়। |
এইচটিএমএল এর স্টাইল (HTML Styles)
এইচটিএমএল এর স্টাইল (HTML Styles)
নাম-শরিফুল ইসলাম
Job category-PHP Coder
Email-bappiislam1988@gmail.com
Mob-01722806467
বিষয়- HTML Styles
এইচটিএমএল স্টাইল
প্রত্যেকটি এইচটিএমএল উপাদানের জন্য একটি ডিফল্ট বা নির্দিষ্ট স্টাইল থাকে পিছনের কালার বা ব্যাকগ্রাউন্ড কালার সাদা এবং টেক্সট এর কালার কালো। স্টাইল attribute এর মাধ্যমে আমরা এই ডিফল্ট কালার কে পরিবর্তন করতে পারি। নিচের উদাহরণ এ ব্যাকগ্রাউন্ড কালার ডিফল্ট সাদা থেকে light gray কালার এ পরিবর্তনকরা হয়েছে।
উদাহরণ
<!DOCTYPE html>
<html>
<body style="background-color:lightgrey">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
This is a headingThis is a paragraph. |
Bgcolor attribute পুরাতন এইচটিএমএল ভার্সন এ সাপোর্ট করে কিন্তু এইচটিএমএল ৫ এ সাপোর্ট করে না
এইচটিএমএল স্টাইল attribute
এইচটিএমএল স্টাইল attribute নিম্নোক্ত syntax মেনে চলে
style="property:value"
এই প্রপার্টি হল সিএসএস এর প্রপার্টি এবং ভ্যালু হল সিএসএস এর ভ্যালু।
এইচটিএমএল টেক্সট কালার
এইচটিএমএল এর টেক্সট কালার পরিবর্তন করার জন্য color প্রপার্টি ব্যবহার করা হয়।
উদাহরণ
<body>
<h1 style="color:blue">This is a heading
<p style="color:red">This is a paragraph.</p>
</body>
ফলাফল
This is a heading
This is a paragraph.
এইচটিএমএল ফন্টস
Font-family প্রপার্টি দ্বারা ফন্টের ধরন পরিবর্তন করা হয়।
উদাহরণ
<body>
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
</body>
ফলাফল
This is a heading
This is a paragraph.
পুরাতন এইচটিএমএল এ <font> ট্যাগ সাপোর্ট করে কিন্তু এইচটিএমএল ৫ এ সাপোর্ট করে না।
এইচটিএমএল টেক্সট সাইজ
Font-size প্রপার্টি দ্বারা টেক্সট এর আকার পরিবর্তন করা হয়।
উদাহরণ
<body>
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph.</p>
</body>
ফলাফল
This is a heading
This is a paragraph.
এইচটিএমএল টেক্সট alignment
Text-align প্রপার্টি দ্বারা টেক্সট horizontal ভাবে কোন দিকে অবস্থান করবে তা নির্দেশ দেওয়া হয়
উদাহরণ
<body>
<h1 style="text-align:center">Centered Heading</h1>
<p>This is a paragraph.</p>
</body>
ফলাফল
Centered Heading
This is a paragraph.
<center> ট্যাগ পুরাতন এইচটিএমএল ভার্সন এ কাজ করে নতুন এইচটিএমএল এ কাজ করে না।
একনজরে প্রপার্টি গুলো
• স্টাইল attribute এর ব্যবহার
• background-color এর ব্যবহার
• color এর সাহায্যে টেক্সট কালার এর ব্যবহার
• টেক্সট এর ফন্ট এর জন্য font-family এর ব্যবহার
• টেক্সট এর আকার এর জন্য font-size এর ব্যবহার
এবং
• text-align এর ব্যবহার।
এইচটিএমএল এর অণুচ্ছেদ (HTML Paragraphs)
এইচটিএমএল প্যারাগ্রাফ বা অনুচ্ছেদ
নয়ন চন্দ্র দত্ত
এইচটিএমএল ডকুমেন্ট বিভিন্ন অনুচ্ছেদে ভাগ করা হয়। এর জন্য বিভিন্ন ট্যাগ রয়েছে যেগুলো ব্যবহারে দুটি লাইনকে পৃথক করা যায়।
এইচটিএমএল প্যারাগ্রাফ
এইচটিএমএল < p> উপাদান একটি অনুচ্ছেদ সংজ্ঞায়িত করে।
যেমনঃ-
<p>This is a paragraph</p>
<p>This is another paragraph</p>
[* ব্রাউজার স্বয়ংক্রিয়ভাবে অনুচ্ছেদের আগে ও পরে একটি খালি লাইন যোগ করে। ]
এইচটিএমএল প্রদর্শন
আপনি নিশ্চিত হতে পারবেন না যে কিভাবে এইচটিএমএল দেখানো হবে।
বড় বা ছোট পর্দা, এবং পরিবর্তিত windows ভিন্ন ফলাফল তৈরি করবে।
এইচটিএমএল এ, আপনি অতিরিক্ত স্পেস যোগ করা আউটপুট পরিবর্তন করতে পারবেন না।
ব্রাউজার অতিরিক্ত স্পেস এবং অতিরিক্ত লাইন মুছে ফেলবে যখন পেজটি প্রদর্শিত হয়। যেকোন স্পেস সংখ্যা এবং নতুন লাইন একটিমাত্র স্পেস হিসেবে গণনা করা হবে।
উদাহরণ
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
ফলাফল
This paragraph contains a lot of lines in the source code, but the browser ignores it.
This paragraph contains a lot of spaces in the source code, but the browser ignores it.
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
শেষ ট্যাগ দিতে ভুলে যাবেন না। যদি আপনি শেষ ট্যাগ দিতে ভুলে যান তবুও অনেক ব্রাউজার সঠিকভাবে এইচটিএমএল প্রদর্শন করে।
যেমনঃ-
<p>This is a paragraph
<p>This is another paragraph
উপরের উদাহণটি অধিকাংশ ব্রাউজারে প্রদর্শন করবে কিন্তু কিন্তু এটার উপর নির্ভর করবেন না। শেষ ট্যাগ অবশ্যই দিবেন।
শেষ ট্যাগ এর না হওয়া অপ্রত্যাশিত ফলাফল বা ত্রুটি দেখাতে পারে।
HTML এর Stricter সংস্করণ যেমন-এক্সএইচটিএমএল এ আপনাকে শেষ ট্যাগ skip করতে দিবে না। শেষ ট্যাগ অবশ্যই দিতে হবে।
এইচটিএমএল লাইন ব্রেক
এইচটিএমএল <br> উপাদান একটি লাইন বিরতি দিতে ব্যবহৃত হয়।
প্যারাগ্রাফ ব্যবহার না করে <br> ব্যবহার করুন যদি আপনার নতুন একটি লাইনের দরকার হয়।
যেমনঃ-
<p>This is<br>a para<br>graph with line breaks</p>
<br> উপাদান একটি খালি এইচটিএমএল উপাদান। এর কোন শেষ ট্যাগ নেই।
কবিতা সমস্যা
উদাহরণ
<p>In HTML, spaces and new lines are ignored:</p>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
ফলাফল
In HTML, spaces and new lines are ignored:
My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.
এইচটিএমএল <pre> উপাদান
<pre> এলিমেন্ট পূর্ববিন্যাসিত টেক্সটকে সংজ্ঞায়িত করে।
<pre> এলিমেন্ট এর ভিতরের টেক্সগুলো নির্দিশ্ট পরিমান প্রসস্থ ফন্ট স্পেস এবং লাইন ব্রেক উভয় অপরিবর্তিত রেখে প্রদর্শন করে।
যেমনঃ-
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
ফলাফল
The pre tag preserves both spaces and line breaks:
My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.
এইচটিএমএল ট্যাগ রেফারেন্স
ট্যাগঃ <p>
ব্যাখ্যাঃ প্যারাগ্রাফ সজ্ঞায়িত করে।
ট্যাগঃ <br>
ব্যাখ্যাঃ একটি লাইন বিরতি দেয়।
ট্যাগঃ <pre>
ব্যাখ্যাঃ প্রাক ফরম্যাট টেক্সট সজ্ঞায়িত করে।
এইচটিএমএল শিরোনাম (HTML Headings)
HTML Headings
HTML Documents এর ক্ষেত্রে Headings খুবই গুরুত্বপূর্ণ। <h1> থেকে <h6> tags দ্বারা Heading কে তুলে ধরা হয়।
<h1> tag দ্বারা সবচেয়ে গুরুত্বপূর্ণ ও <h6> tag দ্বারা অপেক্ষাকৃত কম গুরুত্বপূর্ণ Heading কে তুলে ধরা হয়।
উদাহরণস্বরূপঃ
<h1> এই হল একটি শিরোনাম </h1>
<h2> এই হল একটি শিরোনাম </h2>
<h3> এই হল একটি শিরোনাম </h3>
<h4> এই হল একটি শিরোনাম </h4>
<h5> এই হল একটি শিরোনাম </h5>
<h6> এই হল একটি শিরোনাম </h6>
ফলাফল:
এই হল একটি শিরোনাম
এই হল একটি শিরোনাম
এই হল একটি শিরোনাম
এই হল একটি শিরোনাম
এই হল একটি শিরোনাম
এই হল একটি শিরোনাম
বিশেষ দ্রষ্টব্যঃ প্রত্যেক Heading এর আগে ও পরে browser স্বয়ংক্রিয়ভাবে কিছু empty space যোগ করে দেয়।
শিরোনাম (Heading) খুব গুরুত্বপূর্ণ
HTML Headings কে কেবল Heading এর জন্য ব্যবহার করতে হবে, কোন Text কে বড় (big) অথবা Bold করার জন্য Heading কে ব্যবহার করা যাবে না। আপনার web page গুলোর structure এবং content এর সূচি বানানোর জন্য সার্চিঞ্জিনগুলো আপনার headings কে ব্যবহার করে। User রা Heading এর দ্বারা আপনার web page এর সারমর্ম বুঝে নেয়। Document এর structure দেখানোর জন্যও Heading ব্যবহার করা গুরুত্বপূর্ণ। <h1> Heading হল প্রধান শিরোনাম, <h2> অপেক্ষাকৃত গৌন, <h3> তার চেয়ে কম গুরুত্বপূর্ণ এভাবেই ক্রমান্বয়ে ব্যবহৃত হয়।
HTML Horizontal Rules (আনুভূমিক নিয়ম)
HTML page এ <hr> tag আনুভূমিক রেখা তৈরি করে। বিষয়বস্তুকে চিহ্নিত করার জন্য <hr > element ব্যবহার করা হয়।
যেমনঃ
<!DOCTYPE html>
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
</body>
</html>
ফলাফল
↓
The hr tag defines a horizontal rule:
This is a paragraph.
This is a paragraph.
This is a paragraph.
↑
HTML এর <head> element
HTML এর <head> element টির HTML Headings এর সাথে কিছু করার নেই। <head> element meta data ধারণ করে। আর meta data web page এ দৃশ্যায়িত হয় না। <html> tag ও <body> tag এর মধ্যখানে HTML element অবস্থান করে।
উদাহরণস্বরূপঃ
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
<p>The HTML head element contains meta data.</p>
<p>Meta data is data about the HTML document.</p>
</body>
</html>
ফলাফল
The HTML head element contains meta data.
Meta data is data about the HTML document.
HTML এর title element
HTML এর title element হল meta data। এটা HTML Documents এর title হিসেবে চিহ্নিত হয়। Document এ title কখনও প্রদর্শিত হয় না।
HTML এর meta element
HTML এর <meta> element ও আরেকটি meta data। HTML Document এর অন্যান্য তথ্য ও চরিত্র সেটকে তুলে ধরতে এটি ব্যবহৃত হয়।
এইচটিএমএল এট্রিবিউট (HTML Attributes)
HTML Attributes এইচটিএমএল এট্রিবিউট
নয়ন চন্দ্র দত্ত
এট্রিবিউট হচ্ছে ট্যাগ এর বৈশিষ্ট বা মান। এট্রিবিউট এইচটিএমএল উপাদান সম্পর্কে অতিরিক্ত তথ্য প্রদান করে।
এইচটিএমএল এট্রিবিউট
• এইচটিএমএল এলিমেন্টে বা উপাদানের এট্রিবিউট বা বৈশিষ্ট্যাবলী থাকতে পারে।
• এট্রিবিউট একটি উপাদান সম্পর্কে অতিরিক্ত তথ্য প্রদান করে।
• এট্রিবিউট সবসময় শুরু ট্যাগ এ উল্লেখ করা হয়।
• এট্রিবিউট নাম/মান জোড়ায় জোড়ায় আসে। যেমনঃ name="value"
lang এট্রিবিউট
ডকুমেন্টের ল্যাংগুয়েজ <html> ট্যাগে declare করা যেতে পারে। ল্যাংগুয়েজ lang এট্রিবিউটে declare করা হয়।
একটি ল্যাংগুয়েজ declare করা বিশেষ ব্যবহারকারীদের জন্য ( accessibility) তৈরি অ্যাপ্লিকেশন( স্ক্রিন রিডার ) এবং সার্চ ইঞ্জিন এর জন্য খুব গুরুত্বপূর্ণ।
উদাহরণঃ
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
প্রথম দুটি অক্ষর ভাষা নির্ধারণ করে (en) । যদি উপভাষা থাকে, তবে আরো দুটি অক্ষর (US) ব্যবহার করুন।
Title Attribute শিরোনাম অ্যাট্রিবিউট
এইচটিএমএল অনুচ্ছেদ <p> ট্যাগ দিয়ে নির্দেশিত হয়। এই উদাহরণে, <p> এলিমেন্ট এর একটি টাইটেল অ্যাট্রিবিউট আছে। টাইটেল অ্যাট্রিবিউটের মান হচ্ছে "About bangla learning school" ।
উদাহরণঃ
<p title="About bangla learning school">
salearningschoolis a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>
ফলাফল
salearningschool is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
[আপনি যখন element এর উপর দিয়ে মাউসকে move করাবেন তখন টাইটেল একটি tooltip হিসাবে প্রদর্শন করবে। ]
href অ্যাট্রিবিউট
এইচটিএমএল লিঙ্ক <a> ট্যাগ দিয়ে নির্ধারিত। লিঙ্ক এড্রেস href অ্যাট্রিবিউটে উল্লেখ করা হয়।
যেমনঃ-
<a href="http://bangla.salearningschool.com">This is a link</a>
ফলাফল
আপনারা লিঙ্ক এবং <a> ট্যাগ সম্পর্কে এই টিউটোরিয়ালে পরবর্তীতে আরো জানতে পারবেন।
Size বা আকার অ্যাট্রিবিউট
এইচটিএমএল ইমেজ <img> ট্যাগ দিয়ে নির্ধারিত। উৎস ফাইলের নাম (src) এবং ইমেজের আকার (width এবং height) সব অ্যাট্রিবিউট হিসেবে নির্দেশিত হয়। যেমনঃ-
<img src="http://bangla.salearningschool.com/wp-content/uploads/2015/04/bangla.salearning.png" width="960" height="198">
ছবির আকার পিক্সেলে উল্লেখ করা হয়েছে। width="960" এর মানে পর্দা 960 পিক্সেল চওড়া।
আপনারা ইমেজ এবং <img> ট্যাগ সম্পর্কে এই টিউটোরিয়ালে পরবর্তীতে আরো জানতে পারবেন।
Alt অ্যাট্রিবিউট
যখন একটি এইচটিএমএল উপাদান প্রদর্শন করা যায় না তখন Alt অ্যাট্রিবিউট নির্দিষ্ট একটি বিকল্প টেক্সট ব্যবহার করতে সাহায্য করে। "screen readers" দ্বারা অ্যাট্রিবিউটের মান পড়া যায়।
উদাহরণঃ
<img src="http://bangla.salearningschool.com/wp-content/uploads/2015/04/bangla.salearning.png" alt="salearningschool.com" width=660" height="150">
ফলাফল
আমার সুপারিশ: সর্বদা ছোট হাতের অক্ষর ব্যবহার করবেন।
এইচটিএমএল ৫ স্ট্যান্ডার্ড এর ছোট হাতের অ্যাট্রিবিউট নাম প্রয়োজন হয় না। টাইটেল অ্যাট্রিবিউট ছোট বা বড় হাতের লেখা যেতে পারে, যেমন- Title বা TITLE ।
ছোট হাতের সবচেয়ে কমন এবং ছোট হাতের অক্ষর লেখাও সহজ।
আমার সুপারিশ : সর্বদা Quote Attribute মান ব্যবহার করবেন।
এইচটিএমএল ৫ স্ট্যান্ডার্ড এ অ্যাট্রিবিউট মান এ Quote দেওয়ার প্রয়োজন হয় না। উপরে প্রদর্শিত href অ্যাট্রিবিউট, এভাবেও লেখা যেতে পারেঃ
<a href=http://salearningschool.com>
এইচটিএমএল 4 Quote ব্যবহারের বিশেষ পরামর্শ দেওয়া হচ্ছে এবং এক্সএইচটিএমএল (XHTML) এর মত ডকুমেন্ট Quote ব্যবহারের দাবি রাখে।
<p title=About bangl learnings chool>
[quote এর ব্যবহার করাটা খুবই সাধারণ ব্যাপার। quotes বাদ দিয়ে লিখলে ত্রুটি তৈরী হতে পারে। ]
সিঙ্গেল বা ডাবল quote ?
ডাবল quote এর ব্যবহার এইচটিএমএল এ খুবই সাধারণ, কিন্তু একক quote ও ব্যবহার করা যেতে পারে।
অনেকসময়, যখন অ্যাট্রিবিউট মান নিজেই ডাবল quotes (উদ্ধৃতি চিহ্ন) ধারণ করে তখন একক সিঙ্গেল quotes (উদ্ধৃতি চিহ্ন) ব্যবহার করা প্রয়োজন হয়ে পরে।
যেমনঃ-
<p title='John "ShotGun" Nelson'>
বা উলটাভাবে
<p title="John 'ShotGun' Nelson">
অধ্যাযয়ের সারমর্ম
১। সমস্ত এইচটিএমএল উপাদানের অ্যাট্রিবিউট থাকতে পারে।
২। এইচটিএমএল টাইটেল অ্যাট্রিবিউট অতিরিক্ত "টুল - টিপ" তথ্য প্রদান করে।
৩। এইচটিএমএল href অ্যাট্রিবিউট লিঙ্কের জন্য ঠিকানা ও তথ্য প্রদান করে।
৪। এইচটিএমএল width এবং height অ্যাট্রিবিউটন ইমেজের জন্য আকার বিষয়ক তথ্য প্রদান করে।
৫। এইচটিএমএল Alt অ্যাট্রিবিউট পাঠকদের জন্য টেক্সট প্রদান করে।
৬। এইচটিএমএল এট্রিবিউট নামে সবসময় ছোট হাতের অক্ষর ব্যবহার করা ভাল।
৭। quote এট্রিবিউট এ সবসময় ডাবল quote ব্যবহার করা ভাল।
এইচটিএমএল এট্রিবিউট
নীচে এইচটিএমএল এ প্রায়ই ব্যবহৃত হয় এমন কিছু এট্রিবিউট এর একটি বর্ণানুক্রমিক তালিকা দেওয়া হল:
এট্রিবিউটঃ alt
ব্যাখ্যাঃ ইমেজের জন্য একটি বিকল্প টেক্সট উল্লেখ করে
এট্রিবিউটঃ disabled
ব্যাখ্যাঃ একটি ইনপুট উপাদান নিষ্ক্রিয় করা হবে উল্লেখ করে
এট্রিবিউটঃ href
ব্যাখ্যাঃ লিঙ্ক এর জন্য URL (ওয়েব ঠিকানা) উল্লেখ করে
এট্রিবিউটঃ id
ব্যাখ্যাঃ একটি উপাদানের জন্য একটি unique আইডি উল্লেখ করে
এট্রিবিউটঃ src
ব্যাখ্যাঃ ইমেজের জন্য URL (ওয়েব ঠিকানা) উল্লেখ করে
এট্রিবিউটঃ style
ব্যাখ্যাঃ একটি উপাদানের জন্য ইনলাইন সিএসএস স্টাইল উল্লেখ করে
এট্রিবিউটঃ title
ব্যাখ্যাঃ একটি উপাদান সম্পর্কে ( টুল টিপ হিসেবে প্রদর্শিত) অতিরিক্ত তথ্য উল্লেখ করে
এট্রিবিউটঃ value
ব্যাখ্যাঃ ইনপুট উপাদানের জন্য মান ( টেক্সট কন্টেন্ট ) উল্লেখ করে করে
এইচটি এম এল এর উপাদান সমূহ (HTML Elements)
এইচটি এম এল এর উপাদান সমূহ (HTML Elements)
Md. Atik Hasan
Webpage Design & Developer
এইচটিএমএএল এলিমেন্ট (HTML Element):
এইচটিএমএএল এলিমেন্ট (Element) দ্বারাই HTML Document বর্ণনা করা হয়। একটি HTML Document – এর চারটি মৌলিক Element থাকে। যথাঃ html, head, title, body।
এছাড়াও আরও অনেক Element রয়েছে।
HTML Element শুরু হয় Opening tag (<html>) দিয়ে এবং শেষ হয় closing tag (</html>) দিয়ে।
Opening tag এবং closing tag এর মাঝখানে যা থাকে তাই হচ্ছে Element।
যেমনঃ
<p>This is Element</p>
<h1>This is also an Element<h1>
<title>This is an element too</title>
ফলাফল
This is Element
This is also an Element
This is an element too
Nested HTML Element:
Nested HTML Element হল একটি এলিমেন্ট এর আন্ডারে আরও এলিমেন্ট থাকা।
যথাঃ
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
ফলাফল
My First Heading
My first paragraph.
এই উদাহরণে দেখা যাচ্ছে যে html এলিমেন্টের মাঝে body এলেমেন্ট রয়েছে।
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
এবং body এলিমেন্টের এর মাঝে আরও দুইটি এলেমেন্ট p এবং h1 রয়েছে।
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Empty HTML Element:
যে সকল এলেমেন্টের কোন কন্টেন্ট থাকে না তাদেরকে Empty element বলা হয়।
<br> হচ্ছে একটি empty element যার কোন closing tag নাই।
HTML Element- এর বৈশিষ্ট্যঃ
- Start/Opening tag দিয়ে শুরু হয়।
- End/Closing tag দিয়ে শেষ হয়।
- Start tag এবং End tag এর মাঝে Element থাকে।
- কিছু ক্ষেত্রে Element Content নাও থাকতে পারে।
- কিছু Element এর End/closing ট্যাগ নাও থাকতে পারে।
- Empty Element start ট্যাগের মাঝে শেষ করা হয়।
এইচটিএমএল এর মৌলিক বিষয় (HTML Basic Example)
এইচ টি এম এল এর সাধারন বিষয়াবলী
স্বর্ণা আখতার
(টিউটোরিয়াল টি পড়ার আগে অবশ্যই আপনাকে এইচ টি এম এল ট্যাগ এর ব্যবহার সম্পর্কে জানতে হবে। পরবর্তী অধ্যায় এ ট্যাগ সম্পর্কে আলোচনা করা হয়েছে।)
এইচ টি এম এল ডকুমেন্ট
সকল এইচ টি এম এল ডকুমেন্ট অবশ্যই ডকুমেন্ট এর টাইপ ঘোষণা এর মাধ্যমে শুরু করতে হয়। যেমন, <DOCTYPE html>
এইচ টি এম এল এর শুরু হয় <html> ট্যাগ দিয়ে এবং শেষ হয় </html> এর মাধ্যমে।
<body> এবং </body> এর মধ্যে প্রদর্শিত টেক্সট এইচ টি এম এল ডকুমেন্ট এর বিষয়বস্তু হিসাবে গণ্য হয়।
উদাহরনের সাহায্যে নিচে দেখানো হল
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
ফলাফল
My First Heading
My first paragraph.
এইচ টি এম এল এর শিরোনাম
এইচ টি এম এল এর শিরোনাম গুলো <h1> এবং <h6> ট্যাগ দ্বারা নির্ধারণ করা হয়।
যেমন,
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
ফলাফল
This is a heading
This is a heading
This is a heading
এইচ টি এম এল প্যারাগ্রাফ
এইচ টি এম এল প্যারাগ্রাফগুলোকে <p> ট্যাগে দ্বারা নির্ধারণ করা হয়।
যেমন,
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
ফলাফল
This is a paragraph.
This is another paragraph.
এইচ টি এম এল লিঙ্ক
এইচ টি এম এল এর লিঙ্কগুলো <a> ট্যাগের মাধ্যমে লিখা হয়।
যেমন,
<a href="http://bangla.salearningschool.com">This is a link</a>
ফলাফল
এখানে, লিঙ্ক এড্রেস গুলো কি রকম হবে তা নির্ভর করে “href” attribute এর উপর। আর অ্যাট্রিবিউট গুলো এইচ টি এম এল এর উপাদানগুলো সম্পর্কে বিস্তারিত বিবরণ প্রদান করে।
এইচ টি এম এল ইমেজ
এইচ টি এম এল ইমেজগুলোকে <img> ট্যাগের মাধ্যমে লিখা হয়। আর এখানে src, alt, height এবং width গুলো অ্যাট্রিবিউট হিসাবে ব্যবহার করা হয়।
উদাহরনের মাধ্যমে দেখানো হল,
<img src="http://bangla.salearningschool.com/wp-content/uploads/2015/04/bangla.salearning.png" alt="http://bangla.salearningschool.com" width="660" height="150">
ফলাফল
এইচটিএমএল এডিটর (HTML Editor)
এইচ টি এম এল এডিটর (HTML Editors)
এইচটিএমএল সম্পাদক
নয়ন চন্দ্র দত্ত
নোটপ্যাড বা TextEdit ব্যবহার করে এইচটিএমএল লিখা
পেশাদারী এইচটিএমএল এডিটর ব্যবহার করেও এইচটিএমএল সম্পাদনা করা যেতে পারে। যেমনঃ-
• Adobe Dreamweaver
• Microsoft Expression Web
• CoffeeCup HTML Editor
তবে, এইচটিএমএল শেখার জন্য আমরা নোটপ্যাড (পিসি) বা TextEdit (ম্যাক) মত টেক্সট এডিটর সুপারিশ করি।
আমরা বিশ্বাস করি একটি সাধারণ টেক্সট এডিটর ব্যবহার করে এইচটিএমএল শিখাটা সবচেয়ে ভাল।
নোটপ্যাড দিয়ে আপনার প্রথম ওয়েব পেজ তৈরি করতে নিম্নোক্ত ৪টি ধাপ অনুসরণ করুনঃ
ধাপ ১: নোটপ্যাড খোলা
উইন্ডোজ 7 বা তার আগের ভার্সন এ নোটপ্যাড ওপেন করতেঃ
ক্লিক Start (নীচে পর্দার বাম দিকে)। ক্লিক All Programs । ক্লিক Accessories । ক্লিক Notepad ।
Windows 8 বা তার পরের ভার্সন এ নোটপ্যাড খুলুনঃ
Start Screen ( উইন্ডো প্রতীক আপনার পর্দার নিচে বাম দিকে রয়েছে ) ওপেন করুন এবং Notepad টাইপ করুন।
ধাপ ২: কিছু এইচটিএমএল লিখুন
লিখুন বা নোটপ্যাডের মধ্যে কিছু এইচটিএমএল কপি করুন।
<DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
স্টেপ ৩: এইচটিএমএল পেজ সংরক্ষণ(Save) করুন
আপনার কম্পিউটারে ফাইলটি সংরক্ষণ করুন।
নোটপ্যাড মেনু থকে File > Save as সিলেক্ট করুন। ফাইলটির নাম "index.htm" দিন বা আপনার পছন্দমত অন্য কোন নাম দিয়ে এর পর .htm দিয়ে সেভ করুন।
UTF-8, এইচটিএমএল ফাইলের জন্য পছন্দসই এনকোডিং । ANSI এনকোডিং মার্কিন জুড়ে এবং পশ্চিম ইউরোপের শুধুমাত্র অক্ষর (characters) ।
ধাপ ৪: ব্রাউজারে আপনার এইচটিএমএল ফাইলটি দেখুন
আপনার প্রিয় ব্রাউজারে সংরক্ষিত এইচটিএমএল ফাইলটি খুলুন।
ব্রাউজারে ফাইলটি ওপেন করতে ফাইলের উপর মাউস পয়েন্টার রেখে ডাবল ক্লিক করুন বা মাউসের দান বাটন এ ক্লিক করে Open with এ মাউস পয়েন্টার রেখে ব্রাউজার চয়েজ করুন এবং ফাইল ওপেন করুন।
এইচটিএমএল টিউটোরিয়াল পরিচিতি (HTML tutorial Introduction)
HTML পরিচিতি
HTML কি?
HTML হল একটি মার্কআপ ল্যাঙ্গুয়েজ যার মাধ্যমে একটি ওয়েব পেজের কন্টেন্ট গুলোকে বর্ণনা করা হয়।
- HTML এর পূর্ণরূপ হল Hyper Text Markup Language
- মার্কআপ ল্যাঙ্গুয়েজ হল অনেকগুলো মার্কআপ ট্যাগের সমষ্টি
- HTML এর ডকুমেন্টস HTML ট্যাগ দ্বারা বর্ণনা করা হয়
- প্রত্যেকটি HTML ট্যাগ ডকুমেন্টের ভিন্ন ভিন্ন কন্টেন্টকে বর্ণনা করে
উদাহরণ
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>
ফলাফল :
My First Heading
My first paragraph.
উদাহরণের বর্ণনা
- প্রথমের DOCTYPE ঘোষণা করে যে ডকুমেন্টটির প্রকার হচ্ছে : HTML
- <html> এবং </html> এই ট্যাগের ভিতরের টেক্সটগুলো HTML ডকুমেন্টকে বর্ণনা করে
- <head> এবং </head>এই ট্যাগের ভিতরের টেক্সটগুলো HTML ডকুমেন্টটি কি প্রকারের সেই তথ্য ধারণ করে
- <title> এবং </title> এই ট্যাগের ভিতরের টেক্সটগুলো HTML ডকুমেন্টের টাইটেল ধারণ করে
- <body> এবং </body> এই ট্যাগের ভিতরের টেক্সটগুলো ওয়েবপেজ ব্রাউজারে যেসব কন্টেন্ট শো করবে তা ধারণ করে
- <h1> এবং </h1> এই ট্যাগের ভিতরের টেক্সট হেডিংকে বর্ণনা করে
- <p> এবং </p>এই ট্যাগের ভিতরের টেক্সটগুলো প্যারাগ্রাফকে ডিক্লেয়ার করে
HTML ট্যাগ
HTML ট্যাগ হল এঙ্গেল বন্ধনী <> দ্বারা আবদ্ধ কতগুলো কীওয়ার্ড
- HTML ট্যাগগুলো সাধারণত জোড়ায় জোরায় হয়ে থাকে, যেমন <p> এবং </p>
- জোড়ার প্রথম অংশকে বলা হয় স্টার্ট ট্যাগ এবং শেষ অংশকে বলা হয় ইন্ড ট্যাগ
- ইন্ড ট্যাগ স্টার্ট ট্যাগের মতই হয় শুধু ট্যাগ নেমের পূর্বে একটি অতিরিক্ত স্লেস (/) হয়
হিন্টসঃ স্টার্ট ট্যাগকে প্রায়ই ওপেনিং ট্যাগ বলা হয় এব ইন্ড ট্যাগকে বলা হয় ক্লোজিং ট্যাগ
ওয়েব ব্রাউজার
ওয়েব ব্রাউজার যেমন (Chrome, IE, Firefox, Safari) এগুলোর কাজ হচ্ছে HTML ডকুমেন্টসকে পড়া এবং তা ডিসপ্লে করা। ব্রাউজার কখনো HTML এর ট্যাগগুলোকে ডিসপ্লে করে না কিন্তু কোন কন্টেন্টকে কিভাবে ডিসপ্লে করতে হবে তার জন্য ট্যাগগুলোকে ব্যাবহার করে।
HTML পেজ স্ট্রাকচার
HTML পেজ কিভাবে ব্রাউজারে ডিসপ্লে হয় তার একটি স্ট্রাকচার নিচে দেয়া হল
<html>
</html> |
শুধুমাত্র বডি এরিয়ার ভিতরে যা থাকে তাই ব্রাউজারে ডিসপ্লে হয়
<!DOCTYPE> ঘোষণা
<!DOCTYPE> ঘোষণা করলে ব্রাউজার ওয়েব পেজের উপাদানগুলো সঠিকভাবে প্রদর্শন করতে পারে।
ওয়েবসাইটে বিভিন্ন ধরনের ডকুমেন্টস থাকে।
ডকুমেন্টসগুলোকে সঠিকভাবে প্রদর্শন করার জন্য ব্রাউজারকে ডকুমেন্ট টাইপ এবং ভার্সন সম্পর্কে জানতে হয়।
ডিক্লেয়ারেশন কেস সেনসেটিভ হয় না, সকল ধরনের কেস এখানে গ্রহণযোগ্য।
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
কমন ডিক্লেয়ারেশনস
HTML5
<!DOCTYPE html> |
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
HTML ভার্সনস
ওয়েবের যুগের সূচনা থেকেই HTML এর অনেকগুলো ভার্সন বের হয়েছে:
ভার্সন | সাল |
HTML | 1991 |
HTML 2.0 | 1995 |
HTML 3.2 | 1997 |
HTML 4.01 | 1999 |
XHTML | 2000 |
HTML5 | 2012 |