ওয়েব ডিজাইন (পর্ব ০২) টেক্সট এডিটর ডাউনলোড ও ব্যবহার, কোড সেভ করা ও রান করা,ট্যাগ(Tag), এ্যাটরিবিউট (Attribute), এলিমেন্ট (Element) vs কন্টেন্ট (Content),হেডিং (Heading) ও প্যারাগ্রাফ (Paragraph)

আজ টেক্সট এডিটর ডাউনলোড ও ব্যবহার, কোড সেভ করা ও রান করা,ট্যাগ(Tag), এ্যাটরিবিউট (Attribute), এলিমেন্ট (Element) vs কন্টেন্ট (Content),হেডিং (Heading

আস্‌সালামু আলাইকুম! আশা করি আল্লাহ এর অশেষ রহমতে আপনারা সবাই ভালো আছেন।আমিও আপনাদের দোয়াই ভালো আছি। আজ টেক্সট এডিটর ডাউনলোড ও ব্যবহার, কোড সেভ করা ও রান করা,ট্যাগ(Tag), এ্যাটরিবিউট (Attribute), এলিমেন্ট (Element) vs কন্টেন্ট (Content),হেডিং (Heading) ও প্যারাগ্রাফ (Paragraph) শিখবো।

টেক্সট এডিটরঃ (Text Editor)

আমরা ওয়েব পেজ বানানোর জন্য যে কোড গুলো লিখবো তার জন্য কোনো একটা টেক্সট এডিটর লাগবেই।এই কোড লেখার জন্য বিভিন্ন জনপ্রিয় কোড এডিটর রয়েছে।আপনার যেটা ভালো লাগে আপনি তার যেকোনো টা ইউজ করতে পারেন।

নিচে কিছু টেক্সট এডিটর নাম ও ডাউনলোড লিংক দিয়ে দিচ্ছিঃ

Notepad++
Visual Studio Code
Sublime Text
Brackets (Visual Studio Marge Now)

exe Notepad++ 7.9.5 release Download

exe Visual Studio Code Download

exe Sublime Text Download

ফাইল তৈরি ও কোড লেখাঃ (File create and code write)

আমরা এখন দেখবো কিভাবে ফাইল তৈরি করবো এবং সেই ফাইল কিভাবে এডিট করে কোড লিখবো।

আমরা বেসিক ভালো ভাবে বুঝার জন্য টেক্সট এডিটর হিসেব Notepad++ দিয়ে কাজ করবো।

প্রথমে আপনার কম্পিউটারের This PC তে ডাবল ক্লিক করে ভিতরে প্রবেশ করুন। তারপর উপরের ফটো এর মতো View(1) তে ক্লিক করুন, এর পর File name extensions (3) ক্লিক করুন।

তা হলে আপনার প্রতিটি ফাইলের এক্সটেইনশন দেখতে পারবেন।

এর পর কোনো একটা ফোল্ডার তৈরি করে নিন যাতে করে আলাদা ভাবে আমাদের তৈরি করা ফাইল গুলো রাখতে পারি। এবার ডাবল ক্লিক করে ফোল্ডার এর ভিতর প্রবেশ করুন।

এবার স্ক্রিনের যে কোনো সাদা জায়গা Right Click করে New (1) তে ক্লিক করে Text Document(2) এ ক্লিক করুন।

এবার New Text Document.txt নাম রিনেম অবস্থায় দেখতে পাবেন।এই পুরো নাম টি মুছে ফেলুন।

তারপর ওখানে index.html লিখে Enter (2) বাটনে চাপ দিন।

এবার উপরের চিত্রের মতো দেখতে পারবেন।কখনো ক্রোম ব্রাউজারের চিন্হ দেখতে না পেলে আপনার ডিফল্ট এপস থেকে ডিফল্ট এপস হিসেবে ক্রোম ব্রাউজার কে সিলেক্ট করে নিন।(অথবা আপনার পছন্দের ব্রাউজার নিতে পারবেন।)

এবার index.html ফাইলকে সিলেক্ট করে Right Click (1) করে Edit with notepad++ (2) এ ক্লিক করুন।

Notepad++ এ সাদা পেজ দেখতে পারবেন। এবার উদাহরন স্বরূপ HTML এর মার্কআপটা লিখুন। যা আমরা লিখতেছি তা পরে ভালো ভাবে বুঝতে পারবো এখন শুধু সুন্দর ভাবে এই গুলো লিখবো দেখে দেখে। লেখা শেষ হলে Ctrl + S বাটনে চাপ দিয়ে সেভ করবো।

তারপর Notpad++ উইন্ডো টা মিনিমাইজ করে দিবো, এবং উপরের ফটো এর মতো index.html এ ডাবল ক্লিক করে ব্রাউজার দ্বারা ফাইল টা ওপেন করবো।

এবার দেখতে পারবেন <title> ট্যাগ এ আমরা যেটা লিখেছিলাম ,সেইটা ব্রাউজারের এড্রেসবারের উপরে দেখা যাচ্ছে।এবং <h2> ট্যাগ এ আমরা যেটা লিখেছিলাম, সেইটা ব্রাউজারেই দেখা যাচ্ছে।

HTML ট্যাগ (Tag)

আমরা যদি যে কোনো এইচটিএমএল দেখি তাতে ট্যাগ থাকবেই। ট্যাগ গুলো এমন, <html>,<head>,<body>

(<) Less then আর (>) Greater than এর কোনো ওয়ার্ড থাকলেই তা ট্যাগ হিসেবে ধরতে পারি। এই দুই চিন্হ দিয়ে যে ডকুমেন্ট আমরা লেখি তাই HTML ট্যাগ।HTML এর Tag অনেক। যেমন আমরা প্যারাগ্রাফ লিখতে <p></p> ট্যাগ ইউজ করি।

<html>
<head>
<title>HTML Tag tutorial in WikiJana</title>
</head>
<body>
<h1>WikiJana demo heading</h1>
<p>demo content goes here.</p>
</body>
</html>

Syntax:

<tagname>Some Content</tagname>

tagname নামে কোনো ট্যাগ নাই বুঝানোর জন্য এখানে tagname ইউজ করা হয়েছে।

ট্যাগ কত ধরণেরঃ (How many types of tags)

Empty tag বা ‍Single Tag
Container tags বা ডাবল ট্যাগ

Empty Tag: এই ট্যাগ গুলো সাধারনত শুরু হয় তবে শেষ হয়না। Empty ট্যাগ এ শুধু ওপেন ট্যাগ থাকে।

যেমন,

<br> , <hr>

Container Tag: এই ট্যাগ গুলো সাধারনত এক জোড়া থাকে। Container Tag গুলো সাধারনত ওপেন ট্যাগ ও ক্লোজ ট্যাগ নিয়ে গঠিত হয়।

যেমন,

<b>This text is in Bold. </b>
<i>This text is in italics. </i>

প্রায় সব ট্যাগ এরই শুরু ট্যাগ আর শেষ ট্যাগ থাকে। যেমন, <html> </html>

শুরু ট্যাগ কে Opening tag আর শেষ ট্যাগকে Closing Tag বলে।Open Tag আর Close tag প্রায় একই তবে ক্লোজ ট্যাগ এ ব্যকস্লাস(/) চিন্হ থাকে।

কিছু ট্যাগ আছে যার ক্লোজ ট্যাগ নাই। যেমন ইনপুট ট্যাগ, ইমেজ ট্যাগ।

কিছু কমন ট্যাগ সমূহঃ

এট্রিবিউটঃ( Attribute )

HTML এর প্রতিটি এলিমেন্ট ব্রাউজার এক একটা নির্দেশ দেয় যা তার ভিতর থাাকা কনেন্টে কে কিভাবে প্রদর্শন করবে।h1 এলিমেন্ট যখন ব্রাউজারকে বড় ফন্টের শিরোনাম প্রদর্শন করতে বলবে তখন এট্রিবিউট দিয়ে সেই শিরোনামটির রং কি হবে তাও বলে দিতে পারেন। যেমন,

এট্রিবিউট সব সময় ওপেন ট্যাগ এর ভিতর বসে। এট্রিবিউটের প্রথম অংশের নাম হয় attribute আর পরের অংশের নাম হয় Value.

<font color="red">এখানে কন্টেন্ট লিখতে হবে।</font>

এলিমেন্ট ও কন্টেন্টঃ ( Element and Content )

এলিমেন্টঃ

Start tag (যেমন <div>) এবং End tag (যেমন </div>) এর মাঝে যা থাকে তা সহ পুরোটি একটা এলিমেন্ট। একটা এলিমেন্টের ভিতর ট্যাগের মতই এক বা একাধিক এলিমেন্ট থাকতে পারে বা থাকে।

কন্টেন্টঃ

কোড করে আমরা ওয়েব ব্রাউজার এর মাধ্যমে যে আউটপুট আমরা পেয়ে থাকি। তাই কন্টেন্ট।

হেডিং (Heading)

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

যেমন,


<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

প্যারাগ্রাফ (Paragraphs)

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

<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>

এই আর্টিকেল টি পুরোটা পড়ার জন্য আপনাকে অনেক ধন্যবাদ, এই আর্টিকেল যদি বুঝতে অসুবিধা হয় অথবা কোনো প্রশ্ন থাকে তবে কমেন্ট করুন, আশা করি আপনি উত্তর পাবেন।আর নতুুন কিছু জানার থাকলে আমাদের জানান আমরা জানানোর চেস্টা করবো। এই আর্টিকেলটি WikiJana.Com সাইটের সম্পদ তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট কপিরাইটের অধিনে চলে যেতে পারে।