denis.ergin/src/content/dhbw/de/web-engineering-i.mdx

---
title: "Web Engineering I"
tags: 
- "dhbw"
- "web"
- "engineering"
- "html"
- "css"
- "javascript"
slug: "web-engineering-i"
staticPath: "knowledge-base/dhbw/"
show: true
---
import Card from '../../../components/mdx/Card.astro';
import Spacer from '../../../components/mdx/Spacer.astro';

# Modul: Web Engineering I

In diesem Modul werden die Grundlegenden Konzepte erklärt, aus denen sich moderne Webseiten zusammensetzen. Insgesamt werden die Themen HTML, CSS und JavaScript näher gebracht und wie diese 3 Grundpfeiler miteinander zusammen arbeiten. Neben den eigentlichen Slides, gibt es für bestimmte Themenblöcke Aufgaben zu erledigen, die das Wissen vertiefen sollen.

Kursteilnehmer können folgenden Link nutzen um auf eine Checklist für alle anfallenden Inhalte zu kommen.

<Card to="#" color="violet"><span>Zur *Web-Engineering I* Checkliste</span></Card>
<div class="mb-1" />

---

## Einführung in HTML

Mithilfe von HTML (Hypertext Markup Language) erzeugt man eine Struktur, in der die Inhalte einer Website platziert werden. Mithilfe verschiedener *"Tags"* werden unterschiedliche Inhalte definiert. Diese beginnen bei Überschriften, und strecken sich über Paragraphen, Visuellen Medien wie Bilder, Formulare, bis hin zu komplexen Grafiken, die aus verschiedenen Daten zusammengesetzt werden.
<div class="mb-1" />

### # Geschichte der Internets

Von den frühen Tagen, in denen das Internet und dessen Technologien noch in der Kinderschuhen steckten bis zu den rasanten Erweiterungen bis zum Jahr 2000. In diesen Slides gibt es einen schnellen Überblick, wie sich das Web entwickelt hat.

<Card to="/slides/history-of-web" color="blue">Zu den Slides</Card>

<Spacer />

### # Möglichkeiten zum Mitarbeiten (Projekt-Setup)

Abhängig vom aktuellen Thema gibt es verschiedene Arten, um *interaktiv* mitzumachen.  
Dies beginnt bei einfachen Web-Apps, die eine Sandbox bereit stellen um *schnell* etwas auszuprobieren, bis hin zu einem komplett aufgesetzten Projekt in dem Stück für Stück weitere Inhalte hinzugefügt werden können.

<Card to="/slides/setting-up-a-project" color="blue">Zu den Slides</Card>
<div class="mb-1" />
<Card to="#" color="violet">Docker Template</Card>

<Spacer />

### # HTML - Basics

Nun aber ans eingemachte! Was genau ist nun HTML? Was sind Tags / Elemente? Wie nutzt man das alles?

Wir werden das Grundgerüst jeder HTML-Seite betrachten und wie wir zusätzliche Attribute setzten können und uns mit dem `head` Element auseinandersetzen.

<Card to="/slides/html/01-basics" color="blue">Zu den Slides</Card>
<Spacer />

### # Die verschiedenen Arten von HTML-Elementen (Tags)

Nachdem das Grundgerüst gebaut wurde, werden wir die HTML-Seite nun endlich mit richtigem Inhalt füllen! Texte mit verschiedenen Nutzungs-Kontexten stehen hier an der Tagesreihe.  
Weiterhin gibts hier einen Überblick, welche tagtägliche Tags existieren und auch ein paar speziellere für bestimmte Einsatzzwecke betrachtet.

Grundsätzlich findet man in der folgenden Präsentation:
* Texte
* Überschriften
* Aufzählungen
* Landmarks

<Card to="/slides/html/02-tags" color="blue">Zu den Slides</Card>
<div class="mb-1" />
<Card to="#" color="rose">Programmieraufgabe</Card>
<div class="mb-1" />
<Card to="#" color="green">Cheat-Sheet</Card>
<Spacer />

### # Bilder in HTML einbetten

Moderne Webinhalte bestehen nicht nur aus Texten. Nachdem wir uns überwiegend mit Textinhalten auseinander gesetzt haben, nehmen wir nun Bilder unter die Lupe. Was ist notwendig um ein Bild anzuzeigen, welche Attribute sollten mitgegeben werden und wie lassen sich Bilder für schmale und breite Bildschirme optimiert anzeigen?

<Card to="/slides/html/03-images" color="blue">Zu den Slides</Card>
<div class="mb-1" />
<Card to="#" color="rose">Programmieraufgabe</Card>
<div class="mb-1" />
<Card to="#" color="green">Cheat-Sheet</Card>
<Spacer />

### # HTML-Dokumente verlinken

Eine Website spielt sich nicht nur innerhalb einer einzelnen HTML-Datei ab. Eine Website lebt, indem sie Verlinkungen (intern, sowie extern) hat und damit zu weiteren Seiten weiterleitet. Je nachdem, was einen Nutzer der Webseite interessiert.  
Wir schauen uns an, wie Links eigentlich aufgebaut sind und wie man seine Dateien struktuieren kann beziehungsweise soll.

<Card to="/slides/html/04-linking-between-documents" color="blue">Zu den Slides</Card>
<div class="mb-1" />
<Card to="#" color="rose">Programmieraufgabe</Card>
<div class="mb-1" />
<Card to="#" color="green">Cheat-Sheet</Card>
<Spacer />

### # Tabellen

Wenn auch ein etwas älteres "Konstrukt", sind Tabellen immernoch nützlich um große Datenmengen strukturiert anzuzeigen. Durch die natürliche *komplexere* Art von Tabellen, gibt es auch eine Menge Tags, die es zu benutzen gilt um eine Tabelle korrekt aufzubauen.

<Card to="/slides/html/05-tables" color="blue">Zu den Slides</Card>
<div class="mb-1" />
<Card to="#" color="green">Cheat-Sheet</Card>
<Spacer />

### # Formulare

Im letzten Abschnitt der HTML-Reihe widmen wir uns den ersten *Interaktiven* Elementen einer Webseite: den Formularen. Sei es ein einfaches Kommentarfeld oder ein komplexes Bezahlformular in dem man allerlei Daten angeben muss - Formulare begleiten uns bis in die verstecktesten Ecken des Webs. Hierzu schauen wir uns die von HTML gegeben (und zahlreichen) Möglichkeiten an, wie man Daten eingeben kann.

<Card to="/slides/html/06-forms" color="blue">Zu den Slides</Card>
<div class="mb-1" />
<Card to="#" color="rose">Programmieraufgabe</Card>
<div class="mb-1" />
<Card to="#" color="green">Cheat-Sheet</Card>
<Spacer />

## Einführung in CSS

Bis jetzt sehen die ersten Webseiten die wir gebaut haben sehr simpel aus. Mit den folgenden Slides sollen CSS und dessen Mechanismen näher gebracht werden.

### # CSS - Basics

Im folgenden Slide-Deck werden wir Erfahren, wie man mit CSS (HTML)-Elemente selektiert und was eigentlich genau hinter dem kompletten System steckt.
Unter anderem wird gezeigt was "Cascading" in "Cascading Style Sheets" bedeutet und wie wir überhaupt CSS in unsere Webseite einbinden können.
Dies wird alles als Grundlage dienen die wir in den darauffolgenden Aufgaben anwenden werden.

<Card to="/slides/css/00-intro" color="blue">Zu den Slides</Card>
<Spacer />

### # CSS - Erste Styles

Wir wissen nun wie wir gezielt einzelne Elemente in HTML stylen können. Nun lernen wir die entsprechenden Styling-Direktiven kennen um den visuellen Output zu modifizieren.
Den Beginn werden Farben machen und welche Möglichkeiten wir haben um Farben zu definieren. Danach werden wir uns mit den Möglichkeiten auseinander setzten, wie man Text auf seine verschiedenen Arten und Weisen styled.
Im weiteren Verlauf des Slidedecks schauen wir uns die Möglichkeiten an, wie man Elemente mit einer Rahmung (Border) versieht, als auch die Möglichkeiten Abstände zwischen Elementen zu modifizieren.
Alle vorgestellten Style's in Bezug auf Abstände werden mit der neueren "Inline-Block" Syntax beschrieben.

<Card to="/slides/css/01-basic-styles" color="blue">Zu den Slides</Card>