Awesome! টিউনস
সকল Awesome! টিউনস

ওয়েব ডিজাইন এর হাতেখড়ি [পর্ব-০১] :: সাধারণ আলোচনা এবং ট্যাগ পরিচিতি

8,509 দেখা 12 টিউমেন্টস জোসস
টিউন বিভাগ এইচটিএমএল
প্রকাশিত
Level 0

10 টিউনস 6 টিউমেন্টস 0 ফলোয়ার

ওয়েব ডিজাইন এর হাতেখড়ি

আমি টেকটিউন এ টিউনার হিসেবে সম্পূর্ন নতুন। এর আগে অন্য কোথাও তেমন কোন কিছু লেখালেখি করি নাই। হঠাৎ করেই টেকটিউন  এ একটা একাউন্ট খুলে ফেললাম। কিন্তু ভেবে পাচ্ছিলাম না কি নিয়ে লিখব। যা নিয়েই লিখতে চাই সে সম্পর্কেই অনেক বিশদ কিছু আগে থেকে নেটে রয়েছে। আর টেকটিউন এর তো জবাব নেই। এর সংগ্রহতো বিশাল। আমার যা কিছু শেখা তার বেশীর ভাগই নেট থেকে অথবা বিভিন্ন বই থেকে পড়া। আর তাই লিখতে সাহস পাচ্ছিলাম না। কিন্তু হঠাৎ করেই মনে হলো, নাহ শুরু করে দেখি কি হয়। অনেক যাগাতেই দেখেছি অনেকে বিভিন্ন ধরণের শিক্ষা মূলক টিউটোরিয়াল পোষ্ট করে। কিন্তু কয়েকটি পোষ্ট এর পরই আর খুজে পাওয়া যায় না। আমার ইচ্ছা আছে নিয়মিত ভাবে লেখার বাকিটা আপনাদের ইচ্ছার উপর নির্ভর করছে। তাহলে আর বকবক না করে শুরু করি।

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

HTML এ প্রোগ্রাম লেখার সময় আমরা <> এবং </> এই দুটি চিহ্ন ব্যবহার করে থাকি, এবং এর মধ্যে বিভিন্ন word এবং letter যেমন html, head, title, body ইত্যাদি word ব্যবহার করা হয়ে থাকে এগুলোকে tag বলা হয়ে থাকে। আস্তে আস্তে আমরা বিভিন্ন tag এর পরিচিতি এবং তাদের ব্যবহার জানতে পারব। প্রত্যেকটি tag এর শুরু এবং শেষ থাকে। <> এটি দ্বারা শুরু এবং </> এটি দ্বারা শেষ নির্দেশ করা হয়।

এখানে এত স্বল্প পরিসরে প্রত্যেকটি বিষয় বর্ননা করা অনেক সময় সাপেক্ষ ব্যাপার। আসুন আমরা সরাসরি কোড এ চলে যাই। আপনি একটি নোটপ্যাড ওপেন করে হুবহু নিম্নের কোডটি টাইপ করুন-


<html>

<body>

This is my first page.

</body>

</html>

এবার এটিকে আপনি আপনার পছন্দ মত নামের সাথে .html যেমন part1.html দিয়ে আপনার কম্পিউটার এর নির্দিষ্ট একটি যায়গায় save করুন। এখন এই save করা ফাইলটি ওপেন করলেই দেখতে পাবেন এটি আপনার ব্রাউজার এর মাধ্যমে ওপেন হচ্ছে। এবং সেখানে লেখা দেখতে পাবেন This is my first page.হয়ে গেল আপনার প্রথম ওয়েবপেজ তৈরি। এখানে আমরা সমস্ত কিছু <body> </body> ট্যাগ এর মধ্যে লিখব।

HTML এ অনেক গুলো ট্যাগ এর মধ্যে এখানে বহুল ব্যবহৃত  ট্যাগ গুলো সম্পর্কে বিস্তারিত দেওয়া হলো। পরবর্তিতে কাজ করতে করতে আমরা এদের ব্যবহার দেখতে পাব। তাহলে চলুন দেখে নেওয়া যাক HTML এ ব্যবহার করা হয় এমন কিছু ট্যাগ এবং তাদের সম্পর্কে বিস্তারিত-

  • এইচ টি এম এল ট্যাগ( <html> </html>): HTML ডকুমেন্টটিকে নির্দেশ করে।
  • হেড ট্যগ(<head></head>): হেড অংশের ভিতরে আপনি চাইলে CSS, javascript সহ যেকোন স্ক্রীপ্ট যোগ করতে পারবেন।
  • টাইটেল ট্যাগ (<title></title>): Title ট্যাগের মধ্যে সাধারনত ওয়েব সাইট এর নাম লেখা হয়। আপনি চাইলে অন্য কিছু লিখতে পারেন যা ব্রাউজারের টাইটেলবারে দেখাবে।
  • মেটা ট্যাগ(<meta>): সার্চ ইঞ্জিন অপটিমাইজেশনের জন্য ব্যবহার করা হয়।
  • বডি ট্যাগ (<body></body>): বডি অংশের ভিতরে ওয়েব সাইটের সমস্ত প্রকার কনটেন্ট(content) থাকে।
  • বোল্ড ট্যাগ (<b></b>): ওয়েব পেজে কোন লেখাকে বোল্ড আকারে প্রকাশ করার জন্য এই ট্যাগ ব্যবহার করা হয়।
  • লাইন ব্রেক ট্যাগ(</br>): টেক্সটে সিঙ্গেল লাইন ব্রেক যুক্ত করতে ব্যবহার করা হয়।
  • ইটালিক ট্যাগ(<i></i>): এটিও বোল্ড এর মতই কোন লেখাকে ইটালিক রুপে প্রদর্শন করার জন্য ব্যবহার করা হয়।
  • স্ট্রং ট্যাগ (<strong></strong>): টেক্সটকে স্ট্রং করে দেখাতে ব্যবহার করা হয়।
  • প্যারাগ্রাফ ট্যাগ(<p></p>): প্যারাগ্রাফ আকারে কোন কিছু লেখার জন্য ব্যবহার করা হয়।
  • হেড ট্যাগ(<h></h>): <h1></h1>….<h6></h6> বিভিন্ন সাইজের হেডিং লেখার ক্ষেত্রে ব্যবহার করা হয়।
  • হরাইজন্টাল ট্যাগ(</hr>): হরাইজন্টাল লাইন তৈরি করার জন্য ব্যবহার করা হয়।
  • কোড ট্যাগ(<code></code>): কম্পিউটারে কোড লেখার মতো করে টেক্সটকে প্রদর্শন করতে ব্যবহার করা হয়।
  • টেবিল ট্যাগ (<table></table>): টেবিল তৈরি করতে ব্যবহার করা হয়।
  • টেবিল হেডার ট্যাগ(<th></th>): টেবিলের হেডার নির্ধারণ করতে ব্যবহার করা হয়।
  • টি আর ট্যাগ (<tr></tr>): টেবিলের রো নির্ধারণ করতে ব্যবহার করা হয়।
  • টি ডি ট্যাগ(<td></td>): টেবিলের সেল নির্ধারণ করতে ব্যবহার করা হয়।
  • অর্ডার লিস্ট ট্যাগ(<ol></ol>): অর্ডার লিস্ট তৈরি করতে ব্যবহার করা হয়।
  • আনর্ডার লিস্ট ট্যাগ (<ul></ul>): আনর্ডার লিস্ট তৈরি করতে ব্যবহার করা হয়।
  • লিস্ট আইটেম ট্যাগ(<li></li>): লিস্ট আইটেম নির্ধারণ করতে ব্যবহার করা হয়।
  • ফর্ম ট্যাগ(<form></form>): ইউজার ইনপুট এর জন্য ফর্ম তৈরি করতে ব্যবহার করা হয়।
  • ইনপুট ট্যাগ(<input></input>): ইনপুট ফিল্ড তৈরি করতে ব্যবহার করা হয়।
  • সিলেক্ট ট্যাগ (<select></select>): নির্বাচন যুক্ত তালিকা তৈরি করতে ব্যবহার করা হয়।
  • ফ্রেম সেট ট্যাগ (<frameset></frameset>): ফ্রেম সমূহের একটি সেটকে নির্ধারণ করে।
  • আই ফ্রেম(<iframe></iframe>): আই ফ্রেম তৈরির জন্য ব্যবহার করা হয়। একটি ইনলাইন সাব উইন্ডো (ফ্রেম) নির্ধারণ করে।
  • অ্যাংকর ট্যাগ(<a></a>): অ্যাংকরকে নির্ধারণ করে।
  • লিংক ট্যাগ(<link>): লিংক ট্যাগ বিভিন্ন ডকুমেন্ট এর মধ্যে সম্পর্ক নির্ধারণ করতে ব্যবহার করা হয়। যেমনঃ-<link rel="stylesheet" type="text/css" href="theme.css"> এবং এই ট্যাগ এর ভিতরে বিভিন্ন প্রকার অ্যাট্রিবিউট ব্যবহার করা হয়।
  • স্পান ট্যাগ(<span></span>): কোন ডকুমেন্ট এর ইনলাইন এলিমেন্ট গুলোকে গ্রুপ করতে ব্যবহার করা হয়।
  • ডিভ ট্যাগ (<div></div>): এইচটিএমএল ইলিম্যান্টকে বিভিন্ন গ্রুপে ভাগ করার জন্য div ট্যাগ ব্যবহার করা হয়।
  • এমবেড ট্যাগ(<embed></embed>): অডিও ভিডিও বিভিন্ন ফাইল সংযুক্ত করতে এই ট্যাগ ব্যবহার করা হয়।
  • স্ক্রিপ্ট ট্যাগ(<script></script>): ওয়েব পেজে প্রোগ্রামিং এর সুবিধা যুক্ত করার জন্য বিভিন্ন ধরণের স্ক্রিপ্টিং ল্যাঙ্গুয়েজ ব্যবহার করা হয়। এবং সেই স্ক্রিপ্ট গুলোকে যুক্ত করার জন্য স্ক্রিপ্ট ট্যাগ ব্যবহার করা হয়।
  • স্টাইল ট্যাগ (<style></style>): ইন্টার্নাল স্টাইল সিট ব্যবহার করার জন্য এই ট্যাগ ব্যবহার করা হয়।

আজ  এ পর্যন্ত সবাই ভালো থাকবেন।     -মুন্সী বরকত উল্লাহ (জনি)

Level 0

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

টিউনস

আরও টিউনস

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

টিউমেন্টস

Level 0

Dear respectful brothers. I need an argent explaind hlp. I desided to create a site of my own, about diferent type of programing language and codes. Where user can post and comment. (as like as techtunes.iom) but i get confused about where to start and how? (i need fesality so that user can post) What should i take? Google? Or wp? I am ready to buy a domain for blogspot, but sceard about google delete my blogsite. And about wordpress, i search it on google and find it as a night-mare to get approved on adsence for wp. 🙁 now plz help what should i do. Plz plz plz my email- [email protected] fb- fb.com/abt2050

Level 2

ভাই আপনাকে অনেক অনেক ধন্যবাদ এত সুন্দরভাবে গুছিয়ে মানসম্পন্ন একটা টিউন আমাদের উপহার দেয়ার জন্য। আসলেই বলা যায় আপনি খুব সুন্দর ভাবে হাতেখড়ি শিক্ষা দিচ্ছেন । আশা করি আপনার নিয়মিত টিউনের মাধ্যমে ওয়েব ডিজাইন শিখতে পারবো। ২য় পর্বের আশায় আছি।

Level 0

niomito chalia jaben asa kori ! Apnar sata asi !

Level 0

Thank you vi , Apner shathe asi

Level 0

welcome

Level 0

মুন্সী বরকতউল্লাহ সাহেব চালিয়ে যান

Level 2

Go ahead we r with u

Level 0

ভালো লিখেছেন ভাই…চালিয়ে যান…:)

Level 0

সুন্দর উদ্যোগ

Level 0

ভাইয়া আপনাকে অনেক ধন্যবাদ।