---
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 />
