Navigation: Ruben Grobstruktur Artikel: Flavio Youtube: Video: Taschenrechnervarianten: Ruben Zeitgewinn: Formular neuer Author: Rechtliches: Footer: Taschenrechner (JS):
HTML/Struktur: Benuten Sie head/body, meta, header, footer, section, main, aside, nav, headings, div, p, form, span, time, small, ul/ol/dl, a, figure, figcaption, img, video, object, iframe, table, address, ... um die Inhalte semantisch zu strukturieren und Medien einzubinden. Das Wikipraktika-Logo soll auf die aktuelle Seite verlinken. Setzen Sie für die Links des Sprachmenüs das "hreflang"-Attribut. Setzen Sie für das Zeitersparnis-Diagramm das "role"-Attribut. Binden Sie das Zeitersparnis-Diagramm so ein, das die Animation korrekt funktioniert. Benutzen Sie das time-Element für sämtliche Zeitangaben. Setzen Sie das "datetime"-Attribut. Das Verwenden von deprecated-Tags und Attributen ist nicht erlaubt. Setzen Sie Metatags anhand der Text-Vorlage. Es darf kein Inhalt von der Textvorlage weggelassen werden! Ergänzen Sie das Video mit den vorhandenen Untertitel. Nutzen Sie dazu "track".
CSS/Style: Lösen Sie folgendes mit reinem CSS (fügen sie keine zusätzlichen Elemente/Text ins HTML ein): Titelnummerierung Sprachspezifische Flaggen beim Sprachmenü (nutzen Sie "hreflang" und "before") Tipp: Nutzen Sie Selektoren für bereits vorhandene Attribute/Verschachtelungen. Benutzen Sie effiziente Selektoren (z.B. Kindselektor statt Nachfahrenselektor). Nutzen Sie sinnvolle Grössen- und Breitenangaben Nutzen Sie % damit sich ihre Webseite an die Grösse des Browsersfensters anpasst. Setzen Sie eine sinnvolle Maximalgrösse für die Schreibmaschine, den Taschenrechner, das Diagramm und das N-Spire-Video. Nutzen Sie rem und em sinnvoll Definieren Sie die Höhe des Youtube-Video in Abhängigkeit der Seitenbreite. Tipp: calc() → Höhe = 56.25% der Seitenbreite - Margins. Benutzen Sie den gleichen Mechanismus für den Taschenrechner. Nutzen Sie nth-child für die Einfärbung der Tabellenzeilen. Definieren Sie für die Formularelemente hover- und active-Styles gemäss Video. Hinweis: Der error-Status von Formularelementen muss nicht seperat gestyled werden. Setzen Sie bei den Formularelementen not() ein, um einzelne Elemente von generischeren Styles auszuklammern. Font und sinnvolle Fallbacks sind vorgegeben; es muss kein Font installiert werden.