Odkazy & Média

<!-- Základní odkaz -->
<a href="https://google.com">Google</a>

<!-- Nová záložka — BEZPEČNĚ -->
<a href="https://google.com"
   target="_blank"
   rel="noopener noreferrer">
  Otevřít v nové záložce
</a>

<!-- Email -->
<a href="mailto:info@web.cz">
  info@web.cz
</a>

<!-- Telefon (klik na mobilu zavolá) -->
<a href="tel:+420123456789">
  +420 123 456 789
</a>

<!-- Kotva v dokumentu -->
<a href="#kontakt">Přejít na kontakt</a>
<section id="kontakt">...</section>

<!-- Stažení souboru -->
<a href="cenik.pdf"
   download="cenik-2024.pdf">
  Stáhnout ceník (PDF)
</a>

<!-- Odkaz s ikonou — přístupně -->
<a href="/produkt"
   aria-label="Detail produktu Victorinox">
  <img src="icon.png" alt="">
  Victorinox Classic
</a>

<!-- Základní -->
<img
  src="foto.jpg"
  alt="Jana Nováková při prezentaci"
  width="800"
  height="600"
>

<!-- Výkonná verze -->
<img
  src="hero.jpg"
  alt="Victorinox Classic kapesní nůž"
  width="800"
  height="600"
  loading="eager"
  decoding="async"
  srcset="
    hero-400.jpg  400w,
    hero-800.jpg  800w,
    hero-1200.jpg 1200w
  "
  sizes="
    (max-width: 600px)  400px,
    (max-width: 900px)  800px,
    1200px
  "
>

<!-- Lazy load -->
<img
  src="produkt.jpg"
  alt="Gerber Paraframe"
  width="400" height="300"
  loading="lazy"
>

<!-- Dekorativní — prázdný alt -->
<img src="dekorace.svg" alt="">

<!-- CSS: responzivní obrázky -->
<style>
img { max-width: 100%; height: auto; }
</style>

<!-- WebP + JPG fallback -->
<picture>
  <source type="image/avif"
    srcset="hero.avif">
  <source type="image/webp"
    srcset="hero.webp">
  <img
    src="hero.jpg"
    alt="Hero obrázek"
    width="1200" height="600"
    loading="eager"
  >
</picture>

<!-- Art direction: jiný ořez -->
<picture>
  <!-- Mobil: na výšku, jiný ořez -->
  <source
    media="(max-width: 600px)"
    srcset="hero-mobile.jpg"
  >
  <!-- Tablet -->
  <source
    media="(max-width: 1200px)"
    srcset="hero-tablet.jpg"
  >
  <!-- Desktop fallback -->
  <img
    src="hero-desktop.jpg"
    alt="Naše prodejna"
    width="1200" height="400"
  >
</picture>

<!-- Obrázek s popiskem -->
<figure>
  <img
    src="nuz.jpg"
    alt="Victorinox Classic"
    width="400" height="300"
  >
  <figcaption>
    Victorinox Classic — kapesní nůž
    s 9 funkcemi, váha 21 g.
  </figcaption>
</figure>

<!-- Kódový blok s popiskem -->
<figure>
  <figcaption>
    Příklad: Hello World v Pythonu
  </figcaption>
  <pre><code>
print("Hello, World!")
  </code></pre>
</figure>

<!-- CSS -->
<style>
figure {
  margin: 1.5rem 0;
}
figcaption {
  font-size: 0.875rem;
  color: #666;
  margin-top: 0.5rem;
  font-style: italic;
}
</style>

<!-- Standardní video s titulky -->
<video
  controls
  poster="nahled.jpg"
  preload="metadata"
  width="800" height="450"
>
  <source src="video.mp4"
    type="video/mp4">
  <source src="video.webm"
    type="video/webm">
  <track
    src="titulky.vtt"
    kind="subtitles"
    srclang="cs"
    label="Čeština"
  >
  <p>Váš prohlížeč nepodporuje video.
    <a href="video.mp4">Stáhnout</a>
  </p>
</video>

<!-- Background video -->
<video
  autoplay muted loop playsinline
>
  <source src="bg.mp4" type="video/mp4">
</video>

<!-- Responzivní video CSS -->
<style>
.video-wrap {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
}
.video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
</style>

<!-- Základní audio -->
<audio controls preload="metadata">
  <source src="podcast.mp3"
    type="audio/mpeg">
  <source src="podcast.ogg"
    type="audio/ogg">
  Váš prohlížeč nepodporuje audio.
</audio>

<!-- Skrytý audio řízený JS -->
<audio id="bgMusic" loop>
  <source src="hudba.mp3"
    type="audio/mpeg">
</audio>

<button onclick="
  document.getElementById('bgMusic')
    .play()
">
  Spustit hudbu
</button>

<!-- Stylování -->
<style>
audio {
  width: 100%;
  border-radius: 4px;
}
</style>

<!-- YouTube -->
<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Název videa"
  width="560" height="315"
  frameborder="0"
  allow="accelerometer; autoplay;
    encrypted-media; gyroscope"
  allowfullscreen
  loading="lazy"
></iframe>

<!-- Google Maps -->
<iframe
  src="https://www.google.com/maps/embed?pb=..."
  title="Mapa pobočky Praha 1"
  width="600" height="450"
  loading="lazy"
  style="border: 0"
></iframe>

<!-- Responzivní iframe (16:9) -->
<div class="iframe-wrap">
  <iframe src="..." title="...">
  </iframe>
</div>

<style>
.iframe-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
}
.iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
</style>