সহজ ভাষায় Html টিউটোরিয়াল পর্ব (৫)







পাঠক
ভাইয়েরা
কেমন আছেন  আশা করছি ভালই আছেন আজকে আপনাদের জন্য নিয়ে আসলাম এইচটিএমএল এর  আর একটি পর্ব আশা করছি ভাল লাগবে সবার আর একটা
কথা বলে নিই অনেক নতুন ইউজার আছে তারা হয়ত এইচটিএমএল নাম শুনলে আর আগাতে চাই না বেশিরভাগ নতুন ইউজারই এইচটিএমএলকে অনেক কিছু মনে করে তাই
নতুন ইউজারদের উদ্দেশ্যে বলছি আসলে ভয় পাবার কিছু নেয় সবচেয়ে সহজ হল এইচটিএমএল শুধু নোডপেড হলে এইচটিএমএল পারবেন আর কিছু লাগবেনা..এই পর্বে কি কি আলোচনা করব তা আগে
থেকেই বলে নিই Html এ দিয়ে কিভাবে অ্যানিমেটেড লিখা দিবেন অর্থাৎ ডান পাশ থেকে বাম
লেখার স্ক্ররলিং অ্যানিমেশন কিভাবে দিবেন কিভাবে লেখার কলাম
তৈরী করবেন চলুন তাহলে শুরু করা যাক..







অ্যানিমেটেড টেক্সট


প্রথমে আপনার পিসিতে নোড পেড
অপেন করে নিচের কোডটি কপি করে নোডপেডে পেস্ট করুন তারপর .html নামে সেভ করুন অথবা
আমার আগের টিউন গুলো যারা ফলো করেছেন তারা এই আগের যে কোড গুলো বসিয়েছেন তার উপরে
যেকোন জায়গায় <head> বা <html> এ নিচে যেকোন জায়গায় পেস্ট করুন অতঃপর
এটাকে সেভ করুন এর পর সেভ করা ফাইলটি খুলুন দেখুন আপনার লেখাটি ডানপাশ থেকে বাম অ্যানিমেট
হচ্ছে









<head>


</head><body>


<div
id=”animation”><marquee>Welcome To Digital Bangladesh</marquee></div>


</body>


</html>









এইখানে Welcome To Digital
Bangladesh জায়গায় আপনার  ইচ্ছেমত যে কোন
লেখা লিখতে পারবেন অর্থাৎ এই লেখাটি অ্যানিমেটেড হবে উটা আপনার ইচ্ছামত পরিবর্তন
করতে পারবেন…





লেখার কলাম তৈরী


২টি পদ্ধতির কোড সেয়ার করছি
যার যেটা ইচ্ছা সেটা ইউজ করবেন


১ম পদ্ধতি


নিচের কোডটি কপি করে নোডপেড
অন করে পেস্ট করুন









<table
width="100%" cellpadding="0" cellspacing="10"
border="0">


    <tr>


        <td width="20%"
valign="top">


            <p>Columns in text are a very
handy tool.


            Unfortunately, most designers don't
use


            them because they're tedious to


            implement.</p>


        </td>


        <td width="20%"
valign="top">


            <p>However, if you take the time and
effort


            of putting them into use, you'll
find


            that they really add to the
aesthetics


            and functionality of your
work.</p>


        </td>


</td>


        <td width="20%"
valign="top">


            <p>However, if you take the
time and effort


            of putting them into use, you'll
find


            that they really add to the
aesthetics


            and functionality of your
work.</p>


        </td>


</td>


        <td width="20%" valign="top">


            <p>However, if you take the
time and effort


            of putting them into use, you'll
find


            that they really add to the
aesthetics


            and functionality of your
work.</p>


        </td>


    </tr>


</table>









তারপর anyname.html নামে সেভ
করুন





২য় পদ্ধতি


নিচের কোডটি কপি করে নোডপেড
অন করে পেস্ট করুন






<style>





    #columns {


        width: 600px;


    }





    #columns .column {


        position: relative;


        width: 46%;


        padding: 1%;


        border: solid 1px #000;


    }





    #columns .left {


        float: left;


    }





    #columns .right {


        float: right;


    }





</style>





<div
id="columns">


    <div class="left column">


        <p>Columns in text are a very
handy tool.</p>


        <p>Unfortunately, most designers
don't use


        them because they're tedious to
implement.</p>


    </div>


    <div class="right column">


        <p>However, if you take the time
and effort


        of putting them into use, you'll find


        that they really add to the aesthetics


        and functionality of your
work.</p>


    </div>


</div>









তারপর anyname.html নামে সেভ
করুন












উপরের ছবির মত করতে নিচের  ফাইলটি ডাউনলোড করে নিনফাইলটির মধ্যে সম্পূর্ণ কিছু দিয়ে দিয়েছি যাতে আপনাদের প্রেকটিসের সুবিধা হয়....





আজ এইটুকুতেই থাক পরের পর্বে নতুন কিছু নিয়ে দেখা হবে সেই পর্যন্ত ভাল থাকবেন সুস্থ থাকবেন ধন্যবাদ.....


Post a Comment

Previous Post Next Post