Linki i obrazy
Naucz się dodawać linki i obrazy do strony
Linki <a>
Tag <a> (anchor) tworzy link. Główny atrybut to href (hypertext reference) — adres do którego prowadzi link.
<!-- Link zewnętrzny -->
<a href="https://google.com">Otwórz Google</a>
<!-- Link wewnętrzny (inna strona na tej samej witrynie) -->
<a href="/o-nas">O nas</a>
<!-- Otwiera w tej samej karcie (domyślnie) -->
<a href="https://google.com">Google</a>
<!-- Otwórz w nowej karcie -->
<a href="https://google.com" target="_blank" rel="noopener">Google</a>target="_blank" — otwórz link w nowej karcie.
rel="noopener" — bezpieczeństwo: nowa karta nie może uzyskać dostępu do bieżącej strony.
Obrazy <img>
Tag <img> wstawia obrazek. Jest samozamykający — nie ma tagu zamykającego.
<!-- src — ścieżka do obrazu, alt — opis dla czytników ekranu -->
<img src="zdjecie.jpg" alt="Zdjęcie miasta">
<!-- Wymiary (zawsze dobrze je podać) -->
<img src="logo.png" alt="Logo" width="200" height="100">
<!-- Obraz z internetu -->
<img src="https://via.placeholder.com/300" alt="Placeholder">alt — bardzo ważny! Jeśli obraz się nie załaduje, przeglądarka pokaże ten tekst. Czytany też przez czytniki ekranu dla osób z wadami wzroku.
Zawsze dodawaj atrybut alt do obrazów! Obraz bez alt lub z pustym alt to zły SEO i dostępność. Jeśli obraz jest czysto dekoracyjny i nie niesie znaczenia — zostaw alt='', ale nie usuwaj atrybutu całkowicie.
Obraz można owinąć w link — kliknięcie obrazu prowadzi wtedy do adresu URL.
Ścieżki względne (zdjecie.jpg, /images/logo.png) — dla plików na własnym serwerze. Ścieżki bezwzględne (https://...) — dla zasobów z internetu. Na własnej stronie zawsze używaj ścieżek względnych.