ওয়েব ডিজাইন (পর্ব ১১) HTML হেড, HTML লেআউট

ওয়েব ডিজাইন (পর্ব ১১) HTML হেড, HTML লেআউট
শুক্রবার, ১৪ আগস্ট, ২০২০
আস্‌সালামু আলাইকুম! আশা করি আল্লাহ এর অশেষ রহমতে আপনারা সবাই ভালো আছেন।আমিও আপনাদের দোয়াই ভালো আছি। আজকের নতুন টপিকে আপনাকে স্বাগতম! আজকে আপনাদের দেখাবো HTML হেড, HTML লেআউট।

HTML হেডঃ

HTML Head ওয়েব সাইটের খুব গুরুত্বপূর্ণ একটা বিষয়।এখানে ওয়েব সাইটের প্রায় সকল দরকারি কোড রাখা হয়। <head> ট্যাগ এর ভিতরের কোড গুগল কে ডাটা দিতে দিবে ,আপনার ব্রাউজারকে কোনো নির্দেশনা দিবে।

<head> = হেড ডকুৃমেন্ট গুলোর কোড রাখা হয়।
<title> = ওয়েব পেজ টাইটেল লেখা হয়।
<link> = বিভিন্ন এক্সটার্নাল ডকুমেন্ট এর রিলেশন স্থাপনের জন্য ব্যবহার হয়।
<meta> = মেটা ডাটা এর কোড লেখা হয়।
<script>    = ক্লাইন্ট সাইড জাভা স্ক্রিপ্ট লেখা হয়।
<style>    = ক্লাইন্ট সাইডে সিএসএস লেখা হয়।

<title>টাইটেল ট্যাগঃ

এই টাইটেল ট্যাগ সার্চ ইন্জিন অপটিমাইজেশনের জন্য খুব দরকারি একটা বিষয়।এই ট্যাগের মাধ্যমে আমরা আমাদের পেজের টাইটেল  ব্রাউজারের ট্যাব নেম এ দেখাতে পারি।
 <title>A Meaningful Page Title</title>
    

<link> লিংক ট্যাগঃ

এক্সটার্নাল ফাইল ওয়েব পেজে প্রদর্শনের জন্য এই ট্যাগ ইউজ করা হয়।
<link rel="stylesheet" href="style.css">

<meta> মেটা ট্যাগঃ

মেটা ট্যাগ দিয়ে ক্যারেক্টার সেট, পেজ ডিস্ক্রিপশন , কিওয়ার্ড, অথর তথ্য এবং ভিউ পোর্ট করা যায়।

মেটা ক্যারেক্টার সেটঃ

এই মেটা ইউজ করলে আপনার ওয়েব পেজে যেকোনো ধরণের ভাষা ইউজ করতে পারবেন এবং সব ব্রাউজারে এটা পড়তে পারবে।এইটা ইউজ না করলে আপনাদের পেজ এর বিভিন্ন ভাষা ব্রাউজার সঠিক ভাবে পড়তে নাও পারে।তাই আমি রিকমান্ড করবো এইটা ইউজ করার জন্য।
  <meta charset="UTF-8">
  

ওয়েব পেজ ডিস্ক্রিপশনঃ

ওয়েব পেজের ডিস্ক্রিপশন প্রকাশ করতে এই এই মেটা ট্যাগটি ইউজ করা হয়।
  <meta name="description" content="WikiJana Web design">

 মেটা কিওয়ার্ডঃ

সার্চ ইন্জিনকে আমাদের পেজের তথ্য দেওয়ার জন্য এই মেটা কিওয়ার্ড ইউজ করা হয়।
  
  <meta name="keywords" content="wikijana, webdesign, coding">

অথর ডেটা মেটাঃ

যেকোনো সাইটের মালিক অথবা পরিচালকের নাম এই মেটা এর মাধ্যমে প্রদান করা হয়।
  <meta name="author" content="Samrat Raihan">

অটো রিফ্রেশঃ

আমাদের সাইটে অনেক সময় অটো রিফ্রেশ এর দরকার হয়।যদিও বেশি প্রয়োজন হয়না।
  <meta http-equiv="refresh" content="30">

ভিউ পোর্টঃ

এই কোডটা খুবই গুরুত্বপূর্ণ এইটা না দিলে আপনার ওয়েব পেজ সকল ডিভাইসে সুন্দর ভাবে ভিউ হবেনা।তাই আমি রিকমান্ড করবো এইটা অবশ্যই দিতে।
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

জাভা স্ক্রিপ্টঃ

ক্লাইন্ট সাইড জাভা স্ক্রিপ্ট এর ব্যবহার এই হেড এর মধ্যে করা হয়।আপনি চাইলে এই জাভা স্কিপ্ট body তেও করতে পারবেন। যেমন, <script> জাভাস্ক্রিপ্ট কোড</script>

স্টাইলঃ

হেড এর মধ্যে আপনার ইন্টারনাল সিএসএস লিখতে পারবেন।  <style>  CSS কোড</style>


HTML লেআউটঃ

        <div style = "width:100%">
         <div style = "background-color:#b5dcb3; width:100%">
            <h1>This is Web Page Main title Or LOGO</h1>
         </div>
			
         <div style = "background-color:#aaa; height:200px; width:100px; float:left;">
            <div><b>Main Menu</b></div>
            HTML<br />
            PHP<br />
         </div>
			
         <div style = "background-color:#eee; height:200px; width:700px; float:left;" >
            <p>This is Content Section</p>
         </div>
		
         <div style = "background-color:#aaa; height:200px; width:100px; float:right;">
            <div><b>Right Menu</b></div>
            HTML<br />
            PHP<br />
         </div>
			
         <div style = "background-color:#b5dcb3; clear:both">
            <center>
               Copyright © 2020 WikiJana.com
            </center>
         </div>
      </div>

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






Samrat Raihan

I am a web designer and developer. I regularly work for different companies. I try to write a little on this blog when I have time. If you can learn something from this blog, then I will be successful.