قالب بندی پیشرفته متن در HTML — راهنمای کاربردی

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

پیش‌نیازها

• دانش ابتدایی HTML که در نوشته «آشنایی مقدماتی با HTML» بررسی شده است.
• قالب‌بندی متن HTML که در نوشته «مبانی کار با متن در HTML» معرفی شده است.

هدف از این نوشته آشنایی با عناصر کمتر شناخته شده HTML برای نشانه‌گذاری ویژگی‌های معناشناختی پیشرفته‌تر است. ضمناً، قسمت قبلی این مجموعه مطلب آموزشی را می‌توانید با کلیک روی لینک زیر مطالعه کنید:

• ایجاد هایپرلینک در HTML — راهنمای کاربردی

لیست‌های توصیفی

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

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

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

1soliloquy
2In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
3monologue
4In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
5aside
6In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information

لیست‌های توصیفی از پوشش متفاوتی نسبت به انواع لیست دیگر استفاده می‌کنند که <dl> نام دارد. علاوه بر آن هر اصطلاح درون تگ <dt> نیز قرار گرفته است و هر توصیف در تگ <dd> قرار دارد. در مثال زیر کار نشانه‌گذاری به طور کامل اجرا شده است:

1<dl>
2  <dt>soliloquy</dt>
3  <dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd>
4  <dt>monologue</dt>
5  <dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
6  <dt>aside</dt>
7  <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.</dd>
8</dl>

سبک‌های پیش‌فرض مرورگر، این لیست‌های توصیفی را طوری نمایش می‌دهند که اصطلاح و تعریف به نوعی از هم متمایز شده باشند. سبک‌های MDN نیز به طور دقیقی از این روش استفاده می‌کنند، اما اصطلاح‌ها را نسبت به تعاریف بیشتر درشت می‌کنند.

شیوه نمایش لیست توصیفی فوق چنین است:

soliloquy

In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)

monologue

In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.

aside

In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information.

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

aside

In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information.

In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)

یادگیری عملی: نشانه‌گذاری یک مجموعه از تعاریف

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

اگر اشتباهی رخ بدهد، همواره می‌توانید از دکمه Reset استفاده کنید. اگر واقعاً دچار مشکل شدید می‌توانید با زدن دکمه Show solution پاسخ را مشاهده کنید.

نقل‌قول‌ها

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

Blockquote

اگر یک محتوای سطح بلوک، چه پاراگراف، چه چند پاراگراف و چه لیست و غیره از جای دیگری نقل‌قول شده باشد، باید آن را درون یک عنصر <blockquote> قرار دهید تا این نکته مشخص شود و یک URL بیاورید که به منبع نقل‌قول درون خصوصیت «استناد» (cite) کند. برای نمونه نشانه‌گذاری زیر از صفحه عنصر <blockquote> در MDN اخذ شده است:

1<p>The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML Block
2Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>

برای این که آن را به یک blockquote تبدیل کنیم باید به صورت زیر عمل کنیم:

1<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
2  <p>The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML Block
3  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
4</blockquote>

سبک‌بندی پیش‌فرض مرورگر این کد را به صورت یک پاراگراف دارای تورفتگی رندر می‌کند که نشان می‌دهد یک نقل‌قول است. MDN نیز همین کار را کرده است، اما با کمی سبک‌بندی بیشتر ظاهر آن متفاوت است:

نقل‌قول‌های درون‌خطی

نقل‌قول‌های درون‌خطی نیز دقیقاً به همین ترتیب کار می‌کنند؛ به جز این که در آن‌ها از عنصر <q> استفاده می‌کنیم. برای نمونه در ادامه یک کد نشانه‌گذاری می‌بینید که یک نقل‌قول از صفحه مربوط به عنصر <q> در MDN را آورده است:

1<p>The quote element — <code><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
2for short quotations that don't require paragraph breaks.</q></p>

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

استناد

محتوای خصوصیت cite به نظر مفید می‌آید؛ اما متأسفانه مرورگرها، نرم‌افزارهای قرائت صفحه و غیره از آن استفاده زیادی نمی‌کنند. هیچ روشی برای این که مرورگر را وادار به نمایش محتوای cite کرد، وجود ندارد؛ مگر این که راه‌حل خاص خود را با استفاده از جاوا اسکریپت و CSS بنویسید. اگر می‌خواهید منبع نقل‌قول را در صفحه نمایش دهید یک روش بهتر این است که عنصر <cite> را در کنار یا درون عنصر نقل‌قول قرار دهید. بدین ترتیب نام منبع نقل‌قول نمایش پیدا می‌کند که می‌تواند نام کتاب، یا نام فردی باشد که نقل‌قول از او آمده است؛ اما هیچ دلیلی وجود ندارد که چرا نمی‌توان متن درون <cite> را به روشی لینک کرد:

1<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
2<cite>MDN blockquote page</cite></a>:
3</p>
4
5<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
6  <p>The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML Block
7  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
8</blockquote>
9
10<p>The quote element — <code><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
11for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
12<cite>MDN q page</cite></a>.</p>

استنادها به صورت پیش‌فرض به صورت «کج» (italic) سبک‌بندی می‌شوند.

یادگیری عملی: چه کسی گفته است؟

اینک نوبت به یک یادگیری عملی دیگر رسیده است. در این مثال قرار است کارهای زیر را انجام دهیم:

1. پاراگراف میانی را به صورت blockquote درآوریم که شامل یک خصوصیت cite است.
2. بخشی از پاراگراف سوم را به شکل یک نقل‌قول درون‌خطی بیاوریم که شامل یک خصوصیت cite است.
3. یک عنصر <cite> را درون هر لینک قرار دهیم.

منابع استناد که مورد نیاز هستند:

• http://www.brainyquote.com/quotes/authors/c/confucius.html برای نقل‌قول کنفوسیوس (Confucius)
• http://www.affirmationsforpositivethinking.com/index.htm برای "The Need To Eliminate Negative Self Talk".

اگر مشکلی ایجاد شود، همواره می‌توانید با زدن دکمه Reset همه چیز را به حالت اولیه بازگردانید. اگر واقعاً دچار مشکل شدید، می‌توانید با زدن Show solution راه‌حل مسئله را مشاهده کنید:

اختصارها

عنصر نسبتاً رایج دیگری که هنگام بررسی وب با آن برخورد می‌کنیم <abbr> است که برای نمایش اختصارها یا مترادف‌ها استفاده می‌شود و بسط کامل اصطلاحی را شامل می‌شود. به مثال‌های زیر توجه کنید:

1<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>
2
3<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>

این کد متنی مانند زیر تولید می‌کند. دقت کنید که توضیح در متن tooltip زمانی که ماوس روی آن قرار می‌گیرد نمایش می‌یابد:

We use HTML to structure our web documents.

I think Rev. Green did it in the kitchen with the chainsaw.

دقت کنید که عنصر دیگری به نام <acronym> نیز وجود دارد که اساساً همان کار <abbr> را انجام می‌دهد و به طور خاص برای مترادف‌ها طراحی شده و نه اختصارات. با این وجود از آن استفاده نمی‌شود و مرورگرها نیز از آن به درستی و مانند <abbr> پشتیبانی نمی‌کنند. <abbr> چنان کارکرد مشابهی ارائه می‌کند که استفاده از هر دوی آن‌ها بی‌معنی به نظر می‌رسد، بنابراین سعی کنید صرفاً از تگ <abbr> استفاده کنید.

یادگیری عملی: نشانه‌گذاری یک اختصار

در این یادگیری عملی ساده قصد داریم یک اختصار را نشانه‌گذاری کنیم. شما می‌توانید از نمونه زیر استفاده کنید و متن مورد نظر خود را جایگزین نمایید:

نشانه‌گذاری جزییات تماس

HTML عنصری برای نشانه‌گذاری جزییات تماس نیز دارد که <address> است. این عنصر به سادگی پیرامون جزییات تماس شما قرار می‌گیرد. برای نمونه:

1<address>
2  <p>Chris Mills, Manchester, The Grim North, UK</p>
3</address>

یک نکته که باید به خاطر داشته باشید این است که عنصر <address> به منظور نشانه‌گذاری جزییات تماس فردی که سند HTML را نوشته است طراحی شده و نه هر آدرس دیگری. بنابراین مطلب فوق در صورتی مناسب خواهد بود که Chris نویسنده سند نشانه‌گذاری باشد. دقت کنید که مواردی مانند زیر نیز مناسب هستند:

1<address>
2  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
3</address>

زیرنویس و بالانویس

در برخی موارد لازم می‌آید که هنگام نشانه‌گذاری مواردی مانند تاریخ‌ها، فرمول‌های شیمیایی، و معادلات ریاضی از زیرنویس و بالانویس استفاده کنیم تا منظور ما به طور کامل انتقال یابد. عناصر <sup> و <sub> به ترتیب به این منظور استفاده می‌شوند. برای نمونه:

1<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
2<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
3<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>

خروجی کد فوق به صورت زیر است:

My birthday is on the 25^th of May 2001.

Caffeine's chemical formula is C₈H₁₀N₄O₂.

If x² is 9, x must equal 3 or -3.

بازنمایی کد رایانه

چندین عنصر وجود دارند که برای نشانه‌گذاری کد با استفاده از HTML استفاده می‌شوند.

• <code> - برای نشانه‌گذاری بخش‌های معمولی کد رایانه استفاده می‌شود.
• <pre> - برای حفظ فاصله‌های خالی (عموماً در بلوک‌های کد) استفاده می‌شود. اگر از تورفتگی یا فاصله‌های زیاد در متن کد خود استفاده کرده باشید، مرورگرها آن‌ها را نادیده می‌گیرند و در صفحه رندر شده آن‌ها را نمی‌توانید ببینید. اما اگر متن را درون تگ‌های </pre><pre> قرار دهید، فاصله‌های خالی دقیقاً همان طور که در ویرایشگر متن مشاهده می‌کنید، در صفحه وب رندر خواهند شد.
• <var> برای نشانه‌گذاری خاص نام‌های متغیر
• <kbd> - به طور خاص برای نشانه‌گذاری صفحه کلید و دیگر ورودی‌های وارد شده در رایانه
• <smap> - برای نشانه‌گذاری خروجی یک برنامه‌ی رایانه‌ای

در ادامه مثال‌هایی از موارد فوق ارائه شده است. شما می‌توانید به بررسی و ایجاد تغییر در آن‌ها بپردازید.

1<pre><code>var para = document.querySelector('p');
2
3para.onclick = function() {
4  alert('Owww, stop poking me!');
5}</code></pre>
6
7<p>You shouldn't use presentational elements like <code><font></code> and <code><center></code>.</p>
8
9<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>
10
11
12<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
13
14<pre>$ <kbd>ping mozilla.org</kbd>
15<samp>PING mozilla.org (63.245.215.20): 56 data bytes
1664 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

کد فوق در صفحه وب به صورت زیر دیده می‌شود:

نشانه‌گذاری زمان و تاریخ

HTML همچنین عنصر <time> را برای نشانه‌گذاری زمان و تاریخ در قالبی که از سوی ماشین قبل خواندن باشد ارائه کرده است. برای نمونه به صورت زیر:

1<time datetime="2016-01-20">20 January 2016</time>

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

• 20 January 2016
• 20th January 2016
• Jan 20 2016
• 20/01/16
• 01/20/16
• The 20th of next month
• 20e Janvier 2016
• 2016年1月20日

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

مثال ساده فوق تنها یک تاریخ ساده که قابلیت خواندن از سوی دارد ارائه کرده است، اما گزینه‌های بسیار زیاد دیگری نیز وجود دارند که در ادامه ملاحظه می‌کنید:

1<!-- Standard simple date -->
2<time datetime="2016-01-20">20 January 2016</time>
3<!-- Just year and month -->
4<time datetime="2016-01">January 2016</time>
5<!-- Just month and day -->
6<time datetime="01-20">20 January</time>
7<!-- Just time, hours and minutes -->
8<time datetime="19:30">19:30</time>
9<!-- You can do seconds and milliseconds too! -->
10<time datetime="19:30:01.856">19:30:01.856</time>
11<!-- Date and time -->
12<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
13<!-- Date and time with timezone offset-->
14<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
15<!-- Calling out a specific week number-->
16<time datetime="2016-W04">The fourth week of 2016</time>

جمع‌بندی

بدین ترتیب به انتهای این راهنما در مورد قالب‌بندی پیشرفته متن در HTML رسیده‌ایم.

فیلم مجموعه آموزش طراحی سایت با HTML و CSS – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

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

برای مطالعه بخش بعدی این مطلب روی لینک زیر کلیک کنید:

• سند و ساختار وب سایت در HTML --- راهنمای کاربردی

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌‌های طراحی و برنامه نویسی وب
• آموزش طراحی وب با HTML – مقدماتی
• مجموعه آموزش‌‌های برنامه‌‌ نویسی
• آموزش طراحی وب با HTML – تکمیلی
• آموزش کدنویسی سریع HTML و CSS با Emmet
• آموزش پروژه محور HTML و CSS
• آشنایی مقدماتی با HTML — به زبان ساده

^^

==