ওয়েব ডিজাইন-২: HTML বেসিক

5
431
এটি 8 পর্বের ওয়েব ডিজাইন এর হাতেখড়ি সিরিজ টিউনের 5 তম পর্ব
ওয়েব ডিজাইন-২: HTML বেসিক

মুক্তাদির রহমান

বুয়েটে কম্পিউটার সায়েন্স এন্ড ইঞ্জিনিয়ারিং এ পড়ছি। আমার আপডেট পোস্টগুলো muktadir.wordpress.com এ পাওয়া যাবে।
ওয়েব ডিজাইন-২: HTML বেসিক

HTML শেখার আগে কয়েকটি মৌলিক বিষয়ে ধারণা থাকতে হবে। নিচে তা আলোচনা করা হলঃ
HTML ট্যাগঃ ট্যাগ সম্পর্কে আগের পোস্টে ধারনা দেয়া হয়েছিল। < চিহ্ন দিয়ে শুরু এবং > চিহ্ন দিয়ে শেষ হওয়া শব্দ বা শব্দসমষ্টিই হল ট্যাগ। যেমনঃ <HTML>, <Body>, <head>,<P> ইত্যাদি এক একটি ট্যাগ। HTML কিছু ট্যাগের সমষ্টি ছাড়া আর কিছুই নয়। এই ট্যাগগুলো ব্যবহার করেই HTML এর সকল কোড লিখতে হয়। অর্থাৎ আমরা যা কিছু-ই করি না কেন(টাইটেল দেয়া,লেখা বড়-ছোট করা, বর্ণ পরিবর্তন,লিস্ট তৈরী ইত্যাদি সবকিছু), তা ট্যাগ ব্যবহার করেই করতে হবে। প্রতিটি কাজ করার জন্য আলাদা আলদা ট্যাগ আছে যেমনঃ ওয়েব পেজ এর টাইটেল দেয়ার জন্য টাইটেল (<title>) ট্যাগ। তাই আমরা HTML এ যা শিখব তা হল এই ট্যাগগুলোর কোনটি কোন কাজে এবং কেমন করে ব্যবহার করতে হয়। এখানে আরেকটা জিনিস জানতে হবেঃ একটা ট্যাগ শুরু করে ঐ ট্যাগের কাজ শেষ হবার পর একটি সমাপ্তি সুচক ট্যাগ লিখে দিতে হবে। এটা লিখার জন্য যে ট্যাগ ব্যবহারর করেছেন সেই ট্যাগটিই লিখতে হবে, কেবল প্রথম < চিহ্নের পর / ব্যবহার করতে হবে। যেমনঃ
আগের পোস্টের উদাহারণে
ওয়েব ডিজাইন-২: HTML বেসিক
এখানে <title> ট্যাগ লিখে ওয়েব সাইট এর টাইটেল লেখার পর সমাপ্তি সূচক </title> ট্যাগ লিখে দেয়া হয়েছে। সমাপ্তি সূচক ট্যাগটি নির্দেশ করে যে ওয়েব সাইট এর টাইটেল লেখা শেষ হয়েছে। অর্থাৎ সমাপ্তি সুচক ট্যাগ এর আগ পর্যন্ত যা লিখা হবে তা-ই ওয়েব পেজ এর টাইটেল হিসাবে বিবেচিত হবে( এমন কি </head> <body> ইত্যাদি ট্যাগও ওয়েব পেজ এর টাইটেল হয়ে যাবে।আগের পোস্ট এর কোডটা লিখে </title> ট্যাগটি বাদ দিয়ে পরীক্ষা করে দেখুন। অবশ্যই পরিক্ষাটা করে দেখবেন কিন্তু।) । শুধু টাইটেল ট্যাগ নয় পরবর্তীতে যত গুলো ট্যাগ ব্যবহার করবেন , ব্যবহারের পর সমাপ্তি সুচক ট্যাগ অবশ্যই লিখবেন।

ওয়েব পেজ এর বিভিন্ন অংশঃ আগের পোস্টে বলা হয়েছে – HTML এ ওয়েব পেজকে দুইটি অংশে ভাগ করা হয়ঃ ১। Head .২। Body
১। Head: এই অংশ <head> ট্যাগ দিয়ে শুরু হয় এবং </head> ট্যাগ দিয়ে শেষ হয়। এই অংশে ওয়েব পেজের টাইটেল সেট করা হয়। এছাড়াও আরো কিছু কাজ করা হয় যা পরে দেখা যাবে।
২। Body: এই অংশ <body> ট্যাগ দিয়ে শুরু হয় এবং </body> ট্যাগ দিয়ে শেষ হয়। এই অংশে ওয়েব পেজ এ যা যা থাকবে ( যেমন কোন লেখা, ছবি ইত্যাদি যে কোন কিছু) তা লিখে দিতে হয়।এই অংশের মাঝে যা লিখবেন ওয়েব পেজেও তা লেখা দেখা যাবে। এই পোস্ট শেষে তা বুঝতে পারবেন।
সুতরাং যে কোন ওয়েব পেজে নিচের অংশগুলো থাকতে হবেঃ

Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

<html>
<head>
(এখানে টাইটেল সেট করা লাগবে)
</head>
<body>
(এখানে যা লিখবেন তা ওয়েব পেজ এ প্রদর্শিত হবে।)
</body>
</html>

এখন থেকে মনে রাখবেন – যে কোন ওয়েব পেজ তৈরী করতে হলে উপরের কোডগুলো সব সময় লিখতে হবে। তারপর যা করার করবেন। (কোডগুলোকে Notepad এ লিখে HTML ফাইল হিসাবে সেভ করা লাগবে যা আগের পোস্টে আলোচনা করা হয়েছে)। উপরের অংশ কমপক্ষে দুই বার পড়তে হবে। বিষয়টা বুঝে থাকলে ওয়েব পেজ তৈরী করার কাজে নেমে পরুন।

টাইটেল সেট করাঃ আগেই বলা হয়েছে HTML এ প্রতিটি কাজ করার জন্য এক একটি ট্যাগ আছে। টাইটেল সেট করার জন্য টাইটেল ট্যাগ (<title>) ব্যবহার করতে হবে। এই ট্যাগকে Head অংশে লিখতে হবে। যেমনঃ

<html>
<head>
<title>My First Web Page</title>
</head>
<body>

</body>
</html>

উপরের ওয়েব পেজের টাইটেল হল “My First Web Page” যা ওয়েব ব্রাউজারের টাইটেল বারে দেখা যাবে।

ওয়েব পেজে লেখাঃ আগেই বলা হয়েছে যে body অংশে যা-ই লিখবেন তা-ই ওয়েব পেজ এ দেখা যাবে। যেমনঃ

<html>
<head>
<title>My First Web Page</title>
</head>
<body>
Welcome to my first web page.

</body>
</html>

এবার পেজটি ওপেন করে দেখুন লেখা আছে “Welcome to my first web page. ” । তবে এখানে লেখার ক্ষেত্রে কিছু সীমাবদ্ধতা আছে। লেখাগুলোর মাঝে একাধিক Space দিতে পারবেন না । দিলেও ওয়েব পেজে কেবল একটি Space দেখাবে। Keyboard এ Enter কী ব্যবহার করে আলাদা লাইনে লিখলেও , ওয়েব পেজে তা কেবল একটা লাইন হিসাবেই উপস্থাপিত হবে। যেমনঃ body অংশে নিচের লেখা লিখলেও
I am                                                   Muktadir                                        Rahman.
I am                                                  teaching                                                   you HTML
ওয়েব পেজে কেবল নিচের লেখা দেখাবেঃ
I am Muktadir Rahman. I am teaching you HTML
এই সমস্যা নিরাসনের জন্য কিছু ট্যাগ ব্যবহার করা হয়। ওয়েব পেজে লেখা সাজানোর জন্য যে ট্যাগগুলো ব্যবহার করা হয় তা নিয়ে পরবর্তী পোস্টে আলোচনা করা হবে।
এবার নিচের প্রশ্ন গুলোর জবাব দিয়ে আপনি কতটুকু বুঝেছেন তা চেক করুন। যদি আটকে যান মন খারাপ করবেন না- পোস্টটি আবার মনযোগ দিয়ে পড়ে ফেলুন।
প্রশ্ন-১। ধরুন আপনার ওয়েব পেজ এ একটা ছবি প্রদর্শণ করাবেন। কোন জিনিসটি ব্যবহার করবেন?
ক) ট্যাগ খ) জাভাস্ক্রিপ্ট গ) অন্য কিছু
প্রশ্ন-২। ছবি প্রদর্শণের ক্ষেত্রে কোন অংশে কোড লিখবেন?
ক)Head খ)Body গ) অন্য কোন স্থানে

Series Navigation << পিএইচপি ভিডিও টিউন [পর্ব-০২] :: Xamp চালু করা এবং ডাটাবেজ ও টেবিল তৈরি করা।পাবনায় ২ মাসব্যাপী ফ্রি “প্রফেশনাল ওয়েব ডিজাইন” প্রশিক্ষণ – ভিশন টিউটোরিয়্যাল। >>
টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

5 মন্তব্য

  1. Wamp অধবা Jamp or javascripte অর্থাৎ সফট ওয়্যার দিয়ে ডিজাইন করা পদ্ধতিতে জানতে পারলে সহজ হত ।

    • ওয়েব ডিজাইন নিয়ে যে কোন কিছু শেখার আগে এইচটিএমএল তো শেখা লাগবে। আগে এইচটিএমএল শেষ করি। তারপর অন্য গুলো নিয়ে লিখতে চেষ্টা করব।

  2. এ পর্যন্ত খুব সুন্দর হয়েছে। পরবর্তী পোস্টর অপেক্ষায় আছি। ………………

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

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

twelve − eleven =