HTML Design

Nachdem das Projekt aufgesetzt wurde, kann sich den Grundlagen der Webentwicklung mit HTML, CSS und JavaScript gewidmet werden.

Ziel des Kurses

Am Ende des Kurses sollen die praktischen Fähigkeiten der Webentwicklung ausgebaut und die Paradigmen vertraut sein.

Umgebung der Webentwicklung

  • Webanwendungen werden durch Browser dargestellt

  • Browser sind die Brücke zwischen Betriebssystem und Webseite

  • Browser können in beliebigen Programmiersprachen entwickelt werden

  • Die meisten Businessanwendungen werden als Webanwendung entwickelt. Bsp.:

    • Microsoft Teams

    • VS Code

    • SketchUp

Sandbox Modell

  • Prinzipiell sind Webseiten nicht vertrauenswürdig

  • Betriebssystem muss von diesen geschützt werden

  • Webseiten können also nicht auf die Betriebssystem (z.B. Dateien etc.) zugreifen

  • Freigaben für Webcam, Mikrofon, Standort müssen vom Nutzer bewusst freigegeben werden

Chrome

  • Maintainer: Google

  • Javascript Engine: V8

Firefox

  • Maintainer: Mozilla Corporation

  • Javascript Engine: SpiderMonkey

Electron

  • Maintainer: Github

  • Verwendet Chromium als embedded Webbrowser

  • Verwendet Node für Zugriff auf Betriebssystem

  • Wird für jede Zielplattform (Windows, macOS, Linux) einzeln kombiliert

  • Kann Sandbox Modell deaktivieren

Einleitung HTML

HTML steht für Hypertext Markup Language und dient als Sprache für die Strukturierung von Internetseiten

HTML is the language for describing the structure of Web pages. https://www.w3.org/standards/webdesign/htmlcss.html

Grundaufbau von HTML Dokumenten

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Titel im Tab Header</title>
    <style>
        body {
            height: 100%;
            width: 100%;
        }

        .container {
         color: #333;
        }

        #heading {
            text-transform: uppercase;
        }
    </style>
  </head>
  <body>
    <div class="container">
        <h1 id="heading">Überschrift</h1>
        <img src="images/firefox-icon.png" alt="Mein Testbild">
    </div>
    </body>
</html>

Wichtigsten HTML Tags

Tag Beschreibung

div

Container Element für grobe Strukturierung von Abschnitten

p

Paragraph - Textabschnitt mit automatischem Zeilenumbruch am Ende

span

Tag für einzelne Wörter oder Wortgruppen um diese hervorzuheben

h1 - h6

Überschriften

section

Markieren Abschnitte in Texten, HTML5

form

Formular

input, button

Eingabeelemente

img

Zum Anzeigen von Bildern (per URL oder Base64 String)

a

Zum Verlinken anderer Webseiten

  • Tags sind haben öffnende und schließende Tags: <div>Inhalt</div>. Wenn kein Childnode in dem Tag vorhanden ist, kann man öffnenden und schließenden Tag zusammenfassen <div></div> wird zu </div>

  • Tags können Attribute haben Bsp: class, id, name, style, …​

Übung: Bauen einer Todoliste (statische Liste mit ID: number, Title: string und Text: string).

Frage: Welche Möglichkeiten gibt es auf die Input Elemente zuzugreifen?

CSS

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.

Grundaufbau und Funktionen

  • Stylesheet-Sprache

  • vererbares Regelwerk

Regeldefinition

<selector> {
    key: value;
    key: value;
}

Selektoren

  • div: Tagname des HTML Elements

  • #input-element: id des HTML Elements

  • .redParagraph: CSS Klassenname des Elements

  • div .redParagraph span: HTML Pfad

  • div,.redParagraph,#input-element: Mehrfachauswahl

Properties

Wichtigste Properties:

  • margin: "Platz um das Element"

  • padding: "Platz am Rand innerhalb des Elements"

  • border: Rahmen

  • background: Hintergrund (bsp. Farbe)

  • font-size, font-weight: Größe und dicke der Schrift

box modell
Übung: CSS Styling der Todoliste

CSS Komponentenbibliotheken

Übung: CSS Library auf Todoliste anwenden

Precompiler

  • CSS kann von anderen Scriptsprachen kompiliert werden. Bsp:

    • SCSS

    • Less

JavaScript

  • Script Sprache

  • 25 Jahre alt

  • Erst verpönt, mittlerweile unumgänglich in der Webentwicklung

  • Läuft im clientseitig im Browser oder auf NodeJS Servern

  • https://www.javascript.com/

HTML im Browser

  • Javascript kann im <script>…​</script> Bereich ausgeführt werden

  • HTML-Elemente haben Eventhandler

    • onClick

    • onChange

    • onBlur

    • …​

Ansprechen von HTML-Elementen mit Javascript

  • HTML element kann als Variable gespeichert werden const element = document.getElementById("input-element");

  • Attribute / Properties können ausgelesen und manipuliert werden

  • HTML Elemente können mit JavaScript erzeugt werden: const element = document.createElement("div")

  • Für Debugging: Konsolenausgaben können mit console.log("label", obj) ausgegeben werden

Übung: Implementation einer HTML TODO List Anwendung mit Formular (Textfeld für Name und Button für hinzufügen) und Todo-Liste mit Elementen
Übung: Abfrage und Speichern der Todoliste auf Backend Seite:

http://stephanstrehler.de:8081/

Eine Dokumentation der API kann unter http://stephanstrehler.de:8081/swagger-ui.html gefunden werden.

Tipp: für Requests welche von der Source URL abweichen wird ein Plugin für das Deaktivieren des CORS Mechanismus benötigt.