Versionen dieses Beitrags

Hausaufgabe Tabelle

Gb 80x80 Gunnar Bittersmann
  • Hausaufgabe Tabelle
  • @@Shezua
  • > Ich sollte für die Schule eine eigentlich leichte Aufgabe machen
  • Welche darin besteht, Heffalump, Tieger, Hund und Katze (seit wann gibt’s Hund und Katze im 160-Morgen-Wald?) in einem 2×2-Grid anzuordnen?
  • Nicht einfacher als das:
  • 🐘 🐅
  • 🐕 🐈
  • Gerngeschehen.
  • Aber mal im Spaß, ich zeig dir mal (und du kannst es deiner Lehrerin zeigen), wie man’s richtig macht:
  • Die HTML-Datei fängt natürlich mit der DOCTYPE-Angabe an und enthält eine Meta-Viewport-Angabe (es soll ja [keine blöde Seite](https://forum.selfhtml.org/self/2015/jan/29/mobiler-browser-und-einfaches-html/1631163#m1631163) sein) und noch [einiges mehr](https://wiki.selfhtml.org/wiki/HTML/Dokumentstruktur_und_Aufbau).
  • (Ich hab das gleich mal zum Anlass genommen, diese Seite und auch die [Kopfdaten](https://wiki.selfhtml.org/wiki/HTML/Kopfdaten) zu ergänzen/berichtigen.)
  • Sieht dann so aus:
  • ~~~HTML
  • <!DOCTYPE html>
  • <html lang="de">
  • <head>
  • <meta charset="UTF-8"/>
  • <title>Elefant, Tiger, Hund und Katze | Shezua</title>
  • <link rel="stylesheet" href="gallery.css">
  • </head>
  • <body>
  • <div class="gallery">
  • <img src="elefant.jpg" alt="Elefant">
  • <img src="tiger.jpg" alt="Tiger">
  • <img src="hund.jpg" alt="Hund">
  • <img src="katze.jpg" alt="Katze">
  • </div>
  • </body>
  • </html>
  • ~~~
  • *That’s it!*{:@en} Mehr sollte im HTML nicht stehen.
  • Es darf sogar weniger sein; das `<div class="gallery">`{:.language-html} ist hier nicht nötig. Ich hab das mal eingebaut,
  • 1. um die Komponente "gallery" wiederverwenden zu können,
  • 2. weil es ja noch mehr Inhalt auf der Seite geben könnte.
  • Hinzugekommen sind die Altenativtexte (`alt`-Attribute) bei den Bildern, die bedeutsam sind, wenn ein Bild nicht geladen wird (Netzwerkprobleme, Nutzer hat Laden von Bildern wegen Datenvolumen deaktiviert, …) oder nicht gesehen werden kann (Blinde/Sehschwache, die sich den Seiteninhalt von einem Screenreader vorlesen lassen).
  • Hinzugekommen sind die Alternativtexte (`alt`-Attribute) bei den Bildern, die bedeutsam sind, wenn ein Bild nicht geladen wird (Netzwerkprobleme, Nutzer hat Laden von Bildern wegen Datenvolumen deaktiviert, …) oder nicht gesehen werden kann (Blinde/Sehschwache, die sich den Seiteninhalt von einem Screenreader vorlesen lassen).
  • Weggefallen ist der ganze Tabellenkram. Es ist lediglich der *Inhalt* im HTML; nicht aber dessen *Darstellung*.
  • Die Darstellung ist Sache des **Stylesheets (CSS)**, welches mit `<link rel="stylesheet" href="gallery.css">`{:.language-html} eingebunden wird.
  • In der Datei gallery.css steht dann sowas wie:
  • ~~~CSS
  • body
  • {
  • max-width: 65vh;
  • margin: auto;
  • }
  • ~~~
  • Beschränke die Breite des `body`-Elements (d.h. des Seiteninhalts) und zentriere den Seiteninhalt horizontal (was du mit `<center>`{:.language-html.bad} erreichen wolltest.
  • ~~~CSS
  • .gallery
  • {
  • display: grid;
  • grid-template-columns: repeat(2, 1fr);
  • grid-gap: 2vmin;
  • }
  • ~~~
  • Stelle die Bilder in einem Grid mit 2 gleichbreiten Spalten (*columns*{:@en}) dar, zwischen denen etwas Abstand (*gap*{:@en}) ist.
  • ~~~CSS
  • .gallery img
  • {
  • width: 100%;
  • }
  • ~~~
  • Lass die Bilder so breit wie erforderlich werden.
  • *That’s it!*{:@en}
  • ☞ [Zum Ansehen](https://codepen.io/gunnarbittersmann/pen/jZWOyw) (unter „HTML“ steht bei CodePen nur das, was innerhalb des `body` ist)
  • Und wenn du das Fenster zusammenschiebst, siehst du, wie sich die Bilder in ihrer Größe dem verfügbaren Platz anpassen. *Responsive design*{:@en} – oder anders gesagt: Webdesign 2018. Passt dann auch auf Handys, Tablets, Kühlschränken, …
  • Und wenn du dir das in einem Edge < 16 oder einem alten Internet Explorer ansiehst, dann sind die vier Bilder untereinander. Das ist OK so!
  • (Man könnte das für Edge < 16 und IE auch hinbekommen, aber ich wollte hier ein Grundprinzip des Webdesigns verdeutlichen: [*progressive enhancement*{:@en}](https://forum.selfhtml.org/self/2015/sep/19/technische-fragen-zu-einer-seite-die-nur-aus-einer-seite-besteht/1650342#m1650342).)
  • LLAP 🖖
  • --
  • “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

Hausaufgabe Tabelle

Gb 80x80 Gunnar Bittersmann
  • Hausaufgabe Tabelle
  • @@Shezua
  • > Ich sollte für die Schule eine eigentlich leichte Aufgabe machen
  • Welche darin besteht, Heffalump, Tieger, Hund und Katze (seit wann gibt’s Hund und Katze im 160-Morgen-Wald?) in einem 2×2-Grid anzuordnen?
  • Nicht einfacher als das:
  • 🐘 🐅
  • 🐕 🐈
  • Gerngeschehen.
  • Aber mal im Spaß, ich zeig dir mal (und du kannst es deiner Lehrerin zeigen), wie man’s richtig macht:
  • Die HTML-Datei fängt natürlich mit der DOCTYPE-Angabe an und enthält eine Meta-Viewport-Angabe (es soll ja [keine blöde Seite](https://forum.selfhtml.org/self/2015/jan/29/mobiler-browser-und-einfaches-html/1631163#m1631163) sein) und noch [einiges mehr](https://wiki.selfhtml.org/wiki/HTML/Dokumentstruktur_und_Aufbau).
  • (Ich hab das gleich mal zum Anlass genommen, diese Seite und auch die [Kopfdaten](https://wiki.selfhtml.org/wiki/HTML/Kopfdaten) zu ergänzen/berichtigen.)
  • Sieht dann so aus:
  • ~~~HTML
  • <!DOCTYPE html>
  • <html lang="de">
  • <head>
  • <meta charset="UTF-8"/>
  • <title>Elefant, Tiger, Hund und Katze | Shezua</title>
  • <link rel="stylesheet" href="gallery.css">
  • </head>
  • <body>
  • <div class="gallery">
  • <img src="elefant.jpg" alt="Elefant">
  • <img src="tiger.jpg" alt="Tiger">
  • <img src="hund.jpg" alt="Hund">
  • <img src="katze.jpg" alt="Katze">
  • </div>
  • </body>
  • </html>
  • ~~~
  • *That’s it!*{:@en} Mehr sollte im HTML nicht stehen.
  • Es darf sogar weniger sein; das `<div class="gallery">`{:.language-html} ist hier nicht nötig. Ich hab das mal eingebaut,
  • 1. um die Komponente "gallery" wiederverwenden zu können,
  • 2. weil es ja noch mehr Inhalt auf der Seite geben könnte.
  • Hinzugekommen sind die Altenativtexte (`alt`-Attribute) bei den Bildern, die bedeutsam sind, wenn ein Bild nicht geladen wird (Netzwerkprobleme, Nutzer hat Laden von Bildern wegen Datenvolumen deaktiviert, …) oder nicht gesehen werden kann (Blinde/Sehschwache, die sich den Seiteninhalt von einem Screenreader vorlesen lassen).
  • Weggefallen ist der ganze Tabellenkram. Es ist lediglich der *Inhalt* im HTML; nicht aber dessen *Darstellung*.
  • Die Darstellung ist Sache des **Stylesheets (CSS)**, welches mit `<link rel="stylesheet" href="gallery.css">`{:.language-html} eingebunden wird.
  • In der Datei gallery.css steht dann sowas wie:
  • ~~~CSS
  • body
  • {
  • max-width: 65vh;
  • margin: auto;
  • }
  • ~~~
  • Beschränke die Breite des `body`-Elements (d.h. des Seiteninhalts) und zentriere den Seiteninhalt horizontal (was du mit `<center>`{:.language-html.bad} erreichen wolltest.
  • ~~~CSS
  • .gallery
  • {
  • display: grid;
  • grid-template-columns: repeat(2, 1fr);
  • grid-gap: 2vmin;
  • }
  • ~~~
  • Stelle die Bilder in einem Grid mit 2 gleichbreiten Spalten (*columns*{:@en}) dar, zwischen denen etwas Abstand (*gap*{:@en}) ist.
  • ~~~CSS
  • .gallery img
  • {
  • width: 100%;
  • }
  • ~~~
  • Lass die Bilder so breit wie erforderlich werden.
  • *That’s it!*{:@en}
  • ☞ [Zum Ansehen](https://codepen.io/gunnarbittersmann/pen/jZWOyw) (unter „HTML“ steht bei CodePen nur das, was innerhalb des `body` ist)
  • Und wenn du das Fenster zusammenschiebst, siehst du, wie sich die Bilder in ihrer Größe dem verfügbaren Platz anpassen. *Responsive design*{:@en} – oder anders gesagt: Webdesign 2018.
  • Und wenn du das Fenster zusammenschiebst, siehst du, wie sich die Bilder in ihrer Größe dem verfügbaren Platz anpassen. *Responsive design*{:@en} – oder anders gesagt: Webdesign 2018. Passt dann auch auf Handys, Tablets, Kühlschränken, …
  • Und wenn du dir das in einem Edge < 16 oder einem alten Internet Explorer ansiehst, dann sind die vier Bilder untereinander. Das ist OK so!
  • (Man könnte das für Edge < 16 und IE auch hinbekommen, aber ich wollte hier ein Grundprinzip des Webdesigns verdeutlichen: [*progressive enhancement*{:@en}](https://forum.selfhtml.org/self/2015/sep/19/technische-fragen-zu-einer-seite-die-nur-aus-einer-seite-besteht/1650342#m1650342).)
  • LLAP 🖖
  • --
  • “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

Hausaufgabe Tabelle

Gb 80x80 Gunnar Bittersmann
  • Hausaufgabe Tabelle
  • @@Shezua
  • > Ich sollte für die Schule eine eigentlich leichte Aufgabe machen
  • Welche darin besteht, Heffalump, Tieger, Hund und Katze (seit wann gibt’s Hund und Katze im 160-Morgen-Wald?) in einem 2×2-Grid anzuordnen?
  • Nicht einfacher als das:
  • 🐘 🐅
  • 🐕 🐈
  • Gerngeschehen.
  • Aber mal im Spaß, ich zeig dir mal (und du kannst es deiner Lehrerin zeigen), wie man’s richtig macht:
  • Die HTML-Datei fängt natürlich mit der DOCTYPE-Angabe an und enthält eine Meta-Viewport-Angabe (es soll ja [keine blöde Seite](https://forum.selfhtml.org/self/2015/jan/29/mobiler-browser-und-einfaches-html/1631163#m1631163) sein) und noch [einiges mehr](https://wiki.selfhtml.org/wiki/HTML/Dokumentstruktur_und_Aufbau).
  • (Ich hab das gleich mal zum Anlass genommen, diese Seite und auch die [Kopfdaten](https://wiki.selfhtml.org/wiki/HTML/Kopfdaten) zu ergänzen/berichtigen.)
  • Sieht dann so aus:
  • ~~~HTML
  • <!DOCTYPE html>
  • <html lang="de">
  • <head>
  • <meta charset="UTF-8"/>
  • <title>Elefant, Tiger, Hund und Katze | Shezua</title>
  • <link rel="stylesheet" href="gallery.css">
  • </head>
  • <body>
  • <div class="gallery">
  • <img src="elefant.jpg" alt="Elefant">
  • <img src="tiger.jpg" alt="Tiger">
  • <img src="hund.jpg" alt="Hund">
  • <img src="katze.jpg" alt="Katze">
  • </div>
  • </body>
  • </html>
  • ~~~
  • *That’s it!*{:@en} Mehr sollte im HTML nicht stehen.
  • Es darf sogar weniger sein; das `<div class="gallery">`{:.language-html} ist hier nicht nötig. Ich hab das mal eingebaut,
  • 1. um die Komponente "gallery" wiederverwenden zu können,
  • 2. weil es ja noch mehr Inhalt auf der Seite geben könnte.
  • Hinzugekommen sind die Altenativtexte (`alt`-Attribute) bei den Bildern, die bedeutsam sind, wenn ein Bild nicht geladen wird (Netzwerkprobleme, Nutzer hat Laden von Bildern wegen Datenvolumen deaktiviert, …) oder nicht gesehen werden kann (Blinde/Sehschwache, die sich den Seiteninhalt von einem Screenreader vorlesen lassen).
  • Weggefallen ist der ganze Tabellenkram. Es ist lediglich der *Inhalt* im HTML; nicht aber dessen *Darstellung*.
  • Die Darstellung ist Sache des **Stylesheets (CSS)**, welches mit `<link rel="stylesheet" href="gallery.css">`{:.language-html} eingebunden wird.
  • In der Datei gallery.css steht dann sowas wie:
  • ~~~CSS
  • body
  • {
  • max-width: 65vh;
  • margin: auto;
  • }
  • ~~~
  • Beschränke die Breite des `body`-Elements (d.h. des Seiteninhalts) und zentriere den Seiteninhalt horizontal (was du mit `<center>`{:.language-html.bad} erreichen wolltest.
  • ~~~CSS
  • .gallery
  • {
  • display: grid;
  • grid-template-columns: repeat(2, 1fr);
  • grid-gap: 2vmin;
  • }
  • ~~~
  • Stelle die Bilder in einem Grid mit 2 gleichbreiten Spalten (*columns*{:@en}) dar, zwischen denen etwas Abstand (*gap*{:@en}) ist.
  • ~~~CSS
  • .gallery img
  • {
  • width: 100%;
  • }
  • ~~~
  • Lass die Bilder so breit wie erforderlich werden.
  • *That’s it!*{:@en}
  • ☞ [Zum Ansehen](https://codepen.io/gunnarbittersmann/pen/jZWOyw) (unter „HTML“ steht bei CodePen nur das, was innerhalb des `body` ist)
  • Und wenn du das Fenster zusammenschiebst, siehst du, wie sich die Bilder in ihrer Größe dem verfügbaren Platz anpassen. *Responsive design*{:@en} – oder anders gesagt: Webdesign 2018.
  • Und wenn du dir das in einem Edge < 16 oder einem alten Internet Explorer ansiehst, dann sind die vier Bilder untereinander. Das ist OK so!
  • (Man könnte das für Edge < 16 und IE auch hinbekommen, aber ich wollte hier ein Grundprinzip des Webdesigns verdeutlichen: [*progressive enhancement*{:@en}](https://forum.selfhtml.org/self/2015/sep/19/technische-fragen-zu-einer-seite-die-nur-aus-einer-seite-besteht/1650342#m1650342).)
  • LLAP 🖖
  • --
  • “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)