Showing posts with label এইচটিএমএল. Show all posts
Showing posts with label এইচটিএমএল. Show all posts

Saturday 31 March 2012

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



                         ►বিসমিল্লাহির রাহমানির রাহীম◄


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

হাইপারটেক্সক্ট রেফারেন্স(href)

href এট্রিবিউট নিদের্শ করে যে ইউজার ক্লিক করে কোথায় যাবে।
Hypertext reference হতে পারে Internal, Local, Global ।
ইন্টারনাল: একই পেজের মধ্যে লিংক তৈরী হবে।
লোকাল: আপনার web site এর ভিতরে কোন পেজেরে সাথে লিংক তৈরী হবে।
গ্লোবাল: আপনার web site এর বাহিরে অন্য web site এর লিংক তৈরী হবে।
ইন্টারনাল- href="#anchorname"
লোকাল- href="/tipsour24/../pics/picturefile.jpg"
গ্লোবাল- href="http://www.google.com/"



এইচটিএমএল লিংক (টেক্সক্ট) যেভাবে তৈরী করবেন

<a> এবং  </a> tag দ্বারা যথাত্রুমে লিংক শুরু এবং শেষ বোঝায়।  href এট্রিবিউট এর সাহায্যে কোন ধরনের লিংক স্থাপিত হবে তা নির্ধারিত হয়। href এট্রিবিউটকে opening tag এর মধ্যে রাখতে হয়। opening এবং closing tag এর মধ্যে কোন লেখা থাকলে, তা পরে web পেজে লিংক হিসাবে দেখা যাবে।যেমন

<a href="http://www.tipsour24.blogspot.com/" target="_blank" >tipsour24 Home</a>
<a href="http://www.google.com/" target="_blank" >Google Home</a>
<a href="http://www.yahoo.com/" target="_blank" >Yahoo Home</a>
প্রদর্শন: গ্লোবাল লিংক
tipsour24         Google Home              Yahoo Home

এইচটিএমএল লিংক টার্গেট (HTML-link Target)

Target এট্রিবিউট দ্বারা বোঝায়, হয় পেজ খুলতে হবে পৃথক window তে অথবা লিংক খুলতে হবে একই browser  window তে ।


target=" _blank" নতুন browser window তে page খোলা ।
_self" current window তে page Load নেয়া।
_parent" Loads new page into a frame that is superior to where the link lies
_top" সব frames cancel করে, current browser window নতুন page Load নেয়া।

এইচটিএমএল ইমেইল লিংক

টেক্সট লিংক উপরে যেভাবে তৈরী করলেন ইমেইল লিংকও সেভাবে করতে হবে শুধু href এট্রিবিউটের ভিতর ইনভার্টেড কমার মধ্যে আগে ওয়েব সাইটের ঠিকানা ছিল আর এবার ইমেইল ঠিকানা দিবেন।যেমন

<a href= "mailto:abc@mail.com" >Email Example</a>
প্রদর্শন:
Email Example
এই লিংকের উপর মাউস নিয়ে যান, নিচে স্টাটাসবারে mailto:abc@mail.com লেখা দেখাবে।এখানে ক্লিক করলে
আপনার ব্রাউজার abc@mail.com  নামের একটি মেইল ঠিকানায় মেইল পাঠানোর ক্ষেত্র প্রস্তুত করবে।আরও সহজভাবে বলি,ধরুন আপনি মজিলা ফায়ারফক্স ব্রাউজার ব্যবহার করছেন,আপনি যদি Tools>Options>Applications এ গিয়ে mailto এর জায়গায় ড্রপডাউন মেনু থেকে Use Yahoo mail সিলেক্ট করে দেন তাহলে Email Example লিংকে ক্লিক করলে আপনার ইয়াহু মেইল খুলবে এবং To ফিল্ডের জায়গায় abc@mail.com লেখা উঠবে।
আপনি চাইলে ইমেইল লিংকে subject এবং body ঠিক করে দিতে পারেন যেমন
<a href= "mailto: a@b.com?subject=Web Page Email&body=This email is from your website" > 2nd Email Example</a>
প্রদর্শন:
2nd Email Example
এখানে ক্লিক করলে আপনার ইয়াহু মেইল খুলবে এবং To এর জায়গায় a@b.com আর Subject এর জায়গায় Web Page Email ও Body তে This email from your site এগুলি গিয়ে অটোমেটিক বসবে।

ইন্টারনাল লিংক

নিচে লিংকগুলিতে ক্লিককরে দেখুন এই পেজেরই বিভিন্ন অংশে এই লিংকগুলি নিয়ে যাবে।এটা হচ্ছে ইন্টারনাল লিংক।পেজ বড় হলে সুচিপত্র তৈরী করে এভাবে লিংক দিতে পারেন।
পেজের উপরে যান
টেক্সট লিংক
"পেজের উপরে যান" এখানে ক্লিক করলে পেজের কোথায় যাবে তা আগেই ঠিক করে রাখতে হবে এভাবে
<h3>হাইপারটেক্সক্ট রেফারেন্স(href)<a name="top"></a></h3>
পরের লিংকটিও এভাবে করে নিতে হবে (এখানে name="text")
শেষে "পেজের উপরে যান" এর উপর লিংক দিয়েছি এভাবে
<a href="#top">পেজের উপরে যান</a>
এবং
<a href="#text">টেক্সট লিংক</a>

এইচটিএমএল ফন্ট টিউটোরিয়াল (HTML Font Tutorial in Bangla)


                         ►বিসমিল্লাহির রাহমানির রাহীম◄


<font> ট্যাগ ব্যাবহার করে ওয়েব সাইটের টেক্সটের স্টাইল, সাইজ এবং কালার যোগ করা হয়। size, color এবং face attributes ব্যাবহার করে আপনি  ফন্ট কে কাস্টমাইজ করতে পারি।<basefont> ট্যাগ ব্যাবহার করে পেজের সকল টেক্সটকে একই স্টাইল, সাইজ এবং কালার এ সেট করা যায়।
<font> এবং <basefont> ট্যাগ ব্যাবহার না করে সিএসএস(সিএসএস টিউটোরিয়ালে আলোচনা করা হয়েছে) ব্যাবহার করা উচিত।

ফন্ট আকার (Font size)

Size attribute এর সাহায্যে ফন্ট এর সাইজ ঠিক করা হয়। ফন্ট এর আকার এর গ্রহনযোগ্য মান হচ্ছে ১(সবচেয়ে ছোট) হতে ৭(সবচেয়ে বড়)।  ফন্ট এর ডিফল্ট আকার হচ্ছে ৩।

<p>
<font size="5">Here is a size 5 font</font>
</p>{}
প্রদর্শন:
Here is a size 5 font.

ফন্ট রং (Font color)

কালার attribute এর সাহয্যে font এর color সেট করা হয়।

<font color="#990000">This text is hexcolor #990000</font>
<br />
<font color="red">This text is red</font>
প্রদর্শন:

This text is hexcolor #990000
This text is red

ফন্ট ফেস (Font face)

ফন্ট face এর ক্ষেত্রে সতর্ক হওয়া উচিত কারন আপনার সিস্টেম এ নির্ধারিত ফন্ট টি ইনস্টল দেয়া না থাকে তাহলে আপনি ঐ ফন্ট টি দেখতে পাবেন না এবং তার পরিবর্তে ডিফল্ট হিসাবে Times New Roman ফন্ট টি দেখতে পাবেন।

<p>
<font face="Bookman Old Style, Book Antiqua, Garamond">This paragraph
has had its font...</font>
</p>
প্রদর্শন:

This paragraph has had its font formatted by the font tag!


বেসফন্ট (Basefont)

Basefont ট্যাগ এর সাহায্যে আপনি ওয়েব পেজের ডিফল্ট ফন্ট সেট করতে পারেন।নিচে basefont ব্যাবহার করার সঠিক পথ দেখানো হল।

<html>
<body>
<basefont size="2" color="green">
<p>This paragraph has had its font...</p>
<p>This paragraph has had its font...</p>
<p>This paragraph has had its font...</p>
</basefont>
</body>
</html>
প্রদর্শন:
This paragraph has had its font formatted by the basefont tag!
This paragraph has had its font formatted by the basefont tag!
This paragraph has had its font formatted by the basefont tag!


শেষে বলতে চাই font বা basefont ব্যাবহার না করে সিএসএস (সিএসএস টিউটোরিয়ালে আলোচনা করা হয়েছে) ব্যবহার করা ভালো।
Attributes: Review


Attribute= "Value" Description
size= "Num. Value 1-7" Size of your text, 7 is biggest
color= "rgb,name,or hexidecimal" Change font color
face= "name of font" Change the font type


প্রথম অক্ষরের সুন্দর স্টাইল:

ফন্ট কে কাস্টমাইজ করে যেকোন ধরনের স্টাইল করা যায়।

<p><font size="7" face="Georgia, Arial" color="maroon">C</font>ustomize
your font to achieve a desired look.</p>
প্রদর্শন:
Customize your font to achieve a desired look

Friday 30 March 2012

এইচটিএমএল কালার কোড টিউটোরিয়াল (HTML Color code)


                         ►বিসমিল্লাহির রাহমানির রাহীম◄

 
Color set করার তিনটি পদ্ধতি আছে। সাধারন কিছু কালার যেমন কালো, সাদা, লাল, সবুজ, নীল। এইচটিএমএল এ কালার value লেখার সময় সরাসরি এদের নাম লেখা হয়।নিচে ১৬টি মৌলিক কালারের নাম লেখা হল।

১৬টি মৌলিক কালার:



Black
Gray
Silver
White

Yellow
Lime
Aqua
Fuchsia

Red
Green
Blue
Purple

Maroon
Olive
Navy
Teal

এইচটিএমএল-রং পদ্ধতি আরজিবি মান (HTML- Coloring system: rgb value)

আমি আপনাদেরকে নিরাপদ web design এর জন্য HTML rgb ব্যবহারের পরামর্শ দেব না কারন Non-IE browser,  HTML rgb সাপোর্ট করে না। আপনারা যদি CSS শিখতে চান তাহলে আপনাদের উচিত এই বিষয় সম্বন্ধে জানা।
Red, Green এবং Blue এই তিনটি কালারের সমষ্টি হচ্ছে  rgb । প্রত্যেকের মান ০(যখন কোন কালার থাকে না) হতে ২৫৫(যখন ঐ কালারটি সম্পুর্ন থাকে)। rgb ফরমেটটি হল rgb(RED,GREEN,BLUE)।

Red, Green এবং Blue এর মান:




bgcolor="rgb(255,255,255)" White
bgcolor="rgb(255,0,0)" Red
bgcolor="rgb(0,255,0)" Green
bgcolor="rgb(0,0,255)" Blue



এইচটিএমএল-রং পদ্ধতি:হেক্সাডেসিমাল (HTML- Coloring system: Hexadecimal)

প্রথম প্রথম Hexadecimal system বুঝতে একটু কারন এই system একটু জটিল ও কঠিন। practice করার মাধ্যমে বিষয়টি অনেক সহজ হয় যাবে। এই Hexadecimal system সকল ক্ষেত্রে গ্রহনযোগ্য এবং বহুল ব্যবহৃত। Hexadecimal system টি ইন্টারনেটের standard color।
Hexadecimal হল ৬ digit কালারের উপস্থাপন। প্রথম দুটি digit(RR), Red value নির্দেশ করে পরবর্তি দুটি digit(GG), Green value নির্দেশ করে এবং সর্বশেষ দুটি digit(BB), Blue value নির্দেশ করে।

এইচটিএমএল হেক্সাডেসিমাল রং


bgcolor="#RRGGBB"

এইচটিএমএল -রং কোড (HTML- Color code: breaking the code)

নিচে টেবিলে দেখানো হয়েছে কিভাবে বর্ণ Hexadecimal system এর Numbering system কে বর্ধিত করে ১৬ digit এ উন্নীত করে।

Decimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Hexadecimal 0 1 2 3 4 5 6 7 8 9 A B C D E F
তাই বর্ণকে নম্বর হিসাবে ব্যবহার করা হয়। এই বর্ণকে পরে নম্বরে রুপান্তর করা হয়।নিচে একটি উদাহরন দেয়া হলো।

একটি বাস্তব হেক্সাডেসিমাল:

bgcolor="#FFFFFF"
এখানে "F" হচ্ছে সবোর্চ্চ পরিমান এবং এই কালারটি ("#FFFFFF") সাদা কালার নিদের্শ করে। নিচে বিষয়টি বিস্তারিত আলোচনা করা হয়েছে।

হেক্সাডেসিমাল সূত্র:

(15 * 16) + (15) = 255
উপরের সূত্রটি বাস্তব। প্রথমে F এর মান(১৫) কে ১৬ দ্বারা গুন করে পরবর্তি মানের সাথে যোগ করতে হবে। ২৫৫ মানটি যেকোন প্রাথমিক কালারের মানের ক্ষেত্রে সর্বোচ্চ।নিচে আরও উদাহরন দেয়া হলো।
উদাহরন:

bgcolor="#CC7005"


CC(RR - Red)
(12 * 16) + (12) = 204
70(GG - Green)
(7 * 16) + (0) = 112
05(BB - Blue)
(0 * 16) + (5) = 5

এইচটিএমএল লিস্ট টিউটোরিয়াল (HTML List Tutorial in Bangla)

►বিসমিল্লাহির রাহমানির রাহীম◄

তিন প্রকারের এইচটিএমএল লিস্ট বিদ্যমান। <ol> tag দিয়ে শুরু করে ধারাবাহিক লিস্ট(ordered list), <ul> ট্যাগ দিয়ে শুরু করে ধারাবাহিকতা হীন লিস্ট(unordered list), <dl> ট্যাগ দিয়ে শুরু করে সংজ্ঞামূলক লিস্ট(definition list)।
<ul> - unordered list; বুলেট
<ol> - ordered list; নম্বর
<dl> - definition list; অভিধান

এইচটিএমএল ক্রমিক লিস্ট (HTML ordered lists)

<ol> ট্যাগ দিয়ে ক্রমিক লিস্ট(ordered list) শুরু করা হয়। <li> ট্যাগ দ্বারা দ্রব্যের তালিকা (list item) বোঝায়।তালিকা তৈরীর জন্য  <li> ট্যাগ কে আপনার opening (<ol>) এবং closing (</ol>) tag এর মধ্যে রাখতে হয়।  ক্রমিক (ordered) অর্থ হচ্ছে নম্বর যেমন ১, ২, ৩ ইত্যাদি।

<h4 align="center">Goals</h4>
<ol>
<li>Find a Job</li>
<li>Get Money</li>
<li>Move Out</li>
</ol>
প্রদর্শন:


Goals

  1. Find a Job
  2. Get Money
  3. Move Out
Start attributes দিয়ে নিজের ইচ্ছানুযায়ী নম্বর হতে লিস্ট শুরু করা যায়।

<h4 align="center">Goals</h4>
<ol start="4" >
<li>Buy Food</li>
<li>Enroll in College</li>
<li>Get a Degree</li>
</ol>
প্রদর্শন:


Goals

4.Buy Food
5.Enroll in College
6.Get a Degree


এইচটিএমএল ক্রমিক লিস্ট (HTML ordered lists continued)

আরও চার প্রকারের ধারাবাহিক লিস্ট(ordered list) রয়েছে। এগুলো সাধারন ১,২,৩ নম্বরের পরিবর্তে রোমান নম্বর বা বর্ণ হতে পারে তা বড় হাতের বা ছোট হাতের। type attribute ব্যবহার করে নম্বর পরিবর্তন করা হয়।

<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">

Ordered List Types:


Lower-Case Letters Upper-Case Letters Lower-Case Numerals Upper-Case Numerals
  1. Find a Job
  2. Get Money
  3. Move Out
  1. Find a Job
  2. Get Money
  3. Move Out
  1. Find a Job
  2. Get Money
  3. Move Out
  1. Find a Job
  2. Get Money
  3. Move Out

এইচটিএমএল বিনাক্রম লিস্ট (HTML unordered lists)

<ul> ট্যাগ সাহায্যে বুলেট লিস্ট তৈরী করা হয়। বুলেট লিস্ট আবার তিন প্রকার যেমন ১. squares ২.discs ৩.circles । default হিসাবে সাধারনত full discs ব্যাবহার করা হয়।

<h4 align="center">Shopping List</h4>
<ul>
<li>Milk</li>
<li>Toilet Paper</li>
<li>Cereal</li>
<li>Bread</li>
</ul>

প্রদর্শন:

Shopping List

  • Milk
  • Toilet Paper
  • Cereal
  • Bread

আমরা type attributes ব্যবহার করে unordered list এর অন্যান্য বুলেট ব্যবহার করতে পারি।
<ul type="square">
<ul> type="dics">
<ul> type="circle">

type="square" type="disc" type="circle"
  • Milk
  • Toilet Paper
  • Cereal
  • Bread
  • Milk
  • Toilet Paper
  • Cereal
  • Bread
  • Milk
  • Toilet Paper
  • Cereal
  • Bread

এইচটিএমএল ডেফিনেশন লিস্ট (HTML definition lists)

Definition list এর ব্যবহার সাধারনত অভিধানে দেখতে পাই। <dl> tag ব্যাবহার করে Definition list তৈরী করা হয়। যাকে Define অর্থ্যাৎ সংজ্ঞায়িত করতে চাই তাকে bold আকারে দেখানো উচিত। Definition list tag এর মধ্যে আরও দুটি tag অর্ন্তভুক্ত সেগুলো হলো ১. <dt> ২. <dd> ।
<dl> tag: লিস্ট এর শুরু জন্য এই ট্যাগ ব্যবহার করা হয় ।
<dt> tag:   যাকে  সংজ্ঞায়িত(Define) করবো এই ট্যাগ ব্যবহার করে তার নাম লেখা হয়।
<dd> tag: <dt> tag এ যে নাম লেখা হয়েছে তার সম্পর্কে এখানে আলোচনা হয় ।

<dl>
<dt><b>Fromage</b></dt>
<dd>French word for cheese.</dd>
<dt><b>Voiture</b></dt>
<dd>French word for car.</dd>
</dt>
প্রদর্শন:
Fromage
French word for cheese.
Voiture

French word for car.

এইচটিএমএল লাইন ব্রেক টিউটোরিয়াল

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

<p>
Will Mateson<br />
Box 61<br />
Cleveland, Ohio<br />
</p>
প্রদর্শন:লাইন ব্রেক এর সাহায্যে চিঠির address তৈরী করতে পারি।
Will Mateson
Box 61
Cleveland, Ohio
আবার চিঠির সমাপ্ত ঘোষনা করতে পারি।

<p>Sincerely,<br />
<br />
<br />
Kevin Sanders<br />
Vice President</p>


প্রদর্শন:
Sincerely,


Kevin Sanders

Vice President

আরও একটা বিষয় মনে রাখা প্রয়োজন যে লাইন ব্রেক ট্যাগ এর কোন closing tag এর প্রয়োজন নেই।

HTML horizontal rule:

Horizontal rule কে

ট্যাগ দারা প্রকাশ করা হয়।

ট্যাগটি ব্যবহার করে screen এর উপর সমান্তরাল লাইন প্রদর্শন করে। line break tag এর মত Horizontal rule tag এর কোন closing tag নেই।





<hr>
Use
<hr><hr>
Them
<hr>
Sparingly
<hr>


প্রদর্শন:


Use




Them


Sparingly


Horizontal rule কোন গ্রন্থপঞ্জি বা কোন টেবিলের বিষয় সমুহ প্রকাশ করার ক্ষেত্রে ব্যবহার করা হয়।

<hr>
1. "The Hobbit", JRR Tolkein.
2. "The Fellowship of the Ring" JRR Tolkein.
প্রদর্শন:


1. "The Hobbit", JRR Tolkein.
2. "The Fellowship of the Ring" JRR Tolkein.

এইচটিএমএল হেডিং টিউটোরিয়াল (HTML Heading Tutorial in Bangla)

►বিসমিল্লাহির রাহমানির রাহীম◄


এইচটিএমএল এ হেডিং বা শিরোনাম সাধারনত টাইটেল বা সাবটাইটেল  হিসাবে দেখা যায়। হেডিং ট্যাগ এর মধ্যে রাখা টেক্স bold হিসাবে প্রদর্শিত হয় এবং আকার যা হেডিং এর নম্বরের উপর নির্ভর করে। হেডিং নম্বর গুলো ১ হতে ৬ এর মধ্যে সীমাবদ্ধ। এখানে ১ সবচেয়ে বড় এবং ৬ সবচেয়ে ছোট হেডিং
<body>
<h1>Headings</h1>
<h2>are</h2>
<h3>great</h3>
<h4>for</h4>
<h5>titles</h5>
<h6>and subtitles</h6>
</body>

Headings

are

great

for

titles
and subtitles
লক্ষ করার বিষয় এইযে প্রতিটি হেডিং এর নিজস্ব লাইন ব্রেক option আছে । এটা হেডিং এর built in attribute । হেডিং লেখার সময় অটোমেটিক লাইন ব্রেক হয়ে যায়।

হেডিং এবং প্যারাগ্রাফ এর একত্রে ব্যবহার:


আমরা হেডিং এবং paragraph একসাথে ব্যবহার করতে পারি। নিচে উদাহরন দেয়া হল।
<h1 align="center">Essay Example</h1>
<p>Avoid losing floppy disks with important school/work projects...</p>
<p>For instance, let's say you had a
HUGE school or work project to complete.  Off ...</p>


প্রদর্শন:

Essay Example

Avoid losing floppy disks with important school/work projects on them. Use the web to keep your content so you can access it from anywhere in the world. It's also a quick way to write reminders or notes to yourself. With simple html skills, (the ones you have gained so far by now) it is easy.
For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.

এইচটিএমএল প্যারাগ্রাফ টিউটোরিয়াল (HTML Paragraph Tutorial in Bangla)

কোন লেখা কাজকে প্রকাশ করার ক্ষেত্রে প্যারাগ্রাফ ট্যাগ ব্যবহার করা হয়। এটি খুবই সাধারন এবং মৌলিক।
<p> ট্যাগ দারা  অনুচ্ছেদ (প্যারাগ্রাফ) নিদের্শ করা হয়। এই ট্যাগ ব্যবহার করার ফলে প্যারাগ্রাফ টেক্সের উপরে নিচে অটোমেটিক ফাকা লাইন সৃষ্টি হয়।
<p>Avoid losing floppy disks with important school...</p>
<p>For instance, let's say you had a HUGE school...</p>


প্রদর্শন:

Avoid losing floppy disks with important school/work projects on them. Use the web
to keep your content so you can access it from anywhere in the world. It's also a quick
way to write reminders or notes to yourself. With simple html skills, (the ones you have gained so far)it is easy.

For instance, let's say you had a HUGE school or work project to complete. Off hand,
the easiest way to transfer the documents from your house could be a 3.5" floppy disk.
However, there is an alternative. Place your documents, photos, essays, or videos onto
your web server and access them from anywhere in the world.

এইচটিএমএল প্যারাগ্রাফ-জাস্টিফিকেশন (HTML paragraph –justification)

ওয়ার্ড ডকুমেন্টে এ আমরা যেভাবে কোন লেখাকে justify করে সবদিকে সমান করতাম তেমনি ভাবে এইচটিএমএল এ justify ব্যবহার করে একই কাজ করতে পারি।
<p align="justify">For instance, let's say you had a HUGE school or work...</p>
প্রদর্শন:
For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.

এইচটিএমএল প্যারাগ্রাফ-মাঝামাঝি (HTML paragraph –centering)

ওয়ার্ড ডকুমেন্টে এর মত প্যারাগ্রাফ এর প্রতেকটি লাইন display window এর মধ্যে অবস্থান করবে।
<p align="center">For instance, let's say you had a HUGE school or work...</p>


প্রদর্শন:
For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.

এইচটিএমএল প্যারাগ্রাফ-এলাইন ডানে (HTML paragraph –align right)

ওয়ার্ড ডকুমেন্টে এর মত প্যারাগ্রাফ এর প্রতেকটি লাইন display window এর ডানপাশে  অবস্থান করবে।
<p align="right">For instance, let's say you had a HUGE school or work...</p>


প্রদর্শন:
For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.

এইচটিএমএল এট্রিবিউট টিউটোরিয়াল (HTML Attribute tutorial in Bangla)

বিসমিল্লাহির রাহমানির রাহীম◄ 
 
ট্যাগ কে সম্প্রসারন করার জন্য এট্রিবিউট ব্যবহার করা হয়। ধরুন যদি আমরা একটি টেবিল তৈরী করি তবে attributes ব্যাবহার করে টেবিল এর প্রস্থ, উচ্চতা ঠিক করতে পারি। আর attributes value দিয়ে টেবিল এর প্রস্থ ও উচ্চতার মান দিতে পারি।

<tag attributes ="value" attributes ="value">
<table width="150" height="100">
Class বা  id attribute এর ব্যবহার প্রায় একই তবে কিছুটা ভিন্নতা আছে। Class বা  id attribute সরাসরি ইলিমেন্ট ফরমেটে কোন ভুমিকা নেই তবে পর্দার অন্তরালে এদের ভুমিকা আছে বিশেষ করে জাভাস্ক্রিপ্ট ,সিএসএস (এগুলো সম্পর্কে পরবতি টিউটোরিয়াল এ আলোচনা করা হয়েছে।

<p>Paragraph type 1 Italics</p>
<p>Paragraph type 2 Bold</p>
প্রদর্শন
Paragraph type 1 Italics
Paragraph type 2 Bold

এইচটিএমএল নেম এট্রিবিউট (HTML Name Attribute)

Name attribute টি Class বা  id attribute হতে ভিন্ন। Name attribute টি প্রায়ই র্ফম বা অন্যান্য ইনপুট ইলিমেন্টের সাথে দেখা যায়।

<input type="text" name="TextField" />
প্রদর্শন:

এই attribute টি TextField প্রদর্শনের বিষয়ে ভুমিকা নেই তবে পর্দার অন্তরালে এর অনেক বেশি অবদান(javascript , css)

এইচটিএমএল টাইটেল এট্রিবিউট (HTML- Title attributes)

এই attribute টি কোন এইচটিএমএল এলিমেন্ট এর শিরোনাম এবং ছোট popup টেক্স যুক্ত করে এমন ভাবে যুক্ত করে যখন ওয়েব পেজে ঐ শিরোনামের উপর মাউস রাখা হয় তখন ছোট popup টেক্সটি প্রদর্শন করে।
<h2 title="Hello There!">Titled Heading Tag</h2>
প্রদর্শন

Titled Heading Tag

এইচটিএমএল এলাইন এট্রিবিউট (HTML- align attributes)

যদি আপনি এলিমেন্টের সমান্তরাল অবস্থান পরিবর্তন করতে চান তবে তা align attribute দিয়ে করতে পারেন। align বিভিন্ন ভবে করা যায় যেমন left, right & center । ডিফল্ট হিসাবে left align টি নির্বাচিত থাকে।

<h2 align="center">Centered Heading</h2>

Centered Heading


<h2 align="left">Left aligned heading</h2>
<h2 align="center">Centered Heading</h2>
<h2 align="right">Right aligned heading</h2>

Left aligned heading

Centered heading

Right aligned heading

Generic attributes:

Attribute দিয়ে ওয়েবপেজ কে সম্পুর্নভাবে কাস্টমাইজ করা যায়। নিচে টেবিলে কিছু এইট্রবিউট দেয়া হল যা অনেক HTML Tag এর সাথে সহজে ব্যবহার করা যায়।

Attribute Options Function
align right, left, center সমান্তাল (Horizontally) aligns tags
valign top, middle, bottom উলম্ব(Vertically) aligns tags
bgcolor numeric, hexadecimal, RGB values Element এর  background color নিদের্শ করে।
background URL Background image উপর element নিদের্শ করে।
id ব্যবহারকারীর নির্দেশ অনুযায়ী Element  এর Name যা Cascading Style Sheets (css)   সাথে ব্যবহার করা হয়।

class ব্যবহারকারীর নির্দেশ অনুযায়ী Element  এর শ্রেনীবিন্যাস  যা Cascading Style Sheets (css) সাথে ব্যবহার করা হয়।

width Numeric Value Tables, images, or table cells এর width নির্দেশ  করে ।
height Numeric Value Tables, images, or table cells এর height  নির্দেশ  করে ।
title ব্যবহারকারীর নির্দেশ অনুযায়ী আপনার elements এর "Pop-up" title ।
a

এইচটিএমএল ট্যাগ টিউটোরিয়াল (HTML Tag Tutorial in Bangla)



যখন আপনি এইচটিএমএল ডকুমেন্ট উপর হতে নিচ , ডান হতে বামে সব সময় আপনি ট্যাগ দেখতে পাবেন। এটি এমন ভাবে প্রদর্শিত হবে যেন paragraph দেখতে paragraph এর মতো, টেবিল দেখতে টেবিল এর মতো।
ট্যাগ এর প্রধান তিনটি অংশ আছে
ক. শুরু করার ট্যাগ(opening tag)
খ.ধারনকৃত অংশ(contents)
গ.শেষ করার ট্যাগ (closing tag)।
এইচটিএমএল ট্যাগ এর মাধ্যমে আপনি web page এ আপনার পছন্দ মত বার্তা পাঠাতে পারেন।
<p>A Paragraph Tag</p>


ট্যাগ এর বর্ণ ছোট হাতের অক্ষর হওয়া উচিত। নিচে আরো কতক গুলো ট্যাগ দেখানো হলো।
<body> Body Tag (acts as a content shell)
<p>Paragraph Tag</p>
<h2>Heading Tag</h2>
<b>Bold Tag</b>
<i>Italic Tag</i>
</body>

Closing ট্যাগ ছাড়া ট্যাগ:

কিছু কিছু ট্যাগ আছে যাদের closing tag দেয়ার প্রয়োজন নেই। তারা কোন এলিমেন্ট ধারন করে না।সে ট্যাগ টি হচ্ছে line break tag এবং তা <br/> রুপে প্রকাশ করা হয়। যা বিশেষ ভাবে ব্যবহার করা হয়। অর্থাৎ একটি লাইন লেখা বাদ দিয়ে অপর লাইন হতে লেখা শুরু করার জন্য এ ট্যাগ টি ব্যবহার করা হয়।
আরো কিছু ট্যাগ আছে যাদেরকে বিশেষভাবে ব্যবহার করা হয় যেমন ইমেজ ট্যাগ, ইনপুট ট্যাগ।
<img src="/../mypic.jpg" /> -- Image Tag
<br /> -- Line Break Tag
<input type="text" size="12" /> -- Input Field
প্রদর্শন:
                            


                             -Line break-
                              
এইখানে আরেকটা কথা আমরা চাইলে /../mypic.jpg এর জায়গায় ছবির লিংক দিতে পারি এগুলোর শেষে .jpg,.jpeg,png এসব থাকতে হবে|উদাহরন=http://wfs01.wapka.mobi/3688/3688773_f4c562e016.jpg  
       এই ইমেজ দেখা যাবে |