parsgreen.com
article

فرمت بندی و کار با پاراگراف و متن در HTML

html-p-b-br-strong

تا این مرحله از آموزش مقدماتی html، تگ های اصلی و کلیدی این زبان پایه برنامه نویسی وب را شناختیم و با متاتگ ها و انواع گوناگون آنها آشنا شدیم، گفتیم که به کار بردن برخی از متاتگ ها در صفحات وب اجتناب ناپذیر است و برخی نیز جنبه اختیاری دارند، اکنون و در ادامه آموزش های مقدماتی، می خواهیم در رابطه با عناصر و تگ های مرتبط با فرمت بندی، متن و پاراگراف در html صحبت کنیم و به بررسی تگ های <p>،<b>،<br>،<pre>،<strong>،<i>،<em> و <hr> خواهیم پرداخت.

متن در html:


متن در html هم می تواند به صورت ساده مورد استفاده قرار گیرد و هم بین تگ های html؛ در کد زیر متنی فرضی بدون استفاده از تگی خاص در صفحه نشان داده می شود.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | متن بدون فرمت بندی</title>
<!-- http://webgoo.ir -->
</head>
<body>
متن بدون فرمت بندی
</body>
</html>

فرمت بندی با پاراگراف:


در html از تگ <p> برای فرمت بندی و نمایش یک پاراگراف استفاده می شود، ویژگی های پاراگراف را نیز می توان با کدهای css به صورت مورد نظر درآورد، مثال زیر متنی در یک پاراگراف است.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | متن در یک پاراگراف</title>
<!-- http://webgoo.ir -->
</head>
<body>
<p>
متن در یک پاراگراف
</p>
</body>
</html>

برجسته کردن متن در html:


برای متمایز نمودن یک نوشته از سایر کلمات در html، از تگ های خاصی استفاده می شود، برای متون برجسته از <b> و برای متون کج یا italic از <i>؛ اما چیزی به نام html semantic یا معنایی وجود دارد که توصیه می کند به جای استفاده از این تگ ها به عنوان استایل متن، از <strong> و <em> استفاده کنیم.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | متن برجسته با strong</title>
<!-- http://webgoo.ir -->
</head>
<body>
<strong>
متن برجسته
</strong>
</body>
</html>
متن کج شده با تگ em:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | متن کج شده با em</title>
<!-- http://webgoo.ir -->
</head>
<body>
<em>
متن کج شده
</em>
</body>
</html>

ایجاد خط و فاصله در html:


برای ایجاد خط در html به طور ساده از تگ hr استفاده می شود، ویژگی های این تگ نیز به وسیله css قابل تغییر است، علاوه بر این از تگ های br و pre برای ایجاد سطر جدید یا line break استفاده می شود، البته pre کمی نسبت به br تفاوت دارد و از استحکام بیشتری برخوردار است، مثلا اگر بخواهید همان گونه که تایپ می کند به همان شکل نیز متن خود را ببینید، بهتر است که از pre به جای br استفاده کنید، چرا که مرورگرها هرکدام فاصله پیش فرض متفاوتی برای br در نظر می گیرند، اما pre را همه به یک صورت پردازش می کنند.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ایجاد خط و فاصله در html</title>
<!-- http://webgoo.ir -->
</head>
<body>
خط جدید
<hr />
<br />
فاصله با br
<pre>
فاصله با pre
</pre>
</body>
</html>
sectionدسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
» کار با تگ های ایجاد کننده لیست در HTML
» آشنایی با متاتگ ها (Meta tags) و کاربرد آنها در صفحات وب (HTML)
» لایه بندی در html با تگ div و span
» آشنایی با HTML، زبان پایه برنامه نویسی وب
» کار با تگ فونت (font) و استایل در html
commentنظرات (۹ یادداشت برای این مطلب ارسال شده است)
نویسنده: roya
زمان: ۱۷:۲۶:۴۴ - تاریخ: ۱۳۹۱/۱۰/۱۰
بازم خوب بود
نویسنده: مسعود
زمان: ۲۰:۲۷:۳۵ - تاریخ: ۱۳۹۲/۰۶/۱۸
دمت گرم
نویسنده: خلیل
زمان: ۱۷:۲۸:۵۴ - تاریخ: ۱۳۹۲/۰۷/۲۵
فدات خیلی خوب بود
نویسنده: یحیی
زمان: ۰۶:۳۹:۲۶ - تاریخ: ۱۳۹۲/۰۹/۱۹
با عرض سلام و خسته نباشید
به چه صورت می توان پاراگراف را با خاصیت justify تنظیم کرد
پاسخ: 
سلام
برای این کار باید از استایل CSS استفاده کنید، مثال:
<div style="text-align:justify;">متن</div>
نویسنده: farzam
زمان: ۲۰:۱۰:۰۵ - تاریخ: ۱۳۹۳/۰۱/۰۶
خوب بود مرسی
نویسنده: محمد
زمان: ۰۱:۱۳:۰۹ - تاریخ: ۱۳۹۳/۰۳/۰۳
سلام
برای ویرایش متن از ویرایشگر Tiny استفاده کردم و با این ویرایشگر میشه رنگ دلخواه به متن داد
مسئله اینه که یک متن را که مثلا با رنگ سفید نوشته شده قرار است در دو جای مختلف نشان دهیم که یک جا پس زمینه سفیده جای دیگه مشکی
طبیعتا اونجایی که پس زمینه سفید است متن دیده نمیشه خب میشه یک تگ p یا span قرار دادن و رنگ را عوض کرد ولی مشکل اینجاست که این ویرایشگر برای رنگ دادن به متون از تگ span استفاده میکنه و به صورت درون خطی استایل میده که اولویت بالاتری داره چه جوری این مشکل رو حل کنم؟
پاسخ: 
سلام
زمانی که شما با یک ویرایشگر به متنی رنگ اختصاص می دهید، قاعدتا باید با توجه به یک پس زمینه این کار انجام شود (معمولا پس زمینه سفید)، این ویرایشگرها نیز با همین فرض به صورت خطی استایل را اختصاص می دهند، اگر قرار است مطلب در دو جا نمایش داده شود، یا باید دو مطلب مجزا باشد یا اینکه از امکان رنگ ویرایشگر استفاده نکنید (و استایل را به صورت CSS به بلاکی اختصاص دهید که کل مطالب درون آن نمایش داده می شود)، به هر حال در شرایط فعلی برای تغییر رنگ فونت راهی جزء استفاده از جاوا اسکریپت وجود ندارد.
نویسنده: زهرا
زمان: ۰۷:۵۶:۴۷ - تاریخ: ۱۳۹۳/۰۵/۲۸
با سلام و تشکر از مطالب خوبتون
قصد تغییر سایز و رنگ description در متاتگ ها را داشتم چگونه این کار را انجام دهم لطفا من را راهنمایی نمایید ممنون از شما
پاسخ: 
سلام
سوالتان مبهم است!
متاتگ description هیچ جلوه بصری ندارد و در واقع صرفا برای پردازش ربات های جستجوگر در خروجی صفحه وجود دارد، کابران این متاتگ را به صورت مستقیم مشاهده نمی کنند.
نویسنده: محسن
زمان: ۱۸:۵۴:۰۹ - تاریخ: ۱۳۹۴/۰۲/۲۶
سلام
می خواستم بدونم برای نوشتن این کدها باید به نوشتن حروف کوچیک و بزرگ دقت کنیم؟
پاسخ: 
سلام
خیر، الزامی نیست، اما بهتر است همیشه تگ ها را به حروف کوچک بنویسید.
نویسنده: M.D
زمان: ۰۱:۳۹:۳۷ - تاریخ: ۱۳۹۴/۰۳/۲۲
با سلام و خسته نباشید و نیز تشکر از سایت خوبتون.
میخواستم یکسری اطلاعات ازکاربر گرفته بشه و به همون شیوه ای که مینویسه نمایش داده بشه. (یعنی بدون نیاز به کد <br> به خط بعد بره، از space به صورت متوالی و متعدد استفاده کنه و...) واسه همین دیدم این تگ مناسب ترین گزینه است. اما همانطور که می دونید، ایرادی که این تگ داره اینه که متن رو به صورت اتوماتیک نمیشکنه و همینطوری ادامه میده حتی اگر از گروهی که توشه بیرون بزنه.
می خواستم بدونم راهی هست که بشه این مشکل رو رفع کرد که متن به پایان div width که توشه میرسه به خط بعد بره؟ با CSS یا تعویض این تگ با یک تگ دیگه؟
ممنون میشم جوابم رو بدید
پاسخ: 
سلام
باید به چند نکته توجه کنید:
- تگ br یک خط جدید یا line break در سند HTML ایجاد می کند و این الزاما به عرض بلاک ارتباط ندارد (یعنی هر کجا از br استفاده کنیم، یک خط پائین تر می رویم!)
- به طور معمول نباید متن های داخل یک بلاک از عرض آن خارج شوند، مگر اینکه به فرض متن پیوسته و بدون فاصله بین حروف باشد، لذا حالتی که در سوالتان عنوان کردید، حالت عادی نیست!
- برای شکستن و نمایش دلخواه حروف در CSS می توانید از مقایدر زیر در استایل بلاک مورد نظر استفاده کنید:
word-wrap:break-word;
white-space:pre-line;




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

9 × 7
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...