Paragraph

ওয়েব পেজে কোন লেখা প্রকাশ করতে চাইলে p ট্যাগ ব্যবহার করা হয়। <p> হচ্ছে এর start tag এবং </p> হচ্ছে এর end tag. এই start এবং end ট্যাগের ভিতর যেকোন লেখা দিতে পারেন। এই লেখা প্যারাগ্রাফ আকারে ব্রাউজারে দেখাবে।

যেমন

1.<p>When encountering a new paragraph "<p>" tag, the browser typically inserts one blank line plus some extra vertical space into the display before starting the new paragraph.</p>

এই ট্যাগে এট্রিবিউট ব্যবহার করা যায় যেমন নিচের এট্রিবিউটগুলি বেশি ব্যবহৃত

align, class, id, style, title এছাড়া ইভেন্ট এট্রিবিউট onmouseover, onclick ইত্যাদি ব্যবহার করা যায়।

class এবং id এট্রিবিউট ব্যবহার করে শুধু এই p এলিমেন্ট নয় বরং প্রায় সব এলিমেন্টে নাম দেয়া যায় পরে সেই নাম ধরে সিএসএস স্টাইল করা হয়। সিএসএস টিউটোরিয়ালে আরো বিস্তারিত দেখতে পাবেন। এখানে align, title এবং style এট্রিবিউটের কিছু প্রয়োগ দেখানো হল

<p align="right">Most browsers automatically left-justify a new paragraph.</p>
 
<p align="center">To change this behavior, the align attribute for the "<p>" tag and provide four kinds of content justification: left, right, center, and justify.</p>
 
<p style="background-color:#f00;" title="This is tooltip tile">You may specify a paragraph only within a block, along with other paragraphs, lists, forms, and preformatted text</p>

** এখানে শুধু জায়গা এবং সময় বাচানোর জন্য শুধুমাত্র p এলিমেন্ট দেয়া হল আসলে বাস্তবে <body></body> এর ভিতর এইসব এলিমেন্ট থাকবে এবং অবশ্যই ডকুমেন্টের পূর্ন স্ট্রাকচার অনুসরন করতে হবে। অর্থ্যাৎ একটা পূর্নাঙ্গ ডকুমেন্টের ভিতরেই এগুলি রাখতে হবে। যেমন Doc Type টিউটোরিয়ালে রেখেছি।

প্রদর্শন

Most browsers automatically left-justify a new paragraph.

To change this behavior, the align attribute for the

tag and provide four kinds of content justification: left, right, center, and justify.

You may specify a paragraph only within a block, along with other paragraphs, lists, forms, and preformatted text

title এট্রিবিউটের প্রভাব দেখতে শেষের লাইনরে উপর মাউস নিয়ে যান। এখানে লক্ষ করুন একসাথে একাধিক এট্রিবিউট একটা এলিমেন্টে ব্যবহার করেছি। আপনি চাইলে আরো বেশি ব্যবহার করতে পারেন।

Heading

শিরোনাম বা হেডিং আকারে বড় ফন্টের লেখা ব্রাউজারে প্রদর্শনের জন্য এইচটিএমএল এ রয়েছে ৬ ধরনের হেডিং ট্যাগ। এর মধ্যে সবচেয়ে বড় হচ্ছে <h1></h1> এভাবে <h2></h2>, <h3></h3>... h1 পর্যন্ত

যেমন

<h1>A long flow of text</h1>
<h2>unbroken by title,</h2>
<h3subtitles, and other headers, </h3>
<h4>crosses  the eyes and numbs the mind</h4>
<h5>not to mention the fact that</h5>
<h6>it makes it nearly impossible to scan the text for a specific topic</h6>

** আবারো বলে রাখি যেটা প্যারাগ্রাফ টিউটোরিয়ালে বললাম - এখানে শুধু জায়গা এবং সময় বাচানোর জন্য শুধুমাত্র h1 এলিমেন্ট দেয়া হল আসলে বাস্তবে <body></body> এর ভিতর এইসব এলিমেন্ট থাকবে এবং অবশ্যই ডকুমেন্টের পূর্ন স্ট্রাকচার অনুসরন করতে হবে। অর্থ্যাৎ একটা পূর্নাঙ্গ ডকুমেন্টের ভিতরেই এগুলি রাখতে হবে। যেমন Doc Type টিউটোরিয়ালে রেখেছি

প্রদর্শন:

A long flow of text

unbroken by title,

crosses the eyes and numbs the mind

not to mention the fact that

it makes it nearly impossible to scan the text for a specific topic

** এখানে আমাদের এই সাইটের সিএসএস ইফেক্ট করার কারনে সাইজ এবং রং একটু ভিন্ন দেখাচ্ছে আপনি এটা সেভ করে ব্রাউজারে বা আমদের এডিটরে রান করালে একদম আসল আউটপুট টি দেখতে পাবেন।

p ট্যাগের মতই এখানেও align, class, dir, id, lang, onlick, onkeydown, onkeypress, style, title ইত্যাদি এট্রিবিউট ব্যবহার করতে পারেন।

হেডিং (<h1></h1>) এবং প্যারাগ্রাফ (<p></p>) এলিমেন্ট ব্যবহার করে একটা

উদাহরন

<!DOCTYPE html>
<html>
<head>
<title>Webcoachbd HTML Tutorials</title>
 
</head>
<body>
 
<h1>Webcoachbd is the largest Bengali tutorial site</h1>
 
<p>To learn Web developemnt and design please visit
<a href="http://www.webcoachbd.com">Webcoachbd</a>
</p>
 
</body>
</html>

এটা একটা পূর্নাঙ্গ উদাহরন। .html এক্সটেনসন দিয়ে সেভ করে (যেমন index.html test.html) ব্রাউজারে রান করান বা আমাদের অনলাইন এডিটরে দেখুন।

List

ওয়েব পেজে যদি তালিকা বা লিস্ট প্রদর্শন করাতে চান তখন এইচটিএমএল এ ৩ ধরনের লিস্ট করার ট্যাগ আছে, প্রয়োজনমত যেকোন একটি ব্যবহার করতে পারেন।

Unordered List :

এটিই সবচেয়ে বেশি ব্যবহৃত হয় প্রফেশনালি। <ul></ul> এর ভিতরে রাখতে হবে এবং <li></li> এলিমেন্টের ভিতর একটা একটা করে আইটেম রাখতে হবে। প্রদর্শন করবে তালিকা আকারে কোন নাম্বারিং থাকবেনা। বাই ডিফল্ট একটা গোল চিহ্ন প্রতিটি আইটেমের বাপাশে থাকে। যেমন

<ul>
<li>Bangla</li>
<li>English</li>
<li>Social Science</li>
<li>Mathemetaics</li>
</ul>

প্রদর্শন:

Bangla
English
Social Science
Mathematics

আপনি ইচ্ছে করলে সিএসএস দিয়ে গোল চিহ্নের পরিবর্তে অন্য চিহ্নও দিতে পারেন এগুলি সিএসএস এ আলোচনা হবে।

Ordered List:

কখনও নাম্বার দিয়ে তালিকা প্রয়োজন হতে পারে তখন <ol></ol> এর ভিতর li ট্যাগ দিয়ে বানাতে পারেন যেমন

<ol>
<li>iPad</li>
<li>iPhone</li>
<li>MacBook Air</li>
</ol>

প্রদর্শন

iPad
iPhone
MacBook Air

ol এলিমেন্টে start নামে একটা এট্রিবিউট ব্যবহার করে কত থেকে শুরু হবে এটা ঠিক করা যায় যেমন উপরের লিস্ট টি যদি ১০ থেকে দেখাতে চান তাহলে

<ol start="10">
<li>iPad</li>
<li>iPhone</li>
<li>MacBook Air</li>
</ol>

প্রদর্শন

iPad
iPhone
MacBook Air

li তে value নামের একটা এট্রিবিউট ব্যবহার করে যেকোন আইটেমের নাম্বার পরিবর্তন করা যায় যেমন

<ol>
<li value="5">iPad</li>
<li value="10">iPhone</li>
<li value="15">MacBook Air</li>
</ol>

প্রদর্শন

iPad
iPhone
MacBook Air

Definition list নামে আরেকটা লিস্টিং ট্যাগ আছে এটা খুব ব্যবহার হয়না, এটা দিয়ে একটু ভিন্নভাবে তালিকা দেখানো যায় যেমন

<dl>
<dt>Preliminary analysis</dt>
<dd> in this step, you need to find out the organization's objectives and the nature and scope of the problem under study. Even if a problem refers only to a small segment of the organization itself then you need to find out what the objectives of the organization itself are. Then you need to see how the problem being studied fits in with them</dd>
<dt>Systems analysis, requirements definition</dt>
<dd>Defines project goals into defined functions and operation of the intended application. Analyzes end-user information needs</dd>
<dt>Systems design</dt>
<dd>Describes desired features and operations in detail, including screen layouts, business rules, process diagrams, pseudocode and other documentation.</dd>
<dt>Development</dt>
<dd>The real code here</dd>
</dl>

প্রদর্শন

Preliminary analysis

in this step, you need to find out the organization's objectives and the nature and scope of the problem under study. Even if a problem refers only to a small segment of the organization itself then you need to find out what the objectives of the organization itself are. Then you need to see how the problem being studied fits in with them

Systems analysis, requirements definition

Defines project goals into defined functions and operation of the intended application. Analyzes end-user information needs

Systems design

Describes desired features and operations in detail, including screen layouts, business rules, process diagrams, pseudocode and other documentation.

Font

<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

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

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

1.<p><font size="7" face="Georgia, Arial" color="maroon">C</font>ustomize
2.your font to achieve a desired look.</p>

প্রদর্শন:

Customize your font to achieve a desired look.

সর্বশেষ লিখাসমূহ

এইচটিএমএল-৩ [Paragraph, Heading, List]

Heading

A long flow of text

unbroken by title,

crosses the eyes and numbs the mind

not to mention the fact that

it makes it nearly impossible to scan the text for a specific topic

List

Font

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

ফন্ট রং (Font color)

ফন্ট ফেস (Font face)

বেসফন্ট (Basefont)

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

Search in Website

Translate to any Language

বেশী দেখা লিখাসমূহ

সাম্প্রতিক লিখাসমূহ

শিক্ষা সংক্রান্ত লিখা

পাইথন প্রোগ্রামিং ল্য়াংগুয়েজ

সি প্রোগ্রামিং ল্য়াংগুয়েজ

পিএইচপি

প্রযুক্তি সংক্রান্ত লিখা

লিখার টেগসমূহ

ওয়েবসাইটের অতিথি

আমার কিছু প্রোফাইল

আমার কিছু কাজের লিংক

জরুরী কিছু লিংক

Contact Form