ওয়েব পেজে ইমেজ গ্যালারী যুক্ত করার প্রণালী
যদি এই ইমেজ গ্যালারীটিই একটি সম্পূর্ণ পেজ হিসেবে কোন সাইটে ব্যবহার করতে হয় তাহলে তেমন বিশেষ কিছু করার প্রয়োজন নেই। কিন্তু যদি কোন পেজের মধ্যে ব্যবহার করতে হয় তাহলে <style></style> এর মধ্যের কোড সমূহ ঐ পেজের স্ট্যাইল শীটে যুক্ত করে দিতে হবে । এক্ষেত্রে খেয়াল রাখতে হবে কোন সিলেক্টর যেন ঐ পেজের সিলেক্টরের সাথে মিলে না যায়। যদি দুই একটা সিলেক্টর মিলে গিয়ে থাকে, তাহলে তা অন্য নামে পরিবর্তন করে দিতে হবে এবং HTML অংশেও পরিবর্তন করতে হবে।এছাড়া .galpic:hover span সিলেক্টরের স্ট্যাইলের বড় ইমেজটির top: 196px; left: 14px; পরিবর্তন করতে হতে পারে।<body> </body> এর মধ্যের অংশটুকু ঐ পেজের এর মধ্যের কোড সমূহ ঐ <body> </body> এর মধ্যে যে ইলিমেন্ট এর পরে ইমেজ গ্যালরীটি রাখতে হবে তার পরে যুক্ত করে দিতে হবে।এমন হতে পারে কোন একটা পেজের শুরুতে একটা <h1></h1> এর পর <p></p>এর তারপর আবার <h1></h1> আছে, তার পর ইমেজ গ্যালারীটি প্রদর্শন করতে হবে। তাহলে <h2></h2> এর পরে gallery.html এর <body> </body> এর মধ্যে অন্তর্ভূক্ত কোড সমূহ রাখতে হবে।তাহলে ইমেজ গ্যালারীটি ঐ পেজে যুক্ত হয়ে যাবে।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> Gallery</title>
<style>
body{background:#FCC;
padding-left:15px;}
p{color:#036;
font-family:Tahoma;
font-size:12px;
text-align:justify;}
h1{color:#C03;
font-family:Tahoma;
font-size:24px;}
h2{color:#960;
font-family:Tahoma;
font-size:20px;}
#container{
background:#999;
width:345px;
height:425px;
padding:7px 2px 7px 7px;
border:1px #000 solid;
position:relative;}
.galpic span{
position:absolute;
left: 0px;
visibility:hidden;}
.galpic img{
border: 1px solid #f00;
margin: 0 5px 5px 0;}
#screen{background:#000;
width:320px;
height:223px;
border:8px #960 solid;}
#screen h1{color:#F00;
font-family:Tahoma;
text-align:center;}
.galpic:hover img{
border: 1px solid blue;}
.galpic:hover span{
visibility: visible;
top: 196px;
left: 14px;
background:#EBEDBA;
border:1px solid #f00;
padding:6px;
text-decoration:none;
font-family:Tahoma;
font-size:18px;
font-weight:bold;
}
</style>
</head>
<body>
<h1>Welcome to www.tutowebs.com</h1>
<p>TutoWebs is leading outsourcing company that provides creative Graphics and Web Design, interactive and responsive Web Development, IT consultancy, Domain Registration and Web Hosting service.</p>
<h2>Our example Image Gallery </h2>
<div id="container">
<a class="galpic"><img src="1.jpg" width="163px" height="80px" /><span><img src="1.jpg" width="300px" height="185px" /><br /><i>
text </i></span></a>
<a class="galpic"><img src="2.jpg" width="163px" height="80px" /><span><img src="2.jpg" width="300x" height="185px" /><br />
<i>text</i></span></a>
<br />
<a class="galpic"><img src="3.jpg" width="163px" height="80px" /><span><img src="3.jpg" width="300x" height="185px" /><br />
<i>text</i></span></a>
<a class="galpic"><img src="4.jpg" width="163px" height="80px" /><span><img src="4.jpg" width="300x" height="185px" /><br />
<i>text</i></span></a>
<br />
<div id="screen"><h1>Gallery<br />Screen</h1></div>
</div>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।
কপি রাইট © ২০১১থেকে যতদিন চলবে সর্বস্বত্ত্ব সংরক্ষিত