43 lines
1.0 KiB
HTML
43 lines
1.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Local Site — Gallery</title>
|
|
<link rel="stylesheet" href="assets/site.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Gallery</h1>
|
|
<nav>
|
|
<a href="index.html">Home</a>
|
|
<a href="gallery.html">Gallery</a>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<h2>Images</h2>
|
|
<figure>
|
|
<img src="assets/logo.svg" alt="logo" width="200">
|
|
<figcaption>logo.svg (relative path)</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<img src="assets/pic.svg" alt="pic" width="200">
|
|
<figcaption>pic.svg (relative path)</figcaption>
|
|
</figure>
|
|
|
|
<h2>Picture element with srcset</h2>
|
|
<picture>
|
|
<source srcset="assets/logo.svg" type="image/svg+xml">
|
|
<img src="assets/pic.svg" alt="fallback">
|
|
</picture>
|
|
|
|
<h2>Image with srcset sizes</h2>
|
|
<img src="assets/pic.svg"
|
|
srcset="assets/pic.svg 1x, assets/logo.svg 2x"
|
|
alt="srcset test" width="200">
|
|
|
|
<h2>Lazy-loaded image</h2>
|
|
<img src="assets/pic.svg" loading="lazy" alt="lazy" width="200">
|
|
</main>
|
|
</body>
|
|
</html>
|