آموزش HTML - نقل‌قول‌ها

نقل‌قول‌های HTML به شما این امکان را می‌دهند که متن‌های نقل‌قول‌شده را در محتوای وب خود بگنجانید و قالب‌بندی کنید. HTML تگ‌هایی مانند <blockquote>، <q>، <cite>، <address>، <bdo> و <abbr> را برای ساختاردهی و استایل‌دهی به نقل‌قول‌ها ارائه می‌دهد.

این تگ‌های نقل‌قول به حفظ قالب‌بندی و معناشناسی مناسب کمک می‌کنند و ارائه و مفهوم محتوای نقل‌قول‌شده را در صفحات وب بهبود می‌بخشند. گنجاندن نقل‌قول‌ها برای انتقال دقیق اطلاعات و ارائه یک تجربه خواندن منظم برای کاربران ضروری است.

عناصر نقل‌قول در HTML

عناصر نقل‌قول زیر برای درج و نمایش نقل‌قول‌ها در صفحه وب استفاده می‌شوند:

نقل‌قول کوتاه (<q>)

تگ <q> برای تعریف علامت‌های نقل‌قول کوتاه (یا درون‌خطی) در HTML استفاده می‌شود و مرورگرها اغلب علامت‌های نقل‌قول (گیومه) را در اطراف آن اضافه می‌کنند.

سنتکس

سنتکس برای تعریف یک نقل‌قول کوتاه به این صورت است:

<q>The content to be quoted</q>

مثال

در ادامه مثالی از نمایش یک نقل‌قول کوتاه (یا درون‌خطی) در صفحه وب آمده است:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Quotation tag</title>
</head>
<body>
   <p>DLF stands for <q>Delhi Land and Finance</q></p>
   <p>Delhi Land and Finance is one of the largest commercial real estate developer in India.</p>
</body>
</html>

مثال

در مثال زیر، از تگ <q> روی یک متن خاص در داخل تگ <h1> استفاده کرده‌ایم:

<!DOCTYPE html>
<html>
<head>
   <title>HTML u tag</title>
</head>
<body>
   <h1>Welcome to <q> INDIA </q> Kids.</h1>
</body>
</html>

نقل‌قول در سطح بلوک (<blockquote>)

تگ <blockquote> برای نشان دادن نقل‌قول‌های طولانی است. این تگ باید فقط شامل عناصر سطح بلوک در درون خود باشد و نه فقط متن ساده. این تگ بخش نقل‌قول‌شده از منبع دیگری را مشخص می‌کند و تنها حاوی عناصر سطح بلوک است.

همچنین می‌توانیم از ویژگی cite در داخل تگ <blockquote> استفاده کنیم تا منبع نقل‌قول را به صورت آدرس URL مشخص نماییم.

سنتکس

سنتکس برای تعریف یک نقل‌قول در سطح بلوک به این صورت است:

<blockquote>The multiple line content to be quoted </blockquote>

مثال

در ادامه مثالی از نمایش یک نقل‌قول در سطح بلوک در صفحه وب آمده است:

<!DOCTYPE html>
<html>
<head>
   <title>HTML blockquote tag</title>
</head>
<body>
   <p>DLF stands for Delhi Land and Finance</p>
   <blockquote>Delhi Land and Finance is one of the largest commercial real estate developers in India. It is also engaged in the business of generation of power provision of maintenance services hospitality and recreational activities life insurance and retail chain outlets. Its internal business includes the development business and rental business. The development business of the Company is involved in the sale of residential spaces select commercial offices and commercial complexes. The company has a unique business model with earnings arising from development and rentals. </blockquote>
</body>
</html>

مثال

در ادامه مثالی از استفاده از ویژگی "cite" با تگ <blockquote> آمده است:

<!DOCTYPE html>
<html>
<head>
   <title>HTML blockquote tag</title>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <p>Here is a quotation from Tutorialspoints official website</p>
   <blockquote cite="https://www.tutorialspoint.com">Join our millions of loyal visitors to access our free Text Library. From programming languages and web development to data science and cybersecurity, our masterfully crafted Tutorials will help you master any technology or concept from scratch.</blockquote>
</body>
</html>

استایل‌دهی نقل‌قول (<blockquote>)

شما می‌توانید تگ <blockquote> را با استفاده از CSS استایل‌دهی کنید تا بر اساس تم صفحه وب خود ظاهر بهتری به آن ببخشید.

در مثال زیر، برخی از ویژگی‌های CSS مانند رنگ پس‌زمینه، حاشیه، عرض حاشیه و رنگ فونت را تنظیم می‌کنیم تا آن را جذاب‌تر کنیم:

<!DOCTYPE html>
<html>
<head>
   <title>HTML blockquote tag</title>
   <style>
      blockquote {
         background-color: #006969;
         color: #fff;
         border: 1px solid #333;
         border-radius: 8px;
         font-weight: 500;
         padding: 8px;
      }
   </style>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <p>Here is a quotation from Tutorialspoints official website</p>
   <blockquote cite="https://www.tutorialspoint.com">Join our millions of loyal visitors to access our free Text Library. From programming languages and web development to data science and cybersecurity, our masterfully crafted Tutorials will help you master any technology or concept from scratch.</blockquote>
</body>
</html>

ارجاع به یک نقل‌قول (<cite>)

تگ <cite> برای ارجاع به عنوان یک اثر خلاقانه مانند کتاب، فیلم یا آهنگ در داخل محتوا استفاده می‌شود. این تگ معنای معناشناختی را برای ارجاع فراهم می‌کند.

مثال

در اینجا یک مثال کدنویسی آمده است −

<!DOCTYPE html>
<html>
<head>
   <title>Cite Tag Example</title>
</head>
<body>
   <p>The information is sourced from <cite>The Elements of Style</cite> by Strunk and White.</p>
</body>
</html>

در این مثال، از '<cite>' برای نشان دادن عنوان کتاب مورد ارجاع استفاده شده است.

اطلاعات تماس (<address>)

تگ <address> برای تعریف اطلاعات تماس نویسنده یا مالک یک سند استفاده می‌شود. این تگ اغلب شامل جزئیاتی مانند آدرس ایمیل، آدرس فیزیکی یا سایر اطلاعات تماس مرتبط است.

مثال

در اینجا یک مثال آمده است −

<!DOCTYPE html>
<html>
<head>
   <title>Address Tag Example</title>
</head>
<body>
<address>
   Contact us at: <a href="mailto:info@example.com">info@example.com</a><br>
   Visit us at: 123 Main Street, Cityville
</address>
</body>
</html>

در این مثال، تگ '<address>' برای ارائه اطلاعات تماس، از جمله لینک ایمیل و آدرس فیزیکی استفاده شده است.

تغییر جهت دوطرفه (<bdo>)

تگ <bdo> در HTML (که bdo مخفف Bi-Directional Override است) برای تغییر و بازنویسی جهت فعلی متن استفاده می‌شود. این تگ معمولاً در موقعیت‌هایی استفاده می‌شود که جهت پیش‌فرض متن نیاز به تغییر دارد، مانند نمایش متن از راست به چپ.

مثال

در اینجا یک مثال آمده است −

<!DOCTYPE html>
<html>
<head>
   <title>Bi-Directional Override Example</title>
</head>
<body>
   <p>This text will go left to right.</p>
   <p><bdo dir="rtl">This text will go right to left.</bdo></p>
</body>
</html>

در این مثال، متن داخل تگ '<bdo>' از راست به چپ نمایش داده می‌شود و جهت پیش‌فرض چپ به راست را تغییر می‌دهد.

مخفف‌ها (<abbr>)

تگ <abbr> برای تعریف مخفف‌ها یا کلمات اختصاری استفاده می‌شود؛ یعنی می‌توانید یک عنوان اختیاری برای شکل کامل یک کلمه یا جمله خاص تعریف کنید.

مثال

در اینجا یک مثال آمده است −

<!DOCTYPE html>
<html>
<head>
   <title>Abbreviation Tag Example</title>
</head>
<body>
   <p>Tim Berners-Lee, a British scientist, invented the <abbr title="World Wide Web">WWW</abbr> in 1989.</p>
</body>
</html>

در این مثال، از <abbr> برای مخفف کردن "World Wide Web" به "WWW" استفاده شده است و ویژگی 'title' توضیحات کامل مخفف را ارائه می‌دهد.