সহজ ভাষায় 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 নামে সেভ করুন



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

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

Safiul Hasan Rejvi

আমি একজন সাধারণ মানুষ ...সাধারণ মানুষ হিসেবে থাকতে চাই সব সময়........

Post a Comment

Previous Post Next Post