HTML TAG -Web design in 7 days
এইচ
টি এম এল – এর ট্যাগ
এইচটি এম এল বডি ট্যাগ-
এইচ টি এম এল এর পেজের বডি
অংশে কিছু লিখতে চাইলে তা <BODY> ও </BODY> এর মাঝখানে লিখে দিলেই তা ব্রাউজারে
প্রদর্শিত হবে। আমি আগেই বলেছি ,শূন্য স্থানের ব্যাপারে কখনোই ওয়েব ব্রাউজার মাথা ঘামায়
না।
নিম্নের ট্যাগ গুলো বডি ট্যাগ
এর মধ্যে নিয়ে দেখুন-
This is some text this
is displayed
as you would expect
this is some text
this is displayed in a
way
you
would not expect
exactly the same as the
above
লাইন ভেঙে নতুন প্যারাগ্রাফ
লিখতে চাইলে তা আপনাকে অবশ্যই নির্দিষ্ট করে দিতে হবে। নতুন প্যারাগ্রাফ নির্দিষ্ট
করে দেওয়ার জন্য <p> ট্যাগ ব্যবহার করুন।
আর লাইন ব্রেকের জন্য
<br> ট্যাগ ব্যবহার করুন।
এছাড়া আপনি লাইনের মধ্য দিয়ে
একটি লাইন টেনে দিতে বলতে পারেন ওয়েব ব্রাউজারকে <HR> ট্যাগ দিয়ে। কিন্তু অনেক
ওয়েব ডিজাইন বিশেষজ্ঞরা এই ট্যাগ ব্যবহার করতে নিষেধ করেছেন।
নিম্নের ট্যাগ গুলো বিশ্লেষন
করা যাকঃ
<P>.....</P>
একটি নতুন প্যারাগ্রাফ ও খালি লাইন টানার জন্য। এর সাথে অতিরিক্ত এলাইনমেন্ট নির্দিষ্ট
করে দিতে পারেন।
<BR> টেক্সট এ লাইন
ভাঙা।
<HR> এটি স্ক্রিনের
মধ্যে একটি হরিজেন্টাল লাইন এঁকে দিবে। ডিফল্ট ভাবে এটি পুরো পেজ জুড়ে হবে।
বডি ট্যাগ এর উদাহরণঃ
নিম্নের কোডটি লিখেই HTML
Body ট্যাগ এর ধারনা পরিস্কার হবে।
<html>
<head>
<title>Body tag
example</title>
</head>
<body>
This is a very simple
web page, Notice that the browser dose not pay attention to spaces<BR>
that we add to our documents unless your spaces that we add to our document
unless<BR> your specify what type of spacing you want
<p>
Like when you use a
paragraph tag or a <BR> line tag
<p>And here is
hard rule teatune.blogspot.com
<HR Align = "Center"
Size
= "10"
Width = "50%"
Color =
"AA0000" NOSHADE>
</body>
</html>
এই কোডটি রান করলে ব্রাউজারে নিচের মতো করে প্রদর্শিত হবে।
আপনার নিজের বা কোম্পানির
জন্য কোড লিখলে আপনার জন্য ভালো হবে। কারন এত আপনার নিজস্ব ধ্যান ধারনা প্রকাশ পাবে।
কারন পরবর্তিতে এই ওয়েব পেজের চেহারা বা কন্টেন্ট পরিবর্তন করতে আপনারসুবিধা হবে। অন্য
কারোর তৈরি করা পেজ মডিফাই করা বা পরিবর্তন করা কঠিন।
স্টাইল আসলে ব্যক্তিগত ব্যাপার
তারপরেও কিছু স্টার্ন্ডাড স্টাইল রয়েছে যা জেনে নিতে পারেন।
o
ট্যাগ,
আরগুমেন্ট বড় অক্ষরে লিখুন।
o
ট্যাগের
মধ্যে সমান চিহ্নের আগে ও পরে স্পেস দিন।
o
প্যারাগ্রাফের
আগে ওপরে কোন চিহ্ন দিয়ে রাখুন যাতে পরবর্তীতে এটি চিনতে পারেন।
o
লাইন
উইডথ 80 ক্যারেক্টর এর মধ্যে সীমিত রাখুন যাতে UNIX এডিটর একে পড়তে পারে।
o
সবসময়
ক্লোজিং ট্যাগ ব্যবহার করুন যেমন </HTML>
o
পেজের
এনকরে অযথা স্পেস দেবেন না।
কোডিং
স্টাইলের উদাহরনঃ
একটি খারাপ কোডের উদাহরন
দেখুন-
<html><head><title>Hello
world</title>
</head><bodybgcolor
= white text = black>
এটি খুব সাধারন একটি ওয়েবপেজ।
একটি ভাল কোডের উদাহরন দেখুন-
<html>
<head>
<title>hellow
world</title>
</head>
<bodybgcolor = “FFFFFF”
text = black>
<!- -Biginning of
page body --!>
This is a very simple
website
<p>
teatune.blogspot.com
<BR>
<p>
Click <a href = “teatune.blogspot.com”>here</a>
to go to Teatune
<!- -ending page
body- -!>
</body>
</html>
বুঝতেই পারছেন ভাল কোড খুব
সহজেই পড়া ও বোঝা যায় <p> এর নতুন প্যারাগ্রাফ এর উপর খালি জায়গা রাখার ফলে এই
প্যারাগ্রাফকে আলাদা মনে হবে। পেবড় হতে থাকলে কোড ও জটিল হয়ে যাবে। কোর্ডিং স্টান্ডার্ড
ভালো হওয়া খুবজরুরী। HTML ভ্যালিডেশন প্রগ্রামগুলোর সাথে আরো পরিচিত হোন তাহলেই সব
বুঝতে পারবেন।
টেক্সট
মডিফাই করা
দেখতে পাচ্ছেন এইচটি এম এল
ট্যাগ দিয়ে তৈরিকৃত ওয়েবপেজ দেখতে তেমন সুন্দর হয়না। যাইহোক HTML এ কিছু ফরমেটিং ট্যাগ
রয়েছে যা ব্যবহার করে আরেকটু সুন্দর করতে পারেন। তিন ধরনের টেক্সট মডিফাইং ট্যাগ রয়েছে
। এগুলো হলো টেক্সট এর সাইজ। পজিশন এবং স্টাইল। এই বিষয় গুলো আমরা ইতিপূর্বে দেখেছি।
এবার চলুন টেক্সট এর আকার বিষয়ক একটি কোড দেখা যাক।
<html>
<head>
<title>Sizing Text</title>
</head>
<body>
<H1>H1</H1>
<H2>H2</H2>
<H3>H3</H3>
<H4>H4</H4>
<H5>H5</H5>
<H6>H6</H6>
<Font Size = "1">Font Size = 1 </Font>
<BR><Font Size = "7">Font Size = 7 </Font>
<BR><Font Size = "+0">Font Size = +0 </Font>
<BR><Font Size = "+2">Font Size = +2 </Font>
<p>
Visit teatune.blogspot.com and learn php free
<p>
<BIG>Big text</BIG>
</body>
</html>
এই কোডটি ব্রাউজারে রান করলে নিচের মতো বিভিন্ন হেডিং এর ফন্ট সাইজ দেখাবে
এখানে দেখতে পাচ্ছেন সকল
হেডিং (H*) ব্লক লেটারের আছে আর ফন্ট ট্যাগ ব্লক লেটারে নেই।
টেক্সট
এর অবস্থান-
টেক্সট এর আকার নিয়ন্ত্রন
এর সাথে সাথে আপনি টেক্সট এর অবস্থান ও নিয়ন্ত্রন করতে চাইবেন। HTML এ টেক্সট এর অবস্থান
নির্ধারন বরে দেওয়া খুবই কঠিন কারন ল্যাঙ্গুয়েজটি হরো স্ট্রাকচার নির্ভর লে আউট নয়।
যাই হোক কিছু ট্যাগ রয়েছে যা আপনি ব্যবহার করে বেসিক লেআউট তৈরি করতে পারেন।
<Center>.........</Center> ট্যাগের
মধ্যে ট্যাগ ব্যবহার করা
<Blockquote>.......</
Blockquote> ট্যাগের মধ্যে টেক্সট
<NOBR>........</NOBR> ব্রাউজার কর্তৃক নির্ধারিত
<PRE>...........</PRE> প্রি-ফরমেটেড টেক্সট
নিম্নের কোডটি দেখলে এই ট্যাগ
গুলির ব্যবহার বোঝা যাবে-
<html>
<head>
<title>Text Positioning</title>
</head>
<body>
This is normal text
<Center>This is center text</Center>
<blockquote>This is blockquoted text</blockquote>
<NOBR>This is text that will be not stop even when the browser wants to word warp</NOBR>
<p>
teatune.blogspot.com visit and learn blogger
</body>
</html>
দুক্ষিত সেন্টার টেক্সট আসলেই মাঝ বরাবর দেখাচ্ছে উইন্ডো বড় হওয়ার জন্য উপরের ছবিতে না ও বোঝা যেতে পারে।
টেক্সট
স্টাইল
ওয়েব পেজের টেক্সট দেখতে
কেমন হবে তা আপনি নির্ধারন করে দিতে পারেন। টেক্সট এর ধরন নিধারন করে দেওয়ার জন্য অনেক
ট্যাগ রয়েছে যেমন-
ট্যাগ
|
ব্যবহার
|
<ADDRESS>........</ADDRESS>
|
পেজের নিচে ঠিকানার জন্য
ব্যবহার করা হয়
|
<B>........</B>
|
ট্যাগের মধ্যের টেক্সট
বোল্ড করার জন্য
|
<BASEFONT>........</BASEFONT>
|
ডিফল্ট ফন্ট সাইজ, কালার
ও ফন্ট ফেস নির্ধারনের জন্য
|
<BLINK>........</BLINK>
|
টেক্সট ব্লিঙ্ক করার জন্য
|
<CITE>........</CITE>
|
অন্য তথ্যের কোটেশন বা
রেফারেন্স টানার জন্য
|
<CODE>........</CODE>
|
কম্পিউটার কোড প্রদর্শনের
ফিক্সড উইথড ফন্ট
|
<EM>........</EM>
|
ইটালিক করার জন্য
|
<I>........</I>
|
ইটালিক করার জন্য
|
<FONT>........</FONT>
|
একই প্যারামিটার ব্যবহার
করে ফন্টের চেহারা পরিবর্তনের জন্য
|
<KBD>........</KBD>
|
ব্যবহারকারী কর্তৃক প্রদত্ত
ফন্ট বোঝানোর জন্য
|
<LISTING>........</LISTING>
|
নির্দিষ্ট উইথড এর ফন্ট
বোল্ডারের জন্য
|
<PRE>........</PRE>
|
প্রি ফরমেটেড টেক্সট নির্দিষ্ট
করে বোঝানোর জন্য
|
<SAMP>........</SAMP>
|
প্রোগ্রাম, স্ক্রিপ্ট প্রভৃতির
নমুনা ফলাফল
|
<STRONG>........</STRONG>
|
বোল্ড টেক্সট এর লজিক্যাল
স্টাইল ব্যবহারের জন্য
|
<SUB>........</SUB>
|
সাব স্ক্রিপ্ট টেক্সট প্রদর্শনের
জন্য
|
<SUP>........</SUP>
|
সুপার স্ক্রিপ্ট টেক্সট
প্রদর্শনের জন্য
|
<TT>........</TT>
|
মনোস্পেসড টেক্সট প্রদর্শনের
জন্য
|
<U>........</U>
|
আন্ডার লাইন দেওয়ার জন্য
|
চলুন একটি সুন্দর উদাহরন
দেখা যাক এই বিষযের উপর-
<html>
<head>
<title>About Shovon</title>
</head>
<body>
<Blockquote>
<Basefont face = "Arial">
<Address>
<P ALIGN = "Right">
Shovon
<BR> Shovon@teatune.com
<BR> 26 Tengrakhali, Kachua
<BR> Bangladesh, 9301
<BR> (880) 1813-0924
</P>
</Address>
<P ALIGN = "Left">
<Font Size = "4" Color = "RED">
<B>About me</B>
</Font><BR>
<Blockquote>
Hello, my name is <B>Shovon</B> and iam 21 Years Old from the <I>Bangladesh</I>
I have 2 Brother and no sister. I am the smallest , though. You can find out more about me by sending email!
</Blockquote>
<p>
<font size = "4" Color = "Red">
<B>About my work</B>
</Font>
<Blockquote>
I am currently a software engineer working in
<Font size = "6">B</Font>
<Font size = "5">A</Font>
<Font size = "4">N</Font>
<Font size = "3">G</Font>
<Font size = "2">L</Font>
<Font size = "2">A</Font>
<Font size = "3">D</Font>
<Font size = "4">E</Font>
<Font size = "5">S</Font>
<Font size = "6">H</Font>
doing <U> traning</U> and<u> developmant</u> . I enjoy my work and have all sorts of really cool projects.
</Blockquote>
</Basefont>
</Blockquote>
</body>
</html>
উপরের কোড গুলি রান করালে নিচের মতো আউটপুট পাবেন
About free game
No comments