HTML & CSS

HTML Einführung

Lernunterlage: www.w3schools.com 

  • Websites werden mit HTML und CSS erstellt
    • Beispiele
      • Untersuchen
      • Quelltext
    • Was ist HTML?
      • Struktur einer Website wird beschrieben
      • Verschachtelt – XML
      • Browser erkennt unterschiedliche Elemente
  • Notwendige Software
    • Editor
    • HTML-Editor 
      • Syntax Highlighting
      • Codevervollständigung
  • HTML-Datei erstellen
    • Dateiendung – Häckchen bei „bekannten Dateitypen“
    • Codierung
      • UTF-8

Tag und Struktur

  • HTML besteht aus Tags
    • <tagname>Inhalt</tagname>
  • Grundgerüst
    • doctype – HTML Version
      • Geschichte
        • 1989 Tim Berners-Lee erfindet das www
        • 1991 Tim Berners-Lee erfindet HTML
        • 1995 HTML 2.0
        • 1997 HTML 3.2
        • 1999 HTML 4
        • 2000 XHTML 1
        • 2014 HTML 5
  • Öffnen der Datei im Browser
    • Abspeichern im Editor
    • Aktualisieren im Browser (F5)
  • root-Ordner
  • Verschachtelung
  • Referenz
<html>
<head>
<title>Seiten Titel</title>
</head>
<body>
<h1>Eine Überschrift</h1>
<p>Ein Absatz.</p>
<p>Ein weiterer Absatz.</p>
</body>
</html>

Tags

  • Überschriften
  • Absatz
    • Zeilenschaltung – Ausnahme
    • Leerzeichen – Geschütze Leerzeichen &nbsp;
  • Kommentare
  • LIsten
  • Tabellen
  • Bilder
  • Links
    • absolute – relative
    • Anker
    • Ordnerstruktur

Übung Steckbrief

Erstelle einen Steckbrief von dir.

Folgende Elemente müssen enthalten sein:

  • Überschrift – Dein Name
  • Absatz: Beschreibung
  • Bild
  • Link zu deinen Lieblingswebsites oder Webservices
  • Liste deiner Hobbies oder Lieblingsgegenstände
  • Tabelle deiner Noten (Fach und daneben Noten) können auch Fakenoten sein!

Die Anordnung der Elemente ist dir überlassen.

Relative und absolute Links

└── project/
    ├── index.html
    ├── news/
    │   ├── list.html
    │   └── detail.html
    ├── products/
    │   └── outdoor/
    │       ├── cycling/
    │       │   └── cycling.html
    │       └── hiking/
    │           └── hiking.html
    └── team/
        ├── list.html
        └── einkauf/
            └── johannes_huber.html

Übung Relative Links

Erstelle folgende Ordnerstruktur und die nötigen html-Dateien. Verlinke jede Seite mit jeder Seite mit Hilfe von a-Tags und einer Liste mit Aufzählungspunkten.

Lösung

CSS

  • Was ist CSS?
  • Einbindung
    • inline
    • head <style></style>
    • Datei <link rel=“stylesheet“ href=“mystyle.css“>
  • Schreibweise
    • Selektor
    • Eigenschaft und Wert (property: value;)
    • Achtung! Keine Leerzeichen zwischen Zahl und zB px
  • Selektoren – https://www.w3schools.com/cssref/trysel.asp
    • Tag
    • ID
    • class
    • pseudo-class
    • Kombinationen
    • Attribut Selektoren
  • Schriftformatierung

Übung Steckbrief mit externen CSS formatieren

Formatiere deine zuvor erstellten Steckbrief mit Hilfe einer externen CSS-Datei.

Box Model

Display: inline vs. block

  • background
    • image
      • position
      • repeat
  • position
  • overflow
  • z-index
  • float
  • flex
    • flex-container
      • justify-content
      • align-items
    • flex-items
      • flex: 1 (Verhältnis)
      • align-self
  • grid

Übung Box Model

Erstellen Sie folgende HTML-Dateien:

Bild 1: position: absolute, z-index
Bild 2: background, position
Bild 3: flex, align
Lösung

<!DOCTYPE html>

<html lang=“en“>

<head>

    <meta charset=“UTF-8″>

    <meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>

    <title>Document</title>

    <style>

        div {

            border: 1px solid red;

            width: 100px;

            height: 100px;

            position: absolute;

            background-color: white;

        }

        .box1 {

            top: 100px;

            left: 100px;

        }

        .box2 {

            top: 120px;

            left: 120px;

        }

        .box3 {

            top: 140px;

            left: 140px;

        }

    </style>

</head>

<body>

    <div class=“box1″></div>

    <div class=“box2″></div>

    <div class=“box3″></div>

</body>

</html>

Übung Bild und Text zentrieren fullwidth fullheight

Erstelle eine HTML-Seite mit einem Hintergrundbild und Text wie in der Abbildung.

Das Bild soll zentriert dargestellt werden und die ganze Browserhöhe und -breite ausfüllen.

Der Text soll vetikal und horizontal zentriert dargestellt werdenn.

Website Minecraft 

Vorlage
Minecraft Bilder 2026
Schrift "Minecraft Ten"
Schrift "Noto Sans" 
@font-face {
    font-family: 'Minecraft Ten';
    src: url('fonts/MinecraftTen-VGORe.woff') format('woff'), /* Modern Browsers */
         url('fonts/MinecraftTen-VGORe.ttf')  format('truetype'), /* Safari, Android, iOS */
}

:root {
  --mc-chevron: polygon(0% 0%, 0% 25%, 14.286% 25%, 14.286% 50%, 28.572% 50%, 28.572% 75%, 42.858% 75%, 42.858% 100%, 57.142% 100%, 57.142% 75%, 71.428% 75%, 71.428% 50%, 85.714% 50%, 85.714% 25%, 100% 25%, 100% 0%, 85.714% 0%, 85.714% 25%, 71.428% 25%, 71.428% 50%, 57.142% 50%, 57.142% 75%, 42.858% 75%, 42.858% 50%, 28.572% 50%, 28.572% 25%, 14.286% 25%, 14.286% 0%);
  --mc-environment-arrow__download_clip-path: polygon(50.00% 0.000%, 50.00% 66.67%, 58.33% 66.67%, 58.33% 58.33%, 66.67% 58.33%, 66.67% 50.00%, 75.00% 50.00%, 75.00% 41.67%, 83.33% 41.67%, 83.33% 50.00%, 75.00% 50.00%, 75.00% 58.33%, 66.67% 58.33%, 66.67% 66.67%, 58.33% 66.67%, 58.33% 75.00%, 50.00% 75.00%, 50.00% 83.33%, 50.00% 91.67%, 83.33% 91.67%, 83.33% 100.0%, 8.333% 100.0%, 8.333% 91.67%, 50.00% 91.67%, 50.00% 83.33%, 41.67% 83.33%, 41.67% 75.00%, 33.33% 75.00%, 33.33% 66.67%, 25.00% 66.67%, 25.00% 58.33%, 16.67% 58.33%, 16.67% 50.00%, 8.333% 50.00%, 8.333% 41.67%, 16.67% 41.67%, 16.67% 50.00%, 25.00% 50.00%, 25.00% 58.33%, 33.33% 58.33%, 33.33% 66.67%, 41.67% 66.67%, 41.67% 0.000%);
  --mc-environment-arrow__right_clip-path: polygon(0% 0%, 33.33% 0%, 33.33% 20%, 66.66% 20%, 66.66% 40%, 100% 40%, 100% 60%, 66.66% 60%, 66.66% 80%, 33.33% 80%, 33.33% 100%, 0% 100%, 0% 80%, 33.33% 80%, 33.33% 60%, 66.66% 60%, 66.66% 40%, 33.33% 40%, 33.33% 20%, 0% 20%);
}

.button:after {
   
        background-color: white;
        display: inline-block;
        content: '';
        height: 8px;
        width: 14px;
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 14px;
        clip-path: var(--mc-chevron);
        transform: rotate(-90deg);
    
}
#news {
    background-color: #313131;
    padding: 150px 0;
    color: #fff;
}
#news>p {
    text-align: center;
    padding: 30px 0;
}
#news .more {
    color: #52A535;
    text-decoration: none;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
}
#news .row {
    justify-content: center;
}
#news .col {
    width: 225px;
    height: 200px;
    overflow: hidden;
    position: relative;
    margin-right: 25px;
}
#news img {
    width: 100%;
    height: auto;
    transition: transform 300ms;
}
#news .col:hover img {
    transform: scale(1.1);
}
.overlay {
    color: white;
    position: absolute;
    height: 95px;
    bottom: -50px;
    background: rgba(0,0,0, 0.687);
    width: 100%;
    padding: 17px;
    transition: transform 300ms;
}
#news .col:hover .overlay {
    transform: translate(0, -50px);
}
#news .badge {
    background-color: #fff;
    color: #000;
    width: 50px;
    font-family: 'Minecraft Ten';
    padding: 3px 10px 6px 10px;
}
#news h4 {
    font-family: 'Minecraft Ten';
    padding: 5px 0;
}
#news .subline {
    font-family: "Noto Sans", sans-serif;
}

Übung Cards Mitarbeiter

Szenario: Eine Firma möchte ihre Mitarbeiter auf einer „Über uns“-Seite vorstellen. Es gibt 6 Mitarbeiter-Karten, die in Reihen angezeigt werden sollen. Wenn der Platz nicht ausreicht, sollen die Karten automatisch in die nächste Zeile springen.

<div class="team-container">
  <div class="card">Mitarbeiter 1</div>
  <div class="card">Mitarbeiter 2</div>
  <div class="card">Mitarbeiter 3</div>
  <div class="card">Mitarbeiter 4</div>
  <div class="card">Mitarbeiter 5</div>
  <div class="card">Mitarbeiter 6</div>
</div>
/* 1. Der Container für die Karten */
.team-container {
  display: flex;            /* Aktiviert Flexbox */
  flex-wrap: wrap;          /* Erlaubt den Zeilenumbruch, wenn kein Platz mehr ist */
  justify-content: center;  /* Zentriert die Kartenreihen horizontal */
  gap: 20px;                /* Erzeugt 20px Abstand zwischen allen Karten (horizontal & vertikal) */
  padding: 20px;
}

/* 2. Die einzelnen Karten */
.card {
  width: 200px;             /* Feste Breite laut Aufgabe */
  height: 150px;            /* Feste Höhe laut Aufgabe */
  background-color: #3498db;
  color: white;
  border: 2px solid #2980b9;
  border-radius: 10px;
  
  /* Bonus: Den Text innerhalb der Karte auch mit Flexbox zentrieren */
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  font-weight: bold;
}

Übung Menüleiste Gamingwebsite

Szenario: Du erstellst den Header für eine neue Gaming-Webseite. Die Navigationslinks sollen in einer Reihe stehen und gleichmäßig verteilt werden.

<header class="navbar">
  <div class="logo">GameZone</div>
  <nav class="nav-links">
    <a href="#">Home</a>
    <a href="#">News</a>
    <a href="#">Reviews</a>
    <a href="#">Shop</a>
  </nav>
  <button class="login-btn">Login</button>
</header>
/* Der äußere Container */
.navbar {
  display: flex;               /* Aktiviert Flexbox */
  justify-content: space-between; /* Verteilt Logo, Nav-Links und Button weitestmöglich */
  align-items: center;         /* Zentriert alle drei Elemente vertikal auf einer Linie */
  
  padding: 10px 20px;          /* Etwas Innenabstand für die Optik */
  background-color: #48abfd;
  color: white;
}

/* Der Container für die Links in der Mitte */
.nav-links {
  display: flex;               /* Auch die Liste der Links wird zum Flex-Container */
  gap: 20px;                   /* Erzeugt einen gleichmäßigen Abstand zwischen den Links */
}

/* Styling für die Links selbst (optional für die Optik) */
.nav-links a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.login-btn {
  padding: 8px 16px;
  cursor: pointer;
}

Übung Login-Formular auf Seite zentrieren

Szenario: Du möchtest ein Anmeldefenster (Login-Box) genau in der Mitte des gesamten Bildschirms platzieren – egal wie groß das Browserfenster ist.

<body class="page-wrapper">
  <div class="login-box">
    <h2>Anmelden</h2>
    <input type="text" placeholder="Benutzername">
    <input type="password" placeholder="Passwort">
    <button>Abschicken</button>
  </div>
</body>
/* 1. Den gesamten Bildschirm füllen */
.page-wrapper {
  margin: 0;
  height: 100vh; /* Nutzt 100% der sichtbaren Fensterhöhe */
  display: flex; /* Aktiviert Flexbox */
  
  /* 2. Zentrierung der Box auf dem Bildschirm */
  justify-content: center; /* Horizontal mittig (Hauptachse) */
  align-items: center;     /* Vertikal mittig (Querachse) */
  
  background-color: #f0f2f5; /* Nur zur Optik */
}

/* 3. Gestaltung der Login-Box selbst */
.login-box {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);

  /* Innere Ausrichtung: Elemente untereinander */
  display: flex;
  flex-direction: column; /* Stapelt die Inputs vertikal */
  gap: 10px;              /* Erzeugt Abstand zwischen den Inputs */
}

Veröffentlichung auf einem Webserver

Lima City Hosting

Userverwaltung: 
User: bbsrohrbach
PW: In************

FileZilla ist in der Schule installiert.

Lima City Website