0

بلاگ

خدمات شبکه فراز نتورک > دانلود رایگان > وب مستر > آموزش HTML & CSS > استناد و نقل قول در HTML

استناد و نقل قول در HTML

2021/01/19
ارسال شده توسط
آموزش HTML & CSS
1.13k بازدید
کار با استناد و نقل قول در HTML

استناد و نقل قول در HTML

تگ q در HTML

تگ q چیست؟ از چه تگ هایی می‌توانیم برای نقل قول هایمان استفاده کنیم؟ تگ q از چه خاصیت ها و ویژگی هایی پشتیبانی می‌کند ؟

  • 1 تگ q
  • 2 خواص عمومی
  • 3 خاصیت cite در تگ q

تگ q

برای ایجاد نقل قول های کوتاه در HTML  از این تگ استفاده می شود. متنی که در داخل تگ q نوشته می شود در بین دو دابل کوتیشین قرار می گیرد.

از این تگ می‌توانید به صورت تنهایی یا درون تگ های پاراگراف استفاده نمایید و بخش هایی از پاراگرافتان را به صورت نقل قول در بیاورید.

این تگ از عناصر inline level می‌باشد که از آن در عناصر Block Level استفاده می‌شود.

تمامی مرورگر ها به جز Internet Explorer از این تگ پشتیبانی می‌کنند.

به همین دلیل از تگ <q> کمتر استفاده می‌شود و به جای آن از تگ blockquote استفاده می‌شود.

<!DOCTYPE html>
<html>
<head>
<title>HTML  q Tag</title>
</head>
<body>
Here comes a short quotation: <q> here is a short quotation </q>
</body>
</html>
 استناد و نقل قول در HTML

خواص عمومی

این تگ همه خواص عمومی موجود در HTML را پشتیبانی می کند، برای مشاهده خواص عمومی می‌توانید مقالات ما در رابطه با خواص عمومی را مشاهده کنید.

معرفی صفت های عمومی در  HTML 

مثال :

<q class="quote" style="color:gray"> Hello faraznetwork </q>

در مثال بالا نمونه ای از استفاده از صفات (خاصیت ها) عمومی را با استفاده از تگ q آورده ایم. خاصیت class برای کلاس بندی و استایل بندی با css و خاصیت style برای استایل بندی درون خطی  css مورد استفاده قرار می‌گیرد.

خاصیت cite در تگ q

مانند تگ blockquote ، تگ <q> نیز دارای خاصیت cite است که محل نقل قول را تعیین می کند.

مقدار این تگ url صفحه نقل قول شده است، بنابر این با این خاصیت به گونه ای منبع اصلی نقل قول را مشخص می‌کنید.

با استفاده از این خاصیت شما کپی و رایت متن را به موتور های جستجوگر اطلاع می‌دهید تا از امتیاز منفی گوگل نیز جلوگیری شود.

نحوه پیاده سازی :

همانطور که گفته شد پیاده سازی خاصیت cite در تگ q با استفاده از  url صفحه نقل قول شده می‌باشد.

بنابر این در نمونه زیر به جای url می‌بایست آدرس ( لینک ) صفحه نقل قول را جایگزین کنیم تا بتوانیم از این خاصیت استفاده کنیم.

<q cite="url">faraznetwork</q>

مثال :

مثال زیر با استفاده از نمونه پیاده سازی بالا آورده شده است.

<q cite="https://faraznetwork.com/blog/what-is-link-and-importance-of-linking-html/">
به طور کلی به ارجاع دادن کاربران از یک صفحه به صفحه‌ای خارج از وب سایتمان لینک سازی خارجی می‌گوییم
</q>

همانطور که مشاهده می‌کنید، نقل قول ما که تعریف لینک سازی خارجی است، از مقاله آشنایی با لینک ها برداشته شده است و لینک آن مقاله نیز در بخش cite آورده شده است.

تا اینجا به صورت کامل با تگ q آشنا شدیم و نحوه معرفی آن را در کد های HTML بررسی کردیم.

تگ blockquote در HTML

کاربرد تگ blockquote در html چیست و چگونه میتوان از این تگ در html استفاده کرد؟ در ادامه قصد داریم با آموزش کامل و کاربردی تگ blockquote شما را در فرازنتورک میزبانی کنیم. همراه ما باشید.

1.1 معرفی تگ blockquote :

1.2 سبک نگارش تگ blockquote

1.3 نکات تکمیلی تگ blockquote

استناد و نقل قول در HTML

معرفی تگ blockquote :

از تگ blockquote در  HTML برای نمایش نقل قول استفاده می‌شود این تگ یک عنصر block level یا بلاکی است و درصورتی که یک نقل قول طولانی و بلاکی داشته باشیم می توانیم از این تگ استفاده نماییم .
متن درون تگ با یک تورفتگی نمایش داده می شود . برای درک بهتر کاربرد تگ در طراحی سایت به مثال زیر توجه کنید :
در این مثال از صفت عمومی dir برای راست چین کردن متن استفاده نموده ایم.

<p dir="rtl">سایت فرازنتورک :</p>
<blockquote dir="rtl">
         طراحی سایت بسیار آسان است.
</blockquote>

سبک نگارش تگ blockquote

تمامی مرورگرها به صورت پیش فرض تگ blockquote را با سبک نگارش و یا استایل زیر نمایش می‌دهند که البته شما می‌توانید با استفاده از  CSS این سبک نگارش را تغییر دهید .

blockquote {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
}

نکات تکمیلی تگ blockquote

تگ blockquote توسط تمامی مرورگرها پشتیبانی می‌شوند.

تگ cite در HTML

تگ cite چیست؟ تگ cite از HTML4 تا HTML5 چه تغییر کرده است؟ برای عنوان کار هایمان از چه تگی استفاده می‌کنیم؟ در گذشته برای استناد به چیزی از چه تگی استفاده می‌شد؟ در این مقاله می‌خواهیم با تگ cite آشنا شویم.

  • 1 تگ cite
  • 2 تفاوت تگ cite در HTML 4 و HTML 5
    • 2.1 مثال
  • 3 تفاوت تگ cite، em و i
  • 4 خواص عمومی

استناد و نقل قول در HTML

تگ cite

تگ cite تعیین کننده استناد به چیزی است، همچنین از این تگ برای تیتر نیز می توان استفاده کرد.

مهم ترین استفاده این تگ در استناد به نام کتاب، موسیقی، فیلم و مانند آن است. معمولا این تگ برای استناد به نام اشخاص استفاده نمی شود

تفاوت تگ cite در  HTML 4 وHTML   5

در نسخه  HTML  5، تگ <cite> برای عنوان یک کار استفاده می شود.

در نسخه  HTML  4 به عنوان استناد به چیزی در نظر گرفته می شود.

مثال

<p> Your frog is your biggest, most important task </p>
<cite> Eat that frog, byfaraznetwork.com </cite>

تفاوت تگ cite، em و i

یکی از سوالاتی که همیشه در مورد تگ cite، پیش می‌آید، تفاوت آن با تگ های em و i می‌باشد.

این سه تگ، در italic بودن استایل خود، با هم دیگر فرقی ندارند.

چیزی که این سه تگ را از هم متمایز می‌کند، تفاوت کاربرد های آن هاست:

  • تگ cite: این تگ برای استناد دادن یک رسانه خاص، از متن های مختلف گرفته تا فیلم و موسیقی، به منبعشان استفاده می‌گردد و معمولا همراه تگ های <q> و <blockquotes> به کار می رود.
  • تگ em: این تگ برای تاکید کردن بر یک کلمه یا عبارت خاص به کار می رود و خلاصه واژه ی emphasis است.
  • تگ i: تنها کاربرد این تگ، بخشیدن ویژگی italic به متن مورد نظر می باشد. قابل ذکر است که کاربرد این تگ در HTML5 به طور کلی تغییر کرد.

یکی دیگر از تفاوت های تگ cite و em با i، آن است که نرم افزار های screen reader، که برای همراهی کاربران نابینا و ناتوان به کار می روند، به شکلی متفاوت کلمات درون تگ های cite و em را می خوانند. در حالی که تاثیری بر کلمات درون تگ i ندارند.

استناد و نقل قول در HTML

خواص عمومی

این تگ همه خواص عمومی موجود درHTML   را پشتیبانی می کند. خواصی مانند style، class و id که به وسیله آن ها می‌توان به محتوای تگ موردنظر، استایل داد.

<cite id="faraznetwork">Hello faraznetwork</cite>

نمونه ای از استفاده از خواص عمومی را در بالا می‌بینید که ما از خاصیت id درون این تگ استفاده کردیم که می‌توانیم با فراخوانی آن استایل آن را تغییر دهیم.

معرفی صفات های عمومی در HTML

  • تگ cite برای استناد به یک منبع خاص از محتوا و همچنین برای تیتر محتوا به کار می رود.
  • از لحاظ ظاهری، شبیه به تگ em و تگ i می باشد، با این تفاوت که همراه تگ های quote به کار رفته و در screen reader ها به شکل متفاوتی تلفظ می شود.

تگ bdo در HTML

آشنایی کامل با تگ bdo و bdi

تگ bdo چیست ؟‌ در چه مواردی از تگ <bdo> استفاده می‌ شود؟ منظور از تغییر پیش فرض جهت متن چیست؟ برای نمایش پاراگراف متن انگلیسی در وب سایت های فارسی از چه تگی استفاده می‌کنیم؟ در این مقاله به صورت کامل با تگ <bdo> آشنا می‌ شویم.

  • 1 تگ bdo
  • 2 نحوه نوشتار
    • 2.1 مثال :
  • 3 خواص عمومی
  • 4 موارد مصرف تگ bdo
  • 5 آشنایی با تگ bdi
  • 6 پشتیبانی

تگ bdo

bdo مخفف (سرنام) واژگان Bi-Directional Override بحساب می آید. تگ bdo برای تغییر پیش فرض جهت متن استفاده می شود. مهم ترین نمونه رایج استفاده از این تگ در وبسایت های فارسی زبان برای نمایش یک پاراگراف متن انگلیسی در سمت چپ است.

نحوه نوشتار

برای استفاده از این تگ، باید از خاصیت dir استفاده کنیم که خود، می‌تواند دو مقدار را قبول کند:

  • rtl: جهت نوشتار را از راست به چپ تنظیم می‌کند. (مانند فارسی و عربی)
  • ltr: جهت نوشتار را از چپ به راست تنظیم می‌کند. (مانند انگلیسی)
<bdo dir="جهت مورد نظر">...</bdo>

به جای … ، متن مورد نظر خود را می‌نویسیم و به جای dir جهت مورد نظرمان را با استفاده از دو ویژگی rtl و ltr مشخص می‌کنیم.

مثال :

<p> This is the Left to Right text </p>

<p> <bdo dir="rtl"> This is the left to right text </bdo></p>
توجه کنید که تگ bdo، تاثیری بر محتوای خود از نظر نحوه نمایش (inline و block) بودن ندارد و تنها کاربرد آن، 
تغییر دادن جهت متن می‌باشد.

خواص عمومی

این تگ همه خواص عمومی مربوط به تگ های  HTML را پشتیبانی می‌کند.

<bdo dir="rtl" class="faraznetwork">Hellofaraznetwork</bdo>

برای مثال در نمونه بالا از خاصیت class برای تگ bdo استفاده شده است، شما می‌توانید اطلاعات بیشتری در رابطه با خاصیت class و خاصیت های عمومی در مقالات ما بخوانید.

موارد مصرف تگ bdo

این تگ باعث می‌شود، هنگامی که ما در وسط محتوای چپ چین بخواهیم از محتوای راست چین استفاده کنیم، نگران این نباشیم که ممکن است، متن ما با مشکل رو به رو شود و محتوای راست چین برعکس نمایش داده شود.

در این موارد با استفاده از تگ bdo برای محتوای راست چین و قرار دادن خاصیت dir=”rtl” می‌توانیم مطمئن باشیم که بهم ریختگی در متن صورت نخواهد گرفت.

از زمانی که تگ bdi در HTML5 معرفی شد، استفاده از تگ bdo خیلی کمتر شده و در حال حاضر بیشتر از این تگ استفاده می‌شود.

آشنایی با تگ bdi

گاهی پیش میاد که در صفحاتمون بخواهیم درون محتوای انگلیسیمون از محتوای فارسی استفاده کنیم

پشتیبانی

این تگ، در تمامی مرورگر ها، از جمله chrome، safari، Firefox و microsoft edge پشتیبانی می‌شود.

پشتیبانی مرورگر ها از تگ bdo
پشتیبانی مرورگر ها از تگ bdo
  • از تگ bdo، برای تغییر جهت متن استفاده می شود.
  • خاصیت dir در تگ <bdo>، می تواند دو مقدار rtl و ltr را قبول کند.
  • این تگ تمام خواص عمومی دیگر نظیر style را پشتیبانی می کند.
  • تگ مورد نظر از سمت تمامی مرورگر ها، چه در دسکتاپ و چه در موبایل، پشتیبانی می‌شود.

این مقاله نیز به اتمام رسید .

 

جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.

جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.

نویسنده:راحله تبریزی

 

 

 

اشتراک گذاری:
برچسب ها:
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید