06 Mai HTML5 Familie

direkt zur Praktikumsaufgabe direkt zu Q&A

HTML Audio und Video

Skript

HTML Weiterführend

Inspektor und Browserunterschiede

Sie haben in dieser Lektion folgendes gelernt:

A — Praktikumsaufgabe

Stellen Sie Sicher, dass Ihr Profilbild exakt die Maße 85x110 Pixel hat.

Verlinken Sie immer als oberstes Element in Ihrer Steckbrief.htm Datei mithilfe eines a-Tags auf Ihr Repository unter dem Reiter “Issues”, sodass wir Ihnen sowohl auf der Kursseite als auch auf GitHub detailliertes Feedback zu Ihren Abgaben geben können.

Achten Sie bitte darauf Ihren korrekten Nutzernamen & Repository-Namen anzugeben: https://github.com/nutzername/GIS_SoSe2020/issues

Diese Aufgabe baut auf die vorherige Aufgabe #01 auf.

Sie benötigen für diese Aufgabe KEIN CSS UND KEIN JS

Im nächsten Schritt ergänzen Sie die Website aus Aufgabe 01 mit eigenen Inhalten. Ziel ist es eine Portfolio-Website für Sie anzulegen. Legen Sie für diese und jede Folgende Abgabe bitte einen neuen Ordner an und überschreiben Sie Ihre bisherige Arbeit nicht. Sie können für die Portfolioseite bestehende Arbeiten von Ihnen nutzten.

Falls Sie keine eigenen Arbeiten wie z.B. Bilder/Videos/Audios/Texte haben, dann verwenden Sie Dummy-Inhalte aus lizenzfreien Quellen bei denen der Autor nicht genannt werden muss, wie z.B. Pixabay (Fotos/Videos/Illustrationen), Unsplash (High-Quality Bilder), Pexels (High-Quality Bilder), YouTube Audio Library (Lizenzfreie Musik) Freesound (Lizenzfreie Sounds) oder Seiten bei denen Autoren genannt werden müssen wie z.B.,Freepik, Bensound etc… mit dem entsprechenden Verweis.

-> Ersetzen Sie also alle Platzhalterinhalte aus Aufgabe #01 mit eigenem Bild- und Videomaterial.

Neben der Portfolio-Haupt-Seite sollten mindestens zwei weitere HTML-Dokumente erstellt werden, um folgende Seitenstruktur zu schaffen:

  1. (Haupt-)Seite “Portfolio”: hier werden Arbeiten von Ihnen präsentiert
  2. Seite “About Me”: ein kurzer Steckbrief zu Ihrer Person (hier können Sie natürlich den Steckbrief aus der Kursseite als Basis nutzten bzw. Teile daraus kopieren)
  3. Seite “Contact”: eine statische Seite, auf der Sie Kontaktmöglichkeiten (Mail, Facebook, Instagram, etc…) bieten.

-> Wenn Sie möchten können Sie natürlich weitere Unterseiten erstellen.

Verwenden Sie für die 3 HTML Seiten jeweils die grundlegende HTML5 Seitenstruktur und zusätzlich zu den gundlegenden Elementen mindestens 12 verschiedene HTML5 Elemente um sich mit dem Umgang mit diesen Elementen vertraut zu machen (z.B. Iframe, a, p, div, li, img, audio, video, h, etc… ). Sie dürfen natürlich mehr verschiedene HTML5-Tags verwenden.

Ihre Website soll auf mindestens 3 Dateien verschiedenen Typs (z.B. Bilder/Videos/Audio/PDF/3D-Modell/GIFS) verweisen die keine Weblinks sind, sondern die sich im Aufgabenordner (gleicher Ordner wie “portfolio.html”, “about_me.html” und “contact.html”) befinden. Sie dürfen natürlich auf mehr Dateien lokal & im Web verweisen.

Die drei HTML-Seiten werden miteinander verlinkt. Sie sollen also eine rudimentäre Navigation erstellen, sodass per Mausklick von jeder Seite auf jede andere Seite navigiert werden kann.

Erstellen Sie eine HTML Seite mit dem Namen tags_used.html im Aufgabenordner auf der Sie die verwendeten HTML Tags tabellarisch auflisten. Verlinken Sie diese in Ihrer Steckbrief.htm. Sie müssen keine Navigation zwischen dieser HTML Seite und den anderen Seiten herstellen.

Alle Ihre Seiten sollen nur aus gültigem HTML5 aufgebaut sein. Sie können zum Prüfen Ihrer Seite den W3 HTML VALIDIERER verwenden.

Mit dieser Aufgabe sollten Sie die Grundlagen von HTML, das Einbinden von medialen Elementen und Verlinken von HTML-Dokumenten besser verstehen. Die Qualität der Gestaltung spielt für diese Aufgabe eine untergeordnete Rolle. In der nächsten Lektion beschäftigen wir uns mit dem Styling von HTML, um eine bessere Optik zu erzielen.

Sie haben durch diese Praktikumsaufgabe gelernt:

Den Umgang mit verschiedenen (Rich-Media) HTML-Tags sollte Ihnen jetzt bekannt sein. Das Verlinken von HTML-Dokumenten sollten Sie durch das a-Tag realisieren können. Die größte Herausvorderung liegt hier sicher in der Vorbereitung der visuellen Medien (im korrekten Format und sinnvoller Auflösung). Folgende mögliche Werkzeuge können Sie bei der Erstellung der visuellen Komponenten für Ihr Portfolio unterstützen:

Mögliche Werkzeuge für das Zuschneiden/Vorbereiten von Fotos, Grafiken und Illustrationen

Mögliche Werkzeuge für das Zuschneiden/Vorbereiten von Animationen und Videos

(*) HFU Lizenz aktuell leider nur an den stationären Arbeitsplätzen verfügbar

Abgabe bis zum 10. Mai um 18:00 auf der Kursseite.

Bitte erstellen Sie nach Fertigstellung einen Link als oberstes Element (unter dem GitHub issues link) in Ihrer Steckbrief.htm, der auf das Ergebnis verweist (bspw. nutzername.github.io/GIS-SoSe-2020/Aufgabe_2).

Aufgrund der unklaren Aufgabenstellung wird der Verteidigungszeitraum dieser Aufgabe bis zum 17. Mai um 18:00 verlängert

?! Q&A Fragen und Antworten

Zusammenfassung von: <TawsTm>

Head und Body sind Grundstruktur, alles darin sind Strukturierende Elemente, aber in einem anderen Sinn.

Welche Einheiten soll man für die Attribute Height und Width benutzen?

Das Attribut Width und Height sind automatisch Pixel. Grundsätzlich (sobald erlaubt) solltest du alles in CSS machen, d.h. du kannst alles verwenden. Relative Werte sind im allgemeinen besser als feste, um die Seite responsive zu halten.

Breaktags. Wie bekomm ich gute Anker hin?

Einfach nicht so viele Gedanken über gutes runterspringen machen. In der letzten Aufgabe gab es nur durch füllende Elemente eine schöne Lösung für das Problem. Breaktags braucht man im Normalfall nicht mehr. Wir verwenden später das CSS Box-Modell um die Abstände so hinzubekommen wie wir das wollen.

Wie werden Sternchen verteilt und was bringen Sie?

Sterne gibt es für besondere Leistungen. Es gibt dadurch keine Vorteile außer Prestige. Drei Sterne pro Person sind maximum. Sterne bleiben nicht für andere Fächer bestehen.

Dürfen wir veraltete HTML Tags verwenden?

Nicht HTML5 konforme Tags wie oder ähnliche sollen und können in manchen Fällen nicht mehr verwendet werden.

Ist das name-Attribute obsolet / wird es noch verwendet?

Das name-Attribut wird vor allem in Forms verwendet, um bei einer Submission eines Elementes einen Identifier zu diesem Element zu haben. In der Aufgabe sollte stattdessen das ID-Tag verwendet werden, da dieses später die eindeutige Zuweisung zu CSS-Code ermöglicht.

Darf man für ein IFrame JavaScript und CSS verwenden?

Sie müssen bei einem IFrame nicht mit CSS und JavaScript arbeiten. Wenn das IFrame CSS und JavaScipt enthält, ist das halt so.

Warum sollen die Aufgaben kopiert und nicht weiterbearbeitet werden?

Alte Aufgaben sollen nicht überschrieben werden, damit man auf den alten Inhalt noch zugreifen kann (Bitte kopieren und nicht alte Dateien in den neuen Ordner verschieben).

Warum ist alles gleich wie bei EIA1?

Sobald es richtig an die Programmierung geht, werden wir uns splitten. Da wir die rudimentären Grundlagen der Programmierung im Gegensatz zu den EIA1-Studierenden schon können, wird es hier zu unterschieden innerhalb der Lernmaterialien kommen.

Kann man Dateien, die man nicht commiten möchte in Visual-Studio Code ignorieren?

Mit der .gitignore-Datei lassen sich Dateien und Ordner ignorieren. Ganze Ordner listet man in der .gitignore im Normalfall ohne Dateiendung einfach untereinander.