Schlagwort: HTML

HTML lernen leicht gemacht: Best Practices

In diesem Blogartikel zeige ich bewährte Methoden, um guten HTML-Code zu schreiben.

Best Practices sind bewährte Methoden. HTML (HyperText Markup Language) ist die Grundlage jeder Webseite. Um effektive und gut strukturierte Webseiten zu erstellen, ist es wichtig, Best Practices zu befolgen. In diesem Artikel schauen wir uns an, wie man sauberen und verständlichen HTML-Code schreibt, Kommentare hinzufügt, den Code debuggt und validiert.

Sauberes und verständliches Code-Schreiben

Ein sauberer und verständlicher HTML-Code ist nicht nur für Sie als Entwickler wichtig, sondern auch für andere, die eventuell mit Ihrem Code arbeiten. Hier sind einige Tipps, um dies zu erreichen:

  • Eindeutige Tags und Attribute: Verwenden Sie eindeutige und beschreibende Tags und Attribute, um den Zweck jedes Elements klarzumachen.
  • Einheitliche Einrückung: Nutzen Sie Einrückungen, um die Struktur Ihres HTML-Codes klar zu zeigen. Dies hilft, den Code besser lesbar zu machen.
  • Sinnvolle Klassen- und ID-Namen: Vergeben Sie sprechende Namen für Klassen und IDs, die den Inhalt oder die Funktion der Elemente beschreiben.
Tastatur mit einer Taste auf der Barrierefrei steht
Quelle: Edler von Rabenstein – 252045538 / Shutterstock.com

„HTML lernen leicht gemacht: Best Practices“ weiterlesen

HTML lernen leicht gemacht: Semantische HTML5-Elemente

In diesem Blogartikel erkläre ich, was semantische HTML5-Elemente sind und warum sie diese einsetzen sollten.

Semantische HTML5-Elemente: Strukturierende Elemente für eine bessere Web-Erfahrung

HTML5 hat die Webentwicklung revolutioniert, indem es neue, semantische Elemente eingeführt hat. Diese Elemente helfen nicht nur Entwicklern dabei, den Code klarer und besser strukturiert zu schreiben, sondern verbessern auch die Zugänglichkeit und das SEO-Ranking von Webseiten. In diesem Artikel werfen wir einen Blick auf die wichtigsten strukturierenden HTML5-Elemente und deren Bedeutung.

Was sind semantische Elemente?

Semantische HTML-Elemente sind spezielle Tags, die den Inhalt einer Webseite strukturieren und dabei eine klare Bedeutung vermitteln. Anders als generische Container wie <div> oder <span> beschreiben semantische Elemente den Zweck und die Rolle des Inhalts, den sie umschließen. Zum Beispiel deutet ein <header>-Element darauf hin, dass es sich um einen Kopfbereich handelt, während ein <article>-Element anzeigt, dass es sich um einen eigenständigen Inhalt oder Beitrag handelt.

Die Verwendung semantischer Elemente bringt mehrere Vorteile mit sich:

      1. Verbesserte Lesbarkeit und Wartbarkeit: Der Code wird für Entwickler verständlicher und leichter zu pflegen, da die Struktur und der Zweck der Inhalte klarer ersichtlich sind.
      2. Bessere Barrierefreiheit: Screenreader und andere Hilfstechnologien können die Struktur einer Webseite besser interpretieren und Nutzern mit Behinderungen eine bessere Navigation ermöglichen.
      3. SEO-Vorteile: Suchmaschinen können den Inhalt einer Webseite besser analysieren und indexieren, was zu einem höheren Ranking in den Suchergebnissen führen kann.
Tastatur mit einer Taste auf der Barrierefrei steht
Quelle: Edler von Rabenstein – 252045538 / Shutterstock.com

„HTML lernen leicht gemacht: Semantische HTML5-Elemente“ weiterlesen

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: 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: 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

Barrierefreie HTML-Tabellen erstellen

In diesem Blogartikel zeige ich, wie Sie eine HTML-Tabelle barrierefrei gestalten können nach der Richtlinie EN 301 549.

Der Prüfschritt für diesen Blogartikel in der EN 301 549 heißt: 9.1.3.1e. Datentabellen richtig aufgebaut.

Als erstes der HTML-Code:

<table>
  <thead>
    <tr>
      <th>Screenreader</th>
      <th>Betriebssystem</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>NVDA</td>
      <td>Windows</td>
    </tr>
    <tr>
      <td>Orca</td>
      <td>Ubuntu</td>
    </tr>
    <tr>
      <td>Voice Over</td>
      <td>IOS</td>
    </tr>
    <tr>
      <td>Talkback</td>
      <td>Android</td>
    </tr>
  </tbody>
</table>

„Barrierefreie HTML-Tabellen erstellen“ weiterlesen

Barrierefreie Quiz App programmieren – Anleitung

Ich in diesem Blogartikel erkläre ich wie Sie mit HTML, CSS und Javascript eine barrierefreie progressive Quiz App programmieren können.

Multiple Choice Quiz – Was ist das?

Kennen Sie die Fernsehsendungen „Wer wird Millionär?“, „Gefragt – Gejagt“ oder „Quizduell – Der Olymp“. In diesen Fernsehsendungen wird eine Frage gestellt und es gibt 3 oder 4 Antwortmöglichkeiten. Diese Art von Quiz nennt sich Multiple Choice Quiz. In diesem Blogartikel erkläre ich Ihnen wie Sie einen barrierefreien Multiple Choice Quiz mit HTML, CSS und Javascript programmieren können. Für Entwickler die Grundkenntnisse in der Programmiersprache Javascript besitzen, ist es sehr einfach mehrere Quiz-Apps mit unterschiedlichen Themen zu programmieren.

Was ist ein barrierefreies Quiz?

Ein barrierefreies Quiz ist ein Quiz dass auch von Menschen mit unterschiedlichen körperlichen Einschränkungen und Behinderung genutzt werden kann. In diesem Blogartikel wird gezeigt wie ein barrierefreies Quiz mit HTML, CSS und JavaScript programmiert wird.

Ziel des Blogartikels

Das Ziel des Blogartikels ist es, Ihnen eine Anleitung zu geben, mit der Sie sehr schnell barrierefreie progressive Quiz Apps selbst programmieren können mit unterschiedlichen Themen und unterschiedlichen Aussehen. Los geht es! So sieht die App aus die wir jetzt gemeinsam programmieren:

Die barrierefreie App Marlems Quiz gestartet auf einem Smartphone mit Betriebssystem Android
Die barrierefreie App Marlems Quiz gestartet auf einem Smartphone mit Betriebssystem Android

„Barrierefreie Quiz App programmieren – Anleitung“ weiterlesen

Web Formulare barrierefrei programmieren / coden – Eine ausführliche Anleitung

In diesem Blogartikel erkläre ich sehr ausführlich wie Sie Web Formulare barrierefrei programmieren / coden können.

Web-Formulare sind noch immer sehr wichtig. Leider ignorieren die gängigen Anleitungen wie man Web-Formulare programmieren soll, die Barrierefreiheit. Gemeindeverwaltungen, Landratsämter, Finanzämter und Regierungspräsidien sind aber nach § 12a Barrierefreie Informationstechnik Behindertengleichstellungsgesetz – BGG zur digitalen Barrierefreiheit verpflichtet. Deswegen zeige ich in diesem Blogartikel wie ein barrierefreies Web-Formular mit HTML und CSS programmiert wird nach der europäischen Norm 301 549.

„Web Formulare barrierefrei programmieren / coden – Eine ausführliche Anleitung“ weiterlesen