Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Monday, August 15, 2022

এইচটিএমএল এলিমেন্ট কাকে বলে?

এইচটিএমএল এলিমেন্ট কাকে বলে?

এইচটিএমএল Elements বলতে এইচটিএমএল এর উপাদান সমুহ বুঝানো হয়ে থাকে। একটি ওপেনিং <> ট্যাগ আর ক্লোজিং </> ট্যাগ নিয়ে গঠিত হয় একটি এইচটিএমএল এলিমেন্ট। এবং ট্যাগের ভিতরের কন্টেন্ট সহ সব কিছুকেই এলিমেন্ট বলা হয়। যেমন <h1>...</h1> অথবা <p>...</p> ইত্যাদী সবই হচ্ছে এইচটিএমএল এলিমেন্ট। এভাবে <head>...</head> <body>...</body> এর মাঝে ট্যাগ, এট্রিবিউট সহ যা কিছু আসে সব কিছুকেই এক সংগে এইচটিএমএল এলিমেন্ট বলা হয়।

যেমনঃ- একটি বাড়িতে ব্যবহার যগ্য যা কিছু থাকে ধরুন চেয়ার, টেবিল, আলমারী, ড্রেসিং টেবিল, ডাইনিং টেবিল, সোফা সেট ইত্যাদী সবই হচ্ছে সেই বাড়ির এলিমেন্ট। আবার সেই বাড়িতে যদি একটি ডাইনিং টেবিল থাকে তাহলে টেবিলটির কাঠ পেরেক রঙ ইত্যাদী হচ্ছে সেই টেবিলের এলিমেন্ট। একটি শো-কেস থাকলে সেই শো-কেসের ভিতরে বাহিরে যা আছে অথবা সেই শো-কেসটা যে জিনিস দিয়ে বানানো হয়েছে তার সব কিছুই হচ্ছে সেই শো-কেসের এলিমেন্ট। তেমনি ভাবে এইচটিএমএল ডকুমেন্টে ব্যবহার যগ্য সবই হচ্ছে এইচটিএমএল এলিমেন্ট বা উপাদান। আবার এইচটিএমএল এলিমেন্টের কয়েকটি প্রকারভেদ রয়েছে।


নেস্টেড এলিমেন্ট  প্রতিটি এইচটিএমএল এলিমেন্ট নেস্টেড হতে পারে। অর্থাৎ এলিমেন্টের ভিতরে এলিমেন্ট থাকতে পারে। সাধারণত সকল এইচটিএমএল ডকুমেন্ট নেস্টেড এলিমেন্ট দ্বারা গঠিত হয়। যেমনঃ- <html> <body> <p> </p> </body> </html> ইত্যাদী।

এম্পটি এলিমেন্ট  এইচটিএমএল এর এমন কিছু এলিমেন্ট যা নেস্টেড হতে পারে না। অর্থাৎ এসব এলিমেন্টের মধ্য অন্য কোন চাইল্ড এলিমেন্ট থাকতে পারে না, এমন কন্টেন্টবিহীন এলিমেন্ট গুলোকে এম্পটি এলিমেন্ট বলা হয়। এম্পটি এলিমেন্ট গুলোর ক্লোজিং ট্যাগ হয় না। 

নিচে দেখানো সবকিছুই এইচটিএমএল এলিমেন্টঃ-


<!DOCTYPE html>

<html>

<head>

  <title>Page Title</title> 

</head>

<body>     

   <h1>My First Heading</h1>

   <p>My first paragraph.</p>

</body>

</html>

আপনি চাইলে উপরের কোড গুলো কপি করে প্রেক্টিস করতে পারেন😊


Thursday, August 11, 2022

জাভাস্ক্রিপ্ট কোডের মধ্যে এইচটিএমএল কিভাবে লিখে? জাভাস্ক্রিপ্টে এইচটিএমএল কোড লিখার উপায়

জাভাস্ক্রিপ্ট কোডের মধ্যে এইচটিএমএল কিভাবে লিখে? জাভাস্ক্রিপ্টে এইচটিএমএল কোড লিখার উপায়

ইতিমধ্যে আর্টিকেলের মাধ্যমে জাভাস্ক্রিপ্টের ২ টি আর্টিকেল শেষ করেছি। যার মধ্যে একটি ছিলো জাভাস্ক্রিপ্ট কী? এবং অন্যটি ছিলো এইচটিএমএল কোডের মধ্যে জাভাস্ক্রিপ্ট কিভাবে লিখে? ২টা আর্টিকেলেই মোটামুটি ভালো রেস্পন্স পেয়েছি যারা কারনে আমি আমার ফ্রী টাইমে একটি করে সিরিয়াল ভাবে জাভাস্ক্রিপ্ট এর উপর আর্টিকেল লিখবো। আমাদের আজকের এই আর্টিকেলে শেখানো হবে জাভাস্ক্রিপ্ট কোডের মধ্যে কিভাবে এইচটিএমএল কোড লিখা যায়? 

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

জাভাস্ক্রিপ্ট কোডের মধ্যে এইচটিএমএল কিভাবে লিখে?

জাভাস্ক্রিপ্ট কোডের মধ্যে এইচটিএমএল লিখার জন্য প্রধানত একটি মেথড ব্যাবহার করা হয় যা নিম্নে উল্যেখ করা হলো।

<script>
   document.write("এখানে আপনি এইচটিএমএল কোড লিখতে পারেন।"); 
</script>

উপরের কোড যদি লখ্য করেন এখানে <script> ট্যাগের মধ্যে document.write() নামে একটি ম্যাথড ব্যাবহার করা হয়েছে, যার মধ্যে (বন্ধনি) এর মধ্যে দুইটি ডাবল কোটেশন "" ব্যাবহার করা হয়েছে। কোটেশনের মধ্যে আপনি এইচটিএমএল এর যে কোনো কোড লিখলে সেটি রান হয়ে যাবে। 

যেমন নিচে আমি একটি এক্সামপল দিচ্ছি। 

<!DOCTYPE html>
<html>
<body>

<h1>জাভাস্ক্রিপ্টে এইচটিএমএল কোড</h1>
<h2>এই write() ম্যাথড</h2>

<p>documnet এর পরে (.) ডট দিয়ে write() লিখে প্রথম বন্ধনিতে ডাবল কোটেশন " " দিয়ে এইচটিএমএল কোড যা লিখবেন সেটাই আউটপুট হিসেবে পাবেন।</p>

<script>
document.write("<h2>Hello Mr AnTor Ali Vistors!</h2><p>How are you?</p>");
</script>


</body>
</html>

উপরের কোডটি আপনি কপি করে প্র্যাক্টিস করতে পারেন।


Friday, February 18, 2022

এইচটিএমএল পরিচিতি Introduction with HTML

এইচটিএমএল পরিচিতি Introduction with HTML

 এইচটিএমএল HTMLবা Hyper Text Mark-up Language এর সংক্ষিপ্ত রূপ হল এইচটিএমএল যা ওয়ার্ল্ড ওয়াইড উইড ওয়েব (www) ফাইলে ডকুমেন্ট ফরমেট করতে প্রোগ্রামারগণ ব্যাবহার করেন। এটি সত্যিকার অর্থে কোন প্রোগ্রামিং ভাষা নয়। তবে প্রোগ্রামারজ্ঞণ ওয়েব পেইজে টেক্সট, অডিও, ভিডিও, গ্রাফিক্স বা এ্যানিমেশনকে সুন্দরভাবে সাজাতে বা ফরমেট করতে। এই ভাষা ব্যাবহার করেন। এইচটিএমএল ফাইল সাধারণভাবে ওয়েব পেইজ (Web Page) নামে পরিচিত। কার্যকর ভাবে, এইচটিএমএল হল প্লাটফররম স্বনির্ভর সমন্ময়। আরর এই সমন্ময়ের মাধ্যমে World Wide Web ডকুমেন্ট বিভিন্ন ধরনের উপাদান ও উপকরণ ফরমেট করা বা সাজানো যায়। জেনেভায় অবস্থিত CERN এ কাজ করার সময় টিম বার্ণার লী সর্বপ্রথম HTML আবিষ্কার করেন।



HTML ডকুমেন্ট তৈরি ও সংরক্ষন  

যে কোন ধরনের text এডিটর ব্যাবহার করে ওয়েব পেইজের জন্য নিয়ম মাফিক লেখাসমৃদ্ধ HTML ফাইল তৈরি করার যায়। এই ফাইল টেক্সট (Text) বা ASCII নামেও পরিচিত; সুধু ফাইলের এক্সটেনশন পরিবর্তন করে .html বা .htm করা হলে তাই হবে HTML ডকুমেন্ট। 

টেক্সট এডিটর

ইউন্ডোজের নোটপ্যাড, ম্যাকিন্টোশের Simple text বা ইউম্যাক্স মেশিনের Emacs বা VI এডিটর ব্যাবহার করে HTML ডকুমেন্ট তৈরি করা যাবে; তবে সেক্ষেত্রে ডকুমেন্ট সংরক্ষন করার সময় "text only with line breaks" ফরমেট বা Save as HTML অথবা Save as Webpage বেছে নিতে হবে।

উল্যেক্ষ যে, HTML ফাইলের এক্সটেনশন হল .html বা .htm নোট প্যাড বা ওয়ার্ড প্যাডে HTML ফাইল সংরক্ষন করার সময় ফাইলের এই এক্সটেনশন সঠিকভাবে দিতে হয়। অন্যথায় ভুল এক্সটেনশনযুক্ত ফাইল ওয়েব সাইটে আপলোড (Upload) করা হলে তা ঠিকমত কাজ করবে না।

HTML Page Structure 

HTML পেইজের সাধারনত দুইটি প্রধান অংশ থাকে। 
  1. head অংশঃ এই অংশে Title বা শিরোনাম, ধরন, সার্চ ইঞ্জিনের জন্য কী-ওয়ার্ড ও প্রয়োজনীয় কোদ যা ওয়েব পেইজে তথ্য প্রদর্শনের জন্য দরকার তা থাকে।
  2. Body অংশঃ এটি ডকুমেন্টের মূল অংশ যাতে তথ্য প্রদর্শন করার হয়।

HTML Tag

এইচটিএমএল কে ট্যাগের ভাষায় বলা হয় কারণ বিভিন্ন ট্যাগের সমন্বয়ে ডকুমেন্ট তৈরি হয়। প্রতিটি ত্যাগ তার নিজস্ব নাম অনুসরণ করে কৌণিক (<>) ব্রাকেটে শুরু বা ওপেন হয়। এবং একে শুরু ট্যাগ বা ওপেনিং ট্যাগ বলে। ওপেন হওয়া ট্যাগ কৌণিক (</>) ব্রাকেট অনুসরণ করে ট্যাগের নামে শেষ বা বন্ধ করতে হয়। এবং একে শেষ ট্যাগ বা ক্লোজিং ট্যাগ বলে। লক্ষ্যনীয় যে, ট্যাগ বন্ধ করতে '/' চিহ্ন ব্যাবহৃত হয়। যেমন HTML কোড শুরু করার জন্য প্রথমে <HTML> টাইপ করা হয়। ফলে এ অংশ থেকে পেইজটিকে একটি HTML ডকুমেন্ট বা পেইজ হিসেবে ঘোষনা করা হয়। পেইজের শেষে </HTML> টাইপ করে শেষ বা বন্ধ করতে হয়।

নিচে একটি সরল HTML পেইজের কোড দেওয়া হল।

  
উপরের HTML কোডগুলোর নোটপ্যাড বা ওয়ার্ডপ্যাড ব্যাবহার করে .html যুক্ত ফাইলে সংরক্ষন করে যে কোন ব্রাউজার যেমন- ইন্টারনেট এক্সপ্লোরার দ্বারা ওপেন করা হলে নিচের ওয়েব পেইজটি দেখা যাবে।