پیوندها و رسانه‌ها

حرف H در نام HTML از واژه HyperText می‌آید و همان ایدهٔ اصلی وب است: متن‌هایی که با پیوند به هم وصل شده‌اند. عنصر a شاید کوچک‌ترین عنصر صفحه باشد، اما همان چیزی است که وب را از یک مجموعه سند جدا ساخته است. در این درس پیوندها را می‌سازیم و سپس یاد می‌گیریم تصویر و ویدیو و صدا را درست به صفحه اضافه کنیم.

پیوند با عنصر a

عنصر a مخفف لنگر (Anchor) است و با ویژگی href مقصد را می‌گیرد. متن داخل عنصر همان چیزی است که کاربر می‌بیند و روی آن کلیک می‌کند:

<a href="https://developer.mozilla.org">MDN Documentation</a>

مقصد پیوند دو نوع است. «نشانی مطلق» کامل است و به یک منبع بیرونی اشاره می‌کند؛ «نشانی نسبی» نسبت به مکان فایل فعلی نوشته می‌شود و برای پیوند به صفحه‌های همان وب‌سایت به کار می‌رود:

<a href="https://example.com/blog">External blog (absolute)</a>
<a href="about.html">About us (relative, next to this file)</a>
<a href="articles/web.html">Articles (relative, inside a folder)</a>

با لنگر می‌توانید به مکانی درون همان صفحه بپرید. کافی است به عنصر مقصد ویژگی id بدهید و در href همان شناسه را با علامت # بیاورید:

<a href="#contact">Go to the contact section</a>
<h2 id="contact">Contact Us</h2>

باز کردن پیوند در تب جدید

به‌صورت پیش‌فرض پیوند در همان تب باز می‌شود. اگر می‌خواهید در تب جدید باز شود، از target="_blank" استفاده کنید و همراه آن rel="noopener" بنویسید تا صفحهٔ مقصد به صفحهٔ مبدا دسترسی نداشته باشد:

<a href="https://example.com" target="_blank" rel="noopener">Example in a new tab</a>

تصویر با عنصر img

عنصر خالی img دو ویژگی اصلی دارد: src نشانی فایل تصویر و alt متن جایگزین. متن جایگزین همان چیزی است که اگر تصویر بارگذاری نشود نمایش داده می‌شود، صفحه‌خوان آن را برای کاربر نابینا می‌خواند و موتور جست‌وجو از روی آن محتوای تصویر را می‌فهمد:

<img src="team.jpg" alt="Team members in a planning meeting" width="640" height="360">

دو نکته در این مثال هست. ویژگی‌های width و height ابعاد واقعی تصویر را از پیش اعلام می‌کنند تا مرورگر پیش از بارگذاری، فضای لازم را رزرو کند و هنگام باز شدن صفحه متن‌ها بالا و پایین نپرند. ویژگی loading="lazy" هم بارگذاری تصویر را به لحظهٔ رسیدن کاربر به آن قسمت صفحه موکول می‌کند.

اگر تصویر صرفاً تزئینی است و اطلاعات تازه‌ای نمی‌دهد، مقدار alt را خالی بگذارید تا صفحه‌خوان از آن عبور کند؛ ویژگی را حذف نکنید. برای پیوند دادن تصویر و توضیح آن هم از عنصر figure استفاده کنید:

<figure>
  <img src="cat.jpg" alt="A gray cat sleeping on the windowsill" loading="lazy">
  <figcaption>Home office window, Sunday morning</figcaption>
</figure>

ویدیو و صدا

برای ویدیو از عنصر video و برای صدا از audio استفاده می‌شود. ویژگی controls دکمه‌های پخش و صدا و زمان را از خود مرورگر اضافه می‌کند. متن داخل این عنصرها فقط وقتی نمایش داده می‌شود که مرورگر فایل را پشتیبانی نکند:

<video src="intro.mp4" controls width="640"></video>
<audio src="podcast.mp3" controls></audio>

اگر controls را ننویسید، چیزی روی صفحه دیده نمی‌شود و کاربر راهی برای پخش ندارد. برای فرمت ویدیو، MP4 با کدک H.264 سازگاری گسترده‌ای دارد و WebM هم به‌عنوان گزینهٔ آزاد و سبک رایج است.

تمرین‌ها

<!-- Write your code here -->

<a href="https://www.wikipedia.org" target="_blank" rel="noopener">Wikipedia Encyclopedia</a>

<figure>
  <img src="mountain.jpg" alt="A snow-covered peak under a clear sky" width="640" height="426" loading="lazy">
  <figcaption>Summer trip to Damavand</figcaption>
</figure>

:::

خلاصه

• عنصر a با ویژگی href صفحه‌ها را به هم وصل می‌کند؛ نشانی مطلق برای بیرون و نشانی نسبی برای داخل سایت.
• با id و پیوند #شناسه می‌توانید درون صفحه جابه‌جا شوید.
• target="_blank" پیوند را در تب جدید باز می‌کند و همراه آن rel="noopener" بنویسید.
• تصویر همیشه alt معنادار دارد و اعلام width و height از پرش چیدمان جلوگیری می‌کند.
• video و audio با ویژگی controls پخش‌کنندهٔ مرورگر را می‌گیرند.

پیوند و رسانه محتوای صفحه را پربار می‌کنند؛ در درس بعدی سراغ داده‌های ساخت‌یافته می‌رویم: فهرست‌ها و جدول‌ها.