সাম্প্রতিক

10/recent/ticker-posts

Header Ads Widget

WEB DESIGN - HTML PART 02


 

HTML body tag Elements কি?

Browser এর body তে কিভাবে data প্রদর্শিত হবে তা HTML body tag Element এর মাধ্যমে নির্ধারণ করা হয়। এবং এটি </head> ট্যাগ এর পরেই বসে। আর html এর <body> </body> এর মধ্যে অবস্থিত সব tag body tag elements 


HTML body tag element কি কি?

v  Heading Tag Elements

v  Paragraph Tag Elements

v  List Tag Elements

v  Link Tag Element

v  Image Tag Element

v  Text Formatting Tag Elements

v  Layout Tag Elements

v  Iframe Tag element

v  Table Tag Elements

v  Form Tag Elements

v  Block Tag Elements


Heading Tag Element কি?

HTML এর মাধ্যমে কোন ডকুমেন্ট বা প্যারাগ্রাফের শিরোনাম লেখার জন্য Heading Tag ব্যবহার করা হয়। HTML মোট ছয় ধরণের হেডিং ট্যাগ রয়েছে এগুলো হল <h1> </h1> , <h2> </h2> , <h3> </h3> , <h4> </h4> , <h5> </h5> এবং <h6> </h6>

Example of Heading Tag Element

<!DOCTYPE html>

<html>

<head>

    <title>HTML Heading Example</title>

    

</head>

<body>

    <h1>This is an example of heading 1</h1>

    <h2>This is an example of heading 2</h2>

    <h3>This is an example of heading 3</h3>

    <h4>This is an example of heading 4</h4>

    <h5>This is an example of heading 5</h5>

    <h6>This is an example of heading 6</h6>

</body>

</html>


Paragraph Tag Element কি?

যে কোন ডকুমেন্ট এক বা একাধিক প্যারাগ্রাফের মাধ্যমে লেখা হয়। HTML প্যারাগ্রাফ তৈরির জন্য <p> বা প্যরাগ্রাফ ট্যাগ ব্যবহার করা হয়। যেমন <p>This is a paragraph.</p> ব্রাউজারের মাধ্যমে প্রতিটা প্যারাগ্রাফ প্রদর্শন করা হলে প্রতিটা প্যারাগ্রাফের পর একটা করে লাইন ব্রেক তৈরি হয়

Example Of Paragraph Tag Element

<!DOCTYPE html>

<html>

<head>

    <title>HTML Paragraph Example</title>

    

</head>

<body>

    <p>This is a paragraph.</p>

    <p>

        This is a paragraph.

        This is a paragraph.

        This is a paragraph.

        This is a paragraph.

    </p>

</body>

</html>


List Tag Element কি?

আমাদের দৈনন্দিন দিনের বিভিন্ন বিষয়কে যেমন লিস্ট আকারে সাজায় রাখি। ঠিক একই ভাবে একটা ওয়েব পেজের কনটেন্ট কে সুন্দর করে সাজানো এবং এর তথ্য উপস্থাপনার অন্যতম পদ্ধতি হচ্ছে লিষ্ট HTML এর মাধ্যমে তিন ধরণের লিষ্ট তৈরি করা যায়,

একটি হচ্ছে Order List

এবং দ্বিতীয়টি হচ্ছে Un-Order List

এবং তৃতীয়টি হচ্ছে definition List Order List

বিভিন্ন তথ্যকে পর্যায়ক্রমিকভাবে সাজিয়ে উপস্থাপন করা হয় এবং প্রতিটা লাইনের শুরুতে ক্রমিক সংখ্যা থাকে। অন্যদিকে Un-Order List প্রতিটা লাইনের সামনে ছোট বৃত্তাকার বা বর্গাকার চিহ্ন সহ অনেক ধরণের লিস্ট থাকে। আর definition list দিয়ে বিভিন্ন বিষয়ের ডেফিনেশন কে লিস্ট আকারে সাজানো হয়। HTML এর মাধ্যমে

Un-Order List তৈরি করার জন্য <ul></ul>

এবং Order List তৈরি করার জন্য <ol></ol> ট্যাগ ব্যবহার করা হয়।

আর definition list তৈরী করার জন্য <dl></dl>,<dt> এবং <dd></dd > তিনটি ব্যবহৃত হয়


Example of un-order list

<!DOCTYPE html>

<html>

<head>

    <title>HTML Un Order List Example</title>

    

</head>

<body>

    <h4>Disc Type list</h4>

    <ul type="disc">

        <li>Home</li>

        <li>About Us</li>

        <li>Contact Us</li>

    </ul>

    <h4>Circle Type list</h4>

    <ul type="circle">

        <li>HTML</li>

        <li>CSS</li>

        <li>PHP</li>

    </ul>

    <h4>Square Type list</h4>

    <ul type="square">

        <li>Pragaph</li>

        <li>Table</li>

        <li>List</li>

    </ul>

</body>

</html>


Example of Order list

<!DOCTYPE html>

<html>

<head>

    <title>HTML Order List Example</title>

    

</head>

<body>

    <h3>Alphabet Type list</h3>

    <ol type="A">

        <li>Home</li>

        <li>About Us</li>

        <li>Contact Us</li>

    </ol>

    <h3>Number Type list</h3>

    <ol type="1">

        <li>HTML</li>

        <li>CSS</li>

        <li>PHP</li>

    </ol>

    <h3>Roman Number Type list</h3>

    <ol type="I">

        <li>Pragaph</li>

        <li>Table</li>

        <li>List</li>

    </ol>

</body>

</html>


Example of Definition list

<!DOCTYPE html>

<html>

<head>

    <title>Definition List Example</title>

    

</head>

<body>

    <dl>

        <dt>UK</dt>

         <dd>United Kingdom</dd>

        <dt>USA</dt>

         <dd>United States of America</dd>

    </dl>

</body>

</html>



Post a Comment

0 Comments