Web Design And Development Course-HTML Video Tutorial

Web Design And Development Course

Web Design And Development Course

বিস্তারিত:

Audio Tag  এর মত Video নামে একটা Tag আছেHTML 5 এ। এটা Video Web  পেজে প্রদর্শন করার জন্য। কোন Plugins  লাগেনা খুব সহজ। <img Tag দিয়ে ছবি দেখানোর মত। তবে Audio Tag এর  মতই video Tag ও Internet Explorer (IE 9 এর নিচে) সাপোর্ট করেনা।

এক লাইন কোড লিখেই ভিডিও পেজে দেখাতে পারেন যেমন…

Web Design And Development Course

Online Editor দিয়ে দেখুন…

Web Design And Development Course

Video চলে আসছে। তবে এখানে বেশ কিছু Attributes ব্যবহার করা যায় যেগুলি দিয়ে Video Pleyer  ভালই সাজানো যায়।

Source Tag এখানেও ব্যবহার করতে পারেন, উপকার আগের টিউটোরিয়ালে যেটা বললাম সেটাই। Browser Format চেক করে এবং সাপোর্ট না করলে পরেরটাতে যায় এভাবে যতগুলি Source ট্যাগ থাকবে সব চেক করবে।

Web Design And Development Course

প্রয়োগ দেখুন:

 

Web Design And Development Course

Video Element এ এলিমেন্টে উপরে ৩টি Attributes ব্যবহার করেছি। Height এবং Width দেখেই বোঝা যাচ্ছে এগুলি দিয়ে দৈর্ঘ প্রস্থ ঠিক করে দিয়েছি। Poster Attributes টি চমৎকার কাজের জিনিস। প্রথমে পিচ্চিটার জিহবা বের করা ছবিটা ভিডিওটির পোস্টার হিসেবে দিয়েছি। poster ব্যবহার করে আপনি ইচ্ছেমত ছবি দিতে পারেন।

এছাড়া Muted নামে আরেকটা Attributes আছে এটা দিলে (শুধু controls যেভাবে লিখেছি সেভাবে দিলেই হবে) শব্দ শোনা যাবেনা। বাকি সব Attributes গুলি আগের টিউটোরিয়ালের মত।

 

** ৩টি ভিডিও ফরমেট সাপোর্ট করে – webm, ogg আর mp4

এখানেও Embed এবং Object Tag ব্যবহার করে Video দেখাতে পারেন যদি সব ব্রাউজারে দেখানো প্রয়োজন হয় যেমন…

Web Design And Development Course

অনলাইন এডিটরে দিয়ে দেখুন..

Web Design And Development Course

Embed কাজ করার জন্য যেকোন ভিডিও প্লেয়ার প্লাগিন ব্রাউজারে ইনস্টল থাকতে হয় যেমন vlc web plugin

** সবচেয়ে ভাল হবে যদি আপনি সবগুলি অপশন একসাথে এমনভাবে রাখেন যাতে কোন না কোন একটাতে ইউজারের ব্রাউজার ধরা পরবেই। এজন্য এইচটিএমএল ৫ এবং embed একসাথে রাখুন ফলে HTML 5 সাপোর্ট না করলে embed ট্যাগ কাজ করবে।

Web Design And Development Course

 

এখানে embed এর ভিতর ঐ ফরমেট দিতে হবে যেটা সাধারনত সব ব্রাউজার সাপোর্ট করে যেমন ফ্লাশ দিতে পারেন তবে তার আগে ভিডিওটি এই ফরমেটে বানিয়ে নিতে হবে।

Web Design And Development Course-HTML Body

 

Web Design And Development Course

 

Body Tag এর আগের টিউটোলিয়ালগুলির প্রায় সব জায়গায় আমরা ব্যবহার করেছি।এর ভিতরেই সব Content সাজিয়ে রাখতে হয়। ul, li, a, h1 … h6, p, div এক কথায় সব Element এর ভিতরে থাকবে HTML আর Head এর ভিতর যে কয়েকটি Element নির্দিষ্ট করা আছে কয়েকটি ছাড়া।

যেকোন Web Page এ যান এবং সেটার সোর্স কোড দেখুন, স……ব Element body এর ভিতর দেখতে পাবেন। Mozilla Firefox দিয়ে সোর্স দেখার জন্য Web Page এর উপর Right Button Click করে “View Page Source” এ Click করুন তাহলে পেজটির পুরো HTML দেখতে পাবেন।

Leftmargin, Topmargin, Text, Background, Bgcolor এরকম আরো বেশকিছু Attributes ছিল Body Element এর  জন্য তবে HTML 5 এ এখন এটা Deprecated (ডেপ্রিকেটেড অর্থ হচ্ছে HTML Organization এর জন্য সাপোর্ট দিচ্ছেনা এবং শীঘ্রই HTML থেকে সমপূর্ন সরিয়ে ফেলা হবে তবে সরিয়ে ফেলার আগ পর্যন্ত ব্রাউজার সাপোর্ট করবে Backward Compitability এর জন্য)।

আরেকটা টেকনিকাল শব্দ আছে Obsolete. এর অর্থ হচ্ছে সম্পূর্ন সরিয়ে ফেলা। যখন কোন কিছু W3C Specification থেকে Obsolete করা হয় তার কিছু আগে আগে জিনিসটি Deprecated করে দেয় (এইচটিএমএল অর্গানাইজেশন)

যাইহোক Global Attributes গুলি Body Element ব্যবহার করা যাবে। আসলে সব HTML Element  Global Attributes ব্যবহার করা যায়। যেমন…

Dir : Document Element গুলির দিক নির্নয়ের জন্য। এর ৩টি মান দেয়া যায়.

  1. 1. ltr দিলে বা থেকে ডানে টেক্টট দেখাবে যেমন আমাদের সাইটটি দেখাচ্ছে।
  2. 2. Rtl দিলে লেখা ডান থেকে বামে দেখাবে যেমন আরবী, হিব্রু ভাষার সাইটগুলিতে দেখতে পাবেন

এমন থাকে

  1.   Auto দিলে ব্রাউজার নিজের থেকেই বের করে নেয়ার চেষ্টা করবে যে কোন দিকে দেখাবে। এমন ভাষার যদি সাইট বানান যেটা বা থেকে ডানে নাকি ডান থেকে বামে হবে জানেন না তখন এটা ব্যবহার করতে পারেন। Id, Class, Style, Lang (ভাষার জন্য যেমন বাংলা ভাষার সাইট বানালে দিতে হবে) ইত্যাদি।

See More Article…

Web Design And Development Course

প্রয়োগ দেখুন:

এছাড়া HTML 5 নতুন কিছু এট্রিবিউট আছে এগুলি দিতে পারেন। dropzone, draggable, spellcheck ইত্যাদি। এগুলি নিয়ে পরে আরো উদাহরন + কাজসহ আলোচনা হবে।

ওয়েব সাইট ডিজাইনে দক্ষ হতে চাইলে আমাদের  টিউটোরিয়াল দেখার পাশাপাশি গুগলে অনিক Web Design And Development Course আছে যেগুলো আপনাদের দেখা উচিত।

 Note: পরবর্তী Web Design And Development Course টিউটোরিয়ালে (Part-23) এইচটিএমএল ডিভ টিউটোরিয়াল এর  বিস্তারিত আলোচনা করা হবে।

 

Web Design And Development Course-HTML Div

 

Web Design And Development Course

Web Design And Development Course

Div Tag () খুবই গুরত্বপূর্ন একটি Tag HTML এর। HTML এর Element এর ভিতরে রেখে section (খন্ড) তৈরী করা হয়। যতগুলি Div ততগুলি খন্ড হবে। একটাElement  তার ভিতরে থাকা সব Element এর জন্য পাত্র বা Container হিসেবে কাজ করে।Layout(লেআউট) বানানোর জন্য Div এর জুড়ি নেই।HTML এ Layout এর  জন্য টেবিল ব্যবহার প্রায় শূন্যের কোঠায় চলে এসেছে বিভিন্ন কারনে। আর তাই Div এখন Layout তৈরীর অবিচ্ছেদ্য অংশ বা উপাদান।

Web Design And Development Course

প্রয়োগ দেখুন:

Web Design And Development Course

Div দিয়ে Code লেখার পর CSS দিয়ে সেটার প্রয়োজনীয় আকৃতি দেয়া হয়। CSS টিউটোরিয়ালে এসব আলোচনা হবে।এখানে শুধু জেনে রাখুন Div একটি অন্যান্য HTML Element এর  মত একটা Element । এটা Blog লেভেল Element. Align নামে একটা Attributes ব্যবহার করা যায় তবে HTML 5 এটা deprecated, আসলে Align Attributes সব কাজ CSS দিয়ে করা যায় বা করা য়।এখানে ইনলাইন CSS লিখেছি (style=”border:1px solid #ddd”) এরুপ CSS দিয়ে সুন্দর সুন্দর Layout বানানো যায়।

Web Design And Development Course

প্রয়োগ দেখুন:

Web Design And Development Course

Div এ Global (যেমন id, class, style, dir etc) এবং Event Attributes (যেমন.. onmouseover, dblclick etc) ব্যবহার করা যাবে।

ওয়েব সাইট ডিজাইনে দক্ষ হতে চাইলে আমাদের  টিউটোরিয়াল দেখার পাশাপাশি গুগলে অনিক Web Design And Development Course আছে যেগুলো আপনাদের দেখা উচিত।

Note: পরবর্তী Web Design And Development Course টিউটোরিয়ালে (Part-24) এইচটিএমএল বোল্ড এবং ইটালিক টিউটোরিয়াল এর  বিস্তারিত আলোচনা করা হবে।

See More Articles…

5 thoughts on “Web Design And Development Course-HTML Video Tutorial”

  1. Pingback: Web Design And Development Course-HTML Embed Music Tutorial -

  2. Pingback: Web Design And Development Course-HTML Comments Tutorial -

  3. Pingback: Web Design And Development Course-HTML Frame Tutorial in Bangle -

  4. Pingback: Web Design And Development Course- HTML Layout Tutorial -

  5. Pingback: Web Design And Development Course-HTML Color code -

Leave a Comment

Your email address will not be published. Required fields are marked *

Recommended
বিস্তারিত: Web Design And Development Courseবিস্তারিত:বোল্ড (bold):HTML Document এ কোন…
Cresta Posts Box by CP