Webprojekt für die remote-Sessions

Hier findet ihr die einzelnen Schritte, welche wir zusammen in den remote-Sessions abarbeiten, um eine kleine Webseite mit HTML, CSS und JS zu entwickeln.

Die Zwischenstände hinterlege ich hier als Zip-Dateien, so dass ihr auch nachträglich in das Projekt einsteigen oder die Dateien mit euren Dateien vergleichen könnt:

Daneben haben wir am 02.09.2020 noch ein kleines Formular mit PHP-Datei zum Versenden umgesetzt. Die HTML- und PHP-Datei findet ihr hier: formular.zip


0. Wähle ein Thema für deinen Inhalt

  • beliebig, freie Wahl
  • Beispiele: Sportvereine/Sportler, Promis, Sportarten, Tiere, Technik, Länder, Reisen, Ernährung, Spiele, Mode, Unternehmen, eine Seite dich selbst, …

1. HTML-, CSS- und JS-Dateien

Erstelle einen Dateiordner mit dem Namen „Webprojekt“ oder ähnlichem. Lege in diesem Ordner mit deinem Webeditor folgendes an (alles in Kleinbuchstaben bitte):

HTML-Dateien:
  • Startseite, Dateiname: „index.html
  • mehrere Unterseiten:
    • Vorschlag: Lege die folgenden Seiten als leere Datei an. Erstelle erst die Startseite und wenn Header, Seitenspalte und Footer stehen, dann kopiere dieses in die Unterseiten. Diese Inhalte sind nämlich überall identisch.
    • Seite: Impressum, Dateiname „impressum.html
    • Seite: Impressum, Dateiname „datenschutz.html
    • Seite: Über uns, Dateiname: „ueber-uns.html“ (diese Seite kann auch anders heißen, je nach Thema)
    • Seite: Produkte, Dateiname: „produkte.html“ (diese Seite kann auch anders heißen, je nach Thema)
    • Seite: Kontakt, Dateiname: „kontakt.html“ (diese Seite kann auch anders heißen, je nach Thema)
    • Seite: Danke (das wird die Seite, die nach dem Abschicken des Formlares erscheint), Dateiname: „danke.html
CSS-Datei:
  • erstelle einen Ordner innerhalb deines Webprojekt-Ordners mit dem Namen „css„.
  • erstelle darin eine CSS-Datei mit dem Namen „style.css
JavaScript-Datei:
  • erstelle einen weiteren Ordner innerhalb deines Webprojekt-Ordners mit dem Namen „js“ (also neben dem Ordner „css“)
  • erstelle darin eine JavaScript-Datei mit dem Namen „script.js
Bilder-Ordner:
  • lege zuletzt einen Ordner „img“ für die Bilder an
  • hierin werden wir nach und nach Grafiken für z.B. das Logo ablegen

Achte darauf, dass du keine Sonderzeichen (z.B. Umlaute) in all deinen Dateinamen hast. Das kann zu Darstellungsfehlern führen.


1.1 Grundgerüst:

  • doctype, html, head + title, body anlegen
  • Container im body: div mit der id „page“.
  • Header
    • HTML-Tag: „header
    • beinhaltet ein Logo, die Metanavigation (Impressum, Datenschutz) und die Hauptnavigation
  • Contentbereich (als Container um die beiden folgenden Punkte)
    • HTML-Tag: „main
    • Inhaltsbereich, HTML-Tag: „section“ (hier kommen später weitere Elemente hinein)
    • Seitenspalte, HTML-Tag: „aside“ (später in Desktop-Version: links oder rechts angeordnet)
  • Footer
    • HTML-Tag: „footer
    • beinhaltet: das Kontaktformular und die Social Media Icons/Links

Visuelle Darstellung des oben beschriebenen:


1.2 Dateien einbinden, HTML-Validator

  • Integriere die CSS-Datei mit dem HTML-Tag „link“ in den head.
  • füge folgende Zeile für die Definition der mobilen Darstellung in den head ein:
    • <meta name=“viewport“ content=“width=device-width,initial-scale=1.0″>
  • Integriere die JS-Datei mit dem HTML-Tag „script“ am Ende des body. (= eine Zeile vor „</body>“)
  • Benutze ab jetzt immer wieder den HTML-Validator:
    • https://validator.w3.org/#validate_by_input
    • korrigiere alle Fehler, die dort auftauchen, prüfe deinen Code am besten während oder nach jeder einzelnen Session
    • in unserem bisherigen Projekt sollten folgende „Warnungen“ auftauchen
      • Webseiten-Sprache fehlt: ergänze dazu im HTML-Tag <html> das Attribut: lang=“de“ (bzw. eine andere Sprache, falls du nicht „de“ verwenden möchtest)
      • Headline in „section“ fehlt: ergänze das HTML-Tag <h1> mit einem sinnvollen Text in die <section>

1.3 grobe CSS-Formatierung der Abschnitte

  • definiere in der CSS-Datei „style.css“ allgemeine Definitionen für
    • „*“ margin und padding auf 0 setzen: „padding: 0; margin: 0;
    • „img“ dürfen max. 100% breit sein „max-width: 100%;
    • „ul“ und „ol“ sollten links einen Abstand von 20px haben: „margin-left: 20px;
    • „a“ sollen als Farbe schwarz haben: „color: #000;
  • definiere Hintergrundfarben (Schreibweise: Hex, RGB oder RGBA, bitte keine Farbnamen)
    • formatiere hier die Elemente body, #page, header, main, section, aside, footer
    • je nach deiner Gestaltung können sich die Farben auch wiederholen
  • gib den o.g. Elementen Innenabstände mit „padding“ und einem geeigneten Pixel-Wert
  • ggfs. auch einen Aussenabstand mit „margin“ und Pixel-Wert
  • schreibe am Ende der CSS einen media query für die Tablet- und Deskop-Version mit (min-width: 768px)
    • Code media query: @media screen and (min-width: 768px)
    • definiere darin für #page eine maximale Breite von 1200px und richte #page mittig aus (keine Text-Ausrichtung, sondern das div zentrieren)

2. Header, mit Logo, Meta- und Main-Navigation

2.1 HTML für den Header

  • entferne den Platzhaltertext im <header>
  • füge zwei <div> in den <header> ein
  • Logo:
    • füge in das erste div ein Logo mithilfe des <img> Tag ein und gib ihm die id=“logo“
    • lege dazu eine Grafik (png, jpg/jpeg, gif, …) in den Ordner „img“ ab, z.B. „logo.png
    • umschließe das <img> mit einem <a>-Tag und setze href=“index.html“, damit ein Klick auf das Logo auf diese Startseite führt
  • Hamburger-Icon:
    • füge in das erste div ein Hamburger-Icon hinter das <a>-Tag des Logos ein
    • benutze dazu ein <img>Tag und setze die id=“menu-icon“ (Bild z.B. „icon-hamburger.png„)
  • Metanavi:
    • füge in das zweite div eine unsortierte Liste mit dem entsprechenden HTML-Tag ein und gib diesem Tag die id=“metanavi“
    • lege darin Listenpunkte mit Links an, die auf die Seite impressum.html verlinken, z.B. „Impressum“, „Datenschutz“
  • Mainnavi:
    • füge in das zweite div eine weitere unsortierte Liste mit dem entsprechenden HTML-Tag ein und gib diesem Tag die id=“mainnavi“
    • lege darin Listenpunkte mit Links an, die auf die entsprechenden Seiten verlinken

2.2 CSS für den Header

  • definiere für das Logo eine „max-width“ von „50%“
  • positioniere die beiden „div“ im Header „relative“
  • richte das „menu-icon“ (= Hamburger-Icon) oben rechts aus:
    • top: 0;
    • right: 0;
    • width: 50px;
    • position: absolute;
  • formatiere die beiden Navigationen:
    • entferne die Aufzählungspunkte (mit „list-style-type: none;„)
    • gib den Navigationspunkten eine Hintergrundfarbe und einen Rahmen unten (mit „background-color“ und „border-bottom„)
    • setze einen Innenabstand in den Links (mit „padding„)
    • entferne die Unterstreichung in den Links (mit „text-decoration: none;„)
  • blende die „metanavi“ und „mainnavi“ aus (metanavi brauchen wir erst auf Tablet/Desktop, mainnavi soll erst durch Bedienen des Hamburger-Icons erscheinen)
    • erstelle eine Klasse für die „mainnavi“ mit dem Bezeichner „enabled“: „#mainnavi.enabled“ (Achtung, kein Leerzeichen dazwischen)
    • weise dieser Klasse die Definition „display: block;“ zu

2.3 JS für den Header

  • schreibe eine Funktion „toogleMainnavi()„, welche die oben definiere Klasse „enabled“ einfügt bzw. entfernt (= toggle)
  • schreibe eine click-function (= addEventListener) für „menu-icon“

2.4 CSS-Korrekturen für die mobile Version

  • füge der Stern-Definition (ganz oben die erste Definition) noch die folgende Zeile hinzu: box-sizing: border-box;
  • füge eine eigene Definition nur für #mainnavi hinzu, welche etwas Abstand noch oben hat, damit die aufgeklappte Navigation nicht so nah am Logo ist, z.B. margin-top: 20px;
  • füge den Link in beiden Navigation die Eigenschaft „display: block;“ hinzu, dadurch wird die ganze Zeile klickbar

2.5 Google-Font auswählen und einsetzen, sowie Encoding-Problem lösen

  • wähle auf https://fonts.google.com/ eine kostenlose Schrift deiner Wahl aus
    • füge in den <head> der HTML-Datei das <link>-Tag der ausgewählten Schrift
    • füge in die *-Definition der CSS-Datei die Zeile mit „font-family“ ein
    • jetzt sollte die gewählte Schrift auf deiner Webseite zu sehen sein
  • falls du Darstellungsprobleme mit Umlauten (z.B. in „Über uns“) hast, füge in den <head> folgende Zeile ein
    • <meta charset="utf-8">

2.6 CSS für die Tablet- bzw. Desktop-Version

  • alle Punkte aus diesem Block 2.6 sind innerhalb des media queries zu erstellen, welchen wir in Punkt 1.3 angelegt haben
  • formatiere den header:
    • gibt ihm direkt die Eigenschaft „display“ mit dem Wert „flex
    • damit das erste div im header (= das mit dem Logo) eine feste Breite erhält, gib ihm: „flex: 0 0 220px;“ (die 220px könnt ihr natürlich eurem Logo bzw. eurem Wunsch anpassen) UND einen Innenabstand rechts von 20px
    • definiere für das zweite div im header einfach nur „flex: 1;
    • damit das Logo nun die oben definierten 220px ausnutzt, erstelle für #logo die Eigenschaft: max-width: 100%;
    • verstecke mit display das menu-icon, da wir dieses in der Tablet-/Desktop-Version nicht benötigen
    • zeige #metanavi, #mainnavi mit display wieder an
    • in den li von metanavi/mainnavi:
      • setze den Rahmen auf 0
      • entferne die Hintergrundfarbe
      • definiere „display“ mit dem Wert „inline-block“
    • formatiere nun die metanavi
      • richte diese rechts aus
      • verringere die Schriftgröße der Links, da die Metanavi zwar vorhanden, aber nicht zu auffällig sein soll
      • definiere eine Unterstreichung wenn man mit der Maus für die Links fährt (:hover)
    • formatiere jetzt die mainnavi
      • erhöhe den Abstand nach oben, so dass die Navigation zum Logo unten bündig ist (oder so, dass es sinnvoll aussieht)
      • gib den <li> in der mainnavi einen Aussenabstand nach rechts, so dass es zur besseren Lesbarkeit beiträgt
      • formatiere die Links mit Innenabstand, Schriftgröße, Hintergrundfarbe und evtl. runde Ecken
      • definiere bei :hover eine andere Hintergrundfarbe

2.7 Header abschließen

  • formatiere im Header die Schriftgröße, Schriftfarbe, Hintergrundfarbe, usw. nach deinen Wünschen
  • Glückwunsch der Header ist abgeschlossen

3. Seitespalte

3.1 HTML für die Seitenspalte

  • definiere einen Inhalt deiner Wahl innerhalb <aside>, welches wir in 1.1 angelegt haben
  • Vorschlag: eine fiktive postalische Adresse und weitere Kontaktmöglichkeiten (Öffnungszeiten, Telefon-Nr., E-Mail-Adresse, usw.)
  • benutze hierfür <h3>- und <p>-Elemente
  • bereite darunter ein <div> mit der id=“daysUntilLastCourse“ vor
  • schreibe in das <div> den Text: „wird berechnet …“ (diesen Text werden wir später noch mit JavaScript ändern)

3.2 CSS für die Seitenspalte

  • formatiere in der CSS-Datei im oberen Teil allgemeine Definitionen für:
    • h1, h2, h3, h4, h5, h6: Schriftfarbe
    • p: Aussenabstand unten
  • formatiere in der CSS-Datei unter dem Abschnitt „aside“ die Definition für „#daysUntilLastCourse“:
    • definiere einen Innenabstand und eine Hintergrundfarbe

3.3 JS für die Seitenspalte

  • erstelle ein JavaScript-Funktion in der Datei script.js mit dem Namen „generateDaysUntilLastCourse()“
  • schreibe zu jeder Zeile einen Kommentar dazu, um zu erklären, was die Zeile macht (optional)
  • definiere drei Variablen „today“, „dateLastCourse“, „daysDifference“
    • weise „today“ folgendes zu: new Date(); (damit erhältest du das Datum von heute)
    • weise „dateLastCourse“ das Datum 31.12.2020 zu: new Date("2020-12-31");
    • weise „daysDifference“ eine Subtraktion der beiden o.g. Variablen zu, damit du die Differenz in Millisekunden erhältst
    • wandle diese Millisekunden nun in Tage um (= teile durch Millisekunden, Sekunden, Minuten, Stunden, …)
    • runde das Ergebnis auf, nutze dazu die JS-Funktion: Math.ceil();
  • definiere eine weitere Variable „textLastCourse“ und weise ihr den folgenden Text zu: „Das Jahr 2020 ist vorbei.“
    • erstelle eine if-Bedingung und prüfe, ob in der Variable daysDifference 0 oder mehr drin steht
    • falls das der Fall ist, ändere die Variable „textLastCourse“ in: „Noch 93 Tage bis zum Jahresende.“ (ersetze die 93 durch die entsprechende Variable)
  • weise dem div mit der id „daysUntilLastCourse“ per „textContent“ den oben erstellten Text zu

3.4 CSS für die Tablet- bzw. Desktop-Version

  • folgende Defintionen gehören wieder in den media query wie in Punkt 2.6
    • definiere eine zweispalte Darstellung von section und aside (beide unterhalb von main) wie bei den beiden <div> im <header> (siehe 2.6)
    • main erhält „display: flex;
    • section erhält „flex: 1;“ und „margin: 0 20px 0 0;
    • aside erhält „flex: 0 0 250px;
    • passe gerne die Werte „20px“ und „250px“ deinen Wünschen an

4. Footer, mit Formular und Social Media

4.1 HTML: Container und Formular erstellen

  • entferne den Dummy-Text, falls vorhanden, zwischen den <footer>-Tags
  • erstelle dafür zwei div nebeneinander, wie im <header>
  • im ersten div folgende Formular-Elemente erstellen:
    • ein <h2> mit einem Text, wie z.B. „Nehmen Sie Kontakt mit uns auf“ oder „Ihre Anfrage“ oder ähnliches
    • „form“ als umschließendes Tag der folgenden Eingabefelder (Attribut „action“ mit dem Wert „#“)
      • label“ welches den Text „Ihre E-Mail“, ein <br> als Zeilenumbruch und ein „input“ (type=“email“) enthält
      • das input sollte als Attribut „name“ den Wert „user-mail“ enthalten
      • noch ein „label„, diesmal mit dem Text „Ihre Nachricht“, ein <br> als Zeilenumbruch und einer textarea
      • die textarea sollte als Attribut „name“ den Wert „user-message“ enthalten
      • anschließend (ohne weiteres label) das input vom type="button" mit dem value="absenden"

4.2 CSS für Footer Container und Formular

  • dem ersten div im Footer bitte Innen- und auch Außenabstand von 20px, sowie ein Rahmen unten
  • das form-Tag mit Innenabstand und Hintergrundfarbe versehen, ggfs. Textfarbe anpassen
  • „label“ innerhalb von „form“: display: block; und einen Außenabstand nach unten von ca. 10px
  • input und textarea innerhalb von form: 100% Breite und Innenabstand von 5px
  • die textarea nochmal einzeln formatieren und einen Wert für die Höhe geben, damit man als User erkennt, dass das ein mehrzeiliges Eingabefeld ist
  • und dann noch den Absende-Button (input type="button") nach Euren Wünschen formatieren, z.B. Hintergrundfarbe und Schriftgröße
    • vergesst nicht, dass dieser Button den entsprechenden cursor (= Hand-Icon) per CSS erhält

4.3 HTML: Footer Teil 2, Social Media und Metanavi

Grafiken Social Media:

    

  • im zweiten div des Footers beginnen wir mit einem <p> und eine Text, z.B. „Folgen Sie uns auf:“
  • danach folgt ein <ul> mit einzelnen <li> für die von euch gewählten Social Media Kanäle (mind. 3)
    • gebt dem <ul> die id „socialmedia“, damit wir die Elemente per CSS ansprechen können
    • je innerhalb der <li> bitte einen Link um ein Icon (= <img>), welches typisch für die Social Medie Seite ist (z.B. Play-Button für Youtube, Vogel für Twitter, …)
      • die Icons könnt ihr im Netz suchen, ob rund oder eckig oder was auch immer, entscheidet ihr
    • setzt bitte in dem Link das entsprechende Attribut, damit der Link automatisch im neuen Tab/Fenster öffnet
  • nun folgt ein weiteres <ul>, nämlich eine Kopie der Metanavi aus dem header
    • ändert die id dieses kopierten <ul> von „metanavi“ in „metanavi2“, da in einem HTML-Dokument eine ID nur einmal vorkommen darf

4.4 CSS für Social Media und Metanavi im Footer

  • damit der restliche Bereich unter dem Formular zentriert ist, definieren wir für das div:last-child im Footer die entsprechende Definition text-align
  • #socialmedia und #metanavi2 sind Aufzählungslisten, also entfernen wir wieder die Aufzählungspunkte, wie in Punkt 2.2
    • zusätzlich geben wir beiden Elementen einen Außenabstand nach oben von z.B. 10px
      • da #metanavi2 das unterste/letzte Element unserer Webseite ist, möchten wir mehr Abstand oben/unten und schreiben daher nochmal eine Definition für Außenabstand oben/unten 50px und links/rechts 0
    • die <li> von beiden Aufzählungslisten sollen wieder mit inline-block nebeneinander dargestellt werden
    • die <img> in #socialmedia sollen mit einer Breite versehen werden, so dass diese einheitlich groß sind
    • da sowohl die Link der Icons, als auch in der Metanavi (Footer) etwas Abstand vertragen können, definiere noch folgende Definitionen
      • Außenabstand links/rechts von z.B. 10px
      • dazu noch die Unterstreichung entfernen
      • bei :hover setzen wir dann wieder die Unterstreichung (bei Bildern/Icons wird diese automatisch nicht dargestellt, genau so wollen wir es auch)

4.5 CSS für die Tablet- bzw. Desktop-Version

  • folgende Defintionen gehören wieder in den media query wie in Punkt 2.6 und 3.4
    • dem footer geben wir display: flex;
    • den div direkt unter footer flex: 1;
    • wir entfernen den Rahmen des ersten div, den wir nur in der mobilen Version wollen
    • die zentrierte Ausrichtung des zweiten div ersetzen wir durch eine Ausrichtung rechtsbündig
      • weiterhin sollte hier ein Abstand oben definiert werden, so dass der Text mit der Oberkante des Formulars anfängt
    • die Breite der Bilder kann verringert werden, so dass diese nicht so groß wirken

Aufgabe für euch (findet NICHT in der Session statt): Erstelle eine CSS-Animation bei Hover auf die Icons. Beispiel: drehen, spiegeln, hüpfen, irgend sowas … – Es soll eine Bewegung bei :hover zu sehen sein.


4.6 Formular-Validierung, HTML- und CSS-Vorbereitungen

  • nun wollen wir das Abschicken des Kontaktformulars mit möglichen Fehlermeldungen bzw. eine Weiterleitung zur Danke-Seite einrichten
  • dazu legen wir eine neue HTML-Seite "danke.html" an und schreiben dort nur „Danke“ rein und können diese Datei direkt wieder schließen
  • unser bisheriges HTML und CSS muss etwas erweitert werden, damit wir Fehlermeldungen auch visuell darstellen können
    • index.html:
      • ergänze im <form>-Tag als neues, erstes Unterelement ein <p> mit der id „error-messages“ (dort werden später die Fehler eingetragen, die der User dann sieht)
      • erweitere deinen Absenden-Button mit der id „submit-button“
    • style.css:
      • arbeit im oberen CSS, nicht im media query
      • füge nach der Definition des Abschicken-Buttons die Formatierung für die Fehlermeldungen ein
      • definiere für #error-messages einen Innenabstand, einen auffälligen, farbigen Rahmen und die zugehörige Schriftfarbe (beides z.B. rot, jedoch kommt das auf eure anderen Farben an; achte also auf den Kontrast)
        • alternativ kannst du auch Rahmen und Schriftfarbe weglassen und statt dessen eine Hintergrundfarbe verwenden
      • blende dieses Element mit display: none; aus, da es erst erscheinen soll, sobald Fehler auftreten
      • definiere direkt eine Kombination aus der id und der Klasse „show“, um dieses Element bei Bedarf anzuzeigen: #error-messages.show
      • als nächstes definiere eine Klasse für die <label> mit den Namen „error“ und weise wieder eine auffällige Farbe zu, damit die Felder z.B. rot markiert werden, falls dort ein Fehler ist
  • nun sind wir bereit per JavaScript eine Prüfung und Markierung umzusetzen

4.7 Formular-Validierung, JavaScript

  • in der Session versuchen wir erst mal den Validierungsablauf mit Pseudocode zu konzipieren und uns den Variablentyp „array“ anzusehen (Hinweis: Array fängt bei 0 an zu zählen)
    • wer dieses Projekt unabhängig von der Session macht, braucht keinen Pseudocode zu erstellen und kann direkt mit der nächste Zeile hier in der Aufgabenstellung weiter machen
  • erstelle eine neue Funktion „checkContactForm()
  • erstelle dafür einen neuen addEventListener wie bei dem #menu-icon im Header, dieses mal natürlich für den Button „submit-button
  • in der Funktion checkContactForm() führen wir folgende Schritte aus
    • definiere vier Variablen email, message und errorMessage, errorMessageText
      • die ersten beiden bekommen die Felder aus den entsprechenden Formularfelder mit getElementsByName zugewiesen
        • Beispiel: document.getElementsByName("user-mail")[0];
      • die errorMessage geht wieder einfacher mit document.getElementById, da dieses Element ja eine ID besitzt
      • der errorMessageText wird mit einem leeren String initialisiert
    • setze die den errorMessageText in das entsprechende Feld ein: errorMessage.textContent = errorMessageText;
    • entferne nun per JavaScript die Fehler-Klassen in den oben definierten drei Feldern (email, message, errorMessage), das geht z.B. mit .classList.remove("show") bzw. .parentElement.classList.remove("error")
    • nun folgen if-Bedingungen mit der Prüfung, ob überhaupt eine Eingabe in die Felder E-Mail und Nachricht erfolgte
      • falls nicht, setze in das parentElement die Klasse „error“ und in die Variable errorMessageText einen entsprechenden Text
      • tue dies zuerst für E-Mail und dann für Nachricht
    • zwischen diese beiden if-Bedingungen fügen wir noch eine weitere Prüfung für die E-Mail ein
      • prüfe, ob in der E-Mail irgendwo ein @-Zeichen auftaucht
      • (Hinweis: das ist natürlich keine korrekte Prüfung einer E-Mail-Adresse, aber für unsere Zwecke zum Verstehen genügt das.)
      • nutze für die Prüfung z.B. .indexOf("@"), was die Position von „@“ ausgibt
      • falls damit „-1“ zurück gegeben wird, setze wie zuvor die Fehlermeldung und -klasse
    • nach den bisherigen if-Bedingungen kommt nun die abschließende if-Bedingung
      • prüfe, ob in errorMessageText etwas drin steht
        • falls ja, haben wir einen Fehler und müssen sowohl diesen Text in das Element errorMessage mit .textContent setzen
          • als auch die Klasse „show“ in die .classList mit add
        • falls nein, ist alles korrekt und wir können auf die Danke-Seite weiterleiten
          • (Dies ist auch nur eine vereinfachte Form, da wir keinen Code zum Verarbeiten und Verschicken einer E-Mail der User-Eingaben haben.)
          • nutze dazu location.href um die Datei „danke.html“ aufzurufen
    • prüfe nun deine Formular-Validierung mit und ohne Text, sowie mit und ohne @-Zeichen im Feld E-Mail
      • die entsprechenden Fehlermeldungen sollten erscheinen

5. „Scroll to top“-/“Nach oben“-Button

5.1 HTML und CSS für den „Scroll to top“-Button

  • erstelle in der HTML-Datei nach dem Footer ein <div> mit der ID „scrollToTop“ und schreibe als Text z.B. „nach oben“
  • erstelle in der CSS-Datei nach den Footer-Definitionen (das sollte unmittelbar vor dem media query sein) eine Definition für die o.g. ID mit display: none;, da wir den Scroll-to-top-Button nicht auf der mobilen Version haben möchten
  • gehe nun ans Ende des media query (was sehr wahrscheinlich auch das Ende der CSS-Datei ist) und füge in den media query noch die folgenden Definitionen für die o.g. ID ein
    • bottom: 0; right: 50px; cursor: pointer; position: fixed;, sowie eine Text-, Hintergrundfarbe und Innenabstand
    • danach noch eine :hover-Definition, um z.B. die Hintergrundfarbe auszutauschen (oder eine andere optische Veränderung deiner Wahl)
    • und zuletzt noch eine Definition der o.g. ID mit der Klasse „show“, also so: #scrollToTop.show, und gib dieser „display“ mit dem Wert „block“

5.2 JavaScript „Scroll to top“

  • definiere am Dateiende eine neue Funktion „scrollToTop“
  • definiere in der Funktion „window.scroll“ mit drei Optionen
    • top: 0
    • left: 0
    • behavior: „smooth“
  • Beispiel zu window.scroll
  • füge zum HTML-Element mit der ID „scrollToTop“ den addEventListener bei click der o.g. Funktion hinzu, wie wir das schon bei „menu-icon“ und dem Formular-Button gemacht haben
  • nun möchte ich noch umsetzen, dass der Scroll-to-Top-Button erst erscheint, wenn wir 300px (oder mehr) nach unten in der Seite gescrollt haben
    • erstelle als letzte Anweisung in der JavaScript-Datei eine onscroll-Anweisung, also document.body.onscroll
    • weise diesem eine anonyme Funktion zu
    • in diese anonymen Funktion entferne mit document.getElementById aus der classList die Klasse „show“ vom Element „scrollToTop“
    • prüfe anschließend mit einer if-Bedingung, ob „self.pageYOffset“ größer als 300 ist
      falls ja, ergänze mit document.getElementById in die classList die Klasse „show“ vom Element „scrollToTop“

6. Unterseiten und Inhaltselemente erstellen

6.1 Header, Seitenspalte und Footer abschließen

  • nun ist deine Aufgabe die Farben, Schriften, Abstände, usw. der bisherigen Elemente so anzupassen, wie es zu deinem Thema passt
    achte hierbei auf den Kontrast, so dass man die Schrift gut lesen kann, vor allem auch bei Hover mit der Maus oder bei den Fehlermeldungen im Formular
  • schaue dir auch die Seite in der mobilen und Tablet-/Desktop-Version an und nimm ggfs. Optimierungen vor
  • und ganz wichtig: prüfe mit dem Validator, dass du keine HTML- oder CSS-Fehler hast

6.2 Unterseiten erstellen

  • sorge zuerst dafür, dass in deinen Navigationen die richtigen Punkte (passend zu deinem Thema) stehen
  • sobald du eine saubere Grundlage als index.html-Datei hast, kopiere diese Datei in folgende neue Dateien
    • impressum.html, agb.html, datenschutz.html (abhängig davon, was du in deiner Metanavigation hast)
    • ueber-uns.html, produkte.html, kontakt.html (abhängig davon, was du in deiner Mainnavigation hast)
    • danke.html – denk auch an diese Seite, welche erst nach dem erfolgreichen Abschicken des Formulars kommt
    • gehe anschließend in jede dieser neuen Dateien und ändere den Text im <title>-Tag, z.B. auf der Über-uns-Seite (Datei ueber-uns.html):
      • alt: <title>DEIN SEITENTITEL</title>
      • neu: <title>Über uns – DEIN SEITENTITEL</title>
  • wenn alles geklappt hat und zu eurer Navigation passt, dann solltest ihr auf eurer Webseite die Navigationen anklicken können und auf jede einzelne Seite gelangen

6.3 Inhaltselemte erstellen, Teil 1

  • falls deine Inhalte für Header, Seitenspalte und Footer komplett sind, arbeiten wir nur noch im eigentlichen Inhaltsbereich der HTML-Datei, nämlich der <section>
  • in der Startseite werden wir viele unterschiedliche Elemente einfügen, die als Beispiel für die anderen Seiten dienen werden
  • arbeite daher sauber in der Startseite, damit du die Inhaltselement leicht in die anderen Seiten kopieren kannst
  • fangen wir mit einfachen Text-Elementen an
    • erstelle für alle sechs Überschriften einen Kombination aus <h1>, <h2>, <h3>, <h4>, <h5>, <h6> und jeweils <p>
    • nutze mindestens je einmal <strong>, <em> und <u> in einem beliebigen <p>-Element der Texte oben
    • setzen mind. einen Link auf eine interne Seite (öffnet im gleichen Tab) und auf eine externe Seite (z.B. Seibert Media, öffnet in neuen Tab/Fenster) in einem beliebigen <p>-Element der Texte oben
    • erstelle mindestens je eine Aufzählungsliste mit <ul> und <ol>, gerne auch mit zwei Ebenen
  • nun folgen Buttons, die wir aus <a>-Elementen erstellen (dazu ist noch CSS nötig)
    • nutze als Container ein <div> mit der Klasse „buttons“
    • erstelle darin drei Links mit <a>
    • gib diesen drei Elementen unterschiedliche Klassen, z.B. „button-1“, „button-2“, „button-3“, damit wir sie später per CSS unterscheiden können
    • benenne die Links nach deiner Wahl, z.B. „zu Über uns“, „zum Kontaktformular“, „Rufen Sie uns an“
  • für ein bisschen Struktur legen nun Spalten-Elemente an
    • lege drei <div> je mit der Klasse „columns“ an
    • im ersten div sollen zwei Unter-div eingefügt werden
      • schreibe in diese div: hier Teaser einfügen
    • im zweiten div dann drei Unter div
      • gib diesen div je die Klasse „column-with-padding“
      • schreibe in diese ein <h4> als Überschrift und ein <p> mit kurzem Text
    • und im dritten div dann vier Stück
      • füge in diese je ein Bild ein (optional: verlinke das jeweilige Bild)
  • nun entwicklen wir einen Teaser
    • erstellt ein div mit der Klasse „teaser“
    • lege darin drei div an, je mit den Klassen „teaser-header“, „teaser-body“, „teaser-footer“
    • füge in den teaser-head ein Bild ein, um welches ein Link gesetzt ist
    • trage in den teaser-body einen kurzen Text ein
    • lege im teaser-footer einen Link an (gleiches Linkziel wie beim Bild), z.B. mit „mehr lesen“
    • kopiere nun das komplette Teaser-Element in das vorbereitete Spalten-Element (dort wo „Teaser einfügen“ steht)

6.4 CSS Inhaltselemente, Teil 1

  • Überschriften (h1 bis h6): definiere eine Außenabstand oben von 20px und schreibe unter den CSS-Block von h1 bis h6 einen weiteren Block für diese sechs Überschriften
    • füge in diesem neuen Block bei jeder Überschrift „:first-child“ hinzu und definiere als Eigenschaft eine Außenabstand oben von 0
    • damit wollen wir erreichen, dass die Überschriften oben immer einen Abstand haben, falls sie jedoch die erste Überschrift in einem Element sind, wollen wir das nicht, z.B. bei eurer Hauptüberschrift h1
    • die h1- bis h6-Definition war ja schon vorhanden, schreibe die folgenden neuen Definitionen unterhalb dieser Definitionen weiter
  • Buttons
    • zuerst gestalten wir die Buttons allgemein und leiten davon zwei Varianten ab
    • erstelle einen block für „.buttons a“ und definiere darin: display: inline-block, sowie Textfarbe, Innenabstand, Außenabstand rechts + unten, Hintergrundfarbe und entferne die Unterstreichung
      • wer möchte, kann gerne runde Ecken mit border-radius und einem Pixelwert festlegen
      • auch ein Rahmen mit border und den Werten für Rahmendicke, -typ und -farbe ist möglich
    • da wir ja drei Button-Varianten vorgesehen haben („button-1“, „button-2“, „button-3“), gestalten wir diese unterschiedlich
    • definiere den oben angelegten Block eine :hover-Definition, jedoch nur für „button-1“, Selektor: „.buttons a.button-1:hover“
      • tausche dort die Schrift- mit der Hintergrundfarbe
    • Button Nr. 2 soll genau anders herum gestaltet sein, tausche für diese Klasse daher die Farben für den Normal- und Hover-Zustand
    • Button Nr. 3 sieht im Normal-Zustand wie Button Nr. 1 aus, daher brauchen wir für diesen nur „:hover“ zu definieren
      Aufgabe für euch (findet NICHT in der Vorlesung statt): hier hätte ich gerne, dass ihr mit „box-shadow“ einen Schatten erstellt (Dokumentation und Beispiel)
    • Spalten
      • wir definieren für die direkten Unterelemente des Spalten-Containers eine CSS-Definition mit „.columns > div“
        • Außenabstand unten 20px und Rahmen 1px, schwarze Linie
      • schreib einen eigenen CSS-Block für das „:last-child“ innerhalb der oben definieren div: „.columns > div > :last-child“
        • setze hier den Außenabstand unten auf 0
      • nun haben wir bei dem Spalten-Element mit drei Spalten die Klasse „columns-with-padding“ eingefügt
        • schreibe dafür eine CSS-Definition, die einen Innenabstand von 10px setzt
      • als letztes haben wir vier Spalten nur mit Bildern bzw. verlinkten Bildern
        • Bilder verursachen normal einen Abstand nach unten, den man mit der display-Eigenschaft entfernen kann
        • wir definieren den folgenden Selektor: „.columns > div > img, .columns > div > a > img“ (gerne beim Komma einen Zeilenbruch für die bessere Lesbarkeit machen)
        • dort display auf „block“ setzen
    • Teaser
      • die Definitionen für den Teaser sind relativ einfach gegenüber den Spalten
      • definiere für „.teaser“ eine Hintergrundfarbe
      • definiere für „.teaser-body, .teaser-footer“ einen Innenabstand
      • definiere für „.teaser-footer“ eine Text-Ausrichtung nach rechts

6.5 CSS Tablet-/Desktop-Version

  • Spalten:definiere im media query (dort drin ganz oben) drei Definitionen für:
    • Klasse „columns“: display: flex;
    • dann die direkten div innerhalb von „columns“: flex: 1; und Außenabstand links 20px
    • und als letztes: direktes erstes div (Stichwort „:first-child“) innerhalb von „columns“, hier Außenabstand links 0

6.6 Inhaltselemente erstellen, Teil 2

  • erstelle nun zwei weitere Inhaltselemente
    • wir fangen mit einer Tabelle an
      • erstelle die nötigen HTML-Elemente für <table>, <tr> und <th> bzw. <td>
      • Vorschlag: erstelle vier Zeilen mit jeweils drei Zellen
      • trage in die Zellen beliebige Texte ein
      • später kannst du die Tabelle nach deinen Wünschen verändern und passend zu deinem Thema Inhalte einfügen
      • achte hier drauf, dass die Tabelle nicht zu breit wird, sonst führt das zu Darstellungsfehlern in der Tablet- oder mobilen Version
    • danach integrieren wir ein Video deiner Wahl von YouTube in die Webseite
      • erstelle unter der Tabelle dafür erst einmal ein <div> mit der Klasse „video“
      • suche dir ein passendes Video auf YouTube heraus (z.B. Video der HS Mainz), geht dort auf „Teilen“, dann „Einbetten“ und „Kopieren“
      • füge diesen Code in das div ein
      • entferne den Parameter „frameborder“ inkl. Wertzuweisung, da dieses Attribut zu einer Warnung im Valdidator führt

6.7 CSS Inhaltselemente, Teil 2

  • schreibe CSS-Defintionen für die Tabelle nach den h1- bis h6-Definitionen
    • nutze bei „table“ z.B. „border-collapse“ mit dem Wert „collapse“, damit die Zwischenstände der Zellen verschwinden
    • definiere einen Rahmen um die Tabelle
    • gestalte deine Tabellenzeilen als Zebrastreifen mit abwechselnden Hintergrundfarben
      • definiere zuerst für die „tr“ eine Hintergrundfarbe
      • anschließend für jedes zweite (Stichwort „:nth-child(even)“)
    • gib den th und td noch einen geeigneten Innenabstand
  • schreibe anschließend weitere CSS-Definitionen für die Video-Integration
    • wir möchten das Video responsive gestalten, was bedeutet, dass die Breite und Höhe proportional mit skalieren soll
    • Ausgangslage ist für dieses Beispiel das Format 16:9
    • damit das Container-div mit der Klasse „video“ in diesem Format bleibt, definieren wir folgendes
      • position: relative;
      • padding-bottom: 56.25%;
      • (achtet hier auf die Schreibweise mit Punkt anstatt Komma!)
      • die 56.25% kommen bei der Division von 9 durch 16 zustande (Format 16:9)
    • definiere nun den iframe im div „video“
      • Breite und Höhe je 100%, sowie position: absolute;
    • nun sollte das Video sich proportional im Format 16:9 anpassen, wenn du eine Webseite kleiner/größer machst