آموزش HTML - پاراگراف ها
پاراگراف‌های HTML عناصر سطح بلاک (block-level) هستند که برای ساختاردهی و قالب‌بندی محتوای متنی در یک صفحه وب استفاده می‌شوند. یک پاراگراف در واقع مجموعه‌ای از کلمات و علائم نگارشی در کنار هم است. این عنصر به ما امکان می‌دهد اطلاعات متنی را به شکلی منسجم و خوانا سازمان‌دهی کرده و ارائه دهیم. تگ <p> در HTML برای ایجاد یک عنصر پاراگراف به کار می‌رود.
مثال
این اولین پاراگراف است: Hello World!.
این دومین پاراگراف است: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut purus maximus, efficitur nibh non, gravida odio. Suspendisse justo tortor, consequat sed mauris sit amet, varius fringilla arcu. Duis et elit quis metus molestie lacinia.
دلیل استفاده از پاراگراف‌ها
پاراگراف‌ها معمولاً فضایی در بالا و پایین متن ایجاد می‌کنند و آن را از محتوای اطراف جدا می‌سازند. می‌توان آن‌ها را با استفاده از CSS استایل‌دهی کرد تا جنبه‌هایی مانند اندازه فونت، رنگ، تراز‌بندی و فاصله‌ها را کنترل نمود. در توسعه وب، پاراگراف‌ها نقش بسیار مهمی در انتقال مؤثر اطلاعات، برقراری ارتباط شفاف و بهبود تجربه کاربری کلی در یک وب‌سایت ایفا می‌کنند.
ایجاد یک پاراگراف
برای ایجاد یک پاراگراف در HTML، از تگ <p> استفاده کنید. متنی را که می‌خواهید به عنوان پاراگراف در صفحه وب نمایش داده شود، بین <p> و </p> قرار دهید.
سنتکس
در زیر سنتکس ایجاد یک پاراگراف در HTML آمده است:
<p>Text to display as a paragraph on the webpage</p>مثالی از پاراگراف HTML
در مثال زیر، در حال ایجاد دو پاراگراف هستیم:
برای ایجاد دو پاراگراف:
<!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>شکستن سطر در پاراگراف‌ها
تگ‌های <br> برای درج شکست سطر درون یک پاراگراف جهت کنترل چیدمان متن استفاده می‌شوند.
مثال
مثال زیر نحوه استفاده از شکست سطر را همراه با پاراگراف HTML نشان می‌دهد:
<!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>تیترها همراه با پاراگراف‌ها
تیترها مانند <h1>، یک ساختار سلسله‌مراتبی ایجاد می‌کنند و می‌توانند در کنار پاراگراف‌ها استفاده شوند.
مثال
این مثال یک تیتر را همراه با پاراگراف نشان می‌دهد:
<!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 را درون یک پاراگراف نشان می‌دهد، دقیقاً همان‌طور که می‌توانید از تگ‌های قالب‌بندی همراه با یک پاراگراف HTML استفاده کنید:
<!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>لینک‌ها درون پاراگراف‌ها
شما می‌توانید با استفاده از تگ <a>، لینک‌ها را درون پاراگراف‌ها قرار دهید.
مثال
این مثال نحوه قرار دادن لینک‌ها را درون یک پاراگراف نشان می‌دهد:
<html>
<head>
<title>Links within Paragraphs</title>
</head>
<body>
<p>Visit our website <a href="https://www.tutorialspoint.com">here </a>. </p>
</body>
</html>استایل‌های درون‌خطی در پاراگراف‌ها
می‌توانید از تگ <span> همراه با استایل‌های درون‌خطی (inline styles) برای اعمال قالب‌بندی خاص استفاده کنید.
مثال
این مثال نحوه اعمال استایل‌های 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> برای ایجاد متن بالانویس (superscript) و زیرنویس (subscript) استفاده کنید.
مثال
این مثال نحوه نمایش متن بالانویس و زیرنویس را داخل یک پاراگراف نشان می‌دهد:
<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> را داخل یک پاراگراف نشان می‌دهد:
<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 درون‌خطی و با استفاده از ویژگی 'style' در تگ <p>، استایل‌های CSS را مستقیماً روی پاراگراف‌ها اعمال کنید.
<!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 بر روی عنصر 'p'
می‌توانید با نوشتن قوانین CSS برای تگ <p>، استایل‌های CSS را بر روی تمام پاراگراف‌های موجود در سند HTML اعمال کنید.
<!DOCTYPE html>
<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 و استفاده از آن در پاراگراف‌های مختلف، استایل‌های CSS را روی پاراگراف‌های خاصی اعمال کنید. برای این کار، از ویژگی 'class' همراه با تگ <p> استفاده کنید.
<!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 کنترل گسترده‌ای روی استایل پاراگراف‌ها ارائه می‌دهد و به شما امکان می‌دهد متن‌هایی جذاب و با قالب‌بندی مناسب در صفحه وب خود ایجاد کنید.
پیشرفت مطالعه: وضعیت خوانده‌شدن این درس فقط در همین مرورگر ذخیره می‌شود؛ بدون نیاز به حساب کاربری.