{"id":2993,"date":"2022-11-15T18:52:53","date_gmt":"2022-11-15T17:52:53","guid":{"rendered":"https:\/\/cbrell.de\/blog\/?p=2993"},"modified":"2022-11-15T23:31:36","modified_gmt":"2022-11-15T22:31:36","slug":"html-einstieg-von-null-auf-hundert","status":"publish","type":"post","link":"https:\/\/cbrell.de\/blog\/html-einstieg-von-null-auf-hundert\/","title":{"rendered":"HTML Einstieg von Null auf Hundert"},"content":{"rendered":"

F\u00fcr den niederschwelligen Start in die Programmierung ist ein HTML Einstieg gut geeignet. HTML ist zwar keine Programmiersprache, sondern eine Seitenbeschreibungssprache, durch die Besch\u00e4ftigung mit HTML lernen Sie jedoch, wie sich Programmieren anf\u00fchlt. Und das geht ganz schnell.<\/em><\/p>\n

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\u00fcchern.<\/em><\/p>\n

Stand: 15.11.2022<\/em><\/p>\n

Dieser Beitrag ist Teil 1 einer kleinen dreiteiligen Serie<\/p>\n

Teil 1:\u00a0HTML Einstieg von Null auf Hundert<\/a> (Dieser Beitrag)<\/p>\n

Teil 2: CSS Einstieg von Null auf Hundert<\/a><\/p>\n

Teil 3: Mit HTML und CSS Infografiken bauen (wird noch erstellt)<\/p>\n

Was ist HTML?<\/h2>\n

HTML ist eine Auszeichnungssprache<\/strong> f\u00fcr 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\u00e4dt die Datei und „rendert<\/strong>“ die darin enthaltenen Tags. das hei\u00dft, im Browserfenster entsteht eine Darstellung der Inhalte in der HTML-Datei.<\/p>\n

HTML sieht so \u00e4hnlich aus wie XML<\/strong>. Andere XML-\u00e4hnliche Sprachen sind GPX (Geokoordinaten) und SGV (Vektorgrafiken). XML ist gut geeignet, um Daten zwischen Maschinen (Hier eben Browser und Webserver) auszutauschen.<\/p>\n

Die mit Tags gekennzeichneten Textschnipsel und die Tags selber sind sog. DOM<\/strong>-Elementen (Document Object Model). HTML-Seiten zu ver\u00e4ndern, hei\u00dft die DOM-Elemente zu ver\u00e4ndern. Das wiederum erledigen Sie mit Programmiersprachen. Eine Programmiersprache, die im Browser abl\u00e4uft und im wesentlichen dazu gedacht ist, DOM-Elemente dynamisch zu \u00e4ndern, ist Javascript<\/a>.<\/p>\n

HTML Lernen ist einfach und geht schnell. Sie ben\u00f6tigen nur einen Rechner mit einem Dateisystem, einem Browser und einem Texteditor.<\/p>\n

Wie k\u00f6nnen Sie HTML-Dateien erstellen und bearbeiten?<\/h2>\n

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\u00f6nnen Sie nun eine Datei anlegen mit<\/p>\n

touch index.html<\/pre>\n
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.<\/p>\n
Bearbeiten Sie die Dateien mit dem Editor und speichern Sie sie h\u00e4ufig. F\u00fchren Sie einen Doppelklick auf eine Datei mit der Endung html aus, wird sie automatisch in Ihrem Browser ge\u00f6ffnet. Damit haben Sie gleich den Bearbeitungs-Workflow: Editieren – Speichern – Test mit Browser und von vorn.<\/p>\n
Achten Sie darauf, von vornherein den Quelltext ordentlich aufzuschreiben, das erleichtert sp\u00e4ter die Fehlersuche.<\/p>\n
Wie sieht ein HTML-Grundger\u00fcst aus?<\/h2>\n
Starten Sie mit einem HTML-Grundger\u00fcst analog zu einem „Hallo-Welt“ Programm. Das Grundger\u00fcst enth\u00e4lt alle Elemente, damit die HTML-Datei formal richtig ist und der Browser die Datei rendern kann.<\/p>\n
<html>\r\n <head>\r\n <\/head>\r\n <body>\r\n  Hallo Welt.\r\n <\/body>\r\n<\/html><\/pre>\n
Abb.: Beispiel einer minimalen HTML-Datei.<\/p>\n
\u00dcbung \/ Breakout Session<\/h4>\n
Tippen Sie das HTML Grundger\u00fcst im Editor Ihrer Wahl ab - oder kopieren Sie den Quelltext hinein. Speichern Sie unter index.html. Testen Sie durch Doppelklick.<\/pre>\n
Die Tags bedeuten:<\/p>\n
<html> <\/html> Beginn und Ende einer HTML-Datei. In XML hei\u00dft so etwas Wurzelknoten.<\/p>\n
<head> <\/head> wird werden sp\u00e4ter Metainformationen und Steuerungsinformationen abgelegt.<\/p>\n
<body> <\/body> Alles zwischen diesen Tags soll im Browserfenster erscheinen.<\/p>\n
Wie arbeiten Sie mit \u00dcberschriften?<\/h2>\n
\u00dcberschriften der Ebene 1, 2 u.s.w werden durch die Tags <h1><\/h1>, <h2><\/2> … beschrieben.<\/p>\n
<html>\r\n <head>\r\n <\/head>\r\n <body>\r\n  <h1>Erste \u00dcberschrift der Ebene 1<\/h1>\r\n      Hallo Welt.\r\n  <h1>Zweite \u00dcberschrift der Ebene 1<\/h1>\r\n   <h2>Erste \u00dcberschrift der Ebene 2<\/h2>\r\n      Nochmal Hallo Welt\r\n <\/body> <\/html><\/pre>\n
Abb. Beispiel \u00dcberschriften<\/p>\n
Abs\u00e4tze und Zeilenumbr\u00fcche<\/h2>\n
Der Browser interpretiert Sonderzeichen so wie mehrere Lehrzeichen und Zeilenumbr\u00fcche als ein Leerzeichen. Um also eine Zeile umzubrechen, ben\u00f6tigen Sie das Tag <br>, oder Sie fassen einen Textschnipsel in einen Absatz <p><\/p>.<\/p>\n
<html>\r\n <head>\r\n <\/head>\r\n <body>\r\n  Nach mir kommt ein Zeichenumbruch <br> dann geht der Text weiter.\r\n <p> Hier kann nun einiger Text hinein, auch mit weiteren    <br> Zeilenumbr\u00fcchen<\/p>\r\n <\/body>\r\n<\/html><\/pre>\n
Abb. : Abs\u00e4tze und Zeilenumbr\u00fcche<\/p>\n
Nummerierte und unnummerierte Listen<\/h2>\n
Listen ohne Nummerierung (unorderd) kennzeichnen Sie mit <ul><\/ul>,\u00a0 nummerierte Listen (orderd) mit <ol><\/ol>. Listen k\u00f6nnen Sie schachteln.<\/p>\n
Ein einzelnes Listenelement umschlie\u00dfen Sie mit <li><\/li>.<\/p>\n
<html>\r\n\u00a0 <head>\r\n  <\/head>\r\n  <body>\r\n    <ol>\r\n      <li>Erster Listeneintrag<\/li>\r\n      <li>Zweiter Listeneintrag<\/li>\r\n    <\/ol>\r\n      <li>Dritter Listeneintrag<\/li>\r\n      <li>Vierter Listeneintrag<\/li>\r\n    <ul>\r\n    <\/ul>\r\n<\/body>\r\n<\/html><\/pre>\n
Abb. : Listen<\/p>\n
Tabellen<\/h2>\n
Tabellen sind eine M\u00f6glichkeit, Zahlenkolonnen wie auf einem Schachbrett ordentlich in Zeilen und Spalten darzustellen. Sie ben\u00f6tigen Tags f\u00fcr Beginn und Ende der Tabelle <table><\/table>, f\u00fcr Beginn und Ende einer Zeile <tr><\/tr> und f\u00fcr einzelne Zellen innerhalb einer Zeile <td><\/td>. Formal sind HTML-Tabellen geschachtelte Listen, Sie sehen zwar Spalten, eine Spalte ist jedoch kein DOM-Element.<\/p>\n
html>\r\n\u00a0 <head>\r\n\u00a0 <\/head>\r\n  <body>\r\n   Etwas Schachbrettartiges:\r\n   <table>\r\n     <tr>\r\n        <td>A1<\/td>\r\n        <td>B1<\/td>\r\n        <td>C1<td>\r\n     <\/tr>\r\n     <tr>\r\n        <td>A2<\/td>\r\n        <td>B2<\/td>\r\n        <td>C2<td>\r\n      <\/tr>\r\n    <\/table>\r\n  <\/body>\r\n<\/html><\/pre>\n
Abb. : Eine kleine Tabelle<\/p>\n
So binden Sie Bilder ein<\/h2>\n
Eine Bilddatei, die im gleichen Verzeichnis wie Ihre HTML-Datei liegt, binden Sie mit dem img Tag ein<\/p>\n
.....\r\n\r\n<img src=\"name_des_bildes.jpg\">\r\n<img src=\"http:\/\/anderer_server.de\/xyz\/name_des_bildes.jpg\">\r\n\r\n.....<\/pre>\n
Abb. : Bilder einbinden<\/p>\n
Verweise (Links) auf andere Seiten<\/h2>\n
Links sind das Kernelement von HTML-Seiten. Damit verkn\u00fcpfen \/ verlinken Sie verschiedene Seiten untereinander.\u00a0 Ein Link kann auch auf einen Datei auf einem anderen Server zeigen.<\/p>\n
.....\r\n\r\n<a href=\"eine_andere_seite.html\">\r\n<a href=\"https:\/\/anderer_server.de\/xyz\/eine_andere_seite.html\">\r\n\r\n.....<\/pre>\n
Abb. : Hyperlinks setzen<\/p>\n
Bereiche definieren<\/h2>\n
Blockartige Bereiche auf einer Seite kennzeichnen Sie mit <div><\/div>, Teile von Textzeilen mit <span><\/span>. Das hat zun\u00e4chst keine Auswirkungen und dient lediglich dazu, Bereiche festlegen zu k\u00f6nnen, auf die CSS Elemente wirken. Mit diesen Elementen k\u00f6nnen Sie rudiment\u00e4re einfache Informationsgrafiken erstellen.<\/p>\n
\u00dcbung \/ Breakout Session<\/h4>\n
Probieren Sie alle hier genannten HTML-Tags einmal. Speichern Sie die Datei als test.html. Verlinken Sie index.html und test.html gegenseitig<\/pre>\n
 <\/p>\n
Fazit<\/h2>\n
Sie k\u00f6nnen nun schon verlinkte Textdokumente in HTML schreiben. Wie genau die Textdokumente im Browser aussehen, ist vom Browser abh\u00e4ngig. Mit CSS k\u00f6nnen Sie HTML-Seiten gestalten. Wie das geht, erfahren Sie in einem separaten Beitrag.<\/p>\n
 <\/p>\n
Quellen f\u00fcr den HTML Einstieg & Weiterlesen<\/h2>\n
    \n
  1. Mit dieser Seite habe ich vor vielen Jahren HTML gelernt: HTML: Zum Nachschlagen, Lernen, einfach anfangen: selfhtml<\/a>(extern)<\/li>\n<\/ol>\n
    <\/p>\n
    Teile diesen Beitrag.<\/div>