1. Grundlagen

Aber schauen wir uns erstmal die einfachen Dinge an - brechen wir das alles runter auf eine simple Darstellung: ich möchte einen Text auf einer Webseite horizontal mittig darstellen.

Dafür benötige ich zunächst eine HTML-Datei. Diese kann ich sogar in einem Texteditor erstellen, der bei Windows oder auch beim Mac standardmäßig vorhanden ist. Bei Windows nennt er sich "Editor" und auf dem Mac "TextEdit".

Aber ganz so einfach wie in Word ist es nicht (Text schreiben und anschließend den "Zentrieren-Button" drücken.)
Einigen wir uns darauf, dass es anders ist - nicht einfach, sondern einfach nur anders.

Die Datei möchte ich "beispiel.html" nennen.

Und schon tauchen die ersten Fragen auf:
Geht das mit der Benennung, wenn die sog. "Extension", also die Dateiendung (Buchstaben hinter dem Punkt) 4 Zeichen hat?
Ja das geht! Es gab früher mal die sog. 8.3-Konvention mit der eine Datei auf 16-Bit Systemen, bzw. unter DOS entsprechend benannt werden musste (8 Zeichen für den Dateinamen und 3 für die Dateiendung). Heutzutage können sämtliche Systeme 4 Zeichen bei der Dateiendung verarbeiten (sogar MS Word nutzt mittlerweile die "docx-Dateiendung"). Auch der Dateinamen kann mittlerweile 128 Zeichen vertragen - auch wenn ich niemals so viel Zeichen benutzen würde.

Noch eine Frage:
Muss ich die Groß- und Kleinschreibung beachten?
Um es kurz zu machen - ja, das würde ich! Die meisten Webserver unterscheiden da sehr wohl. Wenn ein Link mit Großbuchstaben auf eine Datei verweist die kleine Buchstaben hat, ist es schnell ein "toter" Link und die Seite kann nicht angezeigt werden. Also einigen wir uns auf eine generelle Kleinschreibweise.

Letzte Frage:
Kann ich eine Datei so benennen?  mein test.html
nein, bitte nicht! Aber was fehlt hier?
Nun, auf einem Windows- und Mac-Betriebssystem ist das bekanntlich kein Problem Leerzeichen bei Dateinamen zu verwenden. Aber bei Webseiten sind diese Leerzeichen tabu, da diese interpretiert werden (und das Leerzeichen entsprechend mit Steuerzeichen aufgefüllt wird) und die Datei damit von einem Link aus nicht erreichbar ist. Diese Seite wird dann schlichtweg nicht gefunden.

Lösung: der Unterstrich. Also mein_test.html
(dementsprechend auch mein_erster_test.html ... usw.)

Damit ist die Seite perfekt als HTML-Seite nutzbar und auch sicher zu verlinken.

Ok, genug der Theorie. Beginnen wir also damit die Datei auf unserem System (PC oder Mac) abzuspeichern. Ich würde dazu in unserem Datenverzeichnis ein Unterverzeichnis anlegen, welches sich html nennt.
Anschließend können die erstellten HTML-Dateien besser zugeordnet und gefunden werden. Dazu gehören dann später auch die CSS- und die Javascript-Dateien. Doch dazu später.

2. Es geht los

Die Datei ist gespeichert und wir starren das erste Mal auf einen leeren Inhalt.
Sämtliche Programmierungen und dementsprechende Eingaben erfolgen im Klartext, d.h. jeder von uns ist mit einem Texteditor in der Lage HTML-, CSS- und Javascript-Dateien zu lesen (und zu verstehen). Das macht die Sache relativ einfach.

Beginnen wir also mit unserer ersten Eingabe, die wir ja zentriert darstellen möchten.

<p>Hallo Welt</p>

Beachtet bitte unbedingt die Verwendung der spitzen Klammern. Auf der Tastatur (für Windows und Mac) befindet sich die Taste für die spitze Klammer unten links. Mit der Taste Shift-Taste daneben (Großschreibung) wird die Klammer entsprechend geschlossen.

Was fällt bei einer solchen Eingabe auf?
Sie beginnt immer mit einem Befehl in eckigen Klammern. In diesem Fall das p und wird mit /p wieder geschlossen. Das muss mit allen Befehlen in HTML so durchgeführt werden. Das p steht dabei für eine Textformatierung in Fließtext.

Überschriften werden mit h1, h2, h3 und h4, usw. gekennzeichnet. h1 ist dabei die größte Überschrift.

Dementsprechend sieht eine Überschrift in h1 so aus:

<h1>Meine Überschrift</h1>

Fügt man nun beide Zeilen zusammen, sollte der Quelltext so aussehen:

<h1>Meine Überschrift</h1>
<p>Hallo Welt</p>

Startet nun einen Webbrowser. Das kann unter Windows der Internet Explorer, Google Chrome, Mozilla Firefox, etc. sein und mit dem Mac z.B. Safari, und ebenfalls Google Chrome, Mozilla Firefox, etc.
Das sind i.d.R. die gebräuchlichsten Browser für beide Systeme. Sie sind alle kostenfrei erhältlich.

Im Browserfenster kann man auch lokale Dateien direkt öffnen. Klickt im Menü des Browsers auf Datei und dann Öffnen und sucht die in unserem Verzeichnis angelegte Datei (daten/html). Das Ergebnis ist schon fast ernüchternd und nicht besonders anspruchsvoll, aber es ist in HTML programmiert und damit Browsertauglich.

Als erstes richten wir das Dokument nun so ein, dass es sämtlichen Anforderungen an HTML-Seiten (Aufbau und Struktur des Quelltextes) entspricht und möglichst auf sämtlichen Browsern dieser Welt "gut", bzw. "gleich" aussieht.

Unsere bisherigen beiden Zeilen bringen wir im sog. body unter. Das Ganze sieht dann so aus:

<!doctype html>
<html>	
<head>	
<meta charset="UTF-8">
</head>

<body>
	
<h1>Meine Überschrift</h1>
<p>Hallo Welt</p>	
	
</body>
</html>

3. Aufbau des Quelltextes

• !doctype html kennzeichnet die Webseite als HTML-Dokument, damit jeder Browser erkennt, dass es eine Webseite ist.
• html (in der zweiten Zeile) kennzeichnet den Teil im Dokument, der HTML-Befehle enthält. (Andere Teile können eine andere Programmiersprache enthalten, z.B. PHP oder ASP. Diese werden dann in einem eigenen Abschnitt oberhalb von html gekennzeichnet.
• meta charset="UTF-8" (Abkürzung für 8-Bit UCS Transformation Format) wird die entsprechende Zeichencodierung festgelegt. Diese sollte immer gleich sein.
• Alle Einträge im head sind vergleichbar mit einer Kopfzeile in Word. Hier befinden sich generelle Definitionen für eine Webseite.
• Im body befindet sich der im Browser dargestellte Inhalt der Webseite.

Wie man sieht, werden sämtliche Befehle gestartet und mit / weiter unten wieder geschlossen. Dazwischen können mehrere Zeilen liegen.
Der Übersichtlichkeit halber befinden sich Leerzeilen zwischen den Befehlen. Das hilft bei der Programmierung um die verschiedenen Bereiche besser zu erkennen, also z.B. der Eintrag body, damit ich darin meinen Inhalt packen kann.

Der Aufbau des Quellcodes ist immer gleich!

Aktualisieren wir nun die Ansicht unseres Browsers werden wir keinen großen Unterschied beim Inhalt bemerken. Der Browser in seiner Standardeinstellung "verzeiht" so manchen Fehler und so manche eigentlich notwendige Konvention. Nur wenn sich jemand die Seite extern, also im Internet, bzw. im Ausland anschauen würde, ist die Wahrscheinlichkeit einer falschen Darstellung sehr hoch - besonders, da wir einen typisch deutschen Umlaut (das Ü im Wort Überschrift) verwendet haben. Nicht alle Zeichensätze enthalten die deutschen Umlaute.

Ich will das ursprüngliche Ziel, den Text zentriert darzustellen, aber nicht aus den Augen verlieren.
Dazu bietet HTML den einfachen Befehl center an, den man um den Text herum einfügt (Siehe Quelltext).

<!doctype html>
<html>	
<head>	
<meta charset="UTF-8">
<title>Meine erste Webseite</title>
</head>

<body>
	
<center><h1>Meine Überschrift</h1>
<p>Hallo Welt</p></center>	
	
</body>
</html>

Außerdem habe ich der Seite zusätzlich mit title einen Titel in Zeile 5 verpasst. Diese wird oben in der Statusleiste jedes Browsers angezeigt. Bitte immer daran denken, dass jeder Befehl am Ende mit / geschlossen werden muss. Beim Titel ist es außerdem wichtig, dass er sich im Abschnitt head des Quelltextes befindet.

Ja ja, spektakulär ist anders!  :-)
Was haben wir gerade gemacht? Wir haben beide Zeilen, die Überschrift und den Fließtext "umrahmt" mit dem center-Befehl.

4. Die Kunst des Formatierens mit CSS

Reiner HTML-Quelltext wird zeilenweise programmiert und auch die Darstellung erfolgt anschließend dementsprechend zeilenweise.
Um also den dargestellten Text auch vertikal zu zentrieren, braucht es da ein wenig mehr. Natürlich kann ich entsprechende Leerzeilen solange einfügen, bis der Text irgendwann mal in der Mitte steht.
Aber was mache ich, wenn die Betrachter der Webseite unterschiedliche Geräte benutzen. Der Eine surft mit dem Desktop-PC. der Andere hat ein Tablet-PC in der Hand, welcher einen nicht so großes Display hat und welchen er ständig dreht (Hoch-/Querformat) - so wie es ihm gerade passt. Ein Dritter nutzt sein Handy zum Betrachten der Webseite.
Wie bekomme ich jetzt tatsächlich die Mitte heraus?

Dazu bedarf es der Befehle, die in den sog. Styles vorgenommen werden. Das klingt auch wesentlich komplizierter als es ist.
OK, der Code dafür ist etwas länger, aber seeehr effektiv. Er erspart eine Menge weiterer Zeilen und berücksichtigt die Bildschirmauflösung des Betrachters.

<!doctype html>
<html>	
<head>	
<meta charset="UTF-8">
<title>Meine erste Webseite</title>

<style>	
.meintext {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}	
</style>	
	
</head>

<body>
	
<div class="meintext"><center><h1>Meine Überschrift</h1>
<p>Hallo Welt</p></center></div>
	
</body>
</html>

So sieht das Ganze dann nun aus:

Was haben wir denn da gerade gemacht? Wir haben ein CSS (Cascading stylesheet) eingefügt. In Zeile 7-14 stehen dazu die nötigen Befehle. Schauen wir uns die Befehle mal näher an.

• style kennzeichnet zusammen mit dem mit / gekennzeichneten Befehl den Bereich in dem die Formatierungsbefehle stehen.
• .meintext definiert den Namen für diesen style. Dieser wird später an entsprechender Stelle aufgerufen und damit gestartet (in Zeile 20).
• position: absolut geht von einem fixen Punkt am Bildschirmrand aus. Das Pendant dazu ist relative (damit kann eine exakte Mittelpunktberechnung aber nicht stattfinden).
• top: 50% besagt, dass die Hälfte vom oberen Rand aus berechnet werden soll.
• left: 50% besagt, dass die Hälfte vom linken Rand aus berechnet werden soll.
• transform: translate(-50%, -50%); Wir haben die obere linke Ecke des Elementes in der Mitte. Deswegen müssen wir noch zusätzlich je -50%, also die Hälfte des zu positionierenden Elements wieder abziehen.

Was fällt noch auf?
Da gibt es einen Punkt, der vor dem Namen des styles meintext steht. Dieser ist wichtig, damit der Aufruf des CSS korrekt funktioniert.
Auch die geschweiften Klammern dürfen im Abschnitt von style nicht fehlen. Sie markieren Anfang und Ende eines Abschnitts. Ein weiterer CSS-Befehl würde ebenso in eigene geschweifte Klammern gesetzt werden.

Des Weiteren gibt es den sog. DIV-Container. Dieser ist in der aktuellen Welt der Webseitenprogrammierung das A und O !!

Sämtliche Elemente einer Webseite werden in diese DIV-Container gepackt und können so mit den styles entsprechend formatiert, positioniert und eingefärbt werden. Sogar die Animation von DIV-Containern funktioniert auf diese Art und Weise.

In unserem Beispiel habe ich den Container meintext genannt und den bereits erstellten Text damit "eingerahmt", damit beide Zeilen berücksichtigt werden. Wenn ich unseren center-Befehl entfernen würde stünde die Überschrift zwar in der Mitte, aber der Text darunter würde auf der selben Höhe beginnen und wäre nicht zentriert unter der Überschrift. Das möchte ich aus optischen Gründen aber so haben.

5. Auslagern der Styles in eine externe Datei

Kommen wir dazu wie es Profis machen: eine Datei mit HTML und großem Anteil von CSS-Befehlen wird schnell unübersichtlich. Kommt anschl. noch Javascript, PHP oder ASP hinzu, fällt der Überblick bei großen Projekten bei zum Teil tausenden von Programmzeilen entsprechend schwer.
Deswegen gibt es die Möglichkeit bei aufwendigen Webprojekten den Anteil der CSS-Befehle in eine Datei auszulagern. Anstelle von style und /style befindet sich nun eine Pfadangabe, an dem sich die entsprechende CSS-Datei befindet.

Nennen wir die Datei einfach styles. Sie benötigt aber auch eine Dateiendung. Diese ist vorbelegt und muss css heißen - also styles.css .

Im Quelltext sieht das dann so aus:

<!doctype html>
<html>	
<head>	
<meta charset="UTF-8">
<title>Meine erste Webseite</title>

<link rel="stylesheet" href="styles.css"> 
	
</head>

<body>
	
<div class=class="meintext farbig"><center><h1>Meine Überschrift</h1>
<p>Hallo Welt</p></center></div>
	
</body>
</html>

In Zeile 7 wird die CSS-Datei geladen. Der Syntax muss wie gezeigt erfolgen. Hier sind die Anführungszeichen wichtig.
Würde sich die Datei in einem Unterverzeichnis von html befinden muss das im Eintrag href=" " erfolgen, also z.B. css/styles.css.

Hier ist nun die zugehörige CSS-Datei, die ich durch Farbangaben ergänzt habe. Das macht die Darstellung etwas realistischer und sieht auch etwas besser aus.

body {
  background-color: #15323F;
}

.farbig {
  color: #EC641C;
} 

.meintext {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Die Angaben für die Farben stehen in der CSS-Datei in Zeile 1 bis 7. Auch hierbei sind die geschweiften Klammern sehr wichtig. Wie bereits geschrieben, trennen sie die Befehle voneinander.

Um den Text farbig zu bekommen habe ich im DIV-Container des Textes den Eintrag "farbig" mit Leerzeichen vom DIV-Namen getrennt eingefügt. Der Text erhält durch den Farbcode #EC641C; die orangene Farbe.
Der Hintergrund ist nun blau. Dieser wird durch den Eintrag in der CSS in Zeile 1 bis 3 festgelegt. In diesem Fall ist der Farbcode #15323F; .

Die CSS-Datei befindet sich im selben Verzeichnis wie die HTML-Datei und ist - wie bereits geschrieben - auch eine reine Textdatei.

6. Javascript als externe Datei einbinden

Warum jetzt noch Javascript? Ich kann doch schon vieles mit CSS umsetzen.
Ja, das stimmt, aber mit Javascript kann ich bestimmte Prozesse steuern und beeinflussen, z.B. die Aktionen des Benutzers, wie z.B.:

• Das Deaktivieren des Kontextmenüs (Rechtsklick), sodass Bilder oder die gesamte Seite nicht mehr abgespeichert werden können
• Verschleiern von Internetadressen, auf die ein Link verweist
• Deaktivieren der Kopierfunktion, um zu erschweren, dass Texte oder Bilder kopiert werden können
• Unaufgeforderte (Werbe-)Pop-ups oder aufeinanderfolgende Dialogfenster, die den Benutzer behindern
• Ungewolltes Schließen des Browserfensters
• Ungewollte Größenänderung des Browserfensters

...oder wie in unserem Fall: je nach Tageszeit soll eine angepasste Begrüßung erfolgen.
Die Einbindung erfolgt nach ähnlichem Muster wie die der CSS-Datei, nur, dass diese Javascript-Datei die Endung js hat.

Wir nennen sie einfach gruss.js.

Zunächst dazu die HTML-Datei mit dem eingebundenen Startbefehl des Javascripts. Dazu dient der angewendete script Befehl.

<!doctype html>
<html>	
<head>	
<meta charset="UTF-8">
<title>Meine erste Webseite</title>

<link rel="stylesheet" href="styles.css"> 
	
</head>

<body>
	
<div class="meintext farbig"><center><h1>Meine Überschrift</h1>
<p>Hallo Welt</p>	
<script type="text/javascript" src="gruss.js"></script></center></div>
	
</body>
</html>

Hier habe ich den Code vom Javascript an der Stelle eingefügt an der ich die Grußformel sehen will. Diese soll unter unserer Hallo Welt-Zeile erfolgen.

Nun folgt das passende Javascript dazu.

function dayPart(oneDate) {
	var theHour = oneDate.getHours()
	if (theHour < 2 )
		return "Guten Morgen"
	if (theHour < 12)
		return "Guten Morgen"
	if (theHour < 18)
		return "Guten Tag"
			return "Guten Abend"
}

today = new Date()
var header = dayPart(today) + " "
document.write(header)

Was macht also dieses Javascript?
Ich will nicht zu tief ins Detail gehen, aber zunächst erfolgt ein sog. Funktionsaufruf mit function dayPart. Dieser vergleicht die vorgegebene Uhrzeit in den Zeilen darunter (Zeile, 3, 5 und 7) mit der abgefragten Uhrzeit des Benutzers.
Ist diese nach 2 Uhr nachts wird man mit Guten Morgen begrüßt. Ist diese nach 12 Uhr mittags, begrüßt das System den Betrachter mit Guten Tag. Ab 18:00 Uhr wird man mit Guten Abend begrüßt.
Man hätte nach 2 Uhr nachts auch noch ein Gute Nacht einfügen können, aber schließlich will man den Betrachter ja motivieren. Deswegen steht in Zeile 4 auch Guten Morgen.

So etwas schafft nur ein Javascript. Mit CSS bekommt man so etwas nicht so schnell hin.
Dadurch erhält eine Webseite die individuelle Note.

Wie man im Quelltext sieht, nutzt Javascipt auch die geschweiften Klammern um Befehle voneinander zu trennen. Ein direkter Vergleich mit Zahlen, bzw. Rechenoperationen müssen in "normale" Klammern gesetzt werden (hier sind es die Zahlen 2, 12 und 18).

Nun noch das Ergebnis im Bild:

Ich hoffe, dieses Beispiel konnte ein Grundverständnis von HTML, CSS und Javascript vermitteln. Man kann das komplette KnowHow von HTML natürlich nicht auf eine Seite packen. Deswegen werde ich weitere Details zur Programmierung als Ergänzung auf dieser Webseite veröffentlichen.

Von mir an dieser Stelle schon mal

Viel Erfolg bei der Umsetzung der eigenen Webseite!