Style, HTML এর একটি নতুন এট্রিবিউটস, এর মাধ্যমে HTML এর মধ্যেই CSS ব্যবহারের সুযোগ সৃষ্টি হয়। Style তথা CSS ব্যবহারের মাধ্যমে ওয়েব পেজের বিভিন্ন উপাদানের ডিজাইন তৈরি করা হয়। অন্যান্য এট্রিবিউটস যেমন align="center", align="left", bgcolor="green", height="100px", width="50px, bgcolor="green" ইত্যাদির মাধ্যমে যদিও ডিজাইন তৈরি করা যায়, তবে এক্ষেত্রে Style ব্যবহারে বিশেষ সুবিধা পাওয়া যায়।
<html>
<head>
<title> http://www.creativewritingzone.com</title>
</head>
<body bgcolor=" green">
<font size="2" face="Verdana">
This is a paragraph.
</font>
<br />
<font size="5" face="Tahoma" color="red" >
Bangladesh is a beautiful country.
</font>
</body>
</html>
<html>
<head>
<title> http://www.creativewritingzone.com</title>
</head>
<body bgcolor=" green">
<font style="font-family:Verdana; font-size:15px" >
This is a paragraph.
</font>
<br />
<font style=" font-size:25px; font-family:Tahoma; color:red;" >
Bangladesh is a beautiful country.
</font>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করুন।
একটা ওয়েব সাইটকে ব্যবহার বান্ধব করে তোলার ক্ষেত্রে লিংকের ব্যবহার খুবই গুরুত্বপূর্ণ। Link এর আভিধানিক অর্থ সংযুক্ত করা। অর্থাৎ একটা ওয়েব পেজের সাথে অন্য একটা পেজকে যুক্ত করাই হল লিংকিং। HTML এ লিংকিং করার জন্য <a> ট্যাগ বা anchor ট্যাগ ব্যবহার করা হয়।
যেমন <a href="http://http://www.creativewritingzone.com/"> www. creativewritingzon.com </a> । অর্থাৎ যে পেজের সাথে লিংক তৈরি করতে হবে তার এড্রেস href="…………….. " এর মধ্যে লেখতে হবে, এবং লিংকে যে লেখাটি প্রদর্শন করবে তা <a href=" ">…………………..</a> এর মধ্যে লেখতে হবে।
<html>
<head>
<title> http://www.creativewritingzone.com</title>
</head>
<body bgcolor=" green">
<a href="http://www. creativewritingzone.com/"> www. creativewritingzone.com </a> <br />
<a href="mailto:[email protected]"> [email protected]</a>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করুন।
একটা ওয়েব পেজের গুরুত্বপূর্ণ উপাদান সমূহের একটি হচ্ছে ইমেজ । ওয়েবপেজে ইমেজের উপযুক্ত ব্যবহারের মাধ্যমে পেজটি ব্যবহারকারীদের কাছে যেমন আকর্ষণীয় হয়ে ওঠে তেমনি ব্যবহার বান্ধবও হয়। আকর্ষনীয় নেভিগেশন বার, বাটন, ব্যানার, ইত্যাদিতে ইমেজের ব্যবহার অপরিহার্য। ওয়েব পেজে ইমেজ বা ছবি যুক্ত করার জন্য প্রয়োজনীয় ট্যাগটি হচ্ছে <img> । এর কোন শেষ ট্যাগ নেই। শুধুমাত্র <img> দিয়ে কোন কাজ হয় না, এর সাথে সবসময়ই src এট্রিবিউটটি ব্যবহার করতে হয়। যেমন <img src=”pc.png”> , তাহলে pc.png ইমেজটি প্রদর্শিত হবে।
ডেক্সটপে একটা webpage নামে folder নিতে হবে এর মধ্যে pc.png নামে save করা একটা ছবি রাখতে হবে।
<html>
<head>
<title> http://www.creativewritingzone.com</title>
</head>
<body bgcolor=" green" style="text-align:center">
<h3> This is an example of image.</h3>
<img src="pc.png">
</body>
</html>
একটা Notepad Open করে উপরের Code টুকু লিখে File মেনু থেকে Save as এ ক্লিক করে File name হিসেবে index.html বা home.html অথবা যেকোন নাম.html দিয়ে, Save as type হিসেবে All files সিলেক্ট করে এরপর Save বাটনে ক্লিক করতে হবে। এরপর save করা index.html ফাইলটিকে webpage folder এর মধ্যে রাখতে হবে। এখন Mozilla Firefox দিয়ে index.html open করুন।
অনলাইনে সার্ভারে কোন ইমেজ আপলোড করা থাকলে উক্ত ইমেজ যুক্ত করার জন্য তার এড্রেস pc.png এর স্থানে লেখতে হবে। যেমন
<img src="http://www.creativewritingzone.com/bangla/html/images/pc.png">
আমার বিশ্বাস কিছুটা হলেও এ থেকে HTML সম্পর্কে ধারণা পাবেন।
ভালো লাগলে মন্তব্য করতে ভুলবেন না,
আজ এই পর্যন্ত,আল্লাহ হাফেজ
আমি Goushul। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 2 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 7 টি টিউন ও 4 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।