যে জিনিস লাগবে এইচটিএমএল শিখতে (অর্থ্যাৎ এইচটিএমএল কোড কোথায় লিখবেন)
নোটপ্যাড। Notepad open করে তৈরী হোন। যেহেতু নতুন তাই নোটপ্যাড দিয়েই শুরু করুন পরে অন্য কোন এডভান্সডএডিটরে সুইচ করবেন যেমন Netbeans বা Dreamweaver.আর যদি ড্রিমওয়েভার এ কাজের অভিজ্ঞতা থাকে তাহলে তাহলে এখনই শুরু করতে পারেন।
এইচটিএমএল শিখতে যে শব্দগুলি ভালভাবে জানা দরকার-
এলিমেন্টস(Elements): এলিমেন্টস হল HTML এর মুল কেন্দ্রবিন্দু। তারা HTML page এর প্রতেকটি টেক্সটের অংশকে বর্ননা করে। এলিমেন্টস গুলো ট্যাগ(tag) এর মাধ্যমে তৈরী। HTML এলিমেন্টগুলি অনেক স্তরে বিদ্যমান। সবকিছু যা আপনার চোখের সামনে Web page এ বিদ্যমান তা হতে পারে Paragraph text, কোন ব্যনার, নেভিগেশন লিংক ইত্যাদি সব কিছুই elements এই পেজটির।
একটি এলিমেন্ট(Element) মুল তিনটি অংশ নিয়ে গঠিত। শুরু করার ট্যাগ(opening tag), এলিমেন্ট এর ধারনকৃত অংশ এবং শেষে বন্ধ করার ট্যাগ(closing tag)।
প্রত্যেক Web page এর অতিব প্রয়োজনীয় চারটি এলিমেন্ট(Element) থাকে এগুলো হলো্: HTML, head, title এবংbody elements। এগুলো বিষয়ে নিচে আলোচনা করা হয়েছে।
<html> Element…</html>
সবার প্রথমে HTML লেখার শুরুতে HTML শব্দের প্রথমে এবং শেষে less than ও greater than (< >) চিহ্ন দিতে হয়। যেমন: <html>। কোন কিছু লেখার পর শেষে </html> ট্যাগটি দিতে হবে। অর্থাৎ <html> Welcome to Bangladesh </html>। Welcome to Bangladesh এই লেখাটি Web page এ প্রদশিত হবে। আমরা খুব সহজেNotepad এ লিখে Web page তৈরী করতে পারি। এজন্য আমদের Notepad Open করতে হবে। প্রথমে
start মেনু All Programs > Accessories >Notepad
তারপর Notepad হবার পর নিম্নের কোডটি লিখবো
view source
print?
1.<html>
2.Welcome to Bangladesh
3.</html>
এভাবে লেখার পর Notepad এর ফাইল মেনু হতে save এ ক্লিক করব তারপর index.html নামে save করব।
সেভ করা ফাইলটিকে Double click করে open করবো। দেখবো যে লেখাটি Browser এ open হয়েছে। খুব সহজে একটা web Page তৈরী হয়ে গেলো।
<head> element
একটি ডকুমেন্ট head, ডকুমেন্ট সস্বন্ধে মৌলিক ধারনা দেয়। <head> elements যা পেজের header নির্দেশ করে। head elements এর মধ্যে রাখা ট্যাগ সরাসরি ব্রাউজারে প্রদর্শিত হয় না। আমরা টাইটেল এলিমেন্ট এর মাধ্যমে প্রকাশ করতে পারি।
<title> element
<head> এলিমেন্ট এর মাঝে <title> এলিমেন্ট রাখতে হয়। যেই শব্দগুলো title elements এর opening (<title>)এবংclosing(</title>) tag এর মধ্যে লেখা হয় তা browser এর টাইটেল বা শিরোনাম হিসাবে প্রদর্শিত হয়।
view source
print?
1.<html>
2.<head>
3.<title> My WebPage!</title>
4.</head>
5.</html>
<body> element
body element যা web page এর প্রদর্শিত সকল বিষয় গুলো ধারন করে। যে সব বিষয় গুলো আমরা web page এ দেখাতে চাই তা body element ট্যাগ এর মধ্যে রাখতে হয়।
view source
print?
1.<html>
2.<head>
3.<title>My WebPage!</title>
4.</head>
5.<body>
6.Hello World! All my content goes here!
7.</body>
8.</html>
এই কোডগুলি নোটপ্যাডে কপি পেস্ট করে.html extension দিয়ে সেভ করে যেকোন ব্রাউজারে খুলুন এবং নিজের তৈরী প্রথম ওয়েব পেজ দেখুন।
যখন আপনি এইচটিএমএল ডকুমেন্ট উপর হতে নিচ, ডান হতে বামে সব সময় আপনি ট্যাগ দেখতে পাবেন। এটি এমন ভাবে প্রদর্শিত হবে যেন paragraph দেখতে paragraph এর মতো, টেবিল দেখতে টেবিল এর মতো।
ট্যাগ এর প্রধান তিনটি অংশ আছে
ক. শুরু করার ট্যাগ(opening tag)
খ.ধারনকৃত অংশ(contents)
গ.শেষ করার ট্যাগ (closing tag)।
এইচটিএমএল ট্যাগ এর মাধ্যমে আপনি web page এ আপনার পছন্দ মত বার্তা পাঠাতে পারেন।
view source
print?
1.<p>A Paragraph Tag</p>
ট্যাগ এর বর্ণ ছোট হাতের অক্ষর হওয়া উচিত। নিচে আরো কতক গুলো ট্যাগ দেখানো হলো।
view source
print?
1.<body> Body Tag (acts as a content shell)
2.<p>Paragraph Tag</p>
3.<h2>Heading Tag</h2>
4.<b>Bold Tag</b>
5.<i>Italic Tag</i>
6.</body>
Closing ট্যাগ ছাড়া ট্যাগ:
কিছু কিছু ট্যাগ আছে যাদের closing tag দেয়ার প্রয়োজন নেই। তারা কোন এলিমেন্ট ধারন করে না। সে ট্যাগ টি হচ্ছে line break tag এবং তা <br/> রুপে প্রকাশ করা হয়। যা বিশেষ ভাবে ব্যবহার করা হয়। অর্থাৎ একটি লাইন লেখা বাদ দিয়ে অপর লাইন হতে লেখা শুরু করার জন্য এ ট্যাগ টি ব্যবহার করা হয়।
আরো কিছু ট্যাগ আছে যাদেরকে বিশেষভাবে ব্যবহার করা হয় যেমন ইমেজ ট্যাগ, ইনপুট ট্যাগ।
view source
print?
1.<img src=”/./mypic.jpg” /> — Image Tag
2.<br /> — Line Break Tag
3.<input type=”text” size=”12″ /> — Input Field
প্রদর্শন:
–Line Break–
ট্যাগ কে সম্প্রসারন করার জন্য এট্রিবিউট ব্যবহার করা হয়। ধরুন যদি আমরা একটি টেবিল তৈরী করি তবেattributes ব্যবহার করে টেবিল এর প্রস্থ, উচ্চতা ঠিক করতে পারি। আর attributes value দিয়ে টেবিল এর প্রস্থ ওউচ্চতার মান দিতে পারি।
view source
print?
1.<tag attributes =”value” attributes =”value”>
view source
print?
1.<table width=”150″ height=”100″>
Class বা id attribute এর ব্যবহার প্রায় একই তবে কিছুটা ভিন্নতা আছে। Class বা id attribute সরাসরি ইলিমেন্ট ফরমেটে কোন ভুমিকা নেই তবে পর্দার অন্তরালে এদের ভুমিকা আছে বিশেষ করে জাভাস্ক্রিপ্ট, সিএসএস (এগুলো সম্পর্কে পরবতি টিউটোরিয়াল এ আলোচনা করা হয়েছে।
view source
print?
1.<p>Paragraph type 1 Italics</p>
2.<p>Paragraph type 2 Bold</p>
প্রদর্শন
Paragraph type 1 Italics
Paragraph type 2 Bold
এইচটিএমএল নেম এট্রিবিউট (HTML Name Attribute)
Name attribute টি Class বা id attribute হতে ভিন্ন। Name attribute টি প্রায়ই র্ফম বা অন্যান্য ইনপুট ইলিমেন্টের সাথে দেখা যায়।
view source
print?
1.<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 টি নির্বাচিত থাকে।
view source
print?
1.<h2 align=”center”>Centered Heading</h2>
Centered Heading
view source
print?
1.<h2 align=”left”>Left aligned heading</h2>
2.<h2 align=”center”>Centered Heading</h2>
3.<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।
এইচটিএমএল প্যারাগ্রাফ টিউটোরিয়াল (HTML Paragraph Tutorial in Bangla)
কোন লেখা কাজকে প্রকাশ করার ক্ষেত্রে প্যারাগ্রাফ ট্যাগ ব্যবহার করা হয়। এটি খুবই সাধারন এবং মৌলিক।
<p> ট্যাগ দারা অনুচ্ছেদ (প্যারাগ্রাফ) নিদের্শ করা হয়। এই ট্যাগ ব্যবহার করার ফলে প্যারাগ্রাফ টেক্সের উপরে নিচে অটোমেটিক ফাকা লাইন সৃষ্টি হয়।
view source
print?
1.<p>Avoid losing floppy disks with important school…</p>
2.<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 ব্যবহার করে একই কাজ করতে পারি।
view source
print?
1.<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 এর মধ্যে অবস্থান করবে।
view source
print?
1.<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 এর ডানপাশে অবস্থান করবে।
view source
print? বাকি টুকু দেখুন.
আমি আইটি ব্লগ। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 6 বছর 11 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 24 টি টিউন ও 4 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 5 ফলোয়ার আছে এবং আমি টেকটিউনসে 10 টিউনারকে ফলো করি।
![jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব](https://dnc.techtunes.io/tDrive/tuner/2018/04/techtunes_fee81aa370998cccf57ea2d7dc08eaa8-368x207.jpg "jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব")
