HTML5 Einführung
Webseiten werden in HTML geschrieben. Dabei ist HTML einfach zu lernen und für jeden nutzbar. Benötigt wird lediglich ein beliebiger Texteditor.
Geeignete Programme
Um eine Webseite in HTML zu entwickeln sind beliebige, gewöhnliche Texteditoren oder aber auch eine Entwicklungsumgebung.
Dabei haben die Standard-Texteditoren den großen Nachteil, dass sie keine Unterstützung bei der Entwicklung bieten. Das heißt, dass offene Tags nicht automatisch geschlossen, Zeilen nicht eingerückt werden und so weiter.
Texteditoren
TextEdit
TextEdit ist der Standard-Texteditor auf dem MacBook. Dieser eignet sich im Gegensatz zum Scripteditor dazu in HTML zu entwickeln.
Dafür wird zunächst ein neues Dokument erstellt. Diese muss zunächst als eine reine Text-Datei gespeichert werden. Hierfür gibt es zwei Möglichkeiten: entweder über “Ablage” > “Sichern …” > Dateiformat: RTF-Dokument oder über “Format” > “In reinen Text umwandeln”, dann speichern. Im ersten Fall wird die Datei als .rtf, im zweiten Fall als .txt gespeichert. Das macht für uns hier allerdings keinen Unterschied.
Nun muss der Dateipfad im Finder geöffnet werden. Mit einem Rechtsklick auf die Datei kann sie umbenannt werden. Hier einfach am Ende des Namen .html eingeben und anschließend in der Warnung auf “.html verwenden” klicken.
Jetzt kann die Datei im Browser geöffnet werden. Dafür entweder einen Doppelklick auf die Datei machen, wodurch sie automatisch in Safari geöffnet wird, oder einen Rechtsklick auf die Datei machen, dann auf “Öffnen mit” klicken und den gewünschten Browser auswählen.
Editor
Editor ist der Standard-Texteditor von Windows, ebenfalls zur Erstellung eines html-Dokuments geeignet.
Dafür wird die App geöffnet und unter “Datei” > “Speichern unter…” ein neues Dokument gespeichert. Hier in dem neuen Dialog-Fenster den Dateinamen festlegen und die Endung .txt durch .html ersetzen. Außerdem kann unten in einem Drop-down-Feld die Codierung gegebenenfalls geändert werden, hier ist allerdings vor allem für deutschen Text UTF-8 sinnvoll.
Wenn jetzt der Pfad der Datei im Explorer aufgerufen wird, hat nun die html-Datei das Symbol des als Standard festgelegten Browsers und kann in diesem geöffnet werden.
Entwicklungsumgebungen
Visual Studio Code
Visual Studio Code ist eine Open Source Software, die kostenlos heruntergeladen werden kann. Unter anderem erkennt die Entwicklungsumgebung auch html. Dabei läuft Visual Studio Code sowohl unter MacOS als auch unter Windows.
Hierzu nach dem Öffnen auf “Neue-Datei…” in der Mitte des Bildschirms klicken. Nun oben im Text auf “Sprache auswählen” klicken, einfach html in die Suchzeile eintippen und die Eingabetaste (Return) drücken.
Durch diverse Plugins kann zudem das Entwickeln erleichtert werden.
Grundstruktur HTML
Jedes html-Dokument hat dasselbe Grundgerüst. Sieht folgendermaßen aus:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html><!DOCTYPE html> legt fest, dass es sich bei der Datei um ein HTML5-Dokument handelt.
<html lang="en"> setzt die Sprache des Dokuments auf Englisch (lang = language), vor allem hilfreich für die Rechtschreibkorrektur. Hier kann auch eine andere Sprache eingetragen werden. Für Deutsch wäre es zum Beispiel <html lang="de">.
Mit <head> beginnt der Kopf des Dokuments. Im Kopf wird die Codierung mit <meta charset="UTF-8"> auf UTF-8 gesetzt, sodass alle Zeichen – auch ä, ö, ü und ß – gesetzt werden können. Zwischen <title> und </title> wird der Titel der Webseite eingetragen, dieser ist später im Reiter des Tabs im Browser zu sehen.
Danach folgt der Körper der Seite zwischen <body> und </body>. Hier kommt der Inhalt der Seite rein, also alles was nachher im Fenster zu sehen sein soll.
HTML-Tags
Tags sind Schlüsselwörter in spitzen Klammern. Die meisten Tags sehen aus wie folgt:
<tag> Text... </tag>Ein Block wird also mit derselben Bezeichnung geöffnet und geschlossen.
Außerdem können in den spitzen Klammern des öffnenden Tags Parameter festgesetzt werden. Diese haben eine große Reichweite; von der URL eines Bildes oder Links bis hin zum Erscheinungsbild des Inhalts. Zwei der wichtigsten Parameter hier sind class und id. Allerdings können diese auch zur Identifizierung in reinem html hilfreich sein, wenn man zum Beispiel ein bestimmtes Element mit Strg+F sucht.
Wichtige Tags für den Einstieg
Abgesehen von den Tags des Grundgerüsts, die oben bereits erklärt wurden, gibt es natürlich wichtige Tags für den Inhalt der Seite. Hier die essenziellsten (meiner Meinung nach) …
Überschriften und Text
Die Überschriften (Headings) haben Bezeichnungen der Größe nach sortiert. Es gibt 6 verschiedene Größen an Überschriften, 1 ist die größte und 6 die kleinste.
Links HTML und rechts die Überschriften, wie sie hier gestylt dargestellt werden.
<h1>Überschrift H1</h1>
<h2>Überschrift H2</h2>
<h3>Überschrift H3</h3>
<h4>Überschrift H4</h4>
<h5>Überschrift H5</h5>
<h6>Überschrift H6</h6>Überschrift H1
Überschrift H2
Überschrift H3
Überschrift H4
Überschrift H5
Überschrift H6
Der Text eines einfachen Paragraph wird in ein <p>-Tag geschrieben.
<p>Das ist ein Paragraph.</p>Wenn jetzt im Code ein Zeilenumbruch gemacht wurde, hat das keinen Einfluss auf das Erscheinungsbild. Hierfür gibt es einen extra Line break-Tag.
<p>Dieser Paragraph sieht trotz des
Zeilenumbruchs normal aus.</p><p>Dieser Paragraph nutzt einen Tag
<br>um einen Zeilenumbruch herbeizuführen.</p>Dabei ist es egal, wo der <br>-Tag platziert wird. Er kann am Zeilenende der oberen oder am Zeilenanfang der unteren Zeile stehen. Außerdem ist zu beachten, dass dieser Tag nicht mit </br> geschlossen werden muss.
Natürlich kann man auch hier Text fett (bold) oder kursiv (itallic) schreiben. Dies wird mit einem <b>– beziehungsweise einem <i>-Tag.
<p>Das ist normaler Text. <b>So wird der Text fett gedruckt</b> und <i>so wird der Text kursiv gedruckt.</i></p>Das ist normaler Text. So wird der Text fett gedruckt und so wird der Text kursiv gedruckt.
Links
Natürlich können auch Links eingebunden werden.
<a href="https://ramona.gloetter.de/">Das ist ein Link.</a>Hier wird die Zieladresse als Parameter angegeben. Der Text zwischen den Tags ist der blaue anklickbare Teil des Links, also der Text, der sichtbar ist. In diesem Fall führt der Link zu einer externen Homepage, allerdings kann man innerhalb eines Systems auch auf andere html-Dateien verlinken. Zum Beispiel:
<a href="../home.html">Das ist ein Link.</a>Die zwei Punkte hier bedeuten, dass der Link auf eine Datei in einem darüber liegenden Ordner verweist.
Soll die Seite des Links in einem neuen Tab geöffnet werden, folgt ein weiterer Parameter. Demnach wird ein leerer Tab gesucht, oder eine neuer Tab eröffnet.
<a href="location.href='https://ramona.gloetter.de/'" target="_blank">Das ist ein Link.</a>Bilder
Bilder benötigen als Quelle die URL oder den Dateipfad und einen alternativen Text. Alle Bildformate (.jpg, .png, …) können gleich eingebunden werden.
<img src="https://ramona.gloetter.de/wp-content/uploads/2022/07/Bildschirmfoto-2022-07-18-um-12.29.20.png" alt="Darstellung einer HTML Seite">Hier wird ein Bild aus einer externen Quelle eingebunden. Aus einer internen Quelle würde das zum Beispiel so aussehen:
<img src="img/screenshot.png" alt="Darstellung einer HTML Seite">Wenn bei einem Klick auf das Bild etwas geschehen soll, kann hier der onclick-Parameter eingesetzt werden. Mehr dazu bei den Buttons.
Buttons
Buttons funktionieren ähnlich wie Links. Allerdings wird kein href festgelegt, sondern der Parameter onclick verwendet. Darin wird definiert, was bei einem Klick auf den Button passieren soll.
<button onclick="location.href='https://ramona.gloetter.de/'">Text auf dem Button</button>Dabei muss es sich nicht um einen Wechsel auf eine andere Seite handeln. Man kann daraufhin auch eine JavaScript-Funktion aufrufen (das wird in diesem Artikel allerdings nicht behandelt). Dennoch ein kurzes Beispiel:
<button onclick="funktion()">Text auf dem Button</button>Listen
Es gibt zwei verschieden Arten von Listen. Die geordnete und die ungeordnete Liste (ordered and unordered list), also eine Liste mit Stichpunkten und eine nummerierte Liste.
Dabei gibt es immer zwei verschiedene Tags. Einer, der angibt um welchen Listentyp es sich handelt – dieser umgibt auch alle Elemente – und einen <li>-Tag für jedes Element. Wieder links html und rechts das Erscheinungsbild hier.
<ol>
<li>eine geordnete Liste</li>
<li>ol-Tag gibt an, dass die Liste sortiert ist, daher die Nummerierung</li>
<li>li-Tag initialisiert jedes Listenelement</li>
</ol>- eine geordnete Liste
- ol-Tag gibt an, dass die Liste sortiert ist, daher die Nummerierung
- li-Tag initialisiert jedes Listenelement
<ul>
<li>eine ungeordnete Liste</li>
<li>ul-Tag gibt an, dass die Liste unsortiert ist, daher die Stichpunkte</li>
<li>li-Tag initialisiert jedes Listenelement</li>
</ul>- eine ungeordnete Liste
- ul-Tag gibt an, dass die Liste unsortiert ist, daher die Stichpunkte
- li-Tag initialisiert jedes Listenelement
Tabelle
Auch hier gibt es wieder mehrere Tags. <table> initialisiert die Tabelle (table), während er die gesamte Tabelle umfasst. <tr> erstellt eine neue Reihe in der Tabelle (table row) und umfasst daher alle Elemente, die in dieser Reihe erscheinen sollen. <th> kennzeichnet den Text einer Tabelle, der als Tabellenüberschrift (table heading) fett geschrieben werden soll. <td> enthält die Daten der Tabelle (table data).
<table>
<tr>
<th>Spalte 1</th>
<th>Spalte 2</th>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
</tr>
</table>| Spalte 1 | Spalte 2 |
| Zelle 1 | Zelle 2 |
Unterteilung der Seite
Man kann verschiedene Elemente zusammen einteilen. Das ist vor allem bei der Verwendung von CSS hilfreich (siehe nächster Beitrag “CSS Einführung“), kann aber auch einfach der Übersichtlichkeit dienen. Dafür nutzt man ein div (division).
<div>
<h1>Das ist ein div.</h1>
<p>Die Überschrift und der Paragraph sind jetzt in dem div zusammengefasst und können wie ein Element behandelt werden.</p>
</div>Kommentare
In HTML werden Kommentare so gekennzeichnet:
<!--Das ist ein Kommentar-->Beispiel-Dokument
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Basics</title>
</head>
<body>
<h1>HTML Basics</h1>
<img src="https://images.pexels.com/photos/144234/bull-landscape-nature-mammal-144234.jpeg?auto=compress&cs=tinysrgb&w=600">
<br>
<a href="https://images.pexels.com/photos/144234/bull-landscape-nature-mammal-144234.jpeg?auto=compress&cs=tinysrgb&w=600">Quelle</a>
<br>
<p>Hier nochmal eine Zusammenfassung aller HTML Basics in einem HTML-Dokument
<br>- ein Anwendungsbeispiel so zu sagen ;)</p>
<button onclick="location.href='https://ramona.gloetter.de/2022/07/18/html5-einfuhrung/'" target="_blank">Zurück zur ausführlichen Erklärung</button>
<!-- Überschriften -->
<h1>Überschriften</h1>
<h1>Überschrift H1</h1>
<h2>Überschrift H2</h2>
<h3>Überschrift H3</h3>
<h4>Überschrift H4</h4>
<h5>Überschrift H5</h5>
<h6>Überschrift H6</h6>
<!-- Tabellen und Listen -->
<h1>Tabellen und Listen</h1>
<table>
<tr>
<th>Sortierte Liste</th>
<th>Unsortierte Liste</th>
</tr>
<tr>
<td>
<ol>
<li>sortierte Liste</li>
<li>jedes Listenelement hat eine Nummer</li>
<li>Nummer 3 ;)</li>
</ol>
</td>
<td>
<ul>
<li>unsortierte Liste</li>
<li>jedes Listenelement hat einen Punkt</li>
<li>Element 3 ;)</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
One Comment
Pingback: