HTML Einstieg von Null auf Hundert

Für den niederschwelligen Start in die Programmierung ist ein HTML Einstieg gut geeignet. HTML ist zwar keine Programmiersprache, sondern eine Seitenbeschreibungssprache, durch die Beschäftigung mit HTML lernen Sie jedoch, wie sich Programmieren anfühlt. Und das geht ganz schnell.

HTML lernt man durch das Benutzen von HTML und das Schreiben von kleinen HTML-Seiten. HTML lernt man nicht durch das Lesen von HTML-Büchern.

Stand: 15.11.2022

Dieser Beitrag ist Teil 1 einer kleinen dreiteiligen Serie

Teil 1: HTML Einstieg von Null auf Hundert (Dieser Beitrag)

Teil 2: CSS Einstieg von Null auf Hundert

Teil 3: Mit HTML und CSS Infografiken bauen (wird noch erstellt)

Was ist HTML?

HTML ist eine Auszeichnungssprache für Internet-Seiten. Eine HTML-Datei erkenen Sie an der Endung.html oder .htm. Eine HTML-Datei ist eine „flache“ Textdatei, deren Inhalte mit sogenannten Tags gekennzeichnet ist. Normalerweise liegen die HTML-Dateien auf einem Webserver. Mit einem Browser (Google Chrome, Safari, Mozilla Firefox oder Opera) forden Sie die HTML-Datei vom Webserver an. Der Browser lädt die Datei und „rendert“ die darin enthaltenen Tags. das heißt, im Browserfenster entsteht eine Darstellung der Inhalte in der HTML-Datei.

HTML sieht so ähnlich aus wie XML. Andere XML-ähnliche Sprachen sind GPX (Geokoordinaten) und SGV (Vektorgrafiken). XML ist gut geeignet, um Daten zwischen Maschinen (Hier eben Browser und Webserver) auszutauschen.

Die mit Tags gekennzeichneten Textschnipsel und die Tags selber sind sog. DOM-Elementen (Document Object Model). HTML-Seiten zu verändern, heißt die DOM-Elemente zu verändern. Das wiederum erledigen Sie mit Programmiersprachen. Eine Programmiersprache, die im Browser abläuft und im wesentlichen dazu gedacht ist, DOM-Elemente dynamisch zu ändern, ist Javascript.

HTML Lernen ist einfach und geht schnell. Sie benötigen nur einen Rechner mit einem Dateisystem, einem Browser und einem Texteditor.

Wie können Sie HTML-Dateien erstellen und bearbeiten?

Starten Sie in Ihrem Wurzelverzeichnis und legen Sie sich ein neues Projektverzeichnis an, z.B. „HTML“. Wechseln Sie in das Verzeichnis. Arbeiten Sie im Terminal unter Linux oder Mac, können Sie nun eine Datei anlegen mit

touch index.html

Ansonsten verwenden Sie einen grafischen Editor wie Notepad++, Sublime Text oder Visual Studio Code. Die genennten Editoren haben den Vorteil, dass sie die HTML-Tags farbig darstellen. Das erleichtert die Fehlersuche erheblich. Editoren werden in einem eigenen Beitrag beschrieben.

Bearbeiten Sie die Dateien mit dem Editor und speichern Sie sie häufig. Führen Sie einen Doppelklick auf eine Datei mit der Endung html aus, wird sie automatisch in Ihrem Browser geöffnet. Damit haben Sie gleich den Bearbeitungs-Workflow: Editieren – Speichern – Test mit Browser und von vorn.

Achten Sie darauf, von vornherein den Quelltext ordentlich aufzuschreiben, das erleichtert später die Fehlersuche.

Wie sieht ein HTML-Grundgerüst aus?

Starten Sie mit einem HTML-Grundgerüst analog zu einem „Hallo-Welt“ Programm. Das Grundgerüst enthält alle Elemente, damit die HTML-Datei formal richtig ist und der Browser die Datei rendern kann.

<html>
 <head>
 </head>
 <body>
  Hallo Welt.
 </body>
</html>

Abb.: Beispiel einer minimalen HTML-Datei.

Übung / Breakout Session

Tippen Sie das HTML Grundgerüst im Editor Ihrer Wahl ab - oder kopieren Sie den Quelltext hinein. Speichern Sie unter index.html. Testen Sie durch Doppelklick.

Die Tags bedeuten:

<html> </html> Beginn und Ende einer HTML-Datei. In XML heißt so etwas Wurzelknoten.

<head> </head> wird werden später Metainformationen und Steuerungsinformationen abgelegt.

<body> </body> Alles zwischen diesen Tags soll im Browserfenster erscheinen.

Wie arbeiten Sie mit Überschriften?

Überschriften der Ebene 1, 2 u.s.w werden durch die Tags <h1></h1>, <h2></2> … beschrieben.

<html>
 <head>
 </head>
 <body>
  <h1>Erste Überschrift der Ebene 1</h1>
      Hallo Welt.
  <h1>Zweite Überschrift der Ebene 1</h1>
   <h2>Erste Überschrift der Ebene 2</h2>
      Nochmal Hallo Welt
 </body> </html>

Abb. Beispiel Überschriften

Absätze und Zeilenumbrüche

Der Browser interpretiert Sonderzeichen so wie mehrere Lehrzeichen und Zeilenumbrüche als ein Leerzeichen. Um also eine Zeile umzubrechen, benötigen Sie das Tag <br>, oder Sie fassen einen Textschnipsel in einen Absatz <p></p>.

<html>
 <head>
 </head>
 <body>
  Nach mir kommt ein Zeichenumbruch <br> dann geht der Text weiter.
 <p> Hier kann nun einiger Text hinein, auch mit weiteren    <br> Zeilenumbrüchen</p>
 </body>
</html>

Abb. : Absätze und Zeilenumbrüche

Nummerierte und unnummerierte Listen

Listen ohne Nummerierung (unorderd) kennzeichnen Sie mit <ul></ul>,  nummerierte Listen (orderd) mit <ol></ol>. Listen können Sie schachteln.

Ein einzelnes Listenelement umschließen Sie mit <li></li>.

<html>
  <head>
  </head>
  <body>
    <ol>
      <li>Erster Listeneintrag</li>
      <li>Zweiter Listeneintrag</li>
    </ol>
      <li>Dritter Listeneintrag</li>
      <li>Vierter Listeneintrag</li>
    <ul>
    </ul>
</body>
</html>

Abb. : Listen

Tabellen

Tabellen sind eine Möglichkeit, Zahlenkolonnen wie auf einem Schachbrett ordentlich in Zeilen und Spalten darzustellen. Sie benötigen Tags für Beginn und Ende der Tabelle <table></table>, für Beginn und Ende einer Zeile <tr></tr> und für einzelne Zellen innerhalb einer Zeile <td></td>. Formal sind HTML-Tabellen geschachtelte Listen, Sie sehen zwar Spalten, eine Spalte ist jedoch kein DOM-Element.

html>
  <head>
  </head>
  <body>
   Etwas Schachbrettartiges:
   <table>
     <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1<td>
     </tr>
     <tr>
        <td>A2</td>
        <td>B2</td>
        <td>C2<td>
      </tr>
    </table>
  </body>
</html>

Abb. : Eine kleine Tabelle

So binden Sie Bilder ein

Eine Bilddatei, die im gleichen Verzeichnis wie Ihre HTML-Datei liegt, binden Sie mit dem img Tag ein

.....

<img src="name_des_bildes.jpg">
<img src="http://anderer_server.de/xyz/name_des_bildes.jpg">

.....

Abb. : Bilder einbinden

Verweise (Links) auf andere Seiten

Links sind das Kernelement von HTML-Seiten. Damit verknüpfen / verlinken Sie verschiedene Seiten untereinander.  Ein Link kann auch auf einen Datei auf einem anderen Server zeigen.

.....

<a href="eine_andere_seite.html">
<a href="https://anderer_server.de/xyz/eine_andere_seite.html">

.....

Abb. : Hyperlinks setzen

Bereiche definieren

Blockartige Bereiche auf einer Seite kennzeichnen Sie mit <div></div>, Teile von Textzeilen mit <span></span>. Das hat zunächst keine Auswirkungen und dient lediglich dazu, Bereiche festlegen zu können, auf die CSS Elemente wirken. Mit diesen Elementen können Sie rudimentäre einfache Informationsgrafiken erstellen.

Übung / Breakout Session

Probieren Sie alle hier genannten HTML-Tags einmal. Speichern Sie die Datei als test.html. Verlinken Sie index.html und test.html gegenseitig

 

Fazit

Sie können nun schon verlinkte Textdokumente in HTML schreiben. Wie genau die Textdokumente im Browser aussehen, ist vom Browser abhängig. Mit CSS können Sie HTML-Seiten gestalten. Wie das geht, erfahren Sie in einem separaten Beitrag.

 

Quellen für den HTML Einstieg & Weiterlesen

  1. Mit dieser Seite habe ich vor vielen Jahren HTML gelernt: HTML: Zum Nachschlagen, Lernen, einfach anfangen: selfhtml(extern)

Teile diesen Beitrag.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert