Keçidlər və şəkillər

HTML adındakı «HyperText» (hipermətn) keçidləri olan mətn deməkdir. Ayrı-ayrı səhifələri vebə çevirən məhz keçidlərdir: bir klik — və sən başqa səhifədə, başqa saytda, hətta başqa ölkədəsən. Bu dərsdə səhifələri keçidlərlə birləşdirəcək və onları şəkillərlə canlandıracaqsan.

Keçidlər: `<a>` elementi

Keçid <a> (anchor — lövbər) elementi ilə yaradılır. href atributunda ünvan yazılır, teqlərin arasındakı mətn isə istifadəçinin klik etdiyi hissədir. Yaxşı keçid mətni hara apardığını deyir: «buraya bas» yox, «Dərs cədvəlinə bax».

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; line-height: 1.8; }
  a { color: #4f46e5; }
</style>

<p>Another site: <a href="https://example.com">Example website</a></p>
<p>New tab: <a href="https://example.com" target="_blank" rel="noopener">Open in a new tab</a></p>
<p>Email: <a href="mailto:info@example.com">Write to us</a></p>
<p>Same site: <a href="about.html">About us</a></p>

• target="_blank" keçidi yeni vərəqdə açır. Onunla birlikdə rel="noopener" yaz — bu, yeni səhifənin sənin səhifənə təsir etməsinin qarşısını alır.
• mailto: ilə başlayan ünvan poçt proqramını hazır alıcı ilə açır.
• about.html kimi qısa ünvan eyni saytdakı fayla aparır — bu, nisbi yoldur.

Mütləq və nisbi yollar

Mütləq URL protokol və domen daxil olmaqla tam ünvandır: https://example.com/images/cat.png. Başqa saytlara keçid üçün istifadə olunur. Nisbi yol isə cari fayldan hesablanır və öz saytının daxilində işlədilir. Tutaq ki, saytın qovluqları belədir:

my-site/
├── index.html
├── about.html
├── images/
│   └── logo.png
└── blog/
    └── post.html

Səhifənin daxilində keçid

Keçid eyni səhifənin müəyyən yerinə də apara bilər. Bunun üçün hədəf elementə id atributu ver, keçidin href-ində isə # işarəsindən sonra həmin id-ni yaz. Uzun məqalələrdə mündəricat belə qurulur. href="#top" isə səhifənin ən yuxarısına qaytarır.

<nav>
  <a href="#fruits">Fruits</a> |
  <a href="#drinks">Drinks</a>
</nav>

<h2 id="fruits">Fruits</h2>
<p>Apples, pears, pomegranates.</p>

<h2 id="drinks">Drinks</h2>
<p>Tea, ayran, juice.</p>
<a href="#top">Back to top</a>

Şəkillər

Şəkil boş <img> elementi ilə əlavə olunur. src atributu şəkil faylının yoludur, alt isə alternativ mətndir: ekran oxuyucusu onu səsləndirir, şəkil yüklənməyəndə onun yerində görünür, axtarış sistemləri də ondan istifadə edir. width və height şəklin ölçüsünü göstərir: brauzer şəkil yüklənənə qədər onun üçün yer saxlayır və səhifə «atılıb-düşmür».

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  figcaption { color: #475569; font-size: 14px; }
</style>

<figure>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Crect width='120' height='80' fill='%2338bdf8'/%3E%3Ccircle cx='95' cy='20' r='12' fill='%23fde047'/%3E%3Cpath d='M0 80 40 35 70 65 90 45 120 80Z' fill='%2316a34a'/%3E%3C/svg%3E"
       alt="Green hills under a blue sky with a yellow sun"
       width="240" height="160">
  <figcaption>Figure 1. A picture made of three shapes.</figcaption>
</figure>

SVG və emoji

SVG (Scalable Vector Graphics) şəkli piksellərlə yox, fiqurlarla təsvir edir: «burada radiusu 28 olan qırmızı dairə var». Ona görə o, istənilən böyütmədə kəskin qalır. SVG-ni ayrıca fayl kimi <img> ilə qoşmaq və ya birbaşa HTML-in içinə <svg> elementi kimi yazmaq olar. Emoji isə sadəcə mətn simvoludur və heç bir fayl tələb etmir.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
</style>

<p>Emoji are just text: 🚦 🌞 🍎</p>

<svg width="220" height="110" viewBox="0 0 220 110" role="img" aria-label="A traffic light">
  <rect x="5" y="5" width="210" height="100" rx="20" fill="#1e293b"/>
  <circle cx="50" cy="55" r="28" fill="#ef4444"/>
  <circle cx="110" cy="55" r="28" fill="#facc15"/>
  <circle cx="170" cy="55" r="28" fill="#22c55e"/>
</svg>