আর শর্টকার্ট নয় সঠিক নিয়মে সবাই মিলে শিখি ওয়েব ডিজাইন ও ওয়েব প্রোগ্রামিং (HTML-1)

আমরা অনেক টিউটোরিয়াল দেখেছি যেখানে মাত্র ১০ মিনিট বা ৩০ মিনিট বা ১ ঘন্টায় একটা পূর্ণাঙ্গ ওয়েবসাইট তৈরি করার পদ্ধতি দেখানো হয়। কিন্তু এটা একটা ওযেবসাইট তৈরির কোন সঠিক পদ্ধতি নয়। আর সবচেয়ে বড় কথা হচ্ছে এভাবে তৈরি করা ওয়েবসাইট থেকে সব রকম সুযোগ সুবিধা পাওয়াও সম্ভব নয়। তাই আমরা যদি একটি আকর্ষনীয় পূর্ণাঙ্গ ডাইনামিক ওয়েবসাইট তৈরি করতে চাই তবে আমাদের ওয়েব ডিজাইন ও ওয়েব প্রোগ্রামিং শেখার কোন বিকল্প নেই। HTML,CSS,JAVA SCRIPT,PHP,My SQL , FLASH এর ACTION SCRIPT ইত্যাদি প্রোগ্রামিং ল্যাঙ্গুযেজ ব্যবহার করেই মূলত বর্তমানযুগের  আকর্য়নীয় ডাইনামিক ওয়েবসাইট সমূহ তৈরি করা হয় আর এসব ওয়েবসাইটের নজরকাড়া ডিজাইন করা হয় PHOTOSHOP, FIREWORKS, FLASH ব্যবহার করে । আমরা HTML থেকে শুরু করে পর্যায়ক্রমিকভাবে সকল প্রোগ্রামিং ল্যঙ্গুযেজ সমূহ শেখার মাধ্যমে একজন দক্ষ ওয়েব প্রোগ্রমার ও ডিজাইনার হতে পারব। আজ আমরা HTML দিয়ে শুরু করি।

যা যা লাগবে

html ব্যবহার করে code লেখার জন্য আমাদের নতুন কোন সফটওয়্যারের প্রয়োজন নেই , আমরা আমাদের অতি পরিচিত নোটপ্যাড ব্যবহার করেই html এর code লিখতে পারি। এভাবে লেখা কোড আমরা .html এক্সটেনশন যেমন index.html দ্বারা Save করে যেকোন ব্রাওজার যেমন Internet explorer, Mozila , Google chrome, Opera দ্বারা দেখতে পারি।

 

আমাদের প্রথম Code এবং এর বিভিন্ন অংশ

আমরা একটা নোটপ্যাড open করে নিচের code টুকু লিখি।

 

Code:

<html>

<head>

 <title> http://www.techtunes.io</title>

</head>

<body>

 This is my first web page. I am learning now HTML.

</body>

</html>

 

এখন file মেনু থেকে Save as এ ক্লিক করে File name: index.html  ,   Save as type : All files,  দিয়ে save করি । save করা index.html ফাইলটি Internet explorer দিয়ে open করলে নিচের মত দেখাবে।

12

 

Code এবং এর বিভিন্ন অংশ বিশ্লেষণ

আমরা code এর মধ্যে <>  এবং </>  এই দুইটা চিহ্ন এবং এর মধ্যে কিছু Word যেমন html, head, title, body দেখেছি । এসব Word কে Keyword বলে।  আসলে <> বা </> চিহ্ন এবং এর মাঝে লেখা একটি Keyword কে বলে ট্যাগ যেমন <head> অর্থ head ট্যাগ। HTML এ দুই ধরনের ট্যাগ রয়েছে , <> চিহ্ন ও keyword নিযে গঠিত ট্যাগকে শুরু ট্যাগ এবং </>  চিহ্ন ও keyword নিযে গঠিত ট্যাগকে  শেষ ট্যাগ বলে যেমন <title>অর্থ title শুরু ট্যাগ </title>অর্থ title শেষ ট্যাগ।

 

<html>  বা html ট্যাগ

 HTML এ code লিখতে হলে সমস্ত code কে <html> </html> এর মাঝে লেখতে হয়।

 

<head> বা head ট্যাগ

<head></head> এর ভেতরে <title> </title> ট্যাগ লেখা হয় যার মাধ্যমে ওয়েবসাইটের title বা শিরোনাম প্রদর্শনের ব্যবস্থা করা হয়। এই code এ title হিসেবে www.techtunes.io লেখা হয়েছে যা ব্রাওজারের title bar এ দেখা যাচ্ছে। এছাড়া css এর stylesheet কে head ট্যাগের মধ্যেই call করা হয়।

<body> বা body ট্যাগ

<body> বা body ট্যাগ খুবই গুরুত্বপূর্ণ। একটি ওয়েব সাইটের মূল Content সমূহ Body ট্যাগের মধ্যে অবস্থান করে । <body></body> ট্যগের মাঝেই বিভিন্ন Text , Image, Table ইত্যাদি ফরমেটিং এর জন্য বিভিন্ন ট্যাগ সমূহ লেখা হয়, যে বিষয়গুলো আমরা পর্যায়ক্রমে পরবর্তীতে জানব। এই code এ আমরা <body></body> ট্যগের মধ্যে  This is my first web page. I am learning now HTML. লিখেছি যা ব্রাওজারের মূল অংশে প্রদর্শিত হচ্ছে।

Level 2

আমি অসীম কুমার পাল। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 15 বছর 6 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 147 টি টিউন ও 469 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 17 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

আমি অসীম কুমার পাল। ইলেকট্রনিক্স এবং ওয়েব ডিজাইনকে অন্তরে ধারণ করে পথ চলতেছি। স্বপ্ন দেখি এই পৃথিবীর বুকে একটা সুখের স্বর্গ রচনা করার। নিজেকে একজন অতি সাধারণ কিন্তু সুখী মানুষ ভাবতে পছন্দ করি।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

ধন্যবাদ, এই সম্পর্কে ধারাবাহিক টিউন কামনা করছি।

    Level 2

    ধন্যবাদ,
    সকলের সহযোগিতা পেলে আমার সাধ্য অনুযায়ী চেষ্টা করব।

আপনাকে ধন্যবাদ। আমি মনে করেছিলাম আমি HTML নিয়ে টিউন শুরু করব। যাই হোক আপনি HTML চালিয়ে যান। আমি দেখি সময় পেলে CSS নিয়ে টিউন শুরু করব।

    Level 2

    ধন্যবাদ রকিবুল ভাই ,
    একজন উপযুক্ত সহযোগী পাওয়া গেল। এভাবে আমরা সবাই এগিয়ে এলে টেকটিউনস হতে পারে ওয়েব ডিজাইনার ও প্রোগ্রমার তৈরির করখানা।
    আর এ ব্যপারে টেকটিউনস কতৃপক্ষেরও সহযোগিতা প্রয়োজন।

    ভাই একটা কথা বলি মাইন্ড কইরেন না। আমার নাম রফিকুল না। আমার নাম রকিবুল। আর আপনার টিউনের হেডিং এ ওয়েব বানানটা ভুল আছে।

    Level 0

    টিউন করার সাহস হয় না৷ তাই করতে ও পারি না৷ ও নিয়ে ধারাবাহিক টিউন করার চিন্তাভাবনা আমার ও ছিল৷ তাহলে এখন জাভাস্ক্রিপ্ট নিয়ে চিন্তা করতে হবে৷ দোয়া কইরেন যেন আমার সাহস হয়????

    Level 0

    HTML ও CSS নিয়ে ধারাবাহিক টিউন করার চিন্তাভাবনা আমার ও ছিল৷

Level 2

রকিবুল ভাই আপনাকে আর একবার ধন্যবাদ দিচ্ছি ভুলগুলো ধরিয়ে দেওয়ার জন্য।
আমি ভুলগুলো ঠিক করে দিয়েছি।

আর mak_nader কোন সমস্যা নেই ,টিউন করতে সাহসের কিছু নেই শুরু করুন অপেক্ষায় থাকলাম।

Level 0

ধন্যবাদ।অপেক্ষায় রইলাম….

কংগ্রাচুলেশন অসিম!
আমার বিশ্বাস এধরনের গুরুত্তপূর্ণ একটা টিউনের জন্য আমার মত (অনভিজ্ঞ) অনেকেই অপেক্ষা করছিলো। ধারাবাহিকতা বজায় রাখার জন্য বিশেষভাবে অনুরোধ করছি।

ধন্যবাদ।

ধন্যবাদ।অপেক্ষায় রইলাম…

ভাই তাড়াতাড়ি শেয়ার করেন।

অপেক্ষায় রইলাম…