HTML 2 Grundlagen Tipps Bausteine Links
HTML ist eine Auszeichnungssprache — HTML-Code formt Webseiten, gibt ihnen Inhalt und Struktur und das weltweit.
Daher kommen Sie um HTML-Wissen kaum herum, wenn Sie eigene Webseiten auf die Beine stellen möchten
(HTML = Hypertext Markup Language
= Hypertext-Auszeichnungssprache).
✔ Zahlreiche Editoren für das erstellen von Webseiten gibt es, ohne das man einen HTML-Tag (sprich: „Täg” (Tag = Etikett, Marke)) eingeben muss. Möchte man selbst im Quelltext etwas ändern, sind Kenntnisse in HTML erforderlich.
![[Bildschirmfoto]
HTML im Einsatz [Bildschirmfoto]
HTML im Einsatz](img/erstellung_html.png)
➤ HTML wird in erster Linie dazu genutzt dem Browser mitzuteilen welche Elemente die Seite enthält. Für die Festlegung wie diese Elemente auszusehen haben und wo diese positioniert sind wendet man CSS an.
➤ Um nun den HTML-Code richtig einsetzen zu können finden sich dazu zahlreiche Dokumentationen im Web. Das bekannte deutsche selfHTML , das englischsprachige w3schools.com und das Mozilla Developer Network.
Den HTML-Quelltext Ihrer Website können Sie mit folgenden Validatoren überprüfen lassen: validator.w3.orgoder html5.validator.nu
• In der Linkliste finden Sie weitere Links zum Thema HTML.
Abonniere meinen RSS-Feed
um über aktuelle Seiten benachrichtigt zu werden.
Grundlagen
- Strukturierter Aufbau einer Webseite
- So sollte der grundlegende Aufbau einer Webseite aussehen.
- Aufbau eines HTML 5 - Dokuments - Hier wird beschrieben wie ein HTML 5 - Dokument aufgebaut ist.
- Zeichenkodierung - Schriftzeichen richtig darstellen Tutorial ✶✶✶✶
- Oft werden Umlaute, Akzentzeichen oder andere fehlerhafte Zeichen auf der Webseite angezeigt. Auch der Inhalt einer E-Mail, vom Kontaktformular der Website, kann falsche Umlautzeichen enthalten. Beispiele um diese Zeichen in der richtigen Zeichenkodierung darzustellen.

- Quelltext mit Format
- Es gibt gute Gründe einen Quelltext zu formatieren und zu kommentieren.

- ASCII, Sonderzeichen, Unicode - ... Steuerzeichen, Escape-Codes, und Binärzahlen
- Unicode gibt jedem Zeichen seine eigene Nummer damit diese auf anderen Computern (mit einem anderen Zeichensatz) richtig dargestellt werden können.

Tipps
- Visual Studio Code - Tipps ✶✶✶✶
- Mit den Tipps können Sie direkt einsteigen und lernen, wie Sie mit Visual Studio Code produktiv sein können.

- Mobile Geräte - Anzeige richtig einstellen ✶✶✶✶
- Dies ist eine wichtige Optimierung wie die Website zur Anzeige auf einem mobilen Endgerät angepasst werden kann. Das Meta-Element: viewport sorgt für eine korrekte Skalierung der Website beim ersten Aufruf auf dem mobilen Gerät.

- Metadaten entschlüsselt Tutorial ✶✶✶✶
- Metadaten sollen vor allem die Durchsuchbarkeit einer einzelnen Webseite verbessern. Außerdem lassen sich mithilfe von Metadaten spezielle Anweisungen zur Steuerung der Suchroboter von Suchmaschinen notieren.

- Top-Level Domains - Länderkürzel
- Die Internationalen Top-Level Domains.

- Favicon erstellen - Ihr Logo in den Lesezeichen (Favoriten) Tipp ✶✶✶✶
- Das Favoriten Icon wird bei einem Bookmark in die Favoritenliste aufgenommen. Dort erscheint zukünftig die „gebookmarkte” Webseite mit einem eigenen Symbol.

- Lauftext / Laufschrift - Marquee ✶✶✶✶
- Sie können erreichen, dass ein Text (oder ein Bild) mitten im übrigen Text automatisch horizontal oder vertikal scrollt. Diese Angaben gehören nicht zum HTML-Standard und wurden ursprünglich nur vom I. Explorer interpretiert. Mittlerweile setzen auch alle anderen Browser das Marquee-Element um.

Bausteine Alle Anzeigen
Eine Übersicht der HTML-Elemente mit vielen Beispielen dazu.
- <!-- --> Kommentar
- <a> Verweis
- <abbr> Abkürzung
- <adress> Adresse
- <area> Areal (Verweis-sensitive Grafik)
- <article> Artikel
- <aside> Nebeninhalt
- <audio> Audio-Datei
- <b> Hervorheben (Physische Auszeichnung)
- <base> Basis-URL
- <bdi> Textrichtung
- <bdo> Textrichtung
- <blockquote> Block-Zitat
- <body> Textkörper
- <br> Zeilenumbruch
- <button> Button
- <canvas> Zeichnen
- <caption> Tabellenüberschrift
- <cite> Zitat
- <code> Logische Auszeichnung
- <col> Tabellenspalten vordefinieren
- <colgroup> Tabellenspalten vordefinieren
- <datalist> Datenliste
- <del> Logische Auszeichnung
- <details> Details
- <dfn> Logische Auszeichnung
- <dialog> Dialog Element
- <div> Allgemeines Block-Element
- <dd> Definitionsliste
- <dl> Definitionsliste
- <dt> Definitionsliste
- <doctype> Dokumententyp
- <fieldset> Formularelemente gruppieren
- <figcaption> Beschriftung
- <figure> Abbildung
- <footer> Fußbereich
- <form> Formular
- <h1>-<h6> Überschrift
- <head> Kopfdaten
- <header> Kopfbereich
- <hgroup> Überschriften gruppieren
- <hr> Trennlinie
- <html> HTML
- <i> Kursiv (Physische Auszeichnung)
- <iframe> Eingebettetes Framefenster
- <img> Grafikreferenz
- <input> Eingabe (Formularelement)
- <ins> Logische Auszeichnung
- <kbd> Tastatureingabe
- <main> Hauptinhalt der Seite
- <map> Verweis-sensitive Grafik
- <mark> Physische Auszeichnung
- <meta> Meta-Angaben
- <meter> Meter
- <nav> Navigationsbereich
- <noscript> Kein JavaScript!
- <object> Objekt
- <ol> Nummerierte Liste
- <optgroup> Auswahlliste - Optionsgruppe
- <option> Option - Auswahlliste/Datenliste
- <output> Ausgabe
- <p> Textabsatz
- <param> Parameter
- <pre> Präformatierter Text
- <progress> Fortschrittsanzeige
- <q> Logische Auszeichnung
- <s> Physische Auszeichnung
- <samp> Logische Auszeichnung
- <script> JavaScript
- <section> Abschnitt
- <select> Auswahlliste (Formularelement)
- <small> Physische Auszeichnung
- <source> Quelle
- <span> Allgemeines Inline-Element
- <strong> Stark betonter Inhalt
- <style> CSS
- <sub> Physische Auszeichnung
- <summary> Überschrift
- <sup> Physische Auszeichnung
- <table> Tabelle
- <td> Tabellenspalte
- <tr> Tabellenzeile
- <tbody> Tabellenkörper
- <tfoot> Tabellenfuß
- <th> Tabellenkopf
- <thead> Tabellenkopf
- <textarea> Mehrzeiliger Eingabebereich
- <time> Zeit
- <title> Seitentitel
- <wbr> Zeilenumbruch erlauben
➤ Die folgenden Elemente sind als missbilligt eingestuft, das heißt, sie sollen in Zukunft aus dem HTML-Standard entfernt werden und sind nicht mehr in HTML 5 vorhanden.
<acronym> <applet> <basefont> <big> <blink> <center> <dir> <font> <frame> <frameset> <isindex> <listing> <marquee> <nobr> <noframes> <plaintext> <spacer> <strike> <tt> <xmp>
Links zum Thema HTML Alle anzeigen
- developer.mozilla.org ✶✶✶✶✶
- HTML (HyperText Markup Language) ist der grundlegendste Baustein des Webs.
- emojipedia.org ✶✶✶✶✶
- Emojipedia — Heimat der Emoji-Bedeutungen
- html5gallery.com ✶✶✶✶✶
- HTML5 Entwürfe der W3C Spezifikation (englisch).
- html5pattern.com ✶✶✶✶✶
- Seite mit den in HTML5 verwendeten Eingabe-Muster (pattern="[a-z]{3}", englisch).
- webkompetenz.wikidot.com ✶✶✶✶✶
- Geschriebenes und Dahingeschriebenes von Stefan Münz
- html5doctor.com
- HTML5 Doctor (englisch).
- w3.org
- W3C (World Wide Web Consortium) (englisch).
- whatwg.org
- WHATWG (Web Hypertext Application Technology Working Group) (englisch).
- html5rocks.com
- HTML5 rocks! (englisch).