Tag Archives: ওয়েবসাইট

এস ই ও - ০০৩ । SEO Details - 003

সার্চ ইঞ্জিন অপটিমাইজেশনঃ ওয়েবসাইট ভেরিফাই করা । SEO – Verifying Web Site

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

রিদওয়ান বিন শামিম

কোন একটি ওয়েবসাইট ডিজাইন ও ডেভলাপ করার পর কীভাবে বোঝা যাবে সব HTML syntax ঠিকভাবে ব্যবহার করা হয়েছে কিনা? কারণ সার্চ ইঞ্জিন গুলো সাধারণত ভুল HTML syntax এর জন্য কোন অভিযোগ করে না। অনেক এসইও এক্সপার্ট বলেন সার্চ ইঞ্জিন অপটিমাইজেশন HTML/XHTML ভেরিফিকেসনের উপর নির্ভর করে না। কিন্তু আমরা আলোচনা করব কী কী কারণে W3C Compliance হতে পারে । কয়েকটি কারণে HTML/XHTML ভেরিফিকেসনের প্রয়োজন হয়।একটি সাইটের মান নির্ভর করে সেটি কীভাবে লেখা হয়েছে তার উপর। সেটিকে syntactically নির্ভুল হতে হবে। সার্চ ইঞ্জিন কোন সাইটের কন্টেন্ট ইনডেক্সে সাজাতে গিয়ে HTML tags সঠিক ভাবে না পেলে কনফিউজড হয়ে যায়, একারনেই অনেক সাইটের ইনডেক্সই ঠিকভাবে সাজানো নয়। অনেক HTML tags থাকলে অনেক সময় তা depreciated হয়ে যায় ও অনেক সার্চ ইঞ্জিন তা পড়তে পারে না।

মূলত HTML Code এর সৌন্দর্য, প্রক্রিয়া করার ধরণই দক্ষ ওয়েব ব্যবহারকারীকে আকৃষ্ট করে। আলোচনা করা যাক W3C Compliance নিয়ে, W3C হল World Wide Web Consortium যা ১৯৯৪ সাল থেকে ওয়েবপেজ ও ওয়েবসাইট গঠন ও সৃষ্টি নিয়ে দিকনির্দেশনা দিয়ে যাচ্ছে। HTML/XHTML Validator ও CSS Validator এর মাধ্যমে W3C থেকে HTML/XHTML ও CSS ফাইল যা ওয়েবে প্রকাশ করা হবে তা ভ্যালিডেটেড করা হয়। ভ্যালিডেটেড করার সময় সঙ্গত কারণে অনেকসময় ভুলও হতে পারে। সব ভ্যালিডেশন XHTML DTD নামক মানদণ্ড প্রকরণ HTML দ্বারা করা হয়। W3C Compliance এর নিয়ম গুলো হল, XHTML declaration statements এর মাধ্যমে প্রতিটি XHTML পেজ শুরু করতে হয়,

<DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
  • প্রতিটা ট্যাগ বন্ধ হতে হয়। হেড ও বডি ট্যাগ বাধ্যতামূলক, এম্পটি ট্যাগে terminating slash ব্যবহার করতে হয়, এম্পটি ট্যাগে ইন্ড ট্যাগ ব্যবহার করতে হয় না, যেমন
<BR> is now <br />.
<HR> is now <hr />.
<IMG SRC="--"> is now <img src="--" />
  • এখন সব ট্যাগ লোয়ার কেস হবে, তবে attributes এর ক্ষেত্রে নয় কেবল ট্যাগের ক্ষেত্রে। যেমন, XHTML DTD তে নিচের উদাহরণ গুলোঃ
<FONT color="#ffffcc"> is invalid
<font color="#ffffcc"> is valid
<font color="#FFFFCC"> is also valid
  • attribute values কে double quotes এর মধ্যে রাখতে হয়।
  • ট্যাগ নেস্টেড হওয়ার দরকার নেই,
<b><i>Text</b></i> This is invalid
<b><i>Text</i></b> This is valid

  • <pre> ট্যাগ img, object, big, small, sub, বা sup.ইত্যাদি ধারন করে না,
  • একটি <form> ট্যাগ অন্য একটি <form> ট্যাগের মধ্যে থাকতে পারে না।
  • কোডের  মধ্যে & থাকলে &amp; কোড ব্যবহার করতে হয়,
  • যে কোন সিএসএস কোড থাকলে তা লোয়ার কেস হবে।
বুটস্ট্র্যাপ ৩ টিউটোরিয়াল (Bootstrap 3 Tutorial)

Bootstrap Case: আমার প্রথম বুটস্ট্র্যাপ ওয়েবসাইট (My First Bootstrap Website)

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

অনুবাদ করেছেন Abu Jubair Mahin

 

স্ক্র্যাচ থেকে একটি বুটস্ট্র্যাপ ওয়েব পৃষ্ঠা তৈরি করুন

নিচের পৃষ্ঠায় Scratch (স্ক্র্যাচ) থেকে একটি বুটস্ট্র্যাপ ওয়েবসাইট কিভাবে নির্মাণ করা হয় সেটা প্রদর্শন করা হবে

আমরা একটি সহজ HTML পৃষ্ঠা দিয়ে শুরু করব, এবং পরে আমরা অনেক বেশি বেশি components সেখানে যোগ করব,
যতক্ষণ না আমরা একটি সম্পূর্ণরূপে কার্যকরী এবং প্রতিক্রিয়াশীল ওয়েবসাইট পাব ।

আমরা নিম্নলিখিত HTML পৃষ্ঠা দিয়ে শুরু করব:

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>Bootstrap Case</title>
 <meta charset="utf-8">
 </head>
<body>
     <h1>My first Bootstrap website!</h1>
     <p>This page will grow as we add more and more components from Bootstrap...</p>
     <p>This is a paragraph.</p>
     <p>This is another paragraph.</p>
     <p>This is a paragraph.</p>
     <p>This is another paragraph.</p>
 </body>
 </html>

 

 

Bootstrap CDN যোগ এবং Containers এর ভিতরে বিভিন্ন উপাদান যুক্ত করা

আমাদের প্রথম কাজ হল Bootstrap CDN যুক্ত করা এবং jQuery তে একটি লিঙ্ক যুক্ত করা

পরবর্তীতে আমরা <body> এর ভিতর সকল HTML উপাদানগুলো যোগ করব এবং এর ভিতরে <div class="container"> ও থাকবেঃ

উদাহরনঃ

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>Bootstrap Case</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 </head>
 <body>
 <div class="container">
      <h1>My first Bootstrap website!</h1>
      <p>This page will grow as we add more and more components from Bootstrap...</p>
      <p>This is another paragraph.</p>
      <p>This is a paragraph.</p>
      <p>This is another paragraph.</p>
 </div>
 </body>
 </html>

 

 

টিপস: সম্পূর্ণ স্কিনটা পেইজ দিয়ে Fill করতে চাইলে .container কে পরিবর্তন করে .container-fluid লিখুনঃ

উদাহরনঃ

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>Bootstrap Case</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 </head>
 <body>
<div class="container-fluid">
     <h1>My first Bootstrap website!</h1>
     <p>This page will grow as we add more and more components from Bootstrap...</p>
     <p>This is another paragraph.</p>
     <p>This is a paragraph.</p>
     <p>This is another paragraph.</p>
 </div>
 </body>
 </html>

 

ধন্যবাদ , আশা করি বুঝতে পেরেছেন।