آشنایی با پاراگراف در HTML

HTML   
21 جولای 2014   

در html اگر هرچیزی نوشته شود در خروجی نمایش داده می شود. منظور از هرچیز متن هاست. اگر می خواهید در خروجی کلمه Hello World داشته باشید، می توانید چنین کدی داشته باشید:

در حال حاضر شما باید قسمت های دیگر کد یعنی غیر از کلمه ی Hello World را به خوبی بدانید.

اگر مرورگر را با کد بالا باز کنید چنین خروجی خواهید داشت:

آشنایی با پاراگراف در HTML

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

و می بینیم که در خروجی تفاوتی حاصل نشد:

آشنایی با پاراگراف در HTML

 

تگ پاراگراف یکی از پرکاربردترین و می توان گفت اصلی ترین تگ برای متون است که همیشه می توان از آن استفاده نمود و هیچ گاه متن و یا حتی عکس را بدون تگ رها نکنید!!!:D

این تگ تنها برای استفاده از متون نیست و همانطور که اشاره شد بیشتر برای متن های طولانی استفاده می شود و میتواند شامل هرنوع محتوایی مثل لینک یا تصویر باشد.

تگ های داخلی پاراگراف:

شما می توانید درون تگ پاراگراف تگ هایی دیگر استفاده کنید تا تغییرات دیگری را اعمال کنید. مثلا شما در نرم افزار word از مجموعه office بعضی کلمات را زیرخط دار کنید یا آن را توپر کنید و… تمام این کارها در html نیز امکان پذیر است. مثلا برای توپر کردن یا همان bold کردن می توانید از تگ <b> استفاده کنید یا برای اعمال سبک italic که متون را کج می کند از تگ <i> استفاده کنید. مثال آن در زیر آورده شده است:

که خروجی آن به شکل زیر است:

آشنایی با پاراگراف در HTML - تگ <b>

می بینید که کلمه ی Hello توپر شده است.

این قطعه کد هم مثالی از سبک italic است:

خروجی:

آشنایی با پاراگراف در HTML - تگ <i>

و همانطور که در این شکل هم می بینید کلمه ی Hello که داخل تگ <i> قرار گرفته به صورت کج یا italic درآمده است.

در زیر جدولی از این تگ ها آورده شده است:

نام تگ استفاده خروجی نمونه
<b> توپر Hello World
<i> کج Hello World
<big> سایز متن را کمی بزرگ تر می کند. Hello World
<strong> مانند تگ <b> عمل می کند. Hello World
<em> مانند تگ <i> عمل می کند Hello World
<small> سایز متن را کمی کوچک تر می کند. Hello World
<sub> متن را پایین تر از حالت عادی قرار می دهد. Hello World
<sup> حالت توانی به متن می دهد و آن را بالاتر از جایگاهش قرار می دهد Hello World
<pre> بیشتر برای نمایش کدهای برنامه نویسی و اسکریپت ها به کار می رود و پس از آن خط به پایان می رسد. HelloWorld
<code> مانند تگ <pre> ولی پس از پایان تگ خط به پایان نمی رسد. Hello World
<samp> نوشتن نمونه در متن Hello World
<dfn> مانند تگ <i> عمل می کند. Hello World
<kbd> حالت نمایش را مانند ورودی کلید های کی بورد تنظیم می کند. Hello World
<var> برای نمایش به صورت مقادیر کامپیوتری Hello World
<address> برای نوشتن آدرس و مشخصات (معمولا مؤلف سایت) HelloWorld
<del> کشیدن خط روی متن Hello World
<ins> زیرخط دار کردن متن Hello World
<cite> Hello World

 

دقت کنید که تمام این تگ ها بر روی کلمه ی Hello در عبارت Hello World اعمال شده است. همچنین شما مجبور نیستید که این تگ ها را در داخل تگ <p> استفاده کنید و تمام این تگ ها بویژه تگ هایی مثل address و code می توانند در خارج از تگ پاراگراف باشند.

علاوه بر این تگ ها چند تگ کاربردی دیگر نیز وجود دارد که به توضیح هرکدام می پردازیم:

تگ <abbr>:

همانطور که در قسمت های قبل گفته شد بعضی از تگ ها دارای صفت titile می باشند اما برای اینکه کارایی شبیه به صفت title در متون را داشته باشید می توانید از تگ <abbr> استفاده کنید. شکل کلی استفاده از آن به صورت زیر است:

این تگ دارای صفت title می باشد که کارایی آن مانند استفاده از آن در دیگر تگ ها مانند تگ لینک که قبلا توضیح داده شده می باشد. در اینجا مثالی از آن را می نویسیم:

و خروجی آن به شکل زیر است:

آشنایی با پاراگراف در HTML

که با قرار گرفتن اشاره گر موس بر روی کلمه Hello عبارت توضیحات نمایش داده می شود.

تگ <blockqoute>:

این تگ برای متونی به کار می رود که از کسی یا جایی نقل قول شود. مثلا در دیالوگ ها می توان از آن استفاده کرد. در زیر مثالی از آن را مشاهده می کنید:

که خروجی آن به شکل زیر است:

آشنایی با پاراگراف در HTML -

تگ <bdo>:

شما می توانید با استفاده از این تگ حروف یک عبارت را برعکس کنید. شکل کلی استفاده از آن به صورت زیر می باشد:

صفت dir جهت این عمل را مشخص می کند. اگر شما درحالت عادی به صورت راست به چپ (rtl) می نویسید باید این مقدار را چپ به راست (ltr) قرار دهید و برعکس.

حالا این تگ را برای عبارت Hello World مثال می زنیم. در اینجا صفحه ی ما به صورت ltr است پس مقدار صفت dir را برابر با rtl قرار می دهیم:

خروجی:

آشنایی با پاراگراف در HTML - تگ <bdo>

همان طور که می بینید ما تگ bdo را برای کلمه ی Hello اعمال کردیم در نتیجه تنها حروف این کلمه برعکس شد و اگر ما این تگ را برای تمام عبارت اعمال کنیم حاصل شکل زیر خواهد شد:

آشنایی با پاراگراف در HTML - تگ <bdo>

تگ <br/>:

اگر شما در صفحه ی html و در بین تگ پاراگراف بخواهید به خط جدید بروید با زدن کلید اینتر نمی توان این کار را انجام داد و حتی ممکن است دو کلمه در صفحه ی کدنویسی چند خط با هم فاصله داشته باشند اما در خروجی کنار هم و در یک عبارت و پشت سرهم نمایش داده می شود:

خروجی:

آشنایی با پاراگراف در HTML

برای رفتن به خط تاره در html باید از تگ <br/> استفاده کنید.همان طور که می بینید چون این تگ حاوی مقدار داخلی (مانند تگ هایی مثل تگ لینک) نیست پس از شروع شدن بسته می شود. بنابراین در عبارت Hello World کد حاصل چنین می شود:

و خروجی هم به شکل زیر است:

آشنایی با پاراگراف در HTML - تگ <br/>

تگ <hr/>:

این تگ برای رسم یک خط افقی استفاده می شود و مانند تگ <br/> دارای مقدار داخلی نیست. اگر بخواهیم دو بار کلمه Hello World را نوشته و بین آن خطی افقی رسم کنیم کد باید به شکل زیر باشد:

که مسلما خروجی به این شکل خواهد بود:

آشنایی با پاراگراف در HTML - تگ <hr/>