روش‌های استفاده از پاراگراف در HTML
 

روش‌های استفاده از پاراگراف در HTML

در این مقاله آموزشی، درباره نحوه استفاده از تگ پاراگراف و عناصر مرتبط با آن برای تولید پاراگراف‌های متنی کامل و راحت توضیح داده شده است.
چهارشنبه، 15 دی 1400 | Article Rating

یک پاراگراف همیشه از ابتدای یک خط جدید شروع می شود و معمولاً به صورت یک بلوک متنی ادامه پیدا می‌کند.

تگ پاراگراف در html

تگ <p> در اسناد HTML برای تعریف یک بلوک پاراگراف استفاده می‌شود.

همان طور که گفته شد پاراگراف‌ها همیشه از یک خط جدید شروع می شوند و مرورگرها به طور خودکار یک فضای خالی (حاشیه) قبل (بالا) و بعد ‌(پایین) پاراگراف اضافه می کنند تا بین عناصر دیگر مثل سرفصل‌ها و سایر پاراگراف‌ها یک فاصله و نظم ایجاد شود.

  • </>

    مثال برای درک بهتر آموزش اسناد HTML:

    <p>این یک پاراگراف متن است.</p>
    <p>این یک پاراگراف متن دیگر است.</p>
    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!



نحوه نمایش در HTML

نحوه نمایش در صفحات HTML از قبل مشخص نیست. در واقع شما نمی توانید مطمئن باشید که کدهای شما در یک سند HTML در مرورگر چگونه نمایش داده می شود.

صفحه نمایش های بزرگ یا کوچک و پنجره های مرورگرها با تغییر اندازه صفحه سند html همیشه نتایج متفاوتی ایجاد می کنند.

در اسناد HTML، نمی‌توانید نحوه نمایش کلمات را با افزودن فاصله‌های بیشتر یا افزودن خطوط خالی اضافی بین کلمات و جملات چیدمان کنید چون در کد HTML فاصله‌ّای اضافه و خطوط فاصله بین خط‌ها به صورت خودکار حذف شده و چیدمانی که در صفحه کد خود می‌بینید تغییر می‌کند.

هنگامی که کدهای شما در مرورگرها کامپایل شده و در صفحه مرورگر نمایش داده می شود، به طور خودکار هر فاصله و خط اضافی را حذف می کند. به مثال زیر توجه کنید:

  • </>

    مثال برای درک بهتر آموزش اسناد HTML:

    <p>
    این پاراگراف
    در         کد منبع خود
    از خطوط و فواصل         زیادی استفاده کرده است،
    ولی همان طور که      می‌بینید،      مرورگر
    خطوط مختلف را           نادیده می گیرد.
    </p>
    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!



خط افقی در HTML

تگ <hr> یک شکست موضوعی را در یک صفحه HTML تعریف می کند و اغلب به عنوان یک قانون افقی نمایش داده می شود.

عنصر <hr> برای جداسازی محتوا (یا تعریف تغییر) در یک صفحه HTML استفاده می شود:

  • </>

    مثال برای درک بهتر آموزش اسناد HTML:

    <h1>یک نمونه سرفصل نوع ۱</h1>
    <p>این یک متن پاراگراف است.</p>
    <hr>

    <h2>یک نمونه دیگر سرفصل نوع ۲</h2>
    <p>این یک متن پاراگراف دیگر است.</p>
    <hr>

    <h3>یک نمونه دیگر سرفصل نوع ۳</h3>
    <p>این یک متن پاراگراف دیگر است.</p>
    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!


تگ <hr> یک تگ خالی است، به این معنی که تگ پایانی ندارد. ولی شما می‌توانید برای تغییر شکل ظاهری این خط جدا کننده افقی با استفاده از ویژگی style ظاهر و سبک نمایش آ» را تغییر دهید.


شکستن خط در HTML

تگ <br> در HTML باعث شکستن خط و آغاز ادامه متن از ابتدای خط بعد می‌شود.

اگر می‌خواهید بدون بستن و باز کردن تگ پاراگراف و درون آن در پاسان یک جمله، ادامه متن را از ابتدای خط بعد آغاز کنید از تگ <br> استفاده نمایید و متن را ادامه دهید. با این کار خط شکسته شده و (یک خط جدید) ایجاد می‌شود:

  • </>

    مثال برای درک بهتر آموزش اسناد HTML:

    <p>این یک متن پاراگراف <br>است که از دو جا خطوط آن <br>شکسته شده است.</p>
    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!


تگ <br> یک تگ خالی است، به این معنی که تگ پایانی ندارد.


مشکل ثبت نوشتار شعر در HTML

همان طور که می‌دانید برای نوشتن سبک‌های خاصی از متن مثل سبک شعر نویسی نیاز به چیدمان و فاصله‌گذاری‌های دلخواه است. در این مثال با این که در کد html به شکل دلخواه نوشته شده ولی همان طور که قبلا اشاره شد مرورگر همه را در یک خط و کنار هم می‌چسباند:

  • </>

    مثال برای درک بهتر آموزش اسناد HTML:

    <p>
    گویند مرا که دوزخی باشد مست       قولی‌ست خلاف دل در آن نتوان بست

    گر عاشق و میخواره به دوزخ باشند       فردا بینی بهشت همچون کف دست
    </p>
    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!



راه حل ثبت نوشتار شعر در HTML با تگ <pre>

تگ <pre> HTML متنی با چیدمان و قالب از پیش تعیین شده را تعریف می کند.

متن داخل عنصر <pre> با فونت با عرض ثابت (معمولاً Courier) نمایش داده می‌شود، و هم فاصله‌ها و هم خطوط شکسته را حفظ می‌کند:

  • </>

    مثال برای درک بهتر آموزش اسناد HTML:

    <pre>
    			گویند مرا که دوزخی باشد مست       قولی‌ست خلاف دل در آن نتوان بست
    			
    			گر عاشق و میخواره به دوزخ باشند       فردا بینی بهشت همچون کف دست
    			
    </pre>
    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!



معرفی برخی خدمات مرتبط با راه اندازی کسب و کار آنلاین کارگزاران تجارت الکترونیک ایران

در صورتی که مایل به معرفی خدمات طراحی سایت ما به دوستان خود هستید لطفا این صفحه را برای ایشان به اشتراک بگذارید. همچنین می‌توانید اطلاعات بیشتری درباره خدمات ما در زمینه طراحی سایت فروشگاهی همچون طراحی سایت عطر، طراحی سایت شخصی، طراحی سایت شرکتی، طراحی سایت سازمانی با ورود به این صفحات به دست آورید. این که وب سایت مورد نظر شما از چه نوعی باشد را به ما بسپارید. بسته به امکانات و نیاز شما بهترین را برای شما انتخاب می‌کنیم. چه از نوع طراحی سایت با دی ان ان DNN (دات نت نیوک) باشد و چه از نوع طراحی سایت با وردپرس Wordpress می‌توانید از طریق صفحات مربوط به آن اطلاعات بیشتری کسب کرده و همه خدمات خود را از میزبانی وب و خرید هاست گرفته تا طراحی اپلیکیشن موبایل و آموزش طراحی سایت و سئو سایت SEO، آن را با خیال راحت به ما بسپارید. نکته قابل توجه این است که ما با هدف افزایش درآمد و رساندن شما به اهدافی که مد نظر دارید این کار را انجام می‌دهیم و این موضوع بسیار متفاوت است با این که بخواهید فقط یک سایت داشته باشید! چون هر طراحی سایتی شما را به اهداف‌تان نمی‌رساند. تخصص ما تجارت الکترونیک و راه اندازی کسب و کار آنلاین است و طراحی سایت تنها بخشی از این خدمات محسوب می‌شود. عکاسی 360 درجه از محصول و طراحی سیستم اختصاصی یکپارچه ERP و راهبری و چگونگی انجام کار برای رسیدن به درآمد آنلاین چیزی است که بسیاری از طراحان سایت نمی‌دانند. این در حالی است که هدف ما از طراحی سایت تمرکز روی به نتیجه رسیدن اهداف شما است نه طراحی سایت! کارگزار خدمات فناوری اطلاعات خود را به درستی و با دقت انتخاب کنید.

تصاویر
ثبت امتیاز
اشتراک گذاری
نظر جدید

تصویر امنیتی
کد امنیتی را وارد نمایید:

این صفحه را به دوستان خود معرفی کنید

با به اشتراک گذاری این صفحه، یک فرصت خوب به دوستان خود هدیه می‌دهید