HTML Grundlagen Tipps Elemente 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.

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

Metadaten entschlüsselt - 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) ✶✶✶
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
Sitemaps-Protokoll für Suchmaschinen automatisch erstellen ✶✶✶✶
Sorgen Sie dafür, dass die Nutzer auf einen größeren Teil Ihrer Website aufmerksam werden mit einem „Sitemaps-Protokoll”. Dies stellt eine einfache Möglichkeit für Webmaster dar, Suchmaschinen Seiten auf Ihrer Website zu melden, die zum durchsuchen verfügbar sind.
Sitemaps-Protokoll für Suchmaschinen automatisch erstellen
10 Regeln zu Dateinamen ✶✶✶✶
Die Entscheidung, wie Sie die Dateien und Verzeichnisse (Ordner) auf Ihrer Website benennen ist nicht ganz Ihnen überlassen. Es gibt einiges, worauf Sie bei dieser Wahl achten müssen.
10 Regeln zu Dateinamen
RSS-Feed selbst erstellen ✶✶✶✶
Ein RSS-Feed lässt sich, mit wenigen Codezeilen, einfach selbst erstellen. Diese stellen in erster Linie ein vorzügliches Instrument dar, den Bekanntheitsgrad einer Website zu steigern.
RSS-Feed selbst erstellen
Fehler 404 mit .htaccess abfangen ✶✶✶
Eine Website wird öfters umgebaut, Seiten kommen hinzu, andere Seiten werden entfernt oder bekommen eine neue Adresse. Eine selbst gestaltete Fehler-Weiterleitungsseite, leitet den Besucher sicher zum Angebot der Webseite.
Fehler 404 mit .htaccess abfangen
.htaccess - Passwortschutz für Webseiten ✶✶✶
Mit einer .htaccess Datei und einer .htpasswd Passwort-Datei lassen sich bestimmte Verzeichnisse und die darin enthaltenen Dateien vor unerlaubtem Zugriff schützen.

Server Fehlermeldungen und was diese bedeuten - Hier eine Auflistung der üblichen "Fehlermeldungen", die der Server an den Browser Ihres Besuchers senden kann.

Webseiten schneller machen ✶✶✶✶
Webseitenbesucher sind ungeduldig, um Besucher und Suchmaschinen bei der Stange zu halten, darf Ihre Website keine Zeit verlieren.

Elemente

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

<!-- --> <a> <abbr> <adress> <area> <article> <aside> <audio> <b> <base> <bdi> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <datalist> <del> <details> <dfn> <div> <dd> <dl> <dt> <doctype> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <head> <header> <hgroup> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <td> <tr> <tfoot> <th> <thead> <tbody> <template> <textarea> <time> <title> <u> <ul> <var> <video> <wbr>

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>

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!

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
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
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).
html-ipsum.com
Dummytext-Beispiele zum kopieren.

» Alle Links mit Bewertungen anzeigen