i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت به کلی متفاوت و کاملتر خواهد بود، این فرآیند زمانبر و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی مشخص است و به تناوب به روزرسانی می شود.
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
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>
<!-- https://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>
<!-- https://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>
<!-- https://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>
<!-- https://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>
<!-- https://webgoo.ir -->
</head>
<body>
خط جدید
<hr />
<br />
فاصله با br
<pre>
فاصله با pre
</pre>
</body>
</html>
sectionدسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
» کاربرد تگ img و نمایش تصاویر در HTML
» کار با تگ فرم (form) در HTML
» لایه بندی در HTML با تگ div و span
» ایجاد جدول با تگ table در HTML
» نحوه ایجاد لینک در HTML
commentنظرات (۱۱ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: 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;
نویسنده: محمود
زمان: ۱۰:۰۵:۴۳ - تاریخ: ۱۳۹۷/۰۴/۲۵
سلام استاد عزیز.
با تشکر از سایت خوب و پربارتان.
میخواستم یک پاراگراف را انتخاب (با های لایت کردن آن یا با رویدادهای دیگر در جاوا اسکریپت) ، با زدن یک دکمه آن را وارد یک textarea فرم کنم و هم انجا متن را تغییر و بعد از زدن دکمه تغییر، متن جدید به جای متن قبلی بشیند. دستور و کد دکمه که متن را وارد فرم textarea کنم باید چگونه باشد. لطفن راهنمایی کنید . خیلی دنبالش کشتم.
مثلن وارد همچین فرمی
<script type="application/javascript">
function getSelectionText(){
var text = "";
var activeEl = document.activeElement;
var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;

if((activeElTagName == "textarea")
|| (activeElTagName == "input"
&& /^(?:text|search|password|tel|url)$/i.test(activeEl.type))
&& (typeof activeEl.selectionStart == "number")){
text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
} else if(window.getSelection){
text = window.getSelection().toString();
}

return text;
}

window.onload = function(){
var button_elm = document.getElementById('button');

button_elm.onclick = function(){
document.getElementById("textarea").innerHTML = getSelectionText();
};
}
</script>
<form id="form1" name="form1" action="#">
<textarea name="textarea" id="textarea"></textarea>
<input type="button" name="button" id="button" value="جاگذاری">
</form>
<p>این متن را انتخاب کنید!</p>
آیا امکانش هست . لطفن کمک و راهنمایی کنید.
پاسخ: 
انجام این موارد به ظاهر ساده نیازمند تسلط کامل بر جاوا اسکریپت است، کاری که می خواهید انجام دهید باید در چند مرحله مختلف صورت گیرد (انتخاب و انتقال به محیط ویرایش، ویرایش، انتقال به رنج انتخاب شده قبلی) که هر کدام از این مراحل باید جداگانه کدنویسی شوند و بعضا راه حل های پیچیده ای دارند، به هر صورت برای شروع مرحله انتخاب و انتقال به محیط ویرایش در کد بالا اعمال شده است.
نویسنده: محمود
زمان: ۱۱:۵۶:۰۸ - تاریخ: ۱۳۹۷/۰۴/۲۵
استاد عزیز بسیار متشکرم. برای انتقال متن ویرایش شده به جای متن قبلی نیز تلاش خودم را می کنم . مگر باز مزاحمتان می شوم.
با تشکر بزرگواری کردید.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




3 × 6
 refresh
آگهی
سفارش آگهی تبلیغاتی
Webgoo.ir

هزینه منصفانه، بازخورد مناسب