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

 

تا این مرحله از آموزش مقدماتی 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://geeklearning.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://geeklearning.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://geeklearning.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://geeklearning.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://geeklearning.Ir -->
</head>
<body>
خط جدید
<hr />
<br />
فاصله با br
<pre>
فاصله با pre
</pre>
</body>
</html>