نحوه استفاده از متن در صفحاتHTML

بدون شک بیشترین محتوای یک صفحه وب را متن تشکیل می دهد و نحوه نگارش آن تأثیر بسزایی در جذب مخاطب و بهبود وبسایت شما در موتورهای جستجویی مانند گوگل دارد بطوریکه حتی مقاله نویسی (تولید محتوای متنی) به یکی از مشاغل درآمدزا در اینترنت تبدیل شده است.

ایجاد پاراگراف

پاراگراف بدنه اصلی یک متن (نوشته) می باشد که توسط تگ <p> می توان آن را ایجاد نمود. این تگ یک عنصر بلاکی می باشد، به این معنی که هنگام استفاده از این تگ، کل سطر اشغال شده (حتی اگر محتوای این تک بخشی از سطر را پوشانده باشد( و بصورت پیشفرض عنصر دیگری نمی توان در مجاورت آن قرار داد.

<p> welcome to beno academy</p>

تیتر گذاری

در html بنا بر اولویت می توان از 6 نوع تیتر استفاده کرد که برای ایجاد آنها می توان از تگ های <h1> تا <h6> استفاده نمود. تگ <h1> دارای بالاترین اولویت و <h6> دارای کمترین اولویت می باشد.

<h1> Heading 1</h1>
<h3> Heading 2</h3>
<h3> Heading 3</h3>
<h3> Heading 4</h3>
<h3> Heading 5</h3>
<h5> Heading 6</h5>

ایجاد خط افقی

یکی از روش های جدا سازی بخش ها، استفاده از خط جدا کننده (افقی) می باشد که توسط تگ <hr /> می توان آن را ایجاد نمود، این تگ، از نوع تکی بوده و تگ بسته ندارد.

<p>paragraph 1</p>
<hr />
<p>paragraph 2</p>

انتقال به خط بعدی

هنگامی که متنی داخل تگ <p> قرار می گیرد، بصورت پیش فرض آن را یک پاراگراف در نظر می گیرد. فاصله ی بین پارگراف ها از فاصله بین خطوط موجود در یک پاراگراف بیشتر است. اگر قصد داشته باشید محتوای یک پاراگراف، با حفظ فاصله خطوط آن به خط بعدی منتقل شود، می توانید از تگ <br /> استفاده نمایید.

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.
    <br />
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

تمرین

صفحه ای ایجاد نمایید که حاوی دو تیتر بوده و هر تیتر دارای یک پاراگراف باشد. این دو بخش را توسط یک خط افقی از هم جدا کنید.

<!DOCTYPE html>
<html>
  <head>
    <title>آکادمی بنو</title>
  </head>
  <body>
    <h1>برنامه نویسی</h1>
    <p>
      لورم ایپسوم یا طرح‌نما به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن
      به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و
      کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی
      نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی،
      نخست از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا صرفا به مشتری یا صاحب
      کار خود نشان دهند که صفحه طراحی یا صفحه بندی شده بعد از اینکه متن در آن
      قرار گیرد چگونه به نظر می‌رسد و قلم‌ها و اندازه‌بندی‌ها چگونه در نظر گرفته
      شده‌است. از آنجایی که طراحان عموما نویسنده متن نیستند و وظیفه رعایت حق
      تکثیر متون را ندارند و در همان حال کار آنها به نوعی وابسته به متن می‌باشد
      آنها با استفاده از محتویات ساختگی، صفحه گرافیکی خود را صفحه‌آرایی می‌کنند
      تا مرحله طراحی و صفحه‌بندی را به پایان برند.
    </p>
    <hr />
    <h3>طراحی سایت</h3>
    <p>
      لورم ایپسوم یا طرح‌نما به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن
      به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و
      کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی
      نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی،
      نخست از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا صرفا به مشتری یا صاحب
      کار خود نشان دهند که صفحه طراحی یا صفحه بندی شده بعد از اینکه متن در آن
      قرار گیرد چگونه به نظر می‌رسد و قلم‌ها و اندازه‌بندی‌ها چگونه در نظر گرفته
      شده‌است. از آنجایی که طراحان عموما نویسنده متن نیستند و وظیفه رعایت حق
      تکثیر متون را ندارند و در همان حال کار آنها به نوعی وابسته به متن می‌باشد
      آنها با استفاده از محتویات ساختگی، صفحه گرافیکی خود را صفحه‌آرایی می‌کنند
      تا مرحله طراحی و صفحه‌بندی را به پایان برند.
    </p>
  </body>
</html>