From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/html/applying_color/index.html | 498 +++++++ files/de/web/html/attributes/index.html | 662 +++++++++ files/de/web/html/block-level_elemente/index.html | 108 ++ files/de/web/html/canvas/index.html | 120 ++ files/de/web/html/element/a/index.html | 361 +++++ files/de/web/html/element/abbr/index.html | 202 +++ files/de/web/html/element/acronym/index.html | 78 ++ files/de/web/html/element/address/index.html | 163 +++ files/de/web/html/element/applet/index.html | 139 ++ files/de/web/html/element/area/index.html | 174 +++ files/de/web/html/element/article/index.html | 146 ++ files/de/web/html/element/aside/index.html | 107 ++ files/de/web/html/element/b/index.html | 83 ++ files/de/web/html/element/base/index.html | 170 +++ files/de/web/html/element/bdi/index.html | 138 ++ files/de/web/html/element/bdo/index.html | 153 +++ files/de/web/html/element/bgsound/index.html | 96 ++ files/de/web/html/element/big/index.html | 89 ++ files/de/web/html/element/blink/index.html | 87 ++ files/de/web/html/element/blockquote/index.html | 156 +++ files/de/web/html/element/body/index.html | 230 ++++ files/de/web/html/element/br/index.html | 130 ++ files/de/web/html/element/canvas/index.html | 110 ++ files/de/web/html/element/caption/index.html | 151 +++ files/de/web/html/element/center/index.html | 41 + files/de/web/html/element/cite/index.html | 152 +++ files/de/web/html/element/code/index.html | 147 ++ files/de/web/html/element/col/index.html | 240 ++++ files/de/web/html/element/data/index.html | 90 ++ files/de/web/html/element/datalist/index.html | 106 ++ files/de/web/html/element/dd/index.html | 140 ++ files/de/web/html/element/del/index.html | 124 ++ files/de/web/html/element/details/index.html | 97 ++ files/de/web/html/element/dialog/index.html | 206 +++ files/de/web/html/element/dir/index.html | 44 + files/de/web/html/element/div/index.html | 117 ++ files/de/web/html/element/dl/index.html | 222 +++ files/de/web/html/element/dt/index.html | 135 ++ files/de/web/html/element/em/index.html | 152 +++ files/de/web/html/element/embed/index.html | 99 ++ files/de/web/html/element/fieldset/index.html | 489 +++++++ files/de/web/html/element/font/index.html | 53 + files/de/web/html/element/footer/index.html | 99 ++ files/de/web/html/element/frame/index.html | 52 + files/de/web/html/element/h1-h6/index.html | 72 + files/de/web/html/element/head/index.html | 28 + files/de/web/html/element/header/index.html | 143 ++ files/de/web/html/element/hr/index.html | 57 + files/de/web/html/element/html/index.html | 157 +++ files/de/web/html/element/i/index.html | 156 +++ files/de/web/html/element/iframe/index.html | 44 + files/de/web/html/element/image/index.html | 48 + files/de/web/html/element/img/index.html | 348 +++++ files/de/web/html/element/index.html | 249 ++++ files/de/web/html/element/input/button/index.html | 246 ++++ .../de/web/html/element/input/checkbox/index.html | 352 +++++ files/de/web/html/element/input/index.html | 1411 ++++++++++++++++++++ files/de/web/html/element/ins/index.html | 122 ++ files/de/web/html/element/legend/index.html | 97 ++ files/de/web/html/element/li/index.html | 193 +++ files/de/web/html/element/link/index.html | 361 +++++ files/de/web/html/element/main/index.html | 175 +++ files/de/web/html/element/map/index.html | 116 ++ files/de/web/html/element/marquee/index.html | 216 +++ files/de/web/html/element/nav/index.html | 106 ++ files/de/web/html/element/noembed/index.html | 41 + files/de/web/html/element/noscript/index.html | 103 ++ files/de/web/html/element/object/index.html | 176 +++ files/de/web/html/element/ol/index.html | 157 +++ files/de/web/html/element/optgroup/index.html | 161 +++ files/de/web/html/element/option/index.html | 155 +++ files/de/web/html/element/p/index.html | 155 +++ files/de/web/html/element/picture/index.html | 103 ++ files/de/web/html/element/pre/index.html | 37 + files/de/web/html/element/progress/index.html | 175 +++ files/de/web/html/element/q/index.html | 155 +++ files/de/web/html/element/s/index.html | 70 + files/de/web/html/element/section/index.html | 170 +++ files/de/web/html/element/shadow/index.html | 159 +++ files/de/web/html/element/strong/index.html | 49 + files/de/web/html/element/summary/index.html | 106 ++ files/de/web/html/element/table/index.html | 448 +++++++ files/de/web/html/element/td/index.html | 218 +++ files/de/web/html/element/template/index.html | 186 +++ files/de/web/html/element/th/index.html | 297 ++++ files/de/web/html/element/time/index.html | 162 +++ files/de/web/html/element/title/index.html | 81 ++ files/de/web/html/element/tr/index.html | 230 ++++ files/de/web/html/element/tt/index.html | 52 + files/de/web/html/element/u/index.html | 68 + files/de/web/html/element/ul/index.html | 123 ++ files/de/web/html/element/var/index.html | 46 + files/de/web/html/element/video/index.html | 379 ++++++ .../html/globale_attribute/accesskey/index.html | 116 ++ .../globale_attribute/autocapitalize/index.html | 46 + .../de/web/html/globale_attribute/class/index.html | 109 ++ .../globale_attribute/contenteditable/index.html | 114 ++ files/de/web/html/globale_attribute/dir/index.html | 85 ++ .../html/globale_attribute/draggable/index.html | 104 ++ .../web/html/globale_attribute/dropzone/index.html | 45 + .../web/html/globale_attribute/hidden/index.html | 56 + files/de/web/html/globale_attribute/id/index.html | 109 ++ files/de/web/html/globale_attribute/index.html | 205 +++ .../html/globale_attribute/inputmode/index.html | 76 ++ files/de/web/html/globale_attribute/is/index.html | 62 + .../html/globale_attribute/kontextmenu/index.html | 169 +++ .../de/web/html/globale_attribute/lang/index.html | 60 + .../de/web/html/globale_attribute/style/index.html | 107 ++ .../web/html/globale_attribute/tabindex/index.html | 130 ++ .../de/web/html/globale_attribute/title/index.html | 164 +++ .../html/globale_attribute/translate/index.html | 30 + .../web/html/html5/html5_element_list/index.html | 586 ++++++++ files/de/web/html/html5/index.html | 174 +++ files/de/web/html/index.html | 100 ++ files/de/web/html/inline_elemente/index.html | 32 + files/de/web/html/referenz/index.html | 29 + .../html/using_the_application_cache/index.html | 375 ++++++ 117 files changed, 19198 insertions(+) create mode 100644 files/de/web/html/applying_color/index.html create mode 100644 files/de/web/html/attributes/index.html create mode 100644 files/de/web/html/block-level_elemente/index.html create mode 100644 files/de/web/html/canvas/index.html create mode 100644 files/de/web/html/element/a/index.html create mode 100644 files/de/web/html/element/abbr/index.html create mode 100644 files/de/web/html/element/acronym/index.html create mode 100644 files/de/web/html/element/address/index.html create mode 100644 files/de/web/html/element/applet/index.html create mode 100644 files/de/web/html/element/area/index.html create mode 100644 files/de/web/html/element/article/index.html create mode 100644 files/de/web/html/element/aside/index.html create mode 100644 files/de/web/html/element/b/index.html create mode 100644 files/de/web/html/element/base/index.html create mode 100644 files/de/web/html/element/bdi/index.html create mode 100644 files/de/web/html/element/bdo/index.html create mode 100644 files/de/web/html/element/bgsound/index.html create mode 100644 files/de/web/html/element/big/index.html create mode 100644 files/de/web/html/element/blink/index.html create mode 100644 files/de/web/html/element/blockquote/index.html create mode 100644 files/de/web/html/element/body/index.html create mode 100644 files/de/web/html/element/br/index.html create mode 100644 files/de/web/html/element/canvas/index.html create mode 100644 files/de/web/html/element/caption/index.html create mode 100644 files/de/web/html/element/center/index.html create mode 100644 files/de/web/html/element/cite/index.html create mode 100644 files/de/web/html/element/code/index.html create mode 100644 files/de/web/html/element/col/index.html create mode 100644 files/de/web/html/element/data/index.html create mode 100644 files/de/web/html/element/datalist/index.html create mode 100644 files/de/web/html/element/dd/index.html create mode 100644 files/de/web/html/element/del/index.html create mode 100644 files/de/web/html/element/details/index.html create mode 100644 files/de/web/html/element/dialog/index.html create mode 100644 files/de/web/html/element/dir/index.html create mode 100644 files/de/web/html/element/div/index.html create mode 100644 files/de/web/html/element/dl/index.html create mode 100644 files/de/web/html/element/dt/index.html create mode 100644 files/de/web/html/element/em/index.html create mode 100644 files/de/web/html/element/embed/index.html create mode 100644 files/de/web/html/element/fieldset/index.html create mode 100644 files/de/web/html/element/font/index.html create mode 100644 files/de/web/html/element/footer/index.html create mode 100644 files/de/web/html/element/frame/index.html create mode 100644 files/de/web/html/element/h1-h6/index.html create mode 100644 files/de/web/html/element/head/index.html create mode 100644 files/de/web/html/element/header/index.html create mode 100644 files/de/web/html/element/hr/index.html create mode 100644 files/de/web/html/element/html/index.html create mode 100644 files/de/web/html/element/i/index.html create mode 100644 files/de/web/html/element/iframe/index.html create mode 100644 files/de/web/html/element/image/index.html create mode 100644 files/de/web/html/element/img/index.html create mode 100644 files/de/web/html/element/index.html create mode 100644 files/de/web/html/element/input/button/index.html create mode 100644 files/de/web/html/element/input/checkbox/index.html create mode 100644 files/de/web/html/element/input/index.html create mode 100644 files/de/web/html/element/ins/index.html create mode 100644 files/de/web/html/element/legend/index.html create mode 100644 files/de/web/html/element/li/index.html create mode 100644 files/de/web/html/element/link/index.html create mode 100644 files/de/web/html/element/main/index.html create mode 100644 files/de/web/html/element/map/index.html create mode 100644 files/de/web/html/element/marquee/index.html create mode 100644 files/de/web/html/element/nav/index.html create mode 100644 files/de/web/html/element/noembed/index.html create mode 100644 files/de/web/html/element/noscript/index.html create mode 100644 files/de/web/html/element/object/index.html create mode 100644 files/de/web/html/element/ol/index.html create mode 100644 files/de/web/html/element/optgroup/index.html create mode 100644 files/de/web/html/element/option/index.html create mode 100644 files/de/web/html/element/p/index.html create mode 100644 files/de/web/html/element/picture/index.html create mode 100644 files/de/web/html/element/pre/index.html create mode 100644 files/de/web/html/element/progress/index.html create mode 100644 files/de/web/html/element/q/index.html create mode 100644 files/de/web/html/element/s/index.html create mode 100644 files/de/web/html/element/section/index.html create mode 100644 files/de/web/html/element/shadow/index.html create mode 100644 files/de/web/html/element/strong/index.html create mode 100644 files/de/web/html/element/summary/index.html create mode 100644 files/de/web/html/element/table/index.html create mode 100644 files/de/web/html/element/td/index.html create mode 100644 files/de/web/html/element/template/index.html create mode 100644 files/de/web/html/element/th/index.html create mode 100644 files/de/web/html/element/time/index.html create mode 100644 files/de/web/html/element/title/index.html create mode 100644 files/de/web/html/element/tr/index.html create mode 100644 files/de/web/html/element/tt/index.html create mode 100644 files/de/web/html/element/u/index.html create mode 100644 files/de/web/html/element/ul/index.html create mode 100644 files/de/web/html/element/var/index.html create mode 100644 files/de/web/html/element/video/index.html create mode 100644 files/de/web/html/globale_attribute/accesskey/index.html create mode 100644 files/de/web/html/globale_attribute/autocapitalize/index.html create mode 100644 files/de/web/html/globale_attribute/class/index.html create mode 100644 files/de/web/html/globale_attribute/contenteditable/index.html create mode 100644 files/de/web/html/globale_attribute/dir/index.html create mode 100644 files/de/web/html/globale_attribute/draggable/index.html create mode 100644 files/de/web/html/globale_attribute/dropzone/index.html create mode 100644 files/de/web/html/globale_attribute/hidden/index.html create mode 100644 files/de/web/html/globale_attribute/id/index.html create mode 100644 files/de/web/html/globale_attribute/index.html create mode 100644 files/de/web/html/globale_attribute/inputmode/index.html create mode 100644 files/de/web/html/globale_attribute/is/index.html create mode 100644 files/de/web/html/globale_attribute/kontextmenu/index.html create mode 100644 files/de/web/html/globale_attribute/lang/index.html create mode 100644 files/de/web/html/globale_attribute/style/index.html create mode 100644 files/de/web/html/globale_attribute/tabindex/index.html create mode 100644 files/de/web/html/globale_attribute/title/index.html create mode 100644 files/de/web/html/globale_attribute/translate/index.html create mode 100644 files/de/web/html/html5/html5_element_list/index.html create mode 100644 files/de/web/html/html5/index.html create mode 100644 files/de/web/html/index.html create mode 100644 files/de/web/html/inline_elemente/index.html create mode 100644 files/de/web/html/referenz/index.html create mode 100644 files/de/web/html/using_the_application_cache/index.html (limited to 'files/de/web/html') diff --git a/files/de/web/html/applying_color/index.html b/files/de/web/html/applying_color/index.html new file mode 100644 index 0000000000..3e39d7bbcf --- /dev/null +++ b/files/de/web/html/applying_color/index.html @@ -0,0 +1,498 @@ +--- +title: Applying color to HTML elements using CSS +slug: Web/HTML/Applying_color +tags: + - Beginner + - CSS + - CSS Colors + - Guide + - HTML + - HTML Colors + - HTML Styles + - Styling HTML + - color +translation_of: Web/HTML/Applying_color +--- +
{{HTMLRef}}
+ +

Die Verwendung von Farben ist eine fundamentale Ausdrucksweise der Menschheit. Kinder experimentieren mit Farben, noch bevor sie zeichnen können. Vielleicht ist das der Grund, warum viele Leute zuerst mit Farben experimentieren wollen, wenn sie lernen, eine Webseite zu erstellen. Mit CSS gibt es viele Möglichkeiten, den HTML elements Farbe zu verleihen. Dieser Artikel ist eine Einführung, die jede Möglichkeit vorstellt, CSS Farben in HTML zu verwenden.

+ +

Zum Glück ist das Hinzufügen von Farbe zu deinem HTML eigentlich wirklich easy und du kannst Farbe zu fast allem hinzufügen.

+ +

Wir werden die meisten Dinge behandeln, die du wissen musst, wenn du Farbe verwendest, einschließlich einer {{anch("Dinge, die Farbe haben können", "list of what you can color and what CSS properties are involved")}}, {{anch("How to describe a color", "how you describe colors")}}, und wie man eigentlich {{anch("Using color", "use colors both in stylesheets and in scripts")}}. Wir werden uns auch anschauen, wie man {{anch("Letting the user picka color", "let the user pick a color")}}.

+ +

Dann schließen wir mit einer kurzen Diskussion ab, wie man {{anch("Using color wisely", "use color wisely")}}: Wie man angemessene Farben auswählt und dabei auch die Bedürfnisse von Menschen mit unterschiedlichen visuellen Fähigkeiten im Auge behält

+ +

Dinge, die Farbe haben können

+ +

Einfach gesagt kann alles mögliche in HTML Farbe hinzugefügt werden. Stattdessen schauen wir deswegen auf die Dinge die in einem Element sind, wie beispielsweise Text oder Ränder (Borders) usw. Für jedes werden wir eine Liste von CSS Eigenschaften sehen, die ihnen Farbe verleihen können.

+ +

Auf einer Grundebene definiert die {{cssxref("color")}} Eigenschaft den Vordergrund des Inhaltes eines HTML Elements und die {{cssxref("background-color")}} Eigenschaft definiert die Hintergrundfarbe eines Elements. Sie können auf fast jedem Element angewendet werden.

+ +

Text

+ +

Wo auch immer ein Element gerendert wurde sind diese Elemente dazu da, die Farbe des Textes, seinen Hintergrund oder Dekorationen des Textes festzulegen.

+ +
+
{{cssxref("color")}}
+
Legt die Farbe von Text und text decorations fest (wie z. B. die Ergänzung von Über- oder Unterstrichen, durchgestrichene Linien, usw.)
+
{{cssxref("background-color")}}
+
Die Hintergrundfarbe des Textes.
+
{{cssxref("text-shadow")}}
+
Fügt einen Schatteneffekt zu Text hinzu. Unter den Optionen für den Schatten ist die Basisfarbe des Schatten (die dann verschwommen und dann mit dem Hintergrund "vermischt" (blended) wird, basierend auf die anderen Parameter). Gehen Sie auf {{SectionOnPage("/en-US/docs/Learn/CSS/Styling_text/Fundamentals", "Text drop shadows")}} um mehr darüber zu erfahren.
+
{{cssxref("text-decoration-color")}}
+
Als Standardeinstellung verwenden Textdekorationen (wie z. B. Unterstreichungen, Durchstreichungen, etc.) die color Eigenschaft als ihre Farbe. Jedoch können sie diese Einstellung überschreiben und eine andere Farbe mit der text-decoration-color Eigenschaft verwenden.
+
{{cssxref("text-emphasis-color")}}
+
The color to use when drawing emphasis symbols adjacent to each character in the text. This is used primarily when drawing text for East Asian languages.
+
{{cssxref("caret-color")}}
+
The color to use when drawing the {{Glossary("caret")}} (sometimes referred to as the text input cursor) within the element. This is only useful in elements that are editable, such as {{HTMLElement("input")}} and {{HTMLElement("textarea")}} or elements whose HTML {{htmlattrxref("contenteditable")}} attribute is set.
+
+ +

Boxen

+ +

Jedes Element ist eine Box mit irgendeiner Art von Inhalt, hat einen Hintergrund und eine Grenze (Border) zusätzlich zu irgendwelchen Inhalten, die die Box besitzt.

+ +
+
{{anch("Borders")}}
+
Schauen Sie sich den Abschnitt {{anch("Borders")}} an für eine Liste von CSS Eigenschaften, die Sie benutzen können, um die Farbe der Grenze (Border) einer Box festzulegen.
+
{{cssxref("background-color")}}
+
Farbe auf Bereiche eines Elements anwenden, die keinen Inhalt im Vordergrund haben.
+
{{cssxref("column-rule-color")}}
+
Farbe auf Linien anwenden, die Textspalten trennen.
+
{{cssxref("outline-color")}}
+
The color to use when drawing an outline around the outside of the element. This outline is different from the border in that it doesn't get space set aside for it in the document (so it may overlap other content). It's generally used as a focus indicator, to show which element will receive input events.
+
+ +

Ränder (Borders)

+ +

Jedes Element kann einen Rand (border) um sich herum haben. A basic element border is a line drawn around the edges of the element's content. See {{SectionOnPage("/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model", "Box properties")}} to learn about the relationship between elements and their borders, and the article Styling borders using CSS to learn more about applying styles to borders.

+ +

You can use the {{cssxref("border")}} shorthand property, which lets you configure everything about the border in one shot (including non-color features of borders, such as its width, style (solid, dashed, etc.), and so forth.

+ +
+
{{cssxref("border-color")}}
+
Specifies a single color to use for every side of the element's border.
+
{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, and {{cssxref("border-bottom-color")}}
+
Lets you set the color of the corresponding side of the element's border.
+
{{cssxref("border-block-start-color")}} and {{cssxref("border-block-end-color")}}
+
With these, you can set the color used to draw the borders which are closest to the start and end of the block the border surrounds. In a left-to-right writing mode (such as the way English is written), the block start border is the top edge and the block end is the bottom. This differs from the inline start and end, which are the left and right edges (corresponding to where each line of text in the box begins and ends).
+
{{cssxref("border-inline-start-color")}} and {{cssxref("border-inline-end-color")}}
+
These let you color the edges of the border closest to to the beginning and the end of the start of lines of text within the box. Which side this is will vary depending on the {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} properties, which are typically (but not always) used to adjust text directionality based on the language being displayed. For example, if the box's text is being rendered right-to-left, then the border-inline-start-color is applied to the right side of the border.
+
+ +

Andere Methoden um Farbe zu verwenden

+ +

CSS ist nicht die einzige Webtechnologie, die Farbe unterstützt. Es gibt auch Grafiktechnologien die auf dem Web verfügbar sind und auch Farbe unterstützen.

+ +
+
Die  HTML Canvas API
+
Lets you draw 2D bitmapped graphics in a {{HTMLElement("canvas")}} element. See our Canvas tutorial to learn more.
+
SVG (Scalable Vector Graphics)
+
Lets you draw images using commands that draw specific shapes, patterns, and lines to produce an image. SVG commands are formatted as XML, and can be embedded directly into a web page or can be placed in he page using the {{HTMLElement("img")}} element, just like any other type of image.
+
WebGL
+
The Web Graphics Library is an OpenGL ES-based API for drawing high-performance 2D and 3D graphics on the Web. See Learn WebGL for 2D and 3D graphics to find out more.
+
+ +

Wie man eine Farbe definiert

+ +

In order to represent a color in CSS, you have to find a way to translate the analog concept of "color" into a digital form that a computer can use. This is typically done by breaking down the color into components, such as how much of each of a set of primary colors to mix together, or how bright to make the color. As such, there are several ways you can describe color in CSS.

+ +

For more detailed discussion of each of the color value types, see the reference for the CSS {{cssxref("<color>")}} unit.

+ +

Schlüsselwörter

+ +

A set of standard color names have been defined, letting you use these keywords instead of numeric representations of colors if you choose to do so and there's a keyword representing the exact color you want to use. Color keywords include the standard primary and secondary colors (such as red, blue, or orange), shades of gray (from black to white, including colors like darkgray and lightgrey), and a variety of other blended colors including lightseagreen, cornflowerblue, and rebeccapurple.

+ +

See {{SectionOnPage("/en-US/docs/Web/CSS/color_value", "Color keywords", "code")}} for a list of all available color keywords.

+ +

RGB-Werte

+ +

There are three ways to represent an RGB color in CSS.

+ +

Hexadezimale String Notation

+ +

Die Hexadezimale String Notation repräsentiert eine Farbe, indem sie hexadezimale Zeichen für jeden Farbkomponenten benutzt (rot, grün und blau). It may also include a fourth compoment: the alpha channel (or opacity). Each color component can be represented as a number between 0 and 255 (0x00 and 0xFF) or, optionally, as a number between 0 and 15 (0x0 and 0xF). All components must be specified using the same number of digits. If you use the single-digit notation, the final color is computed by using each component's digit twice; that is, "#D" becomes "#DD" when drawing.

+ +

A color in hexadecimal string notation always begins with the character "#". After that come the hexadecimal digits of the color code. The string is case-insensitive.

+ +
+
"#rrggbb"
+
Specifies a fully-opaque color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb.
+
"#rrggbbaa"
+
Specifies a color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb. The alpha channel is specified by 0xaa; the lower this value is, the more translucent the color becomes.
+
"#rgb"
+
Specifies a color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb.
+
"#rgba"
+
Specifies a color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb. The alpha channel is specified by 0xaa; the lower this value is, the more translucent the color becomes.
+
+ +

As an example, you can represent the opaque color bright blue as "#0000ff" or "#00f". To make it 25% opaque, you can use "#0000ff44" or "#00f4".

+ +

RGB functional notation

+ +

RGB (Red/Green/Blue) functional notation, like hexadecimal string notation, represents colors using their red, green, and blue components (as well as, optionally, an alpha channel component for opacity). However, instead of using a string, the color is defined using the CSS function {{cssxref("rgb()")}}. This function accepts as its input parameters the values of the red, green, and blue components and an optional fourth parameter, the value for the alpha channel.

+ +

Legal values for each of these parameters are:

+ +
+
red, green, and blue
+
Each must be an {{cssxref("<integer>")}} value between 0 and 255 (inclusive), or a {{cssxref("<percentage>")}} from 0% to 100%.
+
alpha
+
The alpha channel is a number between 0.0 (fully transparent) and 1.0 (fully opaque). You can also specify a percentage where 0% is the same as 0.0 and 100% is the same as 1.0.
+
+ +

For example, a bright red that's 50% opaque can be represented as rgb(255, 0, 0, 0.5) or rgb(100%, 0, 0, 50%).

+ +

HSL functional notation

+ +

Designers and artists often prefer to work using the {{interwiki("wikipedia", "HSL and HSV", "HSL")}} (Hue/Saturation/Luminosity) color method. On the web, HSL colors are represented using HSL functional notation. The hsl() CSS function is very similar to the rgb() function in usage otherwise.

+ +
+
HSL color cylinder +
Figure 1. An HSL color cylinder. Hue defines the actual color based on the position along a circular color wheel representing the colors of the visible spectrum. Saturation is a percentage of how much of the way between being a shade of gray and having the maximum possible amount of the given hue. As the value of luminance (or lightness) increases, the color transitions from the darkest possible to the brightest possible (from black to white). Image courtesy of user SharkD on Wikipedia, distributed under the CC BY-SA 3.0 license.
+
+
+ +

The value of the hue (H) component of an HSL color is an angle from red around through yellow, green, cyan, blue, and magenta (ending up back at red again at 360°) that identifies what the base color is. The value can be specified in any {{cssxref("<angle>")}} unit supported by CSS, including degrees (deg), radians (rad), gradians (grad), or turns (turn). But this doesn't control how vivid or dull, or how bright or dark the color is.

+ +

The saturation (S) component of the color specifies what percentage of the final color is comprised of the specified hue. The rest is defined by the grey level provided by the luminance (L) component.

+ +

Think of it like creating the perfect paint color:

+ +
    +
  1. You start with base paint that's the maximum intensity possible for a given color, such as  the most intense blue that can be represented by the user's screen. This is the hue (H) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base.
    2. +
  2. Then select a greyscale paint that corresponds how bright you want the color to be; this is the luminance. Do you want it to be very bright and nearly white, or very dark and closer to black, or somewhere in between? This is specified using a percentage, where 0% is perfectly black and 100% is perfectly white. (regardless of the saturation or hue). In between values are a literal grey area.
    3. +
  3. Now that you have a grey paint and a perfectly vivid color, you need to mix them together. The saturation (S) component of the color indicates what percentage of the final color should be comprised of that perfectly vivid color. The rest of the final color is made up of the grey paint that represents the saturation.
    4. +
+ +

You can also optionally include an alpha channel, to make the color less than 100% opaque.

+ +

Here are some sample colors in HSL notation:

+ +
+ + +

{{EmbedLiveSample("hsl-swatches", 300, 260)}}

+
+ +
+

Note that when you omit the hue's unit, it's assumed to be in degrees (deg).

+
+ +

Farbe verwenden

+ +

Now that you know what CSS properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color. As you may have seen from the list under {{anch("Things that can have color")}}, there are plenty of things you can color with CSS. Let's look at this from two sides: using color within a {{Glossary("stylesheet")}}, and adding and changing color using {{Glossary("JavaScript")}} code to alter the styles of elements.

+ +

Specifying colors in stylesheets

+ +

The easiest way to apply color to elements—and the way you'll usually do it—is to simply specify colors in the CSS that's used when rendering elements. While we won't use every single property mentioned previously, we'll look at a couple of examples. The concept is the same anywhere you use color.

+ +

Let's take a look at an example, starting by looking at the results we're trying to achieve:

+ +
{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 150)}}
+ +

HTML

+ +

The HTML responsible for creating the above example is shown here:

+ +
<div class="wrapper">
+  <div class="box boxLeft">
+    <p>
+      This is the first box.
+    </p>
+  </div>
+  <div class="box boxRight">
+    <p>
+      This is the second box.
+    </p>
+  </div>
+</div>
+ +

This is pretty simple, using a {{HTMLElement("div")}} as a wrapper around the contents, which consists of two more <div>s, each styled differently with a single paragraph ({{HTMLElement("p")}}) in each box.

+ +

The magic happens, as usual, in the CSS, where we'll apply colors define the layout for the HTML above.

+ +

CSS

+ +

We'll look at the CSS to create the above results a piece at a time, so we can review the interesting parts one by one.

+ +
.wrapper {
+  width: 620px;
+  height: 110px;
+  margin: 0;
+  padding: 10px;
+  border: 6px solid mediumturquoise;
+}
+ +

The .wrapper class is used to assign styles to the {{HTMLElement("div")}} that encloses all of our other content. This establishes thesize of the container using {{cssxref("width")}} and {{cssxref("height")}} as well as its {{cssxref("margin")}} and {{cssxref("padding")}}.

+ +

Of more interest to our discussion here is the use of the {{cssxref("border")}} property to establish a border around the outside edge of the element. This border is a solid line, 6 pixels wide, in the color mediumturquoise.

+ +

Our two colored boxes share a number of properties in common, so next we establish a class, .box, that defines those shared properties:

+ +
.box {
+  width: 290px;
+  height: 100px;
+  margin: 0;
+  padding: 4px 6px;
+  font: 28px "Marker Felt", "Zapfino", cursive;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+ +

In brief, .box establishes the size of each box, as well as the configuration of the font used within. We also take advantage of CSS Flexbox to easily center the contents of each box. We enable flex mode using {{cssxref("display", "display: flex")}}, and set both {{cssxref("justify-content")}} and {{cssxref("align-items")}} to center. Then we can create a class for each of the two boxes that defines the propeties that differ between the two.

+ +
.boxLeft {
+  float: left;
+  background-color: rgb(245, 130, 130);
+  outline: 2px solid darkred;
+}
+ +

The .boxLeft class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:

+ + + +
.boxRight {
+  float: right;
+  background-color: hsl(270deg, 50%, 75%);
+  outline: 4px dashed rgb(110, 20, 120);
+  color: hsl(0deg, 100%, 100%);
+  text-decoration: underline wavy #88ff88;
+  text-shadow: 2px 2px 3px black;
+}
+ +

Finally, the .boxRight class describes the unique properties of the box that's drawn on the right. It's configured to float the box to the right so that it appears next to the previous box. Then the following colors are established:

+ + + +

Dem Nutzer die Farbe wählen lassen

+ +

There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you're implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it's been necessary to implement your own {{interwiki("wikipedia", "color picker")}}, HTML now provides support for browsers to provide one for your use through the {{HTMLElement("input")}} element, by using "color" as the value of its {{htmlattrxref("type", "input")}} attribute.

+ +

The <input> element represents a color only in the {{anch("Hexadecimal string notation", "hexadecimal string notation")}} covered above.

+ +

Beispiel: Farbe wählen

+ +

Let's look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker's value is displayed.

+ +

{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}

+ +
+

On macOS, you indicate that you've finalized selection of the color by closing the color picker window.

+
+ +

HTML

+ +

The HTML here creates a box that contains a color picker control (with a label created using the {{HTMLElement("label")}} element) and an empty paragraph element ({{HTMLElement("p")}}) into which we'll output some text from our JavaScript code.

+ +
<div id="box">
+  <label for="colorPicker">Border color:</label>
+  <input type="color" value="#8888ff" id="colorPicker">
+  <p id="output"></p>
+</div>
+ +

CSS

+ +

The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won't last, courtesy of the JavaScript below...

+ +
#box {
+  width: 500px;
+  height: 200px;
+  border: 2px solid rgb(245, 220, 225);
+  padding: 4px 6px;
+  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
+}
+ +

JavaScript

+ +

The script here handles the task of updating the starting color of the border to match the color picker's value. Then two event handlers are added to deal with input from the <input type="color"> element.

+ +
let colorPicker = document.getElementById("colorPicker");
+let box = document.getElementById("box");
+let output = document.getElementById("output");
+
+box.style.borderColor = colorPicker.value;
+
+colorPicker.addEventListener("input", function(event) {
+  box.style.borderColor = event.target.value;
+}, false);
+
+colorPicker.addEventListener("change", function(event) {
+  output.innerText = "Color set to " + colorPicker.value + ".";
+}, false);
+ +

The {{event("input")}} event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box's border color to match the color picker's current value.

+ +

The {{event("change")}} event is received when the color picker's value is finalized. We respond by setting the contents of the <p> element with the ID "output" to a string describing the finally selected color.

+ +

Farbe klug verwenden

+ +

Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.

+ +

Die richtigen Farben finden

+ +

Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can't replace having a good designer helping you make these decisions, they can definitely get you started.

+ +

Base color

+ +

The first step is to choose your base color. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage {{interwiki("wikipedia", "Mountain Dew")}} and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:

+ + + +

When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site ColorZilla offers an extension (Chrome / Firefox) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.

+ +
+

The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.

+
+ +

Fleshing out the palette

+ +

Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See {{anch("Color and accessibility")}} for a brief explanation of why this matters.

+ +

A few examples (all free to use as of the time this list was last revised):

+ + + +

When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.

+ +
+

Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.

+
+ +

Ressourcen zu Farbentheorie

+ +

A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:

+ +
+
Color Science (Khan Academy in association with Pixar)
+
An online course which introduces concepts such as what color is, how it's percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.
+
{{interwiki("wikipedia", "Color theory")}} on Wikipedia
+
Wikipedia's entry on color theory, which has a lot of great information from a technical perspective. It's not really a resource for helping you with the color sleection process, but is still full of useful information.
+
+ +

Farbe und Barrierefreiheit

+ +

There are several ways color can be an {{Glossary("accessibility")}} problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it's important to consider your use of color carefully.

+ +

You should do at least basic research into {{interwiki("wikipedia", "color blindness")}}. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.

+ +
+

The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.

+
+ +

For more information about color blindness, see the following articles:

+ + + +

Palette design example

+ +

Let's consider a quick example of selecting an appropriate color palette for a site. Imagine that you're building a web site for a new game that takes place on the planet Mars. So let's do a Google search for photos of Mars. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. We use a color picker tool to select a sample of the color we choose.

+ +

Using an eyedropper tool, we identify a color we like and determine that the color in question is #D79C7A, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.

+ +

Having selected our base color, we need to build out our palette. We decide to use Paletteon to come up with the other colors we need. Upon opening Paletton, we see:

+ +

Right after loading Paletton.

+ +

Next, we enter our color's hex code (D79C7A) into the "Base RGB" box at the bottom-left corner of the tool:

+ +

After entering base color

+ +

We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is #508D7C.

+ +

Now with complementary colors included.

+ +

If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:

+ +

Triad color scheme selected

+ +

That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's #556E8D. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:

+ +

Triad color scheme selected

+ +

Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.

+ +

Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.

+ +

See also

+ + diff --git a/files/de/web/html/attributes/index.html b/files/de/web/html/attributes/index.html new file mode 100644 index 0000000000..3ec9df8ec7 --- /dev/null +++ b/files/de/web/html/attributes/index.html @@ -0,0 +1,662 @@ +--- +title: HTML attribute reference +slug: Web/HTML/Attributes +tags: + - Anfänger + - Attribute + - Einstellungen + - Elemente + - HTML + - Reference + - Web +translation_of: Web/HTML/Attributes +--- +

Elemente in HTML haben Attribute; dies sind zusätzliche Werte, die die Elemente konfigurieren oder ihr Verhalten auf verschiedene Weise anpassen, um die Kriterien zu erfüllen, die die Benutzer wollen.

+ +

Attributliste

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributnameElementeBeschreibung
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Liste der Typen, die der Server akzeptiert, in der Regel ein Dateityp.
accept-charset{{ HTMLElement("form") }}Liste der unterstützten Zeichensätze.
accesskeyGlobales AttributDefiniert eine Tastenkombination zum Aktivieren oder Hinzufügen von Fokus auf das Element.
action{{ HTMLElement("form") }}Die URI eines Programms, das die über das Formular übermittelten Informationen verarbeitet.
align{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }},  {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }},  {{ HTMLElement("td") }},  {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}Gibt die horizontale Ausrichtung des Elements an.
alt{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}Alternativer Text, falls ein Bild oder ein vergleichbares anderes Element nicht angezeigt werden kann.
async{{ HTMLElement("script") }}Gibt an, dass das Skript asynchron ausgeführt werden soll.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Gibt an, ob die Kontrollen in diesem Formular standardmäßig ihre Werte automatisch durch den Browser vervollständigen können.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Das Element sollte nach der geladenen Seite automatisch fokussiert werden.
autoplay{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Das Audio oder Video sollte so schnell wie möglich spielen.
autosave{{ HTMLElement("input") }}Bisherige Werte sollten Dropdowns von auswählbaren Werten über Seitenlasten bestehen bleiben.
bgcolor{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }} +

Hintergrundfarbe des Elements

+ +
+

Hinweis: Dies ist ein veraltetes Attribut. Bitte benutze stattdessen die CSS {{ Cssxref("background-color") }} Eigenschachaft.

+
+
border{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }} +

Die Randbreite eines Elements

+ +
+

Hinweis: Die ist ein veraltetes Attribut. Bitte benutze stattdessen die CSS {{ Cssxref("border") }} Eigenschaft.

+
+
buffered{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Enthält den Zeitbereich von bereits gepufferten Medien.
challenge{{ HTMLElement("keygen") }}Eine Herausforderung, die zusammen mit dem öffentlichen Schlüssel eingereicht wird.
charset{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}Deklariert die Zeichencodierung der Seite oder des Skripts.
checked{{ HTMLElement("command") }}, {{ HTMLElement("input") }}Gibt an, ob das Element auf Seitenladung überprüft werden soll.
cite{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}Enthält einen URI, der auf die Quelle des Angebots oder der Änderung verweist.
classGlobales AttributOft mit CSS verwendet, um Elemente mit gemeinsamen Eigenschaften zu gestalten.
code{{ HTMLElement("applet") }}Gibt die URL der zu ladenden und ausgeführten Klassendatei des Applets an.
codebase{{ HTMLElement("applet") }}Dieses Attribut gibt die absolute oder relative URL des Verzeichnisses an, in dem Applets '.class-Dateien, die durch das Codeattribut referenziert werden, gespeichert sind.
color{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }} +

Dieses Attribut setzt die Textfarbe entweder mit einer benannten Farbe oder einer Farbe, die im hexadezimalen #RRGGBB-Format angegeben ist.

+ +
+

Hinweis: Das ist ein veraltetestes Attribut. Bitte benutze stattdessen die CSS {{ Cssxref("color") }} Eigenschaft.

+
+
cols{{ HTMLElement("textarea") }}Definiert die Anzahl der Spalten in einem Textbereich.
colspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}Das colspan-Attribut definiert die Anzahl der Spalten, die eine Zelle überspannen soll.
content{{ HTMLElement("meta") }}Ein Wert, der mit http-equiv oder dem Namen verbunden ist, abhängig vom Kontext.
contenteditableGlobales AttributGibt an, ob der Inhalt des Elements bearbeitet werden kann.
contextmenuGlobales AttributDefiniert die ID eines {{HTMLElement("menu")}} - Elements, das als Kontextmenü des Elements dient.
controls{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Gibt an, ob der Browser dem Benutzer die Wiedergabesteuerung anzeigen soll.
coords{{ HTMLElement("area") }}Ein Satz von Werten, die die Koordinaten des Hot-Spot-Bereichs angeben.
crossorigin{{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }}Wie das Element grenzüberschreitende Anfragen behandelt.
data{{ HTMLElement("object") }}Gibt die URL der Ressource an.
data-*Globales AttributErmöglicht es Ihnen, benutzerdefinierte Attribute an ein HTML-Element anzuhängen.
datetime{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}Gibt das Datum und die Uhrzeit an, die dem Element zugeordnet sind.
default{{ HTMLElement("track") }}Zeigt an, dass die Spur aktiviert werden soll, es sei denn, die Einstellungen des Benutzers zeigen etwas anderes an.
defer{{ HTMLElement("script") }}Gibt an, dass das Skript nach dem Analysieren der Seite ausgeführt werden soll.
dirGlobales AttributDefiniert die Textrichtung. Zulässige Werte sind (links-nach-rechts oder rechts-nach-links)
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}
disabled{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Gibt an, ob der Benutzer mit dem Element interagieren kann.
download{{ HTMLElement("a") }}, {{ HTMLElement("area") }}Zeigt an, dass der Hyperlink zum Herunterladen einer Ressource verwendet werden soll.
draggableGlobales AttributLegt fest, ob das Element gezogen werden kann.
dropzoneGlobales AttributGibt an, dass das Element das Fallenlassen von Inhalt auf ihm akzeptiert.
enctype{{ HTMLElement("form") }}Definiert den Inhaltstyp des Formulars, wenn die Methode POST ist.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Beschreibt Elemente, die zu diesem gehören.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Gibt das Formular an, das der Besitzer des Elements ist.
formaction{{ HTMLElement("input") }}, {{ HTMLElement("button") }}Gibt die Aktion des Elements an und überschreibt die im {{HTMLElement ("Formular")}} definierte Aktion.
headers{{ HTMLElement("td") }}, {{ HTMLElement("th") }}IDs der <th> -Elemente, die für dieses Element gelten.
height{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }} +

Gibt die Höhe der hier aufgeführten Elemente an. Für alle anderen Elemente verwenden Sie die Eigenschaft CSS {{cssxref ("height")}}.

+ +
+

Hinweis: In einigen Fällen wie {{HTMLElement ("div")}} ist dies ein Legacy-Attribut, in welchem ​​Fall die CSS {{Cssxref ("height")}} Eigenschaft stattdessen verwendet werden soll.

+
+
hiddenGlobales AttributVerhindert das Rendering des gegebenen Elements, während Kinderelemente, z.B. Script-Elemente, aktiv.
high{{ HTMLElement("meter") }}Zeigt die untere Schranke des oberen Bereichs an.
href{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}Gibt die URL einer verknüpften Ressource an.
hreflang{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Gibt die Sprache der verknüpften Ressource an.
http-equiv{{ HTMLElement("meta") }}
icon{{ HTMLElement("command") }}Gibt ein Bild an, das den Befehl darstellt.
idGlobales AttributOft mit CSS verwendet, um ein bestimmtes Element zu stylen. Der Wert dieses Attributs muss eindeutig sein.
integrity{{ HTMLElement("link") }}, {{ HTMLElement("script") }}  +

Sicherheits-Feature, das Browsern ermöglicht zu verifizieren, was sie abrufen.

+ +

MDN Link

+
ismap{{ HTMLElement("img") }}Gibt an, dass das Bild Teil einer Server-seitigen Image-Map ist.
itempropGlobales Attribut
keytype{{ HTMLElement("keygen") }}Spezifiziert den Typ des generierten Schlüssels.
kind{{ HTMLElement("track") }}Spezifiziert die Art der Textspur.
label{{ HTMLElement("track") }}Definiert einen für den Nutzer lesbaren Titel der Textspur.
langGlobales AttributDefiniert die im Element genutzte Sprache.
language{{ HTMLElement("script") }}Definiert die im Element genutzte Skriptsprache.
list{{ HTMLElement("input") }}Identifiziert eine dem Nutzer vorzuschlagende Liste vordefinierter Optionen.
loop{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}Gibt an, ob das Medium ab dem Start beginnen soll, wenn es fertig ist.
low{{ HTMLElement("meter") }}Zeigt die obere Schranke des unteren Bereiches an.
manifest{{ HTMLElement("html") }}Gibt die URL des Cache-Manifests des Dokuments an.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Gibt den maximal zulässigen Wert an.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Definiert die maximal zulässige Anzahl von Zeichen im Element.
media{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}Gibt einen Hinweis auf das Medium an, für das die verknüpfte Ressource entworfen wurde.
method{{ HTMLElement("form") }}Legt fest, welche HTTP-Methode bei der Übermittlung des Formulars verwendet werden soll. Kann GET (Standard) oder POST sein.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Gibt den zulässigen Mindestwert an.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Gibt an, ob mehrere Werte in einer Eingabe des Typs E-Mail oder Datei eingegeben werden können.
muted{{ HTMLElement("video") }}Zeigt an, ob der Ton anfänglich auf Seitenladung ausgeschaltet wird.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}Name des Elements. Zum Beispiel von dem Server verwendet, um die Felder in Form zu übermitteln.
novalidate{{ HTMLElement("form") }}Dieses Attribut gibt an, dass das Formular bei der Übermittlung nicht validiert werden darf.
open{{ HTMLElement("details") }}Gibt an, ob die Details auf Seite geladen werden sollen.
optimum{{ HTMLElement("meter") }}Zeigt den optimalen numerischen Wert an.
pattern{{ HTMLElement("input") }}Definiert einen regulären Ausdruck, den der Wert des Elements validiert.
ping{{ HTMLElement("a") }}, {{ HTMLElement("area") }}
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Bietet dem Benutzer einen Hinweis darauf, was im Feld eingegeben werden kann.
poster{{ HTMLElement("video") }}Eine URL, die einen Posterrahmen anzeigt, bis der Benutzer spielt oder sucht.
preload{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indicates whether the whole resource, parts of it or nothing should be preloaded.
radiogroup{{ HTMLElement("command") }}
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indicates whether the element can be edited.
rel{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Specifies the relationship of the target object to the link object.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether this element is required to fill out or not.
reversed{{ HTMLElement("ol") }}Indicates whether the list should be displayed in a descending order instead of a ascending.
rows{{ HTMLElement("textarea") }}Defines the number of rows in a text area.
rowspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}Defines the number of rows a table cell should span over.
sandbox{{ HTMLElement("iframe") }}
scope{{ HTMLElement("th") }}
scoped{{ HTMLElement("style") }}
seamless{{ HTMLElement("iframe") }}
selected{{ HTMLElement("option") }}Defines a value which will be selected on page load.
shape{{ HTMLElement("a") }}, {{ HTMLElement("area") }}
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
sizes{{ HTMLElement("link") }}, {{ HTMLElement("img") }}, {{ HTMLElement("source") }}
slotGlobales AttributAssigns a slot in a shadow DOM shadow tree to an element.
span{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}
spellcheckGlobales AttributIndicates whether spell checking is allowed for the element.
src{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}Die URL des einbettbaren Inhalts.
srcdoc{{ HTMLElement("iframe") }}
srclang{{ HTMLElement("track") }}
srcset{{ HTMLElement("img") }}
start{{ HTMLElement("ol") }}Definiert die erste Zahl, wenn sie anders als 1 ist.
step{{ HTMLElement("input") }}
styleGlobales AttributDefiniert CSS Stile für das Element und überschreibt andere Stile, welche z.B. in einem Stylesheet für das Element festgelegt sind.
summary{{ HTMLElement("table") }}
tabindexGlobales AttributOverrides the browser's default tab order and follows the one specified instead.
target{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}
titleGlobales AttributText to be displayed in a tooltip when hovering over the element.
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}Definiert den Typ eines Elements.
usemap{{ HTMLElement("img") }},  {{ HTMLElement("input") }}, {{ HTMLElement("object") }}
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}Defines a default value which will be displayed in the element on page load.
width{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }} +

For the elements listed here, this establishes the element's width.

+ +
+

Note: For all other instances, such as {{ HTMLElement("div") }}, this is a legacy attribute, in which case the CSS {{ Cssxref("width") }} property should be used instead.

+
+
wrap{{ HTMLElement("textarea") }}Indicates whether the text should be wrapped.
+ +

Content versus IDL attributes

+ +

In HTML, most attributes have two faces: the content attribute and the IDL attribute.

+ +

The content attribute is the attribute as you set it from the content (the HTML code) and you can set it or get it via {{domxref("element.setAttribute()")}} or {{domxref("element.getAttribute()")}}. The content attribute is always a string even when the expected value should be an integer. For example, to set an {{HTMLElement("input")}} element's maxlength to 42 using the content attribute, you have to call setAttribute("maxlength", "42") on that element.

+ +

The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like element.foo. The IDL attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. In other words, the IDL attributes, in essence, reflect the content attributes.

+ +

Most of the time, IDL attributes will return their values as they are really used. For example, the default type for {{HTMLElement("input")}} elements is "text", so if you set input.type="foobar", the <input> element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". However, the type IDL attribute will return the string "text".

+ +

IDL attributes are not always strings; for example, input.maxlength is a number (a signed long). When using IDL attributes, you read or set values of the desired type, so input.maxlength is always going to return a number and when you set input.maxlength ,it wants a number. If you pass another type, it is automatically converted to a number as specified by the standard JavaScript rules for type conversion.

+ +

IDL attributes can reflect other types such as unsigned long, URLs, booleans, etc. Unfortunately, there are no clear rules and the way IDL attributes behave in conjunction with their corresponding content attributes depends on the attribute. Most of the time, it will follow the rules laid out in the specification, but sometimes it doesn't. HTML specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes  behave oddly (select.size, for example) and you should read the specifications to understand how exactly they behave.

+ +

Siehe auch

+ + diff --git a/files/de/web/html/block-level_elemente/index.html b/files/de/web/html/block-level_elemente/index.html new file mode 100644 index 0000000000..ed5cd1af79 --- /dev/null +++ b/files/de/web/html/block-level_elemente/index.html @@ -0,0 +1,108 @@ +--- +title: Block-Level Elemente +slug: Web/HTML/Block-level_elemente +tags: + - Anfänger + - Beginner + - Elemente + - Guide + - HTML + - HTML Elemente + - Referenzen + - Web Programmierung +translation_of: Web/HTML/Block-level_elements +--- +

Block- und Inline-Elemente sind die zwei ursprünglichen Kategorien der darstellenden HTML-Elemente.

+ +

Block-Elemente nehmen typischerweise die gesamte verfügbare Breite ihres Elternelements ein und grenzen ihren Inhalt vertikal durch je einen Zeilenumbruch gegenüber den vor- und nachfolgenden Elementen ab. Auf diese Weise erzeugen sie den rechteckigen Block, der ihnen den Namen gibt.

+ +

Block-Elemente stellen inhaltlich einen zusammenhängenden Bereich dar und geben ihm eine semantische Bedeutung. Prominentes Beispiel für ein Block-Element ist {{ HTMLElement("p") }}, das einen Textabsatz (Englisch: paragraph) umfasst und mit Abständen darüber und darunter von anderen Bereichen des Dokuments trennt.
+ Einzige Ausnahme ist von dieser Regel ist {{ HTMLElement("div") }}; dieses hat keine semantische Bedeutung und dient lediglich dem Zugriff auf den betreffenden Bereich mittels CSS oder Javascript.

+ +

Gemeinhin können Block-Elemente Inline- und meist auch weitere Block-Elemente enthalten. Dieser strukturellen Unterscheidung liegt die Idee zugrunde, dass auf Block-Ebene größere Strukturen definiert werden als auf Inline-Ebene.
+ Die höchste Ebene für Block-Elemente selbst ist das Element {{ HTMLElement("body") }}.

+ +

Die einfache Unterscheidung zwischen Block- und Inline-Ebene wird in HTML-Spezifikationen bis einschließlich Version 4.01 verwendet. In HTML 5 wird diese Zweiteilung zu einem komplexeren Satz von Inhaltskategorien ergänzt. Hierbei entspricht die Block-Ebene in HTML 5 grob der Kategorie fließender Inhalte, während die Inline-Ebene der Kategorie gestaltender Inhalte gleichkommt. Darüber hinaus existieren weitere Kategorien.

+ +

Elemente

+ +

Die nachfolgende Liste zeigt eine komplette Übersicht aller HTML-Block-Elemente (die neuen HTML-5-Elemente sind technisch gesehen nicht als Block-Elemente definiert).

+ +
+
+
{{ HTMLElement("address") }}
+
Kontaktinformation.
+
{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}
+
Inhalt eines Artikels.
+
{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}
+
Anmerkungen.
+
{{ HTMLElement("audio") }} {{ HTMLVersionInline(5) }}
+
Audio-Wiedergabe.
+
{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}
+
Video-Wiedergabe.
+
{{ HTMLElement("blockquote") }}
+
Zitat in Form eines eigenständigen Absatzes.
+
{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}
+
Bereich zum Zeichnen und Malen.
+
{{ HTMLElement("dd") }}
+
Definition, Beschreibung.
+
{{ HTMLElement("div") }}
+
Allgemeine Unterteilung ohne semantische Aussage.
+
+ + + +
+
+
{{ HTMLElement("dl") }}
+
Definitionsliste.
+
+ +
+
{{ HTMLElement("fieldset") }}
+
Gruppe von Elementen im Formular oder Reiter im Dialog.
+
{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}
+
Beschreibung einer Grafik.
+
{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}
+
Grafik mit Beschreibung (siehe {{ HTMLElement("figcaption") }}).
+
{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}
+
Fußbereich.
+
{{ HTMLElement("form") }}
+
Eingabeformular.
+
{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}
+
Überschriften in Abstufung 1 bis 6.
+
{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}
+
Kopfbereich.
+
{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}
+
Gruppe mehrerer Überschriften.
+
+
{{ HTMLElement("hr") }}
+
Horizontrale Trennlinie.
+
{{ HTMLElement("noscript") }}
+
Ersatzinhalt, falls JavaScript deaktiviert ist.
+
{{ HTMLElement("ol") }}
+
Geordnete Liste.
+
{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}
+
Dynamisch erzeugte Ausgaben.
+
{{ HTMLElement("p") }}
+
Textabsatz.
+
{{ HTMLElement("pre") }}
+
Vorformatierter Text.
+
{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}
+
Abschnitt einer Seite.
+
{{ HTMLElement("table") }}
+
Tabelle.
+
{{ HTMLElement("tfoot") }}
+
Fußbereich der Tabelle.
+
{{ HTMLElement("ul") }}
+
Ungeordnete Liste.
+
+
+ +

+ +

Siehe auch

+ + diff --git a/files/de/web/html/canvas/index.html b/files/de/web/html/canvas/index.html new file mode 100644 index 0000000000..50e6da1aae --- /dev/null +++ b/files/de/web/html/canvas/index.html @@ -0,0 +1,120 @@ +--- +title: Canvas +slug: Web/HTML/Canvas +tags: + - API + - Canvas + - HTML5 +translation_of: Web/API/Canvas_API +--- +
{{CanvasSidebar}}
+ +

Mit der Einführung von HTML5 wurde ein neues "Leinwand" Element zum Zeichnen von Grafiken mittels JavaScript-API vorgestellt: {{HTMLElement("canvas")}}. Die Anwendungsgebiete sind äußerst flexibel, so ist es möglich, mit Canvas Diagramme zu zeichnen, Bilder zu bearbeiten, Animationen zu erstellen oder sogar Videos zu bearbeiten und zu rendern.

+ +

Der Support für <canvas> in Mozilla-Anwendungen wurde ab Gecko 1.8 (sprich ab Firefox 1.5) implementiert. Canvas stammt ursprünglich von Apple und wurde für das OS X Dashboard und den Safari-browser entwickelt. Der Internet Explorer unterstützt Canvas ab Version 9, wobei es durch ein Skript von Google's Explorer Canvas Projekt auch in früheren Versionen des IE lauffähig ist. Google Chrome und Opera ab Version 9 unterstützen <canvas> ebenfalls problemlos.

+ +

Das <canvas> Element wird zudem von WebGL für die hardwarebeschleunigte Darstellung von 3D-Grafiken auf Webseiten eingesetzt.

+ +

Beispiel

+ +

Dies ist ein einfacher Code-Ausschnitt mit der {{domxref("CanvasRenderingContext2D.fillRect()")}} Methode.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);
+
+ +

Bearbeite den untenstehenden Code und sieh live Updates im Canvas: (Funktion kaputt auf Deutsch, die Englische Seite funktioniert, bitte oben umschalten auf Englisch )

+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Referenzen

+ +
+ +
+ +

Die Schnittstellen, die sich auf WebGLRenderingContext beziehen, werden unter WebGL zusammengefasst.

+ +

Leitfäden und Anleitungen

+ +
+
Canvas Tutorial
+
Eine ausführliche Anleitung, die sowohl grundlegende Nutzung als auch fortgeschrittene Funktionen umfasst
+
Code-Ausschnitte: Canvas
+
Einige Entwickler-orientierte Code-Ausschnitte, die <canvas> enthalten.
+
Demo: A basic ray-caster
+
A demo of ray-tracing animation using canvas.
+
DOM-Objekte in ein canvas zeichnen
+
Wie man DOM Inhalt, wie zum Beispiel HTML-Elemente, in ein canvas zeichnet.
+
Videos mit canvas manipulieren
+
{{HTMLElement("video")}} und {{HTMLElement("canvas")}} kombinieren, um Videos in Echtzeit zu manipulieren.
+
+ +

Quellen

+ +

Allgemeines

+ + + +

Libraries

+ + + +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', "the-canvas-element.html", "Canvas")}}{{Spec2('HTML WHATWG')}} 
+ +

Siehe auch

+ + diff --git a/files/de/web/html/element/a/index.html b/files/de/web/html/element/a/index.html new file mode 100644 index 0000000000..6413dd1ac9 --- /dev/null +++ b/files/de/web/html/element/a/index.html @@ -0,0 +1,361 @@ +--- +title: +slug: Web/HTML/Element/a +tags: + - Element + - HTML + - 'HTML: fliessender Inhalt' + - Inhalt + - Reference + - Web +translation_of: Web/HTML/Element/a +--- +
{{HTMLRef}}
+ +

Übersicht

+ +

Das HTML-Element <a> (auch HTML-Anker-Element) definiert einen Hyperlink, ein benanntes Ziel für einen Hyperlink oder beides.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
InhaltskategorienFließender Inhalt, gestaltender Inhalt, interaktiver Inhalt, fühlbarer Inhalt.
Erlaubter InhaltTransparent, beinhaltet entweder fließenden Inhalt (ausgenommen interaktiven Inhalt) oder gestaltender Inhalt.
Tag Wegfall{{no_tag_omission}}
Erlaubte ElternelementeAlle Elemente die gestaltenden Inhalt akzeptieren, oder alle Elemente die fließenden Inhalt erlauben.
Erlaubte ARIA-Rollen{{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}
DOM interface{{domxref("HTMLAnchorElement")}}
+ +

Attribute

+ +

Dieses  Element besitzt die globalen Attribute.

+ +
+
{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}
+
Dieses Attribut zeigt, dass der Autor möchte, dass der Hyperlink verwendet wird, um eine Datei herunterzuladen. Also soll der Browser, wenn der Benutzer auf den Link klickt, diesen fragen, wo die Datei lokal gespeichert werden soll. Falls dem Attribut ein Wert zugewiesen ist, wird dieser Wert als Dateiname zum Abspeichern vorgeschlagen (der Benutzer kann diesen Namen natürlich ändern). Es gibt keine Einschränkungen für erlaubte Werte (obgleich / und \ in Unterstriche konvertiert werden, um Verwechslungen mit Dateipfaden zu vermeiden). Dennoch sollten Sie beachten, dass die meisten Dateisysteme Einschränkungen bezüglich der unterstützten Interpunktion in Dateinamen haben, sowie die Browser die Dateinamen anpassen könnten. +
+

Hinweis:

+ +
    +
  • Dies kann mit blob:-URLs und data:-URLs verwendet werden, um es für Benutzer leichter zu machen, Inhalte herunterzuladen, die durch JavaScript generiert wurden (z. B. ein Bild, welches online über eine Zeichen-Anwendung erstellt wurde).
    • +
  • Falls der HTTP-Header Content-Disposition: angegeben wird und einen anderen Dateinamen vorschlägt als dieses Attribut, hat der HTTP-Header Vorrang vor diesem Attribut.
    • +
  • Falls das Attribut angegeben wird und Content-Disposition: den Wert inline hat, gibt Firefox Content-Disposition eine größere Wichtigkeit, wie im Fall des Dateinamens, während Chrome dem download-Attribut mehr Priorität gibt.
    • +
  • Im Firefox 20 wird dieses Attribut nur für Links auf Dateien desselben Ursprungs angewendet.
    • +
+
+
+
{{htmlattrdef("href")}}
+
Dieses war das einzige erforderliche Attribut für Anker, die einen Hyperlink definieren, aber es ist nicht länger erforderlich in HTML5. Wird dieses Attribut weggelassen, wird ein Platzhalter-Link erzeugt. Das href-Attribut zeigt das Ziel des Links an, entweder eine URL oder ein URL-Fragment. Ein URL-Fragment ist ein Name dem ein Doppelkreuz (#) vorausgeht, welches ein internes Ziel im aktuellen Dokument (eine ID) festlegt. URLs sind nicht auf Web-(HTTP-)Dokumente beschränkt. Sie können ein beliebiges Protokoll verwenden, das von Browser unterstützt wird. Zum Beispiel file, ftp und mailto funktionieren in den meisten Browsern. +
+

Hinweis: Sie können das spezielle Fragment „top“ verwenden, um Links zu erzeugen, die zurück zum Anfang der Seite springen. Zum Beispiel: <a href="#top">Return to top</a>. Dieses Verhalten ist in HTML5 festgelegt.

+
+
+
{{htmlattrdef("media")}} {{HTMLVersionInline(5)}}
+
Dieses Attribut legt das Medium fest, zu welchem die verlinkte Seite gehört. Der Wert muss ein Media Query sein. Das Attribut ist sinnvoll, wenn auf externe Stylesheets verlinkt wird, während dem Browser erlaubt wird, das passende für das Gerät auszuwählen. +
+

Verwendungshinweis:

+ +
    +
  • In HTML 4 ist nur eine einfache durch Leerzeichen getrennte Liste von Media Types und Media Groups definiert worden und als Werte für dieses Attribut erlaubt, z. B. print, screen, aural, braille, … HTML 5 hat dies auf beliebige Media Queries erweitert, die eine Obermenge der erlaubten Werte von HTML 4 sind.
    • +
  • Browser, welche die CSS3 Media Queries nicht unterstützen, werden nicht notwendigerweise den passenden Link erkennen. Vergessen Sie also nicht Fallback-Links auf die beschränkten Werte von HTML 4 zu definieren.
    • +
+
+
+
{{htmlattrdef("ping")}} {{HTMLVersionInline(5)}}
+
Falls das Attribut ping vorhanden ist, wird den URLs der Zielseiten eine Benachrichtigung gesendet, wenn der Benutzer dem Hyperlink folgt.
+
{{htmlattrdef("rel")}}
+
Legt das Verhältnis des Zielobjekts zum Linkobjekt fest. Der Wert ist eine durch Leerzeichen getrennte Liste von Link-Typen.
+
{{htmlattrdef("target")}}
+
Dieses Attribut legt fest, wo die verlinkte Quelle angezeigt wird. In HTML4 ist das der Name eines Frames oder ein Schlüsselwort für ein Frame. In HTML5 ist es ein Name eines browsing contextes oder ein Schlüsselwort für einen browsing context (zum Beispiel ein Tab, Fenster oder Inline Frame). Die folgenden Schlüsselwörter haben eine spezielle Bedeutung: +
    +
  • _self: Lädt die Antwort in dasselbe Frame (HTML4) bzw. denselben browsing context (HTML5) wie die aktuelle Seite. Dieser Wert ist der Standardwert.
    • +
  • _blank: Lädt die Antwort in ein neues unbenanntes Fenster (HTML4) bzw. einen neuen browsing context (HTML5).
    • +
  • _parent: Lädt die Antwort in den frameset parent des aktuellen Frames (HTML4) bzw. parent browsing context (HTML5) des aktuellen. Falls es keinen parent gibt, verhält sich dieser Wert wie _self.
    • +
  • _top: Lädt die Antwort in das gesamte Fenster und alle Frames werden überschrieben (HTML4) bzw. in den obersten browsing context (d.h. der browsing context, der dem aktuellen übergeordnet ist und keine übergeordneten browsing contexte hat). Falls es keinen übergeordneten gibt, verhält sich dieser Wert wie _self.
    • +
+ Verwenden Sie dieses Attribut nur, wenn ein href-Attribut vorhanden ist.
+
{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}
+
Dieses Attribut definiert die Zeichencodierung der verlinkten Datei. Der Wert ist eine durch Leerzeichen und/oder Komma-getrennte Liste von Zeichen-Sets nach der Definition der RFC 2045. Der Standardwert ist ISO-8859-1. +
+

Verwendungshinweis: Dieses Attribut ist obsolet in HTML5 und sollte nicht mehr verwendet werden. Um denselben Effekt zu erhalten, verwenden Sie den HTTP-Header Content-Type: bei der verlinkten Datei.

+
+
+
{{htmlattrdef("coords")}} nur {{HTMLVersionInline(4)}}, {{obsoleteGeneric("inline","HTML5")}}
+
Bei der Verwendung mit dem shape-Attribut gibt dieses Attribut als durch Komma getrennte Liste von Zahlen die Koordinaten des Objekts auf der Seite an.
+
{{htmlattrdef("datafld")}} {{Non-standard_inline}}
+
Dieses Attribut legt den Spaltennamen des Datenquellenobjekts fest, das die Daten zur Verfügung stellt, die mit diesem Element verknüpft sind. +
+

Verwendungshinweis: Dieses Attribut ist nicht standardisiert und sollte nicht verwendet werden. Um denselben Effekt zu erhalten, verwenden Sie Scripting und einen Mechanismus wie XMLHttpRequest, um die Seite dynamisch zu verändern.

+
+ + + + + + + + + + + + + + + + + + + + + +
UnterstützungGeckoPrestoWebKitTrident
Nicht unterstütztNicht unterstütztNicht unterstütztIE4, IE5, IE6, IE7 (Entfernt in IE8)
Normatives DokumentMicrosoft's Data Binding: dataFld Property (MSDN)
+
+
{{htmlattrdef("datasrc")}} {{Non-standard_inline}}
+
Dieses Attribut zeigt die ID des Datenquellenobjekts an, das die Daten zur Verfügung stellt, die mit diesem Element verknüpft sind. +
+

Verwendungshinweis: Dieses Attribut ist nicht standardisiert und sollte nicht verwendet werden. Um denselben Effekt zu erhalten, verwenden Sie Scripting und einen Mechanismus wie XMLHttpRequest, um die Seite dynamisch zu verändern.

+
+ + + + + + + + + + + + + + + + + + + + + +
UnterstützungGeckoPrestoWebKitTrident
Nicht unterstütztNicht unterstütztNicht unterstütztIE4, IE5, IE6, IE7 (Entfernt in IE8)
Normatives DokumentMicrosoft's Data Binding: dataSrc Property (MSDN)
+
+
{{htmlattrdef("hreflang")}}
+
Dieses Attribut zeigt die Sprache der verlinkten Datei an. Es ist nur ein Hinweis. Erlaubte Werte sind bestimmt von BCP47 für HTML5 und von RFC1766 für HTML4. Verwenden Sie dieses Attribut nur, wenn ein href-Attribut vorhanden ist.
+
{{htmlattrdef("methods")}} {{Non-standard_inline}}
+
Der Wert dieses Attributes liefert Informationen über die Funktionen, die an einem Objekt ausgeführt werden können. Die Werte werden üblicherweise vom HTTP bestimmt, wenn es verwendet wird, aber es könnte (für ähnliche Gründe wie für das title-Attribut) nützlich sein, hinweisende Informationen im Voraus im Link einzufügen. Zum Beispiel könnte der Browser einen Link anders anzeigen, je nachdem welche Methoden angegenben sind; etwas, das durchsuchbar ist könnte ein anderes Icon erhalten oder ein Link, der auf eine fremde Seite verweist, könnte mit einem Hinweis, die Seite zu verlassen, angezeigt werden. Dieses Attribut ist weder gut verstanden noch unterstützt, sogar vom definierenden Browser, Internet Explorer 4. Methods Property (MSDN)
+
{{htmlattrdef("name")}} nur {{HTMLVersionInline(4)}}, {{obsoleteGeneric("inline","HTML5")}}
+
Dieses Attribut wird in einem Anker benötigt, der ein Sprungziel innerhalb einer Seite definiert. Ein Wert für name ist einem Wert für das id-Attribut ähnlich und sollte eine alphanumerische Identifikation sein, die für das Dokument eindeutig ist. Nach der HTML-4.01-Spezifikation können id und name beide mit dem a-Element verwendet werden, solange sie idente Werte haben. +
+

Verwendungshinweis: Dieses Attribut ist obsolet in HTML5. Verwenden Sie das globale Attribut id stattdessen.

+
+
+
{{htmlattrdef("rev")}} nur {{HTMLVersionInline(4)}}, {{obsoleteGeneric("inline","HTML5")}}
+
Dieses Attribut legt einen umgekehrten Link fest und ist das inverse Verhältnis zum rel-Attribut. Es ist nützlich, um anzuzeigen, woher ein Objekt kam, sowie den Autor eines Dokuments.
+
+ +
+
{{htmlattrdef("shape")}} nur {{HTMLVersionInline(4)}}, {{obsoleteGeneric("inline","HTML5")}}
+
Dieses Attribut wird verwendet, um eine auswählbare Region für Hyperlinks festzulegen, die mit einer Abbildung verbunden sind, um eine Bildkarte zu erstellen. Die Werte für das Attribut sind circle, default, polygon und rect. Das Format des coords-Attributes hängt vom Wert jenes Attributs shape ab. Für circle ist der Wert x,y,r, wobei x und y die Pixelkoordinaten für den Mittelpunkt des Kreises sind und r der Radius in Pixeln ist. Für rect sollte das coords-Attribut x,y,w,h sein. Die Werte x,y legen das obere linke Eck des Rechtecks fest, während w und h die Breite bzw. Höhe festlegen. Der Wert polygon für shape verlangt Werte x1,y1,x2,y2,... für coords. Jedes der x,y-Paare definiert einen Punkt des Polygons, wobei aufeinander folgende Punkte sowie der letzte Punkt mit dem ersten mit geraden Linien verbunden werden. Der Wert default für shape verlangt, dass die gesamte beigefügte Fläche, üblicherweise ein Bild, verwendet wird. +
Hinweis: Es ist ratsam, das usemap-Attribut für das {{HTMLElement("img")}}-Element und das verbundene {{HTMLElement("map")}}-Element zu verwenden, um Hotspots anstatt des shape-Attributes zu definieren.
+
+
{{htmlattrdef("type")}}
+
Dieses Attribut legt den Medientyp in der Form eines MIME-Types für das Linkziel fest. Im Allgemeinen ist dies nur als hilfreiche Information verfügbar, aber in Zukunft könnte ein Browser ein kleines Icon für Multimedia-Typen hinzufügen. Beispielweise könnte ein Browser ein kleines Lautsrechersymbol anzeigen, wenn type auf audio/wav gesetzt ist. Für eine komplette Liste von erkannten MIME-Typen siehe http://www.w3.org/TR/html4/references.html#ref-MIMETYPES. Verwenden Sie dieses Attribut nur, wenn ein href-Attribut vorhanden ist.
+
{{htmlattrdef("urn")}} {{Non-standard_inline}}
+
Dieses angeblich von Microsoft unterstützte Attribut bezieht einen Uniform Resource Name (URN) auf den Link. Während dies auf Normungsarbeit vor Jahren basiert, ist die Bedeutung von URNs immer noch nicht gut definiert. Daher ist dieses Attribut bedeutungslos. urn Property (MSDN)
+
+ + + +
<!-- Link zu einer externen Datei -->
+<a href="http://www.mozilla.com/">
+Externer Link
+</a>
+
+ +

Ergebnis

+ +

Externer Link

+ + + +

Diese kleine Beispiel verwendet ein Bild, um zur MDN-Homepage zu verlinken. Die Homepage wird in einem neun browsing context geöffnet, d.h. eine neue Seite oder ein neuer Tab.

+ +
<a href="https://developer.mozilla.org/de/">
+  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN-Logo" />
+</a>
+
+ +

Ergebnis

+ +

MDN-Logo

+ + + +

Es ist üblich, Schaltflächen oder Links zu erstellen, die in des Benutzers E-Mail-Programm geöffnet werden, um ihnen zu erlauben, eine neue Nachricht zu senden. Dies wird mit mailto-Links gemacht. Hier ein einfaches Beispiel:

+ +
<a href="mailto:nowhere@mozilla.org">E-Mail senden</a>
+ +

Dies führt zu einem Link, der so aussieht: E-Mail senden.

+ +

Für weitere Details über das mailto-URL-Schema, z.B. wie man Betreff, Nachrichtentext oder ähnliches festlegt, siehe E-Mail-Links oder {{RFC(6068)}}.

+ +

Beispiel: Verwendung des download-Attributes, um ein canvas als PNG zu speichern

+ +

Falls Sie einem Benutzer erlauben möchten, ein HTML-Canvas als Bild herunterzuladen, können Sie einen Link mit download-Attribut und den canvas-Daten als Datei-URL erstellen:

+ +
var link = document.createElement('a');
+link.innerHTML = 'Bild herunterladen';
+link.addEventListener('click', function(ev) {
+    link.href = canvas.toDataURL();
+    link.download = "meinBild.png";
+}, false);
+document.body.appendChild(link);
+ +

Hier können Sie dies in Aktion sehen http://jsfiddle.net/codepo8/V6ufG/2/

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-a-element', '<a>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-a-element', '<a>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '<a>')}}{{Spec2('HTML4.01')}} 
+ +

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
href="#top"{{CompatVersionUnknown}}{{CompatGeckoDesktop("10.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{htmlattrxref("download","a")}}14{{CompatGeckoDesktop("20.0")}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
href="#top"{{CompatVersionUnknown}}{{CompatGeckoMobile("10.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{htmlattrxref("download","a")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("20.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Hinweise

+ +

Die folgenden sind reservierte Browser Schlüsselverbindungen für die 2 Hauptbrowser und sollten nicht als Wert eines Zugangsschlüssels benutzt werden: a, c, e, f, g, h, v, Pfeil links, and Pfeil rechts.

+ +

HTML 3.2 definiert nur name, href, rel, rev, und title.

+ +

Das target Attribut ist nicht definiert in Browsern die keine Frames unterstützen, so wie Netscape 1 Generation Browser. Desweiteren, ist target nicht erlaubt in Varianten von XHTML sondern ist limitiert nur auf frameset oder Transit-Formulare.

+ +

JavaScript Empfehlungen

+ +

Es ist öfters der Fall, dass ein Anker-Tag benutzt wird zusammen mit dem onclick Event. Um zu verhindern, dass die Seite sich neu lädt, wird href durch entweder "#" oder "javascript:void(0)" gesetzt. Beide Werte können zu unerwarteten Fehlern führen, wenn Hyperlinks kopiert oder in einem neuen Tab und/oder Fenster geöffnet werden. Seien Sie sich dieses Gebrauchs bewusst, und ausserdem, dass wenn Benutzer Anker-Tags benutzen, aber das generelle Verhalten verhindert wird.

+ +

Siehe auch

+ + diff --git a/files/de/web/html/element/abbr/index.html b/files/de/web/html/element/abbr/index.html new file mode 100644 index 0000000000..8679e31e46 --- /dev/null +++ b/files/de/web/html/element/abbr/index.html @@ -0,0 +1,202 @@ +--- +title: ': Das Abkürzungselement' +slug: Web/HTML/Element/abbr +tags: + - Element + - HTML + - HTML Textlevel Semantik + - Referenz + - Web +translation_of: Web/HTML/Element/abbr +--- +
{{HTMLRef}}
+ +

Das HTML-Abkürzungselement (<abbr>) steht für eine Abkürzung oder ein Akronym. Das optionale Attribut {{htmlattrxref("title")}} kann eine Erweiterung oder Beschreibung für die Abkürzung bereitstellen. Wenn vorhanden, title diese vollständige Beschreibung und nichts anderes enthalten.

+ +
{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}
+ + + +

Der Artikel Wie Abkürzungen markiert und verständlich gemacht werden, ist ein Leitfaden zur Verwendung von <abbr> und verwandten Elementen.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
InhaltskategorienFließender Inhalt, Formulierungsinhalt, fühlbarer Inhalt
Erlaubter InhaltFormulierungsinhalt
Tag Wegfall{{no_tag_omission}}
Erlaubte ElternelementeJedes Element, das Formulierungsinhalt akzeptiert
Erlaubte ARIA RollenAlle
DOM-Schnittstelle{{domxref("HTMLElement")}}
+ +

Attribute

+ +

Dieses Element unterstützt nur die globalen Attribute. Das Attribut {{htmlattrxref("title")}} hat bei Verwendung mit dem <abbr>-Element eine bestimmte semantische Bedeutung. Es muss eine vollständige von Menschen lesbare Beschreibung oder Erweiterung der Abkürzung enthalten. Dieser Text wird von Browsern häufig als Tooltip dargestellt, wenn der Mauszeiger über das Element bewegt wird.

+ +

Jedes <abbr>-Element, das Sie verwenden, ist unabhängig von allen anderen; wenn Sie title für eines angeben, wird derselbe Erweiterungstext nicht automatisch an ein anderes mit demselben Inhaltstext angehängt.

+ +

Nutzungshinweise

+ +

Typische Anwendungsfälle

+ +

Es ist sicherlich nicht erforderlich, dass alle Abkürzungen mit <abbr> markiert werden. Es gibt jedoch einige Fälle, in denen es hilfreich ist, dies zu tun:

+ + + +

Überlegungen zur Grammatik

+ +

Verwenden Sie in Sprachen mit {{interwiki ("wikipedia", "Numerus")}} (d. h. Sprachen, in denen die Anzahl der Elemente die Grammatik eines Satzes beeinflusst) die gleiche grammatikalische Nummer in Ihrem title-Attribut wie in Ihrem <abbr>-Element. Dies ist besonders wichtig bei Sprachen mit mehr als zwei Numeri, wie z. B. Arabisch, ist aber auch in Englisch relevant.

+ +

Standarddarstellung

+ +

Der Zweck dieses Elements ist ausschließlich für den Autor gedacht und wird von allen Browsern standardmäßig inline ({{cssxref('display')}}: inline) angezeigt. Die Standardeinstellung ist jedoch von Browser zu Browser unterschiedlich:

+ + + +

Beispiele

+ +

Eine Abkürzung semantisch markieren

+ +

Um eine Abkürzung zu markieren, ohne eine Erweiterung oder Beschreibung anzugeben, verwenden Sie einfach <abbr> ohne Attribute, wie in diesem Beispiel dargestellt.

+ +

HTML

+ +
<p>Using <abbr>HTML</abbr> is fun and easy!</p>
+ +

Ergebnis

+ +

{{EmbedLiveSample("Marking_up_an_abbreviation_semantically")}}

+ +

Abkürzungen formatieren

+ +

Sie können CSS verwenden, um einen benutzerdefinierten Stil festzulegen, der für Abkürzungen verwendet wird, wie in diesem einfachen Beispiel gezeigt.

+ +

HTML

+ +
<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>
+ +

CSS

+ +
abbr {
+  font-variant: all-small-caps;
+}
+ +

Ergebnis

+ +

{{EmbedLiveSample("Styling_abbreviations")}}

+ +

Eine Erweiterung bereitstellen

+ +

Durch das Hinzufügen eines Attributs {{htmlattrxref("title")}} können Sie eine Erweiterung oder Definition für die Abkürzung oder das Akronym angeben.

+ +

HTML

+ +
<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big
+time.</p>
+ +

Ergebnis

+ +

{{EmbedLiveSample("Providing_an_expansion")}}

+ +

Eine Abkürzung definieren

+ +

Sie können <abbr> zusammen mit {{HTMLElement("dfn")}} verwenden, um eine Abkürzung formal zu definieren, wie hier gezeigt.

+ +

HTML

+ +
<p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr>
+</dfn> is a markup language used to create the semantics and structure
+of a web page.</p>
+
+<p>A <dfn id="spec">Specification</dfn>
+(<abbr title="Specification">spec</abbr>) is a document that outlines
+in detail how a technology or API is intended to function and how it is
+accessed.</p>
+ +

Ergebnis

+ +

{{EmbedLiveSample("Defining_an_abbreviation", 600, 120)}}

+ +

Ausführlichere Beispiele finden Sie im Artikel Wie Abkürzungen markiert und verständlich gemacht werden.

+ +

Barrierefreiheit

+ +

Wenn Sie das Akronym oder die Abkürzung bei der ersten Verwendung auf einer Seite vollständig ausschreiben, hilft dies den Menschen, sie zu verstehen, insbesondere wenn es sich um technische Inhalte oder um Fachjargon handelt.

+ +

Beispiel

+ +
<p>JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight data-interchange format.</p>
+
+ +

Dies ist besonders hilfreich für Personen, die mit der Terminologie oder den inhaltlichen Begriffen nicht vertraut sind, Personen, die sich mit der Sprache noch nicht auskennen, und Menschen mit kognitiven Hürden.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'semantics.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}{{Spec2('HTML4.01')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("html.elements.abbr")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/html/element/acronym/index.html b/files/de/web/html/element/acronym/index.html new file mode 100644 index 0000000000..9116c10296 --- /dev/null +++ b/files/de/web/html/element/acronym/index.html @@ -0,0 +1,78 @@ +--- +title: +slug: Web/HTML/Element/acronym +tags: + - Element + - HTML + - Referenz + - Veraltet + - Web +translation_of: Web/HTML/Element/acronym +--- +
{{HTMLRef}}{{obsolete_header}}
+ +

Mit dem HTML Acronym Element (<acronym>) können Autoren eine Folge von Zeichen deutlich angeben, aus denen ein Akronym oder eine Abkürzung für ein Wort besteht. Dieses Element wurde in HTML5 entfernt. Verwenden Sie das Element {{HTMLElement("abbr")}}.

+ +
+

Nutzungshinweis: Dieses Element wurde in HTML5 entfernt und sollte nicht mehr verwendet werden. Stattdessen sollten Webentwickler das Element {{HTMLElement("abbr")}} verwenden.

+
+ +

Attribute

+ +

Dieses Element hat nur globale Attribute, die allen Elementen gemeinsam sind.

+ +

DOM Schnittstelle

+ +

Dieses Element implementiert die {{domxref('HTMLElement')}} Schnittstelle.

+ +
Implementierungshinweis: Bis einschließlich Gecko 1.9.2 implementiert Firefox die {{domxref('HTMLSpanElement')}} Schnittstelle für dieses Element.
+ +

Beispiel

+ +
<p>Das <acronym title="World Wide Web">WWW</acronym> ist nur eine Komponente des Internets.</p>
+
+ +

Standarddarstellung

+ +

Obwohl der Zweck dieses Tags nur der Bequemlichkeit des Autors dient, variiert sein Standardstil von Browser zu Browser:

+ +
    +
  • Manche Browser, wie der Internet Explorer, stellen es nicht anders als das {{HTMLElement("span")}}-Element dar.
    • +
  • Opera, Firefox, Chrome und einige andere fügen dem Inhalt des Elements eine gepunktete Unterstreichung hinzu.
    • +
  • Einige Browser fügen nicht nur eine gepunktete Unterstreichung hinzu, sondern setzen sie auch in Kapitälchen ein. Um dies zu vermeiden, fügen Sie Ihrem CSS etwas wie {{cssxref("font-variant")}}: none hinzu.
    • +
+ +

Es wird daher dringend empfohlen, dass sich Webautoren nicht vollständig auf das Standard-Styling verlassen.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML4.01', 'struct/text.html#edef-ACRONYM', '<acronym>')}}{{Spec2('HTML4.01')}} 
+ +

Browserkompatibilität

+ +

 

+ +

{{Compat("html.elements.acronym")}}

+ +

Siehe auch

+ +
    +
  • Das HTML-Element {{HTMLElement("abbr")}}
    • +
+ +
 
diff --git a/files/de/web/html/element/address/index.html b/files/de/web/html/element/address/index.html new file mode 100644 index 0000000000..3b8d17f305 --- /dev/null +++ b/files/de/web/html/element/address/index.html @@ -0,0 +1,163 @@ +--- +title:
+slug: Web/HTML/Element/address +tags: + - Element + - HTML + - HTML Sektionen + - Referenz + - Web +translation_of: Web/HTML/Element/address +--- +

Übersicht

+ +

Das HTML <address> Element kann von Autoren genutzt werden, um Kontaktinformationen an den nähesten {{HTMLElement("article")}} oder {{HTMLElement("body")}} Erben zu übergeben. Im letzteren Fall gilt es für das gesamte Dokument.

+ +
+

Hinweis zur Benutzung:

+ +
    +
  • Um eine beliebige Adresse darzustellen, welche unabhängig von den Kontaktinformationen ist, sollte eher das {{HTMLElement("p")}} Element als das <address> Element genutzt werden.
    • +
  • Dieses Element sollte nicht mehr Informationen als die reinen Kontaktinformationen beinhalten, wie zum Beispiel ein Publizierungs-Datum (welches in ein {{HTMLElement("time")}} Element gehört).
    • +
  • Typischerweise wird ein <address> Element innerhalb eines {{HTMLElement("footer")}} Elements der aktuellen Sektion platziert.
    • +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
InhaltskategorienFließender Inhalt, greifbarer Inhalt.
Erlaubter InhaltFließender Inhalt, jedoch ohne <address> Element und ohne Kopfinhalt ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), no sectioning content ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), and no {{HTMLElement("header")}} or {{HTMLElement("footer")}} element.
Tag Auslassung{{no_tag_omission}}
Erlaubte ElternelementeJedes Element, welches fließenden Inhalt akzeptiert.
DOM Schnittstelle{{domxref("HTMLElement")}}. Bis Gecko 2.0 (Firefox 4), hat Gecko dieses Element mit Hilfe der {{domxref("HTMLSpanElement")}} Schnittstelle implementiert.
+ +

Attribute

+ +

Dieses Element schließt nur globale Attribute ein.

+ +

Beispiel

+ +
  <address>
+    You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br>
+    If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br>
+    You may also want to visit us:<br>
+    Mozilla Foundation<br>
+    1981 Landings Drive<br>
+    Building K<br>
+    Mountain View, CA 94043-0801<br>
+    USA
+  </address>
+
+ +

Das obenstehende HTML wird folgendes ausgeben:

+ +

Image:HTML-address.png

+ +

Außerdem stellt das address Element den Text im gleichen Stil wie das {{HTMLElement("i")}} oder {{HTMLElement("em")}} Element dar. Es ist angebracht das address Element zu benutzen, wenn man mit Kontaktinformationen umgeht, als wenn man nur zusätzliche Informationen mitteilen möchte.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', 'sections.html#the-address-element', '<address>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'sections.html#the-address-element', '<address>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}}{{Spec2('HTML4.01')}} 
+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.7")}}1.05.121.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.7")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Siehe auch

+ +
    +
  • Andere verwandte Elemente: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}};
    • +
  • Sections and outlines of an HTML5 document.
    • +
+ +
{{HTMLRef}}
diff --git a/files/de/web/html/element/applet/index.html b/files/de/web/html/element/applet/index.html new file mode 100644 index 0000000000..3d9424ebbb --- /dev/null +++ b/files/de/web/html/element/applet/index.html @@ -0,0 +1,139 @@ +--- +title: +slug: Web/HTML/Element/applet +tags: + - Element + - HTML + - Obsolete + - Referenz + - Web +translation_of: Web/HTML/Element/applet +--- +
+ {{obsolete_header}}
+

Übersicht

+

Das HTML Applet Element (<applet>) identifiziert die Einbindung eines Java Applets.

+
+

Hinweis zur Benutzung: Dieses Element wurde in HTML5 entfernt und sollte nicht mehr verwendet werden. Stattdessen sollten Webentwickler das generische {{HTMLElement("object")}} Element verwenden.

+
+

Attribute

+
+
+ {{htmlattrdef("align")}}
+
+ Dieses Attribut wird verwendet um die Position des Applets relativ zum Inhalt auf der Seite zu bestimmen. Die HTML 4.01 Spezifikation definiert die Werte bottom, left, middle, right und top, während Microsoft und Netscape ebenso absbottom, absmiddle, baseline, center und texttop unterstützen.
+
+ {{htmlattrdef("alt")}}
+
+ Dieses Attribut bewirkt eine beschreibende Textalternative welche angezeigt wird, wenn der Browser kein Java unterstützt. Designer sollten daran denken, dass Inhalte die innerhalb des <applet> Elements liegen, auch als Alternativtext dargestellt werden könnten.
+
+ {{htmlattrdef("archive")}}
+
+ Dieses Attribut verweist zu einer archivierten oder komprimierten Version des Applets und der damit assoziierten Klassen-Datei. Die Anwendung dieses Attributs kann dabei helfen, die Download-Zeit zu verkürzen.
+
+ {{htmlattrdef("code")}}
+
+ Dieses Attribut spezifiziert die URL der Applet Klassendatei die geladen und ausgeführt wird. Applet Dateinamen werden identifiziert mit Hilfe der Extension .class. Die vom Code angegebene URL kann in Bezug mit dem codebase-Attribut stehen.
+
+ {{htmlattrdef("codebase")}}
+
+ Dieses Attribut gibt die absolute oder die relative URL vom Pfad der Applet-Klassendatei an, welche vom code Attribut gespeichert wird.
+
+ {{htmlattrdef("datafld")}}
+
+ Dieses Attribut, unterstützt vom Internet Explorer 4 oder höher, spezifiziert den Spaltennamen des Data Source Objects welches die gebundenen Daten liefert. Es kann genutzt werden, um die verschiedenen {{HTMLElement("param")}} Elemente aufzulisten, welche an das Java Applet durchgereicht werden.
+
+ {{htmlattrdef("datasrc")}}
+
+ Ähnlich wie datafld, wird dieses Attribut zur Datenbindung unter dem Internet Explorer 4 genutzt. Es bestimmt die ID des Data Source Objects, welches die Daten liefert, die mit {{HTMLElement("param")}} Elementen innerhalb des Applets assoziiert sind.
+
+ {{htmlattrdef("height")}}
+
+ Dieses Attribut spezifiziert die Höhe in Pixeln, die das Applet benötigt.
+
+ {{htmlattrdef("hspace")}}
+
+ Dieses Attribut spezifiziert zusätzlichen horizontalen Platz in Pixeln, der für das Applet reserviert wird.
+
+ {{htmlattrdef("mayscript")}}
+
+ In der Netscape Implementierung erlaubt dieses Attribut den Zugriff auf Applets durch Programme, die innerhalb einer Skriptsprache im Dokument eingebettet sind.
+
+ {{htmlattrdef("name")}}
+
+ Dieses Attribut weist dem Applet einen Namen zu, sodass es von anderen Ressourcen (vorwiegend Scripts) identifiziert werden kann.
+
+ {{htmlattrdef("object")}}
+
+ Dieses Attribut spezifiziert die URL einer serialisierten Darstellung eines Applets.
+
+ {{htmlattrdef("src")}}
+
+ Wenn es nach dem Internet Explorer 4 und höher geht, dient dieses Attribut dazu, eine URL für eine verknüpfte Datei eines Applets zu spezifizieren. Die Bedeutung und die Benutzung ist unklar und kein Teil des HTML-Standards.
+
+ {{htmlattrdef("vspace")}}
+
+ Dieses Attribut spezifiziert zusätzlichen vertikalen Platz in Pixeln, der für das Applet ober- und unterhalb reserviert wird.
+
+ {{htmlattrdef("width")}}
+
+ Dieses Attribut spezifiziert die Breite in Pixeln, die das Applet benötigt.
+
+

Beispiel

+
<applet code="game.class" align="left" archive="game.zip" height="250" width="350">
+  <param name="difficulty" value="easy">
+  <b>Sorry, du brauchst Java um dieses Spiel zu spielen.</b>
+</applet>
+
+

Browser Kompatibilität

+

{{CompatibilityTable}}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}
+
+
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+

Anmerkungen

+

Die W3C Spezifikation rät von der Benutzung des <applet> Elements ab und bevorzugt die Nutzung des {{HTMLElement("object")}} Elements. Unter der strikten Definition von HTML 4.01 ist dieses Element veraltet und überflüssig in HTML5.

+
+ {{HTMLRef}}
diff --git a/files/de/web/html/element/area/index.html b/files/de/web/html/element/area/index.html new file mode 100644 index 0000000000..e279ff7b90 --- /dev/null +++ b/files/de/web/html/element/area/index.html @@ -0,0 +1,174 @@ +--- +title: +slug: Web/HTML/Element/area +tags: + - Eingebettet + - Element + - HTML + - Inhalt + - Multimedia + - Referenz + - Web +translation_of: Web/HTML/Element/area +--- +

Übersicht

+ +

Das HTML-Element <area> definiert einen Bereich auf einem Bild als Hot-Spot. Optional kann auf diesem Bereich ein {{Glossary("Hyperlink", "Hyperlink")}} hinterlegt werden. Dieses Element kann nur innerhalb eines {{HTMLElement("map")}} Elements verwendet werden.

+ + + + + + + + + + + + + + + + + + + + + + + + +
InhaltskategorienFließender Inhalt, Formulierung.
Erlaubter InhaltKeiner, es ist ein {{Glossary("empty element", "leeres Element")}}.
Tag WegfallEs muss einen Start-Tag und keinen End-Tag geben.
Erlaubte ElternelementeJedes Element, das Formulierungen akzeptiert. Das <area> Element muss direkt oder indirekt ein Kind eines {{HTMLElement("map")}} Elements sein.
DOM interface{{domxref("HTMLAreaElement")}}
+ +

Attribute

+ +

Dieses Element besitzt die globalen Attribute globalen Attribute.

+ +
+
{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}
+
Spezifiziert einen Tastatur-Shortcut für dieses Element. Eine Tastenkombination mit ALT oder einer ähnlichen Taste in Verbindung mit dem angegebenen Zeichen selektiert die damit assoziierte From Control. Dabei sollten keine von Webbrowsern vorbelegten Tastenkombinationen verwendet werden. Dieses Attribut ist seit HTML5 global.
+
+ +
+
{{htmlattrdef("alt")}}
+
Ein alternativer Text zum Einblenden, wenn der Webbrowser keine Bilder darstellt. Der Text soll dem Benutzer den Inhalt des Bildes beschreiben. In HTML4 ist dieses Attribut verpflichtend aber es kann ein leerer Text ("") angegeben werden. In HTML5 ist dieses Attribute nur verpflichtend, wenn das href Attribut vewendet wird.
+
+ +
+
{{htmlattrdef("coords")}}
+
Eine Menge von Werten, welche die Koordinaten des Hot-Spot Bereichs angeben. Die Anzahl und die Bedeutung der Werte hängt von dem Wert des shape Attributs ab. Für rect (rechteckige Form) beinhaltet der Wert von coords zwei x,y Pare: left, top, right und bottom. Für circle (kreisförmige Form) besteht der Wert aus x,y,r. Dabei sind x,y ein Paar, dass die Position des Kreismittelpunkt angibt und r ist der Radius. Für poly (Polygon) beinhaltet der Wert mehrere x,y Paare, wobei jedes Paar für einen Punkt im Polygon steht: x1,y1,x2,y2,x3,y3, usw. In HTML4 sind die Werte die Anzahl Pixel oder Prozente, wenn ein Prozentzeichen (%) angehängt wird. In HTML5 sind die Werte die Anzahl von CSS Pixel.
+
{{htmlattrdef("download")}} {{HTMLVersionInline("5")}}
+
Dieses Attribut gibt an, sofern es verwendet wird, dass der Autor den Hyperlink zum Dowload einer Ressource verwendet. Siehe {{HTMLElement("a")}} für eine vollständige Beschreibung des {{htmlattrxref("download", "a")}} Attributs.
+
+ +
+
{{htmlattrdef("href")}}
+
Das Ziel des Hyperlinks für diesen Bereich. Der Wert muss eine gültige URL sein. In HTML4 muss entweder dieses Attribut oder das nohref Attribut im Element sein. In HTML5 kann dieses Attribut ausgelassen werden. In diesem Fall repräsentiert das area Element keinen Hyperlink.
+
+ +
+
{{htmlattrdef("hreflang")}} {{HTMLVersionInline("5")}}
+
Gibt die Sprache der verlinkten Ressource an. Erlaubte Werte sind in BCP47 bestimmt worden. Dieses Attribut sollte nur zusammen mit einem href Attribut verwendet werden.
+
+ +
+
{{htmlattrdef("name")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}
+
Definiert einen Namen für den anklickbaren Bereich, damit er von älternen Webbrowserns mittels Scripting verwendet werden kann.
+
+ +
+
{{htmlattrdef("media")}} {{HTMLVersionInline("5")}}
+
Ein Hinweis zum Medium, für welches die verlinkte Ressource ausgelegt ist (zum Beispiel: print und screen.). Wenn es ausgelassen wird, wird der Standardwert all angenommen. Dieses Attribut sollte nur zusammen mit einem href Attribut verwendet werden.
+
+ +
+
{{htmlattrdef("nohref")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}
+
Gibt an, dass auf diesem Bereich kein Hyperlink hinterlegt ist. Es muss entweder dieses Attribut oder das href Attribut in diesem Element verwendet werden. +
+

Verwendungshinweis: Dieses Attribut ist seit HTML5 veraltet. Stattdessen ist das Auslassen des href Attributs ausreichend.

+
+
+
+ +
+
{{htmlattrdef("rel")}} {{HTMLVersionInline("5")}}
+
Dieses Attribut spezifiziert für Anker im href Attribut die Beziehung zwischen dem Zielobjekt und dem Linkobjekt. Der Wert ist eine kommaseparierte Liste von Linktypen. Die Werte und deren Semantik werden von Autorität eingetragen, welche die entsprechenden Rechte am Dokument besitzt. Der Standardwert ist void, wenn kein anderer Wert angegeben ist. Dieses Attribut sollte nur zusammen mit einem href Attribut verwendet werden.
+
{{htmlattrdef("shape")}}
+
Die Form vom Hot-Spot. Die Spezifikationen für HTML 5 und HTML 4 definieren die Werte rect (rechteckiger Bereich), circle (kreisförmiger Bereich), poly (für ein Polygon) und default (für den ganzen Bereich außerhalb der definierten Bereiche). Viele Webbrowser, insbesonders Internet Explorer 4 und höher, unterstützen circ, polygon und rectangle als gültige Werte für shape, welche nicht spezifiziert sind {{Non-standard_inline}}.
+
+ +
+
{{htmlattrdef("tabindex")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}
+
Ein numerischer Wert, der die Position in der Reihenfolge des Tabbing im Webbrowser definiert. Dieses Attribut ist in HTML5 global.
+
+ +
+
{{htmlattrdef("target")}}
+
Dieses Attribut gibt an, wo die verlinkte Ressource dargestellt werden soll. In HTML4 ist das der Name oder ein Schlüssenwort für einen Frame. In HTML5 ist es der Name oder ein Schlüsselwort für einen browsing context (zum Beispiel: tab, window oder inline frame). Die folgenden Schlüsselwörter haben eine spezielle Bedeutung: +
    +
  • _self: Lädt die Antwort in denselben HTML4 Frame (oder HTML5 browsing context) wie der aktuelle. Das ist der Standardwert, wenn das Attribut nicht angegeben wird.
    • +
  • _blank: Lädt die Antwort in ein neues unbenanntes HTML4 Fenster oder HTML5 browsing context.
    • +
  • _parent: Lädt die Antwort in  das HTML4 Frameset Parent des aktuellen Framee oder in den HTML5 parent browsing context des aktuellen. Wenn es kein Parent gibt, verhält sich diese Option wie _self.
    • +
  • _top: In HTML4: Lädt die Antwort in das volle, originale Fenster und löscht alle anderen Frames. In HTML5: Lädt die Antwort in den top-level browsing context (der browsing context, der ein Parent des aktuellen ist und selbst kein Parent hat). Wenn es kein Parent gibt, verhält sich diese Option wie _self.
    • +
+ Dieses Attribut sollte nur zusammen mit einem href Attribut verwendet werden.
+
{{htmlattrdef("type")}}
+
Dieses Attribut spezifiziert den Medientyp des Linkziels als MIME Type. Normalerweise wird dies streng als beratende Information angeboten. In der Zukunft könnte ein Webbrowser aber ein kleines Icon zum Multimediatyp hinzufügen (zum Beispiel: ein Webbrowser zeigt ein Icon mit einem Lautsprecher an, wenn der Typ auf audio/wav gesetzt ist). Eine vollständige Liste der erkannten MIME types ist unter http://www.w3.org/TR/html4/references.html#ref-MIMETYPES zu finden. Dieses Attribut sollte nur zusammen mit einem href Attribut verwendet werden.
+
+ +

Beispiel

+ +
<map name="primary">
+  <area shape="circle" coords="200,250,25" href="another.htm" />
+  <area shape="default" nohref />
+</map>
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusBemerkung
{{SpecName('HTML WHATWG', 'the-map-element.html#the-area-element', '<area>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-area-element', '<area>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<area>')}}{{Spec2('HTML4.01')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("html.elements.area")}}

+ +

Hinweise

+ +

Unter den HTML 3.2, 4.0 und 5 Spezifikationen ist der End-Tag </area> verboten.

+ +

Die XHTML 1.0 Spezifikation verlangt einen nachfolgenden Slash: <area />.

+ +

Die Attribute id, class, und style haben dieselbe Bedeutung wie die in HTML 4 definierten Kernattribute. Aber nur Netscape und Microsoft definieren sie.

+ +

Netscape 1–level Webbrowser verstehen das target Attribut in dem Sinne, dass es sich auf Frames bezieht.

+ +

HTML 3.2 definiert nur alt, coords, href, nohref und shape.

+ +

{{HTMLRef}}

diff --git a/files/de/web/html/element/article/index.html b/files/de/web/html/element/article/index.html new file mode 100644 index 0000000000..44d07c202c --- /dev/null +++ b/files/de/web/html/element/article/index.html @@ -0,0 +1,146 @@ +--- +title: '
: Das Inhaltselement für Artikel' +slug: Web/HTML/Element/article +tags: + - Element + - HTML + - HTML Bereiche + - HTML5 + - Referenz + - Web +translation_of: Web/HTML/Element/article +--- +
{{HTMLRef}}
+ +

Das HTML-Element <article> stellt eine in sich geschlossene Komposition in einem Dokument, einer Seite, Anwendung oder Website dar, die unabhängig verteilt oder wiederverwendbar sein soll (z. B. bei Syndikation), z. B. ein Forumsbeitrag, ein Zeitschriften- oder Zeitungsartikel oder ein Blogeintrag.

+ +
{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}
+ + + +

Ein bestimmtes Dokument kann mehrere Artikel enthalten, z. B. in einem Blog, in dem der Text jedes Artikels nacheinander angezeigt wird, während der Leser blättert, wäre jeder Beitrag in einem <article>-Element mit einem oder mehreren <section>-Elementen enthalten.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
InhaltskategorienFließender Inhalt, Sektionsinhalt, fühlbarer Inhalt
Erlaubter InhaltFließender Inhalt.
Tag Wegfall{{no_tag_omission}}
Erlaubte ElternelementeJedes Element das fließenden Inhalt erlaubt. Beachten Sie, dass ein <article>-Element kein Nachkomme eines {{HTMLElement("address")}}-Elements sein darf.
Erlaubte ARIA Rollen{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}
DOM-Schnittstelle{{domxref("HTMLElement")}}
+ +

Attribute

+ +

Dieses Element unterstützt nur die globalen Attribute.

+ +

Nutzungshinweise

+ +
    +
  • Jeder <article> sollte beschriftet sein, normalerweise indem eine Überschrift (<h1>-<h6>) als untergeordnetes Element des <article>-Elements eingefügt wird.
    • +
  • Wenn ein <article>-Element verschachtelt ist, repräsentiert das innere Element einen Artikel, der sich auf das äußere Element bezieht. Zum Beispiel können die Kommentare eines Blogbeitrags <article>-Elemente sein, die im <article> des Blogbeitrags verschachtelt sind.
    • +
  • Informationen zum Autor eines <article>-Elements können über das {{HTMLElement("address")}}-Element bereitgestellt werden, gelten jedoch nicht für verschachtelte <article>-Elemente.
    • +
  • Das Datum und die Uhrzeit der Veröffentlichung eines <article>-Elements können mit dem Attribut {{htmlattrxref("datetime", "time")}} eines {{HTMLElement("time")}}-Elements beschrieben werden. Beachten Sie, dass das Attribut {{htmlattrxref("pubdate", "time")}} von {{HTMLElement("time")}} nicht mehr Bestandteil des W3C HTML 5-Standards ist.
    • +
+ +

Beispiele

+ +
<article class="film_review">
+  <header>
+    <h2>Jurassic Park</h2>
+  </header>
+  <section class="main_review">
+    <p>Dinos were great!</p>
+  </section>
+  <section class="user_reviews">
+    <article class="user_review">
+      <p>Way too scary for me.</p>
+      <footer>
+        <p>
+          Posted on
+          <time datetime="2015-05-16 19:00">May 16</time>
+          by Lisa.
+        </p>
+      </footer>
+    </article>
+    <article class="user_review">
+      <p>I agree, dinos are my favorite.</p>
+      <footer>
+        <p>
+          Posted on
+          <time datetime="2015-05-17 19:00">May 17</time>
+          by Tom.
+        </p>
+      </footer>
+    </article>
+  </section>
+  <footer>
+    <p>
+      Posted on
+      <time datetime="2015-05-15 19:00">May 15</time>
+      by Staff.
+    </p>
+  </footer>
+</article>
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'semantics.html#the-article-element', '<article>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML5 W3C')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("html.elements.article")}}

+ +

Siehe auch

+ +
    +
  • Andere abschnittsbezogene Elemente: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}
    • +
  • Abschnitte und Umrisse eines HTML5-Dokuments
    • +
diff --git a/files/de/web/html/element/aside/index.html b/files/de/web/html/element/aside/index.html new file mode 100644 index 0000000000..d37db02004 --- /dev/null +++ b/files/de/web/html/element/aside/index.html @@ -0,0 +1,107 @@ +--- +title: