know yourselves. information, computer, 7 wonders, various.

Wednesday, August 10, 2016

HTML_Part34


  ছবি Path বা URL
মনে করুন লোকাল হার্ডডিস্কে বর্তমান ফোল্ডারের অধীনে  images নামের ফোল্ডারের মধ্যে ছবিটি আছে সেক্ষেত্রে URL বা Path হবে।
<img src= "images/nova1.jpeg">

একই কম্পিউটারের ভিন্ন ড্রাইভে মনে করি e ড্রাইভে html2 নামের ফোল্ডারের মধ্যে ছবিটি আছে সেক্ষেত্রে file:/// প্রোটোকল ব্যবহার করতে হবে এবং তিনটি মান ব্যবহার করতে হবে। যেমন
<img src="file:///e:/html2/nova1.jpeg>

সার্ভারে রক্ষিত ছবির ক্ষেত্রে http:// প্রোটোকল বসাতে হবে যেমন
<img src="http://www.nova.com/html/nova1.jpeg>
নিচের প্রোগ্রামটি লক্ষ্য করুন


<!DOCTYPE html>
<html>
<body style="background-color:yyellow; color:red;">
<p>this image is from current folder
<img src = "bappi.jpg" height="75" width="75" /></p>

<p>this image is from images sub folder on current folder
<img src = "images\bappi1.jpg" height="75" width="75" /></p>

<p>this image is from another drive and folder
<img src = "file:///e:/html2/taka.jpg" height="75" width="75" /></p>
<p>this image is from www (url)
<img src = "http://www.novacomputerbd.com/images/win001.jpg" height="75" width="75" /></p>
</body>
</html>



ব্রাউজার দিয়ে খুললে নিন্মেক্ত ফলাফল পাওয়া যাবে।


ইমেজের  ALT Attributes
alt (Alternet Text) ব্যবহার করে ছবির সাথে টেক্সট সংযোজন করা যাবে। এতে কোন ব্রাউজার ছবিটি দেখাতে না পারলে টেক্সট দেখাবে। ফরম্যাট হবে : <img alt =”sample picture”/>

নিচের কোডিং সহ একটি HTML ফাইল তৈরী করুন।
<!DOCTYPE html>
<html>
<head>
<title> example of image with alt tag </title>
</head>
<body style="color:red;">
this image with alt tag <br />
<img src = "bappi.jpg" height="150" width="150" border="5" style="border-color:green" alt="Bappi's Photograph" /><br />
</body>
</html>
ব্রাউজার দিয়ে খুললে নিন্মেক্ত ফলাফল পাওয়া যাবে।


Link Element
প্রথমেই বলেছি ওয়েবে প্রথম পেজটির নাম HOME PAGE. এই পেজ বিভিন্ন ধরনের ইনফরমেশনের ইনডেক্স থাকে। ইনডেক্সের প্রতিটি আইটেমের উপর ক্লিক করলে সংশ্লিষ্ট আরেকটি পেজ ভেসে উঠে। ঐ পেজ থেকে আবারও অন্য পেজে যাওয়া যাবে অথবা Home Page-এ ফেরৎ আসা যাবে নির্দিষ্ট কিছু টেক্সট বা ইমেজের সাথে অন্য HTML ফাইলের লিংক তৈরি করে এই পেজ তৈরি করা হয়। সামান্য ডাটাসহ page1.html এবং page2.html নামের দুইটি HTML ফাইল তৈরি করুন এবং একই ফোল্ডারে রাখুন।
<a> Anchor ট্যাগ এবং href Attribute
এই ট্যাগের দ্বারাই লিংক তৈরি করা হয়। প্রথমত আমাদের জানতে হবে যে ফাইলটি লিংক করতে চাই তার  ঠিকানা। আমরা একই ফোল্ডারে রেখেছি বলে আলাদা ঠিকানা লাগবে না।
দ্বিতীয়ত নির্দিষ্ট টেক্সট বা ইমেজ, যার উপরে ক্লিক করলে নির্ধারিত লিংক ফাইলে যাওয়া যাবে। <a> বা <Anchor> ট্যাগের সাথে সবসময় যে Attribute টি ব্যবহৃত হয় সেটি হচ্ছে href (Hyper Referance) এটি ছাড়া Anchor ট্যাগটি অচল এবং এই ট্যাগের মধ্যে Text বা ইমেজের Path বলে দিতে হয়। এই ট্যাগের ফরম্যাট হচ্ছে-
<a href="url" বা  "file name.html"> text/image/object…………..</a>


Previous Post                                                                                           Next Post

  বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।

Book Name: Mastering Microsoft  Word
Writer: Bappi Ashraf
Published By: Gyankosh Prokashani
Amount of Pages: 464
First Publish: October-2004
Last Edition: We've February-2015 edition. Future edition may be existed!
Book Price: BDT 350 (30% Discount)
 The writer of this book has told that he has written this book with the concept of "teach yourself". On the other hand, Web Design is a thing which is interesting to learn. He has also told that the book is full of fan and enjoyment so that a person can learn Web Design by himself by playing with the example projects of this book.  Book's CD Link below... 

 cd

RELATED POST LINKS BELOW ********************************************