پاراگراف در زبان HTML – برنامه نویسی HTML بخش دهم
پاراگراف در زبان HTML
پاراگراف در زبان HTML عناصری در سطح بلوک هستند که برای ساختاردهی و فرمت دهی به نوشته های متنی در صفحه های HTML به کار گرفته می شود. یک پاراگراف در واقع متشکل از مجموعه کلمه ها، علائم نشانه گذاری و سایر موارد است. این تگ ها به شما اجازه می دهد که بتوانید اطلاعات نوشتاری را سازمان دهی کنید و بدون آشفتگی به کاربران خودتان نشان دهید. تگ <p> برای ساخت عنصر پاراگراف در زبان HTML به کار گرفته می شود.
مثال:
در زیر می توانید نمونه ای از کاربرد تگ <p>را مشاهده کنید:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Lorem ipsum odor amet, consectetuer adipiscing elit. Proin eros habitant accumsan vulputate curae eu fusce vehicula.</p>
<p>Laoreet sociosqu taciti iaculis cras leo nec litora. Nisi vehicula massa fusce justo libero duis. Per condimentum vivamus nec elementum nullam sociosqu vel scelerisque.</p>
</body>
</html>
علت استفاده از تگ پاراگراف در زبان HTML
تگ پاراگراف به صورت معمول سبب ایجاد فاصله میان نوشته ها می شود. همچنین با استفاده از تگ <p> حوزه نوشتاری شما از بقیه عناصر جدا می شود. با استفاده از این تگ می توانید به نوشته های خودتان استایل دهید کنید و فونت، اندازه، رنگ، چیدمان و فاصله گذاری بین نوشته ها را مشخص کنید. در زمان توسعه وب سایت ها، پاراگراف ها نقش بسیار مهمی را برای ارائه کارآمد اطلاعات بازی می کنند و می توانند برای شما ارتباطات شفاف را به ارمغان بیاورند. همچنین این تگ ها می توانند تجربه کاربر را به صورت کلی در وب سایت شما ارتقاء دهند.
ساخت یک پاراگراف در زبان HTML
برای آنکه بتوانید یک پاراگراف را در صفحه HTML خودتان ایجاد کنید باید از تگ <p> استفاده کنید. شما باید نوشته های خودتان را در میان دو تگ باز و بسته<p>و <p/> قرار دهید. با این کار شما می توانید مدیریت بهتری را بر روی صفحه های وب خودتان داشته باشید.
سینتکس تگ پاراگراف در زبان HTML
همانطور که در مثال بالا دیدید. نوشته هایی که ما قصد استفاده از آن ها را داشتیم در میان دو تگ <p>…<p/>قرار گرفتند.
شکستن خطوط در میان پاراگراف
شما می توانید از تگ <br>برای ایجاد شکست و رفتن بقیه نوشته به خط بعد استفاده کنید و با این کار نوشته های خودتان را طرح بندی کنید.
مثال:
در مثالی که در ادامه آماده است شما به نحوه به کارگیری تگ<br>در میان تگ پاراگراف خودتان آشنا می شوید.
<!DOCTYPE html>
<html>
<head>
<title>Line Breaks With Paragraphs</title>
</head>
<body>
<p>This is a paragraph with a <br> line break. </p>
</body>
</html>
به کار گیری تگ عناوین با تگ پاراگراف در HTML
تگ های عناوین ( <h1>تا<h6>) برای ساختار دهی سلسله مراتب نوشته به کار گرفته می شوند و می توانید از آن ها در درون تگ های پاراگراف نیز استفاده کنید
مثال
در این مثال شما می توانید تگ هایی عناوینی را ببنید که در درون پاراگراف ها به کار گرفته شدند.
<!DOCTYPE html>
<html>
<head>
<title>Headings With Paragraphs</title>
</head>
<body>
<h1>Main Heading</h1>
<p> This is a paragraph beneath the main heading. </p>
</body>
</html>
قرار دادن فهرست ها در درون تگ پاراگراف
لیست ها می توانند در درون تگ های پاراگراف قرار داده شوند تا به نوشته های ما نظم و انسجام بیشتری را بدهند.
مثال
در این مثال ما از یک لیست غیر منظم برای معرفی عناصر خودمان در یک تگ پاراگراف استفاده کرده ایم:
<!DOCTYPE html>
<html>
<head>
<title>Lists With Paragraphs</title>
</head>
<body>
<p>This is a paragraph following an unordered list.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
</html>
قرار دادن تگ تاکید در یک تگ پاراگراف
تگ هایی مانند تگ های<em> و<strong> تگ می توانند در درون تگ پاراگراف قرار بگیرند تا نشان دهنده تاکید ما بر روی یک بخش از نوشته باشند.
مثال
این مثال به شما نشان می دهد که چطور دو تگ em و strong در درون تگ پاراگراف به کار گرفته شده اند. شما می توانید از این روش برای برجسته کردن بخش های مهم نوشته خودتان استفاده کنید.
<!DOCTYPE html>
<html>
<head>
<title>Emphasis Within Paragraphs</title>
</head>
<body>
<p> This is a <em> paragraph </em> with <strong> emphasized </strong> text. </p>
</body>
</html>
قرار دادن تگ لینک در تگ پاراگراف
شما می توانید از تگ لینک را در درون تگ پاراگراف خودتان قرار دهید. با کمک این کار می توانید آدرس دهی های لازم میان صفحه ها را انجام دهید.
مثال
در مثال زیر ما یک لینک دهی به برخی از صفحه های سایت هاست باز را انجام داده ایم
<html>
<head>
<title>Links within Paragraphs</title>
</head>
<body>
<p>Visit our website <a href="https://www.hostbaz.com">here </a>. </p>
</body>
</html>
استایل دهی در خط برای تگ پاراگراف
با استفاده از تگ <span> شما می توانید به بخش های خاصی از تگ پاراگراف خودتان استایل دهی ویژه کنید.
مثال
در این مثال ما به بخش هایی از یک تگ پاراگراف استایل های ویژه ای را نسبت داده ایم. شما می توانید به جای استایل دهی در خط از استایل دهی CSS نیز استفاده کنید که در جای خودش به توضیح این موارد می پردازیم.
<html>
<head>
<title>Inline Styles Within Paragraphs</title>
</head>
<body>
<p>This is a <span style="color: blue;">blue</span> text within a paragraph. </p>
</body>
</html>
قرار دادن تصویر در درون تگ های پاراگراف
شما میتوانید تصویری را با استفاده از تگ <img> را در درون تگ پاراگراف قرار دهید و نوشته های مفهومی ایجاد کنید. البته از این روش بیشتر برای اضافه کردن آیکن ها و یا تصاویر کوچک استفاده می شود. برای روش های دیگر در جای خود توضیحات مفصلی را به شما ارائه می کنیم.
مثال
در این مثال ما از یک تصویر در میان تگ پاراگراف استفاده کرده ایم.
<html>
<head>
<title>Images Within Paragraphs</title>
</head>
<body>
<p> Here's an image: <img src="\html\images\test.png" alt="Example Image"> </p>
</body>
</html>
استفاده از توان نویسی و ایندکس نویسی در تگ پاراگراف
شما می توانید از تگ توان نویسی <sup> و تگ ایندکس نویسی <sub> در درون تگ های پاراگراف خودتان استفاده کنید.
مثال
در مثال زیر ما از ایندکس نویسی و توان نویسی در نوشته خودمان استفاده کرده ایم:
<html>
<head>
<title>Superscript and Subscript Within Paragraphs</title>
</head>
<body>
<p> H<sub>2</sub>O is the chemical formula for water. 2<sup>3</sup> equals 8.</p>
</body>
</html>
تگ خلاصه نویسی در تگ پاراگراف
تگ خلاصه نویسی <abbr> برای نشان دادن عبارت کامل بخش های خلاصه نویسی شده (سرنام) به کارگرفته می شود.
مثال
در مثال زیر ما یک عبارت کامل را به بخش خلاصه شده آن اضافه کرده ایم. با این کار اگر شما ماوس را بر روی نوشته خلاصه نگه دارید، توضیحات کامل آن برای شما نمایش داده می شود.
<html>
<head>
<title>Abbreviations within Paragraphs</title>
</head>
<body>
<p> <abbr title="Hypertext Markup Language">HTML</abbr> is used for web development.</p>
</body>
</html>
تگ نقد و مرجع در تگ پاراگراف
تگ <cite> برای این به کار می رود که ما نقد یا مرجعی را به یک نوشته اضافه کنیم.
مثال
در مثال زیر ما از تگ cite استفاده کردیم تا قسمتی از متن را به عنوان بخش مهم تر یعنی نام کتاب (War and Peace) را نشان دهیم.
<html>
<head>
<title>Citations Within Paragraphs</title>
</head>
<body>
<p> The book <cite>War and Peace </cite> is a classic novel. </p>
</body>
</html>
استایل بندی پاراگراف با استفاده از کدهای CSS
در ادامه این مطالب شما می توانید راه های گوناگون برای استایل دهی پاراگراف های HTML با استفاده از کدهای CSS را مشاهده کنید.
۱- به کار بردن کدهای CSS به شکل مستقیم در کدهای HTML
شما می توانید استایل های CSS را به صورت مستقیم در درون پاراگراف ها به کار ببرید. برای این کار باید از ویژگی style در تگ باز پاراگراف استفاده کنید.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="font-size: 24px; color: #f40;">This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p style="font-size: 24px; background-color: #f40; color: #fff;">This is the third paragraph.</p>
</body>
</html>
۲- به کاربردن تگ های CSS بر روی عنصر پاراگراف
شما می توانید کدهای استایل بندی CSS را بر روی تمام تگ های پاراگراف در پرونده HTML خودتان به کار ببرید. با این کار شما می توانید از قوانین مرتبط به CSS در تگ style به شکلی که در ادامه آماده است استفاده کنید.
<html>
<head>
<style>
p {
font-size: 22px;
color: #f40;
}
</style>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</body>
</html>
۳- به کار بردن کلاس های CSS برای پاراگراف های مختلف
شما می توانید استایل بندی CSS را برای پاراگراف های خاصی که به وسیله کلاس (Class) مشخص کرده اید به کار ببرید. در نتیجه پاراگراف های با استایل بندی های متنوع خواهید داشت. برای این کار باید از ویژگی Class به شکلی که در مثال زیر آماده است استفاده کنید.
<!DOCTYPE html>
<html>
<head>
<style>
.special {
font-size: 24px;
color: #f40;
}
</style>
</head>
<body>
<p class="special">This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p class="special">This is the third paragraph.</p>
</body>
</html>
در این مثال شما می توانید بر روی استایل های هر کدام از پاراگراف ها مدیریت داشته باشید. همچنین می توانید فرمت بندی های مختلفی را برای بخش های مختلف صفحه وب خودتان استفاده کنید.
درباره استفاده از کدهای CSS آموزش های مفصلی در هاست باز آماده شده است که در جای خود به بررسی آن ها خواهیم پرداخت.