Grundsätzliches zum Internet, zu Computern und zu Websites
Erstmals veröffentlicht im: Dezember 2024
Aktualisiert am: 27.1.2025
Jeder der lesen, ein wenig rechnen und schreiben kann, kann mit Ausdauer und Fleiß lernen, Webseiten zu erstellen, um sich mit deren Hilfe im Internet anderen mitzuteilen oder um sich kreativ zu betätigen. Mit den wenigen HTML-und-CSS-Codes, die ich kenne und in dieser Webseite vorstelle, kann man schon brauchbare und ansehnliche statische Webseiten erstellen. Statische Webseiten (im Gegensatz zu dynamischen) beinhalten keine aufwändigen und komplizierten Programmierungen, sondern nur Codes für Texte, Bilder und Links. Man kann auch PDF-Dateien in Websites einbauen.
Beim Erstellen von Webseiten können wir uns optimal selber verwirklichen, ohne unser Arbeits-Zimmer zu verlassen. Die Kosten sind überschaubar. Mehr oder weniger leistungsfähige Computer haben heute sowieso die meisten. Ich glaube nicht, dass es (aktuell 2025) noch viele Haushalte ohne mindestens einen PC gibt. Ich selber habe zwei Notebooks. Einen für die tägliche (HTML und CSS)-Arbeit und einen in Reserve für Notfälle und Experimente. In jedem Computer-Betriebs-System (Windows, Mac, Linux) gibt es Editoren kostenlos, mit denen man HTML-und-CSS-Codes schreiben kann. Webspace kann man sich für einige Euro im Monat mieten.
Zudem gibt es im Internet sogenannte Homepage-Baukästen kostenlos, mit denen man auch ohne HTML-und-CSS-Kenntnisse Webseiten erstellen und manchmal sogar veröffentlichen kann. Vorsicht aber vor damit einher-gehenden Abhängigkeiten! Weiß ich, was die Betreiber von solchen Homepage-Baukästen nächste Woche, in zwei Monaten oder in einem halben Jahr mit ihren Homepage-Internet-Baukästen machen? Quellcodes, die von solchen Homepage-Baukästen produziert werden, sind oft unübersichtlich-komplex und verwirrend, was Korrekturen von Hand erschwert ober sogar unmöglich macht.
Muss man Websites eigentlich im Internet veröffentlichen, um davon profitieren zu können? Nein, natürlich nicht! Ich kann eine Website mit einem Editor in meinem PC erstellen, im Browser jederzeit betrachten und ständig daran herum basteln. Ein gutes Mittel gegen Langeweile!
Aufmerksame Webseiten-Bastler können sogar feststellen, dass sie während der Arbeit an ihren Webseiten viel über Spiritualität und Esoterik lernen können. Das erstaunt oder befremdet Sie? Ich kann Ihnen versichern, dass dem so ist! HTML und CSS ist Magie! Aus Buchstaben, Sonderzeichen oder Zahlen werden Bilder, Text-Strukturen oder Farben.
Webseite, Homepage oder Website?
Eine Website (Internet-Präsenz) besteht aus einigen, mehreren oder vielen Webseiten.
Homepage ist die Startseite (index.html) einer Website.
Eine Website beinhaltet meist:
Bilder, Grafiken und Icons- Mehr oder weniger viele Webseiten
- CSS-Gestaltungs-Datei/en
- Eventuell auch PDF-Dateien
Ich habe mir deshalb für die laufende Arbeit an meiner Website einen 
Windows-Ordner erstellt, den ich: Website benannt habe. In diesem habe ich drei Unter-Ordner abgelegt:
- bilder
- css
- pdf
Im Ordner: bilder habe ich alle Symbole, Icons und Grafiken abgelegt.
Im Ordner: css habe ich die CSS-Datei abgelegt.
Im Ordner: pdf habe ich die PDF-Dateien abgelegt.
Die einzelnen Webseiten meiner Website habe ich auch im Ordner: Website abgelegt.
Den Ordner Website habe ich wiederum in einem (Arbeits)-Ordner abgelegt, den ich nach dem jeweiligen Datum benenne. Besagten (Arbeits)-Ordner sichere ich regelmäßig auf einem USB-Stick. Im Arbeits-Ordner habe ich noch andere wichtige Dateien, Bilder, Icons und so weiter abgelegt.
Am besten schreibt man HTML-Codes mit kleinen Buchstaben.
- HTML-Codes werden in sogenannten Editoren geschrieben!
- Gerne auch im recht spartanischen Windows-Editor.
- Spezielle HTML-Editoren bieten aber mehr Komfort.
- Editoren sind Softwares für das Schreiben von (HTML und CSS)-Codes.
Editor-Seiten (mit HTML-Codes) werden zu Webseiten, wenn sie mit der Codierung: UTF-8 und der Endung: .html abgespeichert werden. Im aktuellen (2024) Windows-Editor und im Phoenix-Code-Editor ist UTF-8 voreingestellt.
Namen für Webseiten sind frei. Sie sollen aber weder Umlaute noch Leerzeichen enthalten.
Ich bin mir nicht sicher, ob Namen von Webseiten Sonderzeichen enthalten dürfen. Ich schreibe vorsorglich keine rein.
index.html heißt die Startseite (Homepage) einer Website (Internet-Präsenz).
Jeder HTML-Code wird mit diesem Zeichen < geöffent und mit diesem > geschlossen. Genügend Beispiele finden Sie im weiteren Text. Im schließenden Klammer-Zeichen wird noch ein / eingeschoben. Beispiel → <p></p>.
Einzelne Textblöcke werden so codiert: <p>Text, Text, Text, Text</p>
Grundsätzlich wird alles Geschriebene in Webseiten in passende HTML-Codes gesetzt!
Die HTML5-Grund-Struktur
In Mobil-Telefonen sieht der sehr lange Viewport-Code im HTML5-Grund-Gerüst, mit hässlichen Leerstellen, "verzerrt" aus. Das bekomme ich nicht besser hin. Beim HTML-Schreiben kann man so lange Codezeilen natürlich in eine Zeile schreiben. Der Viewport-Code sorgt dafür, dass Webseiten in Displays von Mobil-Telefonen einigermaßen übersichtlich dargestellt werden.
Diese HTML-Grundstruktur können Sie kopieren und in eigenen Webseiten verwenden. Sie bleibt immer gleich. Nur die Inhalte ändern sich je nach Webseite. <!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> </head> <body> <header></header> <nav></nav> <main></main> <footer></footer> </body> </html>
Wenn Sie die Body-Bereiche von Webseiten in die Bereiche: → header, nav, main und footer unterteilen und Überschriften sowie diesen Code: → <title></title> im Sinne der Erfinder einsetzen, tun Sie schon viel Gutes für die Suchmaschinen-Optimierung Ihrer Webseiten. Der Code → <title>Um was geht es in der Webseite?</title> erscheint in den Such-Ergebnissen von Suchmaschinen.
In den Header-Bereich sollte die h1-Haupt-Überschrift einer Webseite eingefügt werden → Eine kurze Zusammenfassung des Webseiten-Themas.
Jede Webseite sollte nur eine h1-Überschrift haben.
In den übrigen Überschriften sollten wichtige Stichwörter zum Webseiten-Thema untergebracht werden. Das mit den Stichwörtern in Überschriften aber nicht übertreiben! Jeder größere Artikel in einer Webseite sollte eine h2-Überschrift erhalten. Einzelne Textblöcke eines Artikels sollten an geeigneten Stellen h3-Überschriften erhalten und so weiter. Ich verwende in meinen Webseiten nur Überschriften von: h1 bis h4. Damit komme ich gut über die Runden.
doctype = Dokumenten-Typ. Eine HTML-5-Webseite.
lang="de" = Eine deutsch-sprachige Webseite.
charset="utf-8" = Zeichensatz, Zeichen-Codierung.
head = Platz für Infos für Suchmaschinen und Browser.
title = Titel einer Webseite. Zusammenfassung. Einige Worte.
body = Übergeordneter Inhalts-Bereich.
header = Platz für die Haupt-Überschrift und ein Webseiten-Logo.
nav = Platz für weiter-führende Links. Navigation.
main = Platz für die eigentlichen Webseiten-Inhalte.
footer = Platz für: Impressum-(Link), E-Mail-Adresse, Kontakt-(Link), Datenschutz-(Link)
Wichtige HTML-Komponenten
Ein weiter-führender Link, innerhalb einer Website, wird so codiert:
<a href="webseite.html">Linktext</a>
Ein Bild in einem Link (Anstatt einem Linktext wird ein Bild-Code eingefügt):
<a href="webseite.html"><img src="bilder/webdesign.svg" alt="Ein bunter Computer" width="175" height="125"></a>
Ein weiter-führender Link, zu einer anderen Website, wird so codiert:
<a href="https://www.website.de">Linktext</a>
Ein Code (im Head-Bereich) für ein Favicon sieht so aus:
<link rel="icon" href="favicon.ico">
Favicon-Generator
Ein Code (im Head-Bereich) für eine CSS-Datei sieht so aus:
<link href="css/style.css" rel="stylesheet">
Ein Code für ein Bild, Icon oder Grafik sieht so aus:
<img src="Ordnernamen/bild.svg" alt="Bild-Beschreibung" width="Breite" height="Höhe">
Neuerdings erstelle ich Icons und Grafiken, zum Beispiel astrologische Symbole, mit dem SVG-Format. SVG-Icons und Grafiken sind "leichtgewichtiger" als andere. Zuerst mache ich die Icons und Grafiken mit Paint und dem PNG-Format. Dann wandle ich sie mit: der Software hinter diesem Link in SVG-Grafiken um. Welchen Sinn der → alt-Code hat erschließt sich mir nicht! Er scheint aber wichtig zu sein. Zumindest behaupten das Fachleute im Internet übereinstimmend. Mit → width und height kann man Bilder vergrößern oder verkleinern ohne das Bild grundsätzlich zu verändern.
Mit: div kann man einen "Container/Behälter" erzeugen, den man mit CSS-Codes stylen und mit Inhalten füllen kann:
Ein blauer Rahmen: <div style="border: 2px solid blue;">Inhalt, Text, Inhalt</div>
Mit: span kann man einzelne Wörter oder Zeilen stylen:
Gestalten der Schrift-Größe: <span style="font-size: 1rem">Inhalt, Text, Inhalt</span>
Worte oder Zeilen farblich gestalten:
<span style="color: #0000FF">Inhalt, Text, Inhalt</span>
Alternativ zum Zahlen-Farb-Code: #0000FF kann man auch den Farbnamen angeben: blue.
Farbiger (Text)-Hintergrund:
<span style="background-color: blue">Inhalt, Text, Inhalt</span>
Einige CSS-Codes
Mit HTML-Codes werden Webseiten strukturiert und in verschiedene Bereiche aufgeteilt.
Mit CSS-Codes werden HTML-Elemente (Überschriften, Listen, Tabellen, Webseiten-Bereiche und so weiter) gestaltet.
Man kann CSS-Codes direkt in HTML-Elemente einbauen:
Beispiel anhand einer H2-Überschrift: <h2 style="font-family: sans-serif;"></h2>.
Man kann sie im Head-Bereich einer Webseite zentral so erfassen:
<head>
<style>
CSS-Anweisungen
</style>
</head>
Man kann sie auch in externe CSS-Dateien auslagern.
Eine CSS-Datei ist eine normale Editor-Seite, die mit der Endung: css abgespeichert wird.
Meine CSS-Datei heißt: style.css.
Der Ordner, in dem sich meine CSS-Datei befindet, heißt: css.
CSS-Codes in einer CSS-Datei sehen so aus:
Mögliche Gestaltung des Body-Bereiches:
Für alle Webseiten einer Website!
body {
max-width: 67%; (Breite: 67% der Bildschirm-Breite)
margin: 0 auto; (Mittige Ausrichtung)
line-height: 1.4rem; (Zeilen-Abstand)
font-family: system-ui, sans-serif; (font-family: Schriftart)
}
system-ui → Jeweilige Betriebs-System-Schrift.
sans-serif → Serifen-freie Schrift-Arten: Beispiele: arial, calibri oder verdana.
Eine Mobil-Telefon-taugliche (reponsive) Navigations-Leiste codieren
Seit Smart-Phones und iPhones unser Leben bereichern (oder komplizierter als früher machen) stehen Webmaster vor dem Problem, Webseiten für Mobil-Telefon-Displays und für PC-Bildschirme zu codieren. Ich habe meine Navigations-Leiste mit der CSS-Flexbox-Technik responsiv- also Mobil-Telefon-tauglich gemacht.
Der HTML5-Bestandteil: <nav></nav> kann dafür verwendet werden. In der CSS-Datei habe ich dazu diese vier CSS-Codes geschrieben:
nav {
display: flex; (nav responsiv machen)
justify-content: center; (mittige Ausrichtung)
flex-direction: row; (Schreibrichtung: links nach rechts)
flex-wrap: wrap; (mit Zeilenumbruch)
background-color: royalblue; (Hintergrundfarbe: Royalblau)
}
nav a {
color: #ffffff; (weiße Linkfarbe)
font-size: 1.2rem; (Link-Schriftgröße)
}
.flex-item { (Box für die Links)
margin: 0.5rem; (Äußerer Abstand)
padding: 0.7rem; (Innerer Abstand zum Rand)
}
@media (max-width: 600px) {nav {flex-direction: column;}}
In meinen Webseiten habe ich die royal-blauen Navigations-Leisten ganz oben so codiert: <nav> <div class="flex-item"> (Für jeden Link solch eine Div-Box) Link-Code </div> </nav>
HTML-Fehler aufspüren und beseitigen
In der Website hinter diesem Link können Sie fertige Webseiten auf HTML-und-CSS-Fehler untersuchen.
Hinter diesem Link gibt es einen HTML-Validator, den man in einen Internet-Browser integrieren kann.
Wenn Sie Webseiten mit dem Phoenix-Code-Editor erstellen, können Sie gleich beim Codieren im Editor-Bereich ganz unten rechts am Okay-Häkchen oder am roten Dreieck sehen, ob Ihre HTML-Codes fehlerfrei oder eben nicht fehlerfrei sind. Einfach drauf-Klicken.