schuledaniel/ausbildungschule
2
0
Fork 0
Code Activity

Images 2/2

Browse Source
This commit is contained in:
cwikladaniel
2025-10-16 07:41:21 +02:00
parent dd9c35c7b1
commit 7e5884e51b
1 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
Erstes Jahr/images.html Normal file → Executable file
View File

@@ -3,17 +3,29 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grafiken</title> <title>HTML-Grundlagen: Grafiken</title>
</head> </head>
<body> <body>
<h1>Grafiken</h1> <h1>HTML-Grundlagen: Grafiken</h1>
<h2>Grafik ohne Zusammenhang zum Text</h2> <h2>Grafik ohne Zusammenhang zum Text</h2>
<img src="wvss-logo.jpeg" alt="Logo WVSS"> <img src = "WvSS_Logo.png" alt = "Logo der WvSS">
<h2>Grafik mit Zusammenhang zum Text (Abbildung)</h2> <h2>Grafik mit Zusammenhang zum Text (Abbildung)</h2>
<figure> <figure>
<img src="wvss-logo.jpeg" alt="Logo WVSS"> <img src = "WvSS_Logo.png" alt = "Logo der WvSS">
<figcaption>Abb. 1: Logo der WvSS</figcaption> <figcaption>Abb 1: Logo der WvSS</figcaption>
</figure> </figure>
<h2>Responsive Grafik mit picture-Element</h2>
<p>Verhindert, dass bei kleinem viewport eine Grafik mit sehr hoher Auflösung geladen wird</p>
<figure>
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers">
</picture>
<figcaption>Abb 1: Logo der WvSS</figcaption>
</figure>
</body> </body>
</html> </html>