ওয়েব ডিজাইন এর হাতেখড়ি
ওয়েব ডিজাইন বা ওয়েব পেজ তৈরি করা শেখার জন্য সর্ব প্রথমে একজনকে যা শিখতে হবে তা হল HTML(Hyper Text Markup Language)। একটি সাধারণ টেক্সট এডিটর যেমন নোটপ্যাড এটি শেখার জন্য যথেষ্ট। তবে এছাড়াও আরোও বিভিন্ন ধরনের এডিটর পাওয়া যায়। কিন্তু নতুনদের জন্য নোটপ্যাড ব্যবহার করায় ভালো।
HTML এ প্রোগ্রাম লেখার সময় আমরা <> এবং </> এই দুটি চিহ্ন ব্যবহার করে থাকি, এবং এর মধ্যে বিভিন্ন word এবং letter যেমন html, head, title, body ইত্যাদি word ব্যবহার করা হয়ে থাকে এগুলোকে tag বলা হয়ে থাকে। আস্তে আস্তে আমরা বিভিন্ন tag এর পরিচিতি এবং তাদের ব্যবহার জানতে পারব। প্রত্যেকটি tag এর শুরু এবং শেষ থাকে। <> এটি দ্বারা শুরু এবং </> এটি দ্বারা শেষ নির্দেশ করা হয়।
এখানে এত স্বল্প পরিসরে প্রত্যেকটি বিষয় বর্ননা করা অনেক সময় সাপেক্ষ ব্যাপার। আসুন আমরা সরাসরি কোড এ চলে যাই। আপনি একটি নোটপ্যাড ওপেন করে হুবহু নিম্নের কোডটি টাইপ করুন-
এবার এটিকে আপনি আপনার পছন্দ মত নামের সাথে .html যেমন part1.html দিয়ে আপনার কম্পিউটার এর নির্দিষ্ট একটি যায়গায় save করুন। এখন এই save করা ফাইলটি ওপেন করলেই দেখতে পাবেন এটি আপনার ব্রাউজার এর মাধ্যমে ওপেন হচ্ছে। এবং সেখানে লেখা দেখতে পাবেন This is my first page.হয়ে গেল আপনার প্রথম ওয়েবপেজ তৈরি। এখানে আমরা সমস্ত কিছু <body> </body> ট্যাগ এর মধ্যে লিখব।
HTML এ অনেক গুলো ট্যাগ এর মধ্যে এখানে বহুল ব্যবহৃত ট্যাগ গুলো সম্পর্কে বিস্তারিত দেওয়া হলো। পরবর্তিতে কাজ করতে করতে আমরা এদের ব্যবহার দেখতে পাব। তাহলে চলুন দেখে নেওয়া যাক HTML এ ব্যবহার করা হয় এমন কিছু ট্যাগ এবং তাদের সম্পর্কে বিস্তারিত-
- ওয়েব ডিজাইন এর হাতেখড়ি [পর্ব-০১] :: সাধারণ আলোচনা এবং ট্যাগ পরিচিতি
ওয়েব ডিজাইন বা ওয়েব পেজ তৈরি করা শেখার জন্য সর্ব প্রথমে একজনকে যা শিখতে হবে তা হল HTML(Hyper Text Markup Language)। একটি সাধারণ টেক্সট এডিটর যেমন নোটপ্যাড এটি শেখার জন্য যথেষ্ট। তবে এছাড়াও আরোও বিভিন্ন ধরনের এডিটর পাওয়া যায়। কিন্তু নতুনদের জন্য নোটপ্যাড ব্যবহার করায় ভালো।
HTML এ প্রোগ্রাম লেখার সময় আমরা <> এবং </> এই দুটি চিহ্ন ব্যবহার করে থাকি, এবং এর মধ্যে বিভিন্ন word এবং letter যেমন html, head, title, body ইত্যাদি word ব্যবহার করা হয়ে থাকে এগুলোকে tag বলা হয়ে থাকে। আস্তে আস্তে আমরা বিভিন্ন tag এর পরিচিতি এবং তাদের ব্যবহার জানতে পারব। প্রত্যেকটি tag এর শুরু এবং শেষ থাকে। <> এটি দ্বারা শুরু এবং </> এটি দ্বারা শেষ নির্দেশ করা হয়।
এখানে এত স্বল্প পরিসরে প্রত্যেকটি বিষয় বর্ননা করা অনেক সময় সাপেক্ষ ব্যাপার। আসুন আমরা সরাসরি কোড এ চলে যাই। আপনি একটি নোটপ্যাড ওপেন করে হুবহু নিম্নের কোডটি টাইপ করুন-
এবার এটিকে আপনি আপনার পছন্দ মত নামের সাথে .html যেমন part1.html দিয়ে আপনার কম্পিউটার এর নির্দিষ্ট একটি যায়গায় save করুন। এখন এই save করা ফাইলটি ওপেন করলেই দেখতে পাবেন এটি আপনার ব্রাউজার এর মাধ্যমে ওপেন হচ্ছে। এবং সেখানে লেখা দেখতে পাবেন This is my first page.হয়ে গেল আপনার প্রথম ওয়েবপেজ তৈরি। এখানে আমরা সমস্ত কিছু <body> </body> ট্যাগ এর মধ্যে লিখব।
HTML এ অনেক গুলো ট্যাগ এর মধ্যে এখানে বহুল ব্যবহৃত ট্যাগ গুলো সম্পর্কে বিস্তারিত দেওয়া হলো। পরবর্তিতে কাজ করতে করতে আমরা এদের ব্যবহার দেখতে পাব। তাহলে চলুন দেখে নেওয়া যাক HTML এ ব্যবহার করা হয় এমন কিছু ট্যাগ এবং তাদের সম্পর্কে বিস্তারিত-
- এইচ টি এম এল ট্যাগ( <html> </html>): HTML ডকুমেন্টটিকে নির্দেশ করে।
- হেড ট্যগ(<head></head>): হেড অংশের ভিতরে আপনি চাইলে CSS, javascript সহ যেকোন স্ক্রীপ্ট যোগ করতে পারবেন।
- টাইটেল ট্যাগ (<title></title>): Title ট্যাগের মধ্যে সাধারনত ওয়েব সাইট এর নাম লেখা হয়। আপনি চাইলে অন্য কিছু লিখতে পারেন যা ব্রাউজারের টাইটেলবারে দেখাবে।
- মেটা ট্যাগ(<meta>): সার্চ ইঞ্জিন অপটিমাইজেশনের জন্য ব্যবহার করা হয়।
- বডি ট্যাগ (<body></body>): বডি অংশের ভিতরে ওয়েব সাইটের সমস্ত প্রকার কনটেন্ট(content) থাকে।
- বোল্ড ট্যাগ (<b></b>): ওয়েব পেজে কোন লেখাকে বোল্ড আকারে প্রকাশ করার জন্য এই ট্যাগ ব্যবহার করা হয়।
- লাইন ব্রেক ট্যাগ(</br>): টেক্সটে সিঙ্গেল লাইন ব্রেক যুক্ত করতে ব্যবহার করা হয়।
- ইটালিক ট্যাগ(<i></i>): এটিও বোল্ড এর মতই কোন লেখাকে ইটালিক রুপে প্রদর্শন করার জন্য ব্যবহার করা হয়।
- স্ট্রং ট্যাগ (<strong></strong>): টেক্সটকে স্ট্রং করে দেখাতে ব্যবহার করা হয়।
- প্যারাগ্রাফ ট্যাগ(<p></p>): প্যারাগ্রাফ আকারে কোন কিছু লেখার জন্য ব্যবহার করা হয়।
- হেড ট্যাগ(<h></h>): <h1></h1>….<h6></h6> বিভিন্ন সাইজের হেডিং লেখার ক্ষেত্রে ব্যবহার করা হয়।
- হরাইজন্টাল ট্যাগ(</hr>): হরাইজন্টাল লাইন তৈরি করার জন্য ব্যবহার করা হয়।
- কোড ট্যাগ(<code></code>): কম্পিউটারে কোড লেখার মতো করে টেক্সটকে প্রদর্শন করতে ব্যবহার করা হয়।
- টেবিল ট্যাগ (<table></table>): টেবিল তৈরি করতে ব্যবহার করা হয়।
- টেবিল হেডার ট্যাগ(<th></th>): টেবিলের হেডার নির্ধারণ করতে ব্যবহার করা হয়।
- টি আর ট্যাগ (<tr></tr>): টেবিলের রো নির্ধারণ করতে ব্যবহার করা হয়।
- টি ডি ট্যাগ(<td></td>): টেবিলের সেল নির্ধারণ করতে ব্যবহার করা হয়।
- অর্ডার লিস্ট ট্যাগ(<ol></ol>): অর্ডার লিস্ট তৈরি করতে ব্যবহার করা হয়।
- আনর্ডার লিস্ট ট্যাগ (<ul></ul>): আনর্ডার লিস্ট তৈরি করতে ব্যবহার করা হয়।
- লিস্ট আইটেম ট্যাগ(<li></li>): লিস্ট আইটেম নির্ধারণ করতে ব্যবহার করা হয়।
- ফর্ম ট্যাগ(<form></form>): ইউজার ইনপুট এর জন্য ফর্ম তৈরি করতে ব্যবহার করা হয়।
- ইনপুট ট্যাগ(<input></input>): ইনপুট ফিল্ড তৈরি করতে ব্যবহার করা হয়।
- সিলেক্ট ট্যাগ (<select></select>): নির্বাচন যুক্ত তালিকা তৈরি করতে ব্যবহার করা হয়।
- ফ্রেম সেট ট্যাগ (<frameset></frameset>): ফ্রেম সমূহের একটি সেটকে নির্ধারণ করে।
- আই ফ্রেম(<iframe></iframe>): আই ফ্রেম তৈরির জন্য ব্যবহার করা হয়। একটি ইনলাইন সাব উইন্ডো (ফ্রেম) নির্ধারণ করে।
- অ্যাংকর ট্যাগ(<a></a>): অ্যাংকরকে নির্ধারণ করে।
- লিংক ট্যাগ(<link>): লিংক ট্যাগ বিভিন্ন ডকুমেন্ট এর মধ্যে সম্পর্ক নির্ধারণ করতে ব্যবহার করা হয়। যেমনঃ-<link rel="stylesheet" type="text/css" href="theme.css"> এবং এই ট্যাগ এর ভিতরে বিভিন্ন প্রকার অ্যাট্রিবিউট ব্যবহার করা হয়।
- স্পান ট্যাগ(<span></span>): কোন ডকুমেন্ট এর ইনলাইন এলিমেন্ট গুলোকে গ্রুপ করতে ব্যবহার করা হয়।
- ডিভ ট্যাগ (<div></div>): এইচটিএমএল ইলিম্যান্টকে বিভিন্ন গ্রুপে ভাগ করার জন্য div ট্যাগ ব্যবহার করা হয়।
- এমবেড ট্যাগ(<embed></embed>): অডিও ভিডিও বিভিন্ন ফাইল সংযুক্ত করতে এই ট্যাগ ব্যবহার করা হয়।
- স্ক্রিপ্ট ট্যাগ(<script></script>): ওয়েব পেজে প্রোগ্রামিং এর সুবিধা যুক্ত করার জন্য বিভিন্ন ধরণের স্ক্রিপ্টিং ল্যাঙ্গুয়েজ ব্যবহার করা হয়। এবং সেই স্ক্রিপ্ট গুলোকে যুক্ত করার জন্য স্ক্রিপ্ট ট্যাগ ব্যবহার করা হয়।
- স্টাইল ট্যাগ (<style></style>): ইন্টার্নাল স্টাইল সিট ব্যবহার করার জন্য এই ট্যাগ ব্যবহার করা হয়।
No comments:
Post a Comment