Inhalt
1. Einleitung in HTML
Diese HTML Anleitung führt dich in die Welt der Webentwicklung ein und begleitet dich, bis du deine erste eigene Webseite online gestellt hast. Das Hauptziel dieses Artikels ist es, dir das grundlegende Wissen über HTML zu vermitteln und dir Schritt für Schritt bei der Umsetzung deiner eigenen Webseite zu helfen. Wir werden dir konkrete Codebeispiele und Anweisungen zur Verfügung stellen, damit du die Thematik besser verstehen und praktisch anwenden kannst. HTML lernen ist einfach – Es ist weit weniger schwer als eine Sprache zu lernen, da HTML weniger umfangreich ist und da du die dinge sofort ausprobieren musst. Auch ist HTML eher wie Vokabeln lernen als Grammatik mit dem Vorteil, dass es nicht allzu viele Vokabeln gibt. HTML lernen ist kostenlos und kann schnell ausprobiert werden, los geht’s!
HTML (Hypertext Markup Language) ist die Grundlage jeder Webseite und bildet die Struktur und den Inhalt einer Website. Es ist eine unerlässliche Fähigkeit für jeden, der sich mit Webentwicklung beschäftigt, und bildet die Basis für das Erlernen weiterer Technologien wie CSS und JavaScript. Die Kenntnis von HTML ermöglicht dir nicht nur das Erstellen einfacher Webseiten, sondern erleichtert auch das Verständnis komplexerer Webtechnologien und Frameworks.
E-Book: Einfach HTML lernen
Geballtes Praxiswissen auf 45 Seiten
Von den Basics bis hin zu fortgeschrittenen Techniken. In dem Buch lernst du die HTML Grundlagen sowie einen Einblick in CSS kennen. Mit zahlreichen Codebeispielen kannst du direkt selbst ausprobieren, was du gelernt hast. Das E-Book ist ausführlicher als die Artikel auf html-einfach.de
Einführung in HTML / 1.1 Was ist HTML? / 1.2 HTML vs. CSS vs. JavaScript vs. PHP / 1.3 Vorbereitung /1.4 Grundlegende HTML-Struktur / 3. HTML-Elemente und -Tags / 2.1 HTML-Elemente & Attribute / 2.2 Überschriften und Absätze / 2.3 Formatierung von Text / 2.4 Aufzählungen und Listen / 2.5 Verw…
2 Grundlagen von HTML
2.1. Was ist HTML?
HTML steht für Hypertext Markup Language und ist eine standardisierte Auszeichnungssprache, die dazu verwendet wird, Webseiten zu erstellen und zu gestalten. Sie besteht aus einer Reihe von Elementen, die als Tags bezeichnet werden, die die Struktur und den Inhalt einer Webseite definieren. HTML-Tags ermöglichen es dir, Texte, Bilder, Links und andere Elemente auf einer Webseite zu integrieren und anzuzeigen. Wenn dir das alles zu viel wird, schau dich mal hier um: Homepage Baukasten: Auswählen & loslegen!
2.2. Struktur einer HTML-Datei / Das HTML Grundgerüst
Eine typische HTML-Datei besteht aus einer Reihe von Elementen, die eine hierarchische Struktur bilden. Diese Struktur beginnt mit dem Doctype-Deklaration, gefolgt vom öffnenden <html>-Tag, der die gesamte Webseite umfasst. Innerhalb des <html>-Tags gibt es zwei Hauptbereiche: den Kopfbereich (head) und den Körperbereich (body). Der Kopfbereich enthält Metadaten und Informationen, die für die Webseite relevant sind, aber nicht direkt auf der Seite angezeigt werden. Der Körperbereich enthält den sichtbaren Inhalt der Webseite. Im Kopfbereich wirst du beim HTML lernen weniger Zeit verbringen als im Body-Bereich, da du in letzterem den Code schreibst, den du später siehst.
HTML Grundgerüst Code:
<!DOCTYPE html> <html> <head> <title>Meine erste Webseite</title> </head> <body> <h1>Willkommen auf meiner Webseite</h1> <p>Hier ist ein Absatz mit Text.</p> </body> </html>
Öffne den Editor oder Notepad++ und füge den Code ein und speicherst die Datei als „index.html“ ab, kannst du sie mit einem Browser öffnen. Du wirst lediglich eine Überschrift und einen Absatz Text sehen.
2.3 HTML-Tags und Attribute
HTML-Tags sind die Bausteine einer Webseite und definieren die verschiedenen Elemente, aus denen sie besteht. Sie bestehen aus einem öffnenden und einem schließenden Tag, die den Inhalt des Elements einschließen. Einige Tags, wie z.B. das <img>-Tag, sind selbstschließend und benötigen kein schließendes Tag. Attribute sind zusätzliche Informationen, die innerhalb eines Tags angegeben werden können, um dessen Verhalten oder Aussehen zu steuern. Eine Übersicht die meistgenutzten HTML Befehle findest du hier: HTML Befehle und Tags
Beispiel für ein HTML-Tag mit Attributen:
<a href="https://www.html-einfach.de" target="_blank">HTML lernen</a>
2.4 HTML vs. CSS vs. JavaScript und PHP
Während HTML die Struktur und den Inhalt einer Webseite definiert, ist CSS (Cascading Style Sheets) für das Aussehen und Layout einer Webseite verantwortlich. Es ermöglicht es dir, die Farben, Schriftarten, Größen, Abstände und andere visuelle Eigenschaften von HTML-Elementen zu kontrollieren.
JavaScript ist eine Programmiersprache, die verwendet wird, um interaktive und dynamische Elemente auf einer Webseite zu erstellen. Es kann verwendet werden, um Ereignisse zu verarbeiten, Benutzeraktionen zu steuern, Daten zu validieren und vieles mehr.
Während HTML, CSS und JavaScript voneinander unabhängig sind, arbeiten sie zusammen, um eine interaktive und ansprechende Webseite zu erstellen. Die Kombination dieser Technologien ermöglicht es dir, eine Vielzahl von Webprojekten zu erstellen, von einfachen statischen Webseiten bis hin zu komplexen Webanwendungen.
| Sprache | Beschreibung | Verwendung |
|---|---|---|
| HTML | HTML steht für Hypertext Markup Language und ist eine Sprache für die Strukturierung von Inhalten auf einer Webseite. HTML definiert die Elemente einer Webseite wie Überschriften, Absätze, Listen und Links. | Verwendung für die Erstellung von statischen Webseiten. |
| CSS | CSS steht für Cascading Style Sheets und ist eine Sprache für die Gestaltung von Webseiten. CSS definiert das Aussehen einer Webseite, einschließlich der Farben, Schriftarten, Größen und Layouts. | Verwendung für die Gestaltung von Webseiten und zur Trennung von Inhalt und Präsentation. |
| JavaScript | JavaScript ist eine Skriptsprache für die Programmierung von Interaktionen und dynamischen Elementen auf einer Webseite. JavaScript ermöglicht die Erstellung von Funktionen wie Formularvalidierung, animierten Effekten und Benutzerinteraktionen. | Verwendung für die Erstellung von dynamischen Webseiten und zur Steuerung von Benutzerinteraktionen. |
| PHP | PHP steht für Hypertext Preprocessor und ist eine serverseitige Skriptsprache. PHP ermöglicht die Erstellung von dynamischen Webseiten, die auf Benutzereingaben oder Datenbankabfragen reagieren können. | Verwendung für die Erstellung von dynamischen Webseiten, die auf Benutzerinteraktionen oder Datenbankabfragen reagieren. |
Wenn du dich ans Einbinden von CSS in HTML wagst, beachte unsere HTML und CSS Best Practises, auch interessant: HTML Sonderzeichen und HTML Leerzeichen
3. Vorbereitung
3.1. Texteditor und Browserauswahl (kostenlos)
Um mit der HTML Anleitung zur Erstellung von Webseiten zu beginnen, benötigst du einen Texteditor und einen Webbrowser. Ein Texteditor ermöglicht es dir, den Code für deine Webseite zu schreiben und zu bearbeiten, während ein Webbrowser es dir ermöglicht, deine Webseite anzuzeigen und zu testen. Beides gibt es kostenlos im Überfluss.
Es gibt viele Texteditoren und Webbrowser zur Auswahl. Zum HTML lernen empfehlen für den Start Notepad++ in Verbindung mit Google Chrome.
Mehr dazu in unserem Artikel: HTML-Editor
3.2. Verzeichnisstruktur erstellen
Bevor du mit dem Schreiben des Codes beginnst, ist es wichtig, eine klare Verzeichnisstruktur für deine Webseite zu erstellen. Dies erleichtert das Organisieren und Verwalten der Dateien und erleichtert es anderen Entwicklern, sich in deine Arbeit einzufinden.
Ein typisches Verzeichnis für eine einfache HTML-Webseite könnte folgendermaßen aussehen:
- Projektordner
- index.html
- css/
- style.css
- img/
- image.jpg
In diesem Beispiel enthält der Projektordner die HTML-Datei „index.html“, sowie separate Ordner für CSS-Dateien und Bilder. Wird später der Ordner durch einen Browser aufgerufen, sucht der Browser zuerst nach einer Datei namens index.html und öffnet diese automatisch, wenn sie vorhanden ist.
4. Erstellen einer einfachen HTML-Seite
Nachdem du nun die Grundlagen von HTML und die Vorbereitung deines Arbeitsumfeldes kennengelernt hast, können wir mit dem Erstellen einer einfachen HTML-Seite beginnen.
4.1. Dokumenttyp und HTML-Struktur
Jede HTML-Datei beginnt mit einer Doctype-Deklaration, die den Typ des Dokuments angibt, das du erstellst. Dies erleichtert es Webbrowsern, deine Webseite richtig anzuzeigen und zu interpretieren.
Beispiel einer Doctype-Deklaration:
<!DOCTYPE html>
Nach der Doctype-Deklaration fügst du das öffnende <html>-Tag hinzu, um den Anfang der HTML-Datei anzugeben.
<!DOCTYPE html> <html> </html>
4.2. Kopfbereich (head) und Titel
Innerhalb des <html>-Tags gibt es zwei Hauptbereiche: den Kopfbereich (head) und den Körperbereich (body). Der Kopfbereich enthält Metadaten und Informationen, die für die Webseite relevant sind, aber nicht direkt auf der Seite angezeigt werden. Der Körperbereich enthält den sichtbaren Inhalt der Webseite. Im Kopfbereich fügst du den <head>-Tag ein und definierst den Titel der Webseite mit dem <title>-Tag. Der Titel wird in der Registerkarte des Webbrowser angezeigt und sollte prägnant und aussagekräftig sein.
<!DOCTYPE html>
<html>
<head>
<title>Meine erste Webseite</title>
</head>
</html>
Vergesse nicht dein Favicon in HTML einzubinden.
4.3. Body-Bereich und Inhalt
Im Körperbereich fügst du den <body>-Tag ein und fügst den Inhalt deiner Webseite hinzu. Einige grundlegende HTML-Elemente, die du für den Anfang zum HTML lernen benötigst, sind:
- Überschriften (<h1>-<h6>): für Überschriften und Unterüberschriften
- Paragraphen (<p>): für Textabsätze
- Listen (<ul> und <li>): für Aufzählungen
- Links (<a>): für Verlinkungen
Hier ist ein Beispiel für eine einfache HTML-Seite, die eine Überschrift, einen Absatz und eine Aufzählung enthält:
<!DOCTYPE html>
<html>
<head>
<title>Meine erste Webseite</title>
</head>
<body>
<h1>Willkommen auf meiner ersten Webseite</h1>
<p>Hier ist ein Absatz mit Text.</p>
<ul>
<li>Listenelement 1</li>
<li>Listenelement 2</li>
<li>Listenelement 3</li>
</ul>
</body>
</html>
4.4. CSS einbinden
Um das Aussehen deiner Webseite zu gestalten, benötigst du CSS. Du kannst CSS entweder im Kopfbereich der HTML-Datei einbinden oder in einer separaten CSS-Datei speichern und sie von dort aus einbinden. Um CSS im Kopfbereich der HTML-Datei einzubinden, fügst du einen <style>-Tag innerhalb des <head>-Tags hinzu und definierst die CSS-Regeln.
<!DOCTYPE html>
<html>
<head>
<title>Meine erste Webseite</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
color: #008080;
}
</style>
</head>
<body>
<h1>Willkommen auf meiner ersten Webseite</h1>
<p>Hier ist ein Absatz mit Text.</p>
<ul>
<li>Listenelement 1</li>
<li>Listenelement 2</li>
<li>Listenelement 3</li>
</ul>
</body>
</html>
In diesem Beispiel haben wir den Hintergrund der Webseite auf eine hellgraue Farbe gesetzt und die Schriftart des Körpers auf Arial festgelegt. Wir haben auch die Farbe der Überschrift auf eine türkisfarbene Farbe (#008080) geändert. Alternativ kannst du CSS auch in einer separaten CSS-Datei speichern und sie in der HTML-Datei einbinden. Erstelle dazu eine neue Datei mit der Erweiterung „.css“ und speichere sie im Ordner deiner Webseite. Füge dann im <head>-Bereich der HTML-Datei ein <link>-Tag ein und gib den Pfad zur CSS-Datei an.
Beispiel für eine HTML-Datei, die eine separate CSS-Datei einbindet:
<!DOCTYPE html>
<html>
<head>
<title>Meine erste Webseite</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Willkommen auf meiner ersten Webseite</h1>
<p>Hier ist ein Absatz mit Text.</p>
<ul>
<li>Listenelement 1</li>
<li>Listenelement 2</li>
<li>Listenelement 3</li>
</ul>
</body>
</html>
Im Beispiel oben haben wir das <link>-Tag verwendet, um die CSS-Datei „style.css“ einzubinden, die sich im Ordner „css“ befindet. Die CSS-Datei enthält die CSS-Regeln, die das Aussehen unserer Webseite steuern. Wir empfehlen soweit möglich ausschließlich diese Methode zu verwenden. So stellst du sicher, dass deine HTML Datei möglichst überschaubar bleibt und kannst an einer zentralen Stelle (in der externen style.css Datei) Änderungen vornehmen, welche auf allen Seiten Wirkung zeigen, die mit der CSS-Datei verknüpft sind.
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
color: #008080;
}
Mit CSS kannst du das Aussehen deiner Webseite weiter anpassen und gestalten, indem du Farben, Schriftarten, Abstände und andere Eigenschaften steuerst. Indem du HTML und CSS kombinierst, kannst du eine ansprechende und professionell aussehende Webseite erstellen. Herzlichen Glückwunsch, du hast deine erste HTML-Seite erstellt! In den nächsten Kapiteln werden wir tiefer in die Thematik eintauchen und dir helfen, eine vollständige Webseite mit mehreren Seiten zu erstellen. Entsprechend darf in der HTML Anleitung CSS nicht fehlen!
4.5 Erstellen von Links
Links sind ein wichtiger Bestandteil von Webseiten, da sie es den Benutzern ermöglichen, auf andere Seiten oder Abschnitte derselben Seite zu gelangen. Um einen Link zu erstellen, verwenden wir das <a>-Tag.
Beispiel für einen einfachen Link:
<a href="https://www.html-einfach.de">HTML lernen</a>
In diesem Beispiel verweist der Link auf die URL „https://www.html-einfach.de“ und der Text „HTML lernen“ wird als anklickbarer Text angezeigt. Du kannst auch interne Links innerhalb deiner Webseite erstellen, um Benutzern das Navigieren innerhalb deiner Webseite zu erleichtern. Um einen internen Link zu erstellen, musst du die ID des Elements angeben, auf das du verlinken möchtest. Eine Auswirkung bzw. das Springen zum internen Link wirst du erst gut erkennen können, wenn dazwischen einiges an Content ist.
Beispiel für einen internen Link:
<a href="#abschnitt-2">Zum Abschnitt 2 springen</a> ... <h2 id="abschnitt-2">Abschnitt 2</h2> <p>Hier ist der Text für Abschnitt 2.</p>
In diesem Beispiel verweist der Link auf die ID „abschnitt-2“, die dem <h2>-Element für Abschnitt 2 zugewiesen ist. Wenn ein Benutzer auf den Link klickt, wird er automatisch zum Abschnitt 2 der Seite gescrollt.
4.6. Erstellen von Bildern bzw. Bilder in HTML einbinden
Bilder sind ein weiteres wichtiges Element von Webseiten und können dazu beitragen, die visuelle Anziehungskraft deiner Webseite zu erhöhen. Um ein Bild in eine Webseite einzufügen, verwenden wir das <img>-Tag.
Beispiel für ein Bild-Tag:
<img src="img/bild.jpg" alt="Ein Beispielbild">
In diesem Beispiel wird das Bild „bild.jpg“ aus dem Ordner „img“ geladen und als „Ein Beispielbild“ beschrieben, falls das Bild nicht geladen werden kann oder der Benutzer eine Screenreader-Software verwendet.
Du kannst auch weitere Attribute verwenden, um die Größe, Ausrichtung und Beschriftung des Bildes zu steuern.
<img src="img/bild.jpg" alt="Ein Beispielbild" width="300" height="200" align="right" title="Das ist ein Beispielbild">
In diesem Beispiel haben wir das Bild auf eine Breite von 300 Pixeln und eine Höhe von 200 Pixeln beschränkt, es rechts ausgerichtet und einen Titel hinzugefügt, der beim Überfahren mit dem Mauszeiger angezeigt wird. Wir empfehlen jedoch möglichst viel per CSS zu steuern, da du damit später mehr Möglichkeiten hast und flexibler bist.
Herzlichen Glückwunsch, du hast nun gelernt, wie man Links und Bilder in eine Webseite einfügt! Im nächsten Kapitel werden wir lernen, wie man eine mehrseitige Webseite erstellt.
4.7. Erstellen einer mehrseitigen Webseite
Eine mehrseitige Webseite besteht aus mehreren HTML-Seiten, die miteinander verlinkt sind. Dies ermöglicht es dir, eine Webseite mit mehreren Abschnitten und Unterseiten zu erstellen. Um eine mehrseitige Webseite zu erstellen, musst du zunächst eine Startseite erstellen, die als Navigationspunkt für die anderen Seiten dient. Erstelle dazu eine neue HTML-Datei und nenne sie index.html.
In der index.html-Datei kannst du eine Navigationsleiste mit Links zu den anderen Seiten erstellen. Hier ist ein Beispiel für eine einfache Navigationsleiste mit Links zu zwei Unterseiten:
<!DOCTYPE html>
<html>
<head>
<title>Meine mehrseitige Webseite</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="seite1.html">Unterseite 1</a></li>
<li><a href="seite2.html">Unterseite 2</a></li>
</ul>
</nav>
<h1>Willkommen auf meiner mehrseitigen Webseite</h1>
<p>Hier ist der Inhalt für die Startseite.</p>
</body>
</html>
In diesem Beispiel haben wir eine Navigationsleiste mit Links zu den Seiten „index.html“, „seite1.html“ und „seite2.html“ erstellt. Wir haben auch den Inhalt für die Startseite hinzugefügt. Die zusätzlichen Seiten kannst du wie auch die index.html-Datei in Notepad++ erstellen und im selben Ordner speichern. Möchtest du sie in einem anderen Ordner speichern, füge den Ordnernamen wie folgt hinzu:
<li><a href="ordner/seite1.html">Unterseite 1</a></li>
Erstelle nun die anderen HTML-Seiten und füge sie in das Verzeichnis deiner Webseite ein. Vergiss nicht, sie in der Navigationsleiste zu verlinken, damit Benutzer darauf zugreifen können. Nun hast du die wichtigsten Dinge zum HTML lernen gelernt und ein grobes Verständnis für Aufbau von HTML-Dateien und deren Struktur und Tags bekommen. Wir haben statische HTML Seiten erstellt, also Seiten, die bei jedem Aufruf exakt gleich sind und bei denen Änderungen in beispielsweise dem Menü auf jeder Seite gemacht werden müssen. Mit der Programmiersprache PHP oder Javascript oder einem CMS (Content Management System) hast du später die Möglichkeit Änderungen schneller durchzuführen.
5. HTML5 und „neue“ Elemente
Mit HTML5 wurden viele neue Elemente eingeführt, die es Webentwicklern erleichtern, Webseiten mit einer besseren Struktur und mehr Funktionalität zu erstellen. In diesem Kapitel werden wir uns einige der wichtigsten neuen Elemente ansehen.
5.1. Neue Semantische Elemente
HTML5 hat viele neue semantische Elemente eingeführt, die dazu beitragen, den Inhalt einer Webseite besser zu strukturieren. Hier sind einige der wichtigsten neuen semantischen Elemente:
<header>: Definiert den oberen Bereich einer Webseite, der oft das Logo und die Hauptnavigation enthält.<footer>: Definiert den unteren Bereich einer Webseite, der oft Links zu rechtlichen Informationen und Kontaktinformationen enthält.<nav>: Definiert eine Navigationsleiste für eine Webseite.<article>: Definiert einen in sich geschlossenen Artikel oder Abschnitt einer Webseite.<section>: Definiert einen Abschnitt einer Webseite.<aside>: Definiert einen Bereich einer Webseite, der für zusätzliche Informationen oder Anzeigen verwendet werden kann.
Durch die Verwendung dieser neuen semantischen Elemente kannst du deine Webseite besser strukturieren und es den Suchmaschinen erleichtern, den Inhalt deiner Seite zu verstehen.
5.2 Multimedia-Elemente
HTML5 hat auch neue Multimedia-Elemente eingeführt, die es Webentwicklern ermöglichen, Audio- und Videoinhalte direkt in eine Webseite einzubetten. Hier sind einige der wichtigsten neuen Multimedia-Elemente:
<audio>: Ermöglicht das Einbetten von Audioinhalten in eine Webseite.<video>: Ermöglicht das Einbetten von Videoinhalten in eine Webseite.
Durch die Verwendung dieser neuen Multimedia-Elemente kannst du deine Webseite interaktiver und ansprechender gestalten.
5.3. Weitere HTML5-Elemente
HTML5 hat auch eine Reihe von weiteren Elementen eingeführt, die Webentwicklern mehr Möglichkeiten zur Gestaltung von Webseiten geben. Hier sind einige der wichtigsten neuen HTML5-Elemente:
<canvas>: Ermöglicht das Erstellen von Grafiken und Animationen auf einer Webseite.<details>: Ermöglicht das Erstellen von Details, die bei Bedarf auf einer Webseite angezeigt werden können.<datalist>: Ermöglicht das Erstellen von Auswahllisten für Formulareingaben.
Durch die Verwendung dieser neuen HTML5-Elemente kannst du deine Webseiten funktionaler und interaktiver gestalten.
6. Einführung in CSS
Cascading Style Sheets (CSS) sind eine Sprache zur Gestaltung von Webseiten und ermöglichen die Trennung von Inhalt und Präsentation. In diesem Kapitel werden wir uns mit den Grundlagen von CSS vertraut machen und lernen, wie man es verwendet, um Webseiten zu gestalten.
6.1. Was ist CSS?
CSS ist eine Stylesheet-Sprache, die verwendet wird, um das Aussehen und Layout einer Webseite zu definieren. Mit CSS können Webentwickler das Aussehen einer Webseite unabhängig von ihrem Inhalt steuern. Das bedeutet, dass das Layout und Design einer Webseite in einer separaten Datei definiert werden können, ohne dass der Inhalt der Seite geändert werden muss.
6.2. Inline, internes und externes CSS
Es gibt drei Arten von CSS-Stilen: Inline, internes und externes CSS.
- Inline-CSS wird direkt in den HTML-Code eingefügt und definiert das Aussehen eines einzelnen Elements.
- Internes CSS wird in einem
<style>-Tag im<head>-Bereich der HTML-Datei definiert und gilt für alle Elemente auf der Seite. - Externes CSS wird in einer separaten CSS-Datei definiert und kann auf mehreren Seiten einer Webseite verwendet werden.
Die Verwendung von externem CSS wird empfohlen, da es die Gestaltung einer Webseite konsistent und leichter zu verwalten macht.
6.3. Selektoren und Eigenschaften
CSS besteht aus Selektoren und Eigenschaften. Selektoren definieren, auf welche HTML-Elemente die Eigenschaften angewendet werden sollen, und Eigenschaften definieren das Aussehen dieser Elemente.
Hier ist ein Beispiel für CSS-Code, der ein <h1>-Element formatiert:
h1 {
color: blue;
font-size: 24px;
}
In diesem Beispiel ist h1 der Selektor und color und font-size sind Eigenschaften. Der Code definiert, dass alle <h1>-Elemente auf der Seite blau und mit einer Schriftgröße von 24 Pixeln angezeigt werden.
6.4. Beispiel: Grundlegende Formatierung und Styling
Hier ist ein Beispiel für die Verwendung von CSS, um eine einfache HTML-Seite zu formatieren und zu stylen:
<!DOCTYPE html>
<html>
<head>
<title>Meine Webseite</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Meine Webseite</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<main>
<section>
<h2>Willkommen auf unserer Webseite</h2>
<p>Hier finden Sie Informationen über unser Unternehmen und unsere Produkte.</p>
</section>
<section>
<h2>Unsere Produkte</h2>
<ul>
<li>Produkt 1</li>
<li>Produkt 2</li>
<li>Produkt 3</li>
</ul>
</section>
</main>
<footer>
<p>© 2023 Meine Firma GmbH</p>
</footer>
</body>
</html>
In diesem Beispiel haben wir eine HTML-Datei erstellt, die aus einem Header, einer Navigationsleiste, einem Hauptbereich und einem Footer besteht. Wir haben auch eine externe CSS-Datei hinzugefügt, um das Styling zu definieren.
Hier ist der CSS-Code, den wir in der Datei „style.css“ verwenden, um das Aussehen der Seite zu definieren:
/* Allgemeine Formatierung */
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
/* Header-Styling */
header {
background-color: #333;
color: #fff;
padding: 20px;
}
h1 {
margin: 0;
}
/* Navigationsleisten-Styling */
nav {
background-color: #f2f2f2;
padding: 10px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 10px;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
color: #000;
}
/* Hauptbereich-Styling */
section {
margin-bottom: 20px;
}
h2 {
margin-top: 0;
}
ul {
margin-left: 20px;
}
/* Footer-Styling */
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
In diesem Beispiel haben wir das Styling der verschiedenen Elemente auf der Seite definiert, darunter den Hintergrund- und Textfarben des Headers und Footers, das Layout der Navigationsleiste und das Styling der Überschriften und Listen im Hauptbereich.
Durch die Verwendung von CSS können Webentwickler das Aussehen und Layout einer Webseite unabhängig von ihrem Inhalt steuern und eine konsistente Gestaltung auf der gesamten Seite gewährleisten.
7. Grundlagen des Responsive Webdesigns
Mit dem Aufkommen von mobilen Geräten wie Smartphones und Tablets ist es immer wichtiger geworden, Webseiten zu gestalten, die auf allen Geräten gut aussehen und funktionieren. In diesem Kapitel werden wir die Grundlagen des Responsive Webdesigns verstehen und lernen, wie man Webseiten erstellt, die auf verschiedenen Bildschirmgrößen gut aussehen.
7.1. Was ist Responsive Webdesign?
Responsive Webdesign bedeutet, dass das Design einer Webseite so gestaltet ist, dass es sich automatisch an die Bildschirmgröße und -orientierung des Geräts anpasst, auf dem es angezeigt wird. Ziel ist es, den Nutzern auf allen Geräten – ob Smartphone, Tablet, Laptop oder Desktop – ein optimales Nutzungserlebnis zu bieten. Dazu gehört unter anderem…
- Fließende Layouts: Anstelle von festen Pixelbreiten werden oft relative Einheiten wie Prozentsätze verwendet, damit das Layout sich dynamisch ändert.
- Flexible Bilder: Bilder werden so skaliert, dass sie in der jeweiligen Bildschirmgröße gut dargestellt werden, ohne den Inhalt zu überdecken oder zu klein zu sein.
- Media Queries: Dies sind CSS-Techniken, mit denen man Regeln für spezifische Geräteeigenschaften festlegen kann, z.B. „wenn die Bildschirmbreite weniger als 600px beträgt, mache den Text größer“. So kann das Design für verschiedene Bildschirmgrößen angepasst werden.
- Mobile First: Ein Ansatz, bei dem zuerst für mobile Geräte entworfen und dann für größere Bildschirme erweitert wird. Das ist besonders wichtig, da immer mehr Menschen zuerst mit Mobilgeräten auf Webinhalte zugreifen.
Ein responsive Design sorgt nicht nur für eine bessere Benutzererfahrung, sondern kann auch helfen, bessere Platzierungen in Suchmaschinen zu erreichen, da diese oft mobile-freundliche Seiten bevorzugen.
7.2. Viewport-Metadaten
Viewport-Metadaten sind ein wichtiger Teil des Responsive Webdesigns. Sie helfen dabei, die Größe und Skalierung einer Webseite auf dem Bildschirm eines mobilen Geräts zu steuern. Die Verwendung von Viewport-Metadaten ist wichtig, da sie es ermöglichen, dass eine Webseite auf verschiedenen Geräten gut dargestellt wird.
Hier ist ein Beispiel für Viewport-Metadaten:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In diesem Beispiel gibt die Angabe width=device-width an, dass die Breite der Webseite der Breite des Geräts entsprechen soll. Die Angabe initial-scale=1.0 legt fest, dass die Webseite standardmäßig in der tatsächlichen Größe angezeigt wird.
7.3. Media Queries
Media Queries sind ein weiteres wichtiges Konzept im Responsive Webdesign. Sie ermöglichen die Anwendung unterschiedlicher CSS-Regeln auf verschiedene Geräte und Bildschirmgrößen. Mit Media Queries kann man beispielsweise das Layout und Design einer Webseite ändern, je nachdem, ob sie auf einem Desktop-Computer oder einem Smartphone angezeigt wird.
Hier ist ein Beispiel für Media Queries:
/* Regeln für Desktop-Computer */
@media screen and (min-width: 992px) {
/* CSS-Regeln für Desktop-Computer */
}
/* Regeln für Tablets */
@media screen and (min-width: 768px) and (max-width: 991px) {
/* CSS-Regeln für Tablets */
}
/* Regeln für Smartphones */
@media screen and (max-width: 767px) {
/* CSS-Regeln für Smartphones */
}
In diesem Beispiel haben wir Media Queries verwendet, um unterschiedliche CSS-Regeln für Desktop-Computer, Tablets und Smartphones zu definieren. Die CSS-Regeln innerhalb jedes Media Queries werden nur auf Geräten mit den angegebenen Bildschirmgrößen angewendet.
Mehr zu Media Queries findest du hier: Responsive Webdesign mit HTML & CSS
7.4. Flexbox und Grid-Layout
Flexbox und Grid-Layout sind CSS-Layout-Technologien, die speziell für das Responsive Webdesign entwickelt wurden. Flexbox ermöglicht es, Elemente in einer Zeile oder Spalte anzuordnen und sie auf verschiedene Arten zu positionieren. Grid-Layout ist eine leistungsstarke Möglichkeit, um komplexe Layouts auf einer Seite zu erstellen, indem man die Seite in ein Raster einteilt.
Hier ist ein Beispiel für die Verwendung von Flexbox:
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
margin: 10px;
}
In diesem Beispiel haben wir eine Flexbox-Layout für eine Container-Element definiert, die drei Elemente in einer Zeile anordnet. justify-content: space-between sorgt dafür, dass der Platz zwischen den Elementen gleichmäßig verteilt wird. align-items: center zentriert die Elemente vertikal.
Hier ist ein Beispiel für die Verwendung von Grid-Layout:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.item {
background-color: #f2f2f2;
padding: 10px;
}
In diesem Beispiel haben wir eine Grid-Layout für eine Container-Element definiert, die drei Elemente in einer Zeile anordnet. grid-template-columns: repeat(3, 1fr) sorgt dafür, dass die Container-Elemente gleichmäßig auf drei Spalten aufgeteilt werden. grid-gap: 10px fügt einen Abstand zwischen den Elementen hinzu.
Flexbox und Grid-Layout sind leistungsstarke Tools für das Responsive Webdesign und erleichtern die Erstellung von Layouts, die auf verschiedene Geräte und Bildschirmgrößen reagieren können.
8. Veröffentlichen der eigenen Webseite
Sobald Sie Ihre eigene Webseite erstellt haben, müssen Sie sie veröffentlichen, damit sie für andere sichtbar wird. In diesem Kapitel werden wir besprechen, wie Sie Ihre Webseite auf einen Webserver hochladen und veröffentlichen können.
Ich habe dir eine Schritt-für-Schritt Anleitung zusammengestellt, wie du eine Webseite im Internet veröffentlichen kannst und führe dich detailliert durch den Prozess.
Bitte beachte noch die Rechtliche Stolperfallen bei der eigenen Homepage.
8.1. Auswahl eines Domainnamens und Webhosting (nicht mehr kostenlos)
Sobald du deine eigene Webseite erstellt hast, musst du sie veröffentlichen, damit sie für andere sichtbar wird. In diesem Kapitel werden wir besprechen, wie du deine Webseite auf einen Webserver hochladen und veröffentlichen kannst. Bevor du deine Webseite veröffentlichen kannst, benötigst du eine Domain und ein Webhosting. Eine Domain ist die Adresse, unter der deine Webseite im Internet erreichbar ist (z.B. www.html-einfach.de), während ein Webhosting ein Server ist, auf dem deine Webseite gespeichert wird.
In dem Artikel helfen wir dir bei der Auswahl: Den richtigen Webhoster wählen
Es gibt viele Webhosting-Anbieter zur Auswahl. Diese Webseite ist bei dem Anbieter Alfahosting* gehostet und wir sind seit 2008 durchgehend zufrieden. Vermutlich gib es hier und dort Anbieter, bei denen man jährlich ein paar Euro sparen könnte, jedoch freue ich mich jedes Mal über den unglaublich schnellen Support, der auch an Wochenenden und nachts erstaunlich schnell reagiert. Du kannst auch eine Domain über Alfahosting* registrieren oder eine bereits vorhandene Domain verwenden.
8.2. Hochladen der Dateien per FTP
Sobald du deine Domain und dein Webhosting eingerichtet hast, musst du deine Webseite-Dateien auf den Server hochladen. Dies geschieht normalerweise über FTP (File Transfer Protocol).
Alfahosting* bietet verschiedene Möglichkeiten, um auf deinen Webserver zuzugreifen, einschließlich FTP-Zugriff und einer webbasierten Dateiverwaltung. Die genauen Anweisungen zur Übertragung deiner Dateien können je nach Webhosting-Anbieter variieren, aber normalerweise benötigst du einen FTP-Client wie FileZilla, um deine Dateien auf den Server zu übertragen. Die Informationen, die du in deinem FTP-Programm einstellen musst, bekommst du im besten Fall auch direkt von deinem Hoster.
8.3. Testen und Fehlerbehebung
Nachdem du deine Dateien auf den Server hochgeladen hast, ist es wichtig, dass du deine Webseite testest, um sicherzustellen, dass sie richtig funktioniert. Überprüfe die Links und stelle sicher, dass alle Bilder und Videos geladen werden.
Es ist auch wichtig, deine Webseite auf verschiedenen Geräten und Bildschirmgrößen zu testen, um sicherzustellen, dass sie auf allen Geräten gut aussieht und funktioniert. Stelle sicher, dass du alle Fehler behebst, bevor du deine Webseite offiziell veröffentlichst. Wenn du Schwierigkeiten beim Hochladen oder Testen deiner Webseite hast, solltest du dich an den Support deines Webhosting-Anbieters wenden.
8.4 Suchmaschinenoptimierung
Optimiere den Aufbau deiner Seiten, den Inhalt, die Überschriftenstruktur um bei Google besser gefunden zu werden. Achte auch auf schnellere Ladezeiten und einen sauberen technischen Aufbau. Mehr dazu habe ich dir im folgenden Artikel zusammengeschrieben: SEO-Guide (Suchmaschinenoptimierung)
Wenn du Interesse an weiterführenden Anleitungen hast, schaue im Webdesign Blog vorbei!
