HTML lernen leicht gemacht: Formulare

In diesem Blogartikel erkläre ich, wie Sie Formulare in HTML erstellen können.

Formulare sind ein wichtiger Bestandteil von Webseiten, da sie es Nutzern ermöglichen, Informationen einzugeben und zu senden. Wir werden die Grundlagen von Formularen, die verschiedenen Eingabefelder und wie man barrierefreie Formulare erstellt, durchgehen.

Grundlagen der Formulare

Ein Formular wird in HTML mit dem <form>-Tag erstellt. Dieses Tag umschließt alle Eingabeelemente, die der Nutzer ausfüllen soll. Ein einfaches Formular sieht so aus:

<form action="/submit" method="post">
    <!-- Eingabeelemente kommen hier -->
</form>

Erklärung

  • action: Gibt die URL an, an die die Formulardaten gesendet werden.
  • method: Gibt die HTTP-Methode an, die zum Senden der Daten verwendet wird (z.B. post oder get).
Tastatur mit einer Taste auf der Barrierefrei steht
Quelle: Edler von Rabenstein – 252045538 / Shutterstock.com

„HTML lernen leicht gemacht: Formulare“ weiterlesen

HTML lernen leicht gemacht: Videos einfügen

In diesem Blogartikel erkläre ich, wie Sie Videos in HTML einfügen können.

Das Einfügen von Videos in HTML-Seiten ist wichtig, weil Videos Informationen auf anschauliche Weise vermitteln können. Sie machen Inhalte lebendiger und helfen dabei, komplexe Ideen einfacher zu erklären. Videos sprechen sowohl die Augen als auch die Ohren der Betrachter an, was sie besonders wirkungsvoll und ansprechend macht. Das ermöglicht es, Informationen auf eine vielseitige Art und Weise zu präsentieren, die für viele Menschen leichter verständlich ist.

Barrierefreiheit

Ein Video barrierefrei in eine HTML-Datei einzufügen ist keine einfache Aufgabe. Blinde Menschen können Videos gar nicht wahrnehmen. Damit blinde Menschen eine Grundinformation über den Inhalt des Videos bekommen, kann das Titel-Attribut oder besser das ARIA-Label-Attribut verwendet werden.

Videos mit Ton stellen für gehörlose Menschen eine große Barriere dar. Deswegen sollten Videos auf Webseiten Untertitel enthalten. Für Filme kann auch eine Audiodeskription erstellt werden. Hier wird ganz genau beschrieben, was im Video zu sehen ist. Allerdings ist das Erstellen einer Audiodeskription sehr zeitaufwendig. Deswegen gibt es in diesem Artikel zur Audiodeskription kein Beispiel.

Tastatur mit einer Taste auf der Barrierefrei steht
Quelle: Edler von Rabenstein – 252045538 / Shutterstock.com

„HTML lernen leicht gemacht: Videos einfügen“ weiterlesen

HTML lernen leicht gemacht: Tabellen

In diesem Blogartikel erkläre ich wie Sie Tabellen in HTML erstellen können.

In diesem Blogartikel erkläre ich, wie Sie Tabellen in HTML erstellen können. Tabellen sind eine nützliche Möglichkeit, Daten strukturiert und übersichtlich darzustellen.

Grundlegende HTML-Tags für Tabellen

<table>: Das Haupt-Tag, das die gesamte Tabelle umschließt.
<thead> (table head): Definiert den Kopfbereich der Tabelle. Hier werden normalerweise die Überschriftenzeilen platziert.
<th> (table header): Definiert eine Tabellenzelle als Überschrift. Der Inhalt wird standardmäßig fett und zentriert dargestellt.
<tbody> (table body): Definiert den Hauptinhalt der Tabelle, also die Datenzeilen.
<tr> (table row): Definiert eine Zeile in der Tabelle.
<td> (table data): Definiert eine Zelle mit normalen Daten in der Tabelle.
<tfoot> (table foot): Definiert den Fußbereich der Tabelle. Hier können beispielsweise Summen oder andere Schlussfolgerungen platziert werden.

Tastatur mit einer Taste auf der Barrierefrei steht
Quelle: Edler von Rabenstein – 252045538 / Shutterstock.com

„HTML lernen leicht gemacht: Tabellen“ weiterlesen

HTML lernen leicht gemacht: Bilder einfügen

In diesem Blogartikel erkläre ich wie Sie Bilder in eine HTML-Seite barrierefrei einfügen können und warum Bilder auf Webseiten wichtig sind.

Bilder spielen eine wichtige Rolle auf Webseiten, indem sie Inhalte visuell ansprechender und verständlicher machen. In diesem Artikel erkläre ich, wie man Bilder in HTML einfügt, warum Bilder wichtig sind, welches Dateiformat am besten geeignet ist, und was bei der Dateigröße zu beachten ist. Außerdem lege ich besonderen Wert auf die Verwendung von Alternativtexten, um die digitale Barrierefreiheit zu gewährleisten.

Warum sind Bilder auf einer Webseite wichtig?

Bilder können viele Zwecke erfüllen:

  • Visuelle Anziehungskraft: Sie machen eine Webseite attraktiver und ansprechender.
  • Erklärung und Illustration: Bilder können komplexe Konzepte veranschaulichen und erklären, was mit Text allein schwierig wäre.
  • Emotionale Verbindung: Sie können Emotionen hervorrufen und eine Verbindung zu den Besuchern aufbauen.
  • Unterstützung des Inhalts: Bilder können den Text ergänzen und unterstützen, indem sie zusätzliche Informationen liefern.
Tastatur mit einer Taste auf der Barrierefrei steht
Quelle: Edler von Rabenstein – 252045538 / Shutterstock.com

„HTML lernen leicht gemacht: Bilder einfügen“ weiterlesen

HTML lernen leicht gemacht: Links und Navigation

In diesem Blogartikel erkläre ich was Links bzw. Hyperlinks sind. Ebenso wird erklärt was eine Navigation ist.

Links bzw. Hyperlinks (<a href=““>)

Links bzw. Hyperlinks sind grundlegende Elemente in HTML, die es ermöglichen, von einer Seite zu einer anderen zu wechseln. Sie werden mit dem <a>-Tag erstellt. Der href-Attribut gibt die Adresse (URL) an, zu der der Link führt.

Eine URL (Uniform Resource Locator) ist eine Zeichenfolge oder eine Adresse, die verwendet wird, um Ressourcen im Internet zu identifizieren und zu lokalisieren. Sie dient dazu, spezifische Inhalte wie Webseiten, Bilder, Videos oder Dateien im Netzwerk zu finden.

Beispiel:

<a href="https://www.beispielseite.de">Besuche Beispielseite</a>

„HTML lernen leicht gemacht: Links und Navigation“ weiterlesen

HTML lernen leicht gemacht: Barrierefreiheit (Accessibility)

In diesem Blogartikel erkläre die Grundlagen der Barrierefreiheit bei Internetseiten.

Begrifflichkeiten

Barrierefreiheit und Accessibility bedeuten im Grunde dasselbe, sie beschreiben das Konzept, dass etwas für alle Menschen zugänglich und nutzbar sein sollte, unabhängig von möglichen Einschränkungen oder Behinderungen. Der Unterschied liegt hauptsächlich in der Sprache:

Barrierefreiheit:

    • Dies ist der deutsche Begriff.
    • Er beschreibt, dass keine Hindernisse oder Barrieren bestehen, die Menschen davon abhalten, eine Webseite, ein Gebäude oder einen Dienst zu nutzen.
    • Beispiel: Eine Webseite ist barrierefrei, wenn sie für Menschen mit Sehbehinderungen oder motorischen Einschränkungen zugänglich ist.

Accessibility:

  • Dies ist der englische Begriff.
  • Er wird oft im internationalen Kontext und in technischen Dokumentationen verwendet.
  • Beispiel: In der Webentwicklung sprechen wir von „Web Accessibility“, wenn wir sicherstellen, dass Webseiten für alle Benutzer, einschließlich Menschen mit Behinderungen, zugänglich sind.
Tastatur mit einer Taste auf der Barrierefrei steht
Quelle: Edler von Rabenstein – 252045538 / Shutterstock.com

„HTML lernen leicht gemacht: Barrierefreiheit (Accessibility)“ weiterlesen

HTML lernen leicht gemacht: Textformatierung und Strukturierung

In diesem Blogartikel erkläre Textformatierung und Strukturierung mit HTML.

Überschriften <h1> bis <h6>

In HTML gibt es sechs verschiedene Überschriften-Tags, die von <h1> (die wichtigste und größte Überschrift) bis <h6> (die kleinste und am wenigsten wichtige Überschrift) reichen. Überschriften-Tags (<h1> bis <h6>) sind wichtig, um den Inhalt einer Webseite zu strukturieren und zu organisieren. Sie helfen nicht nur den Besuchern der Seite, den Inhalt besser zu verstehen, sondern sind auch für Suchmaschinen und Screenreader wichtig.
<h1>: Hauptüberschrift, die wichtigste Überschrift auf einer Seite.

Beispiel:

<h1>Dies ist eine Hauptüberschrift</h1>

<h2>: Unterüberschrift, weniger wichtig als <h1>.

Beispiel:

<h2>Dies ist eine Unterüberschrift</h2>
<h3>: Noch eine Ebene niedriger.</h3>

Beispiel:

<h3>Dies ist eine dritte Überschriftsebene</h3>

„HTML lernen leicht gemacht: Textformatierung und Strukturierung“ weiterlesen

HTML lernen leicht gemacht: Einführung in HTML

In diesem Blogartikel gibt es eine Einführung in HTML.

HTML steht für HyperText Markup Language. Es ist die grundlegende Sprache, die zum Erstellen von Webseiten verwendet wird.

Grundlage des Webs

HTML ist die Sprache, die das Grundgerüst jeder Webseite bildet. Jede Webseite, die Sie im Internet sehen, wird mit HTML erstellt.

HTML-Datei in Visual Studio Code erstellen

Starten Sie Visual Studio Code, indem Sie das Programm aus deinem Startmenü oder der Taskleiste öffnen.

Neues Projekt oder Ordner erstellen

Falls Sie ein neues Projekt beginnen möchten, können entweder ein neues Verzeichnis erstellen oder ein bestehendes Projekt öffnen. Gehen Sie dazu zu Datei > Ordner öffnen… und wähle Sie den Ordner aus, in dem Sie arbeiten möchtest.

Neue HTML-Datei erstellen

Klicken Sie im Datei-Explorer von Visual Studio Code mit der rechten Maustaste (oder drücken von Strg + N), um ein neues Dokument zu erstellen.
Geben Sie einen Dateinamen ein, der mit der Erweiterung .html endet. Zum Beispiel: index.html.

Aufbau des Dateinamens einer HTML-Datei

  • Name der Datei:
    • Dies ist der eigentliche Name Ihrer Datei. Der Name kann nahezu beliebig gewählt werden, sollte aber aussagekräftig und leicht verständlich sein. Zum Beispiel: index, about, contact, etc.
    • Vermeiden Sie Leerzeichen und Sonderzeichen im Dateinamen. Stattdessen können Sie Bindestriche oder Unterstriche verwenden, z.B. meine-seite oder meine_seite.
  • Erweiterung .html:
    • Die Erweiterung .html zeigt an, dass es sich um eine HTML-Datei handelt. Diese Erweiterung ist notwendig, damit der Browser und andere Programme erkennen, dass es sich um eine Webseite handelt, die im HTML-Format geschrieben ist.

Beispiele:

    • index.html: Hier ist index der Dateiname und .html die Erweiterung. Dies ist eine typische Bezeichnung für die Startseite einer Webseite.
    • about.html: Hier ist about der Dateiname und .html die Erweiterung. Dies könnte eine Seite sein, die Informationen über Sie oder Ihr Unternehmen enthält.
    • contact.html: Hier ist contact der Dateiname und .html die Erweiterung. Dies könnte eine Seite sein, die Kontaktdaten oder ein Kontaktformular enthält.

Markup Language

Eine Markup-Sprache verwendet spezielle Codes, sogenannte „Tags“, um den Inhalt einer Webseite zu strukturieren und zu formatieren. Diese Tags geben an, wie Text, Bilder, Links und andere Elemente auf der Seite angezeigt werden sollen.

Tags und Elemente

HTML verwendet Tags, die in spitzen Klammern (< >) stehen. Ein einfaches Beispiel ist das <p>-Tag, das für einen Absatz steht. Der Text, der innerhalb dieser Tags steht, wird als Absatz formatiert.

Beispiel:

<p>Das ist ein Absatz.</p>

„HTML lernen leicht gemacht: Einführung in HTML“ weiterlesen

HTML lernen leicht gemacht: Ein inklusiver Kurs für alle

In dieser Blogartikelreihe möchte ich die Grundlagen von HTML Erklären.

Warum dieser Kurs?

Barrierefreies Webdesign bedeutet, dass Webseiten so programmiert werden, dass alle Menschen, auch Menschen mit Behinderungen und anderen körperlichen Einschränkungen, eine Webseite bedienen und wahrnehmen können. Für Web-Entwickler ohne Behinderung ist das oft eine große Herausforderung. Deswegen ist es schlau, Menschen mit Behinderungen das Entwickeln von Webseiten beizubringen. Wenn zum Beispiel blinde Menschen Webseiten programmieren, können sie selbst darauf achten, dass die Webseite danach barrierefrei ist.

Was ist Inklusion?

Inklusion bedeutet, dass Menschen mit und ohne Behinderung die gleichen Chancen und Möglichkeiten haben, in allen Bereichen des Lebens aktiv teilzunehmen. Das Ziel von Inklusion ist, Barrieren abzubauen und sicherzustellen, dass alle Menschen gleichermaßen integriert und wertgeschätzt werden.

  • Kindergarten und Schule: Kinder mit und ohne Behinderung lernen und spielen zusammen. Sie besuchen die gleichen Kindergärten und Schulen, wodurch sie von Anfang an gemeinsam aufwachsen und voneinander lernen.
  • Arbeitsleben: Inklusion im Arbeitsleben bedeutet, dass Menschen mit Behinderung die gleichen Arbeitsmöglichkeiten haben wie Menschen ohne Behinderung. Sie arbeiten in den gleichen Teams und Unternehmen und tragen gemeinsam zum Erfolg bei.

Inklusion im Webdesign bedeutet, Webseiten so zu gestalten, dass sie für alle Menschen zugänglich und nutzbar sind, unabhängig von ihren Fähigkeiten. Dies schließt auch Menschen mit Behinderungen ein, wie blinde oder sehbehinderte Menschen, die oft die größten Herausforderungen haben, wenn eine Webseite nicht barrierefrei ist.

Inklusion fördert ein respektvolles und unterstützendes Miteinander. Sie hilft, Vorurteile abzubauen und sorgt dafür, dass alle Menschen unabhängig von ihren Fähigkeiten gleichberechtigt am gesellschaftlichen Leben teilhaben können.

Zielgruppe dieses HTML-Kurses

Die vielen tollen Lernvideos und Videokurse, die es im Internet gibt, sind für blinde Menschen nicht wahrnehmbar. Damit blinde Menschen die Möglichkeit haben, die Web-Entwicklung zu lernen, starte ich diesen Kurs zum Erlernen von HTML. Danach wird es noch einen Kurs zu den Grundlagen von CSS geben.

Zielgruppe dieses HTML-Kurses sind blinde Menschen die HTML lernen möchten. Da wir aber im Zeitalter der Inklusion leben, dürfen alle Menschen, auch Menschen ohne Behinderung, mit diesem Kurs HTML lernen !

Selbstverständlich wird auch die digitale Barrierefreiheit, bei den Themen wo Sinn macht, erklärt.
„HTML lernen leicht gemacht: Ein inklusiver Kurs für alle“ weiterlesen

HTML lernen leicht gemacht: Die Entwicklungsumgebung Visual Studio Code

In diesem Blogartikel erkläre ich die Installation und grundsätzliche Bedienung der Entwicklungsumgebung Visual Studio Code.

Was ist Visual Studio Code?

Visual Studio Code (oft einfach VS Code genannt) ist ein kostenloser, leichtgewichtiger und leistungsstarker Texteditor, der speziell für Programmierer entwickelt wurde. Hier sind die wesentlichen Punkte leicht verständlich erklärt:

  1. Texteditor für Programmierer: VS Code ist ein Programm, in dem man Code schreiben kann, ähnlich wie man in einem Textverarbeitungsprogramm wie Word Texte schreibt. Es ist jedoch speziell dafür gemacht, um Programmiersprachen wie HTML, JavaScript, Python und viele andere zu unterstützen.
  2. Kostenlos und Open-Source: Das Programm ist kostenlos verfügbar und kann von jedem heruntergeladen und genutzt werden. Es ist auch Open-Source, was bedeutet, dass der Quellcode von jedem eingesehen und verbessert werden kann.
  3. Plattformübergreifend: VS Code funktioniert auf verschiedenen Betriebssystemen, einschließlich Windows, macOS und Linux. Egal welches Betriebssystem man benutzt, VS Code läuft darauf.
  4. Erweiterbar: Man kann VS Code mit vielen zusätzlichen Funktionen ausstatten, indem man Erweiterungen installiert. Diese Erweiterungen können das Programmieren erleichtern, indem sie beispielsweise Code-Vervollständigungen anbieten oder das Arbeiten mit bestimmten Programmiersprachen verbessern.
  5. Intuitive Benutzeroberfläche: VS Code bietet eine benutzerfreundliche Oberfläche, die leicht zu navigieren ist. Es gibt verschiedene Bereiche, wie z.B. den Explorer zum Anzeigen von Dateien, den Editor zum Schreiben von Code und das Terminal zum Ausführen von Befehlen.
  6. Live-Vorschau: Eine besonders nützliche Funktion für HTML-Entwicklung ist die Möglichkeit, die Änderungen sofort zu sehen. Mit einer Erweiterung namens „Live Server“ kann man seine Webseite im Browser öffnen und jede Änderung, die man in VS Code macht, wird sofort im Browser aktualisiert.

„HTML lernen leicht gemacht: Die Entwicklungsumgebung Visual Studio Code“ weiterlesen