09162352304
[email protected]

آموزش HTML مقدماتی؛ قالب متن، نقل قول و کامنت در HTML

درس 5/9 | زمان مطالعه: 20 حداقل
آموزش HTML مقدماتی؛ قالب متن، نقل قول و کامنت در HTML

همانطور که در سری دروس قبلی آموزش HTML مقدماتی و همچنین مقاله «HTML چیست؟» گفتیم، HTML یک نوع زبان نشانه‌گذاری است که در واقع پیام خود به مرورگر را با استفاده از تگ‌ها منتقل می‌کند. با تگ‌ها و عناصر HTML، استایل، پاراگراف، عنوان و چند فاکتور دیگر آشنا شده‌ایم. در این درس به سه فاکتور دیگر این زبان می‌پردازیم.

عناصر قالب بندی HTML

در درس قبلی در مورد خصوصیت استایل در HTML یاد گرفتید. زبان HTML همچنین عناصر خاصی برای تعریف متن با معنای مشخص دارد. این زبان از عناصری مانند <b> و <i> برای قالب بندی خروجی مانند متن bold (برجسته) یا ایتالیک استفاده می‌کند. عناصر قالب بندی برای نمایش انواع خاصی از متن طراحی شده‌اند. در ادامه چند نوع از آن‌ها را مشاهده می‌کنید:

- <b>: برجسته کردن متن

- <strong>: متن مهم

- <i>: متن ایتالیک

- <em>: تاکید بر متن

- <mark>: متن علامت گذاری شده

- <small>: متن کوچک

- <del>: متن پاک شده

- <ins>: متن وارد شده

- <sub>: متن زیر

- <sup>: متن رو

عناصر <B> و <Strong> در HTML

عنصر <b> متن را بدون هیچ‌گونه اهمیت یا تاکید بیشتر، پررنگ و برجسته می‌کند:

<b>This text is bold</b>

عنصر <strong> به متن قدرت داده و اهمیت معنایی به آن می‌بخشد:

<strong>This text is strong</strong>

 عناصر <I> و <Em> در HTML

عنصر <i> در HTML متن را بدون اختصاص هرگونه اهمیت بیشتر به حالت ایتالیک تبدیل می‌کند:

<i>This text is italic</i>

عنصر <em> در HTML بدون اختصاص اهمیت معنایی، متن را به صورت تاکیدی تبدیل می‌کند:

<em>This text is emphasized</em>

به یاد داشته باشید که مرورگرها متن <strong> را به صورت <b> و متن <em> را به صورت <i> نمایش می‌دهند. البته در معنای این تگ‌ها تفاوت‌هایی وجود دارد. تگ‌های <b> و <i> متن برجسته و ایتالیک را تعریف می‌کنند اما تگ‌ها <strong> و <em> به معنای مهم بودن متن است.

عنصر <small> در HTML کوچک‌تر بودن متن را در یک سند HTML تعریف می‌کند:

<h2>HTML <small>Small</small> Formatting</h2>

عنصر <mark> در HTML متن نشانه‌گذاری شده و هایلایت شده را تعریف می‌کند:

<h2>HTML <mark>Marked</mark> Formatting</h2>

عنصر <del> در HTML متن پاک شده یا حذف شده را مشخص می‌کند:

<p>My favorite color is <del>blue</del> red.</p>

عنصر <ins> در HTML متن وارد شده یا افزوده شده را مشخص می‌کند:

<p>My favorite <ins>color</ins> is red.</p>

عنصر <sub> در HTML متن در زیر خط قرار گرفته را مشخص می‌کند:

<p>This is <sub>subscripted</sub> text.</p>

عنصر <sup> در HTML متن بالاتر از خط قرار گرفته را مشخص می‌کند:

<p>This is <sup>superscripted</sup> text.</p>

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

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

عنصر <Q> برای نقل قول‌ های کوتاه

عنصر <q> در HTML یک نقل قول کوتاه (short quotation) را تعریف می‌کند. مرورگرها معمولا پیرامون این عنصر علامت نقل قول قرار می‌دهند. در زیر یک نمونه از آن را مشاهده می‌کنید.

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

عنصر <Blockquote> برای نقل قول ها

عنصر <blockquote> بخشی را تعریف می‌کند که از منبع دیگری نقل شده است (Quotation). مرورگرها معمولا آن را به صورت فرو رفته نشان می‌دهند:

<p>Here is a quote from WWF's website:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">For 50 years, WWF has been protecting the future of nature.The world's leading conservation organization,WWF works in 100 countries and is supported by1.2 million members in the United States andclose to 5 million globally.</blockquote>

عنصر <Abbr> برای اختصارات

عنصر <abbr> مشخص کننده یک اختصار (Abbreviation) یا مخفف (Acronym) است. مشخص کردن اختصار می‌تواند اطلاعات مفیدی به مرورگرها، سیستم‌های ترجمه و موتورهای جستجو بدهد.

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

عنصر <Address> در HTML برای اطلاعات تماس

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

<address>Written by John Doe.<br> Visit us at:<br>Example.com<br>Box 564, Disneyland<br>USA</address>

عنصر <Cite> در HTML برای عنوان شغلی

عنصر <cite> عنوان یک شغل (work title) را تعریف می‌کند. مرورگرها معمولا این عنصر را به شکل ایتالیک نمایش می‌دهند.

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

عنصر <Bdo> در HTML برای لغو دو طرفه

عنصر <bdo> نشان‌دهنده لغو دو طرفه (bi-directional override) است. این عنصر برای نادیده گرفتن مسیر فعلی متن مورد استفاده قرار می‌گیرد.

<bdo dir="rtl">This text will be written from right to left</bdo>

کامنت در HTML

تگ‌های کامنت برای وارد کردن توضیح در کد منبع HTML به کار برده می‌شوند. می‌توانید با استفاده از سینتکس زیر به منبع HTML خود کامنت یا توضیح اضافه کنید:

<!-- Write your comments here -->

توجه داشته باشید که در تگ آغازین یک علامت تعجب (!) وجود دارد اما در تگ پایانی این‌طور نیست. کامنت‌ها توسط مرورگر نمایش داده نمی‌شوند اما می‌توانند به مستندسازی کد منبع HTML کمک کنند.

با استفاده از کامنت‌ در HTML می‌توانید یادآوری‌ها و پیغام‌هایی را در کد منبع خود قرار دهید:

<!-- This is a comment --> 

<p>This is a paragraph.</p> 

<!-- Remember to add more information here -->

کامنت‌ها همچنین ابزاری فوق‌العاده برای رفع باگ‌های HTML است چون می‌توانید هر بار چند خط از کدهای HTML را برای کامنت گذاشتن انتخاب کرده و به دنبال خطاهای موجود در آن بخش بگردید:

<!-- Do not display this at the moment<img border="0" src="pic_mountain.jpg" alt="Mountain">-->

کامنت های شرطی

گاهی ممکن است جایی لازم باشد تا توضیح دهید اگر شرایط ایجاد شود چه اتفاقی در HTML رخ دهد:

<!--[if IE 9]>    .... some HTML here ....<![endif]-->

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

معرفی سه فاکتور دیگر از HTML در این‌جا به پایان رسید. اگر می‌خواهید در روند آموزش طراحی سایت موفق و حرفه‌ای عمل کنید، حتما در این سری از مقالات آموزش HTML، از درس اول شروع کنید و برای هر بخش چند تمرین عملی انجام دهید. در قسمت بعدی مقالات آموزش HTML مقدماتی، به سه عنصر رنگ، CSS و لینک در HTML می‌پردازیم.