Arbeite die Schritte der Reihe nach ab. Kopiere den Code jeweils in deine Datei und speichere regelmäßig. Wenn du fertig bist, hast du eine komplette Webseite.
Lege im selben Ordner eine neue Datei index.html an.
Jede HTML-Seite braucht ein Grundgerüst. Zusätzlich binden wir
Bootstrap über einen CDN-Link ein – so müssen wir nichts
herunterladen.
Code zum Kopieren:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine Webseite</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<!-- Hier kommt später unser Inhalt -->
</body>
</html>
<meta name="viewport" ...>-Tag
ist wichtig, damit die Seite auf Handys richtig angezeigt wird.
Vergiss ihn nicht!
Die Navbar ist die dunkle Leiste oben auf der Seite. Sie enthält
den Seitennamen und mehrere Links. Wir fügen sie direkt nach
<body> ein.
Code zum Kopieren (in den Body einfügen):
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Meine Webseite</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="ueber.html">Über</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</div>
</nav>
Was bedeuten die Klassen?
navbar – macht aus dem Element eine Navigationsleiste.navbar-expand-lg – ab großen Bildschirmen wird die Navbar horizontal, darunter klappt sie zusammen (Burger-Menü).navbar-dark bg-dark – dunkler Hintergrund + helle Schrift.navbar-brand – der Seitenname links.nav-item / nav-link – einzelne Menüpunkte.
Jetzt kommt der Hauptinhalt. Wir bauen ein Grid
aus einer Reihe (row) mit zwei Spalten: links das
Bild (4 von 12 Spalten), rechts der Text (8 von 12 Spalten).
Code zum Kopieren (unter die Navbar einfügen):
<div class="container mt-5">
<div class="row">
<!-- Bild Container -->
<div class="col-md-4">
<img src="bild.jpg" class="img-fluid" alt="Charakterbild">
</div>
<!-- Text Container -->
<div class="col-md-8">
<h2>Hallo, hier ist mein Lebenslauf!</h2>
<table>
<tr><th>Zeitraum</th><th>Tätigkeit</th></tr>
<tr><td>2018 - 2022</td><td>Grundschule</td></tr>
<tr><td>2022 - heute</td><td>Gymnasium</td></tr>
<tr><td>2023</td><td>Schülerpraktikum bei XYZ</td></tr>
<tr><td>Hobbys</td><td>Lesen, Schwimmen, Programmieren</td></tr>
</table>
</div>
</div>
</div>
a) <div class="container mt-5">
Der container fasst den Inhalt ein und zentriert ihn mit
festem Abstand zum Rand. mt-5 (= Margin-Top-Stufe 5) sorgt
für Abstand nach oben.
b) <div class="row">
Eine Reihe, die mehrere Spalten enthalten kann.
c) <div class="col-md-4"> (Bild)
Diese Spalte nimmt 4 von 12 Spalten ein. img-fluid macht
das Bild responsiv – es passt sich der Bildschirmgröße an.
d) <div class="col-md-8"> (Text)
Diese Spalte nimmt 8 von 12 Spalten ein und enthält Überschrift und Tabelle.
md steht für „medium" –
die Aufteilung gilt ab mittleren Bildschirmen. Auf dem Handy
stehen die Spalten untereinander. Probiere es aus, indem du das
Browserfenster schmal ziehst!
Der Footer ist die Zeile am unteren Ende der Seite – meistens mit
Copyright-Hinweis. Wir fügen ihn nach dem schließenden
</div> des Containers ein.
Code zum Kopieren:
<footer class="bg-light text-center text-lg-start mt-5">
<div class="text-center p-3">
© 2026 Copyright:
<a class="text-body" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
</footer>
<head> schreiben:
<style>
html, body { height: 100%; }
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main { flex: 1 0 auto; }
footer { flex-shrink: 0; }
</style>
Dazu packst du den Hauptinhalt (Navbar + Container) in ein
<main>-Element.
Damit Burger-Menü und andere interaktive Elemente funktionieren,
musst du am Ende des <body> noch das
Bootstrap-JavaScript einbinden.
Code zum Kopieren (kurz vor </body>):
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
Erstelle eine zweite Datei ueber.html. Kopiere das
Grundgerüst aus index.html und passe den Inhalt an.
Aufgabe:
Home → index.html,
Über → ueber.html.Beispiel für den Hauptbereich:
<div class="container mt-5">
<h2>Über mich</h2>
<div class="row">
<div class="col-md-4">
<img src="bild.jpg" class="img-fluid" alt="Charakterbild">
</div>
<div class="col-md-8">
<p>Hallo! Ich bin ... und erzähle hier etwas über mich.</p>
<p>Meine Hobbys sind ...</p>
</div>
</div>
</div>
Das Spalten-Layout kannst du ganz einfach verändern:
col-md-4 → col-md-6: Bild wird breiter, Text schmaler.col-md-8 → col-md-6: beide gleich breit.col-md-4 → col-12 col-md-4: auf dem Handy volle Breite, ab md 4 Spalten.Tausche auch gerne das Bild oder den Text aus!
ueber.html.ueber.html siehst du Navbar, Footer und deinen Text.kontakt.html mit der gleichen Navbar und Footer.table table-striped ein schöneres Aussehen.ueber.html in einen runden Rahmen (Tipp: border-radius: 50%;).bg-primary.