تبلیغات
Fact World - فرمت بندی و کار با پاراگراف و متن در HTML

آموزش برنامه نویسی و مهارتهای وب

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 -


یکشنبه 13 مهر 1393

نظرات ()


شنبه 25 شهریور 1396 09:18 ق.ظ
Touche. Solid arguments. Keep up the amazing work.
سه شنبه 17 مرداد 1396 03:02 ب.ظ
When someone writes an post he/she keeps the plan of a user in his/her mind that how a user
can be aware of it. So that's why this article is outstdanding.
Thanks!
دوشنبه 16 مرداد 1396 06:13 ق.ظ
Asking questions are actually nice thing if you are not understanding anything totally, however this paragraph offers good understanding even.
شنبه 14 مرداد 1396 04:14 ب.ظ
Hmm it looks like your blog ate my first comment (it was extremely long) so I guess I'll just sum it up what I had written and say, I'm thoroughly enjoying your blog.
I too am an aspiring blog writer but I'm still new to the whole thing.
Do you have any tips for novice blog writers?

I'd genuinely appreciate it.
پنجشنبه 24 فروردین 1396 11:21 ب.ظ
BHW
I'm gone to inform my little brother, that he should also go to
see this web site on regular basis to get updated from hottest information.

نظر خود را ثبت کنید:

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



آگهی
آموزش طراحی سایت
webgoo.ir

آموزش برنامه نویسی و مهارتهای وب
امکانات جانبی


IP شما: ( )