তৈরি করুন একটি সাধারণ ওয়েব সাইট [পর্ব-০২]

আশাকরি ভাল আছেন । চলছে একটি সাধারণ ওয়েব সাইট । আজ তৈরি করুন একটি সাধারণ ওয়েব সাইট আর দ্বিতীয় পোস্ট ।
শুরু করা যাক । নিচের ছবিটি খেয়াল করুন । HTML Formet

কিছু গুরুত্ব পূর্ণ তথ্য মনে রাখবেন ।

  • যে কোন সাইট শুরু হয় আর শেষ হয় html ট্যাগ দিয়ে ।
  • কোন ট্যাগে একটি শুরু ও শেষ আছে (কিছু সিঙ্গেল ট্যাগ ও আছে ),শুরু ও শেষ ট্যাগ এয়ে মাঝে শুধু / চিহ্ন পার্থক্য ।
  • Html , body ,head title ইত্যাদি ট্যাগ কোন ওয়েব পেজ এ মাত্র একবার ব্যবহার হয় ।
  •  p , br ,h1…….h6 , footer ইত্যাদি ট্যাগ কোন ওয়েব পেজ এ একাধিক বার ব্যবহার হতে পারে । এই ট্যাগ গুলো কোন 95% সময় ওয়েব পেজের body ট্যাগ এর মাঝে ব্যবহার হয় ।

প্রথমে যে কোন নামে একটি নতুন ফোল্ডার তৈরি করুন । এবার ফোল্ডার এর মাঝে Notepad বা Notepad++ দিয়ে একটা নতুন উইন্ডো নিয়ে সেটা যে কোনো নামে সেভ করুন । তবে এক্সটেন্সান হিসেবে .TXT এর বদলে .Html বা .htm ব্যাবহার করুন ।আমি এই ক্ষেত্রে my_first_site.html নামে সেভ করলাম । একই ভাবে ওই ফোল্ডারে আরও একটি উইন্ডো নিয়ে .CSS এক্সটেন্সান দিয়ে সেভ করুন । আমি সেটা style.css নামে সেভ করলাম । যারা পারছেন না তারা নিচের ছবিটা ফলো করুন ।


*** এখানে Unicode ব্যাবহার করা হয়েছে কারন আমি বাংলায় প্যারাগ্রাফ লিখব বা কমেন্ট লিখব । বাংলা ব্যাবহার না করলে Unicode ব্যাবহার করার প্রয়োজন দেখি না ।

/** **/ একটি HTML ট্যাগ যা ব্রউজারে দৃশ্যমান নয় । এটাকে কমেন্ট ট্যাগ বলা হয় । আমি এটা ব্যাবহার করব কমেন্ট লিখার জন্য ।
এবার এই লিঙ্কে ক্লিক http://www.mediafire.com/view/?56qymx8cp5t6ikp করে Text ফাইলটি ডাউনলোড করে সেভ করুন ।

এবার my_first_site.html এর উপর রাইট ক্লিক করে Open with থাকে Notepad বা Notepad ++ দিয়ে ওপেন করুন ।এবং সদ্য ডাউনলোড করা Txt ফাইল থেকে কোড গুলো কপি করে my_first_site.html নামে সেভ করুন । খেয়াল রাখবেন Unicode জেন সিলেক্টেড থাকে । তা না হলে বাংলা লেখা কাজ করবে না ।
এবার my_first_site.html এ ডবল ক্লিক করুন । তো আমাদের তৈরি প্রথম ওয়েব সাইট ওপেন হল ।
আমি গুগল ক্রম এ ফাইলটি ওপেন করেছি। সেটা অনেকটা নিচের ছবির মত ।

বড় করে দেখতে ক্লিক এখানে করুন

এবার লক্ষ করুনঃ

  • # আমাদের h1 ট্যাগের মাঝে থাকা অংশ টুকু বড় ফ্রন্ট সাইজ দেখা যাচ্ছে। এবং h2 tag, যেটা আমাদের সাব-টাইটেল তার থেকে কিছুটা ছোট । p tag এর সব টেক্সট গুলো একই রকম ফ্রন্ট সাইজ ব্যবহার করছে ।
  • # এখন আমাদের সাইটটিতে লক্ষ করুন আমাদেরর লাইন টেক্সট ফাইল এর কোন আলাইনমেন্ট কাজ করছে না। আমরা যেখানে নতুন লাইন শুরু করেছি সেখানে ব্রউজার নতুন লাইন শুরু করে নি । তবে প্রত্যেক p ট্যাগ আলাদা আলাদা লাইনে শুরু হয়েছে । HTML এই ভাবে কাজ করে ।
  • # “এইখানে ক্লিক করুন” লেখা অংশে ক্লিক করলে কোন কাজ হচ্ছে না । তাইলে কি হল !!

আসলে আমারা কোন লিঙ্ক দেই নি । তো কি ভাবে কাজ করবে । আসুন এই সমস্যার সমাধান করি ।

প্রথমে জেনে নিই কিভাবে HTML এর মাঝে লিঙ্ক দিতে হয় । নিচের ছবিটা লক্ষ করুন ।


লিঙ্ক নিয়ে w3Schools.com এ আপনি আরও একটু সময় ব্যায় করুন । এই ভাবে আমরা লিঙ্ক সংযুক্ত করলাম ও সেটা ঠিকঠাক কাজ করছে কিনা লক্ষ করি । ব্যাস আজ এখানেই শেষ করলাম । আগামিতে আমরা CSS ফাইল নিয়ে কাজ করব ।

আজ পোস্ট শেষের ফাইলটি টেক্সট আকারে ডাউনলোড করতে ক্লিক করুন এখানে ***

এবং স্টার্ট HTML ফাইল এখানে ***

End Html ফাইল এখানে ***

ধন্যবাদ । আপনাকে । আমাকে ফেসবুকে পাবেন এই লিঙ্কে খেয়ালি টিউনার ।

Level 0

আমি খেয়ালি টিউনার। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 5 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 5 টি টিউন ও 11 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

http://www.facebook.com/disgruntledtuner


টিউনস


আরও টিউনস


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


টিউমেন্টস

Level 0

আপনাকে ধন্যবাদ। দারুন হচ্ছে্‌্‌ চালিয়ে যান।

ধন্যবাদ ভাইয়া খুব সুন্দর পোষ্ট হয়েছে! আমরা বাকী পোষ্টগুলোও চাই!

Level 0

ধন্যবাদ ভাইয়া খুব সুন্দর পোষ্ট হয়েছে! আমরা বাকী পোষ্টগুলোও চাই!