«

»

আসুন শিখি HTM L ধারাবাহিক পর্বের (২য়পর্ব):

বন্ধুরা আপনারা যে সত্যি-ই মহান, তার প্রমান সবাই আবারো জানতে পারবে, এটাই আমার বিশ্বাস , ! আমি আপনাদের নিকট ক্ষমা প্রার্থি এত দেরীতে দ্বিতীয় ধারাবাহিক টি পোষ্ট করার জন্য।

আপনাদের মহানুভবতা কে শীরে ধারন করে HTML গল্পে মেতে উঠি…।তার আগে একটু প্রথম HTML টুইট থেকে চোখ বুলিয়ে আসি! !

Welcome to facebook এমন শিরোনাম দেখে নিশ্চয় এখন আর আমরা অবাক হইনা? হব কিভাবে হতাশার দরজায় কড়া নাড়ার আগেই তো ,

<h1>welcome to facebook</h1>

…………………………………

<h2>…………….</h2> কি সব এসে হাজির হয় চোখের সাম্‌নে। আসুন এই “কি সব” গুলো নিয়ে আরেকটু ঘাটাঘাটি করি।

HTML lines :

আমরা বিভিন্ন ওয়েব পেজ এ প্রায় সময়-ই দেখি হরিজন্টালি দাগ দেয়া, বিভিন্ন উদ্দেশে এটি ব্যাবহার করা হয়।

এই উদ্দেশ্য সাধন করবো আমরা <hr/> এই ট্যাগ টি দ্বারা। প্রশ্ন জাগিলো মনে, backslash কেন এইখানে?

মুলত এটি প্যারাগ্রাফ এর মাঝে সেপারেটর হিসেবে ব্যাবহ্রিত হয়, তাই start tag-এই একে close করতে হয়।

উদাহ্‌রনঃ

<p>I am going to give a line</p>
<hr />
<p>wow! I can</p>
<hr />
<p>hey I am going to be an expert</p>

এবার নিজে চেষ্টা করুন!

HTML  COMMENTS:

Html কোডকে পড়ার উপযোগী কিংবা ভালোভাবে বোঝার ক্ষেত্রে html এ-ও কমেন্ট ইউজ করা হয়।কিন্তু কমেন্ট ব্রাউজার দ্বারা ignore করা হয়। অর্থাথ ওয়েব পেজ কমেন্ট প্রদর্শন করেনা।

<!—this is a comment–>

HTML LINE BREAK:

ব্রাউজার নিজ থেকেই একটি খালি লাইন যোগ করে কোন প্যারাগ্রাফ শুরু কিংবা শেষে।কিন্তু আমরা যদি একটি প্যারাগ্রাফ শেষ করার পূর্বেই একটি লাইন ব্রেক দিতে চাই সেক্ষেত্রে HTML আমাদের কে দিচ্ছে এই ট্যাগটি… “<br/>” এটি একটি এম্পটি এলিমেন্ট ট্যাগ তাই এর জন্য end tag এর প্রয়োজন হয়না তবে in XHTML, XML, AND FUTURE VERSION of HTML     END ট্যাগ ছাড়া কোন ট্যাগ –ই allowed হবেনা। তাই বন্ধুরা আমরা এখন থেকেই ঝামেলা এড়িয়ে চলি অর্থাৎ empty element tag গুলোতে বেক্‌স্লাস ব্যাবহার করবো।

উদাহ্‌রন :

<p>This is<br />a para<br />graph with line breaks</p>

একবার চেষ্টা করে দেখুন!..

এখন আমরা একটা অসাধ্যকে সাধন করিব……..একটি ওয়েব পেজের অসংখ্য স্থানে আমরা প্রায় সময় দেখি বিভিন্ন লিঙ্ক দেয়া থাকে। যাতে একটা ক্লিক করেই আমরা অন্য একটা পেজে অনুপ্রবেশ করতে পারি…এই কাজটাও HTML দিয়ে করা হয়। চলুন দেখি তাহার বদন খানি…

এটাকে <a> এই ট্যাগ দ্বারা define করা হয়। তবে এক্ষেত্রে href নামক একজন নিরলশ নিয়ামক তথা attribute কাজ করেন যিনি লিঙ্ক address টিকে specify করেন।

<a> এই ট্যাগ টিরও end tag ব্যাবহার করা হয়। পুরো কাহিনী টা হচ্ছেঃ

<a href=”url“>Link text</a>

এই url এর স্থানেই আমাদের লিঙ্ক আড্রেস্‌টা যাবে।

<a href=”http:// www.facebook.com/home.php#!/profile.php?id=100001160701861/”>mehedi seu</a>

এবং link text এর স্থানে আমরা প্রদত্ত লিঙ্ক টির শিরোনাম লিখ্‌বো।

HTML link target attrivute:

আমাদের দেয়া লিঙ্ক টি কোথায় ওপেন হবে অর্থাৎ ব্রাউজার এর কোন উইন্ডো তে, সেটাকে নির্দিষ্ট করার জন্য আমরা টার্গেট আট্রিবিউট ব্যাবহার করি। যেমন নতুন উইন্ডোতে ওপেন করতে হলে,লিখতে হবে “target=”_blank”    ।

উদাহ্‌রনঃ

<a href=”http:// www.facebook.com/home.php#!/profile.php?id=100001160701861/” target=”_blank”>Visit W3Schools!</a>

এবার চেষ্টা করুন>>

এই মূহুর্তে আমার আবারো আপনাদের ক্ষমার প্রয়োজন হচ্ছে। কারন আজকে আর আমি আপনাদের সাথে এই আন্তরিক আড্ডায় থাকতে পারছিনা। ইন্‌শাল্লাহ শীগ্রই আমরা আবারো একত্রিত হব।

একবার দেখি পিছু ফিরেঃ

  • <html>…….</html>  : ওয়েব পেজের সকল কর্মকান্ড এই ট্যাগ এর মধ্যে সীমাবদ্ধ রাখবো।
  • <h>……..</h>     : দিতে ভুলবোনা যখন প্রয়োজন হবে headings এর।
  • <b>………</b>    : এটি আমাদের সুপরিচিত বডি ট্যাগ।
  • <p>………</p>    : এই ট্যাগ দিয়ে প্যারাগ্রাফ লিখবো ।
  • <!–>                   : এই ট্যাগ টি html code কে ভালোভাবে বোঝার জন্য ব্যাবহার করা হয়।এবং এটি ব্রাঊজারে প্রদ্ররশিত হয়না।
  • <a>……..</a>     : অন্য কোন ওয়েব পেজের লিঙ্ক দিতে চাইলে এই ট্যাগটি ব্যাবহার করবো।
  • <br/>                 : এই ট্যাগটি ব্যাবহার করে আমরা কোন প্যারাগ্রাফ শেষ করার পূর্বেই লাইন ব্রেক দিতে পারবো। এটি এক্টি এম্পটি এলিমেন্ট ট্যাগ আর তাই এর জন্য আলাদা কোন end tag নেই। start tag এর মধ্যেই একটি backslas ব্যাবহার করে এর মৃত্যু ঘোষনা করবো।
  • <hr/>                 : দুটি প্যারাগ্রাফ এর মাঝে একটি horizontal line দেয়ার প্রয়োজন হলে অবশ্যই নির্ধিদায় আমরা এই ট্যাগ টি ব্যাবহার করবো।

একটি সামান্য TIP: :

প্রতিদিন-ই আমরা বহু ওয়েব পেজ ব্রাউজ করি,কিন্তু একবারো কি ভেবে দেখেছি এই পেজটির HTML source টা কি? ইস্‌স্‌ যদি দেখতে পেতাম !!! আরি সম্বব তো, এইযে এইভাবে…

যেকোন ওয়েব পেজ ওপেন করে right click করে তারপর view source কিংবা view page source এ ক্লিকালেই আমরা দেখতে পাবো ঐ পেজটির HTML CODES ।

[ওয়েব ব্রাউজার নিজ থেকেই একটি খালি লাইন যুক্ত করে একটি প্যারাগ্রাফ এর শুরু কিংবা শেষে]

সবাই খুব ভালো থাকবেন। আবারো দেখা হবে এইসব হাবিযাবি কিন্তু খুব-ই দরকারী বিষয় গুলো নিয়ে সম্পূর্ণ ঘরোয়া আলোচনায়।

খোদা হাফেয ।

Mehedi44rudro@gmail.com


এ সম্পর্কিত আরো কিছু টুইট:

PDF Search Engine- প্রয়জনীয় PDF বই গুলো বের করে নিন
কোন ধরনের সফটওয়ার ছাড়াই কারা কারা আপনার ফেইসবুক প্রোফাইল ভিউ করেছে তাদেরকে দেখে ফেলুন।
Facebook এর পাসওয়ার্ড ভূলে গেছেন, নো চিন্তা
এশিয়ান গেমস ফুটবল "বাংলাদেশ" বনাম "উজবেকিস্থান" (অনলাইনে সরাসরি বিকাল ৫টা, কোন ট...
এবার ঘুমিয়ে ঘুমিয়ে ফুল অটোস্ক্রিপ্টের সাহায্যে প্রতিদিন আয় করুন 5$-- Make Money By
২০১৫ সালের জনপ্রিয় সেরা ৩ টি ওয়াটার প্রুফ স্মার্টফোন
ডাটা এন্ট্রি দিয়ে শুরু করুন অনলাইনে আয় - (নতুনদের জন্য)

মন্তব্য দিনঃ

comments

About the author

Mehedi

বিজ্ঞানের এই জগৎটা একটা নিরন্তর পুনবর্ণর্নার, পুনঃআবিষ্কারের জগৎ । যিনি যত নিষ্ঠার সাথে বয়ান করে যাবেন, তাঁর তত বেশি আবেদন। আমরা যারা ক্ষুদ্রের কাছেও ক্ষুদ্র তাদের মজাটাও যে বয়ানে, যে বয়ান যত নিবিষ্ট, যত বাস্তব, তত তার জীবনের সমান্তরাল হয়ে ওঠা। বিজ্ঞান জীবনের বিকল্প নয়, জীবনের বিকল্প আসলে কিছু হতে পারেনা।

Permanent link to this article: http://techtweets.com.bd/web-internet/bright-space/1453

5 comments

Skip to comment form

  1. রুবেল অরিয়ন

    যাক,
    আপনার কাছ থেকে অবশেষে ২য় পর্ব পেলাম।
    পরেরটা আশা করি দ্রুত দিবেন!

    1. bright space

      ধন্যবাদ সাথে থাকার জন্য

  2. আউয়াল

    এইসাইটে জাকির ভাই দেখি html নিয়ে ধারাহিক টিউন করে।এখন আবার দেখি উনি করতেছে তাহলে আমরা যারা শিখতে আগ্রহি আমাদেরকে কোনটা ফলো করতে হবে।

    1. ঐ ছেলেটি
      jakir

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

  3. আউয়াল

    ওকে bright space চালিয়ে যান (উনি বেসিকটা ভালো করে লিখবে) আপনার টুইটগুলি ও ফলো করার চেষ্টা করবো।

মন্তব্য করুন