در HTML برای قرار دادن متن ها از تگ پاراگراف یا <p> استفاده میکنیم . پاراگراف ها از بلوک های متن مرتبط به هم تشکیل شده اند و هر پاراگراف از پاراگراف قبلی خود توسط یک خط فاصله جدا می شود و در سطر بعدی نمایش داده می شود. توجه کنید که اگر ما بدون قرار دادن تگ p هم متنی را در سند html خود قرار دهیم این متن در صفحه وب نمایش می شود.
اگر نمیدانید چگونه سند html به وجود بیاورید مقاله جلسه اول را مطالعه کنید.
جلسه اول : “ ایجاد اولین سند html و آشنایی با ساختار صفحات آن ”
مانند:
<body> طراحی و سئو سایت متاوبز </body>
اما چرا ما باید از تگ پاراگراف برای قرار دادن متنهایمان استفاده کنیم؟
زیرا این نحوه ی قرار دادن متن به هیچ عنوان بهینه و منطقی نیست و در HTML برای هرکاری و هرچیزی تگ مخصوص وجود دارد پس باید از تگ مخصوص آن استفاده کرد تا برای مرورگرها و موتورهای جستجو قابل فهم و اسکن باشد.
نحوه ی تعریف تگ p در HTML
در HTML برای ایجاد پاراگراف ، از تگ <p> استفاده می کنیم، اگر به کدهای یک صفحه ی وب نگاه کنید ( با استفاده از کلیک راست > inspect ) تگ های p یا Paragraph را می بینید.
شکل کلی برای استفاده از تگ پاراگراف در HTML بصورت زیر می باشد :
<p>سایت طراحی و سئو سایت متاوبز</P>
در ابتدا تگ شروع <p> را قرار می دهیم ، سپس متن را وارد می کنیم و در نهایت با استفاده از تگ بسته <p/> ، پاراگراف را ایجاد می کنیم.
باید به نکات زیر در استفاده ار تگ p توجه کنید.
نکات مهم در استفاده از تگ ها در HTML
نکته 1 : اگر ما در تگ p متن ها را در خط بعدی به منظور قرار گرفتن آن متن در خط بعدی در صفحه وب قرار دهیم . آن متن به خط بعدی نمی رود مانند:
<p>
پاراگراف 1
پاراگراف 2
پاراگراف 3
</p>
صفحه وب به صورت زیر به نمایش در می اید.
برای اینکه ما پاراگراف ها را در سطرهای جدا داشته باشیم باید هر پاراگراف را در تگ p جداگانه قرار دهیم. مرورگر بصورت خودکار یک فضای خالی قبل و بعد پاراگراف ایجاد می کند تا یک پاراگراف از پاراگراف دیگر قابل تشخیص باشد!
مانند:
<p> پاراگراف 1 </p> <p> پاراگراف 2 </p> <p> پاراگراف 3 </p>
که به صورت تصویر زیر به نمایش در می آید.
حال اگر میخواهید که متن شما در یک پاراگراف باشد ولی در یک سطر دیگر نمایش داده شود میتوانید از تگ <br/> استفاده نمایید. مانند:
<p> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است </br>، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است،</br> و برای شرایط فعلی تکنولوژی مورد نیاز</br>، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد،</br> کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، </br>شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی</br>، و فرهنگ پیشرو در زبان فارسی ایجاد کرد</br>، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها</br>، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی،</br> و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. </p>
همان طور که در تصویر پایین می بینید متن ما بعد از تگ <br/> شکسته می شود و به سطر بعدی می رود.
نکته 2 :هر مقدار space یا فاصله بین کلمات در html قرار دهید فقط یک فاصله خالی توسط html در نظر گرفته می شود. به مثال زیر توجه کنید
<p> طراحی سایت و سئو متاوبز </p>
حالا نحوه ی نمایش آن را در صفحه وب ببینیم.
همانطور که در تصویر بالا می بینید تمامی فاصله ها به صورت یک فاصله در نظر گرفته شده است.
اگر میخواهید که فاصله ها در صفحه وب شما اعمال شود می توانید به جای تگ p از تگ <pre> استفاده کنید. مانند :
<pre> طراحی سایت و سئو متاوبز </pre>
حالا همانطور که در تصویر پایین می بینید فاصله ها در نظر گرفته می شود.
توجه داشته باشید که فراموش نکنید که تگ بسته ها را قرار دهید . به طور مثال اگر تگ بسته h2 قبل از تگ p را قرار ندهیم ، آنگاه پاراگراف ما به صورت h2 نمایش داده می شود. مانند:
<h2> طراحی و سئو سایت متاوبز
<p> گام به گام با هم به موفقیت نزدیک می شویم </p>
در تصویر پایین دقت کنید که متن ما درون تگ h2 قرار گرفته است و به صورت آن به نمایش در امده است. پس دقت کنید که تگ های بسته را فراموش نکنید.
برای آشنایی با تگ های heading مقاله جلسه دوم را مطالعه نمایید.
جلسه دوم : “ آموزش تگ های تیتر یا heading – تاثیر تگ هدینگ html در سئو سایت “.
با تمرین و کمک گرفتن از کدهای داخل مقاله به HTML مسلط شوید.
اگر سوالی دارید ما اینجا هستیم تا به سوالات شما عزیزان پاسخ دهیم ، همراهتان هستیم.
