HTML für Anfänger





Willkommen zur Einführung in HTML!



Auch bei diesem Thema geht es darum, dass Du innerhalb weniger Minuten das erste
Erfolgserlebnis hast, und das ist die erste von Dir erstellte Webseite.

HTML ist die Abkürzung für Hyper Text Markup Language und ist weniger eine Programmiersprache,
sondern eher 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 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 angezeigt.


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!