HTML
Die Hypertext Markup Language (HTML; deutsch Hypertext-Auszeichnungssprache) ist eine textbasierte Auszeichnungssprache zur Strukturierung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von einem Webbrowser dargestellt. Neben den vom Browser angezeigten Inhalten einer Webseite enthält HTML zusätzliche Angaben in Form von Metainformationen, die z. B. über die im Text verwendete Sprache oder den Autor Auskunft geben oder den Inhalt des Textes zusammenfassen.
Die Auszeichnungssprache wird vom World Wide Web Consortium (W3C) weiterentwickelt. [1]
Inhaltsverzeichnis |
Evaluierung
- Name: HTML - Hypertext Markup Language
- Version: <Version der Software>
- Urheberrechts-Lizenz des Quellcodes: <Urheberrechts-Lizenz Name> in <Urheberrechts-Lizenz Version> => gesichert als pdf, txt oder html falls speziell
- Website: http://www.w3.org/html/
- Spezifikation: http://www.w3.org/wiki/HTML/Specifications
- Evaluiert durch: <name>
- Evaluiert am: dd-mm-yyyy
Anwendung
Templates
[xhtml,N]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>Titel</title>
<link rel="license" href="link/zur/copyright/lizenz">
<link rel="shortcut icon" href="link/zum/icon.ico">
<link rel="icon" href="link/zum/icon.ico" type="image/ico">
</head> <body>
</body> </html>
Dokumentation
Syntax
Normalerweise, bis auf ein paar wenige Ausnahmen, wird der Text durch ein Tag-Paar eingeschlossen und somit ausgezeichnet.
[xhtml,N]
<tag>text</tag>
Im Starttag können je nach Tag optional noch Attribute angegeben werden. HTML darf kein '<' in einem Element enthalten.
[xhtml,N]
<tag param1="val1" param2="val2">text</tag>
Bei Element- und Attributnamen spielt Groß- und Kleinschreibung keine Rolle.
Tags
Die Tags sind verlinkt und führen zu einer detailierten Beschreibung.
Allgemein
| Operator | Beschreibung | Beispiel |
|---|---|---|
[html,N]<meta>
|
||
[html,N]<title></title>
|
Überschriften und Absätze
| Operator | Beschreibung | Beispiel |
|---|---|---|
[html,N]
|
||
[html,N]
|
||
[html,N]
|
Links und Anker
| Operator | Beschreibung | Beispiel |
|---|---|---|
[html,N]<a></a>
|
re | |
[html,N]<link></link>
|
Bilder
| Operator | Beschreibung | Beispiel |
|---|---|---|
[html,N]<img>
|
Breite und Höhe immer angeben, damit Seite weiter aufgebaut werden kann und nicht auf das vollständige laden des Bildes gewartet werden muss. Attribut „alt“ = alternativer Text |
Ojekte
| Operator | Beschreibung | Beispiel |
|---|---|---|
[html,N]<object></object>
|
svg, Applets, Videos, Bilder |
Auszeichnung im Text
| Operator | Beschreibung | Beispiel |
|---|---|---|
[html,N]
|
||
[html,N]
|
||
[html,N]
|
||
[html,N]
|
||
[html,N]
|
Benutzereingabe | |
[html,N]
|
||
[html,N]
|
||
[html,N]
|
||
[html,N]
|
||
[html,N]<acronym></acronym>
|
||
[html,N]
|
||
[html,N]
|
||
[html,N]
|
||
[html,N]
|
||
[html,N]
|
Listen
| Operator | Beschreibung | Beispiel |
|---|---|---|
[html,N]
|
||
[html,N]
|
||
[html,N]
|
||
[html,N]
|
||
[html,N]
|
||
[html,N]
|
Tabellen
| Operator | Beschreibung | Beispiel |
|---|---|---|
[html,N]
|
Container für die Tabelle | |
[html,N]<tr></tr>
|
Behälter für Zeile, die mehrere Zellen enthält | |
[html,N]<th></th>
|
Definiert eine Zelle die Kopfinformationen enthält | |
[html,N]<td></td>
|
Definiert eine Zelle die Daten enthält | |
[html,N]
|
Erzeugt Tabellenüberschrift | |
[html,N]<thead></thead>
|
Zeichnet Teil als Kopfbereich der Tabelle aus | |
[html,N]<tfoot></tfoot>
|
Zeichnet Teil als Fußbereich der Tabelle aus | |
[html,N]<tbody></tbody>
|
Zeichnet Teil als Körperbereich der Tabelle aus | |
[html,N]<colgroup></colgroup>
|
||
[html,N]<col></col>
|
||
[html,N]<colspan></colspan>
|
||
[html,N]<rowspan></rowspan>
|
Zitate
| Operator | Beschreibung | Beispiel |
|---|---|---|
[html,N]<q></q>
|
||
[html,N]
|
||
[html,N]
|
Struktur und Gruppierung
| Operator | Beschreibung | Beispiel |
|---|---|---|
[html,N]
|
Block | |
[html,N]
|
einzeiliger Block |
Formulare
| Operator | Beschreibung | Beispiel |
|---|---|---|
[html,N]<form></form>
|
type: checkbox, buttons, submit, radio Damit bei Checkboxes mehrere Auswahlen auf einmal übermittelt werden müssen, muss der Name der Auswahl gleich sein und am Ende die eckigen Klammern für ein Array haben, dann wird der value in einem array mit der Bezeichnung von name abgespeichert und ist mittels $_GET auslesbar. [php,N]name = "array[]"
|
|
[html,N]<label></label>
|
||
[html,N]<fieldset></fieldset>
|
||
[html,N]<legend></legend>
|
Weitere Elemente
| Operator | Beschreibung | Beispiel |
|---|---|---|
[html,N]<address></address>
|
||
[html,N]
|
||
[html,N]<script></script>
|
||
[html,N]<noscript></noscript>
|
Lernen - erste Schritte leicht gemacht
Eine der wichtigsten Ressourcen zu Beginn ist sicherlich die Seite SelfHTML auf der ausführlich alle HTML Tags mit anschaulichen Beispielen und Erklärung zu finden sind.
Quellen
- offizielle Website
- Spezifikation
- W3C Markup Validation: Validierung des HTML Code der Website
Tutorials/Manuals/WIKI's/Skripten
- Browsershots: Website auf unterschiedlichen Browsern testen
- HTML.net: HTML Tutorials
- SelfHTML: sehr gute Seite mit allen HTML Befehlen + Erklärung (deutsch)
- Introduction to The Web Standards Curriculum/Table of Contents @ Opera.com
- VO Multimedia Information Systems 1 - Lehrveranstaltung @ TU Graz
- HTML5 rocks
Literatur
Referenzen
- ↑ HTML Eintrag auf Wikipedia https://de.wikipedia.org/wiki/Html
