ব্লগার ভাইদের জন্য প্রয়োজনীয় বেসিক html গাইড (মেগাটিউন )

কেমন আছেন সবাই ??? আশা করি খুব ভাল আছেন। আজ আপনাদের জন্য নিয়ে এলাম অক্ত অত্যন্ত দরকারী জিনিস।সকলে প্রস্তুত তো?  আসেন শুরু করা যাক।

ব্লগারকে হার্ডকোর প্রোগ্রামার বা কোডার হবার দরকার নেই । কিন্তু আবার একদম না জানলেই নয় । ছোটখাটো থিম এডিংটিং, পোষ্ট কনফিগারেশন, সাইডবার এডিংটিং ইত্যাদির জন্য কিছুটা হলেও বেসিক ল্যাঙ্গুয়েজ বা কোডিংটুল গুলো যেমন html, javascript, css জানা থাকার দরকার ।

আজকে থাকছে মাদার অফ অল ওয়েবডিজাইনিং ল্যাঙ্গুয়েজ HTML এর বেসিক টিউটোরিয়াল ।

HTML স্ট্রাকচার

<html>

<head>

</head>

<body>

<h1>শিরোনাম</h1>

<p>মূল বক্তব্য</p>

</body>

</html>

এটি হচ্ছে কোন HTML পাতার বেসিক কাঠামো । HTML পাতা শুরু হয় <html> এবং শেষ হয় </html> ট্যাগ দিয়ে । বাকি সব কোড এর ভিতরে থাকে । <html> এর পরই থাকে <head> ট্যাগ । এতে পাতার বেসিক কিছু উপাদান যেমন, ফেবিকন আইকন, মেটা ট্যাগ, ডিস্ক্রিপশন থাকে । এটি শেষ হয় </head> দিয়ে, এরপরই থাকে <body> ট্যাগ । এটিই মূলত পাতার বডি, এখানেই পাঠকের জন্য সব কোড লেখা হয় । HTML পাতার এক্সটেশন থাকে সাধারণত .htm বা .html । ওয়েব সার্ভারের কোন এক ডাইরেক্টরী খুলে কোন HTML পেজ দেখতে চাইলে সেই ডাইরেকটরীতে index.htm বা index.html নামের ফাইল রেখে দিতে হবে ।

টেক্সট এডিটিং

শিরোনাম দেয়া

HTML এ <h1> , <h2., <h3> ব্যবহার করে লেখার শিরোনাম দেয়া যায় । এগুলো লিখে তারপর শিোনাম লিখে তারপর </h1> বা </h2> বা </h3> লিখে শেষ করতে হয় । এখানে h1 বলতে header 1 বুঝানো হয় ।  h1 এর ফন্ট সাইজ সবচেয়ে বড় হয়ে থাকে, তারপর <h2>, <h3> ইত্যাদি । এই সাইজগুলো HTML সাথে থাকা CSS ফাইল দ্বারা নির্ণয় করা যায় ।

প্যারাগ্রাফ লেখা

শিরোনামের অধীনে পারাগ্রাফ শুরু করা হয় <p> ট্যাগ দিয়ে । এটি শেষ হয় </p> দিয়ে ।  প্যারাগ্রাফের মাঝে নানা এডিটিয়ের জন্য এই <p> ট্যাগের সাথেই লেখা যোগ করতে হয় । যেমন প্যারাগ্রাফটি পাতার মাঝে সাজাতে <p style=”text-align: center;”> দিয়ে শুরু করে </p> দিয়ে শেষ করতে হয় । বাম বা ডান পাশে সাজাতে center এর স্থলে left বা right লেখতে হয় ।

উদাহরণ: এই লাইনটি সেন্টার এলাইনমেন্ট দেয়া ।

লেখার সাইজ

লেখার সাইজ ও রং ঠিক করতে ব্যবহৃত হয় <p style=”color:black;font-size:20px;”>কাঙ্খিত লেখা বা প্যারাগ্রাফ </p> । এছাড়াও কোন শব্দ বা শব্দগুচ্ছকে বোল্ড করতে <strong> ও শেষে </strong> লেখতে হয় ।

উদাহরণ: এই লাইনটি নীল রংয়ের এবং সাইজ ১১px ।

বিবিধ

নতুন লাইন

কোন লেখার পরের নতুন লেখা নতুন লাইন থেকে শুরু করতে <br /> ব্যবহৃত হয় । এটি একবার লিখলেই হয়, শেষ করার জন্য আলাদা ট্যাগের দরকার নেই ।

লিংকযুক্ত করা

HTML এ কোন লেখা বা কিছুর সাথে লিংকযুকত করতে হয় এভাবে, <a href=”লিংকের ঠিকানা”> টেক্সট লেখা </a> ।  এখানে লিংকের ঠিকানা কথার স্থানে লিংক এবং টেক্সট লেখার স্থানে লেখা যোগ করে দিন । ” এবং ” কিন্তু দিতেই হবে । লিংক আলাদা ট্যাবে খুলতে চাইলে ব্যবহার করুন <a href=”লিংকের ঠিকানা” target=”_blank> টেক্সট লেখা </a> ।

ছবিযুক্ত করা

ছবিযুক্ত করতে চাইলে <img src=”ছবির ঠিকানা” /> লেখতে হবে । ছবিতে লিংকযুক্ত করতে লিখতে হবে, <a href=”লিংকের ঠিকানা”><img src=”ছবির ঠিকানা” /></a> ।

ফেবিকনযুক্ত করা

ব্রাউজারের সাইটের নামের পাশে ছোট আইকনটি ফেবিকন নামে পরিচিত । এটি দেখতে <head> এরপর ও </head>এর আগে  <link rel=”shortcut icon” href=”ফেবিকনের ঠিকানা” /> লিখতে হয় । ফেবিকন তৈরী করতে পারেন এখান থেকে ।

এগুলোই হচ্ছে বেসিক HTML কোডিং যা ব্লগারদের দরকার হয় । এগুলো ওয়ার্ডপ্রেস, ব্লগার সহ সব জায়গাতেই কাজ করবে ।

অনেক fullversion সফ্টওয়্যার ,মুভি ,ইবূক ,ওয়ালপেপার ,অ্যান্টিভাইরাস ডাউনলোড করতে চাইলে , এবং যেকোনো আইটি প্রোব্লেম এর সমাধান চাইলে , আমার ব্লগ ভিজিট করুন । আমার একটা সুন্দর ব্লগ আছে , আপনাদের নিমন্ত্রণ রইলো। আমার ব্লগে কনটেন্ট WRITING এর জন্য এখানে যোগাযোগ করুন ।

Level 0

আমি mask007। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 5 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 5 টি টিউন ও 32 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

Level 0

Thanks

Level 0

welcome

Thanks……Tobe > Arektu detail likhle valo hoto……
Meta tag e kivabe ‘Meta keyword & Meta description’ likhte hoy janaben please.