HelloWWW.java Servlet that generates HTML. This and all remaining servlets are in the cwp package and therefore should be installed in the cwp subdirectory. package cwp; import java.io.*; import javax.servlet.*; import javax.servlet.http.*; /** Simple servlet that generates HTML. * * Taken from Core Web Programming Java 2 Edition * from Prentice Hall and Sun Microsystems Press, * . * May be freely used or adapted. */ public class HelloWWW extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); String docType = "\n"; out.println(docType + "\n" + "\n" + "\n" + "
Tag Archives: HTML
EmployeeTest2.java: A test case for the database utilities. Prints results formatted as an HTML table.
package cwp; import java.sql.*; /** Connect to Oracle or Sybase and print "employees" table * as an HTML table. * */ public class EmployeeTest2 { public static void main(String[] args) { if (args.length < 5) { printUsage(); return; } String vendorName = args[4]; int vendor = DriverUtilities.getVendor(vendorName); if (vendor == DriverUtilities.UNKNOWN) { printUsage(); return; } String driver = DriverUtilities.getDriver(vendor); String host = args[0]; String dbName = args[1]; String url = DriverUtilities.makeURL(host, dbName, vendor); String username = args[2]; String password = args[3]; String query = "SELECT * FROM employees"; DBResults results = DatabaseUtilities.getQueryResults(driver, url, username, password, query, true); System.out.println(results.toHTMLTable("CYAN")); } private static void printUsage() { System.out.println("Usage: EmployeeTest2 host dbName " + "username password oracle|sybase."); } }
এইচটিএমএল কুইজ । HTML Quiz
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
এইচটিএমএল ইনপুট ধরন (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 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 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>
যা একটি ইনলাইন ফ্রেম সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়।
এইচটিএমএল প্রতিক্রিয়াশীল ওয়েব ডিজাইন (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>
ASP.NET টিউটোরিয়াল :[পর্বঃ ২০]:: ASP.NET Web Forms এর HTML Server Control ট্যাগের বর্ণনা . ASP.NET Web Forms – HTML Controls
ASP.NET টিউটোরিয়াল :[পর্বঃ ২০]:: ASP.NET Web Forms এর HTML Server Control ট্যাগের বর্ণনা
লেখকঃ মোস্তাফিজুর ফিরোজ ।
শিখতে শিখতে আমরা কিন্তু প্রায় শেষ পর্যায়ে । আজ আমরা শিখবো ASP.NET Web Forms এর HTML Server Control ট্যাগের বর্ণনা করা ।
HTML Server Controls
HTML সার্ভার কনট্রোল হলো HTML ট্যাগ যেটা সার্ভারকে বুঝাতে সাহায্য করে ।
HTML ইলিমেন্টস গুলো ASP.NET এর ভিতর সাধারণ টেক্সট আকারেই থাকে । এটাকে প্রোগামেবল করার জন্য এতে runat="server" এলিমেন্ট যোগ করা হয়ে থাকে । এখানে runat="server" এলিমেন্ট প্রকাশ করে এটা একটা সার্ভার কনট্রোল ।
উল্লেখ্য, সকল এইচটিএমএল সার্ভার কনট্রোল গুলো runat="server" এট্রিবিউটের সাথে <form> ট্যাগ আকারে থাকতে হবে ।
ASP.NET এর ভিতরকার সকল এইচটিএমএল এলিমেন্টস গুলো ভালভাবে ট্যাগ দ্বারা শেষ হতে হবে ।
HTML Server Control ট্যাগের বর্ণনা
HtmlAnchor = <a> HTML element কনট্রোল করে ।
HtmlButton = <button> HTML element কনট্রোল করে ।
HtmlForm = <form> HTML element কনট্রোল করে ।
HtmlGeneric = <body>, <div>, <span> প্রভৃতি HTML server কনট্রোল করে ।
HtmlImage = <image> HTML element কনট্রোল করে ।
HtmlInputButton = <input type="button">, <input type="submit">, এবং <input type="reset"> HTML elements কনট্রোল করে ।
HtmlInputCheckBox = <input type="checkbox"> HTML element কনট্রোল করে ।
HtmlInputFile = <input type="file"> HTML element কনট্রোল করে ।
HtmlInputHidden = <input type="hidden"> HTML element কনট্রোল করে ।
HtmlInputImage = <input type="image"> HTML element কনট্রোল করে ।
HtmlInputRadioButton = <input type="radio"> HTML element কনট্রোল করে ।
HtmlInputText = <input type="text"> এবং <input type="password"> HTML elements কনট্রোল করে ।
HtmlSelect = <select> HTML element কনট্রোল করে ।
HtmlTable = <table> HTML element কনট্রোল করে ।
HtmlTableCell = <td> এবং <th> HTML elements কনট্রোল করে ।
HtmlTableRow = <tr> HTML element কনট্রোল করে ।
HtmlTextArea = <textarea> HTML element কনট্রোল করে ।
আপনারা এই ট্যাগ গুলো এবং এদের কাজ মুখস্থ করে ফেলার চেষ্টা করবেন । তাহলে আপনাদের কোডিং করতে অনেক সুবিধা হবে ।
জে কুয়েরি ইভেন্ট । jQuery Events
আরিফ
আজ আমি আপনাদের সামনে web page এর একটি বিশেষ element "event" নিয়ে আলোচনা করবো। প্রথমে জেনে নেই ইভেন্ট কি??? সহজ কথায় এটা যেকোন কিছু যা আপনি একটি ওয়েব পেজ এ করে থাকেন। যেমন ধরুন ফেসবুকে মাউসের পয়েন্টার আপনার সেরা সেলিব্রিটির নামের উপর রাখলেন, সাথে সাথে দেখতে পাবেন একটি পপ- আপ বক্স আপনার সামনে আসবে যেখানে সেই সেলিব্রিটির info দেখাবে। তারপর ধরুন আপনি একটি অনলাইন রেডিও স্টেশন এ গান শুনছেন, আপনার মনে হরো ভলিউম বাড়ানো দরকার, আপনি vol+ বাটনে ক্লিক করলেন এক্ষেত্রে ক্লিকটাই event. অর্থাৎ মাউস বলেন কিবোর্ড বলেন যেকোন কি এর জন্য যেকোন এক্টিভিটিই হলো ইভেন্ট। এখন এই যে ইভেন্ট এবং তার এক্টিভিটি কাজ করানোর জন্য আপনার সাংকেতিক চিহ্ন এর প্রয়োজন হবে। আপনার একটি ওয়েব পেজ বানানোর জন্য। সর্বাধিক ব্যবহৃত সংকেত টি হলো
$("p").click();
এবার চলুন আমরা কয়েকটি ইভেন্ট নিয়ে আলোচনা করি:
click:
একটি পাতা সব অনুচ্ছেদ (প্যারা) এর জন্য একটি ক্লিক ইভেন্ট ব্যবহার করার জন্য:
$("p").click();
পরবর্তী ধাপে ক্লিক করার ফলে কি ঘটবে তা নির্ধারণ করা হয়। এর জন্য অবশ্যই একটি ফাংশন ব্যবহার করা আবশ্যক:
$("p").click(function(){ // action goes here!! });
এখানে কিছু DOM ইভেন্ট দেয়া হলো:
মাউস ইভেন্ট | কীবোর্ড ইভেন্ট | ফরম ইভেন্ট | ডকুমেন্ট/উইন্ডো ইভেন্ট |
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload |
সাধারণভাবে ব্যবহৃত jQuery Event Methods
click():
click() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML element এর সাথে যুক্ত করে।
এই ফাংশনটি কাজ করবে যখন ইউজার HTML element টিতে ক্লিক করবেন।
এখানে একটি উদাহরন দেখুন। এই p এর উপর ক্লিক করলে p উধাও হয়ে যাবে:
$("p").click(function(){
$(this).hide();
});
এখান থেকে উদাহরন দেখুন:
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> <p>Click me too!</p> </body> </html>
dblclick():
dblclick() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML element এর সাথে যুক্ত করে।
এই ফাংশনটি কাজ করবে যখন ইউজার HTML element টিতে ডাবল ক্লিক করবেন।
$("p").dblclick(function(){ $(this).hide(); });
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").dblclick(function(){ $(this).hide(); }); }); </script> </head> <body> <p>If you double-click on me, I will disappear.</p> <p>Click me away!</p> <p>Click me too!</p> </body> </html>
mouseenter():
mouseenter() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML element এর সাথে যুক্ত করে।
এই ফাংশনটি কাজ করবে যখন মাউস পয়েন্টার HTML element এর ভিতরে প্রবেশ করবে।
$("#p1").mouseenter(function(){ alert("You entered p1!"); });
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("#p1").mouseenter(function(){ alert("You entered p1!"); }); }); </script> </head> <body> <p id="p1">Enter this paragraph.</p> </body> </html>
mouseleave():
mouseleave() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML element এর সাথে যুক্ত করে।
এই ফাংশনটি কাজ করবে যখন মাউস পয়েন্টার HTML element এর ভিতরে থেকে বের হয়ে যায়।
$("#p1").mouseleave(function(){ alert("Bye! You now leave p1!"); });
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("#p1").mouseleave(function(){ alert("Bye! You now leave p1!"); }); }); </script> </head> <body> <p id="p1">This is a paragraph.</p> </body> </html>
mousedown():
mousedown() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML element এর সাথে যুক্ত করে।
এই ফাংশনটি কাজ করবে যখন মাউস পয়েন্টারটি এলিমেন্টটির উপরে থাকবে এবং HTML element এর উপর বাম, ডান বা মিডেল ক্লিক করা হবে,
$("#p1").mousedown(function(){ alert("Mouse down over p1!"); });
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("#p1").mousedown(function(){ alert("Mouse down over p1!"); }); }); </script> </head> <body> <p id="p1">This is a paragraph.</p> </body> </html>
mouseup():
mouseup() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML element এর সাথে যুক্ত করে।
এই ফাংশনটি কাজ করবে যখন মাউস পয়েন্টারটি এলিমেন্টটির উপরে থাকবে এবং HTML element এর উপর বাম, ডান বা মিডেল ক্লিক ছেড়ে দেয়া হবে,
$("#p1").mouseup(function(){ alert("Mouse up over p1!"); });
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("#p1").mouseup(function(){ alert("Mouse up over p1!"); }); }); </script> </head> <body> <p id="p1">This is a paragraph.</p> </body> </html>
hover():
hover() method দুইটি ইভেন্ট হ্যান্ডেলার ফাংশন mouseenter() এবং mouseleave() এর সমন্নয়ে HTML element এর সাথে যুক্ত করে।
প্রথম ফাংশনটি কাজ করবে যখন মাউস পয়েন্টারটি এলিমেন্টটির ভিতরে প্রবেশ করবে এবং প্রথম ফাংশনটি কাজ করবে যখন মাউস পয়েন্টারটি এলিমেন্টটির ভিতর থেকে বাহিরে যাবে,
$("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); });
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); }); }); </script> </head> <body> <p id="p1">This is a paragraph.</p> </body> </html>
focus():
focus() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML ফর্ম ফিল্ড এর সাথে যুক্ত করে।
এই ফাংশনটি কাজ করবে যখন ফিল্ডটিকে ফোকাস করা হবে,
$("input").focus(function(){ $(this).css("background-color", "#cccccc"); });
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("input").focus(function(){ $(this).css("background-color", "#cccccc"); }); $("input").blur(function(){ $(this).css("background-color", "#ffffff"); }); }); </script> </head> <body> Name: <input type="text" name="fullname"><br> Email: <input type="text" name="email"> </body> </html>
blur():
blur() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML ফর্ম ফিল্ড এর সাথে যুক্ত করে।
এই ফাংশনটি কাজ করবে যখন ফিল্ডটি থেকে ফোকাস সরিয়ে নেয়া হবে,
$("input").blur(function(){ $(this).css("background-color", "#ffffff"); });
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("input").focus(function(){ $(this).css("background-color", "#cccccc"); }); $("input").blur(function(){ $(this).css("background-color", "#ffffff"); }); }); </script> </head> <body> Name: <input type="text" name="fullname"><br> Email: <input type="text" name="email"> </body> </html>
on():
on() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML ফর্ম ফিল্ড এর সাথে যুক্ত করে।
$("p").on("click", function(){ $(this).hide(); });
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").on("click", function(){ $(this).hide(); }); }); </script> </head> <body> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> <p>Click me too!</p> </body> </html>
<p> এলিমেন্ট এ একাধিক ইভেন্ট হ্যান্ডেলার ফাংশন যোগ করার উদাহরণ,
$("p").on({ mouseenter: function(){ $(this).css("background-color", "lightgray"); }, mouseleave: function(){ $(this).css("background-color", "lightblue"); }, click: function(){ $(this).css("background-color", "yellow"); } });
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").on({ mouseenter: function(){ $(this).css("background-color", "lightgray"); }, mouseleave: function(){ $(this).css("background-color", "lightblue"); }, click: function(){ $(this).css("background-color", "yellow"); } }); }); </script> </head> <body> <p>Click or move the mouse pointer over this paragraph.</p> </body> </html>
আমরা এ অধ্যায়ে HTML Attribute সম্পর্কে আলোচনা করব। HTML Attributes
আমরা এ অধ্যায়ে HTML Attribute সম্পর্কে আলোচনা করব। Attribute মূলত HTML element সম্পর্কে অতিরিক্ত তথ্য (information) প্রদান করে। Attribute সর্বদা start tag এর মাধ্যমে চিহ্নিত হয়। HTML Document এ Attribute প্রকাশ হয় এভাবে name= “value”। নিম্নে HTML এ ব্যবহৃত কিছু Attributes এর list তুলে ধরা হল-
Attribute(বৈশিষ্ট্য) | Description(বর্ণনা) |
Alt | Image এর alternative text কে চিহ্নিত করে এই Attribute। |
Disabled | কোন input element কে নিষ্ক্রিয়(disable)করতে একে ব্যবহার করা হয়। |
Herf | কোন link এর web address কে চিহ্নিত করে। |
Id | এর দ্বারা element এর identification name বোঝায়।তবে প্রতিটি web page এর id একই রকম হওয়া যাবে না। |
Src | Image এর source URL(web address)কে উল্লেখ করে। |
Style | Element এর style(শৈলি)কে তুলে ধরা হয় এর মাধ্যমে। |
Title | Element এর অতিরিক্ত তথ্য নির্দেশ করতে একে ব্যবহার করা হয়।যেমন-
<p title=” salearningschool.com সম্পর্কে ”> Salearningschool.com একটি web developer site । এটি web developing সম্পর্কে বিভিন্ন ধরণের Tutorial প্রদান করে। </p> এই উদাহরণে <p> element এর attribute হল Title এবং এর value হল salearningschool.com। |
Value | এর দ্বারা Document এ অবস্থিত element এর বিষয়বস্তুকে নির্দেশ করা হয়। |
Width, Height | Document এ ব্যবহৃত image এর size কে এই attribute দ্বারা প্রকাশ করা হয়। |
Lang | Element এর language (ভাষা) কে উল্লেখ করা হয় এর মাধ্যমে। |
Translate | যদি কিনা কোন element এর বিষয়বস্তু translate করার প্রয়োজন হয় তখন এই attribute ব্যবহৃত হয়। |
Class | কোন element এর এক বা একাধিক css class কে প্রকাশ করা হয় এর দ্বারা। |
Hidden | কোন element নেই অর্থে এটি ব্যবহৃত হয়য়। |
Spell check | এর দ্বারা কোন element এর বানান ও ব্যকরণ ঠিক আছে কিনা পরীক্ষা করা হয়। |
এইচটিএমএল ক্লাসেস (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 এর প্রথমিক কিছু বিষয়
HTML এর প্রথমিক কিছু বিষয়
HTML Documents(নথি):
<!DOCTYPE html> লেখার মধ্য দিয়ে সব ধরণের HTML document শুরু হয়।<html> tag লেখার মাধ্যমে শুরু এবং </html> tag লেখার মাধ্যমে শেষ হয়।<body> এবং </body> tag এর মাঝখানে HTML Document এর দৃশ্যমান অংশটুকু অবস্থান করে।
উদাহরণস্বরূপঃ
<!DOCTYPE html>
<html>
<body>
<h1> আমার প্রথম শিরোনাম </h1>
<p> আমার প্রথম অনুচ্ছেদ <p>
</body>
<html>
HTML Headings(শিরোনাম):
<h1> থেকে <h6> tag দিয়ে HTML এর Heading কে বিশেষায়িত করা হয়।
উদাহরণঃ
<h1> এই হল একটি শিরোনাম </h1>
<h2> এই হল একটি শিরোনাম </h2>
<h3> এই হল একটি শিরোনাম </h3>
HTML Paragraphs(অনুচ্ছেদ):
<p> tag এর মধ্য দিয়ে HTML এর Paragraph কে তুলে ধরা হয়।
উদাহরণঃ
<p> এই হল একটি অনুচ্ছেদ <p>
HTML Links(সংযোগ):
<a> tag এর মধ্য দিয়ে HTML Link কে তুলে ধরা হয়।
উদাহরণস্বরূপঃ
<a herf =http://www.salearningschool.com>
This is a link </a>
এখানে (herf )attribute টি ব্যবহৃত হয়েছে link Address কে চিহ্নিত করার জন্য।এই attribute গুলো HTML elements এর অতিরিক্ত তথ্য সরবারহ করার জন্য ব্যবহৃত হয়।
HTML Images(চিত্র):
<img> tag এর মাধ্যমে HTML image কে প্রকাশ করা হয়।যার source file হিসেবে (src), alternative text হিসেবে (alt) এবং size প্রকাশ করতে (width এবং height) attribute ব্যবহার করা হয়।
উদাহরণস্বরূপঃ
<img src = “salearningschools.jpg” alt= ”salearningschool.com” width= “104” height= “ 142”>
আপনারা পরবর্তী অধ্যায়ে attribute সম্পর্কে আরও জানবেন।
এইচটিএমএল ব্লক (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>- ডকুমেন্ট কে ইনলাইন হিসেবে ডিফাইন করার জন্য
jQuery – HTML DOM উপদান/element এর আয়তন (প্রস্থ, উচ্চতা )
Query এর আয়তন নিয়ে কাজ করার জন্য বেশ কিছু গুরুত্বপূর্ণ মেথড আছে:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
Query আয়তন
jQuery এর width() এবং height() মেথড
width() মেথড একটি এলিমেন্ট এর প্রসস্থতা সেট করে বা ফেরত দেয় (প্যাডিং, সীমানা, বা মার্জিন সহ)।
height() মেথড একটি এলিমেন্ট এর উচ্চতা সেট করে বা ফেরত দেয় (প্যাডিং, সীমানা, বা মার্জিন সহ)।
নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর প্রস্থ এবং উচ্চতা দেখানো হলঃ
$("button").click(function(){ var txt = ""; txt += "Width: " + $("#div1").width() + "</br>"; txt += "Height: " + $("#div1").height(); $("#div1").html(txt); });
ফলাফল : width() এবং height()
jQuery এর innerWidth () এবং innerHeight () পদ্ধতি
InnerWidth () মেথড একটি এলিমেন্ট এর এর মান (প্যাডিং সহ) ফেরত দেয়/প্রদান করে।
InnerHeight () মেথড একটি এর উচ্চতা এর মান (প্যাডিং সহ) ফেরত দেয়/প্রদান করে।
নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর ভেতরের প্রস্থ / উচ্চতা দেখানো হল:
$("button").click(function(){ var txt = ""; txt += "Inner width: " + $("#div1").innerWidth() + "</br>"; txt += "Inner height: " + $("#div1").innerHeight(); $("#div1").html(txt); });
ফলাফল : innerWidth () এবং innerHeight ()
jQuery এর outerWidth () এবং outerHeight () পদ্ধতি
OuterWidth () মেথড একটি উপাদান প্রস্থ নির্দেশ করে (প্যাডিং এবং সীমানা সহ)।
OuterHeight () মেথড একটি উপাদান এর উচ্চতা নির্দেশ করে থাকে (প্যাডিং এবং সীমানা সহ)।
নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর বাইরের প্রস্থ / উচ্চতা দেখানো হল:
$("button").click(function(){ var txt = ""; txt += "Outer width: " + $("#div1").outerWidth() + "</br>"; txt += "Outer height: " + $("#div1").outerHeight(); $("#div1").html(txt); });
ফলাফল : outerWidth () এবং outerHeight ()
outerWidth(true) মেথড একটি এলিমেন্ট এর এর প্রস্থ (প্যাডিং, সীমানা, বা মার্জিন সহ) ফেরত দেয়/প্রদান করে।
outerHeight(true) মেথড একটি এলিমেন্ট এর এর উচ্চতা (প্যাডিং, সীমানা, বা মার্জিন সহ) ফেরত দেয়/প্রদান করে।
$("button").click(function(){ var txt = ""; txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>"; txt += "Outer height (+margin): " + $("#div1").outerHeight(true); $("#div1").html(txt); });
ফলাফল : outerWidth(true) মেথড এবং outerHeight(true) মেথড
jQuery এর আরো width() এবং height() পদ্ধতি
নিম্নলিখিত উদাহরণে আমরা (এইচটিএমএল ডকুমেন্ট) এবং উইন্ডো (ব্রাউজার ভিউপোর্ট) প্রস্থ এবং উচ্চতা দেখব:
$("button").click(function(){ var txt = ""; txt += "Document width/height: " + $(document).width(); txt += "x" + $(document).height() + "\n"; txt += "Window width/height: " + $(window).width(); txt += "x" + $(window).height(); alert(txt); });
ফলাফল : width() এবং height()
নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর প্রস্থ ও উচ্চতা দেখানো হল:
$("button").click(function(){ $("#div1").width(500).height(500); });
ফলাফল : প্রস্থ ও উচ্চতা
এইচটিএমএল অনুচ্ছেদ. 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 এর সম্পাদনা : IDE for HTML
HTML এর সম্পাদনা
নোটপ্যাড বা TextEdit ব্যবহার করে HTML লিখা
নিচে উল্লেখিত একটি পেশাদারী HTML এডিটর ব্যবহার করে HTML সম্পাদনা করা যেতে পারে:
* অ্যাডোবি Dreamweaver
* মাইক্রোসফট এক্সপ্রেশন ওয়েব
* CoffeeCup এইচটিএমএল এডিটর
তবে, এইচটিএমএল শেখার জন্য আমরা নোটপ্যাড (পিসি) বা TextEdit (ম্যাক) মত একটি টেক্সট এডিটর সুপারিশ করব।
একটি সহজ টেক্সট এডিটর ব্যবহার করে এইচটিএমএল শিখার একটি ভালো উপায় বলে আমরা বিশ্বাস করি।
নোটপ্যাড দিয়ে আপনার প্রথম ওয়েব পেজ তৈরি করার জন্য নীচের 4 ধাপ অনুসরণ করুন:
ধাপ 1: নোটপ্যাড ওপেন করুন
উইন্ডোজ 7 বা তার আগের নোটপ্যাড খোলা :
স্টার্ট মেনুতে ক্লিক করুন (পর্দা নিচে বামে) অল প্রগ্রামসে ক্লিক করুন. এ্যাক্সেসরিসে ক্লিক করুন. নোটপ্যাডে ক্লিক করুন.
Windows 8 বা পরে নোটপ্যাড খোলা:
স্টার্ট স্ক্রিন খুলুন (আপনার পর্দায় বামে নীচে উইন্ডো প্রতীক). নোটপ্যাড টাইপ করুন.
ধাপ 2: কিছু এইচটিএমএল লিখুন
নোটপ্যাড মধ্যে কিছু এইচটিএমএল লিখুন বা কপি করুন.
উদাহরণ:
< ! DOCTYPE html>
আমার প্রথম শীর্ষক
আমার প্রথম অনুচ্ছেদ.
নোটপ্যাড ধাপ 3: এইচটিএমএল সংরক্ষণ করুন
আপনার কম্পিউটারে ফাইল সংরক্ষণ করুন.
ফাইল নির্বাচন করুন >নোটপ্যাড মেনু হিসাবে সংরক্ষণ করুন .
আপনি ফাইল এক্সটেনশন হিসাবে .HTM বা .এইচটিএমএল ব্যবহার করতে পারেন. কোন পার্থক্য নাই, এটি আপনার উপরে।
ধাপ 4: আপনার ব্রাউজারে এইচটিএমএল পেজ দেখুন।
আপনার সংরক্ষিত HTML ফাইল ডাবল ক্লিক করুন, এবং এর ফলে নিচের মত দেখতে হবে।
ব্রাউজারে দেখুন
জেনে নিন HTML 5 (এইচটিএমএল ৫) এর খুঁটিনাটি : Some details on HTML5
জেনে নিন HTML 5 (এইচটিএমএল ৫) এর খুঁটিনাটি
আজ আমি HTML 5 (এইচটিএমএল ৫)- এর খুঁটিনাটি নিয়ে আলোচনা করব । যারা HTML (এইচটিএমএল)- সম্পর্কে অথবা HTML 5 (এইচটিএমএল ৫)- সম্পর্কে জানেন না বা কিছু জানেন; আশা করি তারা এ সম্পর্কে মোটামোটি ধারণা নিতে পারবেন অর্থাৎ তাদের জন্য টিউনটি কিছুটা হলেও উপকারে আসতে পারে
HTML (এইচটিএমএল) কি ?
নতুনদের মনে প্রশ্ন জাগতে পারে যে, HTML (এইচটিএমএল) আবার কি ? যা অনেকের মুখে শুনা যায় ! তাদের উদ্দেশে আমি বলছি; HTML (এইচটিএমএল) হল এক প্রকার Markup Language (মার্কআপ ল্যাঙ্গুয়েজ), অর্থাৎ এটির মাধ্যমে কোন একটি ওয়েব পেইজের Markup (মার্কআপ) তথা মূল কাঠামো গঠন করা হয় । যার পূর্ণ নাম হচ্ছে Hyper Text Markup Language (হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ) ।
তাছাড়া HTML (এইচটিএমএল) কত গুলো ট্যাগের সমন্বয়ে গঠিত, যা কোন ওয়েব পেইজের Markup (মার্কআপ) তথা কাঠামো গঠন করে, আর এই Markup (মার্কআপ) ট্যাগ এর কাজ হল কোন ওয়েব পেইজের বিভিন্ন ইলিমেন্ট কিভাবে প্রদর্শিত হবে তা নির্দেশ করা । একটি ওয়েব পেইজের ইলিমেন্ট যথাক্রমেঃ টেক্সট, ইমেজ, অডিও, ভিডিও ইত্যাদি ।
HTML (এইচটিএমএল) আমাদের কেন প্রয়োজন ?
একটি ওয়েব পেইজ বা কোন একটি ওয়েব সাইট তৈরি করতে HTML (এইচটিএমএল)- এর গুরুত্ব অপরিসীম । কেননা; যেহেতু HTML (এইচটিএমএল) কোন একটি ওয়েব পেইজের Markup (মার্কআপ) অর্থাৎ মূল কাঠামো গঠন করে, সেহেতু কোন ওয়েব পেইজ ডিজাইন করতে অথবা ওয়েবসাইট তৈরি করতে HTML (এইচটিএমএল) এর বিকল্প কিছু নেই ।
HTML (এইচটিএমএল) এর ইতিহাস
বহুল ব্যবহারিত আজকের এই HTML (এইচটিএমএল) আমাদের নিকট আপনা-আপনি চলে আসে নাই এটির পেছনেও রয়েছে এক বিশাল ইতিহাস, HTML (এইচটিএমএল) এর সৃষ্টি কর্তা হলেন- ইউরোপীয় বিজ্ঞানী স্যার টিম বার্নাস লী ।
তিনি ১৯৮০ সালে CERN এ একজন বিশেষজ্ঞ থাকাকালীন CERN গবেষকদের মাঝে তথ্য শেয়ারের জন্য ENQUIRE Prototyped নামে একটি System এর প্রস্তাব দেন ।
তারপর, ১৯৮৯ সালে স্যার টিম বার্নাস লী ইন্টারনেট ভিত্তিক একটি Hyper Text (হাইপার টেক্সট) সিস্টেম প্রস্তাবে একটি মেমো লিখেন । এবং ১৯৯০ সালে স্যার টিম বার্নাস লী ব্রাউজারের ও সার্ভারের সফটওয়্যারের HTML (এইচটিএমএল) উল্লেখ্য করেন । তারপর এই বছরেই স্যার টিম বার্নাস লী ও CERN এর তথ্য ইঞ্জিনিয়ার Robert Cailliau যৌথ ভাবে CERN কে এ প্রকল্পের জন্য অর্থায়নের অনুরোধ করেন কিন্তু প্রকল্পটি আনুষ্ঠানিক ভাবে CERN দ্বারা গৃহীত হয়নি । তবে HTML (এইচটিএমএল) পরিচিতি লাভ করে একই সালে NCSA কর্তৃক ডেভেলপকৃত মোজাইক ব্রাউজারের মাধ্যমে ।
তাছাড়া স্যার টিম বার্নাস লী অলাভজন জনসেবামূলক প্রতিষ্ঠান ওয়ার্ল্ড ওয়াইড ওয়েব এর তত্ত্বাবধায়ক ওয়ার্ল্ড ওয়াইড ওয়েব কনসোটিয়াম (W3C) এর ডিরেক্টর । ওয়ার্ল্ড ওয়াইড ওয়েব কনসোটিয়াম কর্তৃক ডেভেলপকৃত HTML 3.2 প্রকাশিত হয় ১৯৯৭ সালের জানয়ারিতে ও একই সনের শেষের দিকে প্রকাশ হয় HTML 4.2 এবং HTML (এইচটিএমএল) এর সর্বশেষ সংস্করণ তথা HTML 5 প্রকাশিত হয় ২০১০ সালে ।
HTML 5 (এইচটিএমএল ৫) কি ?
HTML 5 (এইচটিএমএল ৫) হচ্ছে HTML (এইচটিএমএল) এর সর্বশেষ সংস্করণ । যা ২০১০ সালে প্রকাশিত হয় এবং এখন পর্যন্ত পরবর্তী কোন সংস্করণ আসে নি ।
HTML 5 (এইচটিএমএল ৫) এ নতুন কিছু বৈশিষ্ট্যঃ
০১. মিডিয়া প্লেব্যাকের জন্য
০৩. স্থানীয় সংগ্রহস্থলের জন্য সমর্থন ।
০৪. নতুন ফর্ম নিয়ন্ত্রণ, যেমন ক্যালেন্ডার, তারিখ, সময়, ই-মেইল, অনুসন্ধান, ইউআরএল ইত্যাদি ।
০৫. নতুন নির্দিষ্ট বিষয়বস্তুর উপাদান, যেমনঃ
HTML 5 (এইচটিএমএল ৫) এর কিছু নিয়মঃ
০১. উন্নত ত্রুটি পরিচালনার ব্যবস্থা থাকতে হবে ।
০২. নতুন বৈশিষ্ট গুলো এইচটিএমএল, সিএসএস, DOM এবং জাভাস্ক্রিপ্টের উপর ভিত্তি করে তৈরি করা।
০৩. একাধিক স্ক্রিপ্টিং প্রতিস্থাপন করার সুবিধা যুক্ত করা ।
০৪. আলাদা প্লাগিনের ব্যবহার কমাতে হবে (যেমন: ফ্ল্যাশ) ।
০৫. HTML 5 (এইচটিএমএল ৫) এর স্বাধীন ডিভাইস হতে হবে ।
০৬. উন্নয়ন প্রক্রিয়ায় জনগণের কাছে দৃশ্যমান হবে ।
HTML 5 (এইচটিএমএল ৫) এর জন্য ব্রাউজার সাপোর্টঃ
HTML 5 (এইচটিএমএল ৫) এখনও অফিসিয়ালি প্রকাশিত হয় নি, তাছাড়া কোন ব্রাউজারে HTML 5 (এইচটিএমএল ৫) এর পূর্ণ সমর্থন আসে নাই । তবে প্রতিনিয়ত ব্রাউজারগুলোতে নতুন নতুন উপাদান যুক্ত করা হচ্ছে ।
HTML দ্বারা কিভাবে ডকুমেন্টসকে প্যারাগ্রাফ আকারে লেখা যায় । HTML and Paragraph
HTML দ্বারা কিভাবে ডকুমেন্টসকে প্যারাগ্রাফ আকারে লেখা যায় । লেখকঃ মোস্তাফিজুর ফিরোজ ।
আজ আমি আপনাদের সামনে আলোচনা করবো HTML দ্বারা কিভাবে ডকুমেন্টসকে প্যারাগ্রাফ আকারে লেখা যায় । HTML প্যারাগ্রাফঃ উদাহরণ হিসেবে আমরা দেখাতে পারিঃ এভাবে লিখে চেষ্টা করুন । HTML ডিসপ্লেঃ উদাহরণ হিসেবে আমরা দেখাতে পারি নিম্নরূপেঃ Example <p> উপরের দুইটি উদাহরণ লিখে দেখবেন ফলাফল একই দেখাবে । তাই স্পেস অথবা লাইন বেশি দিয়েও লাভ নেই । HTML লাইন ব্রেক এর ব্যবহারঃ এভাবে আপনি HTML লাইন ব্রেক দিতে পারলেন । কিন্তু কবিতা লেখার সময় আপনাকে কিন্তু এভাবে লিখলে হবে না । তখন আপনাকে <pre> ট্যাগ ব্যবহার করতে হবে । <p>This will display as a poem:</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> একটা কবিতা লিখে এভাবে HTML এর ভাষায় লিখেই দেখেন না । এভাবে আপনি HTML লিখে প্রাকটিস করতে থাকুন। আর আপনি এটা নোটপ্যাড প্লাস দিয়ে লিখে .html ফরমেটে সেভ করে আপনার ব্রাউজার দিয়ে ওপেন করে দেখতে পারেন কেমন হল । আর না বুঝলে আমি তো আছিই ।
|
HTML 5 এর উপর প্রাথমিক আলোচনা । Overview on HTML 5
HTML 5 এর উপর প্রাথমিক আলোচনা । Overview on HTML 5
HTML এর tag সমূহ : HTML Tags
HTML এর tag সমূহ
নামঃ সাদিক
TAG ব্যবহার ধরন
<!--...--> মন্তব্য করার জন্য STF
<!DOCTYPE> Html ডকুমেন্টের ধরন নির্ধারনের জন্য STF
<a> লিংক দেওয়ার জন্য STF
<abbr> Abbreviation দেওয়ার জন্য STF
<acronym> Acronym দেওয়ার জন্য STF
<address> Html ডকুমেন্টের লেখক এর তথ্য দেওয়ার জন্য STF
<applet> Applet এম্বেড করার জন্য TF
<area/> Image-map এরিয়া করার জন্য STF
<b> লেখা bold করার জন্য STF
<base/> Specific the basic url/target for all
relative urls in a documant STF
<basefont> ফন্ট সাইজ ও কালার নির্ধারন করার জন্য TF
<bdo> Overrides the current text direction STF
<big> বড় লেখার জন্য TF
<blockquote> উক্তি /quotation দেওয়ার জন্য STF
<body> বডি দেওয়ার জন্য STF
<br/> লাইন ব্রেক করার জন্য STF
<button> বাটন আনার জন্য STF
<caption> ক্যপশন দেওয়ার জন্য STF
<center> লেখা মাঝখানে নেওয়ার জন্য TF
<cite> Defines a citation STF
<code> কোড শো করার জন্য STF
<coi/> টেবিলের মধ্যে কলাম নেয়ার জন্য STF
<colgroup> Spucifies a group of one or more
columns in a table for formating STF
<dd> Defines a description of an
item in a definition list STF
<del> কোন লেখা মুছার জন্য STF
<dfn> Defines a definition term STF
<dir> ডাইরেক্টরি লিস্ট আনার জন্য TF
<div> Defines a section in a document STF
<dl> Defines a definition list STF
<dt> Defines a term(an item) in a definition list STF
এইচটিএমএল লিস্ট (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” দিন এবং ট্যাগ শেষ করেন তাহলে ৪৯ থেকেই আপনার তালিকা শুরু হবে ।
জেনে নিন প্রয়োজনীয় কিছু বিশেষ এইচটিএমএল কোড
জেনে নিন প্রয়োজনীয় কিছু বিশেষ এইচটিএমএল কোড :
বর্তমান পৃথিবী হচ্ছে প্রযুক্তির বিশ্ব আর এই প্রযুক্তির বিশ্বে আর সব কিছু আমরা হাত বাড়ালেই পেয়ে যাই যেকোন মূহুর্তে যেকোন স্থানে। আর তাই এই বর্তমান পৃথিবী আরেক নামে ডাকা হয় ডিজিটাল পৃথিবী বলে। ডিজিটাল পৃথিবীর সবচেয়ে প্রধান অংশটির নাম হচ্ছে ইন্টারনেট। ইন্টারনেট ব্যবহারের ফলে সমস্ত বিশ্ব আমাদের হাতের মুঠোয় চলে এসেছে। আর ইন্টারনেটের প্রধান অংশ হচ্ছে ওয়েব সাইট। সমস্ত বিশ্বব্যাপী ওয়েব সাইট সমূহ জালের মতো বিস্তার করে আছে। আমাদের হয়তো এটার অনেকেরই ধারনা আছে যে একটি প্রকৃত ওয়েব সাইট তৈরির জন্য এইচটিএমএল বিষয়ে জানা অনেক গুরুত্ব পূর্ন বিষয়। আজকে আমি আপনাদের এইচটিএমএল এর কয়েকটি প্রয়োজনীয় কোড নিয়ে সংক্ষেপে কিছু আলোচনা করবো।
সাধারনত অক্ষরকে বোল্ড বা মোটা করার জন্য এইচটিএমএলে দুটি সহজ পদ্ধতি আছে, যথা:
<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 Image)
এইচটি এম এল ইমেজ (HTML Images)
মোঃ রফিকুল ইসলাম
উদাহরণঃ
DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountains</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px">
</body>
</html>
ফলাফলঃ
Spectacular Mountains
অবশ্যই ইমেজ (ছবির) উচ্চতা এবং প্রসস্থতা উল্লেখ করে দিতে হবে। যদি উচ্চতা এবং প্রসস্থতা নির্দিষ্ট করে না দেয়া হয়ে তাহলে পেজে ইমেজ লোড হওয়ার সময় ইমেজটি ফ্লিক (পেজের সাথে ছবিটি সামঞ্জস্য হওয়ার সময় ছবিটি লাফালাফি) করবে।
এইচটিএমএল ইমেজ সিনট্যাক্স
এইচটিএমএল এ ইমেজকে <img> ট্যাগ দ্বারা সংজ্ঞায়িত করা হয়।
<img> ট্যাগ এর ভিতরে শুধুমাত্র্ অ্যাট্রিবিউট থাকে এবং এর কোন ক্লোজিং ট্যাগ থাকে না।
src অ্যাট্রিবিউটম ইমেজ এর ইউআরএল (ওয়েব ঠিকানা বা ইমেজ এর অবস্থান এর ঠিকানা) কে সংজ্ঞায়িত করে।
<img src="url" alt="some_text">
Alt অ্যাট্রিবিউট
Alt অ্যাট্রিবিউট দ্বারা ওয়েব এ যদি কোন কারনে ইমেজ লোড না হতে পারে তাহলে উক্ত ইমেজ এর বিকল্প হিসেবে কি Text প্রদর্শিত হবে তা নির্ধারণ করে।
Alt অ্যাট্রিবিউট এর ভেলু (মান) হবে আপনি যে Text টি ইমেজ লোড না হলে প্রদর্শন করতে চান সেই Text.
<img src="html5.gif" alt="The official HTML5 Icon">
ফলাফল
Alt অ্যাট্রিবিউট অবশ্যই প্রদান করত হবে। এটি ছাড়া একটি ওয়েব পেজ সঠিকভাবে যাচাই করা যায় না।
এইচটিএমএল স্ক্রিন রিডার
স্ক্রিণ রিডার সফটওয়্যারগুলো পর্দায় কি প্রদর্শিত সকলকিছু পড়তে পারে।
ওয়েব এ ব্যবহৃত এইচটিএমএল কোড Text থেকে বক্তৃতা, শব্দের আইকন বা যেকোন প্রতীকি আউটপুট পুনরুদ্ধার করতে পারে।
স্ক্রিণ রিডার সাধারণত যারা অন্ধ, দৃষ্টিপ্রতিবন্ধি, অশিক্ষিতদের জন্য ব্যবহৃত হয়।
নোট: স্ক্রিন রিডার Alt অ্যাট্রিবিউট পড়তে পারে।
ছবির আকার - প্রস্থ এবং উচ্চতা
ইমেজ (ছবির) width (প্রস্থ) এবং height (উচ্চতা) নির্ধারণের জন্য আপনি style অ্যাট্রিবিউট ব্যবহার করতে পারেন।
এর মান পিক্সেল দ্বারা নির্ধারণ করা হয় (মান এর পরে px লিখতে হয়):
<img src="Mountain.jpg" alt="Mountain View" style="width:128px;height:128px">
ফলাফল:
বিকল্প হিসেবে আপনি width এবং height অ্যাট্রিবিউট ব্যবহার করতে পারেন।
এর মান পিক্সেল দ্বারা নির্ধারণ করা হয় (মান এর পরে px লিখতে হয়):
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
Width এবং Height বা Style?
উভয় width, height, এবং style অ্যাট্রিবিউট লেটেস্ট HTML5 সাপর্ট করে।
আমরা আপনাকে style অ্যাট্রিবিউট ব্যবহারের পরামর্শ দেব। এটি স্টাইল শীটকে ইমেজ এর ডিফল্ট আকার পরিবর্তন করতে বাধা দেয়।
উদাহরণঃ
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body><img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128"></body>
</html>
অন্য ফোল্ডার এর ছবি যদি উল্লেখ করে দেয়া না হয় তাহলে ব্রাউজার ছবি খুঁজে পেতে ওয়েব পেজ এর একই ফোল্ডার এ খোঁজ করে। ওয়েব পেজ এ এটিই সাধারণ, যদি আপনি কোন সাব ফোল্ডার এ ইমেজটি রাখেন তাহলে এভাবে তা উল্লেখ করে দিতে হবে:
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
ব্রাউজার যদি ইমেজটি খুঁজে না পায় তাহলে সে একটি ব্রোকেন লিঙ্ক আইকন প্রদশণ করবে। উদাহরণ
<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px">
ফলাফল
অন্য সার্ভারের ছবি
কিছু ওয়েব সাইট তাদের ইমেজগুলো ইমেজ সার্ভারে লোড করে রাখে, আসলে আপনি বিশ্বের যে কোনো ওয়েব ঠিকানার ইমেজ এ প্রবেশ করতে পারেন:
<img src="http://www.rasta.edu.pk/images/EducationTraining1.jpg">
ফলাফল
অ্যানিমেটেড ছবি
GIF ফরমেট অ্যানিমেটেড ইমেজ সমর্থন করে।
<img src="Tree.gif" alt="Rain Tree" style="width:240px;height:320px">
ফলাফল
নোট: অ্যানিমেটেড ইমেজ ও ননঅ্যানিমেটেড ইমেজ এর সিনটেক্স এ কোন পার্থক্য নেই।
লিঙ্ক হিসেবে ইমেজ ব্যবহার
ইমেজকে লিঙ্ক হিসেবে ব্যবহার করা খুবই সাধারণ ব্যাপার
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
ইমেজ ম্যাপ
একটি ইজেজ এর জন্য আপনি ক্লিক করা যায় এমনভাবে ইমেজ ম্যাপ তৈরি করতে পারেন।
উদাহরণ
usemap="#planetmap" style="width:145px;height:126px">
<map name="Bangladesh">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
ফলাফল
ইমেজ ফ্লোটিং
আপনি ইজেমকে প্যারাগ্রাফ এর বাম বা ডানে ভাসমান অবস্থায় রাখতে পারেন
উদাহরণ
<p>
60px;height:40px">
A paragraph with an image. The image floats to the left of the text.
</p>
ফলাফল:
A paragraph with an image. The image floats to the left of the text.
অধ্যায় সারসংক্ষেপ
- এইচটিএমএল এ <img> এলিমেন্ট ইমেজকে সংজ্ঞায়িত করে।
- এইচটিএমএল এ src অ্যাট্রিবিউট ইমেজ এর ফাইল নেমকে সংজ্ঞায়িত করে।
- এইচটিএমএল এ alt অ্যাট্রিবিউট ইমেজ এর বিকল্প টেক্সকে সংজ্ঞায়িত করে।
- এইচটিএমএল এ width এবং height অ্যাট্রিবিউট ইমেজ এর আকারকে সংজ্ঞায়িত করে।
- সিএসএস এ width and height প্রোপার্টি ইমেজ এর আকারকে সংজ্ঞায়িত করে (বিকল্পভাবে)।
- সিএসএস এ float প্রোপার্টি ইমেজকে ফ্লোট করতে সহায়তা করে।
- এইচটিএমএল এ usemap অ্যাট্রিবিউট ইমেজ ম্যাপ তৈরি করতে ব্যবহৃত হয়।
- এইচটিএমএল এ <map> এলিমেন্ট ইমেজ ম্যাপকে সংজ্ঞায়িত করতে ব্যবহৃত হয়।
- এইচটিএমএল এ <area> এলিমেন্ট ইমেজ ম্যাপ এর কোন এরিয়া ব্যবহার করতে তা সংজ্ঞায়িত করে।
এইচটিএমএল লিঙ্ক (HTML 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>
ব্যাখ্যাঃ প্রাক ফরম্যাট টেক্সট সজ্ঞায়িত করে।
জাভাস্ক্রিপ্ট স্কোপ (JavaScript Scope)
জাভাস্ক্রিপ্ট স্কোপ (JavaScript Scope)
স্কোপ হচ্ছে একসেস করা যায় এরকম ভেরিয়েবল।
জাভাস্ক্রিপ্টে অবজেক্ট এবং ফাংশনও ভেরিয়েবল হিসেবে বেবহৃত হয়, এখানে স্কোপ হচ্ছে ভেরিয়েবল, অবজেক্ট এবং ফাংশনের সেট যেখানে একসেস করা যায়।
লোকাল জাভাস্ক্রিপ্ট ভেরিয়েবল
জাভাস্ক্রিপ্টের ফাংশনের ভেতরে যেসব ভেরিযবল ডিক্লেয়ার করা হয় তা ঐ ফাংশনেগুলো লোকাল ভেরিযবল এবং এর স্কোপ লোকাল। এই ভেরিযবল শুধুমাত্র ঐ ফাংশনে ব্যবহার করা যাবে।
উদাহরণ:
// code here can not use carName function myFunction() { var carName = "Volvo"; // code here can use carName }
যেহেতু লোকাল ভেরিয়েবল শুধুমাত্র নির্দিষ্ট ফাংশনে ব্যবহৃত হয় তাই একই নামের ভেরিয়েবল বিভিন্ন ফাংশনে ব্যবহার করা যাবে। একটি ফাংশন কল করা হলে লোকাল ভেরিয়েবল তৈরী হয় এবং ফাংশন শেষে ধ্বংশ হয়ে যায়।
গ্লোবাল জাভাস্ক্রিপ্ট ভেরিয়েবল
ফাংশনের বাহিরে যেসব ভেরিযবল ডিক্লেয়ার করা হয় সেগুলো গ্লোবাল ভেরিযবল। গ্লোবাল ভেরিযবলের স্কোপ গ্লোবাল থাকে, ওয়েবপেজের সকল স্ক্রিপ্ট এবং ফাংশন থেকে তা একসেস করা যায়।
উদাহরণ:
var carName = " Volvo"; // code here can use carName function myFunction() { // code here can use carName }
অটোমেটিক গ্লোবাল
আপনি যদি কোন ভেরিয়েবল এর মান নির্ধারণ করে দেন যা আগে ডিক্লেয়ার করা হয়নি এটি সয়ংক্রিয়ভাবে গ্লোবাল ভেরিয়েবল এ পরিণত হয়।
এই উদাহরণ এ carName কে গ্লোবাল ভেরিয়েবল হিসেবে ডিক্লেয়ার করা হয়েছে।
// code here can use carName function myFunction() { carName = "Volvo"; // code here can use carName }
জাভাস্ক্রিপ্ট ভেরিযবলের লাইফটাইম
কোন ভেরিযবল ডিক্লেয়ার করার সময় থেকেই জাভাস্ক্রিপ্ট ভেরিযবলের লাইফটাইম শুরু হয়।
কোন ফাংশন কমপ্লিট হওয়ার পর লোকাল ভেরিযবলের লাইফটাইম শেষ হয়ে যায়।
পেজ ক্লোজ করার পর গ্লোবাল ভেরিযবলের লাইফটাইম শেষ হয়ে যায়।
ফাংশনাল আর্গুমেন্ট
ফাংশনাল আর্গুমেন্ট ফাংশনের ভেতরে লোকাল ভেরিযবল হিসেবে কাজ করে।
HTML এ গ্লোবাল ভেরিযবল
HTML এ গ্লোবাল ভেরিযবল বলতে উইন্ডো অবজেক্টকে বোঝানো হয়, সকল গ্লোবাল ভেরিযবল উইন্ডো অবজেক্টের অন্তর্গত।
উদাহরণ:
// code here can use window.carName function myFunction() { carName = "Volvo"; }
নোট: গ্লোবাল ভেরিয়েয়েবল বা ফাংশন, আপনার উইন্ডোজ ভেরিয়েবল বা ফাংশনকে অভাররাইট করতে পারে।
জাভাস্ক্রিপ্ট পরিচিতি (JavaScript Introduction)
জাভাস্ক্রিপ্ট পরিচিতি
পৃথিবীর জনপ্রিয় প্রোগ্রামিং লেঙ্গুয়েজ গুলোর মধ্যে জাভাস্ক্রিপ্ট অন্যতম। নিচে জাভাস্ক্রিপ্টের বৈশিষ্ঠ্যসহ কিছু উদাহরণ দেয়া হয়েছে।
জাভাস্ক্রিপ্ট HTML এর কন্টেন্টকে পরিবর্তন করতে পারে
একটি অন্যতম HTML মেথড হল document.getElementById()
এই উদাহরণের সাহায্যে HTML কন্টেন্ট থেকে আইডি (id="demo") এর সাহায্যে কোনো কন্টেন্ট খুঁজে বের করা যায় এবং তা পরিবর্তন করা যায় (innerHTML)।
উদাহরণ:
document.getElementById("demo").innerHTML = "Hello JavaScript";
জাভাস্ক্রিপ্ট HTML এর এট্রিবিউটকে পরিবর্তন করতে পারে
যেমন কোনো HTML <img> কন্টেন্টের সোর্স পরিবর্তন করে ইমেজ পরিবর্তন করা।
যেমন:
<h1>JavaScript Can Change Images</h1> <img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180"> <p>Click the light bulb to turn on/off the light.</p> <script> function changeImage() { var image = document.getElementById('myImage'); if (image.src.match("bulbon")) { image.src = "pic_bulboff.gif"; } else { image.src = "pic_bulbon.gif"; } } </script>
ফলাফলঃ
JavaScript Can Change Images
Click the light bulb to turn on/off the light.
জাভাস্ক্রিপ্ট HTML এর স্টাইলকে(CSS) পরিবর্তন করতে পারে
HTML এর স্টাইলকে পরিবর্তন করা অনেকটা HTML এর এট্রিবিউটকে পরিবর্তন করার মতোই।
উদাহরণ:
document.getElementById("demo").style.fontSize = "25px";
জাভাস্ক্রিপ্ট ডাটার ভেলিডিটি চেক করতে পারে
ডাটা টাইপ এবং অন্যান্য ডাটা ভেলিডেশনের ক্ষেত্রে জাভাস্ক্রিপ্ট বেবহার করা হয়।
জাভাস্ক্রিপ্ট সম্পর্কে আরো তথ্য
জাভাস্ক্রিপ্ট এবং জাভা কনসেপ্ট ও ডিজাইন সকল দিক থেকে সম্পূর্ণ আলাদা দুইটি লেঙ্গুয়েজ
১৯৯৫ সালে ব্রেন্দেন ইক নামক একজন বেক্তি এই লেঙ্গুয়েজ আবিষ্কার করেন এবং ১৯৯৭ সালে এটি ECMA স্ট্যান্ডার্ড লাভ করে
এর অফিসিয়াল নেম হচ্ছে ECMA-262 এবং ECMAScript 5 (JavaScript 1.8.5 - July 2010) হচ্ছে লেটেস্ট স্ট্যান্ডার্ড
এইচটিএমএল শিরোনাম (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 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 এ মাউস পয়েন্টার রেখে ব্রাউজার চয়েজ করুন এবং ফাইল ওপেন করুন।
এইচটিএমল লেখার টুল (tool) । HTML Editors সম্পর্কে আলোচনা
আজকে আমরা এইচটিএমল লেখার টুল (tool) এবং HTML Editors সম্পর্কে আলোচনা করব।
Adobe Dreamweaver, Microsoft Expression Web, এবং CoffeeCup প্রভৃতি Professional HTML Ediotor ব্যবহার করে HTML কে edit করা যায়।তবে আমরা HTML শেখার জন্য Notepad অথবা Textedit কে Text editor হিসেবে সমর্থন করি। আমরা বিশ্বাস করি যে, একটি সাধারণ Text Editor ব্যবহার করেই HTML ভালোভাবে শেখা যায়। Notepad ব্যবহার করে web page তৈরি করতে হলে আপনাকে নিম্নের ৪ টি পর্যায় অনুসরণ করতে হবে।
পর্যায় ১ঃ Notepad খুলুন।
Windows 7 অথবা তার আগের ভার্সনে Notepad খুলতে(open)গেলে প্রথমে কম্পিউটারের screen এর বামপাশে অবস্থিত start এ click করবেন, এরপর All Programmes এ click করে Notepad এ click করবেন।
Windows 8 অথবা তার পরের ভার্সনে Notepad খুলতে(open)গেলে আপনার কম্পিউটারের start screen এ click করে Notepad type করবেন।
পর্যায় ২ঃ কিছু HTML লিখুন।
Notepad এ কিছু HTML লিখতে অথবা কপি করতে পারেন।
উদাহরণস্বরূপ-
<!DOCTYPE html>
<html>
<body>
<h1> আমার প্রথম শিরোনাম </h1>
<p> আমার প্রথম অনুচ্ছেদ </p>
</body>
</html>
পর্যায় ৩ঃ HTML Page টিকে সংরক্ষণ করুন।
আপনার কম্পিউটারে HTML Page কে সংরক্ষণ করতে গেলে Notepad Menu এর file option এ গিয়ে save as কে select করুন। file extention হিসেবে আপনি .htm অথবা .html ব্যবহার করতে পারেন, কারন দুটোর মাঝে কোন পার্থক্য নেই।
পর্যায় ৪ঃ আপনার browser এ HTML Page টিকে দেখুন।
আপনার সংরক্ষিত HTML file এ double click করুন এবং দেখবেন এর ফলাফল এরকম হবে।
আমার প্রথম শিরোনাম
আমার প্রথম অনুচ্ছেদ
যদিও এই উদাহরণে ব্যবহৃত tag গুলো সম্পর্কে আপনারা এখনও জানেননা তবে উদ্বিগ্ন হবার কিছু নেই, পরবর্তী অধ্যায়ে আপনারা এগুলো সম্পর্কে জানবেন।
এইচটিএমএল টিউটোরিয়াল পরিচিতি (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 |