Web Design And Development Course- HTML Layout Tutorial

Web Design And Development Course

Web Design And Development Course

বিস্তারিত:

HTML Layout হল খুব মৌলিক বিষয়। টেবিলের ভিতর টেবিল স্থাপন করে HTML Layout তৈরী করা যায়।

** বর্তমানে Layout ডিভ (div Element) ব্যবহার করে বানানো হয়।Table দিয়ে কখনই Layout বানাবেন না। টিউটোরিয়ালটি দেয়া আছে তাই মোছা হলনা। Table দিয়েও যে Layout বানানো যায় এবং আগে সব Layout এভাবেই বানানো হত এটা জানার জন্যই শুধু টিউটোরিয়ালটি।

 

Web Design, Development Course

প্রদর্শন: টেবিলের ভিতর টেবিল:

Web Designt Course

HTML(এইচটিএমএল)Standard (স্টান্ডার্ড) Layout (লেআউট)

Standard layout সাধারনত উপরে অবস্থিত ব্যানার, নেভিগেশন এবং content বা প্রদর্শন বক্স এগুলো হলো একটা

ভাল মনের ওয়েব সাইট এর বৈশিষ্ট্য।

 

Web Design

প্রদর্শন:

Layout(লেআউট)এর উদাহরন:

Web Design And Development

Web Design And Development Course-HTML Comments

 

Web Design And Development Course

Web Design And Development Course

আপনার HTML Document এর কোন অংশ চাইলে Coment  করে রাখতে পারেন তাহলে এই অংশটুকু আর Browser এ দেখাবেনা। অন্য কোন Developer বা আপনিই যদি অনেক পরে সেই Document  দেখেন তখন বুঝতে সুবিধা হয় কোন Code কিসের জন্য লিখেছিলেন। সে জন্য Code Coment করা ভাল তবে প্রাকটিস করার প্রয়োজনীয়তা নাই । Start tag <!– এবং End tag  –> এর মধ্যে থাকা সব Coment হয়ে থাকে। যেমন…

Web Design

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

একসাথে এক বা একাধিক লাইনও কমেন্ট করে রাখতে পারেন। এভাবে Coment কমেন্ট করার প্রধান উদ্দেশ্য Code (কোডের) জন্য একটা Documentation (ডকুমেন্টেশন) বানানো দরকার যাতে পরে কোড দেখে বোঝা যায় কোন অংশ কিসের জন্য লেখা হয়েছিল বা হয়েছে।

Web Design And Development

এছাড়া Conditional Coment  দেয়া যায় এটা শুধু Internet Explore এর জন্য কাজ করে থাকে। যেমন… অনেক সময় আমরা অতিরিক্ত স্ক্রিপ্ট বা CSS সিএসএস ফাইল ব্যবহার করি IE এর জন্য। যেমন…

Web Design And Development Course

এটা শুধু মাএ IE 9 এর জন্য কাজ করবে।

যে কোন Code (কোড)ও যদি Coment Tag এর  ভিতর রাখেন সেটা ব্রাউজারে দেখাবেনা উপরের দুটি উদাহরনের যেকোনটিতে কোডের আগে পরে <!– এবং –> দিয়ে Browser এ রান করিয়ে দেখুন সেই অংশটুকু দেখাবেনা।

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

 

Web Design And Development Course-HTML Embed Music

 

Web Design And Development Course

Web Design And Development Course

বিস্তারিত:

HTML 5 এ Audio Video  প্রদর্শনের জন্য নতুন কিছু Tag এসেছে ফলে Browser Audio Video  চালানো এখন খুব সহজ থেকে সহজতর হয়েছে। আগে Embed নামের একটি Tag দিয়ে এই সকল কাজগুলি চালানো হত তবে অনেক সমস্যা ছিল। যেমন.. Embed Tag কাজ করার জন্য Plugin  Install করা  থাকতে হত Browser (ব্রাউজারে)। এদের মধ্যে খুব পরিচিত অন্যতম একটি Plugin হচ্ছে Flush Player এছাড়া Quick Time,  ভিএলসি (VLC), Windows Media Player ইত্যাদি।

সমস্যা হত যদি User এ Browser এ কোন Media player plugin ইনস্টল না থাকত। যাই হোক HTML 5 এসব সমস্যার সমাধান নিয়ে এসেছে। যদি এখনও  internet Explorer (ইন্টারনেট এক্সপ্লোরার) HTML 5 সাপোর্ট না করে তবে internet Explorer এর সর্বশেষ ভার্সনে (IE 9+) এসব সমাধান আসছে।

যেহেতু এখন কার সময়ে বেশিরভাগ মানুষই মজিলা (Mozilla) বা Goggle Chrome Browser  ব্যবহার করে তাই আমরা HTML 5 এরই উপর ভিত্তি করে টিউটোরিয়াল (Tutorial) দিচ্ছি।

আমরা HTML 5 ব্যবহার করে এখানে mp3 ফাইল বাজিয়ে দেখানোর চেষ্টা করছি এবং এর জন্য কোন Plugin লাগবেনা। audio নামের ট্যাগ দিয়ে এটা করা যায়।

Web Design And Development Course

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

Web Design And Development Course

** Mozilla তে mp3  সাপোর্ট করেনা তাই ogg ফরমেটে দিয়েছি তবে Goggle Chrome mp3 টি চলবে।

** দেখুন অমরা দুটি source Tag দিয়েছি অথচ আপনারা হয়তো ভাবতে পারনে একটি দেয়া উচিৎ ছিল । না আমারটাই ঠিক আছে কেননা Browser fallback ফরমেট মেথড ব্যবহার করে দেখে কোন ফরমেটটি সে সাপোর্ট

** type Attributes টি ঐচ্ছিক তবে দিলে পারফমেন্স বাড়বে।

<audio> এর ভিতরে controls=”controls” এভাবে দিতে পারেন তবে আমি যেভাবে দিয়েছি সেটাও হবে। এটা হচ্ছে pause/play, sound ইত্যাদি Player এ দেখাবে কিনা সেটার জন্য। এরপর controls এর মত  autoplay আরেকটা Attributes আছে এটা দিলে Automatic Music প্লে হবে।

loop নামে একটা Attributes আছে এটা দিলে Music টি একবার শেষ হলে আবার প্রথম থেকে শুরু হবে এভাবে একটার পর একটা বাজতে থাকবে।

preload নামের আরেকটা Attributes আছে audio Element এর জন্য এবং এটার ৩ রকম মান দেয়া যায়।

১. Auto দিলে পেজ লোড হবার আগেই Auto Download   করবে আগে

২. Meta দিয়ে যদি পেজ লোড হবার সাথে সাথে মেটাডেটা যেমন Author ইত্যাদি লোড হবে।

৩. None দিলে মেটাডেটা কিংবা Audio কোনটাই পেজের আগে লোড হবেনা।

** Source ট্যাগটি না দিয়ে যদি audio ট্যাগে src Attributes দিয়ে মিডিয়া ফাইলটির উৎস দেখিয়ে দেন তবু হবে।

 

এখন সমস্যা হচ্ছে যেহেতু AudioTag সব Browser নএ  সাপোর্ট করেনা তাছাড়া mp3, ogg, wav ছাড়া অন্য ফরমেট চলেনা তাই সব ব্রাউজার কমপিটাবিলাটির জন্য আপাতত Embed Tag ব্যবহার করতে পারেন। তবে এটার জন্য যেকোন Media Player আপনার Browser ইনস্টল থাকতে হবে। সাধারনত VLC media player আপনার পিসিতে ইনস্টল থাকলে VLC Web Plugin নামে একটা ছোট্র Plugin আপনার ব্রাউজারে অটোমেটিক ইনস্টল আছে।

Web Design And Development Course

 

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

 See More Article…

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

See More Articles…

Web Design And Development Course-HTML Video Tutorial

Web Design And Development Course-HTML Body

Web Design And Development Course-HTML Div

Web Design And Development Course-HTML Bold & Italic

3 thoughts on “Web Design And Development Course- HTML Layout Tutorial”

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

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

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

Leave a Comment

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

Recommended
Web Design And Development Course বিস্তারিত: Audio Tag  এর মত…
Cresta Posts Box by CP