HTML

১। এইচটিএমএল কি?

হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ (অথবা এইচটিএমএল, ইংরেজি: Hyper Text Markup Language) হলো একটি মার্ক আপ ল্যাঙ্গুয়েজ। এইচটিএমএল এর মার্ক আপ ট্যাগ সমূহ ব্যাবহার করে ওয়েবপেজ এর বেসিক কাঠামো তৈরি করা হয়।

প্রকৃত অর্থে এটি কোনো প্রোগ্রামিং ল্যাংগুয়েজ নয় বরং একটি মার্কআপ ল্যাংগুয়েজ যা একসারি মার্কআপ ট্যাগ এর সমন্বয় গঠিত । ইন্টারনেটে, তথা ওয়েবসাইটে ওয়েবপেজ তৈরিতে এইচ টি এম এল সবচেয়ে বেশি ব্যবহৃত হয়। এই ফাইলের এক্সটেনশন .html অথবা .htm উভয়ই হতে পারে। এতে বিভিন্ন এইচটিএমএল ট্যাগ ব্যবহার করে বিভিন্ন ফর্ম্যাটিং, অবজেক্ট ও লিংক প্রকাশ করা করা হয়। HTML এর সর্বশেষ ভার্সন হলো HTML5 যার উন্নয়ন কাজ এখন সম্পূর্ণ এবং নতুন আদর্শমান । HTML5 এ ওয়েবসাইটে অডিও,ভিডিও যোগ করার জন্য নতুন আদর্শ(স্ট্যান্ডার্ড) যোগ করা হয়েছে।

২। এইচটিএমএল ইতিহাস।

1980 সালে ব্রিটিশ কম্পিউটার বিজ্ঞানী টিম বার্নাস-লি, যিনি CERN এ একজন ঠিকাদার ​​ছিলেন, সর্বপ্রথম CERN গবেষকদের মাঝে দস্তাবেজ শেয়ার করার জন্য ENQUIRE prototyped নামে একটি ‍System এর প্রস্তাব দেন। 1989 সালে, Berners-Lee একটি ইন্টারনেট ভিত্তিক হাইপারটেক্সট সিস্টেম প্রস্তাবে একটি মেমো লিখেন. 1990 সালে Berners-Lee ব্রাউজার এবং সার্ভারের সফ্টওয়্যারে এইচটিএমএল (HTML) এর উল্লেখ করেন ।এ বছরেই, Berners-Lee এবং CERN এর তথ্য সিস্টেম ইঞ্জিনিয়ার Robert Cailliau যৌথভাবে CERN কে এ প্রকল্পের জন্য অর্থায়নে অনুরোধ করেন, কিন্তু প্রকল্পটি আনুষ্ঠানিকভাবে CERN দ্বারা গৃহীত হয়নি।

৩। এইচটিএমএল ট্যাগ কি? 

কোড লেখার আগে পরে নির্দিষ্ট কিছু চিহ্নসহ নির্ধারিত কিছু শব্দ ব্যাবহার করা হয়। এগুলোকে ট্যাগ বলে। একটি হচ্ছে আরম্ভ ট্যাগ (যেমন <h1>) এবং অপরটি সমাপ্তি ট্যাগ (</h1>)।

৪। HTML ইলিমেন্ট কি? 

HTML এর  ট্যাগ  শুরু ও শেষ ট্যাগ এর মাঝের অংশকে ইলিমেন্ট বলা হয়। যেমন <h1> Chhayanill.blogspot.com </h1> । এখানে <h1> হেডার1 শুরু এবং </h1> হেডার1 শেষ ট্যাগের মাঝে Chhayanill.blogspot.com লেখা হয়েছে, তাই একটি ইলিমেন্ট। কিছু কিছু ট্যাগের কোন ইলিমেন্ট থাকে না যেমন <br /> ,<img /> ইত্যাদি।

৫। ওয়েব ব্রাউজার কি?

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

৬। প্রশ্ন: ওয়েবসাইট কী? ওয়েবসাইটের কাঠামো বলতে কী বোঝায়? বর্ণনা করো।

উত্তর:

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

ওয়েবসাইটের কাঠামো: যে অবকাঠামোতে একটি ওয়েবসাইটের সব তথ্য উপস্থাপন করা হয়, তাকে ওয়েবসাইটের কাঠামো বলা হয়। 

ওয়েবসাইটের কাঠামো তিনটি অংশে বিভক্ত। যথা:

১. হোমপেজ

২. মূল সেকশন বা মূল ধারার পেজ

৩. উপ-সেকশন বা উপধারার পেজ

১. হোমপেজ: হোমপেজ ব্রাউজার শুরুতে লোড করে। হোমপেজ হলো একধরনের সূচি। এই পেজে মূল প্রোগ্রাম, ব্যানার, অ্যানিমেশন যুক্ত থাকে। এখানে মেন্যু তৈরি করে অন্যান্য পেজের সঙ্গে যুক্ত করা থাকে।

২. মূল সেকশন বা মূল ধারার পেজ: হোমপেজের পরের ওয়েবপেজগুলোকে মূল সেকশন বলে। মূল সেকশন কয়েকটি পেজ নিয়ে গঠিত হয়।

৩. উপ-সেকশন বা উপধারার পেজ: মূল সেকশন আবার অনেকগুলো পেজের সঙ্গে যুক্ত। হোমপেজ থেকে মূল সেকশন এবং মূল সেকশন থেকে উপ-সেকশনে পেজের সংখ্যা বৃদ্ধি পেতে থাকে এবং লেখার পরিমাণও বাড়তে থাকে।

উপরিউক্ত পেজগুলো বিভিন্নভাবে সাজানো থাকতে পারে। ওয়েবসাইটের বৈশিষ্ট্য অনুসারে তার বিভিন্ন পেজগুলো নিম্নোক্ত চারভাবে সাজানো যেতে পারে। যেমন:

১। ট্রি বা হায়ারারকিক্যাল

২। ওয়েব লিংকড বা নেটওয়ার্ক

৩। সিকুয়েন্স বা লিনিয়ার

৪। হাইব্রিড বা কম্বিনেশন

ট্রি বা হায়ারারকিক্যাল কাঠামো:

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

হায়ারারকি কাঠামোর দুটি ভাগ রয়েছে:

এক স্তরের হায়ারারকি কাঠামো

বহুস্তরের হায়ারারকি কাঠামো।

এক স্তরের হায়ারারকি কাঠামো:

এ কাঠামোয় প্রতিটি ওয়েবপেজ শটার বা তারার মতো একটি কেন্দ্রীয় পেজের সঙ্গে সংযুক্ত থাকে। যেকোনো পেজে যেতে হলে হোমপেজ থেকে যেতে হয়। এক পেজ থেকে অন্য পেজে যাওয়া যায় না।

বহুস্তরের হায়ারারকি কাঠামো:

এ কাঠামোয় একটি হোমপেজের সঙ্গে একাধিক সরল লিনিয়ার কাঠামো যুক্ত থাকে। এ ধরনের কাঠামোয় ওয়েবসাইটের পেজগুলোকে সহজেই শ্রেণিতে ও উপ-শ্রেণিতে ভাগ করা যায় বলে, বিশাল আকারের সাইটগুলো সুশৃঙ্খলভাবে সাজাতে এই কাঠামো ব্যবহার করা হয়।

ওয়েব লিংকড কাঠামো:

ওয়েব লিংকড কাঠামোয় সাইটের ওয়েবপেজগুলো প্রত্যেকে প্রত্যেকের সঙ্গে সংযোগ বা লিংক থাকে। ফলে যেকোনো পেজ থেকে যেকোনো পেজে আসা-যাওয়া করা সম্ভব হয়। অনেক সময় এই কাঠামোর সাইটগুলোয় অন্য সাইটের ওয়েবপেজের লিংক বা সংযোগ থাকে। ক্ষেত্রবিশেষে ওয়েব লিংকড কাঠামোর সাইটগুলো বেশ জটিল আকার ধারণ করতে পারে। সাধারণ ব্যবহারকারীদের জন্য এই কাঠামো ব্যবহার করা বেশ জটিল বলে এই কাঠামো দিয়ে তৈরি সাইটের প্রচলন সে রকম নেই বললেই চলে।

সিকোয়েন্স বা লিনিয়ার কাঠামো:

ওয়েবসাইটে বিভিন্ন ওয়েবপেজে তথ্য বিন্যস্ত করে রাখার জন্য লিনিয়ার কাঠামো সবচেয়ে সহজ ও পরিচিত পন্থা। বই-পত্র, ম্যাগাজিন ইত্যাদিতে এই কাঠামো ব্যবহার করা হয়। লিনিয়ার কাঠামোয় ওয়েবপেজগুলো ধারাবাহিকভাবে পর পর সংযুক্ত থাকে। লিনিয়ার কাঠামোর আবার দুটি ভাগ রয়েছে:

সরল লিনিয়ার কাঠামো

যৌগিক লিনিয়ার কাঠামো।

সরল লিনিয়ার কাঠামো:

এ কাঠামোয় ওয়েবসাইটের ওয়েবপেজগুলো পর পর সংযুক্ত থাকে। ফলে একটি ওয়েব থেকে অন্যটিতে যেতে হলে ধাপে ধাপে যেতে হয়। সাধারণত বিভিন্ন প্রশিক্ষণ বা শিক্ষামূলক সাইটে এই  কাঠামো ব্যবহার করা হয়।

যৌগিক লিনিয়ার কাঠামো:

এ কাঠামোয় ওয়েবসাইটের ওয়েবপেজগুলো পর পর সংযুক্ত থাকলেও, প্রতিটি পেজের সঙ্গে অন্য এক বা একাধিক পেজের সংযোগ থাকতে পারে।

হাইব্রিড বা কম্বিনেশন কাঠামো:

হাইব্রিড কাঠামো হচ্ছে সবচেয়ে কার্যকর কাঠামো। দুই বা দুয়ের বেশি কাঠামোর মিশ্রণে এই কাঠামো তৈরি হয়। বিশাল আকৃতি ও জটিল ওয়েবসাইট তৈরিতে এই কাঠামো বেশি ব্যবহূত হয়। হাইব্রিড কাঠামোর মূল ভিত্তি হিসেবে হায়ারারকি কাঠামোকেই বেছে নেওয়া হয়। হায়ারারকি কাঠামোর সঙ্গে লিনিয়ার কাঠামো বা ওয়েব লিংকড কাঠামোর সংমিশ্রণে হাইব্রিড কাঠামো গড়ে ওঠে। তবে অনেক সময় হায়ারারকি, ওয়েব লিংকড ও লিনিয়ার তিনটি কাঠামো মিলেই হাইব্রিড কাঠামো গঠন করা হয়।

 

Basic HTML Document Simplest form, following is an example of an HTMLdocument:

(1)

<html>

<head>

<title>

This is document title

</title>

</head>

<body>

<h1>

This is a heading

</h1>

<p>

Document content goes here.....

</p>

</body>

</html>

Output 

(2) Basic HTML Tag... (Heading Tag)

<html>

<head>

<title>

Heading Example

</title>

</head>

<body>

<h1>

This is heading 1

</h1>

<h2>

This is heading 2

</h2>

<h3>

This is heading 3

</h3>

<h4>

This is heading 4

</h4>

<h5>

This is heading 5

</h5>

<h6>

This is heading 6

</h6>

</body>

</html>

Output

(3) Basic HTML Tag... (Paragraph Tag)

<html>

<head>

<title>

Paragraph Example

</title>

</head>

<body>

<p>

Here is a First paragraph of text.

</p>

<p>

Here is a Second paragraph of text.

</p>

<p>

Here is a Third paragraph of text.

</p>

</body>

</html>

Output

Here is a First  paragraph of text.

Here is a Second paragraph of text.

Here is a Third  paragraph of text. 

 (4) Basic HTML Tag... (Linebreak Tag)

<html>

<head>

<title>

Line Break Example

</title>

</head>

<body>

<p>

Hello <br/>

You delivered your assignment on time.<br/>

Thanks <br/>

Mahnaz </p>

</body>

</html>

Output

Hello

You delivered your assignment on time

       Thanks

       Mahnaz

(5) Basic HTML Tag... (Formatting Tag)

 Bold Text

<html>

<head>

<title>Bold Text Example</title>

</head>

<body>

<p>

The following word uses a <b> bold </b>typeface.

</p>

</body>

</html>

Output

The following word uses a Bold typeface.

(6) Basic HTML Tag... (Formatting Tag)

 Italic Text

<h

tml>

<head>

<title>Italic Text Example</title>

</head>

<body>

<p>

The following word uses a <i> Italic </i>typeface.

</p>

</body>

</html>

Output

The following word uses a Italic typeface.

(7) Basic HTML Tag... (Formatting Tag)

Underline Text

<h

tml>

<head>

<title>Underline Text Example</title>

</head>

<body>

<p>

The following word uses a <u> Underline </u>typeface.

</p>

</body>

</html>

Output

The following word uses a Underline typeface.

(8) Superscript Text

<html>

<head>

<title>

Superscript Text Example

</title>

</head>

<body>

<p>

The following word uses a ^superscript typeface.

</p>

</body>

</html>

Output:

The following word uses a ^superscript Type Face

 (9) Subscript Text

       <html>

<head>

<title>

Superscript Text Example

</title>

</head>

<body>

<p>

The following word uses a _subscript typeface.

</p>

</body>

</html>

Output:

The following word uses a _subscript Type Face

 (10) Image Tag

<html>

<head>

<title>

Using Image in Webpage

</title>

</head>

<body>

<p>

Simple Image Insert

</p>

<img src = "Rose.jpg">

</body>

</html>

Output:

 

  

(11) Basic Table Tag

<html>

<head>

<title> HTML Tables </title>

</head>

<body>

  <table border = "1">

<tr>

<td>

Row 1, Column 1

</td>

<td>

Row 1, Column 2

</td>

  </tr>

<tr>

<td>

Row 2, Column 1

</td>

<td>

Row 2, Column 2

</td>

</tr>

</table>

</body>

</html>

 Output:

(12) Table Heading

<html>

<head>

<title>

HTML Table Header

</title>

</head>

<body>

<table border = "1" >

<tr>

<th>

Name

</th>

<th>

Salary

</th>

</tr>

<tr>

<td>

Maryam Hossain

</td>

<td>

10,000

</td>

</tr>

<tr>

<td>

Araf Hossain

</td>

<td>

 7000

</td>

</tr>

</table>

</body>

</html>

Output

(13) Table Colspan & Rowspan

<html>

<head>

<title>

HTML Table Colspan/Rowspan

</title>

</head>

<body>

<table border = "1">

<tr>

<th>

Column 1

</th>

<th>

Column 2

</th>

<th>

Column 3

</th>

</tr>

<tr>

<td rowspan = "2" >Row 1 Cell 1 </td>

<td>Row 1 Cell 2</td>

<td>Row 1 Cell 3</td>

</tr>

<tr>

<td>Row 2 Cell 2 </td>

<td>Row 2 Cell 3 </td>

</tr>

<tr>

<td colspan = "3"> Row 3 Cell 1

</td>

</tr>

</table>

</body>

</html>

 Output

(14) Table Backgrounds 

<html>

<head>

<title>

HTML Table Background

</title>

</head>

<body>

  <table Border ="1" Bordercolor ="Green" Bgcolor = "yellow" >

<tr>

<th> Column 1 </th>

<th> Column 2 </th>

<th> Column 3 </th>

</tr>

<tr>

<td rowspan ="2">Row 1 Cell 1 </td>

  <td> Row 1 Cell 2 </td>

<td>Row 1 Cell 3 </td>

</tr>

<tr>

<td> Row 2 Cell 2 </td>

<td> Row 2 Cell 3 </td>

</tr>

<tr>

<td colspan = "3"> Row 3 Cell 1 </td>

</tr>

</table>

</body>

</html>

Output

(15) Order List.. (1)

<html>

<head>

<title>

HTML Ordered List

</title>

</head>

<body>

<ol>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

</body>

</html> 

Out Put

This will produce the following result :

1.Beetroot

2.Ginger

  3.Potato

  4.Radish

(15) Order List.. (2)

<html>

<head>

<title>

HTML Ordered List

</title>

</head>

<body>

  <ol type = "I" >

<li> Beetroot </li>

<li> Ginger </li>

<li> Potato</li>

<li> Radish </li>

</ol>

</body>

</html>

Out Put

This will produce the following result :

i.   Beetroot

ii.  Ginger

iii. Potato

iv. Radish

(15) Order List.. (3)

<html>

<head>

<title>

HTML Ordered List

</title>

</head>

<body>

  <ol type = "a" >

<li> Beetroot </li>

<li> Ginger </li>

<li> Potato</li>

<li> Radish </li>

</ol>

</body>

</html>

Out Put

This will produce the following result :

a.  Beetroot

b.  Ginger

c.  Potato

d.  Radish

(15) Order List.. (4)

<html>

<head>

<title>

HTML Ordered List

</title>

</head>

<body>

  <ol type = "1" Start="20" >

<li> Beetroot </li>

<li> Ginger </li>

<li> Potato</li>

<li> Radish </li>

</ol>

</body>

</html>

 Out Put

This will produce the following result :

20.  Beetroot

21.  Ginger

22.  Potato

23.  Radish 

(16) Unorder List.. (1)

<html>

<head>

<title>

HTML Unordered List

</title>

</head>

<body>

  <Ul>

<li> Beetroot </li>

<li> Ginger </li>

<li> Potato</li>

<li> Radish </li>

</Ul>

</body>

</html>

 Out Put

This will produce the following result :

•  Beetroot
•  Ginger
•  Potato
•  Radish

(16) Unorder List.. (2)

<html>

<head>

<title>

HTML Unordered List

</title>

</head>

<body>

  <UlType= "Square">

<li> Beetroot </li>

<li> Ginger </li>

<li> Potato</li>

<li> Radish </li>

</Ul>

</body>

</html>

 Out Put

This will produce the following result :

   ▀ Beetroot

   ▀ Ginger

   ▀ Potato

   ▀ Radish

(17) Backgrounds Color

<html>

<head>

<title>

HTML Background Colors

</title>

</head>

<body>

<!--Format 1-Usecolor name-->

<table bgcolor ="yellow"width="100%">

<tr><td>

This background is yellow

</td></tr>

</table>

<!--Format 2-Use hex value-->

<table bgcolor = "#6666FF" width = "100%">

<tr><td>

This background is sky blue

</td></tr>

</table>

<!--Format 3-Use color value in RGB terms-->

<table bgcolor = "rgb(255,0,255)"width = "100%">

<tr><td>

This background is green

</td></tr>

</table>

</body>

</html>

 Out Put

 

(17) Font Face

<html>

<head>

<title>

Font Face

</title>

</head>

<body>

<font face = "Times New Roman"size = "5" >Times New Roman </font><br/>

<font face="Verdana"size="5">Verdana</font><br/>

<font face ="Comic sans MS"size="5">Comic Sans MS</font><br/>

<font face="WildWest"size="5">WildWest</font><br/>

<font face ="Bedrock"size="5">Bedrock</font><br/>

</body>

</html>

Out Put

 (18) Alignment

<Html>
<Head>
<Title> Head Title </Title>
</head>
<Body>
<Center><img src="logo.jpg"></Center>
<Center><H1> Agrani School And College</h1></Center>
<Center><h4> Azimpur Dhaka 1205</h4></Center>
</body>
</html>

 Out Put