Praktikumsversuch HTML + CSS

Ziel

Praktischer Einsatz von HTML und CSS (mittels Flexbox) bei der Erstellung einer responsiven Website.

Übersicht

In diesem Praktium soll mittels (X)HTML5 und CSS ein semantikgetreues Layout mit Kopf, Seitenleiste zur Navigation links, Inhalt, Informationsleiste rechts und Fußleiste erstellt werden. Die Layoutgestaltung und Formatierung erfolgt ausschließlich mittels CSS, die Codierung aller Textdateien mittels UTF-8.

Es ist sinnvoll, von Anfang an den Entwicklermodus des Browsers zu nutzen (Firefox, Chrome) Aktivierung: Umschalt+Steuerung+I. Erforschen Sie die Möglichkeiten dieses Werkzeuges. Besonders interessant sind hier die Punkte: Select Element, Console, Elements, Network.

Hinweis: Alternative Stylesheets können mittels Attribut title im link-Tag definiert werden. Leider unterstützt z.Z. nur Firefox auswählbare Stylsheets (mittels Ansicht - Webseiten-Stil)

HTML-Gerüst

Nutzen Sie als Dokumentenheader HTML5 oder polyglottes HTML5 (kompatibler Dokumententyp für HTML und XML)
Entwerfen Sie ein Gerüst für die o.g. Anforderungen unter Nutzung der HTML5 Elemente: header, footer, main, article, section, nav, aside
Fügen Sie zur Identifikation der obigen Elemente in die Container die jeweiligen Namen als erste Zeile ein!
Füllen Sie den Inhaltsbereich mit Mustertext und fügen Sie in die Navigation einige Links ein.
Fügen Sie in den Inhaltsbereich 4 Buttons ein, sinnvollerweise eingebettet in einen eigenen Container.
Die Website hat noch nicht das gewünschte Layout sollte aber nun schon prinzipiell benutzbar sein.
Detaillierte Informationen zum Grundgerüst und zur Seitenstrukturierung finden Sie in den Vorlesungsfolien und hier.

Formatierungen mittels CSS

Führen Sie folgende Formatierungen mittels CSS aus:

Navigationslinks ohne Aufzählungszeichen und ohne Unterstrich darstellen
die erste Zeilen in allen Containern soll fett formatiert werden (nutzen Sie dazu sinnvollerweise geeignete CSS3-Pseudoelemente)
mittels Attribut backgroud können Sie z.B. dem Container Header ein Hintergrundbild vergeben
mittels welchem (kombinierten) Selektor würden Sie die Hintergrundfarbe der Buttons formatieren?

Seitenlayout mittels CSS-Flexbox

Entwickeln Sie ein Seitenlayout mittels CSS-Flexbox mit der Aufteilung:
- linke Spalte: Navigation
- mittlere Spalte: Haupttext
- rechte Spalte: Nebeninformation (aside)
- oben Kopfzeile
- unten Fußzeile
Es ist sinnvoll, statt eines absoluten Maßes wie Pixel ein relatives Maß wie em zu verwenden.
Als Flexbox bietet sich ein Container z.B. main an, welcher nur die Elemente nav, article, aside umfasst.
Detaillierte Informationen zu Flexboxen finden Sie hier.
Um eine Mindesthöhe von Elementen zu erreichen, können Sie die Formatierungen min-height: verwenden.
Geben Sie den Containern verschiedene Hintergrundfarben!
Nutzen Sie die Attribute: margin, padding, border! Mittels Attribut border-radius können abgerundete Ecken erstellen.

Responsives Design mittels CSS-Media-Queries

Passen Sie das zuvor erstellte Seitenlayout an geringe Seitenbreiten von z.B. Smartphones mit Hilfe von CSS Media Queries an!
Dazu sollte ein einspaltiges Layout in der Reihenfolge: Header, Navigation, Inhalt, Seitenleiste, Fußleiste gewählt werden (dies kann mittels Abfrage einer maximalen Seitenbreite und einer veränderten Flexbox-Orientierung realisiert werden).
Mittels des Attributs order können Sie die Reihenfolge der Elemente verändern.
Testen Sie das Design durch Veränderung der Browserbreite bzw. Toogle Device Toolbar (Umschalt+Steuerung+M).

Verifikation

Überprüfen Sie Ihre Website auf Fehler mittels der Console der Webentwicker-Tools.

Fakultativ

Seitenlayout mittels CSS-Grid

In diesem Schritt wird das Seitenlayout erzeugt. Bauen Sie mittels CSS-Grid ein Seitenlayout entsprechend den o.g. Anforderungen. Zusätzlich sind folgende Dinge zu beachten:

Informationen zu CSS-Grid finden Sie hier.
nutzen Sie zunächst ein Grid mit 3 Zeilen und 3 Spalten
färben Sie die Elemente mit unterschiedlichen Hintergrundfarben
nutzen Sie nach Möglichkeit relative Maßangaben anstatt Pixel
fügen Sie mittels CSS in den Header ein Hintergrundbild ein
Responsives Design mittels CSS-Media-Queries -> ändern Sie das CSS-Grid entsprechend

Formulare

Integrieren Sie in den Inhaltsbereich ein Formular zur Eingabe der Daten: Name, Adresse und E-Mail.
Wesentliche HTML-Elemente sind: form, input, button, select, datalist, label, fieldset, legend
Fügen Sie einen Button zum Rücksetzen der Daten hinzu
Nutzen Sie URL http://www.informatik.htw-dresden.de/~jvogt/it1/formdemo/form.php als Gegenstelle.
Experimentieren Sie mit GET- und POST-Übertragungen und betrachten Sie die übertragenen Daten im Webentwickerbereich unter Netzwerk - Nutzlast/Payload.
Testen Sie die verschiedenen Codierungen mittels Formular-Parameter enctype und betrachten Sie die Nutzlast.
- text/plain
- application/x-www-form-urlencoded
- multipart/form-data
Fügen Sie dem Formular ein Feld zur Übertragung einer Datei hinzu und Übertragen Sie eine kleine (Text)Datei im Bereich 10-200 Byte. Sie sollten das Ergebnis in der Formularantwort sehen. Beachten Sie die korrekte Formularcodierung, für Dateien wird multipart/form-data benötigt, ansonsten wird nur der Dateiname übertragen.
Ermitteln sie mittels phpinfo.php (im gleichen Verzeichnis wie form.php) die maximale Upload-Größe des Servers.
Füllen Sie das Formular korrekt mittels CURL mit oder ohne Dateiupload aus. (das korrekte setzen des HTTP-Headers langt nicht für die korrekte Codierung, dazu gibt es eine spezielle Option in CURL )
Responsive Formular mittels CSS

Tabellen

gestalten Sie responsive Tabellen mittels der bereitgestellten Informationen

Statische Website-Generatoren

Experimentieren Sie mit Generatoren von Jekyll oder Hugo. Dabei wird statt HTML der Inhalt in Markdown geschrieben und dann automatisch unter Einsatz von Templates in HTML gewandelt. Dies erhöht die Lesbarkeit und Flexibilität.

Verwendet wird dies z.B. bei Github mit der Markdown-Syntax GFM (Github flavored Markdown)

LiaScript

Literatur

Letzte Änderung: 30. April 2025 14:27

Rechnernetze / Kommunikationssysteme