Mar 16

MongoDB Overview. MongoDB এর সংক্ষিপ্ত বিবরণ

MongoDB এর সংক্ষিপ্ত বিবরণ
নয়ন চন্দ্র দত্ত

MongoDB একটি ক্রস প্ল্যাটফর্ম এবং ডকুমেন্ট ভিত্তিক ডেটাবেস যা উচ্চ কার্যকারিতা, উচ্চ প্রাপ্যতা এবং সহজ কর্মপরিধি বৃদ্ধির উদ্দেশ্য উপলব্ধি করায়। MongoDB সংগ্রহ এবং ডকুমেন্টবিষয়ক ধারণায় কাজ করে।

ডেটাবেস
ডেটাবেস কালেকশনের জন্য একটি শারীরিক ধারক। ফাইল সিস্টেমে প্রতিটি ডেটাবেস ফাইলের নিজস্ব সেট পায়। একটি একক MongoDB সার্ভারের সাধারণত একাধিক ডেটাবেস থাকে।

কালেকশন
কালেকশন হচ্ছে MongoDB ডকুমেন্টের একটি গ্রুপ। এটি একটি RDBMS টেবিলের সমতুল্য। একটা কালেকশন একটি একক ডেটাবেসের মধ্যে বিদ্যমান থাকে। কালেকশন কখনও কোন স্কিমা বা পরিকল্পনা জোরদার করে না।
একটি কালেকশনের মধ্যে ডকুমে্সন্টের বিভিন্ন ক্ষেত্র থাকতে পারে। সাধারণত, একটি কালেকশনের সব ডকুমেন্ট অনুরূপ বা সংশ্লিষ্ট উদ্দেশ্যবিশিষ্ট হয়ে থাকে।

ডকুমেন্ট
ডকুমেন্ট হচ্ছে কী-মান জোড়ার একটি সেট। ডকুমেন্টের গতিশীল স্কিমা আছে। গতিশীল স্কিমা বলতে একই কালেকশনের মধ্যের সব ডকুমেন্টের একই ক্ষেত্র বা কাঠামো জোড়ার প্রয়োজন নেই।
কালেকশন ডকুমেন্টের মধ্যে একটি সাধারণ ক্ষেত্র বিভিন্ন ধরনের তথ্য জমা রাখতে পারে।
নিচে MongoDB এর সাথে RDBMS টেকনোলজির সম্পর্ক দেখানো হলঃ

RDBMS: ডেটাবেস
RDBMS: ডেটাবেস

RDBMS: টেবিল
RDBMS: কালেকশন

RDBMS: Tuple / সারি
RDBMS: ডকুমেন্ট

RDBMS: কলাম
RDBMS: ক্ষেত্র

RDBMS: টেবিল জয়েন
RDBMS: এমবেডেড ডকুমেন্টস

RDBMS: প্রাথমিক কী
RDBMS: প্রাথমিক কী ( ডিফল্ট কি _id যা MongoDB দ্বারা যোগান হয় )

ডাটাবেস সার্ভার ও ক্লায়েন্ট

RDBMS: Mysqld / ওরাকল
RDBMS: mongod

RDBMS: মাইএসকিউএল / sqlplus
RDBMS: mongo

নমুনা ডকুমেন্ট
উল্লিখিত নীচের উদাহরণে একটি ব্লগ সাইটের ডকুমেন্টের গঠন দেখানো হয়েছে যেখানে কেবলমাত্র একটি কমা দিয়ে কী-মান জোড়াকে পৃথক করা হয়েছেঃ

{
_id: ObjectId(7df78ad8902c)
title: ‘MongoDB Overview’,
description: ‘MongoDB is no sql database’,
by: ‘tutorials point’,
url: ‘http://www.tutorialspoint.com’,
tags: [‘mongodb’, ‘database’, ‘NoSQL’],
likes: 100,
comments: [
{
user:’user1′,
message: ‘My first comment’,
dateCreated: new Date(2011,1,20,2,15),
like: 0
},
{
user:’user2′,
message: ‘My second comments’,
dateCreated: new Date(2011,1,25,7,45),
like: 5
}
]
}

_id একটি 12 বাইটের হেক্সাডেসিমেল সংখ্যা যা প্রতিটি ডকুমেন্টের স্বতন্ত্রতা বজায় রাখে। ডকুমেন্ট ডুকানোর সময় _id দিতে পারেন। যদি আপনি দিতে না চান তবে MongoDB প্রতিটি ডকুমেন্টের জন্য একটি ইউনিক আইডি প্রদান করবে।
এই 12 বাইট প্রথম 4 বাইট বর্তমান টাইমস্ট্যাম্প এর জন্য, পরবর্তী 3 বাইট মেশিন আইডির জন্য, পরবর্তী 2 বাইট MongoDB সার্ভারের প্রক্রিয়াকরণ ID এর জন্য এবং বাকী ৩ বাইট হচ্ছে সহজ ক্রমবর্ধমান মান।

Mar 15

এইচটি এম এল এর উপাদান সমূহ (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 ট্যাগের মাঝে শেষ করা হয়।

 

Mar 15

পিএইচপি ৫ গ্লোবাল ভেরিয়েবলস (PHP 5 Global Variables – Superglobals)

Superglobals যা কিনা সবসময় অ্যাক্সেস করা যায়। যেকোনো ক্লাস, ফাইল, অথবা ফাংশন এ এই superglobals অ্যাক্সেস করা যায় কোন কিছুর সাহায্য ছারাই।

এই variable গুলো হল

  • $GLOBALS
  • $_SERVER
  • $_REQUEST
  • $_POST
  • $_GET
  • $_FILES
  • $_ENV
  • $_COOKIE
  • $_SESSION

 

$GLOBALS

$GLOBALS একটি পিএইচপি এর গ্লোবাল variable যা পিএইচপি script এর যেকোনো জায়গায় গ্লোবাল variables গুলোকে অ্যাক্সেস করতে সাহায্য করে। পিএইচপি সমস্ত গ্লোবাল variable গুলোকে একটি array এর মধ্যে জমা করে $GLOBALS[index]। থার্ড বন্ধনীর মধ্যে লেখা index হল variable এর একটি নাম।

$GLOBALS ব্যবহার করে একটি উদাহরণ

<?php 
 $x = 75; 
 $y = 25;
  
 function addition() { 
     $GLOBALS['z'] = $GLOBALS['x'] + $GLOBALS['y']; 
 }
  
 addition(); 
 echo $z; 
 ?>

যার ফলাফল হবে ১০০। global array এর মধ্যে একটি variable যা কিনা ফাংশন এর বাইরেও অ্যাক্সেস করা যায়।

 

PHP S_SERVER

$_SERVER পিএইচপি এর একটি সুপার গ্লোবাল variable যা script এর অবস্থান, headers, paths এই বিষয়গুল ধারণ করে।

একটি উদাহরণ যদি লক্ষ্য করি

<?php 
 echo $_SERVER['PHP_SELF'];
 echo "<br>";
 echo $_SERVER['SERVER_NAME'];
 echo "<br>";
 echo $_SERVER['HTTP_HOST'];
 echo "<br>";
 echo $_SERVER['HTTP_REFERER'];
 echo "<br>";
 echo $_SERVER['HTTP_USER_AGENT'];
 echo "<br>";
 echo $_SERVER['SCRIPT_NAME'];
 ?>

 

$_SERVER এর কিছু গুরুত্বপূর্ণ elements

$_SERVER[‘PHP_SELF’] বর্তমানে গণনাকৃত script এর নামটি পেতে এই element ব্যবহার করা হয়।
$_SERVER[‘GATEWAY_INTERFACE’] কমন গেটওয়ে ইন্টারফেস এর version পাওয়ার জন্য ব্যবহার করা হয়
$_SERVER[‘SERVER_ADDR’] host সার্ভার এর IP এড্রেস পাওয়ার জন্য
$_SERVER[‘SERVER_NAME’] host সার্ভার এর নাম পাওয়ার জন্য যেমন www.w3schools.com
$_SERVER[‘SERVER_SOFTWARE’] সার্ভার এর পরিচিতি পাওয়ার জন্য যেমন Apache/2.2.24
$_SERVER[‘SERVER_PROTOCOL’] Information protocol এর নাম পাওয়ার জন্য যেমন HTTP/1.1
$_SERVER[‘REQUEST_METHOD’] এই মেথড পেজ কে অ্যাক্সেস করার জন্য ব্যবহার করা হয়। যেমন post
$_SERVER[‘REQUEST_TIME’] request এর শুরু থেকে timestamp জানার জন্য।
$_SERVER[‘QUERY_STRING’] যদি কোন পেজ query string দ্বারা অ্যাক্সেস হয়ে থাকে তবে তা পাওয়ার জন্য
$_SERVER[‘HTTP_ACCEPT’] বর্তমান request হইতে header কে অনুমোদন করার জন্য
$_SERVER[‘HTTP_ACCEPT_CHARSET’] বর্তমান request হইতে Accept_Charset header পাওয়ার জন্য যেমন utf-8,ISO-8859-1
$_SERVER[‘HTTP_HOST’] বর্তমান request হতে header host পাওয়ার জন্য
$_SERVER[‘HTTP_REFERER’] বর্তমান পেজ এর পুরো url পাওয়ার জন্য
$_SERVER[‘HTTPS’] নিরাপদ HTTP Protocol এর মধ্য দিয়ে কোন script query করার জন্য।
$_SERVER[‘REMOTE_ADDR’] ইউজার এর IP এড্রেস পাওয়ার জন্য
$_SERVER[‘REMOTE_HOST’] ইউজার এর host নাম পাওয়ার জন্য
$_SERVER[‘REMOTE_PORT’] ইউজার এর machine এর পোর্ট নাম্বার পাওয়ার জন্য যা দিয়ে সে ওয়েবসারভার এর সাথে যোগাযোগ করতেছে
$_SERVER[‘SCRIPT_FILENAME’] রানিং script এর সঠিক পাথ নাম পাওয়ার জন্য
$_SERVER[‘SERVER_PORT’] সার্ভার machine এর পোর্ট নাম্বার পাওয়ার জন্য যা ওয়েব সার্ভার এর যোগাযোগ এর ক্ষেত্রে ব্যবহার করা হয়। যেমন ৮০
$_SERVER[‘SERVER_SIGNATURE’] সার্ভার ভারসন এবং virtual hostname পাওয়ার জন্য
$_SERVER[‘PATH_TRANSLATED’] বর্তমান script এর ফাইল সিস্টেম এর পাথ পাওয়ার জন্য
$_SERVER[‘SCRIPT_NAME’] বর্তমান script এর পাথ পাওয়ার জন্য
$_SERVER[‘SCRIPT_URI’] বর্তমান পেজ এর URL পাওয়ার জন্য

PHP $_REQUEST

এইচটিএমএল এর ফর্ম সাবমিট করার পর ডাটা কালেক্ট করার জন্য এই মেথড ব্যবহার করা হয়

<html>
 <body>
 
 <form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
   Name: <input type="text" name="fname">
   <input type="submit">
 </form>
 
 <?php
 if ($_SERVER["REQUEST_METHOD"] == "POST") {
     // collect value of input field
     $name = $_REQUEST['fname'];
     if (empty($name)) {
         echo "Name is empty";
     } else {
         echo $name;
     }
 }
 ?>
 
 </body>
 </html>

একটি সাবমিট বাঁটন ও একটি ইনপুট ফিল্ড নিয়ে এই script টি তৈরি করা হয়েছে যখন ইউজার ইনপুট ফিল্ড এ কোন কিছু টাইপ করে সাবমিট করবে সাবমিট করার পর তার টাইপ করা ওয়ার্ড টি সে দেখতে পাবে। আমরা সুপার গ্লোবাল variable হিসেবে $_REQUEST ব্যবহার করতে পারি ইনপুট ফিল্ড থেকে ডাটা কালেক্ট করার জন্য

PHP $_POST

এই মেথড ব্যবহার করা হয় ফর্ম এর ডাটা কালেক্ট করার জন্য। বিশদভাবে variable পাস করার জন্য এই মেথড ব্যবহার করা হয়

<html>
<body>

<form method=”post” action=”<?php echo $_SERVER[‘PHP_SELF’];?>”>
Name: <input type=”text” name=”fname”>
<input type=”submit”>
</form>

<?php
if ($_SERVER[“REQUEST_METHOD”] == “POST”) {
// collect value of input field
$name = $_POST[‘fname’];
if (empty($name)) {
echo “Name is empty”;
} else {
echo $name;
}
}
?>

</body>
</html>

একটি সাবমিট বাঁটন ও একটি ইনপুট ফিল্ড নিয়ে এই script টি তৈরি করা হয়েছে যখন ইউজার ইনপুট ফিল্ড এ কোন কিছু টাইপ করে সাবমিট করবে সাবমিট করার পর তার টাইপ করা ওয়ার্ড টি সে দেখতে পাবে। আমরা সুপার গ্লোবাল variable হিসেবে $_POST ব্যবহার করতে পারি ইনপুট ফিল্ড থেকে ডাটা কালেক্ট করার জন্য

PHP $_GET

এই মেথড ব্যবহার করা হয় ফর্ম সাবমিট করার পর ডাটা কালেক্ট করার জন্য এই মেথড ব্যবহার করে Url এর মাধ্যমেও ডাটা কালেক্ট করা যায়। মনে করি আমাদের একটি পেজ আছে যেখানে hyperlink দেওয়া আছে সেই লিঙ্ক থেকে অন্য পেজ এ যাওয়ার মাধ্যমে আমরা url থেকে ডাটা কালেক্ট করব।

<html>
 <body>
 
 <a href="test_get.php?subject=PHP&web=W3schools.com">Test $GET</a>
 
 </body>
 </html>

 

যখন ইউজার লিঙ্ক এ ক্লিক করবে তখন এই পেজ test_get.php এ সে যাবে। তখন ইউজার value অ্যাক্সেস করতে পারবে

উদাহরণ :

 <html>
 <body>
 
 <?php 
 echo "Study " . $_GET['subject'] . " at " . $_GET['web'];
 ?>
 
 </body>
 </html>

 

 

Mar 14

এইচটিএমএল এর মৌলিক বিষয় (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>

 

 

ফলাফল

This is a link

 

এখানে, লিঙ্ক এড্রেস গুলো কি রকম হবে তা নির্ভর করে “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″>

 

 

ফলাফল

http://bangla.salearningschool.com

Mar 13

এইচটিএমএল এডিটর (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>

notepad

স্টেপ ৩: এইচটিএমএল পেজ সংরক্ষণ(Save) করুন

আপনার কম্পিউটারে ফাইলটি সংরক্ষণ করুন।

নোটপ্যাড মেনু থকে File > Save as সিলেক্ট করুন। ফাইলটির নাম “index.htm” দিন বা আপনার পছন্দমত অন্য কোন নাম দিয়ে এর পর .htm দিয়ে সেভ করুন।

UTF-8, এইচটিএমএল ফাইলের জন্য পছন্দসই এনকোডিং । ANSI এনকোডিং মার্কিন জুড়ে এবং পশ্চিম ইউরোপের শুধুমাত্র অক্ষর (characters) ।

saveas

ধাপ ৪: ব্রাউজারে আপনার এইচটিএমএল ফাইলটি দেখুন

আপনার প্রিয় ব্রাউজারে সংরক্ষিত এইচটিএমএল ফাইলটি খুলুন।

ব্রাউজারে ফাইলটি ওপেন করতে ফাইলের উপর মাউস পয়েন্টার রেখে ডাবল ক্লিক করুন বা মাউসের দান বাটন এ ক্লিক করে Open with এ মাউস পয়েন্টার রেখে ব্রাউজার চয়েজ করুন এবং ফাইল ওপেন করুন।

chrome

Mar 13

এইচটিএমল লেখার টুল (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 গুলো সম্পর্কে আপনারা এখনও জানেননা তবে উদ্বিগ্ন হবার কিছু নেই, পরবর্তী অধ্যায়ে আপনারা এগুলো সম্পর্কে জানবেন।

Mar 13

উইন্ডোজ 8.1 টিউটোরিয়াল: ইন্টারনেট এক্সপ্লোরার 11 : ওয়েব ব্রাউজিং (Internet Explorer 11 – Browsing the web)

উইন্ডোজ 8.1 টিউটোরিয়াল 11 এর 9

ইন্টারনেট এক্সপ্লোরার 11 দিয়ে শুরু করা

Windows 8.1 এবং Windows RT 8.1 আপডেট এর সাথে Internet Explorer 11 অন্তরর্ভুক্ত রয়েছে। Internet Explorer ওয়েব এর যেকোন স্থানে যাওয়ার পথ সহজ করে তোলে এবং আপনাকে ওয়েব এর সবচেয়ে ভাল মানের প্রচুর বিষয়বস্তু দেখতে সাহায্য করে। কিছু সাধারণ ইঙ্গিত ও ট্রিকস শেখার দ্বারা আপনি সহজই আপনার এই নতুন ব্রাউজার ব্যবহার করতে পারবেন এবং আপনার প্রিয় সাইটগুলোর অধিকাংশই খুঁজে পেতে সক্ষম হবেন।

নোট: আপনি যদি আপনার Windows 8.1 বা Windows RT 8.1 এ Internet Explorer 11 ব্যবহার না করে থাকেন তাহলে “Internet Explorer 11 ডাউনলোড” এ যান।

প্রাথমিক ব্রাউজিং

শুরু করা যাক। Internet Explorer 11 খোলার জন্য Start Screen এর Internet Explorer টাইলস এ টোকা দিন বা ক্লিক করুন।

এড্রেস বার ব্যবহারের তিনটি উপায় রয়েছে।

ওয়েবসাইট ব্রাউজিং শুরু হয় এড্রেস বার থেকে। এড্রেস বার এবং সার্চ বক্স (সমন্নিত) এর মাধ্যমে সার্ফ, অনুসন্ধান বা পরামর্শ একই স্থান থেকে পেতে পারেন। আপনি যখন কোন সাইট খোলেন এবং ব্যবহার না করে অন্য সাইট নিয়ে কাজ করেন তখন উক্ত সাইটটি tucked out অবস্থায় থাকে, ফলে চলমান সাইটগুলো ভালোভাবে ব্যবহারের সুযোগ তৈরি হয় । Address Bar দেখার জন্য পর্দার নিচ থেকে উপরের দিকে সুইপ করে যান বা যদি আপনি মাউস ব্যবহার করতে চান তাহলে পর্দার নিচের দিকের বার এ ক্লিক করুন। এখানে এটি ব্যবহারের তিনটি পন্থা দেওয়া হলো।

 

Address barসার্ফ (Surf)। সরাসরি ওয়েব সাইটে যাওয়ার জন্য এড্রেস বার এ ওয়েব সাইটের ইউআরএল (URL) টাইপ করুন বা প্রায়ই ব্যবহৃত সাইটগুলো দেখার জন্য এড্রেস বার এ টোকা দিন বা ক্লিক করুন।

সার্চ (Search)। এড্রেস বারে একটি শব্দ লিখুন এবং ডিফল্ট সার্চ ইঞ্জিন এর সাহায্যে অনুসন্ধান করার জন্য Go goএ টোকা দিন বা ক্লিক করুন।

পরামর্শ নেন (Get suggestions)। আপনি জানেন না আপনি কোথায় যেতে চান? ওয়েব সাইট, অ্যাপ্লিকেশন খুঁজে পাওয়ার জন্য এড্রেস বার এ একটি শব্দ লিখুন এবং এড্রেস বার এর উপরের যেকোন একটি পরামর্শ (suggestion) এ টোকা দিন বা ক্লিক করুন।

ট্যাব এবং উইন্ডোজ দিয়ে একধিক কাজ সম্পন্ন করা

ট্যাব দিয়ে, আপনি একটি ব্রাউজিং উইন্ডো দিয়ে অনেক সাইট ওপেন করতে পারবেন, সুতরাং খোলা, বন্ধ করা এবং একটি থেকে আরেকটিতে খুব সহজেই যেতে পারবেন। ট্যাব বার আপনি যেসকল ট্যাব এবং উইন্ডো খুলেছেন সেই ট্যাবগুলো বা উইন্ডোগুলো দেখায়। ট্যাব বার দেখার জন্য, পর্দার নিচের প্রান্ত থেকে সুইপ করে উপরের দিকে যান (বা ক্লিক করুন)।

নতুন ট্যাব খোলা বা একটি থেকে আরেকটিতে যাওয়া

switching

নতুন ট্যাব খুলতে New tab বাটন 20115ec8-1c18-4399-bd4b-ba435ce4eeca_10এ টোকা দিন বা ক্লিক করুন। তারপর একটি URL লিখুন বা খুজুন বা আপনার পছন্দের সাইটগুলো থেকে একটি নির্বাচন করুন। যখন আপনি একাধিক ট্যাব খুলবেন তখন একটি থেকে আরেকটিতে যাওয়ার জন্য ট্যাব বারের খোলা ট্যাবগুলোতে টোকা দিন বা ক্লিক করুন। আপনি একটি উইন্ডোতে 100 টি পর্যন্ত ট্যাব খুলতে পারবেন। ট্যাবগুলো বন্ধ করতে প্রতিটি ট্যাব এর Close Closeপ্রতীকে টোকা দিন বা ক্লিক করুন।

multiple browsing windows

 

Internet Explorer 11 এ একাধিক উইন্ডো ও খুলতে পারেন এবং এদের দুইটিকে পাশাপাশি দেখতে পারেন। নতুন উইন্ডো খুলতে Start Screen এর Internet Explorer টাইলস এ চাপ দিন এবং ধরে রাখুন এবং Open new window এ ক্লিক করুন।

আপনার পর্দার উপর দুইটি উইন্ডোকে পাশাপাশি দেখতে পারেন। একটি উইন্ডো খুলুন এবং পর্দার উপরের প্রান্তের বাম অথবা ডান প্রান্তে টেনে নিয়ে যান। তারপর আরেকটি উইন্ডোকে পর্দার বাম প্রান্ত থেকে টেনে নিয়ে যান।

 

 

 

 

টিপস: ওয়েব সাইটে দ্রুত যাওয়ার জন্য এড্রেস বার এবং ট্যাব কে ব্রাউজারের নিচের দিকে প্রদর্শন করে রাখতে পারেন। Charm থেকে Settings এ যান, Appearance এ এড্রেস বার এবং ট্যাব সবসময় দেখার জন্য Always show the address bar and tabs এ টোকা দিন বা ক্লিক করুন।

আপনার ব্রাউজিং কাস্টমাইজ করুন

যখন আপনি ব্রাউজার ব্যবহার করার প্রাথমিক বিষয়গুলো শিখবেন, তখন আপনি আপনার হোমপেজ (ব্রাউজার খুললে যে পাতাতি ওপেন হয়) পরিবর্তন করতে পারবেন, পছন্দের সাইটগুলো যোগ করতে পারবেন এবং সাইটগুলোকে Start Screen এর সাথে পিন করে রাখতে পারবেন।

হোম পেজ (শুরুর পাতা) পছন্দ করা

হোম পেজ হচ্ছে নির্দিষ্ট ওয়েব সাইট যা প্রতিবার Internet Explorer এর একটি নতুন সেসন শুরু করলে প্রদর্শিত হয়। আপনি একাধিক সাইট পছন্দ করতে পারেন- যেমন আপনার পছন্দের সংবাদপত্র বা ব্লগ- যা ব্রাউজার খোলার সময় লোড হবে।

1. সুইপ করে পর্দার ডান প্রান্তের দিকে যান এবং Settings এ টোকা দিন। (যদি আপনি মাউস ব্যবহার করতে চান তাহলে, মাউস পয়েন্টার পর্দার ডান প্রান্তের নিচের দিকে নিয়ে যান এবং একটু উপেরের দিকে উঠে Settings এ ক্লিক করুন)।

2. Options এ টোকা দিন বা ক্লিক করুন এবং Home pages এর অধীন Manage এ টোকা দিন বা ক্লিক করুন।

3. আপনি যে সাইটটিকে হোম পেজ হিসেবে চান তার URL (ঠিকানা) প্রবেশ করান অথবা আপনি যে সাইটটিকে হোম পেজ হিসেবে রাখতে চান সেটি ব্রাউজারে চলমান অবস্থায় থাকলে Add current site এ ক্লিক করুন।

পছন্দের সাইটগুলো Favorite হিসেবে সংরক্ষণ করা

আপনার পছন্দের সাইটগুলো মনে রাখার সহজ উপায় হচ্ছে সাইটগুলোকে পছন্দের সাইট (favorite) হিসেবে সংরক্ষণ করে রাখা। (যদি আপনি উইন্ডোজ 8 থেকে Windows 8.1 এ আপডেট করে থাকেন এবং আপনার মাইক্রোসফট একাউন্ট দিয়ে Sign in করা অবস্থায় থাকেন, তাহলে সকল পছন্দের সাইটগুলো সয়ংক্রিয়ভাবে আপনার ব্রাউজারে পছন্দের সাইট (favorite) হিসেবে সংযুক্ত হয়ে যাবে।)

Favarite tab

1. আপনি যে ওয়েব সাইট যোগ করতে চান সেটি খুলুন।

2. Application Command প্রদর্শনের জন্য পর্দার নিচের প্রান্ত থেকে উপরের দিকে সুইপ করে যান, তারপর Favorites বার দেখার জন্য Favorites বাটন Favariteএ টোকা দিন বা ক্লিক করুন।

3. Add to favorites Add Favariteএ টোকা দিন বা ক্লিক করুন। এবং তারপর Add এ টোকা দিন বা ক্লিক করুন।

সাইটকে Start Screen এ পিন করা

কোন সাইটকে Start Screen এ পিন করলে তা একটি টাইলস তৈরি করে, এবং আপনাকে একবার স্পর্শের মাধ্যমে সাইটে প্রবেশের সুবিধা প্রদান করে। কিছু পিন করা সাইট নটিফিকেশন দেখায়, সুতরাং কখন নতুন বিষয়বস্তু (content) পাওয়া যাবে তা আপনি জানতে পারেন । আপনি যত খুশি ততগুলো সাইট পিন করে রাখতে পারবেন এবং Start Screen এ গ্রুপ হিসেবে সাজিয়ে রাখতে পারবেন।

Start Screen

1. Application Command প্রদর্শনের জন্য পর্দার নিচের প্রান্ত থেকে উপরের দিকে সুইপ করে যান।

2. Favorites বাটন Favariteএ টোকা দিন বা ক্লিক করুন, Pin site বাটন Pinএ টোকা দিন বা ক্লিক করুন এবং তারপর Pin to Start এ টোকা দিন বা ক্লিক করুন।

 

টিপস: Favorites বাটন Favariteবা Tabs বাটন Tab battonএ টোকা বা ক্লিক করার মাধ্যমে আপনি দ্রুত ফেবারিট এবং ট্যাব এর মধ্যে সুইচ (একটি থেকে আরেকটিতে যাওয়া) করতে পারেন।

 

ওয়েব কন্টেন্ট পড়া, সংরক্ষন করে রাখা এবং অন্যের সাথে শেয়ার করা

যখন আপনি আপনার পছন্দের অনলাইন কন্টেন্ট (বিষয়বস্তু) দেখেন তখন এড্রেস বার এর Reading view আইকনে Reading Viewক্লিক করুন। Reading view বিশৃঙ্খলাগুলো (clutter) দূরে সরিয়ে দেয় – যেমন বিজ্ঞাপণ- সুতরাং বিবরণ সামনে চলে আসে এবং কেন্দ্রিভূত হয়। পেজটিকে Reading view এ দেখার জন্য উক্ত আইকনে টোকা দিন বা ক্লিক করুন। যখন আপনি আবার ব্রাউজিং ভিউ এ ফিরে যেতে চান তখন আবার উক্ত আইকনে টোকা দিন বা ক্লিক করুন।

 

Brawsing View
Reading view বন্ধ থাকা অবস্থায় একটি ওয়েব কলাম

 

Reading View
Reading view চালু অবস্থায় একটি ওয়েব কলাম

 

Reading view এর জন্য আপনার সেটিং নতুনভাবে সাজানো

1. সুইপ করে পর্দার ডান প্রান্তের দিকে যান এবং Settings এ টোকা দিন। (যদি আপনি মাউস ব্যবহার করতে চান তাহলে, মাউস পয়েন্টার পর্দার ডান প্রান্তের নিচের দিকে নিয়ে যান এবং একটু উপেরের দিকে উঠে Settings এ ক্লিক করুন)।

2. Options এ টোকা দিন বা ক্লিক করুন এবং Reading view এর অধীন font style এবং text size পছন্দ করুন।

এখানে কিছু ভিন্ন ভিন্ন ধরনের অপশন আপনার পছন্দের জন্য দেওয়া হলো

Reading option 088b5d6c-100a-4e4b-b7a6-907d8176500a_22 56927be9-53da-492a-9602-70372f9c2d24_25

রিডিং লিস্ট এ পেজ সংরক্ষণ করে রাখা

যখন আপনি কলাম বা অন্য কোন বিষয়বস্তু পরবর্তীতে পড়তে চান, তখন এর লিঙ্ক নিজেই নিজেকে ইমেইল না করে বা একটি অতিরিক্ত ব্রাউজিং ট্যাব না খুলে রেখে দিয়ে শুধুমাত্র এটিকে Reading List এ শেয়ার করুন। Reading List হচ্ছে আপনার নিজস্ব কন্টেন্ট লাইব্রেরি। আপনি যে পেজ এ বর্তমানে আছেন তা ছেড়ে না যেয়েও আপনি কলাম, ভিডিও বা অন্য যেকোন বিষয়বস্তু এতে যোগ করে রাখতে পারেন।

1. সুইপ করে পর্দার ডান প্রান্তের দিকে যান এবং Share এ টোকা দিন। (যদি আপনি মাউস ব্যবহার করতে চান তাহলে, মাউস পয়েন্টার পর্দার ডান প্রান্তের নিচের দিকে নিয়ে যান এবং একটু উপেরের দিকে উঠে Share এ ক্লিক করুন)।

2. Reading List এ টোকা দিন বা ক্লিক করুন এবং তারপর Add এ টোকা দিন বা ক্লিক করুন। আপনার কন্টেন্ট (বিষয়বস্তু) এর লিঙ্ক Reading List এ সংরক্ষিত হবে।

আপনার গোপনীয়তা রক্ষা করতে সাহায্য করা

সামাজিক যোগাযোগ, কেনাকাটা, পড়াশোনা, কাজ – আপনি ওয়েব সাইটে সম্ভবত এগুলোর সবগুলোই প্রতিদিন করে থাকেন যা আপনার ব্যক্তিগত তথ্য অন্যের জন্য সহজ লভ্য করে তুলতে পারে। Internet Explorer আপনার নিরাপত্তা রক্ষা করতে সাহায্য করে এবং আপনার গোপনীয়তা নিয়ন্ত্রণ করে। ব্রাউজিং করার সময় আপনার গোপনীয়তা কিভাবে রক্ষা করবেন তার কিছু উপায় এখানে দেওয়া হলো।

InPrivate Browsing ব্যবহার। আপনার ব্রাউজিং অভিজ্ঞতা উন্নত করার জন্য ব্রাউজার আপনার তথ্য যেমন অনুসন্ধানের ইতিহাস ইত্যাদি সংরক্ষণ করে রাখে। যখন আপনি InPrivate tab ব্যবহার করবেন তখন আপনি সাধারনভাবেই ব্রাউজ করতে পারবেন, কিন্তু যখন আপনি ব্রাউজার বন্ধ করবেন তখন আপনার পাসওয়ার্ড, অনুসন্ধান ইতিহাস এবং ওয়েব পেজ হিস্টোরি ইত্যাদি মুছে যাবে। ইনপ্রাইবেট ট্যাব খোলার জন্য – Application Command দেখার জন্য পর্দার নিচের প্রান্ত থেকে উপরের দিকে সুইপ করে যান, Tab tools বাটন এ টোকা দিন বা ক্লিক করুন এবং তারপর New InPrivate tab এ ক্লিক করুন।

ট্রেকিং প্রোটেকশন ব্যবহার করা এবং আপনার গোপনীয়তা রক্ষা করার জন্য ট্রেক না করা। ট্রেকিং বলতে বোঝায় ওয়েবসাইট, থার্ড-পার্টি কন্টেন্ট পরিবেশক, বিজ্ঞাপণ দাতা  এবং অন্যেরা আপনি কিভাবে সাইটগুলোর সাথে যোগাযোগ রক্ষা করেন তা সম্পর্কে যেভাবে ধারণা লাভ করে। এর মধ্যে অন্তর্ভুক্ত হতে পারে আপনি কোন কোন পেজ ভিজিট করছেন, কোন লিঙ্ক এ ক্লিক করছেন এবং কোন পণ্য ক্রয় করছেন বা পুনর্বিবেচনার জন্য রেখে দিচ্ছেন। Internet Explorer এ আপনি Tracking Protection ব্যবহার করতে পারেন এবং Do Not Track ব্যবহার করতে পারেন যাতে তৃতীয় পক্ষের হাত থেকে আপনার ব্রাউজিং এবং আপনার ভিজিট করা সাইটগুলোর গোপনীয়তা প্রকাশ হয়ে যাওয়াকে সীমাবদ্ধ করা যায়।

Mar 12

এইচটি এম এল এর শিরোনাম (HTML Headings)

HTML Headings

Writer : Tamim Ikbal

HTML Heading কি এটা কিভাবে HTML এ কাজ করে ?

১। HTML Heading কি?
উত্তর: আমরা যারা মাইক্রোসফট অফিস ব্যবহার করে থাকি তারা উপরের বারে প্রায়ই হেডিং(Heading) নামে একটা অপশন দেখি। এখন এই হেডিংটা আসলে কি? হেডিং এর কাজ লেখাকে একটি নির্দিষ্ট আকৃতি(Size) দেওয়া। এজন্য অনেকগুলো হেডিং(Heading) ব্যবহার করা হয়। যেমন:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
২। HTML Heading কি কাজে ব্যবহার করা হয়?

এটি লেখার সৌন্দর্য বৃদ্ধির জন্য অর্থাৎ শিরোনাম থেকে বর্ণনাকে বা বর্ণনা থেকে শিরোনামকে আলাদাভাবে দেখানো জন্য ব্যবহার করা হয়।

HTML এ এটি কিভাবে লিখলে এটি আউটপুট প্রদর্শন করে ?
প্রথমে নোটপ্যাড++ ওপেন করে নিচের কোডটি টাইপ করুন .

<html>
<head>
<title>your website name</title>
</head>
<body>
<h1>This is Heading one</h1>
<h2>This is Heading two</h2>
<h3>This is Heading three</h3>
<h4>This is Heading four</h4>
<h5>This is Heading five</h5>
<h6>This is Heading six</h6>
</body>
</html>

এরপর এটি যেকোন নামে অথবা heading.html নামে সেভ(save) করুন।
এরপর সেভ করা ফাইলটিতে ডাবল ক্লীক করার পর আউটপুট হিসেবে আপনার ব্রাউজার আপনাকে যা দেখাবে তা নিম্নে দেওয়া হল:
This is Heading one

This is Heading two

This is Heading three

This is Heading four

This is Heading five

This is Heading six

আপনার ফাইল টি যখন সেভ করে কোন ওয়েব ব্রাউজার এ রান করাবেন তখন ওপরের মতো দেখতে পাবেন ।

Mar 12

পিএইচপি ৫ বহুমাত্রিক অ্যারে (PHP 5 Multidimensional Arrays)

এই টিউটোরিয়ালের শুরুর দিকে , আমরা arrays নিয়ে আলোচনা করেছিলাম যা key/value এর একটি Single তালিকা।
যাইহোক তবে কখনও কখনও আপনি একাধিক কী দিয়ে মান সংরক্ষণ করতে চান। যেটা multidimensional arrays এর মাধ্যমে সংরক্ষণ করা যেতে পারে।

পিএইচপি – বহুমাত্রিক অ্যারে

একটি বহুমাত্রিক array এক অথবা অধিক array ধারণকারী একটি array ।
পিএইচপি দুই, তিন, চার, পাঁচ, বা আরো গভীর মাত্রার বহুমাত্রিক অ্যারে বুঝতে পারে।
যাইহোক, তিন মাত্রা বেশী অ্যারে অধিকাংশ মানুষের জন্য পরিচালনা করা কঠিন।

একটি array এর মাত্রা আপনার একটি উপাদান নির্বাচন করা প্রয়োজনীয় সূচক সংখ্যা নির্দেশ করে।

  • একটি দুটি ত্রিমাত্রিক array এর জন্য, আপনার একটি উপাদান নির্বাচন করা দুই সূচকের প্রয়োজন ।
  • একটি ত্রিমাত্রিক array এর জন্য আপনার একটি উপাদান নির্বাচন করা তিনটি সূচকের প্রয়োজন ।

 

পিএইচপি – দুই মাত্রিক অ্যারে

একটি দুই-মাত্রিক অ্যারে হল অ্যারের একটি অ্যারে (একটি ত্রিমাত্রিক অ্যারে অ্যারে শ্রেনীবিন্যাস একটি অ্যারে)
প্রথমত, নিম্নলিখিত টেবিলে লক্ষ্য করা যাক:

নাম স্টক বিক্রি
Volvo 22 18
BMW 15 13
Saab 5 2
Land Rover 17 15

 

আমরা একটি দুটি ত্রিমাত্রিক অ্যারের মধ্যে উপরের টেবিল থেকে তথ্য সংরক্ষণ করতে পারব, Like this:

$cars = array
   (
   array("Volvo",22,18),
   array("BMW",15,13),
   array("Saab",5,2),
   array("Land Rover",17,15)
   );

 

এখন দুই-মাত্রিক $cars array এর চার array রয়েছে, এবং এর দুই সূচক ও আছে: সারি এবং কলাম।

আমদের দুই সূচক (সারি এবং কলাম) নির্দেশ করতে হবে $cars অ্যারের উপাদান অ্যাক্সেস পেতে হবে:

উদাহরনঃ

<?php
 echo $cars[0][0].": In stock: ".$cars[0][1].", sold: ".$cars[0][2].".<br>";
 echo $cars[1][0].": In stock: ".$cars[1][1].", sold: ".$cars[1][2].".<br>";
 echo $cars[2][0].": In stock: ".$cars[2][1].", sold: ".$cars[2][2].".<br>";
 echo $cars[3][0].": In stock: ".$cars[3][1].", sold: ".$cars[3][2].".<br>";
 ?>

 

 

উদাহরণস্বরূপ ব্যবহার করতে পারেন

আমরা $cars অ্যারের উপাদান পেতে একটি লুপ এর ভিতর অন্য একটি লুপ লাগাতে পারব (আমরা এখনও দুই সূচক নির্দেশ করতে হবে):

উদাহরনঃ

<?php
 for ($row = 0; $row < 4; $row++) {
   echo "<p><b>Row number $row</b></p>";
   echo "<ul>";
   for ($col = 0; $col < 3; $col++) {
     echo "<li>".$cars[$row][$col]."</li>";
   }
   echo "</ul>";
 }
 ?>

 

 

Mar 12

এইচটিএমএল টিউটোরিয়াল পরিচিতি (HTML tutorial Introduction)

HTML পরিচিতি

HTML কি?

HTML হল একটি মার্কআপ ল্যাঙ্গুয়েজ যার মাধ্যমে একটি ওয়েব পেজের কন্টেন্ট গুলোকে বর্ণনা করা হয়।

  • HTML এর পূর্ণরূপ হল Hyper Text Markup Language
  • মার্কআপ ল্যাঙ্গুয়েজ হল অনেকগুলো মার্কআপ ট্যাগের সমষ্টি
  • HTML এর ডকুমেন্টস HTML ট্যাগ দ্বারা বর্ণনা করা হয়
  • প্রত্যেকটি HTML ট্যাগ ডকুমেন্টের ভিন্ন ভিন্ন কন্টেন্টকে বর্ণনা করে

উদাহরণ

<!DOCTYPE html>

<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 এর ট্যাগগুলোকে ডিসপ্লে করে না কিন্তু কোন কন্টেন্টকে কিভাবে ডিসপ্লে করতে হবে তার জন্য ট্যাগগুলোকে ব্যাবহার করে।

chrome

HTML পেজ স্ট্রাকচার

HTML পেজ কিভাবে ব্রাউজারে ডিসপ্লে হয় তার একটি স্ট্রাকচার নিচে দেয়া হল

<html>

<head>

<title>Page title</title>

</head>

 

<body>

<h1>This is a heading</h1>

 

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

 

<p>This is another paragraph.</p>

</body>

</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