- Html শেখার সহজ উপায় : অধ্যায় ১
- Html শেখার সহজ উপায় : অধ্যায় ২
- Html শেখার সহজ উপায় : অধ্যায় ৩
- Html শেখার সহজ উপায় : অধ্যায় ৪
- Html শেখার সহজ উপায় : অধ্যায় ৫
আশা করি আপনারা আমার আগের পোস্টগুলি দেখেছেন না দেখে থাকলে একটু চোখ বুলিয়ে আসুন ।আজকে আমি আলোচনা করব Html-এর Link এবং Image সম্পর্কে ।
Html Link:-
ওয়েব পেজের মধ্যে কোন লিংক যোগ করার জন্য ব্যবহৃত হয় Html Link । Html Link হিসেবে যে-কোন টেক্সস্ট বা ছবি ব্যবহৃত হয়ে থাকে । তবে লিংক বলে কোন ট্যাগ নেই ।ওয়েব পেজে যেকোন Link যোগ করার জন্য <a> ট্যাগ এবং এই ট্যাগের একটি Attribute, href ব্যবহৃত হয় ।<a> ট্যাগের link সংক্রান্ত আরও একটি Attribute হল target । href Attribute-টির ধরন রেফারেন্সের উপর ভিত্তি করে তিন রকমের হয়ে থাকে ।যে কোন সর্ভারে তিন ধরনের রেফারেন্স থাকে এগুলি হল ১.ইন্টারনাল -একই ওয়েব পেজে বিদ্যমান, ২.লোকাল -নিজস্ব ডোমেইনে বিদ্যমান, ৩.গ্লোবাল -অন্য কোন স্হানে বিদ্যমান ।ইন্টারনাল রেফারেন্সের ক্ষেত্রে href Attribute-টির মান হবে href=”#কককককক”-এই ধরনের,লোকাল রেফারেন্সের ক্ষেত্রে href Attribute-টির মান হবে href=”../খখখখ/খখখখখখখ”-এই ধরনের, আর গ্লোবাল রেফারেন্সের ক্ষেত্রে href Attribute-টির মান হবে href=”http://www.xxxxxx.xxx”-এই ধরনের । সার্বিকভাবে গ্লোবাল রেফারেন্সটিই বহুল ব্যবহৃত ।
1.Text Link:-
এর গঠন <a href=”http://www.xxxx.xxx”>yyyyy</a> -এই রকমের হয় ।এখানে www.xxxx.xxx -এর মান হবে আপনি যে লিংকটি যোগ করতে চাচ্ছেন তার URL এবং yyyyy -এর মান হবে আপনি যে নামে লিংকটিকে ওয়েব পেজে দেখাতে চান বা সেটি ।<a> ট্যাগের link সংক্রান্ত আরও একটি Attribute হল target ।target Attribute-এর মান _blank, _parent, _self, _top এই চারটি হয় । target=”_blank” Attribute-টি ব্রাউজারের নতুন উইন্ডোতে নতুন পেজে আপনার প্রদত্ত লিংকটি প্রকাশ করবে ।target=”_self” Attribute-টি ব্রাউজারের বর্তমান উইন্ডোতে নতুন পেজে আপনার প্রদত্ত লিংকটি প্রকাশ করবে ।অধিকাংশ C.M.S-র মধ্যে এটি ডিফল্ট হিসেবে ব্যবহৃত হয় । target=”_parent” Attribute-টি ব্রাউজারের বর্তমান উইন্ডোতে নতুন পেজে আপনার প্রদত্ত লিংকটি প্রকাশ করবে । target=”_top” Attribute-টি সমস্ত ফ্রেম বাতিল করে ব্রাউজারের বর্তমান উইন্ডোতে নতুন পেজে আপনার প্রদত্ত লিংকটি প্রকাশ করবে ।
যেমন
input | ব্রাউজারে output |
---|---|
স্বাগতম <a href=”http://www.themore.cz.cc” target=”_blank”>মোর কুঁড়েঘরে</a> স্বাগতম <a href=”http://www.themore.cz.cc” target=”_self”>মোর কুঁড়েঘরে</a> স্বাগতম <a href=”http://www.themore.cz.cc” target=”_parent”>মোর কুঁড়েঘরে</a> স্বাগতম <a href=”http://www.themore.cz.cc” target=”_top”>মোর কুঁড়েঘরে</a> |
স্বাগতম মোর কুঁড়েঘরে স্বাগতম মোর কুঁড়েঘরে স্বাগতম মোর কুঁড়েঘরে স্বাগতম মোর কুঁড়েঘরে |
2.Image Link:-
গঠন Text Link-এর মতই কেবল yyyyy-এর মান কোন Text-এর পরিবর্তে যে ছবিটি ওয়েব লিংক হিসেবে ব্যবহার করতে চান তার লিংক বা অবস্হান লিখতে হবে ।
যেমন
input | ব্রাউজারে output |
---|---|
<a href=”http://www.tunerpage.com” target=”_blank”><img src=”http://www.tp.media.tunerpage.com/wp-content/uploads/2011/07/ert.png”/></a> | ![]() |
3.Internal Link:-
একই পেজের মধ্যে উপর থেকে নিচে বা নিচ থেকে উপরে কোথাও যাবার জন্য এই লিংকটি ব্যবহার করা হয় ।এক্ষেত্রে আমাদের করণীয় কাজ দুটি ।প্রথমে যে টেক্সস্টটিকে লিংকের আউটপুটের ফলাফল হিসেবে ব্যবহার করা হবে তাতে <a> ট্যাগের name Attribute টি ব্যবহার করা করতে হবে ।দ্বিতীয়ত আউটপুটে প্রদর্শিত টেক্সটিতে <a> ট্যাগের href Attribute টি ব্যবহার করা করতে হবে ।অর্থাত্ এরকম হবে xxxxxxxx<a name=”yyyy”></a> (১ম টি) ,<a href=”#yyyy”>zzzzz</a> (২য় টি) ।
যেমন
input | ব্রাউজারে output |
---|---|
Html Link:-<a name=”about_link”></a> Learn About<a href=”#about_link”>Html Link</a> |
Learn About Html Link |
4.Email Link:-
কোন বৈ-ডাকের ঠিকানাকে ওয়েবপেজে তুলে ধরতে ব্যবহার করা হয় Email Link । এর গঠন <a href=”mailto:xxxxxx@xxxxxx.xxx”>yyyyyy</a> । এর আউটপুটের yyyyyy-তে ক্লিক করলে আপনার কম্পিউটারে ইনস্টল থাকা মেইল সার্ভারটি xxxxxx@xxxxxx.xxx ঠিকানায় একটি মেইল পাঠাবার জন্য প্রস্তুত হবে ।
যেমন
input | ব্রাউজারে output |
---|---|
সাহায্যের জন্য <a href=”mailto:tunerpage@hotmail.com”>এখানে</a> মেইল করুন । | সাহায্যের জন্য এখানে মেইল করুন । |
Html Image:-
ওয়েবপেজের একটি গুরুত্বপূর্ণ বিষয় হল ছবি।পেজের মধ্যে যত ভাল ছবি বা ব্যানার থাকবে পরিদর্শক তত বেশি আকর্ষিত হবে।ওয়েব পেজের মধ্যে কোন ছবি যোগ করতে ব্যবহৃত হয় img ট্যাগ আর src Attribute । src Attribute টির মান হয় যে ছবিটি ওয়েবপেজে প্রকাশ করতে চান তার অবস্হান ।এর গঠন <img src=”http://www.xxxxxx.xxx/xxxxx/xxxx.jpg”/> । লক্ষ্য করুন img ট্যাগটির সমাপ্তকরণ সূচক নেই ।img ট্যাগটির আরও কয়েকটি Attribute হল alt,align,valign,width,height । নেটওয়ার্কের কারনে ছবিটি প্রদর্শিত না হলে alt Attribute লেখা টেক্সটটি প্রদর্শিত হবে ।align Attribute-টির মান right,left,center-এই তিনটি,valign Attribute-টির মান top,bottom,center-এই তিনটি হয় । align ও valign Attribute দুটি দিয়ে ছবির প্রকাশের অবস্হান ঠিক করা হয় ।width ও height Attribute দুটি দিয়ে ছবির দৈর্ঘ্য ও প্রস্হ নির্দিষ্ট করা হয় ।Attribute দুটির মান হয় পূর্নাঙ্গ কোন গানিতিক সংখ্যা ।
যেমন
input | ব্রাউজারে output |
---|---|
<img src=”http://www.tp.media.tunerpage.com/wp-content/uploads/2011/07/ert.png” alt=”tunerpage” align=”right” width=”250″ height=”150″/> | ![]() |
আজ এ-পর্যন্তই ।ধন্যবাদন্তে
ভাল থাকুন নিজে আর ভাল রাখুন অপরকে…।
পোস্ট টা অনেক কাজের সেআর করার জন্য ধন্যবাদ Bangla SEO
প্রিয় কাকতারুয়া ভাই,
আপনার কারনে এইচ.টি.এম.এল টা খুব ভাল করে রপ্ত করতে পারছি.আপনাকে অসংখ্য ধন্যবাদ ভাইয়া………………………………টিউনারপেইজ কে……………………..
শিক্ষামূলক টিউন….. শেয়ার করার জন্ন আপনাকে ধন্নবাদ… (আমার কম্পিউটারে য-ফলা প্রোবলেম আছে)
চরম টিউন
কাকতাড়ুয়া ভাই, আপনার এই হ্ত্ম্ল চেইন টিউন গুলোর জন্য অনেক অনেক ধন্যবাদ। কিছুদিন আগে আমি HTML শেখা শুরু করেছি। তাই আপনার এই টিঊনগুলো দ্বারা আমার অনেক উপকার হচ্ছে। আশা করছি HTML সিরিজটি শেষ করে CSS এবং PHP নিয়েও এই রকম টিঊন করবেন।
আপনার এই টিউনটির তিন নম্বর পয়েন্ট আমি ঠিক ভাবে বুঝতে পারছি না। আমি নোডপ্যাডে Internal Link এর জন্য কোডটি লিখেছি কিন্তু তা কাজ করছে না। লিঙ্ক এ ক্লিক করলে File not found মেসেজ দেখায়। মনে করুন আমার পেজ এর প্রথমে Image নামের একটি হেডিং আছে, এর জন্য Internal link এর কোডটি কি হবে?
ধন্যবাদ।
ভাই হার্ডডিক্স থেকে কিভাবে ইমেজ নিব?
সেক্ষেত্রে আপনাকে img src=”xxxxx.jpg” (এক্সটেন সহ ছবিটির নাম) দিতে হবে আর যে ফোল্ডারে .html file টা সেভ করছেন সেই ফোল্ডারেই ছবিটিকে রাখতে হবে ।
ধন্যবাদ।
অনেক গুরুত্বপূর্ণ একটা বিষয় নিয়ে আজকের পোষ্টে আলোচনা করেছেন। এ বিষয়গুলো অনেক দরকার হয়। বিশেষ করে ব্লগিং করতে গেলে। আর যারা একটু সিনিয়র ব্লগার তাদের জন্য তো এগুলো জানা অবশ্যই দরকারী।
আপনার টিউটোরিয়াল গুলো সংগ্রহে রাখার মত, তাই আপনাকে একটা অনুরোধ যখন এই সিরিজের ১০ম পোষ্ট শেষ হবে তখন সবগুলো পোষ্টকে পিডিএফ করে কোনো সাইটে আপলোড করে দিয়েন। একসাথে সব বই আকারে থাকলে বুঝে বুঝে পড়তে খুব সুবিধা হবে। আমি পিডিএফ করে নিচ্ছি।
ধন্যবাদ আপনাকে
আপনার বক্তব্যটি মাথায় রাখব । ধন্যবাদ আপনার মতামতের জন্য
কাকতাড়ুয়া ভাইকে অনেক ধন্যবাদ। অনেক কষ্ট করে আমাদের জন্য তিনি এত সুন্দর একটি ধারাবাহিক টিউটোরিয়াল দিচ্ছেন।
ভাইয়া আপনার প্রতিটি টিউন দেখি।অনেক কিছু শিখতে পারছি।নেক্সট টিউন এর অপেক্ষায় আছি।
সাবিয়া, আপনাকে টিউনার পেজে স্বাগতম। আশা করি আমাদের সাথেই থাকবেন…..
বস্ উপরের লিংকগুলো টেস্ট করুন ! ওখানে ক্লিক করলে ইউ,টিউবের গান ওপেন হচ্ছে !
বিষয়টি বুঝলাম না , প্লিজ একটু দেখুন আমি টিউনগুলো দেখতে চাই !