HTML এ পরিচিতি

This translation is incomplete. Please help translate this article from English.

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

বেশ কিছু প্রযুক্তি রয়েছে ( যেমন CSSJavaScriptFlashAJAXJSON) যেগুলো একটা ওয়েব পেজ এর নানা অংশকে তৈরি করার কাজে ব্যবহার করা হয়। তবে, একদম শুরুর কথা বললে, একটা ওয়েব পেজ কে শুরু করতে হবে HTML  (HyperText Markup Language)  ব্যবহার করে। HTML ছাড়া কোন ওয়েব পেজ হতে পারে না।  HTML হচ্ছে সেই জিনিস যা কিনা ওয়েবের বাকি সবকিছুকে ধরে রেখেছে - এটি একটি আন্তর্জাতিক স্ট্যান্ডার্ড যার নীতিমালা প্রণয়ন করে World Wide Web Consortium (W3C) এবং Web Hypertext Application Technology Working Group (WHATWG)। WHATWG ধরেই নিয়েছে HTML প্রায়ই পরিবর্তিত হবে। আর W3C, নিয়মিত বিরতি তে HTML এর সংস্করণ প্রণয়ন করে, যেটার সর্বশেষ টা হচ্ছে HTML5, যার ভবিষ্যৎ হচ্ছে HTML 5.1

HTML নির্দেশিকা একটি মাত্র প্রোগ্রামিং ভাষা আমাদের দিয়েছে, যা আমরা HTML সিনট্যাক্স ব্যবহারকরে লিখে থাকি। এই সিনট্যাক্স অতটা কড়াকড়ি করে না, তবে একটু কড়াকড়ি (strict) সিনট্যাক্স ও আছে যেমন XML (Extensible Markup Language)। এছাড়া ওয়েব এপ্লিকেশন তৈরি করতে কি কি লাগতে পারে সেটাও এই নির্দেশিকার অংশ। তবে এই নির্দেশিকা যা নিয়ে মাথা ঘামায় না তা হল কন্টেন্ট কে কিভাবে স্টাইল দেওয়া হবে। নির্দেশিকা শুধুমাত্র কন্টেন্ট এর মানে কি, সেটা  নিয়েই আলোচনা করে।

 যারা ওয়েব পেইজ তৈরি করেন, তারা CSS ব্যবহার করে ওয়েবসাইটের চেহারা/দেখতে কেমন হবে তা বলে দিতে পারেন। ওয়েবপেইজের টেক্সট এর লে-আউট কেমন হবে ইত্যাদি এটি দিয়ে নির্ধারণ করে দেওয়া যায়। HTML ব্যবহার করেও ওয়েব পেইজ দেখতে কেমন হবে তা নির্ধারণ করা যায়, তবে আপনাকে উৎসাহিত করা হচ্ছে CSS ব্যবহার করে পেইজের চেহারা দিতে। এখনকার ভাল ডেভেলপার রা এটাই করে থাকেন।

এই আর্টিকেলে আপনাকে HTML এর সাথে পরিচয় করিয়ে দেওয়া হবে। যদি ওয়েব ব্রাউজারে যা হচ্ছে, কিভাবে হচ্ছে জানার আগ্রহ থাকে, তাহলে ঠিক যায়গাতেই এসেছেন।

HTML এর সংক্ষিপ্ত ইতিহাস 

১৯৮০'র শেষের দিকে টিম বার্নার লি, সার্নে ( দ্যা ইউরোপিয়ান অর্গানাইজেশন ফর নিউক্লিয়ার রিসার্চ ) একজন ফিজিসিষ্ট হিসাবে কর্মরত ছিলেন। তিনি বিজ্ঞানীদের জন্য ইন্টারনেট ব্যবহার করে নানা ধরনের তথ্য উপাত্ত শেয়ার করার একটা উপায় খুঁজে বের করেন। তার আবিষ্কার এর আগে, ইন্টারনেট এর মাধ্যমে যোগাযোগ শুধু সাধারন টেক্সট, ইমেইল এর মতো প্রযুক্তি, FTP ( ফাইল ট্রান্সফার প্রটোকল ) এবং Usenet ভিত্তিক আলোচনা মাধ্যমের মধ্যেই সীমাবদ্ধ ছিলো। HTML এর আবিষ্কার একটা কেন্দ্রীয় সার্ভারে রাখা বিভিন্ন তথ্যকে সাজিয়ে সেটাকে ব্রাউজার এর মাধ্যমে দেখার সুযোগ সৃষ্টি করে। এটা "রিচ" ডকুমেন্ট ( যেখানে লেখালেখি নানা ভাবে সাজানো হয় এবং ছবি দেখানোর ব্যবস্থা থাকে ) দেখার সুবিধাকে আরো সহজ করে দেয়। 

HTML কি?

HTML হল একটি মার্কআপ ভাষা। এটি ব্রাউজারকে কিভাবে বিষয়বস্তু দেখাতে হবে তা বলে থাকে। HTML "বিষয়বস্তু" (শব্দ, ছবি, অডিও, ভিডিও এবং আরও অনেক) কে "উপস্থাপনা" (বিষয়বস্তুর ধরণের সংজ্ঞা এবং কিভাবে সেই বিষয়বস্তুটি প্রদর্শিত হবে তার নির্দেশনাবলী) থেকে আলাদা করে থাকে। HTML একটি পূর্ব নির্দেশিত উপাদানের সমষ্টি ব্যবহার করে বিষয়বস্তুর ধরণর চিহ্নিত করতে। উপাদান যা এক বা একাধিক "ট্যাগ" ধারণ করে তা বিষয়বস্তু ধারণ বা প্রকাশ করে থাকে। ট্যাগগুলো বেষ্টিত থাকে  কোনাকৃতির ব্রাকেট, এবং "বন্ধ" ট্যাগ (যা বিষয়বস্তুর শেষে নির্দেশিত হয়) অগ্রবর্তী স্ল্যাশ (slash) দ্বারা উপসর্গায়িত হয়।

উদাহরণ সরূপ, অনুচ্ছেদ উপাদানটি গঠিত হয় শুরুর ট্যাগ "<p>" এবং শেষের ট্যাগ "</p>" দ্বারা। উল্লেখিত উদাহরণটি HTML অনুচ্ছেদ উপাদানে বিদ্যমান একটি অনুচ্ছেদকে প্রদর্শিত করে।

<p>My dog ate all the guacamole.</p>

যখন এই উপাদানটি একটি ওয়েব ব্রাউজারে প্রদর্শিত হয়, তখন ইহা এরূপ দেখায়:

ব্রাউজরে ট্যাগগুলোকে ব্যবহার করে কিভাবে ট্যাগগুলোর বিষয়বস্তু প্রদর্শিত হবে তার একটি সূচক হিসেবে।

উপাদানগুলো যা বিষয়বস্তুতে বিদ্যমান থাকে, তা সাধারণত অন্যান্য উপাদানগুলোকেও ধারণ করতে পারে। উদাহরণ সরূপ, emphasis উপাদান একটি অনুচ্ছেদের মধ্যে ("<em>") দ্বারা অনুবিদ্ধ হতে পারে। emphasis কে কোন শব্দ বা বাক্যে যোগ করতে:

<p>My dog ate <em>all</em> the guacamole.</p>

যখন প্রদর্শিত হয়, তখন এরূপ দেখায়:

কিছু উপাদান অন্যান্য উপাদানগুলোকে ধারণ করে না। উদাহরণ সরূপ, ছবির ট্যাগ ("<img>") একটি বিষয়বস্তুর (ছবি) নাম উল্লেখ করে একটি উৎস্যসরূপ:

<img src="smileyface.jpg">

সাধারণত একটি অগ্রবর্তী ফ্লাশ কোণাকৃতি ব্রাকেটে ব্যবহার করা হয়, ট্যাগ শেষে তা নির্ধারণ করার জন্য। ইহা HTML এর জন্য ঐচ্ছিক হলেও XHTML এর জন্য অত্যাবশ্যক।(যেটা একটা XML schema যা HTML উপাদানগুলোকে ইমপ্লিমেন্ট করে)।

এই অনুচ্ছেদের পরবর্তী অংশে উপরে পরিচয় করিয়ে দেওয়া বিষয়গুলো আরো গভীরভাবে আলোচিত হবে। যাই হোক, আপনি যদি HTML এর ক্রিয়া সরাসরি দেখতে চান, মোজিলা থিমবল দেখুন, which is an interactive on-line editor that teaches you how to write HTML markup. Also, see HTML Elements for a list of available elements and a description of their use.

Elements — the basic building blocks

HTML এক সেট উপাদানের (element) সমন্নয়ে গঠিত। উপাদানসমূহ তাদের বিষয়বস্তুর শব্দগত অর্থ নির্ধারণ করে। উপাদানসমূহের নিজস্ব ট্যাগ (tag) সহ সবকিছুই দুটি ট্যাগ (tag) এর মধ্যে লিখতে হয়। উদাহরণসরূপ,  "<p>" উপাদানটি একটি অনুচ্ছেদ (paragraph) নির্দেশ করে; "<img>" উপাদানটি image এর জন্যে ব্যবহার করা হয়।   পূর্ণ তালিকার জন্যে HTML Element পাতাটি দেখুন

কিছু কিছু উপাদানের খুব সুনির্দিষ্ট অর্থ আছে, যেমন  "this is an image", "this is a heading" অথবা  "this is an ordered list." অন্যগুলো খুব সুনির্দিষ্ট কিছু প্রকাশ করেনা যেমন,  "this is a section on the page" অথবা "this is part of the text." তবুও টেকনিক্যাল কারণে অন্যগুলো ব্যবহার করা হয়। যেমন "this is identifying information for the page that should not be displayed." নির্বিশেষে সকল HTML উপাদানেরই বিশেষ কোনো অর্থ আছে। 

অনেকগুলো উপাদানের সমন্বয়ে একটি সম্পূর্ণ সাইটের কাঠামো তৈরী করে, খুবই সাধারণ একটি ওয়েব পেজের গঠন নিম্নের মত হয়, 

<html>
  <body>

    <p>My dog ate all the guacamole.</p>

  </body>
</html>

একটু ভালমত খেয়াল করলেই আপনি দেখতে পাবেন, <html> এলিমেন্টটি সকল document কে ঘিরে রেখেছে। এবং,  <body> উপাদানটি পেজের সম্পূর্ণ কনটেন্ট কে ঘিরে রেখেছে। এই গঠনগুলো সাধারনত গাছের বিভিন্ন শাখা প্রশাখার মত হয়।  (এখানে <body> এবং  <p> ) গঠিত হয়েছে <html> থেকে।  এই গঠনটি DOM: the Document Object Model হিসাবে পরিচিত 

Tags

এইচটিএমএল ডকুমেন্ট প্লেইন টেক্সট এ লেখা হয়। এদেরকে যেকোন টেক্সট এডিটর এ লেখা যায় যেমনঃ নোটপ্যাড ও  নোটপ্যাড++ ও  সাবলাইন ( বেশিরভাগ লেখক বলেন বিশেষায়িত এডিটর ব্যাবহার করতে হবে যা হাইলাইট সিনটেক্ট এবং ডোম দেখায়)। ট্যাগ নামগুলো লেখা হবে হয় আপার কেইজ অথবা লোয়ার কেইজএ। তারপরও W3C ( এইচটিএমএল স্ট্যানডারড নিয়ন্ত্রন কারী একটি বিশ্ব সংস্থা) যা ব্যবহার করতে বলে লোয়ার কেইজ ( এবং XHTML  চায় লোয়ার কেইজ)।

যা কিছু এই ("<")  চিন্হ ও এই (">") চিন্হ এর মধ্যে থাকবে তা এইচটিএমএল  এ বিশেষ অর্থে ব্যবহার করা হয়।  একে মার্কআপ ট্যাগ বলা হয়। এখানে একটা সহজ উধাহরন দাওয়া হল।

 

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

In this example there is a start tag and a closing tag. Closing tags are the same as the start tag but also contain a forward slash immediately after the leading less-than sign. Most elements in HTML are written using both start and closing tags. Start and closing tags should be properly nested, that is closing tags should be written in the opposite order of the start tags. Proper nesting is one rule that must be obeyed in order to write valid code.

This is an an example of valid code:

<em>I <strong>really</strong> mean that</em>.

This is an example of invalid code:

Invalid: <em>I <strong>really</em> mean that</strong>.

Note that in the valid example, the closing tag for the nested element is placed before the closing tag for the element in which it is nested.

Until the adoption of the HTML5 parsing rules, browsers didn't interpret invalid code in the same way and produced different results when they encountered invalid code. Browsers were forgiving to Web authors, but unfortunately not all in the same way, resulting in almost unpredictable results in case of invalid HTML. These days are over with the latest evolution of browsers, like Internet Explorer 10, Firefox 4, Opera 11.60, Chrome 18 or Safari 5, as they implement the now-standard invalid-code-parsing rules. Invalid code results in the same DOM tree on all modern browsers.

Some elements do not contain any text content or any other elements. These are empty elements and need no closing tag. This is an example:

<img src="smileyface.jpg">

Many people mark up empty elements using a trailing forward slash (which is mandatory in XHTML).

<img src="smileyface.jpg" />

In HTML this slash has no technical functionality and using it is a pure stylistic choice.

Attributes

The start tag may contain additional information, as in the preceding example. Such information is called an attribute. Attributes usually consist of 2 parts:

  • An attribute name.
  • An attribute value.

A few attributes can only have one value. They are Boolean attributes and may be shortened by only specifying the attribute name or leaving the attribute value empty. Thus, the following 3 examples have the same meaning:

<input required="required">

<input required="">

<input required>

Attribute values that consist of a single word or number may be written as they are, but as soon as there are two or more strings of characters in the value, it must be written within quotation marks. Both single quotes (') and double quotes (") are allowed. Many developers prefer to always use quotes to make the code less ambiguous to the eye and to avoid mistakes. The following is such a mistake:

<p class=foo bar> (Beware, this probably does not mean what you think it means.)

In this example the value was supposed to be "foo bar" but since there were no quotes the code is interpreted as if it had been written like this:

<p class="foo" bar="">

Named character references

Named character references (often casually called entities) are used to print characters that have a special meaning in HTML. For example, HTML interprets the less-than and greater-than symbols as tag delimiters. When you want to display a greater-than symbol in the text, you can use a named character reference. There are four common named character references one must know:

  • &gt; denotes the greater than sign (>)
  • &lt; denotes the less than sign (<)
  • &amp; denotes the ampersand (&)
  • &quot; denotes double quote (")

There are many more entities, but these four are the most important because they represent characters that have a special meaning in HTML.

Doctype and comments

In addition to tags, text content and entities, an HTML document must contain a doctype declaration as the first line. In modern HTML this is written like this:

<!DOCTYPE html>

The doctype has a long and intricate history, but for now all you need to know is that this doctype tells the browser to interpret the HTML and CSS code according to W3C standards and not try to pretend that it is Internet Explorer from the 90's. (See quirks mode.)

HTML has a mechanism for embedding comments that are not displayed when the page is rendered in a browser. This is useful for explaining a section of markup, or leaving notes for other people who might work on the page, or for leaving reminders for yourself. HTML comments are enclosed in symbols as follows:

<!-- This is comment text -->

A complete but small document

Putting this together here is a tiny example of an HTML-document. You can copy this code to a text editor, save it as myfirstdoc.html and load it in a browser. Make sure you are saving it using the character encoding UTF-8. Since this document uses no styling it will look very plain, but it is only a small start.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>A tiny document</title>
</head>
<body>
  <h1>Main heading in my document</h1>
  <!-- Note that it is "h" + "1", not "h" + the letter "one" -->
  <p>Loook Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
</body>
</html>

ডকুমেন্ট ট্যাগ এবং অবদানকারী

 Contributors to this page: ToufiqAmin, Jeremie, Motiur, foysalremon, desh, shafiul, anas, oritromax
 সর্বশেষ হালনাগাদ করেছেন: ToufiqAmin,