এইচটিএমএল সিএসএস জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল হোম পেজ এইচটিএমএল পরিচিতি এবং গঠন এইচটিএমএল কোড এটিটর এইচটিএমএলের মৌলিক ধারণা এইচটিএমএল এলিমেন্ট এইচটিএমএল emty এলিমেন্ট এইচটিএমএল এট্রিবিউট এইচটিএমএল class এট্রিবিউট এইচটিএমএল style এট্রিবিউট এইচটিএমএল কমেন্ট এইচটিএমএল হেডিং এইচটিএমএল প্যারাগ্রাফ এইচটিএমএল টেক্সট ফরম্যাট এইচটিএমএল টেক্সট কোটেশন এইচটিএমএল কম্পিউটারকোড এইচটিএমএল টেবিল এইচটিএমএল লিস্ট এইচটিএমএল কালার এইচটিএমএল সিএসএস এইচটিএমএল লিংক এইচটিএমএল ইমেজ এইচটিএমএল ব্লক-ইনলাইন এলিমেন্ট এইচটিএমএল হেড এইচটিএমএল লেআউট এইচটিএমএল আইফ্রেম এইচটিএমএল জাভাস্ক্রিপ্ট এইচটিএমএল রেস্পন্সিভ এইচটিএমএল এনটিটি এইচটিএমএল অক্ষরসেট এইচটিএমএল সিম্বল এইচটিএমএল URL এনকোড এইচটিএমএল-XHTML px - em কনভার্শন

এইচটিএমএল ফর্ম

এইচটিএমএল ফর্ম এইচটিএমএল ফর্ম এলিমেন্ট এইচটিএমএল ইনপুট টাইপ এইচটিএমএল(৫) ইনপুট টাইপ এইচটিএমএল ইনপুট এট্রিবিউট

এইচটিএমএল৫

এইচটিএমএল৫ পরিচিতি ব্রাউজার সাপোর্ট এইচটিএমএল৫ এলিমেন্ট এইচটিএমএল৫ সিম্যান্টিক এলিমেন্ট এইচটিএমএল৫ মাইগ্রেশন এইচটিএমএল৫ স্টাইল গাইড

এইচটিএমএল মিডিয়া

মিডিয়া-Media ভিডিও-Video অডিও-Audio প্লাগ-ইন-PlugIn ইউটিউব-Youtube

এইচটিএমএল এপিআই

জিওলোকেশন-Geolocation ড্রাগ/ড্রপ-Drag/Drop লোকাল স্টোরেজ-LocalStorage অ্যাপ ক্যাশ-AppCache ওয়েব ওয়ার্কার-WebWorker এসএসই-SSE

এইচটিএমএল রেফারেন্স

রেফারেন্স- reference

 

এইচটিএমএল head এলিমেন্ট


এইচটিএমএল হেড এলিমেন্ট

ট্যাগ বর্ননা
<head> ডকুমেন্টের তথ্য ধারণ করে
<base> একটি পেজের সকল লিঙ্কের জন্য ডিফল্ট URL বা টার্গেট ধারণ করে
<link> একটি ডকুমেন্টের সাথে এক্সটার্নাল ফাইলের সম্পর্ক তৈরি করে
<meta> এইচটিএমএল ডকুমেন্টের মেটাডেটা ধারণ করে
<script> ক্লায়েন্ট সাইড স্ক্রিপ্ট ধারণ করে
<style> ডকুমেন্টের স্টাইল ধারণ করে
<title> ডকুমেন্টের টাইটেল ধারণ করে

<head> এলিমেন্ট

<head> এলিমেন্ট হলো মেটাডেটা(ডেটা সম্পর্কিত ডেটা) রাখার কন্টেইনার এবং এটি <html> ট্যাগ এবং <body> ট্যাগের মাঝে থাকে।

এইচটিএমএল মেটাডেটা হলো এইচটিএমএল ডকুমেন্ট সম্পর্কিত তথ্য যা ব্রাউজারে দেখানো হয় না।

মেটাডেটা সাধারণত ডকুমেন্টের টাইটেল, ক্যারেক্টার সেট, স্টাইল, লিঙ্ক, স্ক্রিপ্ট এবং অন্যান্য তথ্যকে বুঝায়।

এই ট্যাগগুলোর মাধ্যমে মেটাডেটা বর্ননা করা হয়ঃ <title>, <style>, <meta>, <link>, <script> এবং <base>


<base> এলিমেন্ট

একটি ওয়েব পেজের সকল URL এবং target এট্রিবিউটের একটি মূল URL এবং target সেট করার জন্য <base> এলিমেন্ট ব্যবহার করা হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
	<head>
		<title>এইচটিএমএল উদাহরণ</title>
		<base href="http://www.sattacademy.com/images/" target="_blank">
	</head>
<body>

	<img src="sattacademy.jpg">
	<p>যেহেতু আমরা URL এর একটি ভিত্তি নির্দিষ্ট করে দিয়েছি, ব্রাউজার "sattacademy.jpg" এই ছবিটি "http://www.sattacademy.com/images/sattacademy.jpg" এই url এ অনুসন্ধান করবে।</p>

	<p><a href="http://www.sattacademy.com">sattacademy</a></p>
	<p>উপরের লিংকটি একটি নতুন উইন্ডোতে ওপেন হবে কারণ আমরা লিংকের target এট্রিবিউটের ভিত্তি "_blank" সেট করে দিয়েছি।</p>

</body>
</html>

ফলাফল




<title> এলিমেন্ট

<title> এলিমেন্ট একটি ডকুমেন্টের টাইটেল নির্দেশ করে এবং সকল এইচটিএমএল/এক্সএইচটিএমএল ডকুমেন্টে অবশ্যই দিতে হয়।

একটি সাধারণ এইচটিএমএল ডকুমেন্টঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
</head>
<body>

	<p>body এলিমেন্টের কন্টেন্ট ব্রাউজারের উইন্ডোতে দেখানো হয়।</p>
	<p>title এলিমেন্টের কন্টেন্ট ব্রাউজারের ট্যাবে দেখানো হয়।</p>

</body>
</html>

ফলাফল




<style> এলিমেন্ট

শুধুমাত্র একটি এইচটিএমএল পেজের স্টাইল সম্পর্কিত তথ্য রাখার জন্য <style> এলিমেন্ট ব্যবহার করা হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
	<style>
		body{background-color: teal;}
		h2{color: white;}
		p{color: powderblue;}
	</style>
</head>
<body>

	<h2>একটি হেডিং</h2>
	<p>একটি প্যারাগ্রাফ</p>

</body>
</html>

ফলাফল




<link> এলিমেন্ট

এক্সটার্নাল স্টাইলশীটকে লিঙ্ক করার জন্য <link> এলিমেন্ট ব্যবহার করা হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>এইচটিএমএল উদাহরণ</title>
  <link rel="stylesheet" href="../style.css">
</head>
<body>

	<h2>একটি হেডিং</h2>
	<p>একটি প্যারাগ্রাফ</p>

</body>
</html>

ফলাফল




<meta> এলিমেন্ট

ক্যারেক্টার সেট, পেজের বর্ননা, কী-ওয়ার্ড, পেজের রচয়িতা এবং অন্যান্য মেটাডেটা নির্দেশ করার জন্য <meta> এলিমেন্ট ব্যবহার করা হয়।

ব্রাউজার, সার্চ ইঞ্জিন এবং অন্য ওয়েব সার্ভিসের জন্য মেটাডেটা ব্যবহার করা হয়।

ক্যারেক্টার সেট নির্দেশ করতেঃ

<meta charset="UTF-8">

ওয়েব পেজের বর্ননা নির্দেশ করতেঃ

<meta name="description" content="Free Web tutorials">

সার্চ ইঞ্জিনের জন্য কীওয়ার্ড নির্দেশ করতেঃ

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

পেজের রচয়িতার নাম নির্দেশ করতেঃ

<meta name="author" content="Azizur Rahman">

ডকুমেন্ট প্রত্যেক ৩০ সেকেন্ডে রিফ্রেশ করতেঃ

<meta http-equiv="refresh" content="30">

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
	<meta charset="UTF-8">
	<meta name="description" content="Free Web tutorials">
	<meta name="keywords" content="HTML,CSS,XML,JavaScript">
	<meta name="author" content="Azizur Rahman">
</head>
<body>

	<p>মেটাডেটা ব্রাউজারে প্রদর্শন হয় না।</p>

</body>
</html>

ফলাফল




অধ্যায়ের সারাংশ

  1. এইচটিএমএল <head> এলিমেন্টে ডকুমেন্ট সম্পর্কিত মেটাডেটা বর্ণনা করে এমন এলিমেন্টগুলো উল্লেখ করা হয়
  2. এইচটিএমএল <base> এলিমেন্টের মাধ্যমে ডকুমেন্টের একটি মূল URL সেট করা হয়
  3. এইচটিএমএল <title> এলিমেন্টের মাধ্যমে ডকুমেন্টের টাইটেল সেট করা হয়
  4. এইচটিএমএল <style> এলিমেন্টের মাধ্যমে ডকুমেন্টের ইনটার্নাল স্টাইল সেট করা হয়
  5. এইচটিএমএল <link> এলিমেন্টের মাধ্যমে ডকুমেন্টের জন্য স্টাইলশীট লিংক করা হয়
  6. এইচটিএমএল <meta> এলিমেন্টের মাধ্যমে ডকুমেন্ট সম্পর্কিত মেটাডেটা সেট করা হয়