know yourselves. information, computer, 7 wonders, various.

Saturday, February 15, 2020

HTML Part 002



HTML Versions
Web এর জগতে HTMLএর অনেকগুলি ভার্সন রয়েছে। প্রায়ই শুনে থাকবেন HTML, XHTML, XML, CSS, XSLT ইত্যাদি। অনেকে না জেনে না বুঝেই বলে থাকেন XHTML এসে গ্যাছে এখন আর HTML শেখার দরকার নাই। অনেকে আবার বলে থাকেন XML চলে এসেছে HTML দরকার নাই, এজন্য HTML এর ভার্সন সংক্রামত্ম ধারণা থাকতে হবে। Web এর ক্ষেত্রে বর্তমানে অধিক ব্যবহৃত হচ্ছে HTML-5 CSS-3 এ ব্যাপারে আমরা বিসত্মারিত আলোচনা করবো। আপাতত HTML ভার্সন জানার জন্য নিচের টেবিলটি লক্ষ্য করুন। তবে XML বিষয়টি সম্পূর্ণ আলাদা এটি কোন Data প্রদর্শন করতে পারে না। এটি ডাটা সংরক্ষণ এবং পরিবহনের কাজ করে থাকে। এটির Extention নাম হবে XML। তবে এতে Data সংরক্ষণ করে পরে HTML এ কল করে প্রদর্শন করা হয়।
Version
Year
HTML
1991
HTML+
1993
HTML 2.0
1995
HTML 3.2
1997
HTML 4.01/XHTML 1.0
1999
XHTML 1.0
2000
HTML5
2012
XHTML5
coming
এই বইয়ের কোডিং এর ভার্সন
এই বইয়ের কোডিংগুলি মূলতঃ HTML 5 এর উপর নির্ভর করে লেখা। তবে অনেক Element HTML 1, HTML 2 এবং HTML 3-2 তে সাপোর্ট করবে। যেগুলি করবে না সেগুলির জন্য আলাদা Note দেওয়া আছে। HTML 5 HTML 4 এর (XHTML 1) এর কোডিং মূলতঃ কাছাকাছি সামান্য কিছু পরিবর্তন আছে। সেগুলি Note দেওয়া আছে। আর HTML 5 এ যে বিষয়গুলি নতুন সংযোজন করা হয়েছে এখানে সেগুলি আলোচনা করা হয়েছে।
তবে প্রশ্ন হচ্ছে HTML 5 এর উপর সরাসরি লিখলেই চলতো। কিন্তু আমার মনে হয় সমসত্ম ভার্সন সম্বন্ধে জানার প্রয়োজন আছে। বিভিন্ন Freelancing সাইটে Outsourcing এর জন্য এ রকম অনেক কাজ পাওয়া যায়, যেমন: ইউজাররা তাদের পুরাতন সাইটকে আপগ্রেড করতে বলেন। এক্ষেত্রে পুরাতন কোড সম্বন্ধে ধারণা থাকার দরকার আছে। আবার অনেকে বলে থাকেন আমার সাইটটি IE 10 এ সাপোর্ট করে কিন্তু IE 7, 8, 9 এ সাপোর্ট করে না, আপগ্রেড করতে হবে। এক্ষেত্রে এবিষয়ে ধারনা থাকার দরকার আছে। ভবিষ্যতে যারা Web কে প্রফেশন করতে চান তারা অবশ্যই নতুন ভার্সনে  (HTML 5) কোডিং করবেন। তবে পুরাতন কোডিং সম্বন্ধে ধারনা রাখবেন।
HTML 5 এর সমসত্ম বিষয় জানার জন্য ASP, JavaScript PHP’র সম্বন্ধে ধারণা থাকার দরকার আছে। এজন্য আমাদের প্রকাশিত HTML 5, CSS3, Xhtml, XML, PSD to HTML বইটি সংগ্রহ করে নিন।

Html Structure
HTML ট্যাগ ব্যবহার করে প্রোগ্রাম লেখা হয়। প্রতিটি ট্যাগ শুরু হয় একটি <(Less than) চিহ্ন এবং >(Grater than) চিহ্ন দিয়ে। এই দুইটি চিহ্ন < > দিয়ে ট্যাগ শুরু হয় এবং এই দুইটি চিহ্নসহ প্রথম চিহ্নের সাথে একটি ব্যাক স্লাস (/) চিহ্ন দিয়ে ট্যাগ শেষ করা হয়, যেমন </>
সর্ম্পুন একটি ট্যাগ যেমন :   <html>………</html>
প্রতিটি HTML ফাইল <html> ট্যাগ দিয়ে শুরু করাটা এবং </html> ট্যাগ দিয়ে শেষ করা বাধ্যতামূলক। html ট্যাগের মধ্যে আবার head এবং body সেকশন থাকে।

 সুতরাং HTML ফাইলের  Structure হবে নিম্নরুপ:

<html>

<head>
.......................              Head section
</head>
    html
<body>
.....................................Body section
</body

</html>
চলুন এখন আমরা আমাদের প্রথম html প্রোগ্রামটি হাতে কলমে লিখে html শিখবো। এজন্য প্রথমে Text Editor খুলে কোড টাইপ করতে হবে। আমরা এডিটর হিসাবে Notepad ব্যবহার করবো। ফাইলটি তৈরি হবার পর Internet Explorer/Mozila Firefox বা যেকোন ব্রাউজার ব্যবহার করে করে ফাইলটি খুলবো। html এর এই অংশটি  ব্যবহারের জন্য যে কোন ড্রাইভে নির্দিষ্ট নাম দিয়ে একটি ফোল্ডার খুলে নিয়ে সমস্ত ফাইল সেই ফোল্ডারে রাখুন। প্রয়োজনে কোন অডিও, ভিডিও, ইমেজ বা এনিমেশন ফাইল দরকার হলে সেটিকেও একই ফোল্ডারে রাখুন। এতে প্রথম দিকে প্রোগ্রমিং শিখতে সুবিধা হবে। নতুবা Path বা URL টাইপ করার সময় ভুল হতে পারে। মনে রাখবেন, ট্যাগ ছোট হাত বা বড় হাত যে কোন অক্ষর লিখতে পারেন। তবে ছোট হাতের লেখাই উচিত।
আমরা D:ড্রাইভে Nova_Html নামে একটি ফোল্ডার খুলে নিয়েছি। পরে সমস্ত বিষয়ে বিসাতরিত জানা যাবে-চলুন প্রথমে একটি সাধারণ পেজ তৈরী করে ফলাফল দেখে আসি.......


চলুন শুরু করা যাক
1.     ডেক্সটপ থেকে Start>All Programs>Accessorizes>Notepad কমান্ড দিন।



2.    Notepad খুলে যাবে এবং কোড লেখার জন্য কার্সর অবস্থান করবে। নিম্নোক্ত কোডিং লিখুন।

৩.        এখন File>Save কমান্ড দিন।

3.    ডায়ালগ বক্স আসবে। ফাইলটি Program001 বা যে কোন নাম দিন এবং ডট (.) দিয়ে .html/htm Extention নাম দিন। ফাইলের সর্ম্পুন নামটি হবে Program001.html/Program001.htm  ( আগেই নির্দিষ্ট ফোল্ডার সিলেক্ট করে রাখুন)।  শেষে ফাইলটি Save করুন। 

এখন আমরা একটি ব্রাউজার দ্বারা ফাইলটি অর্থ্যা HTML ডকোমেন্টটি বা ওয়েব পেজটি খুলে দেখবো। নির্দিষ্ট ফোল্ডরে রাখা ফাইলটির উপর ডাবল কিক্ল করলে ডিফল্ড ব্রাউজার দ্বারা খুলে যাবে। উইন্ডোজের সাথে সাধারনত ডিফল্ট ব্রাউজার হিসাবে Internet Exploer থাকে। কাজেই ডাবল ক্লিক করলে Internet Explorer দ্বারা ফাইলটি খুলে যাবে। একাধিক ব্রাউজার থাকলে ফাইলটির উপর Right ক্লিক করলে মেনু আসবে, এখান থেকে Open With সিলেক্ট করলে একাধিক ব্রাউজার লিষ্ট আসবে। লিষ্ট থেকে যেটি সিলেক্ট করবেন সেই ব্রাউজারে  ফাইলটি খুলবে।

4.   এখন ফাইলটির উপর ডাবল ক্লিক বা  Right করুন। Internet  Explorer  বা অন্য কোন ব্রাউজারে ফাইলটি খুলে যাবে। আপনার তৈরী করা প্রথম ওয়েব পেজটি দেখা যাবে।

কোডিং এর ব্যাখ্যা
কোডিং-এ লক্ষ্য করুন 

প্রথমে <html> দিয়ে ট্যাগ শুরু হয়েছে এবং </html> চিহ্ন দিয়ে ট্যাগ শেষ হয়েছে। html ট্যাগের মধ্যে আবার head এবং body নামে দুইটি ট্যাগ রয়েছে। <head> ট্যাগের মধ্যে Program 1 লেখা আছে। সাধারনত head অংশে ডকোমেন্ট সংক্রান্ত বিভিন্ন ইনফরমেশন দেওয়া থাকে। এর মধ্যে Auther এর নাম, তারিখ, টাইটেল ইত্যাদি বিভিন্ন ধরনের ইনফরমেশন দেওয়া যায়। ট্যাগটি যথারীতি </head> চিহ্ন দিয়ে শেষ করা হয়েছে।
ফলাফলঃ ব্রাউজারের প্রথম লাইনে Program 1 লেখা এসেছে।

দ্বিতীয় ট্যাগটি body ট্যাগ। এই ট্যাগের মধ্যে যে টেক্সট লেখা হয় ব্রাউজার হুবুহু সেটি দেখাবে। এই ট্যাগের মধ্যে লেখা আছে। I am Bappi Ashraf . This is Nova System.
ফলাফল:  ব্রাউজারে প্রথম লাইনে Program 1 লেখার সাথে I am Bappi Ashraf. This is Nova System. লেখা ভেসে উঠেছে।



Previous Post                                                                                           Next Post

  বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।

Book Name: Mastering Microsoft  Word
Writer: Bappi Ashraf
Published By: Gyankosh Prokashani
Amount of Pages: 464
First Publish: October-2004
Last Edition: We've February-2015 edition. Future edition may be existed!
Book Price: BDT 350 (30% Discount)
 The writer of this book has told that he has written this book with the concept of "teach yourself". On the other hand, Web Design is a thing which is interesting to learn. He has also told that the book is full of fan and enjoyment so that a person can learn Web Design by himself by playing with the example projects of this book.  Book's CD Link below... 

 cd

RELATED POST LINKS BELOW ********************************************



HTML Part 003




ব্রাউজারে কোডিং দেখা
ব্রাউজারে থাকা অবস্থায় HTML কোডিং দেখা সম্ভব। 

ফাইলটি খোলা থাকা অবস্থায় উইন্ডোতে Right কিক্ল করুন এবং মেনু আসলে View Source বা View Page Source সিলেক্ট করুন। 
বর্তমান প্রোগ্রামের কোড দেখা যাবে আলাদা উইন্ডোতে। দেখা শেষে ক্রস( X) বাটনে কিক্ল করে  উইন্ডোটি বন্ধ করুন।
HTML Tag
আগেই বলেছি HTML ফাইল তৈরী হয় Tag এর সমন্বয়ে। কিছু কিছু ট্যাগের সাথে আবার Attributes থাকে। যেমন কোন টেক্সটকে Bold করতে হলে HTML এ সংকেত হিসাবে b লিখতে হয় এবং b ছাড়া অন্য কোন অক্ষর লিখলে HTML সেটি বুঝতে পারবে না এবং টেক্সটকে Bold করবে না। নিয়ম অনুসারে  Grater than এবং Less than সিম্বলের মধ্যে লিখতে হবে। যেমন:
<b>NOVA COMPUTER</b>
এই জাতীয় ট্যাগকে বলা হয় Container Tag আরও এক ধরনের ট্যাগ আছে। এগুলিকে Empty Tag বলে সাধরনত লাইন ব্রেক, Horizontal rule ইত্যাদি ক্ষেত্রে Empty ট্যাগ ব্যবহার করা হয়। এই জাতীয় ট্যাগ শেষ করার দরকার হয় না। যেমন: লাইন ব্রেক-  

এখানে
দ্বারা ব্রেক বা পরবর্তী লাইনে যাওয়ার নির্দেশ দেওয়া হয়েছে এবং এই ট্যাগটি শেষ করার দরকার পরেনি।
Attribute
ট্যাগ সম্বন্ধে আগেই বলেছি। Attribute দ্বারা এই ট্যাগকে আরও সুনির্দিষ্ট ভাবে নির্ধারন করে দেওয়া যায়। যেমন

ট্যাগ দ্বারা Horizontal লাইন নির্দেশ করে দেওয়া যায়। এক লাইনকে আবার নির্দিষ্ট Alignএ অর্থাৎ বাম, ডান, সেন্টার ইত্যাদি নির্দিষ্ট করে দেওয়া যায়। এক্ষেত্রে Align নামের Attribute ব্যবহার করা হয়। যেমন:


এছাড়াও প্রোগ্রামের মধ্যে কোন মন্তব্য লিখতে চাইলে ট্যাগের চিহ্নের সাথে বিস্ময়বোধক চিহ্ন (!) এবং ২টি ড্যাস (--)ব্যবহার করতে হয়। যেমন:



HTML Elements
Tag সম্বন্ধে  আগেই জেনেছি। Start Tag এবং End Tag দুটি মিলে যে জোড়া হয় সেটিই হচ্ছে Elements এবং এই দুইটি ট্যাগের মধ্যে যে উপাদান থাকে Content হচ্ছে সেগুলি। Start Tag কে Opening Tag এবং End Tag কে Clossing Tag ও বলা হয়। অধিকাংশ এলিমেন্টেই   Attribates যোগ করে দেওয়া হয়। নিচে আরেকটি  Attribates এর উদাহরন দেওয়া হল। আগের উদাহরনের দ্বারা আমরা জেনেছি HTML- এর Elements এর মধ্যে Attributs যোগ হয়। Elements সব সময় Start বা Opening ট্যাগের মধ্যে বসে। Attributs হতে পরে Name (Text) বা Value দ্বারা গঠিত। HTML Link যোগ করার জন্য <a> Tag ব্যবহার করা হয়  এবং এটি href নামের Attributs দ্বারা লেখা হয় । href অর্থ Hyper Reference এছাড়া Attributs সব সময় ডাবল কোটেশন চিহ্নের (" ") মাঝে বসে। সিঙ্গেল কোটেশন চিহ্ন দিয়েও লেখা যাবে। মনে রাখবেন Attributs Name এবং Value সবসয়ম Case Sensitive, ছোট হাতের বদলে বড় হাত বা বড়/ছোট হাত মিশিয়ে লিখলে হবে না । সুতরাং W3C – World Wide Web Consortium সবসময় Attribules কে ছোট হাতে লেখার উপদেশ দিয়ে থাকে । এছাড়া HTML- 4  এবং  XHTML- 4  এ ছোট হাতেরটি গ্রহন যোগ্য হয়। নিচের কোডিং লক্ষ্য করুন।
<a herf = "http://www. novacomputerbd.com"> Our Page Link </a>
এখন চলুন নিচের কয়েকটি প্রোগ্রাম দ্বারা সহজ কিছু Element শিখে নেওয়া যাক। এ বিষয়ে বিস্তারিত আলোচনা পরে  পাবেন। আর একটি  কথা Tag গুলি Lower Case এ লিখুন । সমস্ত কোডিংই  Lower Case এ লেখা উচিত।


HTML  Extension Name
আরেকটি গুরুত্বপূর্ণ বিষয় হচ্ছে সেভ করার সময় ফাইলের Extention (ডট দিয়ে দিতে হয় ) Name কি দিবেন । বলা হয় .htm বা .html যেকোন একটি দিলেই হয়। আগে সাধারনত ফাইলের Extention Name হতো ৩ অক্ষরের সেজন্য অনেকে .htm ব্যবহার করেন। কিন্তু এখন নতুন নতুন ব্রাউজার ও সফটওয়্যার অনেক আপগ্রেটড সেজন্য .html ব্যবহার করাই উচিত হবে।




Previous Post                                                                                           Next Post

  বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।

Book Name: Mastering Microsoft  Word
Writer: Bappi Ashraf
Published By: Gyankosh Prokashani
Amount of Pages: 464
First Publish: October-2004
Last Edition: We've February-2015 edition. Future edition may be existed!
Book Price: BDT 350 (30% Discount)
 The writer of this book has told that he has written this book with the concept of "teach yourself". On the other hand, Web Design is a thing which is interesting to learn. He has also told that the book is full of fan and enjoyment so that a person can learn Web Design by himself by playing with the example projects of this book.  Book's CD Link below... 

 cd

RELATED POST LINKS BELOW ********************************************