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

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

Saturday, February 15, 2020

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 ********************************************

HTML Part 004




Title Element এর ব্যবহার
ডকোমেন্ট বা ওয়েব পেজের একটি নির্ধারিত নাম দেয়ার জন্য Title এলিমেন্ট ব্যবহার করা হয়। এটি <head> এলিমেন্টের ভিতরে অবস্থান করে। Title একটি ডকোমেন্টে একটিই হয় এবং ব্রাউজারের সবচেয়ে উপরে নীল রঙের টাইটেল বারে অবস্থান করবে। মনে রাখবেন ডকোন্টের নাম বা টাইটেল ব্যবহারের জন্য সংক্ষিপ্ত টাইটেল ব্যবহার করুন। বড় টাইটেল ব্যবহার করলে একসাথে সর্ম্পুন টাইটেল ব্যবহারে অসুবিধা হতে পারে। Title এলিমেন্টের ফরম্যাট হচ্ছে
                                    ...........................................
আগেই বলেছি HTML লেখার জন্য যে কোন এডিটর ব্যবহার করা যায় যেমন Notepad ++, Adobe Dreamweaver ইত্যাদি। আমরা এই প্রোগ্রাম থেকে Notepad ++  ব্যবহার করবো। এতে লাইন নাম্বার থাকার কারণে আপনার প্রোগ্রামিং বুঝতে সুবিধা হবে। আপনি  Adobe Dreamweaver ব্যবহার করতে পারেন।   Notepad ++  টি নেট থেকে Download করে নিন বা CD থেকে নিয়ে নিন। যদি সমভব হয় আপনার উইন্ডোজের সাথে থাকা  Notepad দিয়েই লিখুন কোন অসুবিধা নাই। আর একটি কথা আপাতত ব্রাউজার হিসাবে  Internet Explorer ব্যাবহার করলেও পরবর্তীতে আমারা সবাধিক  ব্যবহ্যত Mozilla Firefox ব্যবহার করবো। কারন এই ব্রাউজারটি HTML-4, HTML-5, XHTML, CSS, CSS-3  এর সমস্ত র্ফচার প্রদর্শন করতে পারে যদিও Internet Explorer সহ অনান্য ব্রাউজার করতে পারে না।
নতুন কোডিং লেখা
নতুন কোডিং লেখা যেতে পারে ২টি নিয়মে প্রথমত সমস্ত কোডিং শুরু থেকে শেষ পর্যন্ত নতুন করে  লিখুন অথবা ব্রাউজারের (Internet Explorer-IE বা Mozila Forefox তে Source/Page Source টি সিলেক্ট করে কপি করুন এবং এডিটরে (Notepad- বা Notepad++ এ) Paste করুন এবং প্রয়োজনীয় কোড সংযোজন বা বিয়োজন করে File>Save As কমান্ড দিয়ে নতুন নামে ফাইলটি সেভ করুন। এতে নতুন কোডসহ  নতুন ফাইল তৈরী হবে এবং পূর্বেরটি আগের মতই রয়ে যাবে। আবার Notepad++ বা Dreamweaver এ কাজ করলে ফোল্ডার থেকে ফাইলটির উপর Right কিক্ল করুন। মেনু আসলে Edit  With Notepad++/Edit With Dreamweaver সিলেক্ট করে খুলুন এবং প্রয়োজনীয় এডিট শেষে একই নিয়মে File>Save As কমান্ড দিয়ে নাম পাল্টে দিন।



Notepad বা Notepad++ একটি নতুন পেজ নিন। নিম্নোক্ত কোডিং লিখে Program002.html নামে সেভ করুন। টাইটেলটি ব্রাউজারের সবচেয়ে উপরে নীল রঙের টাইটেল বারে অবস্থান করবে।

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




Body Element এর ব্যবহার
<head> এলিমেন্ট শেষ হবার পরপর <body>এলিমেন্ট শুরু হয়। ওয়েব পেজ বা ডকোমেন্টের মুল অংশ এখানে থাকে। এই অংশে টেক্সট ডকোমেন্ট ছাড়াও ইমেজ, অডিও, ভিডিও, এনিমেশন ইত্যাদি লিংক করে রাখা যাবে। এটি একটি Container  টাইপ ট্যাগ হওয়ার কারনে <body> দিয়ে শুরু হবে এবং </body>  দিয়ে এই ট্যাগ শেষ হবে। Font এর বিভিন্ন ধরনের এডিটিং, ব্যাকগ্রা্উন্ডের বিভিন্ন ধরনের পরিবর্তন ইত্যাদি কাজের জন্য এই ট্যাগের মধ্যে আরও অন্যান্য ট্যাগ ব্যবহার করা যাবে। সুতরাং body  ট্যাগের ফরম্যাট হবে
                             ......................


 Notepad বা Notepad++ একটি নতুন পেজ নিন। নিম্নোক্ত কোডিং ট্যাগের জন্য নিম্নোক্ত কোডিং  লিখে Program003.html নামে সেভ করুন।

    এখন ফাইলটির উপর ডাবল ক্লিক বা  Right ক্লিক করে Internet  Explorer  বা অন্য কোন ব্রাউজারে ফাইলটি খুলুন।


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

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 ********************************************