HTML 1 2 Grundlagen Tipps Bausteine Formulare 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 / Grafik]
 HTML im Einsatz

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

Aufbau eines HTML 5 - Dokuments - Hier wird beschrieben wie ein HTML 5 - Dokument aufgebaut ist.

HTML 5 - Angaben im Dokument - Durch die Verwendung von HTML 5 ändern sich einige Angaben im Dokument, diese werden vor allem kürzer und einfacher.

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.
Zeichenkodierung - Schriftzeichen richtig darstellen
Quelltext mit Format
Es gibt gute Gründe einen Quelltext zu formatieren und zu kommentieren.
Quelltext mit Format
Fehler im HTML- und CSS-Quelltext erkennen und validieren
Leider werden Fehler in HTML oder CSS oft nicht im Browser angezeigt. Die Browser überbügeln viele Fehler d.h. die Browser sind auf den Kompatibilitätsmodus „Quirks” eingestellt. Und dieser lässt fast jede Sünde des Webmasters durch.

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

ASCII, Sonderzeichen, Unicode, ...

Tipps

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.
Mobile Geräte - Anzeige richtig einstellen
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.
Metadaten entschlüsselt

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

Top-Level Domains  - Länderkürzel
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.
Favicon erstellen - Ihr Logo in den Lesezeichen
Lauftext / Laufschrift - Marquee Tipp
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.
Lauftext / Laufschrift Marquee - Da rollt der Zug!

Bausteine  Alle Anzeigen

Eine Übersicht der HTML-Elemente mit vielen Beispielen dazu.

!  A  B  C  D  E  F  H  I  K  L  M  N  O  P  Q  R  S  T  U  V  W 
    !
  1. <!-- --> Kommentar
  2. A
  3. <a> Verweis
  4. <abbr> Abkürzung
  5. <adress> Adresse
  6. <area> Areal (Verweis-sensitive Grafik)
  7. <article> Artikel
  8. <aside> Nebeninhalt
  9. <audio> Audio-Datei
  10. B
  11. <b> Hervorheben (Physische Auszeichnung)
  12. <base> Basis-URL
  13. <bdi> Textrichtung
  14. <bdo> Textrichtung
  15. <blockquote> Block-Zitat
  16. <body> Textkörper
  17. <br> Zeilenumbruch
  18. <button> Button
  19. C
  20. <canvas> Zeichnen
  21. <caption> Tabellenüberschrift
  22. <cite> Zitat
  23. <code> Logische Auszeichnung
  24. <col> Tabellenspalten vordefinieren
  25. <colgroup> Tabellenspalten vordefinieren
  26. D
  27. <datalist> Datenliste
  28. <del> Logische Auszeichnung
  29. <details> Details
  30. <dfn> Logische Auszeichnung
  31. <dialog> Dialog Element
  32. <div> Allgemeines Block-Element
  33. <dd> Definitionsliste
  34. <dl> Definitionsliste
  35. <dt> Definitionsliste
  36. <doctype> Dokumententyp
  37. E
  38. <em> Emphatischer Ausdruck
  39. <embed>Externe Anwendung
  40. F
  41. <fieldset> Formularelemente gruppieren
  42. <figcaption> Beschriftung
  43. <figure> Abbildung
  44. <footer> Fußbereich
  45. <form> Formular
  46. H
  47. <h1>-<h6> Überschrift
  48. <head> Kopfdaten
  49. <header> Kopfbereich
  50. <hgroup> Überschriften gruppieren
  51. <hr> Trennlinie
  52. <html> HTML
  53. I
  54. <i> Kursiv (Physische Auszeichnung)
  55. <iframe> Eingebettetes Framefenster
  56. <img> Grafikreferenz
  57. <input> Eingabe (Formularelement)
  58. <ins> Logische Auszeichnung
  59. K
  60. <kbd> Tastatureingabe
  61. L
  62. <label> Etikett
  63. <legend> Gruppenüberschrift
  64. <li> Listenelement
  65. <link> Logische Beziehung
  66. M
  67. <main> Hauptinhalt der Seite
  68. <map> Verweis-sensitive Grafik
  69. <mark> Physische Auszeichnung
  70. <meta> Meta-Angaben
  71. <meter> Meter
  72. N
  73. <nav> Navigationsbereich
  74. <noscript> Kein JavaScript!
  75. O
  76. <object> Objekt
  77. <ol> Nummerierte Liste
  78. <optgroup> Auswahlliste - Optionsgruppe
  79. <option> Option - Auswahlliste/Datenliste
  80. <output> Ausgabe
  81. P
  82. <p> Textabsatz
  83. <param> Parameter
  84. <pre> Präformatierter Text
  85. <progress> Fortschrittsanzeige
  86. Q
  87. <q> Logische Auszeichnung
  88. R
  89. <rp> Ruby Anmerkung
  90. <rt> Ruby Anmerkung
  91. <ruby> Ruby Anmerkung
  92. S
  93. <s> Physische Auszeichnung
  94. <samp> Logische Auszeichnung
  95. <script> JavaScript
  96. <section> Abschnitt
  97. <select> Auswahlliste (Formularelement)
  98. <small> Physische Auszeichnung
  99. <source> Quelle
  100. <span> Allgemeines Inline-Element
  101. <strong> Stark betonter Inhalt
  102. <style> CSS
  103. <sub> Physische Auszeichnung
  104. <summary> Überschrift
  105. <sup> Physische Auszeichnung
  106. T
  107. <table> Tabelle
  108. <td> Tabellenspalte
  109. <tr> Tabellenzeile
  110. <tbody> Tabellenkörper
  111. <tfoot> Tabellenfuß
  112. <th> Tabellenkopf
  113. <thead> Tabellenkopf
  114. <textarea> Mehrzeiliger Eingabebereich
  115. <time> Zeit
  116. <title> Seitentitel
  117. U
  118. <u> Unterstreichen (Physische Auszeichnung)
  119. <ul> Aufzählungsliste
  120. V
  121. <var> Logische Auszeichnung
  122. <video> Video-Datei
  123. W
  124. <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>

Formulare

Formulare - Das Internet ist heutzutage ohne Formulare fast undenkbar. Bestellungen absenden, Adressen übermitteln, Feedback erhalten, Weiterempfehlung versenden, Suchanfragen anbieten oder Umfragen erstellen sind nur einige der Möglichkeiten.

Formulare

Eingabefelder - Einzeilige Eingabefelder dienen zur Aufnahme von Wörtern oder Zahlen.
Textbereiche - (Mehrzeilige Eingabefelder) bieten dem Benutzer die Möglichkeit einen längeren Text einzugeben.
Buttons - Buttons um Formulare abzusenden oder um eine Funktion auszuführen.

Formular Generator - In nur 3 Schritten zum fertigen Formular Für Webentwickler
Das erstellte PHP-Formular ist universell einsetzbar, die Daten können zum Beispiel als E-Mail gesendet, in einer Datei oder Datenbank gespeichert werden. Der Formular Generator erzeugt nach Ihren Einstellungen ein individuelles und valides Formular.
Formular Generator - In nur 3 Schritten zum fertigen Formular
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).

Alle Links mit Bewertungen anzeigen
In die Linkliste eintragen

HTML - Seite: 1 2