Der Weg zu Ihrem ersten HTML-Dokument

Auch bei diesem Thema geht es darum, dass Sie innerhalb weniger Minuten das erste
Erfolgserlebnis haben, und zwar das erste von Ihnen erstellte HTML-Dokument!

Dieses ist zunächst noch nicht weltweit sichtbar, das erklären wir später.

HTML ist die Abkürzung für Hyper Text Markup Language und wird nicht als eine Programmiersprache
angesehen, sondern als eine Auszeichnungssprache. Diese wird von einem sogenannten Browser
(Mozilla Firefox, Microsoft Edge, Google Chrome, Opera, Safari) gelesen und auf dem PC
erscheinen dann die gewünschten Inhalte. Aktuell arbeitet man mit den Versionen HTML5
und CSS3, wobei CSS die Abkürzung für Cascading Style Sheets ist.

Wenn man bei einer Internet-Seite mit der rechten Maustaste irgendwo auf den Hintergrund klickt
und anschließend auf "Seitenquelltext anzeigen", dann bekommt man HTML-Code angezeigt. Das sieht meistens
sehr unübersichtlich aus.

Und nun ist folgende Vorgehensweise empfehlenswert:

Kopiere den nächsten Absatz mit copy + paste (mit gedrückter linker Maustaste über den Text ziehen,
dann mit der rechten Maustaste klicken und "Kopieren" auswählen). Lege auf dem Desktop mit Hilfe der
rechten Maustaste ein neues Textdokument an. Dann Doppelklick darauf und den zwischengespeicherten Text
mit der rechten Maustaste einfügen. Oben links "Datei" auswählen, "Speichern unter..." anklicken und
als Dateinamen "index.html" angeben. Wichtig ist die Endung ".html". Und nun speichern, fertig!

<h1 style="color:#ff0000"> Hallo Welt! </h1>

<h2 style="background-color:#00ff00"> Dies ist eine kleinere Überschrift </h2>

<span style="background-color:#0000ff; color:#ffff00; font-size: 50px;"> Guten Tag! </span>

<span style="background-color:#0000ff; color:#ffff00; font-size: 50px;
font-family: Comic Sans MS,Verdana,Helvetica;"> Guten Tag! </span>

Auf dem Desktop sollte jetzt die Datei unter dem Namen "index" erscheinen, versehen mit dem Symbol
des von Ihnen aktuell benutzten Browsers.

Eine Internet-Seite hat im Wesentlichen folgenden Aufbau:

<html>

<head>
</head>

<body>
</body>

</html>

Fast jedes HTML-Element wird mit einem einleitenden Tag (z. B. <p>) begonnen
und mit einem abschließenden Tag (</p>) beendet.

Fangen wir einfach an und füllen das Grundgerüst ein wenig mit Leben. Die Informationen
im <head>-Teil werden von Browsern, Suchmaschinen und Übersetzungsprogrammen verarbeitet.
Das meiste, was dem Aufrufer angezeigt wird, steht zwischen <body> und </body>.

Der HTML-Teil sieht so aus:

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dies erscheint oben links</title>
<link rel="stylesheet" type="text/css" href="bibl.css" />
</head>

<body>

<p>Text dunkel Text dunkel Text dunkel Text dunkel Text dunkel </p>

<p class="rotezeichen">Text rot Text rot Text rot Text rot Text rot <br />
Text rot Text rot Text rot Text rot Text rot Text rot Text rot Text rot Text rot Text rot <br />
Text rot Text rot Text rot Text rot Text rot Text rot Text rot Text rot Text rot Text rot. </p>

<p>Text dunkel Text dunkel Text dunkel Text dunkel Text dunkel </p>

<p class="blauezeichen">Text blau Text blau Text blau Text blau Text blau <br />
Text blau Text blau Text blau Text blau Text blau Text blau Text blau Text blau Text blau Text blau <br />
Text blau Text blau Text blau Text blau Text blau Text blau Text blau Text blau Text blau Text blau. </p>

</body>
</html>

In HTML werden Inhalte und Struktur der Webseite angegeben. In CSS legt man die Ausgestaltung fest,
wie z.B. Schriftgrößen, Schriftfarben, Schriftarten, Hintergrundfarben, Rahmen und ggf. Schatten,
Abstände aller Art, Texthervorhebungen und vieles, vieles mehr.

Und hier ist der CSS-Teil:

.rotezeichen {
        color: #FF0000;
        font-size: 18px;
}

.blauezeichen {
        color: #0000FF;
        font-size: 36px;
}

Jetzt geht es los

Verkleinere dieses Fenster. Klicke mit der rechten Maustaste auf den Desktop-Hintergrund
und lege ein neues Textdokument an. Dann kommt copy+paste, ziehe mit gedrückter linker
Maustaste über den HTML-Teil (beginnend mit <!doctype html> und endend mit </html>).
Dann einfügen in das eben erstellte Textdokument. Und speichern unter dem Namen index.htm .
Wichtig ist die Endung ".htm" . Gleiches passiert mit dem CSS-Teil (beginnend mit .rotezeichen
und endend mit der letzten Klammer). Speichern unter bibl.css . Wichtig ist die Endung ".css" .
Wählt man einen anderen Namen für bibl.css, dann muss man auch den Dateinamen in der
link-Zeile in index.htm ändern.

Und nun den Button index.htm (index) anklicken!