Folgende Punkte finden sich auf meiner ToDo-Liste:
Kleines Icon im Kopf der Artikel um auf einen Blick zu erkennen, um welchen
Bereich es geht.erledigtEine kleine Navigation im Kopf der Seite.erledigtInfos zum Datenschutz und des Verantworlichen in der Fußleiste.erledigt- Strukturierung und Selektion der einzelnen Inhalte als pdf.
- Übersicht der vorhandenen Inhalte als Mindmap
- Erstellung entsprechender Grafiken/Bilder zum einfacheren Verständnis in den Artikeln
- Inhalte für Screenreader, für den Ausdruck und Newsreader optimieren und anbieten
Eines der Urgesteine und die deutsche Referenz schlechthin, ist das wiki des Vereins selfhtml. Es stellt eine
sehr gute Anlaufstelle rund um die Webseitenerstellung dar.
Hier finden Sie den Einstieg ins wiki von selfhtml.
Für das Lernen der ersten Schritte im Bereich der Webseitenerstellung habe ich das Buch Einstieg in HTML und CSS von Peter
Müller
ausgewählt. Das Buch ist im Rheinwerk Verlag erschienen und liegt mir in der zweiten aktualisierten Auflage
vor (ISBN 978-3-8362-9089-0). Das Werk hat durchweg sehr gute Kriterien und ist laut seiner Beschreibung
für Einsteiger gedacht. Themen umfassen HTML und CSS, behandelt auf 528 Seiten. In der Onleihe der Berliner
Stadt-Bibliotheken lag es leider nicht vor. Es kann für rund 30 Euro im Buchhandel erworben werden. Ich
habe es direkt beim Rheinwerk Verlag gekauft. Das hat den Vorteil, dass man für einen kleinen Aufpreis zum
gedruckten Buch auch die digitale Version erhält (als pdf und epub). Weiterhin steht das Buch in
seiner Online-Bibliothek direkt beim Verlag zur Verfügung.
Ich bin gespannt, was das Buch zu bieten hat und werde später berichten.
Zur schnellen Seitenerstellung habe ich eine einfache HTML-Vorlage
erzeugt und im Ordner vorlagen abgelegt.
Die Homepage, damit meine ich die Seite index.html, hat nun folgenden Aufbau:
<!doctype html>
<html lang="de">
<head>
<title>Bitionary - Alles rund um...
</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="Sven Heinze">
<meta name="description" content="Alles rund um...">
<meta name="keywords" content="IT,Webdesign,HTML,Linux">
<!-- Laden der Formatierungsregeln -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<header>
<mark> Letzte Aktualisierung - 11.2.2024 10:45</mark>
</header>
<article>
<header>
<h3>HTML - Seitenaufbau Homepage</h3>
<p>Autor: Sven Heinze | Datum: 11.2.2024</p>
</header>
Hier steht der Fließtext, der eigentliche Inhalt...
</article>
</body>
</html>
Das CSS für die Homepage samt Artikel wurde angepasst. Die CSS umfasst nun folgende Formatierungen:
/* Regelwerk der Artikel */
body {
background-color: Gray;
color: black;}
article {
background-color: Lightgray;
padding-left: 0.20rem;
padding-right: 0rem;
padding-bottom: 0.5rem;
border-radius: 15px;
margin-bottom: 0.5rem;}
article h3 {
background-color: DimGray;
color: white;
border-radius: 15px;
padding-left: 0.20rem;}
mark{
background-color: Blue;
color: white; }
Ein Unterordner namens css wurde angelegt. In diesem habe ich eine neue Textdatei namens styles.css angelegt.
Die Textdatei enthält bislang die
folgenen Zeilen :
/* Regelwerk der Artikel */
body {
background-color: floralwhite;
color: black;}
Hier werden zwei Formatierungen festgelegt, die für alles innerhalb des <body> gelten. Das Regelwerk
selbst wird einmalig am Anfang im <head> geladen.
Hierzu wird folgendes verwendet: <link href="css/styles.css" rel="stylesheet">
Die einzelnen Artikel auf der Homepage stehen alle in Hauptteil <body> und werden jeweils durch das
gleichnamige Element <article> umschlossen. Der Kopf der Artikels <header> umschließt die
Überschrift <h3> und den Autor <p>. Der eigentliche Text folgt im Fließtext des Artikels.
Geht es um HTML, so wird von Elementen und Tags gesprochen. Ein HTML Tag wird von den beiden Zeichen < und
> umschlossen. Innerhalb der beiden Begrenzer steht der Name des Tags, beispielsweise html. Weiterhin folgen
mögliche Attribute, die durch ein Gleichheitszeichen vom Wert getrennt werden. Anschließend folgt der
auszuzeichnende Text. Nach diesem erfolgt in der Regel der abschließende Tag in Form von </Tagname>. Es
gibt jedoch auch Elemente, die keinen abschließenden Tag benötigen.
Ich wohne in Berlin und nutze gerne die lokalen Berliner Stadtbüchereien. Hierzu benötigt man einen gültigen
Ausweis der Bücherei. Der Ausweis ist ein Jahr gültig und kostet aktuell jährlich 10 Euro
und kann dann nach dem Ablaufen wieder online verlängert werden. Schüler und Studenten haben andere
Konditionen. Mit dem Ausweis kannst du die jeweiligen örtlichen Büchereien nutzen, um dir dort Bücher
und Zeitschriften auszuleihen.
Aber du kannst genauso gut auch online Bücher, Zeitschriften und andere Lerninhalte ausleihen. Für das
Smartphone/Tablet gibt es beispielsweise die App Onleihe. Diese installierst du dir
kostenlos auf deinem Gerät und nach der Eingabe deiner Zugangsdaten, kannst du dir schon jede Menge Titel
aus einem sehr großem Fundus ausleihen. Ist ein Titel bereits ausgeliehen, kannst
du dir diesen reservieren und erhälst dann, sobald er wieder zur Verfügung steht, eine Email darüber.
Aktuell kannst du dir so parallel bis zu fünf Titel reservieren.
Desweiteren lese ich gerne verschiedene Magazine und Zeitschriften. Diese kosten meist schon einzeln gut mal
10 Euro pro Ausgabe. Da kommt schnell einiges zusammen. Damit sich dies jedoch in Grenzen
hält, habe ich ein Abo bei Readly. Readly bietet nach eigenen Angaben
zur Zeit über 7000 Titel an. Lesen tue ich rund 10-15 Stück im Monat. Das Abbo kostet aktuell 15
Euro im Monat - rechnet sich also schon ab zwei Titel im Monat. Zudem hat man auch Zugang zum Archiv der
einzelnen Magazine. Für mich ein durchaus faires Abo, dass mir den Preis wert ist.
Diese beiden Quellen bilden für mich einen reichhaltigen Fundus an qualitativ gut recherchierten,
nachvollziehbaren Inhalten.
Meine Website besteht derzeit aus genau einer einzigen Datei. Einer Textdatei namens index.html. Damit treffen
die folgenden drei Begrifflichkeiten zu: Website, Webpage und Homepage. Drei Begriffe die allesamt aber eine
eigene Bedeutung haben.
-
Homepage
Die Homepage ist die HTML Datei, die dir angezeigt wird, wenn du im Webbrowser einen Link in Form von
www.bitionary.de eingiebst. Sie ist die Startseite. Die vollständige URL heißt
https://bitionary.de/index.html.
-
Webpage
Die Webpage stellt eine beliebige HTML Seite dar. Da meine Website aktuell nur aus einer Seite besteht,
entspricht die Webpage auch der Homepage. Beide heißen index.html.
-
Website
Website nennt man dagegen den kompletten Webauftritt. Alle Webpages zusammen bilden die Website.
Vor dem Editieren, damit meine ich den Zeitpunkt kurz bevor ich Änderungen an der Website vornehme, erstelle ich
eine lokale Kopie im Unterordner archiv/. Ein Ordner, auch Verzeichnis genannt, ist eine Struktur, vergleichbar in der
realen Welt mit einem Schrank. Ein Unterverzeichnis ist ein Verzeichnis, dass hierarchisch eine Ebene tiefer liegt.
Das entspräche dann einer Schublade im geöffneten Schrank.
In diese Schublade kann ich verschiedenste Dinge hineinlegen. Aber ich kann diese auch noch weiter unterteilen,
in dem ich noch einen Einsatz für Socken und Unterwäsche hineinlege. Das wäre dann der Unterordner
archiv/ in den ich einige Dateien hinein kopiere. Als lokale Kopie meine ich also die, bis zu diesen Zeitpunkt
aktuelle Datei index.html,die ich auf meinem heimischen Computer bearbeite.
Meine noch aktuelle index.html kopiere ich in den Unterordner archiv/. Es entsteht somit eine Kopie namens
index.html. Damit ich später noch die zeitliche Reihenfolge nachverfolgen kann, füge ich an den
Namen der Kopie eine durchlaufend nummerierte Zahl hinzu. Die erste Datei im Unterordner archiv/ lautet also
index-0001.html. Mit dieser Art der einfachsten Historie kann ich später im Falle eines
Problems auf einen älteren Stand wechseln. Einen Stand an dem es das Problem beispielsweise noch nicht gab.
Aber für Euch hat es noch einen viel größeren Nutzen. Ich lege diese lokale Kopie nicht nur bei mir zuhause
ab, sondern auch auf meiner Website, d.h. auf dem weit entfernten Rechner meines Providers.
Du kannst so also auch am zeitlichen Fortschritt der Webseite teilhaben. Rufe dazu anstelle der
aktuellen Version nicht https://bitionary.de/index.html auf, sondern benutze stattdessen die URL
https://bitionary.de/archiv/index-0001.html. Mit dem Zugriff auf die Historie hast du die Möglichkeit in der
Zeit zurückzuwandern - quasi eine kleine Zeitreise zu unternehmen. Durch diese Funktion kannst
du Schritt für Schritt die Veränderungen des Projektes nachvollziehen. Aktuell meine ich damit die Sprache HTML zu
erlernen, die zur Erstellung meiner Website genutzt wird.
Mit dem Fortschreiten dieser Seite wird der Umfang im Bereich Programmierung kontinuierlich steigen. Rufe
also ruhig mal einen früheren Stand auf und schau dir den den Quellcode an. Hierzu lädst du dir diese
lokal auf deinen Rechner daheim und öffnest ihm mit einem Editor deiner Wahl. Webbrowser übergreifend kannst
du mit der Tastenkombination Strg + U ein Element untersuchen und dir so den Quellcode
der geöffneten Webseite anzeigen zu lassen. Die Strg Taste wird auch String- oder Control-Taste genannt. Mit
gedrückter Strg-Taste benutzt du zusätzlich die Taste U. Jetzt sollte sich ein neues Fenster oder ein
neues Tab öffnen, in der du den Programmcode angezeigt bekommst. Weitere Möglichkeiten erhalst du durch das
Drücken der Funktionstaste F12. Durch erneutes drücken der F12-Taste verschwinden diese zusätzlichen
Inhalte wieder. Trauen dich ruhig und nutze diese beiden Möglichkeiten um besser zu verstehen, wie diese
Webseite aufgebaut ist.
Eine Webseite besteht im Grunde genommen zunächst aus einer oder mehreren Textseiten. Im einfachsten Fall
genau so, wie es bei dieser Seite der Fall ist. Meist wird einfachheitshalber im deutschen der Begriff
Webseite verwendet. Im englischen Sprachraum wird von der Website, bestehend aus vieler einzelner Seiten
gesprochen. Die Webpage ist dagegen eine ganz bestimmte Bildschirmseite, eine unter Vielen.
Diese Website besteht aktuell genau aus einer einzigen Seite, der Startseite die oft als Homepage bezeichnet
wird. Die Startseite wird immer dann automatisch aufgerufen, wenn du im Webbrowser nur den Namen der Website
angibst. Beispielsweise rufst du diese Webseite mit folgender URL auf: https://bitionary.de. Eine Eingabe
von https://www.bitionary.de oder www.bitionary.de führt aber auch zum Ziel.
Gibst du die URL nur mit einer Domain an, wird auf dem entfernten Rechner eine einzelne Webseite mit dem
Namen index.htm oder index.html gesucht und geöffnet. Um im Webbrowser auf diese Seite zu kommen,
gibst du folgendes ein: https://bitionary.de/index.html. Lässt du die Startseite weg, so wird automatisch
nach den Seiten index.html oder index.htm gesucht und die erste davon anschließend geöffnet. Somit
kannst du eine einfache Webseite mit nur einer einzigen Textdatei namens index.html erstellen.
Bei der Namensgebung der genutzten Dateien solltest du weniger einfallsreich sein. Nutze Kleinbuchstaben,
Zahlen, den Binde- und Unterstrich als Dateinamen. Auf Umlaute, Sonderzeichen und Großbuchstaben
solltest du eher verzichten.
Aber wie kommt nun diese soeben erstellte Textdatei mit Namen index.html ins Internet? Hierzu suchst du dir
einen Internet-Provider. Dieser Provider stellt dir Speicherplatz zur Verfügung und kümmert sich
um die Adresspflege. Ähnlich wie deine eigene Adresse, bestehend aus dem Straßennamen, Hausnummer und
Postleitzahl, unterstützt dich der Provider bei deiner Suche samt der notwendigen Formalitäten.
Die sogenannte URL deiner Website besteht aus einem Teil der sich Domain nennt. Dies kann man alternativ zur
Adressangabe sehen. Zuvor bietet ein Provider dir zur Domainsuche ein entsprechendes Tool
an. Denn viele Domains sind ja schon vergeben und können nicht mehr registriert werden. Domains wie
telekom.de und amazon.de sind bereits im Gebrauch und können so nicht mehr von dir ausgewählt
werden. Hierzulande erhälst du Domains mit der Endung .de für Deutschland. Ob eine Seite schon belegt oder
noch frei verfügbar ist, kannst du bei der DENIC erfragen. Eine Möglichkeit der
Suche findest du bei der Denic.
Ist die gewünschte Adresse noch frei, so kannst du sie dir zusammen mit dem Webspace bei einem
Internet-Provider registrieren. Ich habe ein kleines Webpaket beim deutschen Provider strato.de
abgeschlossen. Dieser hat dann die Domain bitionary.de auf meinem Namen registriert und hostet das Webpaket.
Das heißt, das er meine Webseite entsprechend speichert und die Möglichkeit schafft,
dass diese weltweit im Internet zur Verfügung steht. Ich bekomme übrigens keinerlei Vergütung vom
Provider für seine namentliche Nennung. Je nach Paket stehen dir in deinem Paket bestimmte
Programmiersprachen zur Verfügung, die du verwenden kannst. Auf jeden Fall kannst du HTML, CSS und
Javascript nutzen. Die drei Sprachen sollte man auf jeden Fall lernen.
Sollte dir nun Bob Andrews auf der Zunge liegen, so bist du vermutlich auch schon etwas älter. Und bist du
schon etwas älter, so verbindest du vielleicht noch automatisch die Suche nach Informationen mit einer gut
gefüllten Bücherei, dem Geruch von abgelagertem Papier. Zu meiner Schulzeit war der erste Gang der Weg zur
Bibliothek, wenn es um die Vorbereitung zu einem Referat ging. Das Internet in seiner heutigen Form gab es
noch nicht, genauso wenig wie Smartphones, GPS oder Suchmaschinen wie Google und Bing.
Der erste Satz beim Abnehmen des Telefons lautete nicht wie heute: Wo bist du? Denn wo sollte ich
denn sein, bei einem Festnetztelefon das sich im Flur befand und mit etwas Glück eine längere
Telefonschnur von wenigen Metern besaß? Ja, es gab viele Unzulänglichkeiten. Aber die gesuchten
Informationen befanden sich auch noch in den Köpfen der Eltern und Großeltern, in der Tageszeitung
oder halt in der Bibliothek. 10.000 von Büchern, alle eng an eng in unzähligen Regalen, schön sortiert nach
Buchstaben in Themengruppen und auffindbar in einem gut gepflegten Register - einer kleinen Holzbox,
gefüllt mit beschriebenen Papierkarten.
Heutzutage gibt es natürlich immer noch Tageszeitungen und Bibliotheken - die Register sind allerdings dem
Computer gewichen. Auch gibt es vielerorts Bibliotheken, die nahezu kostenlos im Internet ihre Bücher
als digitale Werke anbieten. Der Zugang zu Wissen ist meiner Meinung an sich durch einiges leichter geworden
als er damals je war. Aber noch im weitaus größeren Maße hat sich das Ausmaß des Un- und des Halbwissens
verbreitet. Genau hier liegt die Schwierigkeit und Herausforderung der heutigen Zeit. Es ist oftmals
schwierig qualifizierte Informationen von weniger Qualifizierten zu unterscheiden - noch schwieriger
Halbwissen und Desinformation zu erkennen.
Eine übliche Recherche, so wie sie millionenfach jeden einzelnen Tag erfolgt, erstreckt sich darauf, die
voreingestellte Suchmaschine seines Internetbrowsers zu bemühen. In das angebotene Suchfeld geben wir einen
Begriff ein und erhalten tausende von Informationen rund um den Suchbegriff zurück. Und mal ehrlich gefragt,
wer schaut schon auf die dritte Bildschirmseite seiner Suchergebnisse? Wie viele Leute kennen und benutzen
gezielt mehr als eine Suchmaschine? Im Volksmund sprechen wir von googeln, ein Begriff der tatsächlich bald
schon seit zwanzig Jahren im Duden steht. Wissen Sie überhaupt, dass die Informationen aus der Google-Suche
stammen? Oder ist doch ein anderer Suchanbieter bei Ihnen eingestellt? Welcher ist das und kann man diesen
vielleicht ändern? Wieviele weitere Suchanbieter fallen Ihnen denn konkret ein? Und für was ist dieses
Suchfeld ganz oben in Ihrem Webbrowser zuständig?
Mehr und mehr beginnen Suchanbieter Ihnen bereits zusammengefasste Informationen zu Ihrer Fragestellung
anzubieten - ohne gezielt die Quellen auszuweisen. Woher stammen diese Informationen und kann ich diese
überhaupt noch validieren? An dieser Stelle soll es aber nun genug sein. Wissen solltest du nun, dass du bei
der nächsten Internetrecherche stets einen Blick auf die Quellen werfen solltest. Die Informationen
die ich auf dieser Webseite teile, habe ich so gut wie möglich recherchiert und validiert. Auf entsprechende
Quellen werde ich hinweisen.
Dennoch möchte ich hier klipp und klar sagen, dass auch ich nicht gegen Fehler gefeit und ein lernender
Mensch bin. Für entstandene Schäden und Probleme die aufgrund meiner geteilten Informationen
zustande gekommen sind, übernehme ich ausdrücklich weder Verantwortung noch bin ich dafür haftbar zu machen.
Für Inhalte fremder Webseiten, auf diese ich verlinke, bin ich ebenfalls nicht haftbar.
Der erste Blick auf diese Webseite mag dir nur ein müdes Lächeln abringen - wenn überhaupt. Mir ginge es wohl
so! Aber warum sieht diese Seite aktuell nur so schrecklich langweilig aus? Fehlendes Wissen
und Nachvollziehbarkeit sind zwei Gründe. Ein Erstklässler lernt das Lesen in der ersten Klasse nicht damit,
indem er mit Goethes Faust beginnt. Er startet zunächst mit dem Erlernen der einzelnen Buchstaben.
Eine moderne Webseite kommt auf tausende von Zeilen Programmcode. Das gemeine darin ist, dass der Umfang und
die Komplexität mittlerweile so hoch ist, dass er von dem Großteil der Menschen versteckt bleibt.
Man kann eine umfangreiche wunderschöne Webseite - vielleicht einen Blog - mit nur wenigen Klicks bei einem
Internet-Provider erstellen lassen. Den Programmcode der automatisiert im Hintergrund erstellt wird,
bleibt uns aber verborgen. Viel zu komplex um es dem einfachen Ersteller aufzubürden. Und das hat durchaus
seine Berechtigung! Will man aber etwas von grundauf verstehen, so muss man am Anfang beginnen. Am Anfang,
als vieles noch einfacher war ...
Genau aus diesem Grund, möchte ich auch am Anfang beginnen. Denn mit nur sehr wenigen Befehlen habe ich diese
Webseite erstellt - von grundauf. Jedes einzelne Zeichen habe ich eigenhändisch auf meiner Tastatur erfasst
ganz ohne Maus, ohne Befehlsergänzung, ohne Rechtschreibkontrolle. Für Letzteres möchte ich mich vorab
entschuldigen ...
Der Sinn dieser Webseite ist es, mich an Dinge zu erinnern, die ich selbst bereits erlebt und gelernt habe.
Aber ich möchte auch jedem anderen die Möglichkeit geben, zusammen mit mir, neues zu erlernen und
vorhandenes zu vertiefen. Aber während ich diese Zeile hier schreibe, benutze ich etwas HTML, schreibe den
Text im Editor nano auf einen Ubuntu Linux Betriebssystem, dass ich zuvor selbst installiert habe.
Ich habe mich bereits darüber informiert wie es überhaupt möglich ist, eine eigene Webseite ins Internet zu
stellen um Informationen mit anderen zu teilen. Mich informiert was es mit einer "Domain" auf sicht hat und
wie ich diese nutzen kann. Gelernt wie ich meine bislang einzige Datei, aus der diese Webseite aktuell besteht,
zu meinem Provider schicke.
All das ginge natürlich nicht ohne einen Computer - damit sind die zuvor von mir gekauften technischen Geräte
gemeint - die ich selber nach bestimmten Kriterien ausgewählt und erweitert habe.
Und hier sitze ich nun mit meinem Henne - Ei Problem und muss alles erst einmal rückwirkend für dich
aufbereiten. Zudem habe ich dich mit einer Menge an Informationen regelrecht bombadiert, ohne dich
damit überfordern zu wollen. Falls du mit all diesen Begriffen überhaupt nichts anfangen kannst, so lasse dich
nicht frustrieren - falls all das zu langweilig ist, so schalte ruhig eine Weile auf Durchzug.
Kein Lehrbuch, keine vollwertige Lektüre, keine Katzenvideos (höchstens ein oder zwei), keine unheimlichen
Intelligenzen die nach der Weltherschaft streben.
Auch habe ich keinerlei Interesse daran, deine Daten einzusammeln, noch diese gewinnbringend zu verkaufen.
Infos über all die Dinge, die mir tagtäglich begegnen und derer ich mich erinnern sollte. Dinge die uns das
Leben erleichtern. Dinge, die Spass machen können und Wissen das erworben werden will.
Was mich antreibt sind die Erinnerungen eines kleinen Jungens, der vor längst vergangener Zeit das erste Mal
einen Webbrowser öffnete und laut Heureka rief! Einen Jungen dessen erster Gedanke es war,
dass nun jeder Mensch soviel lernen könnte wie er denn selbst nur wollte. Der Gedanke, dass Wissen nun für jeden
frei wäre - das ein jeder Mensch das Recht zum Lernen erhielte.
Wenn du nun denkst, dass dieser Junge einfach nur dumm und naiv gewesen ist, so kann ich dir nur recht geben.
Denn ich war dieser Junge von einst - jung und naiv. Und ein halbes Jahrhundert später hat sich nur wenig daran
geändert. Kriege und Hunger treiben weiterhin die Menschen um - Bildung bleibt ebenso wie früher ein seltenes Gut.
Unglaubliche Datenmengen schwirren wortwörtlich permanent um uns herum - von Wissen aber oftmals nicht die geringste Spur!
Heutzutage fällt es schwer jemanden zu begegnen, der kein Smartphone bei sich trägt. Das geballte Wissen der Menschheit
nur einen Wisch entfernt und, seien wir mal ehrlich, Bilder und Filmchen sind das was uns gefällt, dass was wir sehen wollen.
