ওয়েব ডিজাইন (পর্ব ০২)HTML কনসেপ্ট কোডিং, কোড সেভিং এন্ড রানিং, ট্যাগ, আট্রিবিউট, এলিমেন্ট,হেডিং, প্যারাগ্রাফ, লিংকিং বিটুইন ২ পেজ

ওয়েব ডিজাইন (পর্ব ০২)HTML কনসেপ্ট কোডিং, কোড সেভিং এন্ড রানিং, ট্যাগ, আট্রিবিউট, এলিমেন্ট,হেডিং, প্যারাগ্রাফ, লিংকিং বিটুইন ২ পেজ
শনিবার, ১১ জুলাই, ২০২০
আস্‌সালামু আলাইকুম! আশা করি আল্লাহ এর অশেষ রহমতে আপনারা সবাই ভালো আছেন।আমিও আপনাদের দোয়াই ভালো আছি। আজকের নতুন ওয়েব ডিজাইন পর্বে আপনাকে স্বাগতম! আজকে আপনাদের দেখাবো HTML কনসেপ্ট কোডিং, কোড সেভেং এন্ড রানিং, ট্যাগ, আট্রিবিউট, এলিমেন্ট,হেডিং, প্যারাগ্রাফ,লিংকিং, বিটুইন ২ পেজ ।

HTML (এইচ টি এম এল) কনসেপ্ট কোডিংঃ

HTML এর পূর্ণ রূপ Hyper Text Markup Language । ওয়েব ডেভেলপার বা ডিজাইনার হতে হলে এই ভাষাটি সবার আগে জানা প্রয়োজন।এইটা কোনো প্রোগ্রামিং ল্যাংগুয়েজ নয় এটা মার্কআপ ল্যাংগুয়েজ।এইটা শিখলেই পেজ তৈরি করতে পারবেন।আর যদি সিএসএস(CSS) শিখেন তবে আপনি সাইট টা সুন্দর ভাবে ডিজাইন করতে পারবেন।আর অন্যান্য কিছু যেমন জাভাস্ক্রিপ্ট, পিএইচপি, ডেটাবেস শিখলে আপনি পূর্ণাঙ্গ ডাটাবেস ভিত্তিক ওয়েব সাইট বানাতে পারবেন।

HTML, XHTML এবং HTML5 কিঃ

আমরা তো HTML চিনলাম কিন্তু আমাদের মনে আবার প্রশ্ন জাগে HTML5 টা আবার কি? 
আমরা তো ভার্সন চিনি ,যেমন আমরা বিভিন্ন এপস এর ভার্সন সম্পর্কে জানি, ঠিক তেমনি HTML যখন তৈরি হয় তখন অনেক সময় ভুল থাকতে পারে এবং পরে আরো ‍কিছু যুক্ত করা প্রয়োজন হয় তখন আপডেট করা হয় এবং ভার্সন চেন্জ  হয়।
তাই কোনো চিন্তা না করে আমরা যদি শুধুু HTML5 শিখি তবেই HTML এর সকল ভার্সন এর ভাষা আমরা শিখে ফেলতে পারবো।
W3C নামের একটা কম্পানি এই HTML তৈরি এবং ম্যানেজম্যান্ট করে থাকে।

HTML শিখতে কি কি লাগবেঃ

আমাদের এই কোডিং লেখার জন্য দরকার হবে যেকোনো নোটপ্যাড।তারপরও আমরা প্রোফেশনাল ভাবে কোডিং করার জন্য ব্যবহার করবো NOTEPAD++ এখানে কোডিং করার অনেক সুবিধা পাবেন।
এখান থেকে ডাউনলোড করুন- CLICK HERE
আর মোবাইল ইউজাররা ইউজ করতে পারেন Easy HTML - HTML, JS, CSS editor & viewer
এবার আপনাদের প্রয়োজন হবে একটি ব্রাউজার যা আপনারা প্রায় ব্যবহার করেন।আমি রিকমান্ড করবো গুগল ক্রোম ইউজ করা জন্য।

কোড সেভিং এন্ড রানিংঃ

আমরা এবার দেখবো কিভাবে আমাদের লেখা কোড কিভাবে সেভ করবো এবং ব্রাউজারে রান করবো।
আপনার ডেস্কটপ থেকে মাউসের রাইট বাটন ক্লিক করে NEW থেকে Text Document নিবেন।
তারপর এমন আসলে আপনি এই পুরো লেখা কেটে দিয়ে আপনি লিখবেন index.html
এবার এন্টার বাটনে চাপ দিন।
এবার Yes করে দিন।
এবার আপনি দেখতে পারবেন আপনার  পিসি এর ডিফল্ট সেট করা ব্রাউজারের লোগো চলে আসছে।
এবার এই ফাইল সিলেক্ট করে মাউসের রাইট বাটন ক্লিক করলে আপনার ইনস্টল করা Notepad ++ এর মেনু দেখতে পারবেন, এবার এটাই ক্লিক করুন।
এবার আপনারা দেখতে পারবেন আমাদের নোটপ্যাড ওপেন হয়ে গেছে।

ট্যাগ(HTML Tag)

আমরা যদি যে কোনো এইচটিএমএল দেখি তাতে ট্যাগ থাকবেই। ট্যাগ গুলো এমন, <html>,<head>,<body>
(<) Less then আর (>) Greater than এর কোনো ওয়ার্ড থাকলেই তা ট্যাগ হিসেবে ধরতে পারি। এই দুই চিন্হ দিয়ে যে ডকুমেন্ট আমরা লেখি তাই HTML ট্যাগ।HTML এর Tag অনেক। যেমন আমরা প্যারাগ্রাফ লিখতে <p></p> ট্যাগ ইউজ করি।

<html>
<head>
<title>HTML Tag tutorial in WikiJana</title>
</head>
<body>
<h1>WikiJana demo heading</h1>
<p>demo content goes here.</p>
</body>
</html>
প্রায় সব ট্যাগ এরই শুরু ট্যাগ আর শেষ ট্যাগ থাকে। যেমন, <html> </html>
শুরু ট্যাগ কে Opening tag আর শেষ ট্যাগকে Closing Tag বলে।Open Tag আর Close tag প্রায় একই তবে ক্লোজ ট্যাগ এ ব্যকস্লাস(/) চিন্হ থাকে।
কিছু ট্যাগ আছে যার ক্লোজ ট্যাগ নাই। যেমন ইনপুট ট্যাগ, ইমেজ ট্যাগ।

  <img src="/path/go/image.jpg" alt="an_image"/>
<input type="submit" value="Save"/>
খেয়াল করুন <img এভাবে শেষ/> এখানে input ট্যাগ টাও একই রকম ক্লোজ করা হয়েছে।
এই গুলো কে বলা যেতে পারে সিঙ্গেল ক্লোজ ট্যাগ।

এট্রিবিউট( Attribute )

HTML এর প্রতিটি এলিমেন্ট ব্রাউজার এক একটা নির্দেশ দেয় যা তার ভিতর থাাকা কনেন্টে কে কিভাবে প্রদর্শন করবে।h1 এলিমেন্ট যখন ব্রাউজারকে বড় ফন্টের শিরোনাম প্রদর্শন করতে বলবে তখন এট্রিবিউট দিয়ে সেই শিরোনামটির রং কি হবে তাও বলে দিতে পারেন। যেমন,

    <h1 style="color:yellow;">HTML Attribute tutorial</h1>
    

Title এট্রিবিউট কোন এলিমেন্টের দিলে এটা দিয়ে টুলটিপ আকারে তথ্য প্রদর্শন করা যায় যেমন,

    <h2 title="Hello WikiJana">Practice in your Life</h2>

এলিমেন্ট ( Element )

Start tag (যেমন <div>) এবং End tag (যেমন </div>)  এর মাঝে যা থাকে তা সহ পুরোটি একটা এলিমেন্ট। একটা এলিমেন্টের ভিতর ট্যাগের মতই এক বা একাধিক এলিমেন্ট থাকতে পারে বা থাকে।

    <!DOCTYPE html>
<html>
<head> </head>
<body>
   <h1>WikiJana demo heading</h1>
   <p>demo content goes here.</p>
</body>
</html>

হেডিং (Heading)

 শিরোনাম বা হেডিং আকারে বড় ফন্টের লেখা ব্রাউজারে প্রদর্শনের জন্য এইচটিএমএল এ রয়েছে ৬ ধরনের হেডিং ট্যাগ। এর মধ্যে সবচেয়ে বড় হচ্ছে <h1></h1> এভাবে <h2></h2>, <h3></h3>
যেমন,


    <!DOCTYPE html>
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

প্যারাগ্রাফ (Paragraphs) 

ওয়েব পেজে কোন লেখা প্রকাশ করতে চাইলে p ট্যাগ ব্যবহার করা হয়। <p> হচ্ছে এর start tag এবং </p> হচ্ছে এর end tag. এই start এবং end ট্যাগের ভিতর যেকোন লেখা দিতে পারেন। এই লেখা প্যারাগ্রাফ আকারে ব্রাউজারে দেখাবে।
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>

লিংকিং বিটুইন ২ পেজ

আমরা যখন ইনডেক্স পেজটা ডিজাইন করি তখন আমাদের প্রয়োজন হয় ওই পেজ থেকে অন্য পেজে যাওয়ার । আমারা যখন ব্রাউজিং করি তখন কিন্তু আমরা এটাই করি , এক এক ক্লিক করে করে ্র্রব্রাউজিং করেই যায়।এই লিংকিং করার জন্য আমাদের প্রয়োজন সাধারন একটা কোড নিচে কোডটা দেওয়া হলো।

<a href="/go/2ndpage.html">2nd Page</a>
      

এই আর্টিকেল টি পুরোটা পড়ার জন্য আপনাকে অনেক ধন্যবাদ, এই আর্টিকেল যদি বুঝতে অসুবিধা হয় অথবা কোনো প্রশ্ন থাকে তবে কমেন্ট করুন, আশা করি আপনি উত্তর পাবেন।আর নতুুন কিছু জানার থাকলে আমাদের জানান আমরা জানানোর চেস্টা করবো। এই আর্টিকেলটি WikiJana.Com সাইটের সম্পদ তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট কপিরাইটের অধিনে চলে যেতে পারে।





Samrat Raihan

I am a web designer and developer. I regularly work for different companies. I try to write a little on this blog when I have time.If you can learn something from this blog, then I will be successful.