Inhalt
In der heutigen digitalen Welt ist das Erstellen einer eigenen Webseite eine wichtige Fähigkeit. Egal, ob du ein Geschäftsinhaber, Künstler oder einfach jemand bist, der seine Ideen und Leidenschaften teilen möchte, eine Webseite bietet dir die Möglichkeit, deine Botschaft online zu verbreiten.
In diesem Artikel möchte ich vor allem Anfänger und DIY-Enthusiasten ansprechen, die lernen möchten, wie man eine ansprechende One-Page-Webseite erstellt, auch wenn man keine Programmierkenntnisse mitbringt.
Zuallererst ist es wichtig, die Grundlagen von HTML und CSS zu verstehen. HTML (Hypertext Markup Language) ist die Grundstruktur jeder Webseite, während CSS (Cascading Style Sheets) das Aussehen und Layout definiert. Wenn du diese beiden Technologien beherrschst, kannst du problemlos deine eigene ansprechende Webseite erstellen.
Javascript, ist die Programmiersprache, die einer Seite Funktionalitäten gibt, wie zum Beispiel, wenn ein Button geklickt wird und das nächste Bild einer Slideshow angezeigt wird. In dieser Anleitung gehen wir aber nicht darauf, ein da es nur darum geht die Grundlagen des Webdesigns zu vermitteln.
Wie kann ich programmieren?
Du hast 2 Möglichkeiten um dieser Anleitung zu folgen:
- Du gehst zu einem online editor wie Codepen.io und versuchst deinen Code dort einzufügen.
- Du öffnest ein Notepad (Editor) Fenster und speicherst diese Datei dann als index.html ab. Sobald du die so erstellte Datei öffnest, siehst du die Früchte deiner Programmierkunst.
Wenn du lernen möchtest wie man so eine Webseite schlussendlich veröffentlicht, dann empfehle ich dir den folgenden Artikel:
Gratis Webseite mit Netlify erstellen
Grundlagen von HTML und CSS
1.1. Einführung in HTML: Struktur und Elemente
HTML besteht aus Elementen, die in sogenannte Tags eingeschlossen sind. Diese Tags geben dem Browser Anweisungen, wie die Webseite dargestellt werden soll. Einige grundlegende Tags sind zum Beispiel <head>, <body>, <h1> (Überschrift), <p> (Absatz) und <a> (Link).
Wenn du sehen möchtest, welche Tags überhaupt existieren, dann besuche W3Schools. Dort findest du so ziemlich alles.
1.2. Einführung in CSS: Stile und Layouts
Während HTML die Struktur einer Webseite definiert, ist CSS dafür verantwortlich, das Aussehen der Webseite zu gestalten. Mit CSS können Farben, Schriftarten, Hintergrundbilder und vieles mehr angepasst werden. CSS-Regeln bestehen aus Selektoren (welche HTML-Elemente betroffen sind) und Eigenschaften (welche Stile angewendet werden).
1.3. Texteditoren und Entwicklungsumgebungen für Webentwicklung
Um mit HTML und CSS zu arbeiten, benötigst du einen Texteditor oder eine Entwicklungsumgebung (IDE). Es gibt viele kostenlose und kostenpflichtige Optionen zur Verfügung, wie zum Beispiel Visual Studio Code, Sublime Text oder Atom. Wähle einen Editor, der dir am besten zusagt und lade ihn herunter, um mit der Erstellung deiner Webseite zu beginnen, wenn du wirklich programmieren lernen möchtest. Ansonsten reichen, die weiter oben beschriebenen Optionen.
In den folgenden Abschnitten werden wir die einzelnen Schritte durchgehen, um eine ansprechende One-Page-Webseite zu erstellen. Wir werden dabei auf die HTML-Struktur, das Einfügen von Bildern und Multimedia, die CSS-Stilregeln, die Gestaltung von Navigation und Layout, die Anwendung von Schriftarten, Farben und Design-Elementen, das Erstellen von ansprechenden Inhaltselementen und schließlich die Validierung und Veröffentlichung der Webseite eingehen.
Erstellen der HTML-Struktur für eine One-Page-Webseite
In diesem Abschnitt werden wir uns damit beschäftigen, wie man die grundlegende HTML-Struktur für eine One-Page-Webseite erstellt. Dabei werden wir den Doctype, die Kopf- und Hauptbereiche sowie die grundlegenden HTML-Tags behandeln.
2.1. HTML-Dokumentstruktur und Doctype
Um mit der Erstellung einer Webseite zu beginnen, benötigst du eine Datei mit der Endung .html. Öffne deinen Texteditor und erstelle eine neue Datei mit dem Namen index.html. Der erste Tag, den wir in dieser Datei einfügen, ist der Doctype. Füge die folgende Zeile am Anfang der Datei ein:
<!DOCTYPE html>Der Doctype gibt dem Browser an, dass es sich um eine HTML5-Webseite handelt. Nach dem Doctype fügst du die grundlegende Struktur einer HTML-Datei ein:
<html>
<head>
<!-- Hier kommen die Kopfinformationen rein -->
</head>
<body>
<!-- Hier kommt der Hauptinhalt der Webseite rein -->
</body>
</html>2.2. Kopf- und Hauptbereiche (head und body)
Der <head>-Bereich enthält Informationen über die Webseite, wie den Titel, der in der Browser-Registerkarte angezeigt wird, und Verweise auf externe Dateien wie CSS-Stylesheets. Der <body>-Bereich enthält den sichtbaren Inhalt der Webseite.
Füge den folgenden Code in den <head>-Bereich ein, um den Titel deiner Webseite festzulegen:
<title>Meine One-Page-Webseite</title>2.3. Grundlegende HTML-Tags (Titel, Überschriften, Absätze, Links)
Jetzt können wir mit dem Hinzufügen von Inhalten in den <body>-Bereich beginnen. Verwende verschiedene HTML-Tags, um Struktur und Bedeutung zu vermitteln. Hier sind einige grundlegende Tags, die du verwenden kannst:
<h1>bis<h6>: Überschriften verschiedener Ebenen, wobei<h1>die wichtigste Überschrift ist<p>: Absätze<a>: Links
Hier ist ein Beispiel, wie du diese Tags verwenden kannst:
<body>
<h1>Willkommen auf meiner One-Page-Webseite</h1>
<p>Hier erfährst du mehr über mich und meine Leidenschaften.</p>
<h2>Meine Projekte</h2>
<p>Schau dir meine neuesten Projekte an:</p>
<ul>
<li><a href="https://beispielprojekt1.com">Beispielprojekt 1</a></li>
<li><a href="https://beispielprojekt2.com">Beispielprojekt 2</a></li>
</ul>
</body>Resultat:
Die <ul>– und <li>-Tags sind HTML-Tags, die zur Erstellung von Listen verwendet werden. Hier ist eine kurze Erklärung zu diesen Tags:
<ul>: Das<ul>-Tag steht für „unordered list“ (ungeordnete Liste) und wird verwendet, um eine Liste mit Aufzählungszeichen zu erstellen. In einer ungeordneten Liste ist die Reihenfolge der Listenelemente nicht wichtig.<li>: Das<li>-Tag steht für „list item“ (Listenelement) und repräsentiert ein einzelnes Element innerhalb einer Liste, sei es eine ungeordnete Liste (<ul>) oder eine geordnete Liste (<ol>). Die Listenelemente innerhalb einer ungeordneten Liste werden standardmäßig mit Aufzählungszeichen dargestellt, während Listenelemente innerhalb einer geordneten Liste nummeriert sind.
In den nächsten Abschnitten werden wir weitere HTML-Elemente und CSS-Stile hinzufügen, um die Webseite ansprechender und funktionaler zu gestalten.
Einfügen von Bildern und Multimedia
Eine ansprechende Webseite beinhaltet oft Bilder, Videos und andere Multimedia-Elemente, um den Inhalt interessanter und ansprechender zu gestalten. In diesem Abschnitt zeigen wir, wie du Bilder hinzufügst und Videos und Audiodateien einbettest. Außerdem werden wir die Bedeutung von alternativen Texten und Bildunterschriften erklären.
3.1. Hinzufügen von Bildern mit dem img-Tag
Um ein Bild in deine Webseite einzufügen, verwende das <img>-Tag. Du musst die src-Attribut angeben, um den Pfad zur Bilddatei festzulegen. Das gezeigt Beispiel zeigt den Pfad zu einem Bild, das sich im selben Ordner befindet wie die index.html datei. Beispiel:
<img src="mein-bild.jpg" alt="Beschreibung des Bildes">3.2. Einbetten von Videos und Audiodateien (optional)
Wenn du Videos oder Audiodateien in deine Webseite einbinden möchtest, kannst du die HTML5-Tags <video> und <audio> verwenden. Um ein Video einzubetten, füge den folgenden Code in den <body>-Bereich ein:
<video width="320" height="240" controls>
<source src="mein-video.mp4" type="video/mp4">
Dein Browser unterstützt das Video-Tag nicht.
</video>Resultat:
Für Audiodateien verwende das <audio>-Tag:
<audio controls>
<source src="meine-audiodatei.mp3" type="audio/mpeg">
Dein Browser unterstützt das Audio-Tag nicht.
</audio>Resultat:
3.3. Nutzen von alternativen Texten und Bildunterschriften
Es ist wichtig, deinen Bildern einen alternativen Text (Alt-Text) hinzuzufügen. Der Alt-Text wird angezeigt, wenn das Bild nicht geladen werden kann, und ist hilfreich für Suchmaschinen und Screenreader, um den Inhalt des Bildes zu beschreiben. Füge das alt-Attribut in dein <img>-Tag ein, wie im folgenden Beispiel gezeigt:
<img src="mein-bild.jpg" alt="Eine Beschreibung des Bildes">Für Bildunterschriften kannst du das <figcaption>-Tag innerhalb eines <figure>-Tags verwenden. Hier ist ein Beispiel:
<figure>
<img src="mein-bild.jpg" alt="Eine Beschreibung des Bildes">
<figcaption>Dies ist eine Bildunterschrift.</figcaption>
</figure>Resultat:
Durch das Hinzufügen von Bildern, Videos und Audiodateien sowie alternativen Texten und Bildunterschriften wird deine Webseite visuell ansprechender und zugänglicher für alle Benutzer.
3.4. Einbetten von Videos (Youtube, Vimeo, etc.)
YouTube- und Vimeo-Videos lassen sich ganz einfach auf deiner Webseite einbetten, indem du Iframes verwendest, die direkt von diesen Plattformen bereitgestellt werden.
Ein Iframe (Inline Frame) ist ein HTML-Element, das es ermöglicht, eine externe Webseite oder Inhalte in die aktuelle Webseite einzubetten. Sowohl YouTube als auch Vimeo stellen dir den entsprechenden Iframe-Code zur Verfügung, den du kopieren und in deine Webseite einfügen kannst.
Um ein YouTube-Video einzubetten, gehe zum gewünschten Video auf der YouTube-Plattform und klicke auf den „Teilen“-Button unter dem Video. Wähle anschließend die Option „Einbetten“ und kopiere den angezeigten Iframe-Code. Füge diesen Code dann an der gewünschten Stelle in deiner HTML-Datei ein.
Das Gleiche gilt für Vimeo. Gehe zum gewünschten Video auf Vimeo, klicke auf den „Teilen“-Button und wähle die Option „Einbetten“. Kopiere den bereitgestellten Iframe-Code und füge ihn in deine Webseite ein.
Hier ist ein Beispiel für das Einbetten eines YouTube-Videos:
<iframe width="560" height="315" src="https://www.youtube.com/embed/BeispielVideoID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Und hier ein Beispiel für das Einbetten eines Vimeo-Videos:
<iframe src="https://player.vimeo.com/video/BeispielVideoID" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
Ersetze „BeispielVideoID“ durch die tatsächliche Video-ID des gewünschten Videos. Durch das Einbetten von Videos mit Iframes kannst du ansprechende multimediale Inhalte auf deiner Webseite präsentieren, ohne dass der Benutzer die Seite verlassen muss.
Beispiel Youtube Einbettung:
Einführung in die CSS-Stilregeln
Nachdem wir uns mit der HTML-Strukturierung der Webseite beschäftigt haben, widmen wir uns nun der Gestaltung und dem Styling mit CSS. CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die verwendet wird, um das Aussehen und Format von HTML-Elementen auf einer Webseite zu steuern. In diesem Abschnitt werden wir die verschiedenen Möglichkeiten der CSS-Einbindung, Selektoren, Eigenschaften und Werte sowie das CSS-Box-Modell und grundlegende Layout-Konzepte behandeln.
4.1. Inline-, internes und externes CSS
Es gibt drei Hauptmethoden, um CSS in deine Webseite zu integrieren: Inline, intern und extern.
- Inline-CSS: Dabei wird das CSS direkt in das HTML-Element eingefügt, indem das
style-Attribut verwendet wird. Dies ist jedoch keine empfohlene Methode, da es die Trennung von Inhalt und Design nicht unterstützt und die Wartbarkeit erschwert.<p style="color: red;">Dieser Text ist rot.</p> - Internes CSS: Hierbei wird das CSS innerhalb des
<style>-Tags im<head>-Bereich der HTML-Datei geschrieben. Internes CSS eignet sich für kleine Projekte oder schnelles Prototyping.<head> <style> p { color: red; } </style> </head> - Externes CSS: Externes CSS ist die bevorzugte Methode, bei der ein separates CSS-Dokument erstellt und über das
<link>-Tag im<head>-Bereich der HTML-Datei eingebunden wird. Diese Methode fördert die Wiederverwendbarkeit und erleichtert die Wartung. Das hier gezeigte Beispiel zeigt wie man ein Dokument mit dem Namen styles.css dem index.html Dokument verfügbar macht, wenn es sich im gleichen Ordner wie Dieses befindet.<!-- In der HTML-Datei --> <head> <link rel="stylesheet" href="styles.css"> </head> <!-- In der externen CSS-Datei (styles.css) --> p { color: red; }
4.2. Selektoren, Eigenschaften und Werte
In CSS besteht eine Regel aus einem Selektor und einer Deklarationsblock. Der Selektor bestimmt, welches HTML-Element oder welche Elemente gestaltet werden sollen. Der Deklarationsblock enthält eine oder mehrere Deklarationen, die jeweils aus einer Eigenschaft und einem Wert bestehen.
Hier ist ein Beispiel für eine CSS-Regel:
p – Selektor
{…} – Deklarationsblock
color – Eigenschaft
red – Wert
p {
color: red;
font-size: 16px;
}
In diesem Beispiel ist p der Selektor, der alle Absatz-Elemente (<p>) auf der Webseite anspricht. Die Deklarationen innerhalb des Deklarationsblocks geben an, dass der Text in den Absatz-Elementen rot (color: red;) und 16 Pixel groß (font-size: 16px;) sein soll.
4.3. CSS-Box-Modell und Layout-Grundlagen
Das CSS-Box-Modell ist ein grundlegendes Konzept, das die Gestaltung und das Layout von HTML-Elementen beschreibt. Jedes Element wird als Rechteck betrachtet, das aus vier Schichten besteht: Inhalt, Polsterung (Padding), Rahmen (Border) und Abstand (Margin).
- Inhalt: Der Inhalt ist der Bereich, in dem der eigentliche Text, Bilder oder andere Medien dargestellt werden.
- Polsterung (Padding): Die Polsterung ist der Bereich zwischen dem Inhalt und dem Rahmen. Sie kann verwendet werden, um Platz um den Inhalt herum zu schaffen, ohne den Rahmen selbst zu verändern.
- Rahmen (Border): Der Rahmen umgibt den Inhalt und die Polsterung. Er kann in verschiedenen Stilen und Farben gestaltet werden, um das Element optisch vom Rest der Seite abzugrenzen.
- Abstand (Margin): Der Abstand ist der äußere Bereich um den Rahmen herum, der dazu dient, Platz zwischen verschiedenen Elementen zu schaffen.
Das Verständnis des CSS-Box-Modells ist entscheidend für die Gestaltung und das Layout von Webseiten. Du kannst die verschiedenen Aspekte des Box-Modells über CSS-Eigenschaften wie padding, border und margin steuern. Zum Beispiel:
.box {
background-color: grey;
width: 50px;
height: 20px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}In diesem Beispiel haben wir einer Klasse namens .box ein Padding von 10 Pixeln, einen Rahmen mit einer Stärke von 2 Pixeln und einer schwarzen Linie sowie einen Abstand von 20 Pixeln hinzugefügt.
Resultat:
Layout-Grundlagen in CSS umfassen die Verwendung von Eigenschaften wie display, position, float und clear. Diese Eigenschaften ermöglichen es dir, die Anordnung und Positionierung von HTML-Elementen auf der Seite zu steuern. Mit den Einführungen von Flexbox und CSS Grid sind zudem leistungsstärkere und flexiblere Layout-Optionen verfügbar, die wir später in diesem Artikel behandeln werden.
Durch das Verständnis von CSS-Stilregeln, Selektoren und dem Box-Modell kannst du beginnen, die Gestaltung deiner Webseite anzupassen und ein ansprechendes Design zu erstellen.
Gestalten von ansprechender Navigation und Layout
Eine gut gestaltete Navigation und ein ansprechendes Layout sind entscheidend für den Erfolg deiner Webseite. In diesem Abschnitt werden wir uns auf die Erstellung einer „One-Page“-Navigation konzentrieren, das Anwenden von CSS-Positionierung und modernen Layout-Techniken wie Flexbox und Grid sowie das Implementieren eines responsiven Designs mit Media Queries.
5.1. Erstellen einer „One-Page“-Navigation (Menü)
Eine „One-Page“-Navigation ermöglicht es den Besuchern, schnell und einfach zu verschiedenen Abschnitten der Webseite zu gelangen. Hier ist ein Beispiel, wie du ein einfaches Menü mit HTML und CSS erstellen kannst:
<!-- HTML -->
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">Über uns</a></li>
<li><a href="#services">Dienstleistungen</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>
<!-- Ankerpunkte für die Navigation -->
<section id="home">...</section>
<section id="about">...</section>
<section id="services">...</section>
<section id="contact">...</section>
Resultat ohne CSS:
Dann noch das CSS dazu:
/* CSS */
nav ul {
list-style-type: none;
display: flex;
justify-content: space-around;
}
nav a {
text-decoration: none;
color: #333;
}
nav a:hover {
color: #666;
}Resultat mit CSS:
In diesem Beispiel erstellen wir ein Menü mit einer ungeordneten Liste (<ul>), in der jedes Listenelement (<li>) einen Link (<a>) zu einem bestimmten Abschnitt auf der Seite enthält. Mit CSS passen wir das Styling des Menüs an und verwenden Flexbox, um die Listenelemente gleichmäßig zu verteilen.
5.2. Anwenden von CSS-Positionierung, Flexbox und Grid-Systemen
CSS bietet verschiedene Möglichkeiten, um das Layout von Elementen auf der Seite zu gestalten. Flexbox und Grid sind zwei moderne und leistungsfähige Layout-Modelle, die du für deine Webseite nutzen kannst.
Flexbox: Flexbox ist ein eindimensionales Layout-Modell, das sich hervorragend für die Gestaltung von kleineren Layout-Komponenten eignet. Um Flexbox zu verwenden, musst du lediglich den Container, der die Elemente enthält, mit der Eigenschaft display: flex; definieren:
.container {
display: flex;
}Du kannst dann verschiedene Flexbox-Eigenschaften verwenden, um das Verhalten der Elemente innerhalb des Containers anzupassen, wie z.B. justify-content, align-items und flex-direction.
Hier nun ein einfaches Beispiel, wie du Flexbox verwenden kannst, um drei gleich große Boxen nebeneinander anzuordnen:
HTML:
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>In diesem HTML-Code haben wir einen Container erstellt, der drei Boxen enthält.
CSS:
.container {
display: flex;
}
.box {
flex: 1;
padding: 20px;
border: 1px solid #ccc;
text-align: center;
}Resultat:
Mit dem CSS-Code haben wir den Container als Flexbox-Container definiert, indem wir display: flex; hinzugefügt haben. Anschließend haben wir den .box-Elementen die Eigenschaft flex: 1; zugewiesen. Dadurch wird sichergestellt, dass jede Box gleich viel Platz im Container einnimmt und sich gleichmäßig an den verfügbaren Platz anpasst. Wir haben auch etwas Polsterung, einen Rand und Textausrichtung hinzugefügt, um die Boxen optisch ansprechend zu gestalten.
Dieses einfache Beispiel zeigt, wie Flexbox verwendet werden kann, um Elemente gleichmäßig in einem Container zu verteilen und die Größe der Elemente an den verfügbaren Platz anzupassen.
Der folgende Artikel enthält eine ganz genaue Beschreibung aller Möglichkeiten mit Flexbox. (auf Englisch)
Grid: CSS Grid ist ein zweidimensionales Layout-Modell, das sich ideal für das Erstellen komplexer Layouts und Rastersysteme eignet. Um Grid zu verwenden, musst du den Container, der die Elemente enthält, mit der Eigenschaft display: grid; definieren:
.container {
display: grid;
}
Mit Grid kannst du Spalten und Zeilen erstellen und die Größe und Position der Elemente innerhalb des Containers steuern, indem du Eigenschaften wie grid-template-columns, grid-template-rows und grid-gap verwendest.
CSS Grid gibt es noch nicht solange, bisher konnte man das Layout auch gut mit nur Flexbox steuern.
5.3. Responsive Design mit Media Queries für optimale Darstellung auf verschiedenen Geräten
Ein responsives Design stellt sicher, dass deine Webseite auf verschiedenen Geräten und Bildschirmgrößen optimal dargestellt wird. Media Queries sind ein wichtiger Bestandteil des responsiven Designs, da sie es dir ermöglichen, CSS-Stile basierend auf den Eigenschaften des Geräts oder des Viewports (aka Bildschirmgrösse) anzuwenden.
Um Media Queries in deinem CSS zu verwenden, musst du eine @media-Regel erstellen, gefolgt von einer Bedingung, z. B. einer bestimmten Bildschirmbreite:
@media screen and (max-width: 768px) {
/* CSS-Stile für Bildschirmbreiten kleiner oder gleich 768 Pixel */
}In diesem Beispiel wenden wir die CSS-Stile innerhalb der Media Query nur auf Geräte mit einer Bildschirmbreite von 768 Pixeln oder weniger an. Du kannst mehrere Media Queries für unterschiedliche Bildschirmgrößen erstellen, um ein vollständig responsives Design zu erreichen.
Hier ist ein Beispiel, wie du Media Queries verwenden kannst, um ein responsives Menü für deine One-Page-Webseite zu erstellen:
/* Standard-Stile für das Menü */
nav ul {
list-style-type: none;
display: flex;
justify-content: space-around;
}
/* Responsives Menü für Bildschirmbreiten kleiner oder gleich 768 Pixel */
@media screen and (max-width: 768px) {
nav ul {
flex-direction: column;
align-items: center;
}
}In diesem Beispiel haben wir eine Media Query erstellt, die das Menü für Geräte mit einer Bildschirmbreite von 768 Pixeln oder weniger anpasst. Auf kleineren Bildschirmen werden die Menüpunkte untereinander angeordnet (flex-direction: column;), während sie auf größeren Bildschirmen nebeneinander bleiben.
Wichtig: Alle hier vorgenommenen Änderungen deines Designs, werden NUR bei Screens angewandt die dies erfüllen. Du musst also keine Angst haben etwas auf anderen Bildschirmgrössen zu ändern.
Indem du ein ansprechendes Layout und eine benutzerfreundliche Navigation erstellst, gestaltest du eine One-Page-Webseite, die auf verschiedenen Geräten gut aussieht und einfach zu bedienen ist.
Anwenden von Schriftarten, Farben und Design-Elementen
In diesem Abschnitt lernst du, wie du Schriftarten, Farben und Design-Elemente anwendest, um deiner One-Page-Webseite ein ansprechendes Erscheinungsbild zu verleihen.
6.1. Web-Schriftarten und Schriftfamilien
Die Wahl der richtigen Schriftart ist entscheidend für das Erscheinungsbild und die Lesbarkeit deiner Webseite. Du kannst System- oder Web-Schriftarten verwenden, die auf den meisten Geräten vorinstalliert sind, oder du kannst benutzerdefinierte Schriftarten von Diensten wie Google Fonts oder Adobe Fonts beziehen.
Um eine Schriftart in CSS anzuwenden, verwende die font-family-Eigenschaft:
body {
font-family: Arial, sans-serif;
}In diesem Beispiel haben wir die Schriftart Arial als Haupttext-Schriftart festgelegt und „sans-serif“ als Fallback-Option angegeben, falls Arial nicht verfügbar ist.
6.2. Farben und Farbschemata für ansprechendes Design
Die Wahl der richtigen Farben und eines konsistenten Farbschemas trägt maßgeblich zum Gesamteindruck deiner Webseite bei. Du kannst Farben mit Hexadezimalwerten, RGB- oder HSL-Notationen in CSS definieren.
Um die Farbe eines Elements zu ändern, verwende die color-Eigenschaft für Textfarben und die background-color-Eigenschaft für Hintergrundfarben:
h1 {
color: #333333;
}
section {
background-color: #f5f5f5;
}Resultat:
6.3. Hintergrundbilder und -farben
Hintergrundbilder können verwendet werden, um visuelles Interesse und Textur zu deiner Webseite hinzuzufügen. Um ein Hintergrundbild für ein Element festzulegen, verwende die background-image-Eigenschaft.
Auch hier wird das Beispiel gezeigt, wie man ein Bild anzeigt, dass im selben Ordner abgespeichert ist, wie das index.html File. Alternativ kann man auch Weburls von Bildern benutzen.
header {
background-image: url('images/header-background.jpg');
background-size: cover;
background-position: center; height: 100vh;
width: 50%;}
Resultat:
In diesem Beispiel haben wir ein Hintergrundbild für den Header-Bereich festgelegt und die Größe und Position angepasst, damit es optimal dargestellt wird.
6.4. Einbindung von Icons und Gestaltung von Buttons
Icons können dazu beitragen, die Navigation und Benutzerfreundlichkeit deiner Webseite zu verbessern. Du kannst Icons aus Icon-Bibliotheken wie Font Awesome oder Google Material Icons verwenden. Um Icons einzubinden, füge die entsprechenden Schriftarten oder Stylesheets zu deinem HTML-Dokument hinzu und verwende die bereitgestellten Klassen oder Tags.
Um ansprechende Buttons zu gestalten, kannst du CSS-Eigenschaften wie padding, border, background-color, border-radius und box-shadow verwenden:
button {
padding: 12px 24px;
border: none;
background-color: #007BFF;
color: #ffffff;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}In diesem Beispiel haben wir einen Button-Stil erstellt, der beim Hovern eine andere Hintergrundfarbe annimmt. Durch das Hinzufügen von ansprechenden Stilen und Effekten können deine Buttons interaktiver und benutzerfreundlicher gestaltet werden.
Resultat:
Zusammengefasst hilft dir die Verwendung von passenden Schriftarten, Farben und Design-Elementen dabei, das Erscheinungsbild deiner Webseite zu verbessern und den Inhalt ansprechender und leichter zugänglich zu machen. Achte darauf, konsistente Stile und ein harmonisches Farbschema zu verwenden, um eine professionelle und zusammenhängende Optik zu erreichen.
Erstellen von ansprechenden Inhaltselementen
Um deine One-Page-Webseite informativ und ansprechend zu gestalten, ist es wichtig, interessante und gut strukturierte Inhalte zu erstellen. In diesem Abschnitt lernst du, wie du verschiedene Inhaltselemente wie Überschriften, Texte, Listen und Testimonials gestalten kannst.
7.1. Gestaltung von Überschriften und Texten
Überschriften und Texte sind wesentliche Bestandteile einer Webseite. Sie vermitteln Informationen und sollten gut lesbar und ansprechend sein. Um Überschriften und Texte zu gestalten, kannst du verschiedene CSS-Eigenschaften verwenden:
h1, h2, h3 {
font-family: 'Roboto', sans-serif;
color: #333333;
margin-bottom: 20px;
}
p {
font-family: 'Arial', sans-serif;
color: #666666;
font-size: 16px;
line-height: 1.6;
}In diesem Beispiel haben wir verschiedene Schriftarten und Farben für Überschriften und Texte festgelegt, um die Lesbarkeit und Ästhetik der Inhalte zu verbessern. So haben wir etwa angeordnet, dass nach einem h1,h2, oder h3 Titel ein Abstand (margin-bottom) von 20px hinzugefügt wird. Durch das Aufführen von mehreren Tags mit Kommas zwischendurch lässt sich ausserdem das Styling für gleich mehrere Elemente bestimmen.
Bei p-Elementen fordern wir zudem eine Höhe zwischen den Zeilen von 1.6x die Zeilenhöhe selber.
7.2. Erstellen von Listen und Tabellen (optional)
Listen und Tabellen sind nützliche Werkzeuge, um strukturierte Informationen klar und übersichtlich darzustellen. Du kannst geordnete (ol) und ungeordnete (ul) Listen erstellen, sowie Tabellen mit den entsprechenden HTML-Tags (table, tr, td). Um Listen und Tabellen zu gestalten, verwende CSS:
ul, ol {
list-style-type: none;
padding: 0;
}
li {
padding: 10px 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border: 1px solid #ccc;
}
th {
font-weight: bold;
background-color: #f2f2f2;
}In diesem Beispiel haben wir Listen- und Tabellenstile angepasst, um die Darstellung klarer und ansprechender zu gestalten.
Tabelle ohne CSS:
Resultat Tabelle mit CSS:
Resultat Liste:
7.3. Integration von Testimonials oder Kundenmeinungen (optional)
Testimonials oder Kundenmeinungen können helfen, Vertrauen aufzubauen und den Wert deines Angebots zu verdeutlichen. Um Testimonials oder Kundenmeinungen zu integrieren, erstelle einen dedizierten Bereich auf deiner Webseite und verwende CSS, um die Darstellung anzupassen:
<section class="testimonials">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
<footer>- Jane Doe, CEO</footer>
</blockquote>
</section>
.testimonials {
background-color: #f9f9f9;
padding: 40px;
}
blockquote {
font-family: 'Georgia', serif;
font-size: 24px;
font-style: italic;
line-height: 1.5;
color: #333;
margin: 0;
}
blockquote footer {
font-family: 'Arial', sans-serif;
font-size: 16px;
font-style: normal;
color: #999;
margin-top: 10px;}Resultat Testimonial:
In diesem Beispiel haben wir einen Bereich für Testimonials erstellt und die Darstellung mithilfe von CSS angepasst, um eine ansprechende Optik zu erzielen. Indem du ansprechende Inhaltselemente wie Überschriften, Texte, Listen und Testimonials auf deiner Webseite integrierst, sorgst du für eine angenehme Benutzererfahrung und stellst sicher, dass deine Besucher die Informationen, die sie suchen, schnell und einfach finden können. Achte darauf, die Gestaltung konsistent zu halten und die Inhalte gut strukturiert und klar darzustellen, um eine professionelle und benutzerfreundliche Webseite zu erstellen.
Abschluss, Validierung und Veröffentlichung
Nachdem du deine One-Page-Webseite erstellt hast, ist es wichtig, den Code zu überprüfen, die Browser-Kompatibilität zu testen und die Webseite zu veröffentlichen. In diesem Abschnitt werden wir diese Schritte besprechen und einige Tipps zur Suchmaschinenoptimierung (SEO) geben.
8.1. Überprüfung des Codes mit HTML- und CSS-Validatoren
Bevor du deine Webseite veröffentlichst, solltest du den HTML- und CSS-Code überprüfen, um Fehler und Inkonsistenzen zu identifizieren. Hierfür gibt es Online-Validatoren wie den W3C HTML Validator und den W3C CSS Validator. Diese Tools helfen dir dabei, Fehler im Code zu finden und geben Empfehlungen zur Verbesserung.
8.2. Browser-Kompatibilität testen
Es ist wichtig, sicherzustellen, dass deine Webseite in verschiedenen Browsern und auf verschiedenen Geräten korrekt angezeigt wird. Teste die Webseite in gängigen Browsern wie Google Chrome, Mozilla Firefox, Safari und Microsoft Edge. Du kannst auch Tools wie BrowserStack verwenden, um die Kompatibilität zu testen.
8.3. Optionen zum Veröffentlichen der Webseite: Hosting und Domain-Registrierung
Um deine Webseite online zu stellen, benötigst du einen Webhosting-Anbieter und eine Domain. Es gibt viele Webhosting-Anbieter, die kostenlose und kostenpflichtige Hosting-Optionen anbieten, z. B. Netlify, GitHub Pages oder Hostpoint. Informiere dich über die verschiedenen Anbieter und wähle denjenigen, der deinen Anforderungen am besten entspricht.
Um eine Domain zu registrieren, kannst du Domain-Registrare wie Hostpoint oder GoDaddy nutzen. Entscheide dich für einen passenden Domainnamen und prüfe, ob dieser verfügbar ist, bevor du ihn registrierst.
8.4. Tipps zur Suchmaschinenoptimierung (SEO) für One-Page-Webseiten
Suchmaschinenoptimierung (SEO) ist wichtig, um deine Webseite in Suchmaschinen wie Google besser sichtbar zu machen. Hier sind einige grundlegende SEO-Tipps für One-Page-Webseiten:
- Verwende aussagekräftige Überschriften (h1, h2, h3) und achte darauf, wichtige Keywords in den Titeln und Inhalten deiner Seite zu verwenden.
- Nutze die Meta-Tags „description“ und „keywords“ im
head-Bereich deiner HTML-Datei, um Suchmaschinen Informationen über den Inhalt deiner Webseite zu geben. - Achte auf eine gute Seitenladezeit. Optimiere Bilder und skaliere sie entsprechend, um die Ladezeit zu minimieren. Schön ein verkleinern von Bildern in Paint wirkt wunder.
- Gestalte deine Webseite mobilfreundlich und responsive, um ein optimales Nutzererlebnis auf verschiedenen Geräten zu gewährleisten.
- Erstelle qualitativ hochwertige und relevante Inhalte, die für deine Zielgruppe interessant sind. Dies erhöht die Wahrscheinlichkeit, dass Nutzer länger auf deiner Seite verweilen und sie in Suchmaschinen besser rankt.
- Achte auf interne und externe Verlinkung. Verlinke wichtige Inhalte innerhalb deiner Webseite und verweise auf vertrauenswürdige externe Ressourcen, um die Glaubwürdigkeit und Relevanz deiner Inhalte zu erhöhen.
- Füge strukturierte Daten, wie beispielsweise Schema.org-Markup, in den HTML-Code deiner Seite ein, um Suchmaschinen dabei zu helfen, den Inhalt besser zu verstehen und in den Suchergebnissen anzuzeigen.
- Indem du diese grundlegenden SEO-Prinzipien befolgst, erhöhst du die Sichtbarkeit deiner One-Page-Webseite in den Suchergebnissen und erreichst somit ein breiteres Publikum.
- Zum Abschluss deines Webdesign-Projekts solltest du stolz auf das Erreichte sein und deine neu erworbenen Kenntnisse in HTML und CSS weiter vertiefen. Die Erstellung einer ansprechenden One-Page-Webseite ist ein wichtiger Schritt, um den Wert einer benutzerfreundlichen und gut gestalteten Webseite zu erkennen. Weiterhin bietet es die Möglichkeit, deine Webdesign-Fähigkeiten zu erweitern und zukünftig noch komplexere Projekte erfolgreich umzusetzen.
Beispiel: Eine einfache One-Page-Webseite
Hier ist ein Beispielcode für eine einfache One-Page-Webseite, der das zuvor Erlernte demonstriert. Du kannst diesen Code kopieren und in deinem bevorzugten Texteditor speichern (z. B. Editor/Notepad oder Visual Studio Code) als index.html. Öffne die Datei dann in deinem Webbrowser, um das Ergebnis zu sehen.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine einfache One-Page-Webseite</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
nav {
display: flex;
justify-content: center;
background-color: #333;
padding: 10px;
}
nav a {
color: #fff;
text-decoration: none;
padding: 8px 16px;
}
nav a:hover {
background-color: #555;
}
#content {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>Willkommen auf meiner One-Page-Webseite!</h1>
</header>
<nav>
<a href="#content">Inhalt</a>
<a href="#about">Über mich</a>
<a href="#contact">Kontakt</a>
</nav>
<div id="content">
<h2 id="about">Über mich</h2>
<p>Mein Name ist Max Mustermann, und ich bin ein Webentwickler. Ich liebe es, ansprechende und benutzerfreundliche Webseiten zu erstellen.</p>
<h2 id="contact">Kontakt</h2>
<p>Für Fragen oder Anregungen kontaktiere mich bitte per E-Mail: max.mustermann@example.com</p>
</div>
<footer>
© 2023 Max Mustermann. Alle Rechte vorbehalten.
</footer>
</body>
</html>Dieser Beispielcode zeigt eine einfache One-Page-Webseite mit einer Kopfzeile, Navigation, Inhalt und Fußzeile. Die Webseite verwendet grundlegende HTML-Elemente wie Überschriften, Absätze und Links, sowie einige grundlegende CSS-Stile, um das Design und das Layout der Webseite zu gestalten. Dies ist ein guter Ausgangspunkt, um das Erlernte anzuwenden und deine eigene ansprechende One-Page-Webseite zu erstellen.
Resultat:
Webseitenbaukästen: Eine Alternative für Nutzer ohne Programmierkenntnisse
Obwohl das Erlernen von HTML und CSS grundlegend für das Webdesign ist, gibt es auch Webseitenbaukästen, die es Nutzern ohne Programmierkenntnisse ermöglichen, ansprechende und funktionale Webseiten zu erstellen. Diese Baukästen basieren auf den hier beschriebenen Prinzipien, vereinfachen jedoch den Erstellungsprozess und bieten intuitive, visuelle Tools zur Gestaltung der Webseite.
Einige der bekanntesten Webseitenbaukästen sind Wix und WordPress. Wix ist ein Online-Website-Builder, der eine Drag-and-Drop-Oberfläche bietet, um Webseiten ohne Code-Kenntnisse zu erstellen. WordPress ist ein leistungsstarkes Content-Management-System (CMS), das über Themes und Plugins verfügt, um das Design und die Funktionalität der Webseite anzupassen.
Es gibt auch Baukästen wie teleportHQ und Nicepage, die speziell darauf ausgelegt sind, HTML-Seiten visuell zu erstellen.
Antleitung: Erstelle eine Gratis Webseite mit Teleport HQGratis Webseite mit TeleportHQ (inkl. Text & Video)
Diese Tools ermöglichen es dir, Webseiten zu entwerfen, ohne Code zu schreiben, und generieren anschließend den entsprechenden HTML- und CSS-Code für dich. Solche Baukästen sind eine gute Alternative für diejenigen, die weniger Zeit in das Erlernen von Webtechnologien investieren möchten, aber dennoch ansprechende und individuelle Webseiten erstellen möchten. Wer lieber gar nichts mit Code zu tun hat, aber pixelgenaue Designs erstellen möchte, der sollte Webflow probieren.
Das Erlernen von HTML und CSS ist nicht mehr unbedingt nötig, aber die Konzepte die man dabei lernt, finden ihre Anwendung auch in verschiedenen Baukästen.
Daher ist es von Vorteil, wenn man sich mit Margin, Padding, und dem Flexbox-Modell vertraut macht.
