HTML 1 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

➤ 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.
Zeichenkodierung - Schriftzeichen richtig darstellen
Quelltext mit Format
Es gibt gute Gründe einen Quelltext zu formatieren und zu kommentieren.
Quelltext mit Format
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.
ASCII, Sonderzeichen, Unicode, ...

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.
Visual Studio Code - 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 ✶✶✶✶
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!
HTML - Seite: 1 2

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. HTML - Dialog-Box

!

  1. <!-- --> Kommentar

A

  1. <a> Verweis
  2. <abbr> Abkürzung
  3. <adress> Adresse
  4. <area> Areal (Verweis-sensitive Grafik)
  5. <article> Artikel
  6. <aside> Nebeninhalt
  7. <audio> Audio-Datei

B

  1. <b> Hervorheben (Physische Auszeichnung)
  2. <base> Basis-URL
  3. <bdi> Textrichtung
  4. <bdo> Textrichtung
  5. <blockquote> Block-Zitat
  6. <body> Textkörper
  7. <br> Zeilenumbruch
  8. <button> Button

C

  1. <canvas> Zeichnen
  2. <caption> Tabellenüberschrift
  3. <cite> Zitat
  4. <code> Logische Auszeichnung
  5. <col> Tabellenspalten vordefinieren
  6. <colgroup> Tabellenspalten vordefinieren

D

  1. <datalist> Datenliste
  2. <del> Logische Auszeichnung
  3. <details> Details
  4. <dfn> Logische Auszeichnung
  5. <dialog> Dialog Element
  6. <div> Allgemeines Block-Element
  7. <dd> Definitionsliste
  8. <dl> Definitionsliste
  9. <dt> Definitionsliste
  10. <doctype> Dokumententyp

E

  1. <em> Emphatischer Ausdruck
  2. <embed>Externe Anwendung

F

  1. <fieldset> Formularelemente gruppieren
  2. <figcaption> Beschriftung
  3. <figure> Abbildung
  4. <footer> Fußbereich
  5. <form> Formular

H

  1. <h1>-<h6> Überschrift
  2. <head> Kopfdaten
  3. <header> Kopfbereich
  4. <hgroup> Überschriften gruppieren
  5. <hr> Trennlinie
  6. <html> HTML

I

  1. <i> Kursiv (Physische Auszeichnung)
  2. <iframe> Eingebettetes Framefenster
  3. <img> Grafikreferenz
  4. <input> Eingabe (Formularelement)
  5. <ins> Logische Auszeichnung

K

  1. <kbd> Tastatureingabe

L

  1. <label> Etikett
  2. <legend> Gruppenüberschrift
  3. <li> Listenelement
  4. <link> Logische Beziehung

M

  1. <main> Hauptinhalt der Seite
  2. <map> Verweis-sensitive Grafik
  3. <mark> Physische Auszeichnung
  4. <meta> Meta-Angaben
  5. <meter> Meter

N

  1. <nav> Navigationsbereich
  2. <noscript> Kein JavaScript!

O

  1. <object> Objekt
  2. <ol> Nummerierte Liste
  3. <optgroup> Auswahlliste - Optionsgruppe
  4. <option> Option - Auswahlliste/Datenliste
  5. <output> Ausgabe

P

  1. <p> Textabsatz
  2. <param> Parameter
  3. <pre> Präformatierter Text
  4. <progress> Fortschrittsanzeige

Q

  1. <q> Logische Auszeichnung

R

  1. <rp> Ruby Anmerkung
  2. <rt> Ruby Anmerkung
  3. <ruby> Ruby Anmerkung

S

  1. <s> Physische Auszeichnung
  2. <samp> Logische Auszeichnung
  3. <script> JavaScript
  4. <section> Abschnitt
  5. <select> Auswahlliste (Formularelement)
  6. <small> Physische Auszeichnung
  7. <source> Quelle
  8. <span> Allgemeines Inline-Element
  9. <strong> Stark betonter Inhalt
  10. <style> CSS
  11. <sub> Physische Auszeichnung
  12. <summary> Überschrift
  13. <sup> Physische Auszeichnung

T

  1. <table> Tabelle
  2. <td> Tabellenspalte
  3. <tr> Tabellenzeile
  4. <tbody> Tabellenkörper
  5. <tfoot> Tabellenfuß
  6. <th> Tabellenkopf
  7. <thead> Tabellenkopf
  8. <textarea> Mehrzeiliger Eingabebereich
  9. <time> Zeit
  10. <title> Seitentitel

U

  1. <u> Unterstreichen (Physische Auszeichnung)
  2. <ul> Aufzählungsliste

V

  1. <var> Logische Auszeichnung
  2. <video> Video-Datei

W

  1. <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>

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

HTML - Seite: 1 2