آموزشآموزش HTMLاموزشاموزش htmlاینترنتزبان htmlمقالهوب سایت
موضوعات داغ

آموزش HTML – بخش دوم: تگ‌ پاراگراف

1398/6/23

بخش دوم آموزش html با سایت همراه یار

آموزش HTML
آموزش HTML

در اولین بخش از آموزش HTML،  مفاهیم ابتدایی اچ‌تی‌ام‌ال را یاد گرفتید و توانستید تا یک صفحه خالی را در اچ‌تی‌ام‌ال ذخیره کنید. حالا در بخش دوم خواهید توانست تا اولین‌ متن‌هایتان را وارد صفحه HTML کنید. با ما همراه باشید.

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

آشنایی با تگ‌ها – پاراگراف یا <p>

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

به مثال زیر نگاه کنید:

نمونه

<p>همه چی آرومه! </p>

<p>من به دنبال یادگیری طراحی وب با همراه یار هستم</p>

خرجی کد بالا در مرورگر:

همه چی آرومه!

 من در حال یادگیری طراحی وب با همراه یار هستم

نکات دیگر در رابطه با تگ <p>…<p/>:

تگ Pre:  زمانی که یک تگ <p></p> مورد استفاده قرار می‌گیرد،
اسپیس بین حروف یا متون دیده نمی‌شود.
در واقع دو جمله زیر در حین نمایش هیچ تفاوتی نمی‌کنند،
چرا که تگ <p></p> فاصله‌های اضافی
را نادیده می‌گیرد و همه چیز را سر هم نشان می‌دهد.

نمونه

 <p>متن ما به صورت پشت سر هم به نمایش در می‌آید </p>

<p>متن         با               فا صله های               فراوان فرقی برای تگ پاراگراف                  نمی کند </p>

<pre>متن         با               فا صله های               فراوان در         این تگ دقیقا          به همان شکلی که نوشته می‌شوند    به              نمایش                 می‌آیند

خروجی کد بالا در مرورگر :

متن ما به صورت پشت سر هم به نمایش در می‌آید

متن با فاصله های فراوان فرقی برای تگ پاراگراف ندارد.

متن         با               فا صله های               فراوان در         این تگ دقیقا          به همان شکلی که نوشته می‌شوند    به              نمایش                 می‌آیند

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

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

نمونه

 <p>   قرار می‌گیرد به خط بعدی می‌رود  <br>  متنی که بعد از تگ بی آر

خرجی کد بالا در مرورگر:

متنی که بعد از تگ بی آر

قرار می‌گیرد به خط بعدی می‌رود.

خلاصه قسمت دوم:

در این قسمت چیزهایی که یادگرفته‌ایم را به صورت کاملا خلاصه مرور می‌کنیم.

  • در دومین قسمت از سری آموزش HTML و سی‌اس‌اس با نحوه ایجاد یک پاراگراف متن در صفحه اچ‌تی‌ام ال آشنا شدیم و دانستیم که برای نوشتن متن از تگ <p> </p>استفاده می‌شود.. در ادامه با تگ‌های جانبی متن همچون pre آشنا شدیم و فهمیدیم که در واقع این تگ‌ها بدین صورت نوشته می‌شوند:
  • <pre> content </pre>.
  • همچنین متوجه شدیم که تگ‌های pre متن را دقیقا همان صورتی که نوشته می‌شوند نمایش داده می‌شوند ولی تگ‌های p اسپیس و فاصله‌ها را در بین متن نشان نمی‌دهد و در عوض متن را به صورت یکپارچه نشان می‌دهد.

    نوبت شما:

    از آنجا که هیچ کاری بدون تمرین کردن فایده ندارد، پس وقت آن رسیده تا خودتان دست به کار شوید و آنچه فرا گرفته‌اید را امتحان کنید. ما برای راحتی هر چه بیشتر، یک ادیتور آنلاین در صفحه ایجاد کرده‌ایم که با کمک آن می‌توانید به تمرین اچ‌تی‌ام‌ال بپردازید. در ضمن نگران فراموش کردن نباشید! آموزش‌های جلسه قبل در کنار آموزش‌های بالا هر وقت که دوست داشته باشید،‌ در اختیار شما است.

    پروژه این جلسه:

    • یک جمله دلخواه را با کمک تگ‌های P بنویسید (برای تمرین بیشتر توصیه می‌کنیم که تگ‌های اصلی صفحه آموزش HTML که در سری اول برایتان بازگو کردیم را در ابتدای صفحه یادداشت نمایید.)  مثلا: <p> من در حال یادگیری اچ‌تی‌ام‌ال هستم<p/>
    • حالا همین جمله را بار دیگر اما با اسپیس زیاد بین کلمات  و با کمک تگ p بنویسد! مثلا: <p>  من     به دنبال    یا دگیری برنامه                نویسی    هستم<p/>
    • بار دیگر جمله را  با اسپیس زیاد بین کلمات  ولی با کمک تگ pre بنویسد! مثلا: <pre>  من  بدنبال   یا دگیری برنامه   نویسی  هستم<pre/>نوشته توسط : امیرمحمد مسعودی کانال تلگرامی سایت بزرگ همراه یار

برچسب ها

امیرمحمد مسعودی

امیرمحمد مسعودی ساکن قم. اگر علاقه مند به امنیت هستید حتما پست های من را در سایت بزرگ همراه یار دنبال کنید. بزودی آموزش های زبان های برنامه نویسی و آموزش طراحی سایت گذاشته میشود.

نوشته های مشابه

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا